/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --blue:#2B68AB;
  --blue-deep:#0D2D5C;
  --teal:#3EBDC4;
  --teal-panel:#52C3CA;
  --yellow:#FBCF09;
  --yellow-ink:#9A7C00;     /* accessible yellow-family text on white */
  --red:#EE3B25;
  --green:#16A34A;
  --ink:#2A2A28;
  --muted:#6E6E6C;
  --faint:#9A9A98;
  --line:#DFE7EF;
  --line-soft:#EDF2F8;     /* hairline: table rules, list dividers */
  --wash:#ECF5FC;
  --white:#FFFFFF;

  --display:"Archivo",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --body:"Barlow",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;

  --container:1058px;
  --gutter:24px;
  --divider:linear-gradient(90deg,#2B68AB 0%,#3EB8C3 33%,#FCCD0D 66%,#EF5622 100%);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit}

.wrap{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}

.h1,.h2{font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;letter-spacing:-.005em;margin:0;color:var(--ink)}
.h1{font-size:clamp(2rem,3.6vw,3.15rem);line-height:.96}
.h2{font-size:clamp(1.7rem,2.8vw,2.5rem);line-height:1.02}
.eyebrow{font-family:var(--body);font-weight:600;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;margin:0 0 14px}
.lede{max-width:560px;margin:16px auto 0;color:var(--muted);font-size:.95rem}
.section-head{text-align:center}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:11px 22px;border-radius:999px;border:2px solid transparent;font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;line-height:1;white-space:nowrap;transition:background .18s,color .18s,transform .18s;box-sizing:border-box;cursor:pointer;vertical-align:middle;-webkit-appearance:none;appearance:none;text-decoration:none;font-family:var(--display)}
button.btn{margin:0;background-image:none}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:#d63118}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:#215688}
.btn-yellow{background:var(--yellow);color:var(--ink)}
.btn-yellow:hover{background:#ecbe00}
.btn-outline{border-color:var(--yellow);color:var(--yellow)}
.btn-outline:hover{background:var(--yellow);color:var(--ink)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--muted)}
.btn-ghost:hover{border-color:var(--muted);color:var(--ink)}

.divider{height:10px;background:var(--divider)}

/* ============================================================
   HEADER + MEGA MENU
   ============================================================ */
