/* ==========================================================================
   SCOPEX — BRANDING PAGE SECTIONS V3
   Continues the .bxv3 hero language. Scoped to .bxs-* / .bxsec.
   ========================================================================== */

.bxsec{
  --bx-blue:#2059e9; --bx-blue-deep:#1a47c4; --bx-blue-mid:#6f9bf5; --bx-blue-soft:#c8d9f7;
  --bx-tint:#eef3fc; --bx-navy:#0d1d36; --bx-ink:#101d35; --bx-body:#51617c;
  --bx-muted:#7787a0; --bx-line:#e4ebf6;
  --bx-display:'Bricolage Grotesque','Geist',sans-serif;
  --bx-font:'Geist',sans-serif;
  --bx-mono:'Geist Mono',monospace;
  font-family:var(--bx-font); color:var(--bx-body);
}
.bxsec *,.bxsec *::before,.bxsec *::after{box-sizing:border-box;}
.bxsec img{max-width:100%;height:auto;}
.bxs-wrap{max-width:1240px;margin:0 auto;padding:0 24px;}

.bxs-kicker{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--bx-mono);font-size:.73rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--bx-blue);
  background:var(--bx-tint);border:1px solid rgba(32,89,233,.16);
  padding:7px 14px;border-radius:99px;margin:0 0 20px;
}
.bxs-kicker i{width:6px;height:6px;border-radius:50%;background:var(--bx-blue);display:block;}
.bxsec h2.bxs-h2{
  font-family:var(--bx-display);font-size:clamp(1.9rem,3vw,2.7rem);
  line-height:1.1;letter-spacing:-.025em;font-weight:800;color:var(--bx-ink);margin:0;
}
.bxsec h3.bxs-h3{font-family:var(--bx-display);font-size:1.16rem;font-weight:700;color:var(--bx-ink);margin:0;letter-spacing:-.01em;}
.bxs-sub{font-size:1.04rem;line-height:1.7;margin:18px 0 0;color:var(--bx-body);}
.bxs-head{text-align:center;max-width:720px;margin:0 auto 54px;}
.bxs-head .bxs-sub{margin-top:16px;}
.bxs-rule{display:block;width:34px;height:4px;border-radius:99px;background:var(--bx-blue);margin:16px auto 0;}

/* Reveal only when JS is confirmed running (html.bx-js). Without it the
   content renders normally — a script failure can never blank the page. */
.bx-js .bxsec [data-bx-rv]{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.65,.25,1),transform .7s cubic-bezier(.2,.65,.25,1);}
.bx-js .bxsec [data-bx-rv].bx-in{opacity:1;transform:none;}
.bxsec [data-bx-rv="1"]{transition-delay:.07s}
.bxsec [data-bx-rv="2"]{transition-delay:.14s}
.bxsec [data-bx-rv="3"]{transition-delay:.21s}
.bxsec [data-bx-rv="4"]{transition-delay:.28s}
@media (prefers-reduced-motion:reduce){.bxsec [data-bx-rv]{opacity:1!important;transform:none!important;transition:none;}}