.site-header{position:sticky;top:0;z-index:600;background:#fff;border-bottom:1px solid var(--line)}
.site-header__inner{height:72px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;width:100%;max-width:1400px;margin:0 auto;padding:0 28px}
.header__left{display:flex;align-items:center;gap:16px;justify-self:start}
.hamburger{background:none;border:0;padding:8px 0;display:flex;flex-direction:column;gap:5px}
.hamburger span{display:block;width:24px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
.hamburger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.is-open span:nth-child(2){opacity:0}
.hamburger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.wordmark-lockup{position:relative;justify-self:center;display:block;width:180px;max-width:25vw}
.wordmark{display:block}
.wordmark__image{display:block;width:100%;height:auto}
.wordmark__voice{position:absolute;left:49%;top:4%;width:50%;height:48%;z-index:2;
  border:0;background:transparent;pointer-events:none;cursor:pointer;border-radius:8px}
.vicki-header-trigger{pointer-events:auto}
.vicki-header-trigger:hover,.vicki-header-trigger:focus-visible{
  --vicki-greeting-fill:linear-gradient(100deg,var(--teal) 5%,#57dbe0 48%,var(--blue) 96%)}
.vicki-header-trigger:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

.util{display:flex;align-items:center;justify-content:flex-end;gap:12px;font-size:.75rem;color:var(--muted)}
.util a:hover{color:var(--teal)}
.util .bar{width:1px;height:12px;background:var(--line)}
.locale{display:flex;align-items:center;gap:6px}
.locale button{background:none;border:1px solid transparent;padding:2px 8px;border-radius:3px;color:var(--muted);font-weight:600;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase}
.locale button.is-on{color:var(--ink);border-color:var(--ink)}

.mega{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:3px solid var(--blue);box-shadow:0 14px 34px rgba(20,30,45,.10);z-index:599;display:none}
.mega.is-open{display:block}
.mega__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;width:100%;max-width:1400px;margin:0 auto;padding:32px 28px 36px}
.mega__col h4{margin:0 0 14px;padding-bottom:9px;font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:.72rem;color:var(--ink);border-bottom:2px solid var(--blue)}
.mega__col.t h4{border-color:var(--teal)}
.mega__col.y h4{border-color:var(--yellow)}
.mega__col.r h4{border-color:var(--red)}
.mega__col a{display:block;font-size:.82rem;color:var(--muted);padding:5px 0}
.mega__col a:hover{color:var(--blue)}
.mega__col a.sub{padding-left:10px;border-left:2px solid var(--line);margin-bottom:2px;font-size:.8rem}
.mega__col a.sub:hover{border-left-color:var(--blue)}

/* ============================================================
   HERO — interactive calculator journey
   ============================================================ */
.hero{position:relative;background:#1f2c3a;color:#fff;overflow:hidden}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%;opacity:.5}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,28,38,.78) 0%,rgba(20,28,38,.60) 42%,rgba(20,28,38,.82) 100%)}
.hero__inner{position:relative;z-index:2;width:100%;max-width:1004px;margin:0 auto;padding:0 var(--gutter)}

/* Step pills */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding-top:26px}
.step{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.72);text-align:left;transition:background .18s,color .18s,border-color .18s}
.step:hover{background:rgba(255,255,255,.15);color:#fff}
.step__num{font-family:var(--display);font-style:italic;font-weight:700;font-size:.72rem;width:26px;height:26px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.16);color:#fff}
.step__label{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.68rem;line-height:1.1}
.step.is-active{background:#fff;border-color:#fff;color:var(--ink)}
.step.is-done{color:#fff;border-color:rgba(255,255,255,.4)}
.step:nth-child(1).is-active{color:var(--blue)} .step:nth-child(1).is-active .step__num{background:var(--blue);color:#fff}
.step:nth-child(2).is-active{color:var(--teal)} .step:nth-child(2).is-active .step__num{background:var(--teal);color:#fff}
.step:nth-child(3).is-active{color:var(--yellow-ink)} .step:nth-child(3).is-active .step__num{background:var(--yellow);color:var(--ink)}
.step:nth-child(4).is-active{color:var(--red)} .step:nth-child(4).is-active .step__num{background:var(--red);color:#fff}

.panel{display:none;padding:40px 0 52px;animation:fade .25s ease;min-height:440px}
.panel.is-active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:start}
@media(max-width:820px){.hero-grid{grid-template-columns:1fr;gap:30px}}

.mkt-flag{display:inline-block;font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;border:1px solid rgba(255,255,255,.35);color:rgba(255,255,255,.85);padding:3px 10px;border-radius:3px;margin-bottom:18px}
.hero .eyebrow{color:rgba(255,255,255,.82)}
.hero .h1,.hero .h2{color:#fff}
.hero__lead{margin:18px 0 26px;max-width:46ch;color:rgba(255,255,255,.85);font-size:.95rem;line-height:1.6}

/* Stat card (step 1) */
.stat-card{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:12px;padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:26px 24px}
.stat__value{font-family:var(--display);font-style:italic;font-weight:800;font-size:2rem;line-height:1;margin-bottom:9px}
.stat--b .stat__value{color:#7FB2E4}
.stat--t .stat__value{color:#5BD3DC}
.stat--y .stat__value{color:var(--yellow)}
.stat--r .stat__value{color:#F4674F}
.stat p{margin:0 0 7px;font-size:.78rem;line-height:1.34;color:rgba(255,255,255,.9)}
.stat cite{display:block;font-style:normal;font-size:.6rem;line-height:1.3;color:rgba(255,255,255,.55)}

/* Chips (step 2) */
.chip-legend{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.leg{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:3px}
.leg.b{background:rgba(127,178,228,.22);color:#bcd8f2}
.leg.t{background:rgba(91,211,220,.20);color:#a6ebef}
.leg.y{background:rgba(251,207,9,.20);color:#f4d97a}
.leg.r{background:rgba(244,103,79,.22);color:#f6b3a6}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.chip{font-family:var(--body);font-size:.78rem;font-weight:600;padding:8px 13px;border-radius:6px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:rgba(255,255,255,.85);transition:background .12s,border-color .12s,color .12s}
.chip:hover{border-color:rgba(255,255,255,.6)}
.chip.is-on.b{background:var(--blue);border-color:var(--blue);color:#fff}
.chip.is-on.t{background:var(--teal);border-color:var(--teal);color:#fff}
.chip.is-on.y{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.chip.is-on.r{background:var(--red);border-color:var(--red);color:#fff}
.prod-info{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:22px;min-height:150px}
.prod-info__name{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:1rem;margin:0 0 10px}
.prod-info__desc{font-size:.85rem;line-height:1.6;color:rgba(255,255,255,.86);margin:0}

/* Intelligence panel (step 3) */
.intel{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:24px;margin-bottom:30px}
.intel__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.intel__badge{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff;padding:3px 9px;border-radius:3px}
.intel__sub{font-size:.82rem;color:rgba(255,255,255,.72);margin-bottom:16px;max-width:70ch}
.intel__inputs{display:flex;gap:10px;flex-wrap:wrap}
.field-dark{flex:1;min-width:150px;padding:11px 13px;border:1px solid rgba(255,255,255,.28);border-radius:6px;background:rgba(255,255,255,.10);color:#fff}
.field-dark::placeholder{color:rgba(255,255,255,.55)}
.field-dark:focus{outline:2px solid var(--teal);outline-offset:1px}
.intel__loading,.intel__error{display:none;margin-top:16px;text-align:center;font-size:.85rem}
.intel__loading{color:rgba(255,255,255,.8)}
.intel__error{color:#F6B3A6;background:rgba(238,59,37,.14);border-radius:6px;padding:14px}
.spinner{display:inline-block;width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;vertical-align:-4px;margin-right:8px}
@keyframes spin{to{transform:rotate(360deg)}}
.intel__results{display:none;margin-top:20px}
.intel__main{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:620px){.intel__main{grid-template-columns:1fr}}
.intel__map{width:100%;height:210px;border:0;border-radius:8px;background:rgba(255,255,255,.1)}
.intel__map-lbl{font-size:.68rem;color:rgba(255,255,255,.6);text-align:center;margin-top:6px}
.score-card{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:18px}
.score-top{display:flex;justify-content:space-between;gap:12px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid rgba(255,255,255,.16)}
.score-lbl{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:4px}
.score-num{font-family:var(--display);font-style:italic;font-weight:800;font-size:2.4rem;line-height:1}
.score-sub{font-size:.68rem;color:rgba(255,255,255,.6);margin-top:3px}
.rank{text-align:right}
.rank-num{font-family:var(--display);font-style:italic;font-weight:800;font-size:1.7rem;line-height:1;color:#7FB2E4}
.rank-lbl{font-size:.62rem;color:rgba(255,255,255,.6);line-height:1.4;margin-top:3px}
.plat{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.plat-nm{font-size:.68rem;font-weight:600;color:rgba(255,255,255,.85);width:74px;flex-shrink:0}
.plat-track{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden}
.plat-bar{height:100%;border-radius:3px;transition:width .6s ease}
.plat-sc{font-size:.68rem;font-weight:700;width:24px;text-align:right;flex-shrink:0}
.plat-ct{font-size:.62rem;color:rgba(255,255,255,.55);width:60px;text-align:right;flex-shrink:0}
.sec-mini{font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);margin:20px 0 10px}
.comp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:520px){.comp-grid{grid-template-columns:1fr 1fr}}
.comp{position:relative;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:14px;overflow:hidden}
.comp::before{content:"";position:absolute;top:0;left:0;right:0;height:3px}
.comp.win::before{background:var(--green)}
.comp.lose::before{background:var(--red)}
.comp-nm{font-size:.68rem;font-weight:600;line-height:1.3;margin-bottom:5px}
.comp-sc{font-family:var(--display);font-style:italic;font-weight:800;font-size:1.3rem;line-height:1}
.comp.win .comp-sc{color:#5BD98A}.comp.lose .comp-sc{color:#F6957F}
.comp-dist{font-size:.62rem;color:rgba(255,255,255,.6);margin-top:3px}
.comp-badge{font-size:.62rem;font-weight:700;margin-top:6px}
.comp.win .comp-badge{color:#5BD98A}.comp.lose .comp-badge{color:#F6957F}
.intel__lower{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:520px){.intel__lower{grid-template-columns:1fr}}
.opp{display:flex;gap:9px;align-items:flex-start;font-size:.78rem;color:rgba(255,255,255,.85);margin-bottom:7px;line-height:1.5}
.opp-dot{width:7px;height:7px;border-radius:50%;background:var(--teal);flex-shrink:0;margin-top:5px}
.alert{background:rgba(238,59,37,.14);border-left:3px solid var(--red);border-radius:6px;padding:12px 14px}
.alert-hd{font-size:.68rem;font-weight:700;color:#F6957F;margin-bottom:4px}
.alert-bd{font-size:.78rem;color:rgba(255,255,255,.85);line-height:1.5}
.intel__pos{display:none;background:var(--blue);border-radius:8px;padding:16px 18px;margin-top:16px}
.pos-lbl{font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:4px}
.pos-txt{font-size:.85rem;color:#fff;line-height:1.6;font-style:italic}
.intel__disc{font-size:.62rem;color:rgba(255,255,255,.55);margin-top:16px;padding-top:12px;border-top:1px solid rgba(255,255,255,.14);line-height:1.5}

/* ROI calculator (step 3) */
.calc-fields .field-block{margin-bottom:16px}
.field-block label{display:block;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:6px}
.field-block .hint{font-weight:400;text-transform:none;letter-spacing:0;color:rgba(255,255,255,.5)}
.calc-note{font-size:.66rem;color:rgba(255,255,255,.55);line-height:1.5;margin:6px 0 20px}
.calc-note a{color:inherit;text-decoration:underline}
.stat cite a{color:inherit;text-decoration:underline}
.calc-card{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.2);border-top:3px solid var(--blue);border-radius:10px;padding:22px}
.roi-banner{background:var(--blue);border-radius:8px;padding:18px;margin-bottom:16px}
.roi-lbl{font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:4px}
.roi-num{font-family:var(--display);font-style:italic;font-weight:800;font-size:2.6rem;line-height:1;color:#fff}
.roi-sub{font-size:.68rem;color:rgba(255,255,255,.7);margin-top:4px}
.res-row{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:.78rem}
.res-row:last-child{border-bottom:0}
.res-lbl{color:rgba(255,255,255,.82)}
.res-val{font-weight:700;white-space:nowrap}

/* Get started (step 4) */
.vps{display:grid;gap:14px;margin:8px 0 4px}
.vp{display:flex;gap:14px;align-items:flex-start}
.vp-dot{width:34px;height:34px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-style:italic;font-weight:700;font-size:.72rem;color:#fff}
.vp-dot.b{background:var(--blue)}.vp-dot.t{background:var(--teal)}.vp-dot.y{background:var(--yellow);color:var(--ink)}.vp-dot.r{background:var(--red)}
.vp-txt strong{display:block;font-size:.9rem;margin-bottom:2px}
.vp-txt span{font-size:.8rem;color:rgba(255,255,255,.78);line-height:1.5}
.demo-card{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:22px}
.demo-card h3{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:1rem;margin:0 0 16px}
.demo-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.demo-field{margin-bottom:12px}
.demo-field label{display:block;font-size:.66rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.68);margin-bottom:5px}

.hero-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:4px}

/* Explore bar */
.explore{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.16);text-align:center;padding:16px;color:rgba(255,255,255,.8);background:rgba(15,22,30,.35)}
.explore span{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.7rem}
.explore .arr{display:inline-block;margin-left:8px;animation:bounce 1.8s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ============================================================
   PRODUCT SUITE
   ============================================================ */
.suite{background:var(--wash);padding:76px 0 80px}
.suite .eyebrow{color:var(--teal)}
.suite .h2{max-width:16ch;margin:0 auto}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:64px}
.product{background:#fff;border-radius:8px;border-top:3px solid var(--blue);padding:26px 22px;min-height:220px;transition:transform .2s,box-shadow .2s}
.product.fam-t{border-top-color:var(--teal)}
.product.fam-r{border-top-color:var(--red)}
.product:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(40,40,40,.10)}
.product__logo{height:26px;margin-bottom:20px;display:flex;align-items:center}
/* Pie uses the full lockup (with tagline) — give it a bit more height to stay legible */
.product[href*="pie"] .product__logo{height:40px}
.product__logo img{height:100%;width:auto}
.product__name{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.86rem;margin:0 0 9px;color:var(--ink)}
.product p{margin:0;font-size:.78rem;line-height:1.5;color:var(--muted)}

/* ============================================================
   CATEGORY TILES
   ============================================================ */
.tiles{display:grid;grid-template-columns:repeat(4,1fr)}
.tile{position:relative;min-height:554px;display:flex;align-items:flex-end;padding:0 26px 34px;color:#fff;overflow:hidden}
.tile__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(18,24,30,.92) 8%,rgba(18,24,30,.55) 38%,rgba(18,24,30,0) 68%)}
.tile:hover .tile__img{transform:scale(1.04)}
.tile__body{position:relative;z-index:2}
.tile__title{font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:1.4rem;line-height:1.06;margin:0 0 10px;max-width:11ch}
.tile p{margin:0;font-size:.75rem;line-height:1.5;color:rgba(255,255,255,.86);max-width:33ch}

/* ============================================================
   SUCCESS STORIES
   ============================================================ */
.stories{padding:74px 0 80px;background:#fff;overflow:hidden}
.stories .eyebrow{color:var(--red)}
.rail{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:56px;max-width:var(--container);margin-left:auto;margin-right:auto;padding-inline:var(--gutter)}
.rail::-webkit-scrollbar{display:none}
.story{scroll-snap-align:center;text-align:center}
.story__quote{position:relative;background:var(--wash);border-radius:10px;padding:26px 28px;margin:0;text-align:left;font-size:.82rem;line-height:1.55;text-transform:uppercase;letter-spacing:.01em;color:var(--ink)}
.story__quote::after{content:"";position:absolute;left:40px;bottom:-8px;width:18px;height:18px;background:var(--wash);transform:rotate(45deg)}
.story__role{margin-top:30px;color:var(--red);font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:.76rem}
.story__org{font-size:.8rem;color:var(--muted)}

/* ============================================================
   ABOUT
   ============================================================ */
.about{display:grid;grid-template-columns:1fr 1fr;min-height:544px}
.about__panel{background:var(--teal-panel);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:60px 64px 60px max(24px,calc((100vw - var(--container))/2))}
.about__panel .eyebrow{color:rgba(255,255,255,.8)}
.about__panel .h2{color:#fff;max-width:15ch}
.about__lead{font-weight:700;font-size:.95rem;margin:22px 0 12px}
.about__panel p{font-size:.82rem;line-height:1.6;color:rgba(255,255,255,.95);max-width:48ch;margin:0}
.facts{display:flex;flex-wrap:wrap;gap:40px;margin-top:36px}
.fact b{display:block;font-family:var(--display);font-style:italic;font-weight:800;font-size:1.7rem;line-height:1;margin-bottom:4px}
.fact b a{color:inherit}
.fact span{font-size:.72rem;color:rgba(255,255,255,.9)}
.about__media{position:relative;display:grid;place-items:center;background:#2f3a44}
.about__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.play{position:relative;z-index:2;width:62px;height:62px;border-radius:50%;border:0;background:rgba(255,255,255,.94);display:grid;place-items:center;transition:transform .2s}
.play:hover{transform:scale(1.07)}
.play::after{content:"";margin-left:4px;border-left:16px solid var(--ink);border-top:10px solid transparent;border-bottom:10px solid transparent}

/* ============================================================
   PARTNERS
   ============================================================ */
.partners{padding:74px 0 78px;background:#fff}
.partners .eyebrow{color:var(--yellow-ink)}
.partner-row{display:flex;align-items:center;justify-content:space-between;gap:40px;margin-top:60px;padding:0 24px;flex-wrap:wrap}
.partner-row span{font-family:var(--display);font-weight:700;letter-spacing:.04em;font-size:1.3rem;color:#B7C2CD;transition:color .2s}
.partner-row span:hover{color:var(--muted)}
.partner-logo{height:34px;width:auto;max-width:170px;object-fit:contain;opacity:.55;filter:grayscale(1);transition:opacity .25s,filter .25s}
.partner-logo:hover{opacity:1;filter:grayscale(0)}

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta{position:relative;background:var(--blue-deep) url(../img/backgrounds/band-gradient.jpg) center/cover no-repeat;color:#fff;overflow:hidden}
.cta__inner{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;width:100%;max-width:1004px;margin:0 auto;padding:48px var(--gutter)}
.cta .eyebrow{color:var(--yellow)}
.cta .h2{color:#fff;max-width:18ch}
.cta__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.cta__devices{justify-self:end}
.cta__devices img{max-width:340px}
@media(max-width:820px){.cta__inner{grid-template-columns:1fr}.cta__devices{display:none}}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{background:var(--wash);padding:76px 0 84px}
.contact .eyebrow{color:var(--teal)}
.contact__lines{margin:18px 0 0;font-size:.82rem;font-weight:600;color:var(--teal);text-transform:uppercase;letter-spacing:.04em}
.contact__lines a:hover{text-decoration:underline}
.contact__lines .dot{color:var(--muted);margin:0 8px}
.form{max-width:1004px;margin:46px auto 0;border-top:1px solid #D8E4EE;padding-top:32px}
.form__legend{display:block;text-align:center;margin-bottom:28px;font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:var(--ink)}
.form-row{display:grid;gap:22px;margin-bottom:22px}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.field label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;padding:13px 14px;border:1px solid #D8E4EE;border-radius:5px;background:#fff;font-family:var(--body);font-size:.88rem;color:var(--ink)}
.field select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236E6E6C' stroke-width='1.5'/></svg>");background-repeat:no-repeat;background-position:right 14px center;background-size:12px}
.field textarea{min-height:104px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal)}
.form__submit{width:100%;border:0;border-radius:5px;padding:15px;margin-top:6px;background:var(--teal);color:#fff;font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;transition:background .2s}
.form__submit:hover{background:#2FA9B0}
.form__submit:disabled{opacity:.6;cursor:not-allowed}
.form__status{margin-top:14px;padding:12px 14px;border-radius:5px;font-size:.85rem;text-align:center}
.form__status--success{background:#EAFBF1;color:var(--green);border:1px solid #C8EFDA}
.form__status--error{background:#FDEEEC;color:var(--red);border:1px solid #F6CFC8}
.form__hint{margin:7px 0 0;font-size:.74rem;line-height:1.45;color:var(--faint)}
.form__optional{font-weight:400;color:var(--faint)}
.field input[type="file"]{padding:10px;background:var(--wash);cursor:pointer}
.field input[type="file"]::file-selector-button{border:0;border-radius:4px;padding:8px 11px;margin-right:10px;background:var(--blue);color:#fff;font:600 .76rem var(--body);cursor:pointer}
.form__consent{display:flex;align-items:flex-start;gap:10px;margin:0 0 18px;color:var(--muted);font-size:.76rem;line-height:1.5}
.form__consent input{flex:0 0 auto;margin-top:3px}
.form__consent a{color:var(--blue);font-weight:600}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:#222;color:#8C8C8A;padding:56px 0 0;font-size:.78rem}
.site-footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
.site-footer svg{height:16px;width:auto}
.footer__note{margin:16px 0 0;max-width:28ch;font-style:italic;color:#78787A;line-height:1.5}
.footer-social{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin-top:15px}
.footer-social a{width:32px;height:32px;display:grid;place-items:center;border:1px solid #414145;border-radius:8px;background:rgba(255,255,255,.025);color:#8c8c8a;transition:color .18s,border-color .18s,background .18s,transform .18s}
.footer-social a:hover{color:#fff;border-color:var(--teal);background:rgba(66,199,204,.1);transform:translateY(-1px)}
.footer-social a:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.footer-social svg{width:14px;height:14px;fill:currentColor}
.site-footer h4{margin:0 0 16px;color:#fff;font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;letter-spacing:.13em;font-size:.68rem}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.site-footer a:hover{color:#fff}
.footer__base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-top:52px;padding:18px 0 30px;font-size:.7rem;color:#78787A}
.footer__base nav{display:flex;gap:24px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1080px){
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .about{grid-template-columns:1fr}
  .about__panel{padding:52px 32px}
  .about__media{min-height:340px}
  .rail{grid-template-columns:1fr;padding-inline:24px}
  .story{flex-basis:min(520px,86vw)}
  .site-footer__grid{grid-template-columns:1fr 1fr}
  .mega__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .wordmark-lockup{width:160px;max-width:38vw}
  .util .hide-sm{display:none}
  .steps{grid-template-columns:1fr 1fr}
  .stat-card{grid-template-columns:1fr}
  .comp-grid{grid-template-columns:1fr}
  .product-grid{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr}
  .tile{min-height:380px}
  .partner-row{justify-content:center;gap:30px}
  .cols-3,.cols-2,.demo-two{grid-template-columns:1fr}
  .site-footer__grid{grid-template-columns:1fr}
  .footer__base{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ============================================================
   INTERIOR PAGES (products, why-vicimus, contact, etc.)
   Added for the multi-page build. Reuses all tokens above.
   ============================================================ */

/* Sub-hero used on every interior page */
.subhero{position:relative;background:#1f2c3a;color:#fff;overflow:hidden}
.subhero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}
.subhero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,28,38,.82),rgba(20,28,38,.72))}
.subhero__inner{position:relative;z-index:2;max-width:var(--container);margin:0 auto;padding:64px var(--gutter) 70px}
.subhero__logo{height:30px;width:auto;margin-bottom:22px}
.subhero .eyebrow{color:rgba(255,255,255,.82)}
.subhero .h1{color:#fff;max-width:20ch}
.subhero__lead{margin:18px 0 26px;max-width:60ch;color:rgba(255,255,255,.85);font-size:1rem;line-height:1.6}
.subhero__actions{display:flex;flex-wrap:wrap;gap:14px}

/* Plain subhero variant: no bg photo/actions (legal pages) — trims the
   vertical padding since there's no image to fill the extra height for. */
.subhero--plain .subhero__inner{padding:48px var(--gutter) 46px}
.subhero--plain .subhero__lead{margin-bottom:0}

/* Breadcrumb */
.crumbs{background:var(--wash);border-bottom:1px solid var(--line)}
.crumbs__inner{max-width:var(--container);margin:0 auto;padding:12px var(--gutter);font-size:.76rem;color:var(--muted)}
.crumbs a:hover{color:var(--teal)}
.crumbs .sep{margin:0 8px;color:var(--faint)}

/* Generic section rhythm */
.section{padding:72px 0}
.section--wash{background:var(--wash)}
.section--tight{padding:56px 0}
.section .eyebrow{color:var(--teal)}
.prose{max-width:720px}
.prose p{color:var(--muted);font-size:.98rem;line-height:1.75;margin:0 0 16px}
.prose .h2{margin-bottom:18px}

/* Legal pages (privacy/terms/casl) — numbered sections, headings + lists
   inside .prose that otherwise only styles <p>. */
.legal-prose{max-width:760px}
.legal-section{margin:0 0 36px}
.legal-section:last-child{margin-bottom:0}
.legal-section h2{font-size:1.15rem;font-weight:700;color:var(--ink);margin:0 0 14px;line-height:1.3}
.legal-section ul,.legal-section ol{margin:0 0 16px;padding-left:1.3em;color:var(--muted);font-size:.98rem;line-height:1.75}
.legal-section li{margin:0 0 8px}
.legal-section li:last-child{margin-bottom:0}
.legal-section strong{color:var(--ink);font-weight:600}
.legal-section a{color:var(--teal)}
.legal-section a:hover{text-decoration:underline}
.centered{text-align:center}
.centered .lede{margin-left:auto;margin-right:auto}

/* Intro split: heading left, body right */
.intro-split{display:grid;grid-template-columns:0.9fr 1.1fr;gap:44px;align-items:start}
@media(max-width:820px){.intro-split{grid-template-columns:1fr;gap:20px}}

/* Founders spotlight (team.html) — two overlapping portraits beside the
   founding-story prose. Distinct from .intro-split (heading vs. body) on
   purpose: this pairs faces with a story, not a heading with a paragraph. */
.founders{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center}
.founders__photos{display:flex}
.founders__photo{width:132px;height:132px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 4px #fff,0 0 0 5px var(--line);position:relative}
.founders__photo + .founders__photo{margin-left:-28px}
.founders__story p{margin:0 0 16px}
.founders__story p:last-child{margin-bottom:0}
@media(max-width:720px){
  .founders{grid-template-columns:1fr;gap:24px}
  .founders__photos{justify-content:center}
}

/* Feature grid — the "Retention through X" four-up */
.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:8px}
@media(max-width:640px){.feature-grid{grid-template-columns:1fr}}
.feature{background:#fff;padding:28px 26px}
.feature__k{display:inline-block;font-family:var(--display);font-style:italic;font-weight:700;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--blue);border-radius:4px;padding:3px 9px;margin-bottom:12px}
.feature.t .feature__k{background:var(--teal)}
.feature.y .feature__k{background:var(--yellow);color:var(--ink)}
.feature.r .feature__k{background:var(--red)}
.feature h3{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.98rem;margin:0 0 8px;color:var(--ink)}
.feature p{margin:0;font-size:.85rem;line-height:1.6;color:var(--muted)}

/* Highlight band (dark, for the "what sets us apart" pull) */
.band{background:var(--blue-deep) url(../img/backgrounds/band-gradient.jpg) center/cover no-repeat;color:#fff}
.band__inner{max-width:var(--container);margin:0 auto;padding:60px var(--gutter);display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
@media(max-width:820px){.band__inner{grid-template-columns:1fr}}
.band .eyebrow{color:var(--yellow)}
.band .h2{color:#fff}
.band p{color:rgba(255,255,255,.9);font-size:.95rem;line-height:1.7;margin:14px 0 0}
.band__actions{display:flex;flex-wrap:wrap;gap:14px}
@media(min-width:821px){.band__actions{justify-content:flex-end}}

/* Stat strip */
.stat-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:8px}
@media(max-width:640px){.stat-strip{grid-template-columns:1fr}}
.stat-strip .fig{font-family:var(--display);font-style:italic;font-weight:800;font-size:2.4rem;line-height:1;color:var(--blue)}
.stat-strip .fig.t{color:var(--teal)}.stat-strip .fig.r{color:var(--red)}.stat-strip .fig.y{color:var(--yellow-ink)}
.stat-strip .fig a{color:inherit}.stat-strip .fig--company{font-size:1.45rem;line-height:1.15}
.stat-strip .cap{font-size:.82rem;color:var(--muted);margin-top:8px;line-height:1.5}

/* Related products */
.related{background:var(--wash);padding:72px 0}
.related .related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
@media(max-width:1080px){.related .related-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.related .related-grid{grid-template-columns:1fr}}
.rel-card{display:block;background:#fff;border-radius:8px;border-top:3px solid var(--blue);padding:22px 20px;transition:transform .2s,box-shadow .2s}
.rel-card.t{border-top-color:var(--teal)}.rel-card.r{border-top-color:var(--red)}
.rel-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(40,40,40,.10)}
.rel-card__logo{height:24px;margin-bottom:14px;display:flex;align-items:center}
.rel-card__logo img{height:100%;width:auto}
.rel-card h3{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.82rem;margin:0 0 7px;color:var(--ink)}
.rel-card p{margin:0 0 12px;font-size:.76rem;line-height:1.5;color:var(--muted)}
.rel-card .go{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.68rem;letter-spacing:.06em;color:var(--blue)}

/* Testimonials (reused, lighter variant) */
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:44px}
@media(max-width:720px){.quotes{grid-template-columns:1fr}}
.qcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:26px}
.qcard p{margin:0 0 16px;font-size:.9rem;line-height:1.6;color:var(--ink)}
.qcard cite{font-style:normal;font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--red)}

/* Testimonials on a photo background (photo_quotes_band in build.py) — same
   photo pool, dark gradient mask, and data-parallax hookup as a hero band,
   so the section reads as one consistent treatment rather than a one-off.
   Cards switch to a frosted-glass look (same recipe as .stat-card) and the
   quote text goes white so it stays legible over the photograph; the
   author name keeps the brand red, which already reads fine on dark. */
.section--photo{position:relative;background:#1f2c3a;color:#fff;overflow:hidden}
.section--photo__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}
.section--photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,28,38,.82),rgba(20,28,38,.72))}
.section--photo .wrap{position:relative;z-index:2}
.section--photo .eyebrow{color:rgba(255,255,255,.82)}
.section--photo .h2{color:#fff}
.quotes--photo .qcard{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.quotes--photo .qcard p{color:#fff}
.quotes--photo .qcard cite{color:var(--red)}

/* "Do More" services trio */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
@media(max-width:720px){.services{grid-template-columns:1fr}}
.svc{background:#fff;border:1px solid var(--line);border-radius:10px;padding:28px 24px;text-align:center}
.svc__ico{width:44px;height:44px;margin:0 auto 16px;border-radius:10px;display:grid;place-items:center;background:var(--wash)}
.svc__ico svg{width:22px;height:22px;stroke:var(--blue);fill:none;stroke-width:1.6}
.svc h3{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.86rem;margin:0 0 8px;color:var(--ink)}
.svc p{margin:0;font-size:.82rem;line-height:1.55;color:var(--muted)}

/* Contact / careers layout */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr;gap:30px}}
.contact-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:30px}
.contact-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:16px}
.contact-list li{display:flex;gap:12px;align-items:flex-start}
.contact-list .lbl{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:3px}
.contact-list a,.contact-list span.v{font-size:.95rem;color:var(--ink)}
.contact-list a:hover{color:var(--teal)}

/* Careers / job list */
.jobs{display:grid;gap:14px;margin-top:8px}
.job{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:8px;padding:20px 22px;flex-wrap:wrap}
.job h3{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.95rem;margin:0 0 4px;color:var(--ink)}
.job .meta{font-size:.78rem;color:var(--muted)}

/* Simple content list with checks */
.checklist{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.checklist li{position:relative;padding-left:30px;font-size:.92rem;line-height:1.6;color:var(--ink)}
.checklist li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:var(--teal);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/16px no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/16px no-repeat}

/* Updates / blog placeholder cards */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
@media(max-width:820px){.posts{grid-template-columns:1fr}}
.post{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.post__body{padding:22px}
.post__tag{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:8px}
.post h3{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:1rem;line-height:1.15;margin:0 0 10px;color:var(--ink)}
.post p{margin:0;font-size:.82rem;color:var(--muted);line-height:1.55}

/* ============================================================
   LANGUAGE + REGION PICKER (nav)
   Replaces the old US/CA toggle. Region groups the available
   languages; selecting one routes to that language's page.
   ============================================================ */
.langpick{position:relative}
.langpick__btn{
  display:inline-flex;align-items:center;gap:5px;
  background:none;border:1px solid var(--line);border-radius:4px;
  padding:5px 9px;font-size:.72rem;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink);cursor:pointer;transition:border-color .15s}
.langpick__btn:hover{border-color:var(--muted)}
.langpick__dot{color:var(--faint);font-weight:400}
.langpick__chev{font-size:.6rem;color:var(--muted);margin-left:2px}
.langpick__menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:120;
  min-width:184px;background:#fff;border:1px solid var(--line);border-radius:8px;
  box-shadow:0 12px 30px rgba(20,30,45,.14);padding:6px;display:none}
.langpick__menu.is-open{display:block}
.langpick__grp{
  font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);padding:9px 10px 5px}
.langpick__menu button{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  background:none;border:0;border-radius:5px;padding:8px 10px;
  font-size:.82rem;color:var(--ink);text-align:left;cursor:pointer}
.langpick__menu button:hover{background:var(--wash);color:var(--blue)}
.langpick__menu button.is-active{color:var(--blue);font-weight:600}
.langpick__menu button.is-active::after{content:"✓";font-size:.7rem;color:var(--teal)}

/* ============================================================
   LAYOUT A — Solutions & Markets (problem-first)
   ============================================================ */
.challenges{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
@media(max-width:820px){.challenges{grid-template-columns:1fr}}
.challenge{background:#fff;border:1px solid var(--line);border-top:3px solid var(--red);border-radius:10px;padding:26px 24px}
.challenge h3{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.95rem;line-height:1.15;margin:0 0 10px;color:var(--ink)}
.challenge p{margin:0;font-size:.85rem;line-height:1.6;color:var(--muted)}
.challenge__n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--wash);color:var(--red);font-family:var(--display);font-style:italic;font-weight:700;font-size:.8rem;margin-bottom:14px}

/* "How we help" — product showcase reuses .related-grid + .rel-card */
.helpgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
@media(max-width:1080px){.helpgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.helpgrid{grid-template-columns:1fr}}

/* ============================================================
   LAYOUT C — About / Team
   ============================================================ */
.values{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:44px}
@media(max-width:720px){.values{grid-template-columns:1fr}}
.value{background:#fff;border:1px solid var(--line);border-radius:10px;padding:26px 24px;position:relative}
.value::before{content:"";position:absolute;top:0;left:26px;right:26px;height:3px;border-radius:0 0 3px 3px;background:var(--divider)}
.value h3{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:1rem;margin:6px 0 8px;color:var(--ink)}
.value p{margin:0;font-size:.86rem;line-height:1.6;color:var(--muted)}

.timeline{position:relative;margin-top:44px;padding-left:34px}
.timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl{position:relative;padding-bottom:30px}
.tl:last-child{padding-bottom:0}
.tl::before{content:"";position:absolute;left:-30px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--blue);border:3px solid #fff;box-shadow:0 0 0 1px var(--line)}
.tl:nth-child(2)::before{background:var(--teal)}
.tl:nth-child(3)::before{background:var(--yellow)}
.tl:nth-child(4)::before{background:var(--red)}
.tl h3{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.95rem;margin:0 0 6px;color:var(--ink)}
.tl p{margin:0;font-size:.86rem;line-height:1.6;color:var(--muted);max-width:60ch}

.team-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:44px}
@media(max-width:1180px){.team-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:400px){.team-grid{grid-template-columns:1fr}}
.member{background:#fff;border:1px solid var(--line);border-radius:10px;padding:26px 22px;text-align:center}
.member__avatar-img{width:74px;height:74px;margin:0 auto 16px;border-radius:50%;display:block;object-fit:cover;box-shadow:0 0 0 3px #fff,0 0 0 4px var(--line)}
.member h3{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.9rem;margin:0 0 4px;color:var(--ink)}
.member .role{font-size:.76rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--teal);margin-bottom:2px}
.member__linkedin{display:inline-block;margin-top:8px;font-size:.76rem;font-weight:600;color:var(--blue);text-decoration:none}
.member__linkedin:hover{text-decoration:underline}

/* ============================================================
   LAYOUT B additions — product screenshots
   ============================================================ */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
@media(max-width:820px){.shots{grid-template-columns:1fr}}
.shot{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.shot__frame{aspect-ratio:16/10;background:
   linear-gradient(135deg,#f4f8fc,#e6eef7);
   display:grid;place-items:center;position:relative;border-bottom:1px solid var(--line)}
.shot__frame img{width:100%;height:100%;object-fit:cover}

/* A real UI screenshot rather than a stock photograph. `cover` is right for a
   photo — it fills the frame and the crop costs nothing. It is wrong here: a
   3:2 screen capture in a 16:10 frame gets its top and bottom cut off, which
   is the nav bar and the page heading, i.e. the two things that tell you which
   screen you are looking at. `contain` shows the whole capture and sits it on
   a tint close to the app's own background so the letterboxing does not read
   as a border. */
.shot--screen .shot__frame{background:#eef1f6;padding:0}
.shot--screen .shot__frame img{object-fit:contain}

/* ---------------------------------------------------------------- lightbox
   A screenshot renders about 350px wide in the three-up grid: enough to
   recognise a screen, nowhere near enough to read one. Clicking opens it.

   The button is added by assets/js/lightbox.js and is absent with JS off, so
   these rules only ever apply to something that actually works. */
.shot__frame--zoom{position:relative}
.shot__zoom{
  position:absolute;inset:0;width:100%;height:100%;
  border:0;background:transparent;cursor:zoom-in;padding:0;
}
.shot__zoom:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.shot__frame--zoom:hover img{transform:scale(1.02);transition:transform .35s ease}
.shot--screen .shot__frame{overflow:hidden}

html.lb-lock,html.lb-lock body{overflow:hidden}

.lb{
  position:fixed;inset:0;z-index:1000;
  display:none;align-items:center;justify-content:center;
  background:rgba(8,10,14,.96);padding:24px;
}
.lb.is-open{display:flex}
.lb__fig{margin:0;max-width:1400px;width:100%;text-align:center}
.lb__img{
  max-width:100%;max-height:82vh;display:block;margin:0 auto;
  border-radius:8px;box-shadow:0 24px 70px rgba(0,0,0,.6);background:#fff;
}
.lb__cap{
  color:#e8ecf2;font-size:.86rem;line-height:1.5;
  margin-top:14px;max-width:70ch;margin-left:auto;margin-right:auto;
}
.lb__close{
  position:absolute;top:14px;right:18px;
  width:44px;height:44px;border:0;border-radius:8px;
  background:rgba(255,255,255,.1);color:#fff;font-size:26px;line-height:1;cursor:pointer;
}
.lb__nav{
  border:0;border-radius:8px;background:rgba(255,255,255,.1);color:#fff;
  width:52px;height:72px;font-size:30px;line-height:1;cursor:pointer;flex:0 0 auto;
}
.lb__close:hover,.lb__nav:hover{background:rgba(255,255,255,.2)}
.lb__close:focus-visible,.lb__nav:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

/* On a phone the arrows would eat most of the width the picture needs, and a
   swipe or a tap-to-close is the expected gesture there anyway. */
@media (max-width:700px){
  .lb{padding:12px}
  .lb__nav{display:none}
  .lb__img{max-height:74vh}
}
@media (prefers-reduced-motion:reduce){
  .shot__frame--zoom:hover img{transform:none}
}
.shot__ph{text-align:center;color:var(--faint);padding:20px}
.shot__ph svg{width:34px;height:34px;stroke:var(--faint);fill:none;stroke-width:1.4;margin-bottom:8px}
.shot__ph span{display:block;font-size:.72rem;letter-spacing:.04em}
.shot__cap{padding:14px 16px;font-size:.8rem;color:var(--muted);line-height:1.5}
.be-gallery .shot__frame{aspect-ratio:16/10;overflow:hidden}
.be-gallery .shot__frame img{width:100%;height:100%;object-fit:cover}
.be-gallery .shot__cap strong{display:block;margin-bottom:4px;color:var(--ink);font-family:var(--display);font-size:.78rem;text-transform:uppercase;letter-spacing:.02em}
.be-gallery .shot__cap span{display:block}

/* ============================================================
   LAYOUT D — Blog (index, post, admin)
   ============================================================ */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
@media(max-width:880px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.blog-grid{grid-template-columns:1fr}}
.bcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:transform .2s,box-shadow .2s}
.bcard:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(40,40,40,.10)}
.bcard__cover{aspect-ratio:16/9;background:linear-gradient(135deg,var(--blue),var(--teal))}
.bcard__cover.t{background:linear-gradient(135deg,var(--teal),var(--yellow))}
.bcard__cover.r{background:linear-gradient(135deg,var(--red),var(--blue))}
.bcard__cover img{width:100%;height:100%;object-fit:cover}
.bcard__body{padding:22px;display:flex;flex-direction:column;flex:1}
.bcard__tag{font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:9px}
.bcard h3{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:1.02rem;line-height:1.15;margin:0 0 10px;color:var(--ink)}
.bcard p{margin:0 0 16px;font-size:.83rem;line-height:1.55;color:var(--muted)}
.bcard__meta{margin-top:auto;font-size:.72rem;color:var(--faint)}
.bcard__meta b{color:var(--muted);font-weight:600}

.article{max-width:760px;margin:0 auto}
.article__meta{font-size:.78rem;color:var(--faint);margin-bottom:14px}
.article__meta .tag{color:var(--teal);font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-right:10px}
.article__cover{aspect-ratio:16/7;border-radius:12px;margin:24px 0 30px;background:linear-gradient(135deg,var(--blue),var(--teal))}
.article__cover img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.article__body{font-size:1rem;line-height:1.8;color:#33332f}
.article__body h2{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:1.4rem;margin:32px 0 12px;color:var(--ink)}
.article__body h3{font-family:var(--display);font-style:italic;font-weight:700;font-size:1.1rem;margin:24px 0 10px;color:var(--ink)}
.article__body p{margin:0 0 18px}
.article__body ul{margin:0 0 18px;padding-left:22px}
.article__body li{margin-bottom:7px}
.article__body a{color:var(--blue);text-decoration:underline}
.article__back{display:inline-block;margin-bottom:24px;font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.72rem;letter-spacing:.05em;color:var(--blue)}
.blog-empty{text-align:center;color:var(--muted);padding:40px;font-size:.9rem}

/* Admin editor */
.admin{max-width:860px;margin:0 auto}
.admin__note{background:var(--wash);border:1px solid var(--line);border-radius:10px;padding:18px 20px;font-size:.85rem;color:var(--muted);line-height:1.6;margin-bottom:28px}
.admin__note b{color:var(--ink)}
.admin-form{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px}
.admin-form .field{margin-bottom:16px}
.admin-form label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.admin-form input,.admin-form select,.admin-form textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:6px;font-family:var(--body);font-size:.9rem;color:var(--ink);background:#fff}
.admin-form textarea{min-height:200px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;line-height:1.6}
.admin-form input:focus,.admin-form select:focus,.admin-form textarea:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal)}
.admin-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.admin-list{margin-top:30px}
.admin-row{display:flex;justify-content:space-between;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px 18px;margin-bottom:10px}
.admin-row h4{margin:0 0 3px;font-size:.9rem;color:var(--ink)}
.admin-row .m{font-size:.74rem;color:var(--faint)}
.admin-row button{background:none;border:1px solid var(--line);border-radius:5px;padding:6px 12px;font-size:.76rem;color:var(--red);cursor:pointer}
.admin-row button:hover{border-color:var(--red)}
.admin-out{margin-top:28px}
.admin-out textarea{width:100%;min-height:220px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.76rem;border:1px solid var(--line);border-radius:8px;padding:14px;background:#0f1720;color:#cfe3ff;line-height:1.5}

/* ============================================================
   SOLUTIONS BUILDER — pull-out tray, add-chips, PDF export
   Desktop: right-edge tab + side panel (page stays draggable).
   Mobile: floating button + bottom sheet (tap to add).
   ============================================================ */
.sb-tab{
  position:fixed;bottom:26px;right:26px;z-index:140;
  width:60px;height:60px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--blue);color:#fff;border:0;
  box-shadow:0 6px 20px rgba(13,45,92,.34);
  transition:background .15s,opacity .3s,transform .3s,box-shadow .2s}
.sb-tab:hover{background:var(--blue-deep);transform:translateY(-2px);box-shadow:0 10px 26px rgba(13,45,92,.42)}
.sb-tab__icon{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sb-tab__count{
  position:absolute;top:-4px;right:-4px;background:var(--yellow);color:var(--yellow-ink);
  min-width:22px;height:22px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--body);font-style:normal;font-size:.74rem;font-weight:700;padding:0 6px;
  border:2px solid #fff;box-shadow:0 2px 5px rgba(0,0,0,.15)}
.sb-tab__count:empty,.sb-tab__count[data-n="0"]{display:none}
/* homepage: hidden until scrolled past the hero */
.sb-tab--gated{opacity:0;pointer-events:none;transform:translateY(16px) scale(.85)}
.sb-tab--gated.sb-tab--reveal{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
/* when the tray is open, the panel covers the FAB — hide it; the panel's × closes */
.sb-tab.is-tray-open{opacity:0;pointer-events:none;transform:scale(.8)}

.sb-panel{
  position:fixed;top:0;right:0;bottom:0;width:390px;max-width:92vw;z-index:150;
  background:#fff;box-shadow:-14px 0 40px rgba(20,30,45,.20);
  display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1)}
.sb-panel.is-open{transform:translateX(0)}
.sb-panel.drop-hot{outline:3px dashed var(--teal);outline-offset:-3px}
.sb-panel__head{display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;border-bottom:1px solid var(--line);background:var(--blue-deep);color:#fff}
.sb-panel__head h3{margin:0;font-family:var(--display);font-style:italic;font-weight:800;
  text-transform:uppercase;font-size:1rem;letter-spacing:.02em}
.sb-panel__head .sb-x{background:none;border:0;color:#fff;font-size:1.4rem;cursor:pointer;line-height:1;opacity:.8}
.sb-panel__head .sb-x:hover{opacity:1}
.sb-panel__body{flex:1;overflow-y:auto;padding:18px 20px}
.sb-hint{font-size:.8rem;color:var(--muted);line-height:1.5;background:var(--wash);
  border:1px dashed var(--line);border-radius:8px;padding:12px 14px;margin-bottom:18px}

.sb-section-t{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin:18px 0 8px}
.sb-item{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--line);
  border-radius:8px;margin-bottom:8px;background:#fff}
.sb-item__dot{width:8px;height:8px;border-radius:50%;background:var(--blue);margin-top:5px;flex:none}
.sb-item.t .sb-item__dot{background:var(--teal)} .sb-item.r .sb-item__dot{background:var(--red)}
.sb-item.g .sb-item__dot{background:var(--yellow-ink)}
.sb-item__main{flex:1;min-width:0}
.sb-item__name{font-weight:600;font-size:.86rem;color:var(--ink)}
.sb-item__blurb{font-size:.74rem;color:var(--muted);line-height:1.4;margin-top:2px}
.sb-item__x{background:none;border:0;color:var(--faint);cursor:pointer;font-size:1.1rem;line-height:1;padding:0 2px}
.sb-item__x:hover{color:var(--red)}
.sb-empty{text-align:center;color:var(--faint);font-size:.85rem;padding:26px 10px}

.sb-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 4px}
.sb-fields .full{grid-column:1 / -1}
.sb-fields label{display:block;font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.sb-fields input,.sb-fields select{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:6px;font-family:var(--body);font-size:.84rem;color:var(--ink)}

.sb-summary{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.sb-summary h4{margin:0 0 4px;font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.82rem;color:var(--ink)}
.sb-reco{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 4px}
.sb-reco span{font-size:.72rem;background:var(--wash);border:1px solid var(--line);border-radius:20px;padding:3px 10px;color:var(--blue)}
.sb-impact{font-family:var(--display);font-style:italic;font-weight:800;font-size:1.6rem;color:var(--blue-deep);margin:4px 0 2px}
.sb-disclaimer{font-size:.68rem;color:var(--faint);line-height:1.4;margin-top:6px}

.sb-panel__foot{border-top:1px solid var(--line);padding:14px 20px;display:flex;flex-direction:column;gap:8px;background:#fff}
.sb-panel__foot .row{display:flex;gap:8px}
.sb-panel__foot .row .btn{flex:1;justify-content:center}
.sb-clear{background:none;border:0;color:var(--faint);font-size:.74rem;cursor:pointer;text-align:center;padding:2px}
.sb-clear:hover{color:var(--red)}

/* the little "+ Add" affordance injected onto product cards */
.sb-add{position:absolute;top:10px;right:10px;z-index:6;
  width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:#fff;
  color:var(--blue);font-size:1rem;line-height:1;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 2px 6px rgba(20,30,45,.10);opacity:.55;transition:opacity .15s,background .15s}
.rel-card{position:relative}
.rel-card:hover .sb-add,.product:hover .sb-add,.tile:hover .sb-add,.sb-add:focus{opacity:1}
.sb-add:hover{background:var(--blue);color:#fff}
.sb-add.is-in{opacity:1;background:var(--green);color:#fff;border-color:var(--green)}
.sb-hero-btn{margin-top:14px}

@media(max-width:820px){
  .sb-add{opacity:1}                       /* always visible on touch */
  .sb-tab{width:54px;height:54px;bottom:18px;right:18px}
  .sb-tab__icon{width:24px;height:24px}
  .sb-tab--gated{transform:translateY(16px) scale(.85)}
  .sb-tab--gated.sb-tab--reveal{transform:translateY(0) scale(1)}
  .sb-panel{top:auto;left:0;right:0;bottom:0;width:100%;max-width:100%;height:86vh;
    border-radius:16px 16px 0 0;transform:translateY(100%)}
  .sb-panel.is-open{transform:translateY(0)}
  .sb-overlay{position:fixed;inset:0;background:rgba(13,30,55,.4);z-index:145;opacity:0;
    pointer-events:none;transition:opacity .25s}
  .sb-overlay.is-open{opacity:1;pointer-events:auto}
}
@media(min-width:821px){ .sb-overlay{display:none} }

/* ============================================================
   VICKI — compact market-aware public assistant
   Familiar lower-right website chat; conversation stays in-session.
   ============================================================ */
.vicki-tab{
  position:fixed;bottom:26px;right:98px;z-index:142;
  width:60px;height:60px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:var(--blue);border:1px solid rgba(13,108,179,.18);
  box-shadow:0 7px 22px rgba(13,45,92,.3);
  transition:opacity .2s,transform .2s,box-shadow .2s}
.vicki-tab:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 11px 28px rgba(13,45,92,.4)}
.vicki-tab:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.vicki-tab--gated{opacity:0;pointer-events:none;transform:translateY(16px) scale(.85)}
.vicki-tab--gated.vicki-tab--reveal{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.vicki-tab.is-open{opacity:0;pointer-events:none;transform:scale(.84)}
.vicki-robot{display:block;width:34px;height:auto;object-fit:contain}
.vicki-panel{
  position:fixed;right:26px;bottom:98px;z-index:170;
  width:390px;max-width:calc(100vw - 32px);height:min(520px,calc(100dvh - 130px));
  display:flex;flex-direction:column;background:#fff;border:1px solid rgba(13,45,92,.14);
  border-radius:18px;box-shadow:0 18px 54px rgba(13,45,92,.24);
  opacity:0;transform:translateY(18px) scale(.97);transform-origin:bottom right;
  visibility:hidden;pointer-events:none;
  transition:opacity .2s,transform .24s cubic-bezier(.4,0,.2,1),visibility 0s .24s}
.vicki-panel.is-open{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition-delay:0s}
.vicki-panel__head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:72px;padding:13px 14px 13px 16px;background:#fff;color:var(--ink);
  border-bottom:1px solid var(--line);border-radius:17px 17px 0 0}
.vicki-panel__identity{display:flex;align-items:center;gap:11px;min-width:0}
.vicki-panel__identity .vicki-robot{width:38px;height:auto;flex:none}
.vicki-panel__identity h2{margin:0;line-height:1}
.vicki-greeting{position:relative;display:block;overflow:visible}
.vicki-greeting--header{width:78%;height:100%}
.vicki-greeting--chat{width:112px;height:28px}
.vicki-greeting__art{position:absolute;inset:0;opacity:0;pointer-events:none;
  background:var(--vicki-greeting-fill,var(--ink));
  -webkit-mask:var(--vicki-greeting) center/contain no-repeat;
  mask:var(--vicki-greeting) center/contain no-repeat;
  animation-duration:9s;animation-iteration-count:1;animation-timing-function:ease-in-out;
  animation-fill-mode:forwards}
.vicki-greeting__art--hey{--vicki-greeting:url("../logos/vicki-greeting-hey-black.png");animation-name:vicki-greeting-hey-once}
.vicki-greeting__art--bonjour{--vicki-greeting:url("../logos/vicki-greeting-bonjour-black.png");animation-name:vicki-greeting-bonjour-once}
.vicki-greeting__art--hola{--vicki-greeting:url("../logos/vicki-greeting-hola-black.png");animation-name:vicki-greeting-hola-once}
@keyframes vicki-greeting-hey-once{0%,27%{opacity:1}33%,94%{opacity:0}100%{opacity:1}}
@keyframes vicki-greeting-bonjour-once{0%,27%{opacity:0}33%,60%{opacity:1}66%,100%{opacity:0}}
@keyframes vicki-greeting-hola-once{0%,60%{opacity:0}66%,94%{opacity:1}100%{opacity:0}}
.vicki-panel__identity p{margin:5px 0 0;color:var(--muted);font-size:.69rem;line-height:1.15}
.vicki-panel__actions{display:flex;align-items:center;gap:6px;flex:none}
.vicki-market{display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;border-radius:999px;
  background:var(--wash);color:var(--blue-deep);font-size:.6rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase}
.vicki-close{width:31px;height:31px;display:grid;place-items:center;background:none;border:0;color:var(--muted);
  font-size:1.35rem;line-height:1;border-radius:50%}
.vicki-close:hover{background:var(--wash);color:var(--blue-deep)}
.vicki-close:focus-visible{outline:2px solid var(--teal);outline-offset:1px}
.vicki-panel__body{min-height:0;flex:1;display:flex;flex-direction:column;background:#f7fafc}
.vicki-messages{flex:1;overflow-y:auto;padding:18px 16px 10px;scroll-behavior:smooth}
.vicki-message{display:flex;flex-direction:column;align-items:flex-start;max-width:88%;margin:0 0 13px}
.vicki-message--user{align-items:flex-end;margin-left:auto}
.vicki-message__label{margin:0 7px 4px;font-size:.6rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--faint)}
.vicki-message--assistant .vicki-message__label{text-transform:none}
.vicki-message__signature{display:block;width:35px;height:auto}
.vicki-message__text{padding:10px 12px;border:1px solid var(--line);border-radius:5px 15px 15px 15px;
  background:#fff;color:var(--ink);font-size:.82rem;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;
  box-shadow:0 2px 8px rgba(13,45,92,.04)}
.vicki-message--user .vicki-message__text{border-color:var(--blue);border-radius:15px 5px 15px 15px;
  background:var(--blue);color:#fff}
.vicki-prompts{flex:none;padding:0 16px 13px;background:#f7fafc}
.vicki-prompts__tray{max-height:0;overflow:hidden;opacity:0;transform:translateY(10px);
  pointer-events:none;transition:max-height .28s ease,opacity .18s ease,transform .24s ease}
.vicki-prompts.is-open .vicki-prompts__tray{max-height:250px;opacity:1;transform:none;pointer-events:auto}
.vicki-prompts__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 7px;
  color:var(--faint);font-size:.63rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.vicki-prompts__more{padding:3px 0;border:0;background:none;color:var(--blue);font:inherit;
  letter-spacing:inherit;text-transform:inherit}
.vicki-prompts__more:hover{color:var(--teal-dark)}
.vicki-prompts__more:focus-visible{outline:3px solid rgba(62,189,196,.35);outline-offset:2px}
.vicki-prompts__grid{display:grid;grid-template-columns:1fr;gap:6px}
.vicki-prompts__toggle{width:100%;min-height:39px;margin-top:0;padding:9px 12px;border:1px solid #c6d4e1;
  border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#fff;color:var(--blue-deep);font-size:.72rem;font-weight:700;letter-spacing:.02em;
  box-shadow:0 2px 8px rgba(13,45,92,.05);transition:border-color .15s,box-shadow .15s,color .15s}
.vicki-prompts.is-open .vicki-prompts__toggle{margin-top:8px;border-color:var(--teal);color:var(--teal-dark)}
.vicki-prompts__toggle:hover{border-color:var(--teal);box-shadow:0 4px 12px rgba(13,45,92,.08)}
.vicki-prompts__toggle:focus-visible{outline:3px solid rgba(62,189,196,.35);outline-offset:2px}
.vicki-prompts__toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;transform:rotate(180deg);transition:transform .22s ease}
.vicki-prompts.is-open .vicki-prompts__toggle svg{transform:none}
.vicki-prompt{min-height:39px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;
  background:#fff;color:var(--blue-deep);font-size:.71rem;line-height:1.25;text-align:left;
  transition:border-color .15s,transform .15s,box-shadow .15s}
.vicki-prompt:hover{border-color:var(--teal);transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(13,45,92,.07)}
.vicki-prompt:focus-visible{outline:3px solid rgba(62,189,196,.35);outline-offset:1px}
.vicki-compose{display:flex;flex-direction:column;gap:7px;padding:12px 14px 11px;
  border-top:1px solid var(--line);background:#fff;border-radius:0 0 17px 17px}
.vicki-compose__label{color:var(--blue-deep);font-size:.72rem;font-weight:700;letter-spacing:.01em}
.vicki-compose__field{position:relative}
.vicki-compose textarea{display:block;width:100%;min-height:68px;max-height:128px;resize:none;
  padding:13px 56px 13px 14px;border:1px solid #b9c9d8;border-radius:15px;color:var(--ink);
  background:#fff;font-size:.84rem;line-height:1.4;box-shadow:inset 0 1px 2px rgba(13,45,92,.04)}
.vicki-compose textarea::placeholder{color:#78899a}
.vicki-compose textarea:focus{outline:3px solid rgba(62,189,196,.24);border-color:var(--teal)}
.vicki-compose__field>button{position:absolute;right:10px;bottom:10px;width:42px;height:42px;border:0;
  border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff;
  box-shadow:0 3px 9px rgba(13,45,92,.2)}
.vicki-compose__field>button:hover{background:var(--blue-deep);transform:translateY(-1px)}
.vicki-compose__field>button:disabled{opacity:.45;cursor:wait;transform:none}
.vicki-compose__field>button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.vicki-compose__meta{display:flex;align-items:flex-start;flex-direction:column;gap:2px;
  padding:0 3px;color:var(--faint);font-size:.59rem;line-height:1.25}
.vicki-thinking{display:inline-flex;align-items:center;gap:4px;padding:13px 15px;border:1px solid var(--line);
  border-radius:5px 15px 15px 15px;background:#fff}
.vicki-thinking i{width:5px;height:5px;border-radius:50%;background:var(--teal);
  animation:vicki-dot 1s infinite ease-in-out}
.vicki-thinking i:nth-child(2){animation-delay:.14s}.vicki-thinking i:nth-child(3){animation-delay:.28s}
@keyframes vicki-dot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}
@media(prefers-reduced-motion:reduce){
  .vicki-panel,.vicki-tab{transition:none}
  .vicki-greeting__art{animation:none;opacity:0}
  .vicki-prompts__tray,.vicki-prompts__toggle svg{transition:none}
  .vicki-greeting__art--hey{opacity:1}
  .vicki-thinking i{animation:none}
}
@media(max-width:820px){
  .vicki-tab{width:54px;height:54px;bottom:18px;right:82px}
  .vicki-tab .vicki-robot{width:29px;height:29px}
  .vicki-panel{right:12px;bottom:84px;width:380px;max-width:calc(100vw - 24px);
    height:min(540px,calc(100dvh - 104px))}
}
@media(max-width:420px){
  .vicki-panel{right:8px;bottom:80px;max-width:calc(100vw - 16px);height:min(540px,calc(100dvh - 96px))}
  .vicki-panel__head{padding:11px 10px 11px 13px}
  .vicki-panel__identity p{display:none}
  .vicki-panel__actions{gap:3px}
  .vicki-market{font-size:.56rem;padding:3px 6px}
  .vicki-messages{padding:14px 12px 8px}
  .vicki-prompts{padding:0 12px 10px}
}
/* ============================================================
   RETENTION JOURNEY SIMULATOR (Bumper Retention page)
   ============================================================ */
.jsim{margin-top:44px;display:grid;grid-template-columns:290px 1fr;gap:0;align-items:stretch;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
@media(max-width:820px){.jsim{grid-template-columns:1fr}}
.jsim-track{position:relative;padding:28px 24px;background:var(--wash);border-right:1px solid var(--line)}
@media(max-width:820px){.jsim-track{border-right:0;border-bottom:1px solid var(--line)}}
.jsim-line{position:absolute;left:43px;top:48px;bottom:48px;width:3px;background:var(--line);border-radius:3px;overflow:hidden}
.jsim-line-fill{position:absolute;left:0;top:0;width:100%;height:0;background:linear-gradient(var(--blue),var(--teal));transition:height .6s cubic-bezier(.4,0,.2,1)}
.jsim-nodes{position:relative;display:flex;flex-direction:column;gap:8px}
.jsim-node{display:flex;align-items:center;gap:14px;background:none;border:0;padding:8px 6px;cursor:pointer;text-align:left;border-radius:8px;transition:background .15s}
.jsim-node:hover{background:var(--wash)}
.jsim-dot{flex:none;width:40px;height:40px;border-radius:50%;background:#fff;border:2px solid var(--line);display:grid;place-items:center;transition:all .3s;position:relative;z-index:2}
.jsim-node.is-done .jsim-dot{border-color:var(--teal);background:var(--teal)}
.jsim-node.is-active .jsim-dot{border-color:var(--blue);background:var(--blue);box-shadow:0 0 0 5px rgba(43,104,171,.16);transform:scale(1.08)}
.jsim-node-lbl{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.78rem;letter-spacing:.02em;color:var(--muted);transition:color .2s;line-height:1.15}
.jsim-node.is-active .jsim-node-lbl{color:var(--ink)}
.jsim-node.is-done .jsim-node-lbl{color:var(--ink)}
.jsim-ico{width:18px;height:18px;display:block;background:var(--muted);transition:background .3s;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.jsim-node.is-active .jsim-ico,.jsim-node.is-done .jsim-ico{background:#fff}
.jsim-ico--wrench{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M22 6.5a5 5 0 0 1-6.7 4.7L6 20.5 3.5 18l9.3-9.3A5 5 0 0 1 19 2l-3 3 1.5 2.5L20 9l2-2.5Z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M22 6.5a5 5 0 0 1-6.7 4.7L6 20.5 3.5 18l9.3-9.3A5 5 0 0 1 19 2l-3 3 1.5 2.5L20 9l2-2.5Z'/></svg>")}
.jsim-ico--signal{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='3' fill='black'/><path fill='black' d='M5.6 5.6 4.2 4.2a11 11 0 0 0 0 15.6l1.4-1.4a9 9 0 0 1 0-12.8Zm12.8 0a9 9 0 0 1 0 12.8l1.4 1.4a11 11 0 0 0 0-15.6Z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='3' fill='black'/><path fill='black' d='M5.6 5.6 4.2 4.2a11 11 0 0 0 0 15.6l1.4-1.4a9 9 0 0 1 0-12.8Zm12.8 0a9 9 0 0 1 0 12.8l1.4 1.4a11 11 0 0 0 0-15.6Z'/></svg>")}
.jsim-ico--sms{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4 4h16v12H7l-3 3Z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4 4h16v12H7l-3 3Z'/></svg>")}
.jsim-ico--mail{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M2 5.5A1.5 1.5 0 0 1 3.5 4h17A1.5 1.5 0 0 1 22 5.5v.4l-10 5.6L2 5.9Zm0 2.7 10 5.6 10-5.6v10.3A1.5 1.5 0 0 1 20.5 20h-17A1.5 1.5 0 0 1 2 18.5Z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M2 5.5A1.5 1.5 0 0 1 3.5 4h17A1.5 1.5 0 0 1 22 5.5v.4l-10 5.6L2 5.9Zm0 2.7 10 5.6 10-5.6v10.3A1.5 1.5 0 0 1 20.5 20h-17A1.5 1.5 0 0 1 2 18.5Z'/></svg>")}
.jsim-ico--cursor{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M5 3l14 7-6 2-2 6Z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M5 3l14 7-6 2-2 6Z'/></svg>")}
.jsim-ico--car{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M5 11l1.5-4.5h11L19 11h1a1 1 0 0 1 1 1v4h-2a2 2 0 0 1-4 0H9a2 2 0 0 1-4 0H3v-4a1 1 0 0 1 1-1Z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M5 11l1.5-4.5h11L19 11h1a1 1 0 0 1 1 1v4h-2a2 2 0 0 1-4 0H9a2 2 0 0 1-4 0H3v-4a1 1 0 0 1 1-1Z'/></svg>")}

.jsim-main{display:flex;flex-direction:column}
.jsim-cards{position:relative;min-height:230px;background:#fff;padding:34px 32px;overflow:hidden;flex:1}
.jsim-card{position:absolute;inset:34px 32px auto 32px;opacity:0;transform:translateY(14px);transition:opacity .4s,transform .4s;pointer-events:none}
.jsim-card.is-active{opacity:1;transform:translateY(0);pointer-events:auto;position:relative;inset:auto}
.jsim-card-step{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:10px}
.jsim-card-title{font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:1.5rem;line-height:1.05;margin:0 0 12px;color:var(--ink)}
.jsim-card-desc{font-size:.92rem;line-height:1.65;color:var(--muted);margin:0 0 22px;max-width:52ch}
.jsim-stat{display:flex;align-items:baseline;gap:12px;border-top:1px solid var(--line);padding-top:18px}
.jsim-stat-num{font-family:var(--display);font-style:italic;font-weight:800;font-size:2.6rem;line-height:1;color:var(--blue);font-variant-numeric:tabular-nums}
.jsim-stat-lbl{font-size:.82rem;color:var(--muted);max-width:22ch;line-height:1.35}
.jsim-controls{display:flex;align-items:center;gap:14px;padding:0 32px 30px}
.jsim-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--blue);font-size:1rem;cursor:pointer;transition:all .15s}
.jsim-btn:hover{border-color:var(--blue);background:var(--wash)}
.jsim-play{display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);cursor:pointer;user-select:none}
.jsim-play-ico{width:0;height:0;border-left:9px solid var(--teal);border-top:6px solid transparent;border-bottom:6px solid transparent}
.jsim.is-playing .jsim-play-ico{width:9px;height:10px;border:0;border-left:3px solid var(--teal);border-right:3px solid var(--teal);box-sizing:border-box}

/* ============================================================
   FEATURE COMPARISON — shared disclaimer (see unified cards below)
   ============================================================ */
.cmp-disc{font-size:.72rem;line-height:1.55;color:var(--faint);margin-top:16px;max-width:80ch}

/* ============================================================
   CAMPAIGN BUILDER (Bumper Inventory Ads page)
   ============================================================ */
.cb{margin-top:44px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.cb-steps{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line);background:var(--wash)}
.cb-step{display:flex;align-items:center;justify-content:center;gap:9px;padding:15px 10px;border:0;background:none;cursor:pointer;font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.74rem;letter-spacing:.02em;color:var(--muted);border-bottom:3px solid transparent;transition:all .18s}
@media(max-width:640px){.cb-step{flex-direction:column;gap:4px;font-size:.62rem;text-align:center}}
.cb-step:hover{color:var(--ink)}
.cb-step.is-active{color:var(--blue);border-bottom-color:var(--blue);background:#fff}
.cb-step.is-done{color:var(--teal)}
.cb-step-n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--line);color:var(--muted);font-family:var(--body);font-style:normal;font-size:.72rem;font-weight:700}
.cb-step.is-active .cb-step-n{background:var(--blue);color:#fff}
.cb-step.is-done .cb-step-n{background:var(--teal);color:#fff}
.cb-stage{padding:32px;min-height:340px;position:relative}
.cb-panel{display:none;animation:cb-fade .4s ease}
.cb-panel.is-active{display:block}
@keyframes cb-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.cb-cols{display:grid;grid-template-columns:1fr 260px;gap:26px;align-items:start}
@media(max-width:760px){.cb-cols{grid-template-columns:1fr}}
.cb-inv{display:flex;flex-direction:column;gap:10px}
.cb-inv-row{padding:16px 18px;border:1px solid var(--line);border-radius:10px;font-weight:600;color:var(--ink);font-size:.92rem;position:relative;transition:all .3s}
.cb-inv-row.is-sel{border-color:var(--blue);background:rgba(43,104,171,.06);box-shadow:inset 3px 0 0 var(--blue)}
.cb-inv-row.is-sel::after{content:"\2713";position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--blue);font-weight:700}
.cb-side{background:var(--blue-deep);color:#fff;border-radius:12px;padding:26px 22px;text-align:center}
.cb-side-lbl{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.cb-counter{font-family:var(--display);font-style:italic;font-weight:800;font-size:3rem;line-height:1.05;margin:8px 0 4px;color:var(--yellow);font-variant-numeric:tabular-nums}
.cb-side-sub{font-size:.78rem;color:rgba(255,255,255,.7);line-height:1.4;margin-bottom:18px}
.cb-side .btn{width:100%;justify-content:center}
.cb-auds{display:flex;flex-direction:column;gap:10px}
.cb-aud{text-align:left;padding:15px 18px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;font-weight:600;font-size:.9rem;color:var(--ink);display:flex;align-items:center;gap:12px;transition:all .18s}
.cb-aud::before{content:"";width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex:none;transition:all .18s}
.cb-aud:hover{border-color:var(--muted)}
.cb-aud.is-on{border-color:var(--teal);background:rgba(62,189,196,.07)}
.cb-aud.is-on::before{border-color:var(--teal);background:var(--teal);box-shadow:inset 0 0 0 3px #fff}
.cb-hint{text-align:center;color:var(--muted);font-size:.88rem;margin:0 auto 24px;max-width:56ch}
.cb-ads{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:760px){.cb-ads{grid-template-columns:1fr}}
.cb-ad{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;opacity:0;transform:translateY(16px) scale(.97);transition:opacity .45s,transform .45s}
.cb-ad.is-in{opacity:1;transform:translateY(0) scale(1)}
.cb-ad-tag{font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:8px 14px;color:#fff}
.cb-ad--fb .cb-ad-tag{background:#1877F2}
.cb-ad--gg .cb-ad-tag{background:#34A853}
.cb-ad-img{height:104px;background:linear-gradient(135deg,#e6eef7,#d3e0ef);display:grid;place-items:center}
.cb-ico-car{width:48px;height:32px;background:var(--faint);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M5 11l1.5-4.5h11L19 11h1a1 1 0 0 1 1 1v4h-2a2 2 0 0 1-4 0H9a2 2 0 0 1-4 0H3v-4a1 1 0 0 1 1-1Z'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M5 11l1.5-4.5h11L19 11h1a1 1 0 0 1 1 1v4h-2a2 2 0 0 1-4 0H9a2 2 0 0 1-4 0H3v-4a1 1 0 0 1 1-1Z'/></svg>") center/contain no-repeat}
.cb-ad-body{padding:14px 16px}
.cb-ad-t{font-weight:700;font-size:.92rem;color:var(--ink)}
.cb-ad-p{font-family:var(--display);font-style:italic;font-weight:800;color:var(--blue);font-size:1.25rem;margin:4px 0 10px}
.cb-ad-cta{display:inline-block;background:#1877F2;color:#fff;font-size:.72rem;font-weight:700;padding:6px 16px;border-radius:6px}
.cb-ad-dealer{font-size:.74rem;color:var(--muted);margin:3px 0 6px}
.cb-ad-price{font-family:var(--display);font-style:italic;font-weight:800;color:var(--ink);font-size:1.3rem}
.cb-results{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:640px){.cb-results{grid-template-columns:repeat(2,1fr)}}
.cb-metric{background:var(--wash);border:1px solid var(--line);border-radius:12px;padding:24px 18px;text-align:center}
.cb-metric-n{font-family:var(--display);font-style:italic;font-weight:800;font-size:2.1rem;color:var(--blue-deep);font-variant-numeric:tabular-nums;line-height:1}
.cb-metric-l{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:8px}

/* ============================================================
   FEATURE COMPARISON — unified cards (all product pages)
   Side-by-side cards, first highlighted. Supports yes/partial/no
   marks and a shared-matrix layout (identical labels line up).
   ============================================================ */
.icmp{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
@media(max-width:860px){.icmp{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}}
.icmp-card{border:1px solid var(--line);border-radius:14px;background:#fff;padding:26px 24px;display:flex;flex-direction:column}
.icmp-card--hl{border-color:var(--blue);box-shadow:0 8px 26px rgba(43,104,171,.12);position:relative}
.icmp-card--hl::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--blue),var(--teal));border-radius:14px 14px 0 0}
.icmp-name{font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:1.15rem;color:var(--ink);line-height:1.1}
.icmp-badge{display:inline-block;align-self:flex-start;font-family:var(--body);font-style:normal;font-size:.64rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:rgba(62,189,196,.15);color:#178791;padding:4px 12px;border-radius:20px;margin:10px 0 18px}
.icmp-badge--muted{background:var(--wash);color:var(--muted)}
.cmp-ilist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.cmp-ilist li{display:flex;align-items:flex-start;gap:12px;padding:11px 4px;font-size:.9rem;font-weight:500;border-bottom:1px solid var(--line);min-height:47px}
.cmp-ilist li:last-child{border-bottom:0}
.cmp-i-txt{padding-top:2px;line-height:1.3}
.cmp-i-mark{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.86rem;font-weight:700}
.cmp-i-yes{color:var(--ink)}
.cmp-i-yes .cmp-i-mark{background:rgba(22,163,74,.14);color:var(--green)}
.cmp-i-no{color:var(--faint)}
.cmp-i-no .cmp-i-mark{background:rgba(110,110,108,.1);color:var(--faint)}
.cmp-i-part{color:var(--ink)}
.cmp-i-part .cmp-i-mark{background:rgba(251,207,9,.18)}
.cmp-i-part .cmp-i-mark svg{width:15px;height:15px}
.cmp-i-part .cmp-i-mark svg path{fill:var(--yellow-ink)}
.cmp-i-part .cmp-i-mark svg circle{fill:none;stroke:var(--yellow-ink);stroke-width:2}
.cmp-note{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-left:6px;vertical-align:middle}

/* ============================================================
   PIE DASHBOARD DEMO (Pie / bumper-bi page)
   ============================================================ */
.pie{margin-top:44px;border:1px solid var(--line);border-radius:16px;background:#fff;padding:34px 32px;min-height:360px;position:relative}
@media(max-width:640px){.pie{padding:26px 20px}}
.pie-panel{display:none;animation:cb-fade .4s ease}
.pie-panel.is-active{display:block}
.pie-q{font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:1.5rem;color:var(--ink);text-align:center;margin-bottom:26px;line-height:1.1}
.pie-concerns{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media(max-width:760px){.pie-concerns{grid-template-columns:repeat(2,1fr)}}
.pie-concern{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.82rem;color:var(--ink);transition:all .18s}
.pie-concern:hover{border-color:var(--blue);background:var(--wash);transform:translateY(-2px)}
.pie-emoji{font-size:1.9rem;font-style:normal}
.pie-note{text-align:center;color:var(--muted);font-size:.85rem;margin-top:22px}
.pie-crumb{display:flex;align-items:center;gap:12px;margin-bottom:22px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pie-back{background:none;border:1px solid var(--line);border-radius:20px;padding:6px 14px;cursor:pointer;font:inherit;color:var(--blue);letter-spacing:.04em}
.pie-back:hover{background:var(--wash)}
.pie-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px}
@media(max-width:640px){.pie-kpis{grid-template-columns:1fr}}
.pie-kpi{border:1px solid var(--line);border-radius:12px;padding:22px 20px;text-align:center;position:relative;overflow:hidden}
.pie-kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.pie-kpi.pie-up::before{background:var(--green)}
.pie-kpi.pie-down::before{background:var(--red)}
.pie-kpi-l{font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pie-kpi-v{font-family:var(--display);font-style:italic;font-weight:800;font-size:2.2rem;margin-top:6px}
.pie-up .pie-kpi-v{color:var(--green)} .pie-down .pie-kpi-v{color:var(--red)}
.pie-flag{display:flex;gap:14px;align-items:flex-start;background:rgba(238,59,37,.06);border:1px solid rgba(238,59,37,.25);border-radius:12px;padding:16px 18px;margin-bottom:24px;font-size:.9rem;line-height:1.5;color:var(--ink)}
.pie-flag-ico{flex:none;width:26px;height:26px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-weight:800;font-style:italic}
.pie-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}
@media(max-width:760px){.pie-cols{grid-template-columns:1fr}}
.pie-block{border:1px solid var(--line);border-radius:12px;padding:20px}
.pie-block-t{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.pie-bar-row{display:grid;grid-template-columns:74px 1fr 48px;align-items:center;gap:12px;margin-bottom:12px}
.pie-bar-n{font-size:.82rem;font-weight:600;color:var(--ink)}
.pie-bar{height:10px;background:var(--wash);border-radius:5px;overflow:hidden}
.pie-bar-fill{display:block;height:100%;border-radius:5px;width:0;transition:width .9s cubic-bezier(.4,0,.2,1)}
.pie-bar-fill.up{background:var(--green)} .pie-bar-fill.down{background:var(--red)}
.pie-bar-v{font-size:.82rem;font-weight:700;text-align:right;color:var(--muted)}
.pie-bar-v.up{color:var(--green)} .pie-bar-v.down{color:var(--red)}
.pie-insight{background:var(--blue-deep);color:#fff;border-radius:16px;padding:38px 34px;text-align:center;position:relative;overflow:hidden}
.pie-insight::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--blue),var(--teal),var(--yellow))}
.pie-insight-badge{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:14px}
.pie-insight-h{font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:1.7rem;line-height:1.05;margin-bottom:12px}
.pie-insight-p{font-size:.98rem;line-height:1.6;color:rgba(255,255,255,.85);max-width:46ch;margin:0 auto 24px}
.pie-insight-p b{color:var(--yellow)}
.pie-impact{background:rgba(255,255,255,.08);border-radius:12px;padding:20px;margin:0 auto 20px;max-width:340px}
.pie-impact-l{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.pie-impact-v{font-family:var(--display);font-style:italic;font-weight:800;font-size:2.8rem;color:var(--yellow);line-height:1.1;font-variant-numeric:tabular-nums}
.pie-insight-sub{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.92rem;color:#fff;margin:0}
.pie-next,.pie-restart{margin-top:4px}
.pie-restart,button.pie-restart{margin:32px auto 0;display:block}

/* ============================================================
   BUMPER FINANCE — split hero + before/after animation
   ============================================================ */
.subhero--split{padding:0}
.subhero__split{position:relative;z-index:2;max-width:var(--container);margin:0 auto;padding:64px 24px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
@media(max-width:920px){.subhero__split{grid-template-columns:1fr;gap:32px;padding:48px 24px}}
.subhero__col{text-align:left}
.subhero__col .subhero__logo{margin:0 0 18px}
.subhero__col .eyebrow{justify-content:flex-start}
.subhero__col .subhero__actions{justify-content:flex-start}
.subhero__demo{width:100%}
/* Pie hero reserves vertical space so its monitor box can grow without moving the hero */
.subhero--pie .subhero__demo{align-self:start;display:flex;flex-direction:column;align-items:stretch;min-height:460px}

.fhero{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.fhero{grid-template-columns:1fr}}
.fhero-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:20px 18px;backdrop-filter:blur(4px)}
.fhero-after{background:rgba(62,189,196,.12);border-color:rgba(62,189,196,.4)}
.fhero-tag{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.7rem;letter-spacing:.04em;color:rgba(255,255,255,.7);margin-bottom:12px}
.fhero-tag--on{color:var(--teal)}
.fhero-timer{font-size:.92rem;color:#fff;font-weight:600;margin-bottom:14px}
.fhero-timer span{font-family:var(--display);font-style:italic;font-weight:800}
.fhero-bar{height:6px;background:rgba(255,255,255,.15);border-radius:3px;overflow:hidden;margin-bottom:14px}
.fhero-bar-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--yellow));transition:width .7s cubic-bezier(.4,0,.2,1)}
.fhero-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.fhero-list li{font-size:.86rem;color:rgba(255,255,255,.55);padding-left:24px;position:relative;transition:color .3s}
.fhero-list li.miss::before{content:"\2013";position:absolute;left:4px;color:rgba(255,255,255,.4)}
.fhero-after li::before{content:"\2713";position:absolute;left:2px;color:rgba(255,255,255,.25);font-weight:700;transition:color .3s,transform .3s}
.fhero-after li.on{color:#fff}
.fhero-after li.on::before{color:var(--teal);transform:scale(1.15)}

/* ---- package builder ---- */
.fpb{margin-top:44px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.fpb-steps{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line);background:var(--wash)}
.fpb-step{display:flex;align-items:center;justify-content:center;gap:9px;padding:15px 10px;border:0;background:none;cursor:pointer;font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.74rem;letter-spacing:.02em;color:var(--muted);border-bottom:3px solid transparent;transition:all .18s}
@media(max-width:640px){.fpb-step{flex-direction:column;gap:4px;font-size:.6rem;text-align:center}}
.fpb-step:hover{color:var(--ink)}
.fpb-step.is-active{color:var(--blue);border-bottom-color:var(--blue);background:#fff}
.fpb-step.is-done{color:var(--teal)}
.fpb-step-n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--line);color:var(--muted);font-family:var(--body);font-style:normal;font-size:.72rem;font-weight:700}
.fpb-step.is-active .fpb-step-n{background:var(--blue);color:#fff}
.fpb-step.is-done .fpb-step-n{background:var(--teal);color:#fff}
.fpb-stage{padding:32px;min-height:340px}
@media(max-width:640px){.fpb-stage{padding:22px}}
.fpb-panel{display:none;animation:cb-fade .4s ease}
.fpb-panel.is-active{display:block}
.fpb-vehicle{background:var(--blue-deep);color:#fff;border-radius:14px;padding:34px 30px;text-align:center;margin-bottom:22px}
.fpb-vehicle-badge{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:12px}
.fpb-vehicle-name{font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:1.7rem;line-height:1.05}
.fpb-vehicle-price{font-family:var(--display);font-style:italic;font-weight:800;font-size:2.2rem;color:var(--yellow);margin:6px 0 18px}
.fpb-waiting{font-size:.9rem;color:rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;gap:8px}
.fpb-dots{display:inline-flex;gap:4px}
.fpb-dots i{width:6px;height:6px;border-radius:50%;background:var(--teal);animation:fpb-blink 1.2s infinite}
.fpb-dots i:nth-child(2){animation-delay:.2s} .fpb-dots i:nth-child(3){animation-delay:.4s}
@keyframes fpb-blink{0%,100%{opacity:.3}50%{opacity:1}}
.fpb-products{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:22px}
.fpb-prod{border:1px solid var(--line);border-radius:12px;padding:18px;opacity:0;transform:translateY(12px);transition:opacity .4s,transform .4s,border-color .18s,box-shadow .18s}
.fpb-prod.in{opacity:1;transform:translateY(0)}
.fpb-prod:hover{border-color:var(--blue);box-shadow:0 6px 18px rgba(43,104,171,.1)}
.fpb-prod-t{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.95rem;color:var(--ink);margin-bottom:6px}
.fpb-prod-d{font-size:.82rem;color:var(--muted);line-height:1.5;margin-bottom:10px}
.fpb-prod-c{font-size:.76rem;font-weight:600;color:var(--blue);border-top:1px solid var(--line);padding-top:10px}
.fpb-build{display:grid;grid-template-columns:1fr .9fr;gap:22px;margin-bottom:22px}
@media(max-width:720px){.fpb-build{grid-template-columns:1fr}}
.fpb-picks{display:flex;flex-direction:column;gap:10px}
.fpb-pick{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;font-weight:600;font-size:.9rem;color:var(--ink);transition:all .18s}
.fpb-pick span{color:var(--muted);font-size:.82rem}
.fpb-pick::after{content:"+";margin-left:auto;display:none}
.fpb-pick:hover{border-color:var(--muted)}
.fpb-pick.on{border-color:var(--green);background:rgba(22,163,74,.06)}
.fpb-pick.on span{color:var(--green)}
.fpb-payment{background:var(--wash);border:1px solid var(--line);border-radius:12px;padding:24px 22px;align-self:start}
.fpb-pay-row{display:flex;justify-content:space-between;font-size:.9rem;color:var(--muted);margin-bottom:12px}
.fpb-pay-base{color:var(--ink);font-weight:600}
.fpb-pay-add span:last-child,#fpb-add{color:var(--green);font-weight:700}
.fpb-pay-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:14px;margin-top:2px}
.fpb-pay-total span:first-child{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.9rem;color:var(--ink)}
#fpb-total{font-family:var(--display);font-style:italic;font-weight:800;font-size:1.8rem;color:var(--blue-deep)}
#fpb-total.bump{animation:fpb-bump .3s ease}
@keyframes fpb-bump{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
.fpb-pay-note{font-size:.76rem;color:var(--muted);line-height:1.45;margin:14px 0 0}
.fpb-compare{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:22px}
@media(max-width:640px){.fpb-compare{grid-template-columns:1fr}}
.fpb-flow{border:1px solid var(--line);border-radius:12px;padding:22px}
.fpb-flow--old{background:#fff}
.fpb-flow--new{background:rgba(62,189,196,.06);border-color:rgba(62,189,196,.4)}
.fpb-flow-h{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.82rem;margin-bottom:14px}
.fpb-flow--old .fpb-flow-h{color:var(--muted)} .fpb-flow--new .fpb-flow-h{color:var(--teal-ink,#178791)}
.fpb-flow ol{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:9px}
.fpb-flow li{font-size:.86rem;color:var(--ink);line-height:1.4}
.fpb-flow--old li{color:var(--muted)}
.fpb-restart{margin:0 auto;display:block}

/* ---- penetration simulator ---- */
.fsim{margin-top:40px;display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:stretch}
@media(max-width:820px){.fsim{grid-template-columns:1fr}}
.fsim-controls{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px 28px}
.fsim-field{margin-bottom:26px}
.fsim-field label{display:flex;justify-content:space-between;align-items:baseline;font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.fsim-field label b{font-family:var(--display);font-style:italic;font-weight:800;font-size:1.3rem;color:var(--blue)}
.fsim-field input[type=range]{width:100%;accent-color:var(--blue);height:6px}
.fsim-scale{display:flex;justify-content:space-between;font-size:.7rem;color:var(--faint);margin-top:6px}
.fsim-note{font-size:.74rem;color:var(--faint);line-height:1.5;margin:6px 0 0}
.fsim-result{background:var(--blue-deep);color:#fff;border-radius:16px;padding:30px 28px;display:flex;flex-direction:column;justify-content:center}
.fsim-rows{border-bottom:1px solid rgba(255,255,255,.15);padding-bottom:18px;margin-bottom:18px}
.fsim-row{display:flex;justify-content:space-between;font-size:.92rem;margin-bottom:12px;color:rgba(255,255,255,.82)}
.fsim-row span:last-child{font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.fsim-impact-l{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.fsim-impact-v{font-family:var(--display);font-style:italic;font-weight:800;font-size:3rem;color:var(--yellow);line-height:1.1;font-variant-numeric:tabular-nums}
.fsim-impact-v.bump{animation:fpb-bump .3s ease}

/* ============================================================
   HERO MICRO-ANIMATIONS (Retention, Inventory Ads, Pie)
   Shared look with the Finance before/after: glassy cards on
   the dark hero, teal/yellow accents, looping, glanceable.
   ============================================================ */
.rhero,.ihero,.phero{color:#fff}

/* --- Retention: at-risk -> retained --- */
.rhero-status{display:flex;align-items:center;gap:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:20px;position:relative;overflow:hidden;backdrop-filter:blur(4px)}
.rhero-avatar{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center;font-size:1.7rem;flex:none}
.rhero-stat{flex:1;min-width:0}
.rhero-state{font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:1.15rem;line-height:1.05;transition:color .4s}
.rhero-state--risk{color:#F6957F} .rhero-state--won{color:var(--teal)}
.rhero-sub{font-size:.82rem;color:rgba(255,255,255,.65);margin-top:3px;transition:opacity .3s}
.rhero-pulse{width:12px;height:12px;border-radius:50%;background:#F6957F;flex:none;box-shadow:0 0 0 0 rgba(246,149,127,.6);animation:rhero-ping 1.4s infinite}
.rhero-pulse.on{background:var(--teal);box-shadow:0 0 0 0 rgba(62,189,196,.6);animation:rhero-ping-on 1.4s infinite}
@keyframes rhero-ping{0%{box-shadow:0 0 0 0 rgba(246,149,127,.5)}70%{box-shadow:0 0 0 12px rgba(246,149,127,0)}100%{box-shadow:0 0 0 0 rgba(246,149,127,0)}}
@keyframes rhero-ping-on{0%{box-shadow:0 0 0 0 rgba(62,189,196,.5)}70%{box-shadow:0 0 0 12px rgba(62,189,196,0)}100%{box-shadow:0 0 0 0 rgba(62,189,196,0)}}
.rhero-flow{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.rhero-chip{align-self:flex-start;font-size:.82rem;font-weight:600;color:rgba(255,255,255,.85);background:rgba(62,189,196,.14);border:1px solid rgba(62,189,196,.3);border-radius:20px;padding:7px 16px;opacity:0;transform:translateX(-12px);transition:opacity .4s,transform .4s}
.rhero-chip.on{opacity:1;transform:translateX(0)}
.rhero-chip::before{content:"\2713  ";color:var(--teal);font-weight:700}
.rhero-ltv{background:rgba(251,207,9,.1);border:1px solid rgba(251,207,9,.35);border-radius:14px;padding:18px 20px;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.rhero-ltv-l{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.rhero-ltv-v{font-family:var(--display);font-style:italic;font-weight:800;font-size:2.1rem;color:var(--yellow);font-variant-numeric:tabular-nums}

/* --- Inventory: tile -> ad morph --- */
.ihero-stage{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px}
@media(max-width:520px){.ihero-stage{grid-template-columns:1fr;gap:10px}.ihero-arrow{transform:rotate(90deg)}}
.ihero-inv{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:18px;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s;backdrop-filter:blur(4px)}
.ihero-inv.in{opacity:1;transform:translateY(0)}
.ihero-inv-badge{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:8px}
.ihero-inv-name{font-weight:700;font-size:1rem;color:#fff}
.ihero-inv-vin{font-size:.76rem;color:rgba(255,255,255,.55);margin-top:4px;font-variant-numeric:tabular-nums}
.ihero-arrow{color:rgba(255,255,255,.5);font-size:1.5rem;font-weight:700}
.ihero-ad{background:#fff;border-radius:12px;overflow:hidden;opacity:0;transform:translateY(10px) scale(.96);transition:opacity .5s,transform .5s}
.ihero-ad.in{opacity:1;transform:translateY(0) scale(1)}
.ihero-ad-tag{font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;color:#fff}
.ihero-ad-tag.is-fb{background:#1877F2} .ihero-ad-tag.is-google{background:#34A853}
.ihero-ad-img{height:64px;background:linear-gradient(135deg,#e6eef7,#d3e0ef);display:grid;place-items:center}
.ihero-ad-body{padding:10px 14px}
.ihero-ad-t{font-weight:700;font-size:.84rem;color:var(--ink)}
.ihero-ad-p{font-family:var(--display);font-style:italic;font-weight:800;color:var(--blue);font-size:1.05rem;margin-top:2px}
.ihero-cap{text-align:center;font-size:.84rem;color:rgba(255,255,255,.7);margin-top:16px;line-height:1.4}

/* --- Pie: Dealership Health Monitor (fixed height, in-place swap) --- */
.phero{width:100%;box-sizing:border-box;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:24px;backdrop-filter:blur(4px)}
.phero-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.12)}
.phero-head-l{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.8rem;letter-spacing:.04em;color:rgba(255,255,255,.75)}
.phero-score{font-family:var(--display);font-style:italic;font-weight:800;font-size:2.6rem;color:var(--teal);line-height:1;font-variant-numeric:tabular-nums}
.phero-score small{font-size:1rem;color:rgba(255,255,255,.5);font-weight:600}
/* fixed-height stage; the two panels share the same space and crossfade */
.phero-body{position:relative;margin-top:16px;transition:height .5s cubic-bezier(.4,0,.2,1)}
.phero-panel{position:absolute;left:0;right:0;top:0;opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .45s ease,transform .45s ease}
.phero-panel.is-active{position:relative;opacity:1;transform:translateY(0);pointer-events:auto}
.phero-depts{display:flex;flex-direction:column;gap:2px}
.phero-dept{display:flex;align-items:center;gap:10px;font-size:.9rem;color:#fff;padding:9px 4px;border-radius:8px;transition:background .3s}
.phero-dept.warn{background:rgba(251,207,9,.12)}
.phero-dot{width:9px;height:9px;border-radius:50%;flex:none;transition:background .3s}
.phero-dot.ok{background:var(--teal)} .phero-dot.warn{background:var(--yellow);box-shadow:0 0 0 0 rgba(251,207,9,.6);animation:phero-ping 1.4s infinite}
@keyframes phero-ping{0%{box-shadow:0 0 0 0 rgba(251,207,9,.5)}70%{box-shadow:0 0 0 8px rgba(251,207,9,0)}100%{box-shadow:0 0 0 0 rgba(251,207,9,0)}}
.phero-tag{margin-left:auto;font-family:var(--body);font-style:normal;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 10px;border-radius:14px;transition:all .3s}
.phero-tag.ok{background:rgba(62,189,196,.16);color:var(--teal)}
.phero-tag.warn{background:rgba(251,207,9,.2);color:var(--yellow)}
/* diagnostics panel */
.phero-diag{display:flex;flex-direction:column;gap:8px}
.phero-diag-head{display:flex;align-items:center;gap:9px;font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.72rem;letter-spacing:.04em;color:rgba(255,255,255,.6);margin-bottom:2px}
.phero-ins-step{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s;padding:11px 15px;border-radius:10px;background:rgba(255,255,255,.06)}
.phero-ins-step.on{opacity:1;transform:translateY(0)}
.phero-ins-flag{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.9rem;color:var(--yellow)}
.phero-ins-label{font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:3px}
.phero-ins-label.phero-pos{color:var(--teal)}
.phero-ins-big{font-family:var(--display);font-style:italic;font-weight:800;font-size:1.32rem;color:#fff;line-height:1.05}
.phero-ins-big small{font-size:.8rem;color:rgba(255,255,255,.5);font-weight:600}
.phero-ins-sub{font-size:.8rem;color:rgba(255,255,255,.65);margin-top:2px}
.phero-neg{color:#F6957F!important}
/* ============================================================
   CAMPAIGN BUILDER — v2 in-depth additions
   ============================================================ */
.cb-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.cb-filter{padding:8px 16px;border-radius:20px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:.8rem;font-weight:600;color:var(--muted);transition:all .15s}
.cb-filter:hover{border-color:var(--muted);color:var(--ink)}
.cb-filter.is-on{background:var(--blue);border-color:var(--blue);color:#fff}
.cb-inv-row .cb-inv-v{float:right;font-weight:600;font-size:.82rem;color:var(--muted)}
.cb-inv-row.is-sel .cb-inv-v{color:var(--blue)}
.cb-inv-row.is-sel::after{content:none}
.cb-side-meta{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:rgba(255,255,255,.6);padding:8px 0;border-top:1px solid rgba(255,255,255,.12);margin-top:2px}
.cb-side-meta b{color:#fff;font-weight:700}
.cb-side-meta+.cb-next,.cb-side-meta+ .btn{margin-top:16px}
.cb-aud{flex-wrap:wrap}
.cb-aud-meta{display:block;width:100%;font-size:.76rem;color:var(--muted);font-weight:500;margin-top:4px}
.cb-aud-meta b{color:var(--teal);font-weight:700}
.cb-aud.is-on .cb-aud-meta{color:var(--ink)}
/* platform toggles + budget */
.cb-plats{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.cb-plat{padding:9px 20px;border-radius:20px;border:1px solid var(--line);background:#fff;cursor:pointer;font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.74rem;letter-spacing:.02em;color:var(--muted);transition:all .15s;position:relative;padding-left:34px}
.cb-plat::before{content:"";position:absolute;left:14px;top:50%;transform:translateY(-50%);width:14px;height:14px;border-radius:4px;border:2px solid var(--line)}
.cb-plat.is-on{color:var(--ink);border-color:var(--blue)}
.cb-plat.is-on::before{background:var(--blue);border-color:var(--blue)}
.cb-budget{height:34px;border-radius:8px;overflow:hidden;display:flex;margin-bottom:22px;border:1px solid var(--line)}
.cb-budget-bar{display:flex;width:100%}
.cb-budget-seg{display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:700;color:#fff;letter-spacing:.02em;transition:width .4s;white-space:nowrap;overflow:hidden}
.cb-bud-fb{background:#1877F2} .cb-bud-ig{background:#C13584} .cb-bud-gg{background:#34A853}
.cb-ad--ig .cb-ad-tag{background:#C13584}
/* funnel */
.cb-funnel{display:flex;flex-direction:column;gap:0;margin-bottom:24px}
.cb-fstage{display:flex;align-items:center;gap:16px}
.cb-fbar{--w:100%;height:44px;width:var(--w);background:var(--wash);border-radius:8px;overflow:hidden;min-width:90px;transition:width .5s}
.cb-fbar-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--teal));transition:width .9s cubic-bezier(.4,0,.2,1)}
.cb-fbar-lead{background:linear-gradient(90deg,var(--teal),var(--yellow))}
.cb-fmeta{display:flex;align-items:baseline;gap:8px;flex:none}
.cb-fn{font-family:var(--display);font-style:italic;font-weight:800;font-size:1.5rem;color:var(--blue-deep);font-variant-numeric:tabular-nums}
.cb-fmeta span{font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cb-fconv{font-size:.72rem;color:var(--faint);padding:4px 0 4px 18px;position:relative}
.cb-fconv::before{content:"";position:absolute;left:6px;top:0;bottom:0;width:2px;background:var(--line)}
.cb-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:8px}
@media(max-width:640px){.cb-kpis{grid-template-columns:1fr}}
.cb-kpi{background:var(--blue-deep);color:#fff;border-radius:12px;padding:20px 18px;text-align:center}
.cb-kpi-v{font-family:var(--display);font-style:italic;font-weight:800;font-size:1.9rem;color:var(--yellow);font-variant-numeric:tabular-nums;line-height:1}
.cb-kpi-l{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:8px}
.cb-restart{margin:22px auto 0;display:block}

/* ============================================================
   ACCESSORY ACCELERATOR — hero animation + demo
   ============================================================ */
/* Jeep image stack — cumulative build (plain->roof->boards->all) */
.acc-carwrap{position:relative;width:100%;max-width:400px;margin:0 auto;aspect-ratio:1000/600}
.acc-jeep{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:10px;opacity:0;transition:opacity .5s ease}
/* show only the image matching the current cumulative level */
.acc-carwrap.lvl-0 .acc-jeep--0{opacity:1}
.acc-carwrap.lvl-1 .acc-jeep--1{opacity:1}
.acc-carwrap.lvl-2 .acc-jeep--2{opacity:1}
.acc-carwrap.lvl-3 .acc-jeep--3{opacity:1}
/* hero */
.ahero{display:grid;gap:18px}
.ahero-vehicle{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:20px 20px 14px;backdrop-filter:blur(4px)}
.ahero-name{text-align:center;font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.9rem;color:#fff;margin-top:6px}
.ahero-tally{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:20px 22px;backdrop-filter:blur(4px)}
.ahero-line{display:flex;justify-content:space-between;align-items:baseline;font-size:.9rem;color:rgba(255,255,255,.7);padding:7px 0}
.ahero-line b{color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
.ahero-add b{color:var(--teal)}
.ahero-total{border-top:1px solid rgba(255,255,255,.14);margin-top:4px;padding-top:12px}
.ahero-total b{font-family:var(--display);font-style:italic;font-weight:800;font-size:1.3rem;color:#fff}
.ahero-gross{display:flex;justify-content:space-between;align-items:center;background:rgba(251,207,9,.1);border:1px solid rgba(251,207,9,.35);border-radius:10px;padding:12px 16px;margin-top:14px;font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.ahero-gross b{font-family:var(--display);font-style:italic;font-weight:800;font-size:1.5rem;color:var(--yellow);text-transform:none;letter-spacing:0;font-variant-numeric:tabular-nums}
/* demo */
.accd{margin-top:44px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.accd-toggle{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line);background:var(--wash)}
.accd-dept{padding:16px 10px;border:0;background:none;cursor:pointer;font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.8rem;letter-spacing:.02em;color:var(--muted);border-bottom:3px solid transparent;transition:all .18s}
.accd-dept:hover{color:var(--ink)}
.accd-dept.is-on{color:var(--blue);border-bottom-color:var(--blue);background:#fff}
.accd-body{display:grid;grid-template-columns:1.1fr .9fr;gap:0}
@media(max-width:760px){.accd-body{grid-template-columns:1fr}}
.accd-left{padding:30px;border-right:1px solid var(--line)}
@media(max-width:760px){.accd-left{border-right:0;border-bottom:1px solid var(--line)}}
.accd-vehicle{background:var(--wash);border-radius:12px;padding:20px;margin-bottom:18px}
.accd-recs{display:flex;flex-direction:column;gap:8px}
.accd-rec{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;padding:12px 15px;border:1px solid var(--line);border-radius:10px;background:#fff;font-weight:600;font-size:.88rem;color:var(--ink);opacity:0;transform:translateX(-8px);transition:opacity .35s,transform .35s}
.accd-rec.in{opacity:1;transform:translateX(0)}
.accd-rec span{color:var(--teal);font-weight:700;font-size:.82rem}
.accd-right{padding:30px;display:flex;flex-direction:column;justify-content:center}
.accd-context{font-size:.82rem;font-weight:600;color:var(--muted);margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.accd-rows{display:flex;flex-direction:column;gap:2px;margin-bottom:16px}
.accd-row{display:flex;justify-content:space-between;font-size:.92rem;color:var(--muted);padding:9px 0}
.accd-row b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.accd-inc b{color:var(--green)}
.accd-total{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid var(--line);padding-top:16px}
.accd-total span{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.92rem;color:var(--ink)}
.accd-total b{font-family:var(--display);font-style:italic;font-weight:800;font-size:2rem;color:var(--blue);font-variant-numeric:tabular-nums}

/* ============================================================
   GLOVEBOX — hero live-editor + build-a-website demo
   ============================================================ */
/* hero editor (dark subhero) */
.gbh{display:grid;grid-template-columns:1fr 1.15fr;gap:16px;align-items:start}
@media(max-width:560px){.gbh{grid-template-columns:1fr}}
.gbh-editor{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:16px;backdrop-filter:blur(4px)}
.gbh-editor-bar{display:flex;align-items:center;gap:6px;margin-bottom:14px}
.gbh-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.25)}
.gbh-editor-t{margin-left:8px;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.gbh-field label{display:block;font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:6px}
.gbh-input{background:rgba(0,0,0,.25);border:1px solid var(--teal);border-radius:8px;padding:11px 13px;font-size:.95rem;color:#fff;min-height:22px;font-weight:600}
.gbh-caret{color:var(--teal);animation:gbh-blink 1s steps(1) infinite}
@keyframes gbh-blink{50%{opacity:0}}
.gbh-pub{margin-top:14px;width:100%;background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:8px;padding:10px;font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.8rem;cursor:default;transition:background .3s,transform .2s}
.gbh-pub.on{background:var(--yellow);color:var(--ink);transform:scale(1.03)}
.gbh-preview{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.gbh-browser{background:#e9eef4;padding:8px 12px;display:flex;align-items:center}
.gbh-url{font-size:.72rem;color:#7b8794;background:#fff;border-radius:12px;padding:3px 12px}
.gbh-site-hero{background:linear-gradient(135deg,#eaf2fb,#d6e6f6);padding:26px 22px;text-align:center}
.gbh-site-h{font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:1.35rem;color:var(--ink);line-height:1.05;transition:color .3s}
.gbh-site-h.gbh-flash{animation:gbh-hl .7s ease}
@keyframes gbh-hl{0%{background:rgba(251,207,9,.55)}100%{background:transparent}}
.gbh-site-sub{font-size:.82rem;color:var(--muted);margin-top:4px}
.gbh-site-cta{margin-top:12px;background:var(--blue);color:#fff;border:0;border-radius:6px;padding:7px 16px;font-weight:700;font-size:.8rem}
.gbh-published{max-height:0;overflow:hidden;transition:max-height .5s ease;background:#fff;padding:0 22px}
.gbh-published.on{max-height:180px;padding:16px 22px}
.gbh-pub-row{display:flex;justify-content:space-between;font-size:.86rem;color:var(--muted);padding:6px 0;border-top:1px solid var(--line)}
.gbh-pub-row:first-child{border-top:0}
.gbh-pub-row b{color:var(--ink);font-weight:700}
.gbh-pub-live b{color:var(--green)}

/* demo */
.gbd{margin-top:44px;display:grid;grid-template-columns:.85fr 1.15fr;gap:24px;border:1px solid var(--line);border-radius:16px;padding:26px;background:#fff}
@media(max-width:820px){.gbd{grid-template-columns:1fr}}
.gbd-step{margin-bottom:22px}
.gbd-step-h{display:flex;align-items:center;gap:9px;font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.82rem;color:var(--ink);margin-bottom:12px}
.gbd-step-h span{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;font-family:var(--body);font-style:normal;font-size:.72rem;font-weight:700}
.gbd-layouts,.gbd-content{display:flex;flex-wrap:wrap;gap:8px}
.gbd-layout,.gbd-mod{padding:8px 14px;border-radius:8px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:.82rem;font-weight:600;color:var(--muted);transition:all .15s}
.gbd-layout:hover,.gbd-mod:hover{border-color:var(--muted);color:var(--ink)}
.gbd-layout.is-on{background:var(--blue);border-color:var(--blue);color:#fff}
.gbd-mod.is-on{background:rgba(62,189,196,.12);border-color:var(--teal);color:var(--ink)}
.gbd-mod.is-on::before{content:"\2713  ";color:var(--teal);font-weight:700}
.gbd-brand{display:flex;gap:10px}
.gbd-color{width:30px;height:30px;border-radius:50%;border:2px solid var(--line);background:var(--sw);cursor:pointer;transition:transform .15s}
.gbd-color.is-on{transform:scale(1.15);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--sw)}
/* live preview */
.gbd-preview{border:1px solid var(--line);border-radius:12px;overflow:hidden;align-self:start}
.gbd-browser{background:#e9eef4;padding:8px 12px}
.gbd-url{font-size:.72rem;color:#7b8794;background:#fff;border-radius:12px;padding:3px 12px}
.gbd-site{background:#fff;transition:background .3s}
.gbd-site.is-dark{background:#1b1b1f}
.gbd-site-nav{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid var(--line)}
.gbd-site.is-dark .gbd-site-nav{border-color:rgba(255,255,255,.12)}
.gbd-logo{font-family:var(--display);font-style:italic;font-weight:800;font-size:1rem;color:var(--blue);letter-spacing:.02em;transition:color .3s}
.gbd-navlinks{display:flex;gap:8px}
.gbd-navlinks i{width:22px;height:6px;border-radius:3px;background:var(--blue);opacity:.5;transition:background .3s}
.gbd-site-hero{padding:34px 24px;text-align:center;transition:background .4s}
.gbd-hero-tag{display:inline-block;font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--blue);border-radius:12px;padding:3px 12px;margin-bottom:10px;transition:background .3s}
.gbd-hero-h{font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:1.5rem;color:var(--ink);line-height:1.05}
.gbd-site.is-dark .gbd-hero-h{color:#fff}
.gbd-hero-cta{margin-top:12px;background:var(--blue);color:#fff;border:0;border-radius:6px;padding:8px 18px;font-weight:700;font-size:.82rem;transition:background .3s}
.gbd-mods{display:flex;flex-wrap:wrap;gap:10px;padding:16px 24px}
.gbd-mod-card{flex:1 1 40%;min-width:120px;border:1px solid var(--line);border-top:3px solid var(--blue);border-radius:8px;padding:14px;font-weight:700;font-size:.84rem;color:var(--ink);background:#fff;text-align:center;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
.gbd-mod-card.in{opacity:1;transform:translateY(0)}
.gbd-site.is-dark .gbd-mod-card{background:#26262c;color:#fff;border-color:rgba(255,255,255,.12)}
.gbd-ready{text-align:center;padding:16px 24px 22px}
.gbd-ready b{display:block;font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:1rem;color:var(--green)}
.gbd-ready span{font-size:.8rem;color:var(--muted)}
.gbd-site.is-dark .gbd-ready span{color:rgba(255,255,255,.6)}

/* ============================================================
   ODOMETER — Call Journey hero + Call Recovery Simulator
   ============================================================ */
/* hero */
.oh{display:grid;grid-template-columns:.85fr 1.15fr;gap:20px;align-items:start}
@media(max-width:560px){.oh{grid-template-columns:1fr}}
.oh-flow{display:flex;flex-direction:column;align-items:center;gap:8px}
.oh-node{width:100%;text-align:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:12px;backdrop-filter:blur(4px)}
.oh-node .oh-lbl{display:block;font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:3px}
.oh-node b{font-family:var(--display);font-style:italic;font-weight:800;font-size:1.5rem;color:#fff}
.oh-calls b{color:var(--teal)}
.oh-arrow{color:rgba(255,255,255,.4);font-size:1.1rem;line-height:1}
.oh-depts{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.oh-dept{text-align:center;padding:10px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);font-size:.82rem;font-weight:700;color:rgba(255,255,255,.5);opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s,background .3s,color .3s,border-color .3s}
.oh-dept.on{opacity:1;transform:translateY(0);color:#fff;background:rgba(62,189,196,.14);border-color:rgba(62,189,196,.4)}
.oh-dept.miss{background:rgba(238,59,37,.16);border-color:var(--red);color:#fff;animation:oh-pulse 1s ease infinite}
@keyframes oh-pulse{0%,100%{box-shadow:0 0 0 0 rgba(238,59,37,.4)}50%{box-shadow:0 0 0 6px rgba(238,59,37,0)}}
.oh-right{display:flex;flex-direction:column;gap:12px}
.oh-alert{background:rgba(238,59,37,.12);border:1px solid rgba(238,59,37,.4);border-radius:10px;padding:14px;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.oh-alert.on{opacity:1;transform:translateY(0)}
.oh-alert-flag{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.95rem;color:#F6957F}
.oh-alert-sub{font-size:.82rem;color:rgba(255,255,255,.7);margin-top:3px}
.oh-alert-sub b{color:#F6957F}
.oh-activate{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:14px;opacity:0;max-height:0;overflow:hidden;transition:opacity .4s,max-height .5s;backdrop-filter:blur(4px)}
.oh-activate.on{opacity:1;max-height:220px}
.oh-act-t{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.72rem;letter-spacing:.04em;color:var(--teal);margin-bottom:8px}
.oh-act{font-size:.88rem;color:rgba(255,255,255,.5);padding:4px 0;opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s,color .3s}
.oh-act.on{opacity:1;transform:translateX(0);color:#fff}
.oh-stats{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.oh-stats.on{opacity:1;transform:translateY(0)}
.oh-stat{text-align:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:10px 4px}
.oh-stat b{display:block;font-family:var(--display);font-style:italic;font-weight:800;font-size:1.25rem;color:#fff;line-height:1}
.oh-stat span{font-size:.6rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.oh-stat-good b{color:var(--teal)} .oh-stat-rec b{color:var(--yellow)}

/* Call Recovery Simulator demo */
.ocr{margin-top:44px;border:1px solid var(--line);border-radius:16px;padding:28px;background:#fff}
.ocr-controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px;margin-bottom:26px}
@media(max-width:760px){.ocr-controls{grid-template-columns:1fr}}
.ocr-slider{display:block}
.ocr-slider-top{display:flex;justify-content:space-between;font-size:.8rem;font-weight:600;color:var(--muted);margin-bottom:8px}
.ocr-slider-top b{color:var(--blue);font-family:var(--display);font-style:italic;font-weight:800;font-size:1rem}
.ocr-slider input[type=range]{width:100%;accent-color:var(--blue)}
.ocr-panels{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:620px){.ocr-panels{grid-template-columns:1fr}}
.ocr-card{border:1px solid var(--line);border-radius:12px;padding:18px}
.ocr-without{background:#fbfcfd}
.ocr-with{background:rgba(62,189,196,.05);border-color:rgba(62,189,196,.3)}
.ocr-card-t{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.82rem;margin-bottom:12px}
.ocr-without .ocr-card-t{color:var(--muted)} .ocr-with .ocr-card-t{color:var(--teal)}
.ocr-row{display:flex;justify-content:space-between;font-size:.88rem;color:var(--muted);padding:7px 0;border-top:1px solid var(--line)}
.ocr-row:first-of-type{border-top:0}
.ocr-row b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.ocr-row-bad b{color:var(--red)} .ocr-row-good b{color:var(--green)}
.ocr-payoff{margin-top:22px;display:flex;align-items:center;justify-content:space-between;background:var(--blue-deep);color:#fff;border-radius:12px;padding:18px 24px}
.ocr-payoff span{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.95rem}
.ocr-payoff b{font-family:var(--display);font-style:italic;font-weight:800;font-size:2.1rem;color:var(--yellow);font-variant-numeric:tabular-nums}
@media(max-width:520px){.ocr-payoff{flex-direction:column;gap:6px;text-align:center}}

/* ============================================================
   CALLS ON DEMAND — Opportunity Meter hero + One Lead Two Outcomes
   ============================================================ */
/* hero */
.cod{display:grid;grid-template-columns:.9fr 1.1fr;gap:20px;align-items:start}
@media(max-width:560px){.cod{grid-template-columns:1fr}}
.cod-meter{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:18px;backdrop-filter:blur(4px)}
.cod-meter-t{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.72rem;letter-spacing:.04em;color:rgba(255,255,255,.6);margin-bottom:12px}
.cod-src{display:flex;justify-content:space-between;align-items:baseline;font-size:.86rem;color:rgba(255,255,255,.7);padding:7px 0}
.cod-src b{color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
.cod-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid rgba(255,255,255,.16);margin-top:6px;padding-top:12px}
.cod-total span{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.8rem;color:rgba(255,255,255,.75)}
.cod-total b{font-family:var(--display);font-style:italic;font-weight:800;font-size:1.8rem;color:var(--teal);font-variant-numeric:tabular-nums}
.cod-right{display:flex;flex-direction:column;gap:12px;min-height:430px}
.cod-result{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:14px 16px;opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s}
.cod-result.on{opacity:1;transform:translateY(0)}
.cod-result-t{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.72rem;letter-spacing:.04em;color:rgba(255,255,255,.6);margin-bottom:8px}
.cod-r-row{display:flex;justify-content:space-between;align-items:baseline;font-size:.9rem;color:rgba(255,255,255,.7);padding:4px 0}
.cod-r-row b{color:#fff;font-weight:700}
.cod-without{border-color:rgba(238,59,37,.3)}
.cod-r-miss b{color:#F6957F;font-family:var(--display);font-style:italic;font-weight:800}
.cod-with{border-color:rgba(62,189,196,.4)}
.cod-r-good b{color:var(--teal);font-family:var(--display);font-style:italic;font-weight:800}
.cod-activate{background:rgba(62,189,196,.08);border:1px solid rgba(62,189,196,.3);border-radius:10px;padding:14px 16px;opacity:0;max-height:0;overflow:hidden;transition:opacity .4s,max-height .5s;backdrop-filter:blur(4px)}
.cod-activate.on{opacity:1;max-height:220px}
.cod-act-t{display:flex;align-items:center;gap:8px;font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.74rem;color:var(--teal);margin-bottom:8px}
.cod-live{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 rgba(62,189,196,.6);animation:cod-live 1.4s infinite}
@keyframes cod-live{0%{box-shadow:0 0 0 0 rgba(62,189,196,.5)}70%{box-shadow:0 0 0 7px rgba(62,189,196,0)}100%{box-shadow:0 0 0 0 rgba(62,189,196,0)}}
.cod-act{font-size:.86rem;color:rgba(255,255,255,.55);padding:3px 0;opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s,color .3s}
.cod-act.on{opacity:1;transform:translateX(0);color:#fff}

/* One Lead Two Outcomes demo */
.cod2{margin-top:44px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.cod2-toggle{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line);background:var(--wash)}
@media(max-width:620px){.cod2-toggle{grid-template-columns:1fr 1fr}}
.cod2-t{padding:15px 8px;border:0;background:none;cursor:pointer;font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.76rem;color:var(--muted);border-bottom:3px solid transparent;transition:all .18s}
.cod2-t:hover{color:var(--ink)}
.cod2-t.is-on{color:var(--blue);border-bottom-color:var(--blue);background:#fff}
.cod2-split{display:grid;grid-template-columns:1fr 1fr}
@media(max-width:620px){.cod2-split{grid-template-columns:1fr}}
.cod2-side{padding:28px 24px;display:flex;flex-direction:column;align-items:center}
.cod2-lose{border-right:1px solid var(--line);background:#fbfcfd}
@media(max-width:620px){.cod2-lose{border-right:0;border-bottom:1px solid var(--line)}}
.cod2-win{background:rgba(62,189,196,.04)}
.cod2-side-t{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.8rem;margin-bottom:18px}
.cod2-lose .cod2-side-t{color:var(--muted)} .cod2-win .cod2-side-t{color:var(--teal)}
.cod2-steps{display:flex;flex-direction:column;align-items:center;width:100%;gap:0}
.cod2-step{width:100%;max-width:260px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:8px;padding:11px 14px;font-size:.86rem;font-weight:600;color:var(--ink);opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.cod2-step.in{opacity:1;transform:translateY(0)}
.cod2-win .cod2-step{border-color:rgba(62,189,196,.3)}
.cod2-arrow{color:var(--faint);font-size:1rem;line-height:1;padding:5px 0}
.cod2-outcome{margin-top:16px;width:100%;max-width:260px;text-align:center;border-radius:8px;padding:12px;font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:.95rem;opacity:0;transform:scale(.96);transition:opacity .4s,transform .4s}
.cod2-outcome.show{opacity:1;transform:scale(1)}
.cod2-outcome-bad{background:rgba(238,59,37,.1);color:var(--red)}
.cod2-outcome-good{background:rgba(22,163,74,.1);color:var(--green)}

/* ============================================================
   PSI — Build Your Stack hero + Dealer Growth Builder demo
   ============================================================ */
/* hero */
.psi{display:grid;grid-template-columns:.85fr 1.15fr;gap:20px;align-items:start}
@media(max-width:560px){.psi{grid-template-columns:1fr}}
.psi-pick{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:16px;backdrop-filter:blur(4px)}
.psi-pick-t{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.72rem;letter-spacing:.04em;color:rgba(255,255,255,.6);margin-bottom:10px}
.psi-biz{padding:10px 12px;border-radius:8px;font-size:.86rem;font-weight:600;color:rgba(255,255,255,.7);border:1px solid transparent;margin-bottom:6px;transition:all .3s}
.psi-biz.on{background:rgba(62,189,196,.14);border-color:rgba(62,189,196,.4);color:#fff}
.psi-build{display:flex;flex-direction:column;gap:12px;min-height:340px}
.psi-selected{font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:.95rem;color:var(--teal);opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.psi-selected.on{opacity:1;transform:translateY(0)}
.psi-stack{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.psi-item{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:11px 12px;font-size:.84rem;color:#fff;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.psi-item.on{opacity:1;transform:translateY(0)}
.psi-cost{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:14px 16px;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s;margin-top:auto}
.psi-cost.on{opacity:1;transform:translateY(0)}
.psi-cost-row{display:flex;justify-content:space-between;align-items:baseline;font-size:.9rem;color:rgba(255,255,255,.7);padding:5px 0}
.psi-cost-row b{font-family:var(--display);font-style:italic;font-weight:800;font-size:1.3rem}
.psi-ent{color:rgba(255,255,255,.5)!important;text-decoration:line-through}
.psi-cost-psi b{color:var(--yellow)}
.psi-cost-psi span{color:#fff;font-weight:700}

/* Goal-based recommender demo */
.pgb{margin-top:44px;display:grid;grid-template-columns:.8fr 1.2fr;gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
@media(max-width:820px){.pgb{grid-template-columns:1fr}}
.pgb-goals-col{padding:26px;border-right:1px solid var(--line);background:var(--wash);display:flex;flex-direction:column;gap:10px}
@media(max-width:820px){.pgb-goals-col{border-right:0;border-bottom:1px solid var(--line)}}
.pgb-goal2{text-align:left;padding:14px 16px;border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:.92rem;font-weight:600;color:var(--muted);transition:all .16s}
.pgb-goal2:hover{border-color:var(--muted);color:var(--ink)}
.pgb-goal2.is-on{background:var(--blue);border-color:var(--blue);color:#fff}
.pgb-rec{padding:30px}
.pgb-rec-t{font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:.9rem;color:var(--blue);margin-bottom:16px}
.pgb-stack{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:26px}
.pgb-prod2{background:rgba(62,189,196,.08);border:1px solid rgba(62,189,196,.35);border-radius:10px;padding:12px 18px;font-family:var(--display);font-style:italic;font-weight:700;font-size:.95rem;color:var(--ink);opacity:0;transform:translateY(8px) scale(.96);transition:opacity .35s,transform .35s}
.pgb-prod2.in{opacity:1;transform:translateY(0) scale(1)}
.pgb-plus{font-family:var(--display);font-style:italic;font-weight:800;font-size:1.3rem;color:var(--teal)}
.pgb-out-t{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.78rem;letter-spacing:.04em;color:var(--muted);margin-bottom:12px;padding-top:20px;border-top:1px solid var(--line)}
.pgb-outcomes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:520px){.pgb-outcomes{grid-template-columns:1fr}}
.pgb-outcome{font-size:.9rem;color:var(--ink);font-weight:500;opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s}
.pgb-outcome.in{opacity:1;transform:translateX(0)}

/* ============================================================
   FRANCHISE RETAIL — challenge-selector hero + growth builder
   ============================================================ */
/* Reserve the demo column so changing the selection never shifts the hero */
.subhero--franchise-retail .subhero__demo{display:flex;flex-direction:column;justify-content:center}

.fch{display:flex;flex-direction:column;gap:12px;width:100%}
.fch-q{font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:.8rem;letter-spacing:.03em;color:var(--yellow)}
.fch-hint{font-family:var(--body);font-style:normal;font-weight:600;text-transform:none;letter-spacing:0;font-size:.72rem;color:rgba(255,255,255,.55);margin-left:6px}
.fch-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
@media(max-width:1050px){.fch-cards{grid-template-columns:1fr 1fr}}
@media(max-width:400px){.fch-cards{grid-template-columns:1fr}}
.fch-card{display:flex;align-items:center;gap:6px;text-align:left;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:9px;padding:8px 9px;color:rgba(255,255,255,.82);font-size:.73rem;font-weight:600;line-height:1.18;transition:background .18s,border-color .18s,color .18s}
.fch-card:hover{background:rgba(255,255,255,.12);color:#fff}
.fch-card.on{background:rgba(62,189,196,.22);border-color:var(--teal);color:#fff}
.fch-ico{font-size:.95rem;line-height:1}
.fch-panel{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.045);border-radius:12px;padding:13px 15px;min-height:350px;display:flex}
@media(max-width:920px){.fch-panel{min-height:0}}
.fch-out{display:flex;flex-direction:column;gap:5px;width:100%}
.fch-step{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.fch-step.on{opacity:1;transform:translateY(0)}
.fch-step-t{font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:.66rem;letter-spacing:.06em;color:var(--teal);margin-bottom:4px}
.fch-body{color:#fff;font-size:.85rem;line-height:1.4}
.fch-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.fch-chip{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:3px 9px;font-size:.7rem;font-weight:600;color:rgba(255,255,255,.9)}
.fch-arrow{text-align:center;color:var(--teal);font-size:.85rem;line-height:1;opacity:0;transition:opacity .3s}
.fch-arrow.on{opacity:.7}
.fch-prods{display:grid;gap:5px}
.fch-prods--dense{grid-template-columns:1fr 1fr;gap:5px}
.fch-prod{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:6px 9px;color:#fff;font-size:.77rem;font-weight:600;line-height:1.15;opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s}
.fch-prod--more{justify-content:center;color:rgba(255,255,255,.7);background:rgba(255,255,255,.04);font-weight:600}
.fch-prod.in{opacity:1;transform:translateX(0)}
.fch-tick{color:var(--teal);font-weight:800;flex:none}
.fch-tags{display:flex;flex-wrap:wrap;gap:5px}
.fch-tag{background:rgba(251,207,9,.14);border:1px solid rgba(251,207,9,.4);border-radius:999px;padding:3px 10px;font-size:.72rem;font-weight:600;color:var(--yellow)}
.fch-tag--more{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.75)}

/* The Dealer Growth Builder */
.dgb{margin-top:44px;display:grid;grid-template-columns:.85fr 1.15fr;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
@media(max-width:860px){.dgb{grid-template-columns:1fr}}
.dgb-controls{padding:26px;background:var(--wash);border-right:1px solid var(--line)}
@media(max-width:860px){.dgb-controls{border-right:0;border-bottom:1px solid var(--line)}}
.dgb-field{margin-bottom:20px}
.dgb-label{display:flex;justify-content:space-between;align-items:baseline;font-size:.82rem;font-weight:600;color:var(--muted);margin-bottom:8px}
.dgb-label b{font-family:var(--display);font-style:italic;font-weight:800;font-size:1rem;color:var(--blue)}
.dgb-range{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:99px;background:#cfdcea;outline:none}
.dgb-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:19px;height:19px;border-radius:50%;background:var(--blue);border:3px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.28);cursor:pointer}
.dgb-range::-moz-range-thumb{width:19px;height:19px;border-radius:50%;background:var(--blue);border:3px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.28);cursor:pointer}
.dgb-goals-t{font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:.72rem;letter-spacing:.05em;color:var(--muted);margin:24px 0 10px;padding-top:18px;border-top:1px solid var(--line)}
.dgb-goals{display:flex;flex-wrap:wrap;gap:7px}
.dgb-goal{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:.81rem;font-weight:600;color:var(--muted);transition:all .16s}
.dgb-goal:hover{border-color:var(--muted);color:var(--ink)}
.dgb-goal.is-on{background:var(--blue);border-color:var(--blue);color:#fff}
.dgb-goal.is-on::before{content:"\2713 ";font-weight:800}
.dgb-result{padding:26px;display:flex;flex-direction:column;min-height:472px}
@media(max-width:860px){.dgb-result{min-height:0}}
.dgb-result-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.dgb-result-t{font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:.9rem;color:var(--blue)}
.dgb-count{font-size:.78rem;font-weight:700;color:var(--teal)}
.dgb-stack{display:grid;gap:8px}
.dgb-prod{background:rgba(62,189,196,.07);border:1px solid rgba(62,189,196,.34);border-left:3px solid var(--teal);border-radius:9px;padding:9px 13px;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.dgb-prod.in{opacity:1;transform:translateY(0)}
.dgb-prod-n{font-family:var(--display);font-style:italic;font-weight:800;font-size:.94rem;color:var(--ink)}
.dgb-prod-w{font-size:.79rem;color:var(--muted);line-height:1.35;margin-top:2px}
.dgb-empty{color:var(--faint);font-size:.88rem;padding:20px 0}
.dgb-foot{margin-top:auto;padding-top:18px}
.dgb-scale{font-size:.76rem;font-weight:600;color:var(--faint);margin-bottom:12px;padding-top:14px;border-top:1px solid var(--line)}
.dgb-add{width:100%;justify-content:center;text-align:center}

/* Running impact total, pinned above the Solutions Builder tab */
.sb-impact-tag{
  position:fixed;right:26px;bottom:94px;z-index:139;
  display:none;flex-direction:column;align-items:flex-end;gap:1px;
  background:var(--blue-deep);color:#fff;border-radius:11px;padding:8px 12px;
  box-shadow:0 6px 20px rgba(13,45,92,.3);text-align:right;pointer-events:none;
  max-width:210px;animation:sbTagIn .28s ease-out}
.sb-impact-tag.is-on{display:flex}
.sb-impact-tag::after{content:"";position:absolute;bottom:-5px;right:22px;width:10px;height:10px;
  background:var(--blue-deep);transform:rotate(45deg);border-radius:2px}
.sb-impact-tag__k{font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;
  font-size:.56rem;letter-spacing:.07em;color:rgba(255,255,255,.62);line-height:1.1}
.sb-impact-tag__v{font-family:var(--display);font-style:italic;font-weight:800;font-size:1.12rem;
  color:var(--yellow);line-height:1.12}
.sb-impact-tag__s{font-size:.63rem;color:rgba(255,255,255,.72);line-height:1.15}
@keyframes sbTagIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:520px){
  .sb-impact-tag{right:20px;bottom:86px;padding:7px 10px;max-width:170px}
  .sb-impact-tag__v{font-size:1rem}
}
@media(prefers-reduced-motion:reduce){.sb-impact-tag{animation:none}}

/* Hours-saved line inside the tray summary */
.sb-impact--hrs{font-size:1.05rem;color:var(--blue-deep)}
.sb-impact--hrs span{font-family:var(--body);font-style:normal;font-weight:500;font-size:.78rem;color:var(--muted)}
.sb-impact-tag.is-gated{display:none!important}

/* Solutions Builder -> Book a demo handoff */
.sb-demo{width:100%;justify-content:center;margin-bottom:8px}
.bd-sb{border:1px solid rgba(62,189,196,.45);background:rgba(62,189,196,.07);border-radius:12px;
  padding:14px 15px;margin-bottom:18px}
.bd-sb__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.bd-sb__head strong{font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;
  font-size:.74rem;letter-spacing:.05em;color:var(--blue-deep)}
.bd-sb__x{background:none;border:0;padding:0;font-size:.72rem;color:var(--muted);text-decoration:underline;cursor:pointer}
.bd-sb__x:hover{color:var(--red)}
.bd-sb__ctx{font-size:.8rem;font-weight:600;color:var(--ink);margin-bottom:8px}
.bd-sb__chips{display:flex;flex-wrap:wrap;gap:6px}
.bd-sb__chips span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 10px;
  font-size:.74rem;font-weight:600;color:var(--ink)}
.bd-sb__impact{margin-top:9px;font-family:var(--display);font-style:italic;font-weight:800;
  font-size:.92rem;color:var(--blue-deep)}
.bd-sb__note{margin-top:7px;font-size:.72rem;color:var(--muted);line-height:1.4}

/* ---------------------------------------------------------------- parallax
   The hero image is given headroom — taller than the band and pulled up by
   half the excess — so it has somewhere to travel to. Without this, moving an
   image that exactly fills its container drags a hard edge into view at the
   bottom of the band, which is the single most common way parallax goes
   wrong.

   The headroom only appears once the script has decided to run (.has-parallax
   on <html>), so with JS off, on a narrow screen, or with Reduce Motion set,
   the image sits exactly where it always did. */
.has-parallax .hero__bg,
.has-parallax .subhero__bg{
  height:132%;
  top:-16%;
  will-change:transform;
}
/* Nothing here should ever animate a layout property — transform and opacity
   only, so the whole effect stays on the compositor. */
.hero__bg,.subhero__bg{backface-visibility:hidden}

@media (prefers-reduced-motion: reduce){
  .has-parallax .hero__bg,
  .has-parallax .subhero__bg{height:100%;top:0;transform:none !important}
}

/* -------------------------------------------------- hero artwork (solutions)
   A cut-out sitting beside the headline. The existing .subhero--split grid
   does the layout and already collapses to one column on a narrow screen, so
   this only has to size the picture and stop it dominating. */
.subhero--art .subhero__split{align-items:center}
.subhero__art{
  display:block;
  justify-self:center;
  width:100%;
  max-width:460px;
}
.subhero__art img{
  display:block;
  width:100%;
  height:auto;
  /* These are cut-outs on transparent backgrounds sitting on a dark band, so
     a soft drop shadow keeps them from looking pasted on. Applied to the img
     rather than the picture so it follows the alpha edge, not a rectangle. */
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.32));
}
/* Below desktop the art is dropped rather than stacked. It is decorative —
   the headline and the call to action are the page — and stacking it just
   pushes both further down a screen that has less room to begin with. */
@media (max-width:860px){
  .subhero--art .subhero__split{grid-template-columns:1fr}
  .subhero--art .subhero__art{display:none}
}

/* ================================================================== blog
   Additions for the server-rendered blog. The card, grid and article body
   rules above are unchanged — these cover what the static post pages added:
   a real <h1> (it used to carry inline styles), a lede, the tag filter, the
   byline block and ordered lists. */

/* --- tag filter on the index, and the tag list under an article -------- */
.btags{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.btag{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border:1px solid var(--line);
      border-radius:100px;background:#fff;cursor:pointer;color:var(--muted);
      font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;
      font-size:.68rem;letter-spacing:.05em;text-decoration:none;transition:all .18s}
.btag:hover{border-color:var(--blue);color:var(--blue)}
.btag.is-on{background:var(--blue);border-color:var(--blue);color:#fff}
.btag__n{font-family:var(--body);font-style:normal;font-weight:600;font-size:.66rem;opacity:.65}
.btag.is-on .btag__n{opacity:.8}

/* --- the article head -------------------------------------------------- */
.article__h1{font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;
             font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.08;color:var(--ink);margin:0 0 12px}
.article__lede{font-size:1.08rem;line-height:1.65;color:var(--muted);margin:0 0 4px}
/* The role sits inside .article__meta next to the name, so it needs to read
   as secondary to the byline without becoming invisible. */
.article__role{color:var(--faint);font-weight:400;margin-left:6px}
.article__body ol{margin:0 0 18px;padding-left:22px}
.article__body strong{color:var(--ink);font-weight:700}
.article__body em{font-style:italic}
.article__tags{display:flex;flex-wrap:wrap;gap:8px;margin:34px 0 0;
               padding-top:24px;border-top:1px solid var(--line)}

/* --- byline block ------------------------------------------------------ */
.abox{display:flex;gap:16px;align-items:flex-start;margin-top:24px;padding:22px;
      background:var(--wash,#f7f7f5);border:1px solid var(--line);border-radius:12px}
.abox__av{flex:0 0 46px;height:46px;border-radius:50%;display:grid;place-items:center;
          background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff;
          font-family:var(--display);font-style:italic;font-weight:800;font-size:.9rem}
.abox__name{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;
            font-size:.92rem;color:var(--ink)}
.abox__role{font-size:.74rem;color:var(--teal);font-weight:600;letter-spacing:.04em;
            text-transform:uppercase;margin-top:2px}
.abox__bio{margin:8px 0 0;font-size:.85rem;line-height:1.6;color:var(--muted)}
@media(max-width:560px){
  .abox{flex-direction:column;gap:12px}
}

/* --- archive pages ------------------------------------------------------ */
/* Categories read as destinations, tags as filters. Same pill shape so the
   page stays quiet, different weight so the difference is legible. */
.btags--cats{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.btag--cat{border-color:var(--teal);color:var(--blue)}
.btag--cat:hover{background:var(--teal);border-color:var(--teal);color:#fff}
.btag--cat:hover .btag__n{opacity:.85}

.arch-author{display:flex;gap:22px;align-items:flex-start}
.arch-author .abox__av{flex:0 0 68px;height:68px;font-size:1.3rem}
.arch-author .abox__photo{flex:0 0 68px;width:68px;height:68px}
.arch-role{margin:2px 0 10px;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
           font-weight:600;color:var(--teal)}
@media(max-width:560px){
  .arch-author{flex-direction:column;gap:14px}
}

/* A real photo where we have one; the initials block stays the fallback so a
   missing image is a quiet default rather than a broken frame. */
.abox__photo{flex:0 0 46px;width:46px;height:46px;border-radius:50%;object-fit:cover}
.abox__more{display:inline-block;margin-top:10px;font-family:var(--display);font-style:italic;
            font-weight:700;text-transform:uppercase;font-size:.7rem;letter-spacing:.05em;
            color:var(--blue)}

/* --- rich-text bodies from the visual editor ---------------------------- */
/* The markdown renderer only ever produced headings, lists, links and
   paragraphs. The editor can also produce tables, images, rules and inline
   colour, so those need to look like they belong here rather than like
   browser defaults. */
.article__body table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:.92rem}
.article__body th,.article__body td{border:1px solid var(--line);padding:9px 12px;text-align:left;
                                    vertical-align:top}
.article__body th{background:var(--wash);font-family:var(--display);font-style:italic;
                  font-weight:700;text-transform:uppercase;font-size:.72rem;letter-spacing:.05em;
                  color:var(--ink)}
.article__body th p,.article__body td p{margin:0}
.article__body img{max-width:100%;height:auto;border-radius:10px;margin:6px 0 22px}
.article__body hr{border:0;height:1px;background:var(--line);margin:30px 0}
.article__body blockquote{margin:0 0 20px;padding:4px 0 4px 20px;border-left:3px solid var(--teal);
                          color:var(--muted);font-size:1.03rem}
.article__body blockquote p:last-child{margin-bottom:0}
.article__body pre{background:var(--wash);border:1px solid var(--line);border-radius:8px;
                   padding:14px 16px;overflow-x:auto;font-size:.85rem;margin:0 0 20px}
.article__body code{background:var(--wash);padding:1px 5px;border-radius:4px;font-size:.88em}
.article__body pre code{background:none;padding:0}
/* The editor writes list items as <li><p>…</p></li>; without this every
   bullet gains a paragraph's bottom margin and the list falls apart. */
.article__body li > p{margin:0 0 4px}

/* ========================================================== support centre
   /support/ — the knowledge base published from the Hub. Noindex, but a real
   part of the site: it uses the same wrap, type scale and card treatment as
   everything else rather than looking like a bolted-on docs tool. */

.kb-search{position:relative;max-width:620px;margin:26px auto 0}
.kb-search input{
  width:100%;padding:14px 18px;font-size:1rem;font-family:var(--body);
  border:1px solid var(--line);border-radius:10px;background:#fff;color:#111;
}
.kb-search input:focus-visible{outline:3px solid var(--blue);outline-offset:1px}
.kb-results{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;
  background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 18px 44px rgba(15,25,45,.16);overflow:hidden;text-align:left;
}
.kb-hit{display:flex;justify-content:space-between;gap:14px;padding:11px 16px;
  text-decoration:none;border-bottom:1px solid var(--line-soft)}
.kb-hit:last-child{border-bottom:0}
.kb-hit:hover,.kb-hit:focus-visible{background:var(--wash)}
.kb-hit__t{font-weight:600;color:#111}
.kb-hit__c{font-size:.78rem;color:var(--muted);white-space:nowrap;align-self:center}
.kb-noresult{padding:14px 16px;margin:0;font-size:.88rem;color:var(--muted)}

.kb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.kb-card{border:1px solid var(--line);border-radius:12px;padding:22px;background:#fff}
.kb-card h3{margin:0 0 6px;font-size:1.05rem}
.kb-card h3 a{text-decoration:none}
.kb-card__sum{margin:0 0 12px;font-size:.85rem;color:var(--muted);line-height:1.5}
.kb-card__list{list-style:none;margin:0;padding:0}
.kb-card__list li{margin-bottom:7px;font-size:.9rem;line-height:1.45}
.kb-more{display:inline-block;margin-top:8px;font-size:.82rem;font-weight:600}
.kb-empty{text-align:center;color:var(--muted);margin:0 0 24px}
.kb-foot{margin-top:34px;text-align:center;color:var(--muted);font-size:.9rem}

.kb-list{list-style:none;margin:26px 0 0;padding:0}
.kb-list__row{
  display:grid;grid-template-columns:minmax(200px,1fr) 2fr;gap:18px;
  padding:15px 0;border-bottom:1px solid var(--line-soft);align-items:baseline;
}
.kb-list__row a{font-weight:600}
.kb-list__row span{color:var(--muted);font-size:.9rem;line-height:1.5}
.kb-lead{color:var(--muted);max-width:64ch;line-height:1.6}

/* Article: a sticky contents rail beside the prose. The rail is what makes a
   fourteen-section guide navigable — without it every jump between two
   adjacent articles is a trip back to the index. */
.kb-wrap{display:grid;grid-template-columns:238px 1fr;gap:44px;align-items:start}
.kb-side{position:sticky;top:24px}
.kb-side__head{
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--faint);margin:0 0 10px;
}
.kb-side ul{list-style:none;margin:0;padding:0;border-left:2px solid var(--line-soft)}
.kb-side li{margin:0}
.kb-side li a{display:block;padding:6px 0 6px 14px;font-size:.87rem;
  color:var(--muted);text-decoration:none;line-height:1.4}
.kb-side li a:hover{color:#111}
.kb-side li.is-current{border-left:2px solid var(--blue);margin-left:-2px}
.kb-side li.is-current a{color:#111;font-weight:600}

.kb-article{max-width:74ch}
.kb-article h2{margin-top:2em}
.kb-article .table-wrap{overflow-x:auto;margin:1.4em 0}
.kb-article table{width:100%;border-collapse:collapse;font-size:.9rem}
.kb-article th,.kb-article td{
  text-align:left;padding:9px 12px;border:1px solid var(--line-soft);vertical-align:top;
}
.kb-article th{background:var(--wash);font-weight:600}
.kb-updated{margin-top:2.4em;font-size:.8rem;color:var(--faint)}

.kb-pager{
  display:flex;justify-content:space-between;gap:18px;
  margin-top:2.4em;padding-top:20px;border-top:1px solid var(--line-soft);font-size:.9rem;
}
.kb-pager a{font-weight:600}

/* A screenshot slot. Renders as a labelled frame until a capture exists at
   assets/img/kb/slot-NN.jpg, at which point the same markup shows the image —
   so filling these in is a matter of dropping files in, with no edit to the
   article that references them. */
.kb-shot{margin:1.6em 0}
.kb-shot img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:10px}
.kb-shot--todo{
  border:1px dashed var(--line);border-radius:10px;background:var(--wash);
  aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;
}
.kb-shot--todo span{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}

@media (max-width:1000px){
  .kb-grid{grid-template-columns:repeat(2,1fr)}
  .kb-wrap{grid-template-columns:1fr;gap:26px}
  .kb-side{position:static}
  .kb-side ul{display:flex;flex-wrap:wrap;gap:4px 14px;border-left:0}
  .kb-side li.is-current{border-left:0;margin-left:0}
}
@media (max-width:640px){
  .kb-grid{grid-template-columns:1fr}
  .kb-list__row{grid-template-columns:1fr;gap:4px}
}


/* ========================================================== comparison pages
   /compare/ — one page per competitor, per market. Deliberately plain: the
   persuasive work is done by the table being honest, so the styling stays
   out of its way. No colour-coded ticks and crosses; a green tick against
   our column and a grey dash against theirs is a rhetorical device, not
   information, and it is the first thing a reader discounts. */

.vs-note{
  max-width:70ch;margin:0 auto 26px;text-align:center;
  color:var(--muted);font-size:.9rem;line-height:1.6;
}

.vs-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.vs-table{
  width:100%;border-collapse:collapse;background:var(--white);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:.92rem;
}
.vs-table th,.vs-table td{
  text-align:left;padding:13px 16px;border-bottom:1px solid var(--line-soft);
  vertical-align:top;line-height:1.5;
}
.vs-table thead th{
  background:var(--white);font-family:var(--display);font-weight:700;
  font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;
  border-bottom:2px solid var(--line);white-space:nowrap;
}
/* Our column is emphasised by weight, not by colour. */
.vs-table thead th:last-child{color:var(--blue)}
.vs-table tbody th{font-weight:600;width:34%}
.vs-table td:last-child{font-weight:600}
.vs-table tbody tr:last-child th,
.vs-table tbody tr:last-child td{border-bottom:0}
.vs-table tbody tr:hover{background:var(--wash)}

/* "When they are the right answer" sits FIRST and gets the same visual
   weight as ours. A comparison page that cannot say when to choose the
   other one is a brochure, and reads like one. */
.vs-fit{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:8px}
.vs-fit__col{
  border:1px solid var(--line);border-radius:12px;padding:24px 26px;background:var(--white);
}
.vs-fit__col--ours{border-color:var(--blue)}
.vs-fit__col h3{margin:0 0 14px;font-size:1.02rem}
.vs-fit__col ul{margin:0;padding-left:18px}
.vs-fit__col li{margin-bottom:10px;color:var(--muted);line-height:1.6}
.vs-fit__col li:last-child{margin-bottom:0}

.vs-sources{
  margin-top:38px;padding-top:22px;border-top:1px solid var(--line-soft);
  color:var(--muted);font-size:.85rem;line-height:1.65;
}
.vs-sources h4{
  margin:0 0 8px;font-size:.72rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--faint);
}
.vs-sources p{margin:0 0 10px;max-width:74ch}
.vs-sources ul{margin:0;padding-left:18px}
.vs-sources li{margin-bottom:5px}
.vs-sources a{color:var(--blue);text-decoration:underline}

@media (max-width:860px){
  .vs-fit{grid-template-columns:1fr}
  .vs-table{font-size:.86rem}
  .vs-table th,.vs-table td{padding:11px 12px}
  .vs-table tbody th{width:auto}
}

/* ============================================================
   COMPARISON MARKS  (.vs-* — the family the markup actually emits)

   THE BUG THIS BLOCK FIXES. The comparison component was renamed from
   cmp- to vs- in the markup, to stop .cmp-note colliding with an existing
   pill badge. The CSS was not renamed with it. So every rule below existed
   as .cmp-ilist / .cmp-i-txt / .cmp-i-mark and matched nothing at all:
   1,408 marks across the site rendered with no list layout, no row rules,
   and no mark pill — and the "partial" SVG, whose <circle> has no fill of
   its own, fell back to the browser default and painted a solid black disc.
   A row of black dots where half-filled circles should be.

   The older .cmp-* rules above are left alone rather than deleted: they are
   dead for this component, but .cmp- is used by other things on this site
   and removing them blind is how the collision happened in the first place.
   ============================================================ */
.vs-ilist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.vs-ilist li{display:flex;align-items:flex-start;gap:12px;padding:11px 4px;font-size:.9rem;font-weight:500;border-bottom:1px solid var(--line);min-height:47px}
.vs-ilist li:last-child{border-bottom:0}
.vs-i-txt{padding-top:2px;line-height:1.3}
.vs-i-mark{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.86rem;font-weight:700}
.vs-i-yes{color:var(--ink)}
.vs-i-yes .vs-i-mark{background:rgba(22,163,74,.14);color:var(--green)}
.vs-i-no{color:var(--faint)}
.vs-i-no .vs-i-mark{background:rgba(110,110,108,.1);color:var(--faint)}
.vs-i-part{color:var(--ink)}
.vs-i-part .vs-i-mark{background:rgba(251,207,9,.18)}
.vs-i-part .vs-i-mark svg{width:15px;height:15px}
/* Both of these are load-bearing. Without the circle rule the <circle>
   takes the default fill and the mark is a solid disc; without the path
   rule the filled half is black instead of the amber that says "partial". */
.vs-i-part .vs-i-mark svg path{fill:var(--yellow-ink)}
.vs-i-part .vs-i-mark svg circle{fill:none;stroke:var(--yellow-ink);stroke-width:2}

/* ============================================================================
   SOLUTIONS BRIEF — hero steps 2, 3 and 4.
   Appended August 2026 when the hero stopped being a product tour and became
   a brief generator. Everything here is namespaced to the hero or to the
   report sheet, so nothing leaks onto the built pages.
   ========================================================================== */

/* --- The white-on-white select bug -----------------------------------------
   .field-dark sets color:#fff so typed text reads on the translucent hero
   field. A native <select> passes that colour down to its <option> elements,
   which the OS then paints on its OWN white popup background — so the menu
   was white text on white. Options need their own colours; the closed select
   keeps the white. */
.field-dark option,
.field-dark optgroup{color:#12161C;background:#fff}

/* --- Glass ------------------------------------------------------------------
   The site's panel treatment, in one place. .stat-card had it inline; the
   preview card, the report sheet and the PDF viewer all use it now so the
   hero reads as one surface instead of three different materials. */
.glass{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

.hero__lead--tight{margin-bottom:6px}
.hero__note{margin:14px 0 0;font-size:.74rem;color:rgba(255,255,255,.62)}
.btn-ghost--onhero{color:rgba(255,255,255,.82);border-color:rgba(255,255,255,.34)}
.btn-ghost--onhero:hover{color:#fff;border-color:#fff}

/* --- Step 2 form rhythm -----------------------------------------------------
   Every control was inheriting a different margin — the selects from nothing,
   the slider from its own 10px, the buttons from .hero-actions' 4px — so the
   column read as squashed at the top and loose at the bottom. One spacing
   value, applied to every block. */
.hero-grid--form{align-items:start}
.hero-grid--form .field-block{margin:0 0 20px}
.hero-grid--form .qgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.hero-grid--form .field-dark{width:100%}
.hero-grid--form .hero-actions{margin-top:28px;gap:12px}
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}

/* --- Volume slider --------------------------------------------------------- */
.slider-row{display:flex;align-items:center;gap:16px;min-height:44px}
.slider{flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:999px;
  background:linear-gradient(90deg,var(--blue),var(--teal));outline:none;margin:0}
.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;
  border-radius:50%;background:var(--yellow);border:3px solid #12161C;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.45)}
.slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--yellow);
  border:3px solid #12161C;cursor:pointer}
.slider:focus-visible{outline:3px solid var(--teal);outline-offset:4px}
.slider-out{min-width:56px;text-align:center;font-family:var(--display);font-style:italic;
  font-weight:800;font-size:1.3rem;color:var(--yellow)}

/* --- Step 2 live preview ---------------------------------------------------- */
.prev{border-radius:12px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.42);
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.prev__bar{display:flex;height:5px}
.prev__bar i{flex:1}
.prev__bar i:nth-child(1){background:#2B68AB}
.prev__bar i:nth-child(2){background:#3EBDC4}
.prev__bar i:nth-child(3){background:#FBCF09}
.prev__bar i:nth-child(4){background:#EE3B25}
.prev__sheet{padding:26px 26px 22px}
.prev__eyebrow{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:#5BD3DC;font-weight:700}
.prev__title{font-family:var(--display);font-style:italic;font-weight:800;font-size:1.3rem;
  line-height:1.1;color:#fff;margin:9px 0 5px}
.prev__meta{font-size:.74rem;color:rgba(255,255,255,.62)}
.prev__rule{height:1px;background:rgba(255,255,255,.16);margin:18px 0 14px}
.prev__sec{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.55);font-weight:700;margin-bottom:10px}
.prev__rows{min-height:78px}
.prev__row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:baseline;
  padding:6px 0;border-bottom:1px solid rgba(255,255,255,.10);font-size:.73rem;
  animation:prevIn .34s ease both}
.prev__row span{color:rgba(255,255,255,.8)}
.prev__row b{color:#fff;font-weight:600}
.prev__row--none{display:block;color:rgba(255,255,255,.5);font-size:.73rem;border:0;padding:8px 0}
@keyframes prevIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.prev__big{font-family:var(--display);font-style:italic;font-weight:800;font-size:2.15rem;
  line-height:1;color:#6EE7A0;letter-spacing:-.01em}
.prev__sub{font-size:.73rem;color:rgba(255,255,255,.68);margin-top:6px}
.prev__chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.prev__chips span{font-size:.62rem;padding:4px 10px;border-radius:999px;
  background:rgba(255,255,255,.12);color:#fff;font-weight:600}
.prev__foot{background:rgba(0,0,0,.28);color:rgba(255,255,255,.5);font-size:.62rem;padding:9px 26px}

/* --- Step 3: the brief ------------------------------------------------------
   Glass, like every other panel on the hero. The previous version dropped
   .vs-table straight onto the dark background, where the page's light-page
   table styles painted white text on white and every row read as blank; the
   fix was a white sheet, and the fix to THAT is to put the whole report on
   glass and light every child properly. Anything below that names a colour is
   overriding a rule written for a white interior page. */
.matrix-head{margin:0 0 30px}
.matrix-head .h2{max-width:22ch}
#matrix-content{border-radius:14px;padding:32px;color:rgba(255,255,255,.88);
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 24px 60px rgba(0,0,0,.34)}
.rep-sec{padding-bottom:28px;margin-bottom:28px;border-bottom:1px solid rgba(255,255,255,.14)}
.rep-sec:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0}
.rep-h{font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;
  font-size:.88rem;letter-spacing:.06em;color:#5BD3DC;margin:0 0 18px}

.rep-stats{background:transparent;border:0;padding:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;gap:22px 28px}
.rep-stats .stat__value{font-size:1.7rem}
.rep-stats .stat p{color:rgba(255,255,255,.86)}
.rep-stats .stat cite{color:rgba(255,255,255,.5)}
.rep-stats .stat cite a{color:rgba(255,255,255,.7);text-decoration:underline}
.rep-stats .stat cite a:hover{color:#fff}

#matrix-content .challenges{gap:16px}
#matrix-content .challenge{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-top:3px solid var(--red);padding:22px 20px}
#matrix-content .challenge h3{color:#fff}
#matrix-content .challenge p{color:rgba(255,255,255,.72)}
#matrix-content .challenge__n{color:#5BD3DC}

/* background, not just colour: .vs-table and .vs-fit__col set background:#fff
   for the light comparison pages. Recolouring the text without clearing the
   background is exactly how this table went white-on-white the first time. */
#matrix-content .vs-table{color:rgba(255,255,255,.88);background:transparent;
  border-color:rgba(255,255,255,.18)}
#matrix-content .vs-table thead th{background:rgba(255,255,255,.06)}
#matrix-content .vs-fit__col{background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.18)}
#matrix-content .vs-table th,
#matrix-content .vs-table td{border-color:rgba(255,255,255,.12)}
#matrix-content .vs-table thead th{color:rgba(255,255,255,.55);
  border-bottom-color:rgba(255,255,255,.24)}
#matrix-content .vs-table thead th:last-child{color:#5BD3DC}
#matrix-content .vs-table tbody th{color:#fff}
#matrix-content .vs-table tbody td{color:rgba(255,255,255,.66)}
#matrix-content .vs-table tbody td:last-child{color:#fff}
#matrix-content .vs-table tbody tr:hover{background:rgba(255,255,255,.06)}
#matrix-content .vs-fit__col--ours{background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18)}
#matrix-content .vs-fit__col h3{color:#fff}
#matrix-content .vs-fit__col li{color:rgba(255,255,255,.78)}

.rep-prods{display:grid;grid-template-columns:1fr 1fr;gap:20px 26px}
.rep-prod h4{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;
  font-size:.88rem;color:#fff;margin:0 0 4px}
.rep-prod__m{display:block;font-size:.66rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#5BD3DC;margin-bottom:7px}
.rep-prod p{margin:0;font-size:.8rem;line-height:1.55;color:rgba(255,255,255,.7)}

#matrix-content .calc-card{background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);border-top:3px solid var(--teal);padding:24px}
#matrix-content .roi-lbl{color:rgba(255,255,255,.62)}
#matrix-content .calc-note{color:rgba(255,255,255,.5)}
#matrix-content .calc-note a{color:rgba(255,255,255,.75)}
.roi-rows{margin:6px 0 16px}
.roi-row{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  padding:10px 0;border-bottom:1px solid rgba(255,255,255,.10)}
.roi-row strong{display:block;font-size:.88rem;color:#fff}
.roi-row span{font-size:.72rem;color:rgba(255,255,255,.5)}
.roi-row__v{text-align:right;white-space:nowrap}
.roi-row__v b{display:block;font-size:.96rem;color:#6EE7A0}
.roi-row__v b.qual{color:rgba(255,255,255,.45);font-weight:600;font-size:.78rem}
.roi-total{border-top:2px solid rgba(255,255,255,.26);padding-top:16px}
.roi-total div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:10px}
.roi-total span{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;
  font-size:.88rem;color:#fff}
.roi-total b{font-family:var(--display);font-style:italic;font-weight:800;font-size:1.45rem;color:#6EE7A0}
.vs-fit--single{grid-template-columns:1fr}


/* --- Step 2 head: the market is stated, not asked --------------------------- */
.step2-head{display:flex;justify-content:space-between;align-items:flex-start;
  gap:28px;flex-wrap:wrap;margin-bottom:26px}
.step2-head > div:first-child{flex:1 1 460px;min-width:0}
.mkt-lock{flex:0 0 auto;padding:14px 18px;border-radius:10px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.mkt-lock__label{display:block;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:rgba(255,255,255,.55)}
.mkt-lock__value{display:block;font-family:var(--display);font-style:italic;font-weight:800;
  text-transform:uppercase;font-size:1.05rem;color:#fff;margin:4px 0 6px}
.mkt-lock__swap{font-size:.68rem;color:#5BD3DC;text-decoration:underline}
.mkt-lock__swap:hover{color:#fff}

/* --- The question accordion --------------------------------------------------
   Seven categories of chips shown at once is a wall. One question open at a
   time, the next opening as each is answered, any answered one reopening on a
   click of its header.

   Each pair of questions takes the next logo colour. Before this the whole
   column was yellow — the brand has four colours and a form long enough to
   scroll is the one place with room for them. */
.wiz{margin-bottom:26px}
.wiz-step{--acc:#2B68AB;--acc-ink:#fff;
  border:1px solid rgba(255,255,255,.16);border-left:3px solid rgba(255,255,255,.16);
  border-radius:10px;margin-bottom:10px;background:rgba(255,255,255,.04);
  transition:border-color .2s,background .2s}
.wiz-step.acc-b{--acc:#4B8FD4;--acc-ink:#fff}
.wiz-step.acc-t{--acc:#3EBDC4;--acc-ink:#0C1A1B}
.wiz-step.acc-y{--acc:#FBCF09;--acc-ink:#2A2A28}
.wiz-step.acc-r{--acc:#EE3B25;--acc-ink:#fff}
.wiz-step.is-open{border-left-color:var(--acc);background:rgba(255,255,255,.07)}
.wiz-step.is-done{border-left-color:var(--acc)}

.wiz-step__head{display:flex;align-items:center;gap:12px;width:100%;padding:13px 16px;
  background:transparent;border:0;text-align:left;color:#fff}
.wiz-step__head:focus-visible{outline:3px solid var(--teal);outline-offset:-3px;border-radius:8px}
.wiz-step__n{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:.66rem;font-weight:700;background:rgba(255,255,255,.14);color:rgba(255,255,255,.7);
  transition:background .2s,color .2s}
.wiz-step.is-open .wiz-step__n,
.wiz-step.is-done .wiz-step__n{background:var(--acc);color:var(--acc-ink)}
.wiz-step__t{font-size:.82rem;font-weight:700;letter-spacing:.03em;white-space:nowrap}
.wiz-step__sum{flex:1;min-width:0;font-size:.74rem;color:rgba(255,255,255,.55);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.wiz-step__chev{flex:0 0 auto;color:rgba(255,255,255,.5);font-size:1.1rem;line-height:1;
  transition:transform .22s ease}
.wiz-step.is-open .wiz-step__chev{transform:rotate(90deg);color:var(--acc)}

/* grid-template-rows animates to auto height without hardcoding one, so a
   category with twelve vendors opens as smoothly as one with three. */
/* ONE child, not several. grid-template-rows:0fr clamps the first row only —
   with the help text, the chip row and the Next button as three siblings, the
   extra two became implicit auto-sized rows and every collapsed section spilled
   its contents over the one below it. */
.wiz-step__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s ease}
.wiz-step.is-open .wiz-step__body{grid-template-rows:1fr}
.wiz-step__inner{min-height:0;overflow:hidden;padding:0 16px}
.wiz-step.is-open .wiz-step__inner{padding:0 16px 16px}
.wiz-step__help{margin:0 0 10px;font-size:.72rem;color:rgba(255,255,255,.55)}

.wiz-next{margin-top:14px;padding:8px 18px;border-radius:999px;border:1px solid var(--acc);
  background:transparent;color:var(--acc);font-family:var(--display);font-style:italic;
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.7rem;
  transition:background .15s,color .15s}
.wiz-next:hover{background:var(--acc);color:var(--acc-ink)}

/* --- Chips: multi-select, because nobody runs one system -------------------- */
.chips-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:7px 14px;border-radius:999px;font-size:.75rem;font-weight:600;line-height:1.2;
  color:rgba(255,255,255,.8);background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.22);transition:background .15s,border-color .15s,color .15s}
.chip:hover{background:rgba(255,255,255,.14);color:#fff}
.chip.is-on{background:var(--acc,var(--yellow));border-color:var(--acc,var(--yellow));
  color:var(--acc-ink,var(--ink))}
.chip:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.chip--lg{padding:9px 18px;font-size:.8rem}

.prev-sticky{position:sticky;top:96px}

/* --- Step 3: your stack, answered ------------------------------------------- */
.stack-answers{display:grid;gap:16px}
.sa{padding:16px 18px;border-radius:10px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);border-left:3px solid var(--teal)}
.sa--gap{border-left-color:var(--yellow)}
.sa__head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:7px}
.sa__cat{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:rgba(255,255,255,.5)}
.sa__head h4{margin:0;font-family:var(--display);font-style:italic;font-weight:700;
  text-transform:uppercase;font-size:.92rem;color:#fff}
.sa--gap .sa__head h4{color:rgba(255,255,255,.62)}
.sa__does{margin:0 0 8px;font-size:.78rem;line-height:1.5;color:rgba(255,255,255,.6)}
.sa__adds{margin:0;font-size:.84rem;line-height:1.55;color:rgba(255,255,255,.92)}

/* --- Step 4: the viewer -----------------------------------------------------
   A canvas, not an <iframe>. The browser's own PDF viewer brings a toolbar
   and scrollbars we cannot style or remove, and sizes the page to suit
   itself. The stage is locked to letter's proportions and clips, so a whole
   page is always visible and nothing ever scrolls. */
.pdf-actions{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}
.pdfview{border-radius:12px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.pdfview__bar{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 14px;background:rgba(0,0,0,.3);color:rgba(255,255,255,.72);font-size:.68rem;
  border-bottom:1px solid rgba(255,255,255,.14)}
.pdfview__name{font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdfview__pager{display:flex;align-items:center;gap:10px;white-space:nowrap;
  font-variant-numeric:tabular-nums;color:rgba(255,255,255,.8)}
.pdfview__nav{width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,255,255,.26);
  background:transparent;color:#fff;line-height:1;font-size:.9rem;display:grid;place-items:center;
  transition:background .15s,opacity .15s}
.pdfview__nav:hover:not(:disabled){background:rgba(255,255,255,.16)}
.pdfview__nav:disabled{opacity:.28;cursor:default}
.pdfview__stage{position:relative;aspect-ratio:612/792;display:grid;place-items:center;
  overflow:hidden;background:rgba(0,0,0,.18)}
.pdfview__stage canvas{display:block;max-width:100%;max-height:100%;opacity:0;
  transition:opacity .25s ease;box-shadow:0 6px 24px rgba(0,0,0,.4)}
.pdfview__stage canvas.is-ready{opacity:1}
.pdfview__loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  gap:10px;color:rgba(255,255,255,.7);font-size:.8rem}
.pdfview__loading[hidden]{display:none}
.pdfview__fallback{margin:10px 2px 0;font-size:.72rem;color:rgba(255,255,255,.7)}
.spin{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.25);
  border-top-color:var(--yellow);animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

@media (max-width:1000px){
  .prev-sticky{position:static}
}
@media (max-width:860px){
  .step2-head{flex-direction:column}
  .mkt-lock{align-self:stretch}
  .qgrid,.hero-grid--form .qgrid{grid-template-columns:1fr}
  .rep-prods{grid-template-columns:1fr}
  .rep-stats{grid-template-columns:1fr}
  #matrix-content{padding:22px 18px}
  #matrix-content .challenges{grid-template-columns:1fr}
}
/* ============================================================
   BUMPER EVENTS — aligned to shared product UI
   ============================================================ */
.story__note{margin-top:4px;font-size:.62rem;color:#8a9aaa}
.subhero--bumper-events .subhero__logo{height:30px;width:auto;margin-bottom:22px;background:transparent;padding:0;box-shadow:none;border-radius:0;object-fit:contain;object-position:left}
.subhero--bumper-events .subhero__bg{filter:saturate(.82)}
.behero{position:relative;width:100%;margin-left:auto;padding:16px;border-radius:14px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;box-shadow:none;overflow:hidden}
.behero:before{content:none}.behero__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.behero__head>div{display:grid;gap:2px}.behero__eyebrow{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.7rem;letter-spacing:.04em;color:rgba(255,255,255,.7)}.behero__head strong{font-size:.86rem}.behero__live{font-size:.62rem;font-weight:700;color:var(--teal)}.behero__live i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;background:var(--teal);animation:bepulse 1.8s infinite}@keyframes bepulse{50%{opacity:.45}}
.behero__ticker{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:12px}.behero__tick{position:relative;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:8px 5px 10px;background:rgba(255,255,255,.035);color:rgba(255,255,255,.5);font:italic 700 .6rem var(--display);letter-spacing:.03em;overflow:hidden}.behero__tick span{display:block;margin-bottom:3px;font-family:var(--body);font-style:normal;font-size:.52rem}.behero__tick>i{position:absolute;left:0;bottom:0;width:0;height:3px;background:linear-gradient(90deg,var(--teal),var(--yellow))}.behero__tick.is-on{background:rgba(62,189,196,.11);border-color:rgba(62,189,196,.36);color:#fff}.behero__tick.is-on>i{animation:betick 4s linear forwards}@keyframes betick{to{width:100%}}
.behero__screen{min-height:272px;padding:18px;border-radius:12px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);transition:opacity .18s,transform .18s}.behero.is-changing .behero__screen{opacity:.45;transform:translateY(3px)}.behero__status{display:flex;justify-content:space-between;gap:10px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.12);font-size:.64rem;text-transform:uppercase;letter-spacing:.05em;color:var(--teal);font-weight:700}.behero__status b{font-size:.56rem;color:rgba(255,255,255,.46)}.behero__main{padding:16px 0 15px}.behero__kicker{display:block;font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.7rem;color:rgba(255,255,255,.7)}.behero__value{display:block;margin:4px 0 7px;font:italic 800 2.15rem/1 var(--display);color:var(--yellow);text-transform:uppercase}.behero__main p{margin:0;color:rgba(255,255,255,.76);font-size:.78rem;line-height:1.48}.behero__metrics{display:grid;gap:9px}.behero__metrics>div{display:grid;grid-template-columns:76px 1fr 50px;gap:9px;align-items:center;font-size:.68rem;color:rgba(255,255,255,.66)}.behero__metrics i{height:5px;border-radius:3px;background:rgba(255,255,255,.15);overflow:hidden}.behero__metrics i b{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--yellow))}.behero__metrics strong{text-align:right;color:#fff}
.behero__toast{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 12px;border:1px solid rgba(255,255,255,.32);border-radius:10px;background:rgba(255,255,255,.9);color:#173a5d;backdrop-filter:blur(8px);font-size:.66rem;line-height:1.35;opacity:0;transform:translateY(10px);transition:.28s}.behero__toast.is-on{opacity:1;transform:none}.behero__toast-icon{display:grid;place-items:center;flex:0 0 26px;height:26px;border-radius:50%;background:rgba(62,189,196,.14);color:#198567;font-weight:800}.behero__toast b{display:block;font-size:.58rem;text-transform:uppercase;color:#0a2d53}.behero__note{margin:7px 1px 0;text-align:right;font-size:.54rem;color:rgba(255,255,255,.42)}
.bexp-section{overflow:hidden;background:#fff}.bexp{margin-top:44px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:none}.bexp__steps{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line);background:var(--wash)}.bexp__step{display:flex;align-items:center;justify-content:center;gap:9px;padding:15px 10px;border:0;border-bottom:3px solid transparent;background:none;color:var(--muted);font:italic 700 .74rem var(--display);text-transform:uppercase;letter-spacing:.02em}.bexp__step span{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--line);color:var(--muted);font-family:var(--body);font-style:normal;font-size:.7rem}.bexp__step small{display:none}.bexp__step:hover{color:var(--ink)}.bexp__step.is-on{background:#fff;border-bottom-color:var(--blue);color:var(--blue)}.bexp__step.is-on span{background:var(--blue);color:#fff}
.bexp__panels{padding:32px;min-height:410px}.bexp__panel{display:grid;grid-template-columns:minmax(260px,.82fr) minmax(0,1.18fr);gap:28px;align-items:stretch;min-height:345px;animation:cb-fade .35s ease}.bexp__panel[hidden]{display:none!important}.bexp__copy{padding:18px 6px;display:flex;flex-direction:column;justify-content:center;background:transparent}.bexp__label{font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;color:var(--blue);font-weight:700}.bexp__copy h3{max-width:15ch;margin:8px 0 12px;font:italic 800 1.55rem/1.06 var(--display);text-transform:uppercase;color:var(--ink)}.bexp__copy>p{margin:0;color:var(--muted);font-size:.82rem;line-height:1.55}.bexp__takeaway{margin-top:20px;border-left:3px solid var(--teal);padding:8px 0 8px 13px;color:var(--muted);font-size:.72rem;line-height:1.45}.bexp__takeaway b{display:block;margin-bottom:3px;font-size:.6rem;text-transform:uppercase;color:var(--ink)}.bexp__work{padding:24px;display:flex;flex-direction:column;justify-content:center;border:1px solid var(--line);border-radius:14px;background:var(--wash)}
.betarget__head,.behost__head{display:flex;justify-content:space-between;align-items:end;margin-bottom:18px;color:var(--muted);font-size:.76rem}.betarget__head strong{font:italic 800 2rem var(--display);color:var(--blue-deep)}.betarget__filters{display:grid;gap:9px}.betarget__filters button{display:grid;grid-template-columns:14px 1fr auto;gap:9px;align-items:center;padding:13px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;text-align:left;color:var(--ink);font-size:.82rem;font-weight:600}.betarget__filters i{width:14px;height:14px;border:2px solid #9cb0c1;border-radius:4px}.betarget__filters button.is-on{border-color:var(--teal);background:rgba(62,189,196,.06)}.betarget__filters button.is-on i{background:var(--teal);box-shadow:inset 0 0 0 3px #fff}.betarget__filters b{color:var(--blue)}.betarget__source{display:flex;justify-content:space-between;margin-top:16px;padding-top:13px;border-top:1px solid var(--line);font-size:.64rem;color:var(--muted)}.betarget__source b{color:var(--green)}
.bereach__tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:5px;margin-bottom:16px;border-radius:10px;background:#e5eef5}.bereach__tabs button{border:0;border-radius:7px;padding:10px;background:transparent;color:var(--muted);font-weight:700}.bereach__tabs button.is-on{background:#fff;color:var(--blue);box-shadow:0 2px 8px rgba(20,48,76,.08)}.bereach__view{display:grid;gap:13px}.bereach__view[hidden]{display:none!important}.bemailer{min-height:125px;padding:20px;border-radius:12px;background:var(--blue-deep);color:#fff;display:flex;flex-direction:column;justify-content:end}.bemailer span{color:var(--yellow);font-size:.58rem}.bemailer strong{font:italic 800 1.5rem var(--display);text-transform:uppercase}.bemailer small{color:rgba(255,255,255,.7)}.besms{max-width:84%;margin-left:auto;padding:12px 14px;border-radius:13px 13px 3px 13px;background:#e4eef7;color:#284b68;font-size:.7rem}.besms p{margin:4px 0}.besms span{font-size:.56rem;color:var(--muted)}.bewave{height:86px;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:12px;background:var(--blue-deep)}.bewave i{width:5px;height:35%;border-radius:4px;background:var(--teal);animation:bewave 1s infinite alternate}.bewave i:nth-child(2n){height:68%;animation-delay:.2s}@keyframes bewave{to{transform:scaleY(1.45)}}.becall__meta{display:flex;justify-content:space-between;font-size:.66rem;color:var(--muted)}.bereach__view blockquote{margin:0;padding:14px;border-left:3px solid var(--yellow);background:#fff;font-size:.72rem;line-height:1.45;color:var(--ink)}.becall__result{color:var(--green);font-weight:700;font-size:.7rem}
.behost__board{display:grid;gap:8px}.behost__board>div{display:grid;grid-template-columns:52px 1fr auto;align-items:center;padding:12px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);font-size:.72rem}.behost__board em{padding:5px 8px;border-radius:999px;background:#edf2f6;font-size:.58rem;font-style:normal}.behost__board [data-state=checked] em{background:#e8f5fb;color:#126d9e}.behost__board [data-state=trainer] em{background:#fff5cf;color:#8a6710}.behost__board [data-state=sold] em{background:#e5f7ef;color:#137a59}.behost__advance{margin-top:14px;border:0;border-radius:999px;padding:11px 15px;align-self:flex-start;background:var(--blue);color:#fff;font:italic 700 .72rem var(--display);text-transform:uppercase}.behost__advance:disabled{background:var(--green)}
.beroi{display:grid;grid-template-columns:1fr 1fr;gap:12px}.beroi__card{padding:20px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);display:grid;gap:7px}.beroi__card--retain{background:rgba(62,189,196,.06);border-color:rgba(62,189,196,.4)}.beroi__card>span{font-size:.6rem;text-transform:uppercase;color:var(--blue);font-weight:700}.beroi__card strong{font:italic 800 1.8rem var(--display);color:var(--blue-deep)}.beroi__card small{display:block;font:.58rem var(--body);text-transform:uppercase}.beroi__card>b{font-size:.72rem}.beroi__card>i{font-size:.62rem;color:var(--muted)}.beroi__sync{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin-top:17px;font-size:.64rem;color:var(--muted)}.beroi__sync>i{height:6px;border-radius:3px;background:var(--line);overflow:hidden}.beroi__sync i b{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--teal),var(--yellow))}.beroi__sync strong{color:var(--green)}
.bexp__footer{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-top:1px solid var(--line);background:#fff;color:var(--muted);font-size:.66rem}.bexp__footer button{border:0;border-radius:999px;padding:11px 16px;background:var(--blue);color:#fff;font:italic 700 .72rem var(--display);text-transform:uppercase}.bexp__note{text-align:right;margin:9px 2px 0;color:var(--muted);font-size:.6rem}
@media(max-width:900px){.behero{margin:18px auto 0}.bexp__panel{grid-template-columns:1fr}.bexp__copy{padding:4px 0}.bexp__copy h3{max-width:none}.bexp__panels{padding:24px}.bexp__steps{grid-template-columns:1fr 1fr}}@media(max-width:560px){.behero{padding:12px}.behero__metrics>div{grid-template-columns:65px 1fr 42px}.bexp__steps{grid-template-columns:1fr 1fr}.bexp__step{flex-direction:column;gap:4px;font-size:.6rem}.bexp__panels{padding:18px}.bexp__work{padding:18px}.beroi{grid-template-columns:1fr}.behost__board>div{grid-template-columns:44px 1fr}.behost__board em{grid-column:2;justify-self:start}}@media(prefers-reduced-motion:reduce){.behero__live i,.behero__tick.is-on>i,.bewave i{animation:none}.behero__screen,.behero__toast{transition:none}}