/* buttons (specificity guard against theme link colours) */
.bxsec a.bxs-btn{
  display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:1rem;
  border-radius:11px;padding:16px 27px;text-decoration:none;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
}
.bxsec a.bxs-btn--primary,.bxsec a.bxs-btn--primary:visited{background:var(--bx-blue);color:#fff;box-shadow:0 12px 28px rgba(32,89,233,.30);}
.bxsec a.bxs-btn--primary:hover{background:var(--bx-blue-deep);color:#fff;transform:translateY(-2px);}
.bxsec a.bxs-btn--ghost,.bxsec a.bxs-btn--ghost:visited{color:var(--bx-ink);border:1.5px solid var(--bx-line);background:#fff;}
.bxsec a.bxs-btn--ghost:hover{border-color:rgba(32,89,233,.45);color:var(--bx-blue);transform:translateY(-2px);}
.bxsec a.bxs-btn--onDark,.bxsec a.bxs-btn--onDark:visited{color:#fff;border:1.5px solid rgba(255,255,255,.32);}
.bxsec a.bxs-btn--onDark:hover{border-color:#fff;color:#fff;transform:translateY(-2px);}
.bxsec a.bxs-btn span{transition:transform .18s ease;}
.bxsec a.bxs-btn:hover span{transform:translateX(4px);}

/* ==========================================================================
   WHY BRANDING
   ========================================================================== */
.bxs-why{background:#fff;padding:96px 0 88px;}
.bxs-why__grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:start;}
.bxs-why__copy p{font-size:1rem;line-height:1.75;margin:16px 0 0;}
.bxs-pillars{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.bxs-pill{
  background:#fff;border:1px solid var(--bx-line);border-radius:16px;padding:26px 22px;
  box-shadow:0 6px 22px rgba(16,44,100,.05);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.bxs-pill:hover{transform:translateY(-5px);box-shadow:0 22px 52px rgba(16,44,100,.13);border-color:rgba(32,89,233,.32);}
.bxs-pill__ic{
  width:52px;height:52px;border-radius:13px;background:var(--bx-tint);color:var(--bx-blue);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.bxs-pill p{font-size:.9rem;line-height:1.62;margin:10px 0 0;}

/* ==========================================================================
   DELIVERABLES SHOWCASE (imagery)
   ========================================================================== */
.bxs-show{background:linear-gradient(180deg,#f6f9ff 0%,#eef3fc 100%);padding:92px 0;position:relative;overflow:hidden;}
.bxs-show__grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.bxs-shot{
  background:#fff;border:1px solid var(--bx-line);border-radius:20px;overflow:hidden;
  box-shadow:0 16px 44px rgba(16,44,100,.10);
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s ease;
}
.bxs-shot:hover{transform:translateY(-6px);box-shadow:0 30px 68px rgba(16,44,100,.17);}
.bxs-shot__img{display:block;width:100%;aspect-ratio:1200/820;object-fit:cover;background:var(--bx-tint);}
.bxs-shot__cap{padding:20px 22px 22px;border-top:1px solid var(--bx-line);}
.bxs-shot__cap span{
  display:block;font-family:var(--bx-mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bx-blue);margin-bottom:7px;
}
.bxs-shot__cap p{font-size:.9rem;line-height:1.6;margin:6px 0 0;}
.bxs-show__note{
  margin-top:30px;text-align:center;font-family:var(--bx-mono);font-size:.74rem;
  letter-spacing:.06em;color:var(--bx-muted);
}

/* ==========================================================================
   PROCESS
   ========================================================================== */
.bxs-proc{background:#fff;padding:92px 0;position:relative;overflow:hidden;}
.bxs-proc__canvas{
  position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(32,89,233,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(32,89,233,.06) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 75%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 75%);
}
.bxs-proc .bxs-wrap{position:relative;z-index:2;}
.bxs-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.bxs-step{position:relative;text-align:center;padding:0 12px;}
.bxs-step__ic{
  width:88px;height:88px;border-radius:50%;background:#fff;color:var(--bx-blue);
  box-shadow:0 10px 26px rgba(16,44,100,.10);border:1px solid var(--bx-line);
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;
  position:relative;z-index:2;transition:transform .22s ease,box-shadow .22s ease;
}
.bxs-step:hover .bxs-step__ic{transform:translateY(-4px) scale(1.04);box-shadow:0 20px 44px rgba(16,44,100,.16);}
.bxs-step__line{
  position:absolute;top:44px;left:calc(50% + 56px);right:calc(-50% + 56px);height:12px;z-index:1;
  color:rgba(32,89,233,.5);pointer-events:none;
}
.bxs-step:last-child .bxs-step__line{display:none;}
.bxs-step__line i{position:absolute;left:0;right:11px;top:5px;border-top:2.5px dotted currentColor;}
.bxs-step__line b{position:absolute;right:0;top:0;width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor;}
.bxs-step__n{
  display:inline-block;font-family:var(--bx-mono);font-size:.66rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;background:var(--bx-blue);border-radius:99px;padding:5px 13px;margin-bottom:11px;
}
.bxs-step p{font-size:.89rem;line-height:1.62;margin:9px 0 0;}

/* ==========================================================================
   TIERS
   ========================================================================== */
.bxs-tiers{background:linear-gradient(180deg,#eef3fc 0%,#f7faff 100%);padding:92px 0 40px;}
.bxs-tier{
  background:#fff;border:1px solid var(--bx-line);border-radius:20px;
  box-shadow:0 12px 38px rgba(16,44,100,.07);padding:36px 34px 30px;margin-bottom:28px;
  transition:box-shadow .25s ease;
}
.bxs-tier:hover{box-shadow:0 26px 62px rgba(16,44,100,.14);}
.bxs-tier__head{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;flex-wrap:wrap;}
.bxs-tier__id{display:flex;align-items:center;gap:15px;}
.bxs-tier__badge{
  width:52px;height:52px;border-radius:14px;flex:none;display:flex;align-items:center;justify-content:center;
  font-family:var(--bx-mono);font-weight:700;font-size:.98rem;
}
.bxs-tier--fd .bxs-tier__badge{background:var(--bx-tint);color:var(--bx-blue);}
.bxs-tier--fs .bxs-tier__badge{background:var(--bx-blue);color:#fff;}
.bxs-tier--en .bxs-tier__badge{background:var(--bx-navy);color:#fff;}
.bxs-tier__name{font-family:var(--bx-display);font-size:1.48rem;font-weight:800;letter-spacing:-.015em;color:var(--bx-ink);line-height:1.1;margin:0;}
.bxs-tier__tag{display:block;font-family:var(--bx-mono);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--bx-muted);margin-top:6px;}
.bxs-tier__ideal{
  font-size:.81rem;font-weight:500;color:var(--bx-blue);background:var(--bx-tint);
  border:1px solid rgba(32,89,233,.18);padding:9px 16px;border-radius:99px;max-width:370px;line-height:1.45;
}
.bxs-tier__desc{max-width:820px;font-size:.97rem;line-height:1.68;margin:14px 0 28px;}
.bxs-tier__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.bxs-tier__col h4{
  font-family:var(--bx-mono);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bx-blue);padding-bottom:12px;border-bottom:2px solid var(--bx-tint);margin:0 0 4px;
}
.bxs-tier__col ul{list-style:none;margin:0;padding:0;}
.bxs-tier__col li{padding:12px 0;border-bottom:1px solid #eff3fa;}
.bxs-tier__col li:last-child{border-bottom:0;}
.bxs-tier__col strong{display:block;font-size:.92rem;font-weight:650;color:var(--bx-ink);margin-bottom:3px;}
.bxs-tier__col em{display:block;font-style:normal;font-size:.845rem;line-height:1.56;color:var(--bx-body);}
.bxs-tier__out{display:flex;gap:14px;align-items:flex-start;background:var(--bx-tint);border-radius:13px;padding:18px 22px;margin-top:26px;}
.bxs-tier__out svg{flex:none;margin-top:1px;color:var(--bx-blue);}
.bxs-tier__out p{margin:0;font-size:.93rem;line-height:1.6;color:var(--bx-ink);}
.bxs-tier__out em{font-style:normal;font-weight:650;}
.bxs-tier__strip{
  margin-top:18px;background:var(--bx-navy);border-radius:13px;padding:20px 26px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.bxs-tier__strip p{margin:0;color:#b6c5e3;font-size:.87rem;line-height:1.5;}
.bxs-tier__strip strong{display:block;color:#fff;font-size:1.01rem;margin-bottom:2px;}

/* ==========================================================================
   COMPARISON
   ========================================================================== */
.bxs-cmp{background:#fff;padding:70px 0 92px;}
.bxs-table-card{border:1px solid var(--bx-line);border-radius:18px;overflow:hidden;box-shadow:0 12px 38px rgba(16,44,100,.07);}
.bxs-table-scroll{overflow-x:auto;}
.bxsec table.bxs-table{width:100%;border-collapse:collapse;min-width:660px;margin:0;}
.bxsec table.bxs-table th{
  background:var(--bx-navy);color:#fff;text-align:center;font-family:var(--bx-font);
  font-size:.89rem;font-weight:650;padding:16px 18px;border:0;
}
.bxsec table.bxs-table th:first-child{text-align:left;padding-left:26px;}
.bxsec table.bxs-table td{
  padding:14px 18px;text-align:center;font-size:.89rem;color:var(--bx-ink);
  border:0;border-top:1px solid #eef2f9;background:#fff;
}
.bxsec table.bxs-table td:first-child{text-align:left;padding-left:26px;font-weight:600;}
.bxsec table.bxs-table tbody tr:nth-child(even) td{background:#f8fafd;}
.bxs-table .ck{color:var(--bx-blue);display:inline-flex;vertical-align:middle;}
.bxs-table .cl{color:var(--bx-body);font-size:.83rem;display:inline-block;}
.bxs-table .cx{color:#b9c3d4;}

/* ==========================================================================
   FAQ
   ========================================================================== */
.bxs-faq{background:linear-gradient(180deg,#f7faff 0%,#eef3fc 100%);padding:88px 0;}
.bxs-faq__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;}
.bxsec details.bxs-q{
  background:#fff;border:1px solid var(--bx-line);border-radius:15px;
  box-shadow:0 6px 20px rgba(16,44,100,.04);overflow:hidden;margin:0;
}
.bxsec details.bxs-q[open]{border-color:rgba(32,89,233,.34);box-shadow:0 16px 40px rgba(16,44,100,.10);}
.bxsec details.bxs-q summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:19px 22px;font-weight:650;font-size:.98rem;color:var(--bx-ink);font-family:var(--bx-font);
}
.bxsec details.bxs-q summary::-webkit-details-marker{display:none;}
.bxs-q__plus{
  flex:none;width:28px;height:28px;border-radius:50%;background:var(--bx-tint);color:var(--bx-blue);
  display:flex;align-items:center;justify-content:center;transition:transform .25s ease;
}
.bxsec details.bxs-q[open] .bxs-q__plus{transform:rotate(45deg);}
.bxs-q__a{padding:0 22px 20px;font-size:.91rem;line-height:1.7;color:var(--bx-body);}
.bxs-q__a strong{color:var(--bx-ink);}

/* ==========================================================================
   ENDCAP CTA
   ========================================================================== */
.bxs-cta{position:relative;background:var(--bx-navy);overflow:hidden;padding:96px 0;}
.bxs-cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(640px 300px at 78% 16%,rgba(32,89,233,.30),transparent 70%),
             radial-gradient(520px 280px at 12% 88%,rgba(32,89,233,.18),transparent 70%);
}
.bxs-cta__dots{position:absolute;width:140px;height:100px;opacity:.42;pointer-events:none;
  background-image:radial-gradient(rgba(141,177,255,.42) 1.5px,transparent 1.5px);background-size:18px 18px;}
.bxs-cta__dots--tr{top:56px;right:44px;} .bxs-cta__dots--bl{bottom:56px;left:44px;}
.bxs-cta__mark{position:absolute;right:6%;bottom:-40px;width:280px;opacity:.06;pointer-events:none;}
.bxs-cta__inner{position:relative;z-index:2;text-align:center;max-width:860px;margin:0 auto;}
.bxs-cta .bxs-kicker{color:#8db1ff;background:rgba(141,177,255,.10);border-color:rgba(141,177,255,.28);}
.bxs-cta .bxs-kicker i{background:#8db1ff;}
.bxsec h2.bxs-cta__title{
  font-family:var(--bx-display);color:#fff;font-size:clamp(2rem,3.3vw,2.85rem);
  font-weight:800;letter-spacing:-.02em;line-height:1.12;margin:0;
}
.bxsec h2.bxs-cta__title span{color:#79a1ff;}
.bxs-cta__lead{color:#b6c5e3;font-size:1.03rem;line-height:1.7;max-width:640px;margin:20px auto 38px;}
.bxs-cta__methods{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:36px;}
.bxs-method{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:15px;
  padding:24px 18px;text-align:center;transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.bxs-method:hover{background:rgba(255,255,255,.08);border-color:rgba(141,177,255,.45);transform:translateY(-3px);}
.bxs-method__ic{
  width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(126,164,255,.6);color:#8db1ff;
  display:flex;align-items:center;justify-content:center;margin:0 auto 12px;
}
.bxs-method h4{font-family:var(--bx-font);color:#8fa3c4;font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin:0 0 6px;}
.bxsec .bxs-method a{color:#fff;font-weight:650;font-size:.99rem;text-decoration:none;}
.bxsec .bxs-method a:hover{color:#9db9ff;}
.bxs-cta__actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;}
.bxs-cta__fine{font-family:var(--bx-mono);color:#8fa3c4;font-size:.74rem;margin:32px 0 0;}

/* ==========================================================================
   THEME OVERRIDE GUARD
   The sitewide stylesheet sets `.sx-sitewide h1..h4 { color: … !important }`
   and colours bare <p>. These rules restore the section palette — especially
   on the dark surfaces, where inherited dark text is invisible.
   ========================================================================== */
.bxsec h2.bxs-h2,
.bxsec h3.bxs-h3,
.bxsec h3.bxs-tier__name{color:var(--bx-ink)!important;}
.bxsec .bxs-tier__col h4{color:var(--bx-blue)!important;}
.bxsec p{color:var(--bx-body);}
.bxsec .bxs-tier__col em{color:var(--bx-body);}
.bxsec .bxs-tier__col strong,
.bxsec .bxs-tier__out p{color:var(--bx-ink);}

/* dark surfaces */
.bxsec .bxs-tier__strip strong{color:#fff!important;}
.bxsec .bxs-tier__strip p{color:#b6c5e3!important;}
.bxsec .bxs-cta h2.bxs-cta__title{color:#fff!important;}
.bxsec .bxs-cta h2.bxs-cta__title span{color:#79a1ff!important;}
.bxsec .bxs-cta .bxs-cta__lead{color:#b6c5e3!important;}
.bxsec .bxs-cta .bxs-cta__fine{color:#8fa3c4!important;}
.bxsec .bxs-cta .bxs-method h4{color:#8fa3c4!important;}
.bxsec .bxs-cta .bxs-kicker{color:#8db1ff!important;}


/* Theme applies `border-bottom:2px solid orange` to every h2 — remove it. */
.bxsec h1,.bxsec h2,.bxsec h3,.bxsec h4{border:0!important;}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .bxs-why__grid{grid-template-columns:1fr;gap:40px;}
  .bxs-steps{grid-template-columns:1fr 1fr;row-gap:42px;}
  .bxs-step__line{display:none;}
}
@media (max-width:860px){
  .bxs-why,.bxs-show,.bxs-proc,.bxs-tiers,.bxs-faq,.bxs-cta{padding-left:0;padding-right:0;}
  .bxs-why{padding-top:72px;padding-bottom:66px;}
  .bxs-show,.bxs-proc,.bxs-faq{padding-top:70px;padding-bottom:70px;}
  .bxs-tiers{padding-top:70px;}
  .bxs-show__grid{grid-template-columns:1fr;}
  .bxs-tier__cols{grid-template-columns:1fr;gap:6px;}
  .bxs-faq__grid{grid-template-columns:1fr;}
  .bxs-cta__methods{grid-template-columns:1fr;}
  .bxs-head{margin-bottom:40px;}
}
@media (max-width:560px){
  .bxs-pillars{grid-template-columns:1fr;}
  .bxs-steps{grid-template-columns:1fr;row-gap:34px;}
  .bxs-tier{padding:24px 18px;border-radius:16px;}
  .bxs-tier__head{flex-direction:column;gap:14px;}
  .bxs-tier__ideal{max-width:none;}
  .bxs-tier__strip{padding:18px;}
  .bxsec a.bxs-btn{width:100%;justify-content:center;}
  .bxs-cta{padding:72px 0;}
  .bxs-shot__cap{padding:16px 16px 18px;}
}

/* The sitewide section-nav is generated from the old content headings;
   those anchors no longer exist after the rebuild, so hide it. */
.sx-sw-section-nav{display:none!important;}