/* =========================================================
   BHAVYA AI BRAND SYSTEM
   ========================================================= */

:root{

  --bh-brand-green:
    #60f8a0;

  --bh-brand-cyan:
    #20ecf0;

  --bh-brand-sky:
    #27b9fd;

  --bh-brand-blue:
    #1c54e5;

  --bh-brand-violet:
    #733efd;

  --bh-brand-purple:
    #9b63ff;

  --bh-brand-orange:
    #f69b25;

  --bh-brand-gold:
    #f5c51e;

  --bh-showcase-bg:
    #07101f;

  --bh-showcase-bg-2:
    #0a1427;

  --bh-showcase-text:
    #f4f9ff;

  --bh-showcase-muted:
    #9fb2c7;

  --bh-showcase-line:
    rgba(
      130,
      175,
      225,
      .15
    );

}


/* =========================================================
   MAIN PREMIUM SHOWCASE
   ========================================================= */

.bh-c9-showcase{

  --bh-accent:
    var(--bh-brand-cyan);

  --bh-accent-2:
    var(--bh-brand-violet);

  position:relative;

  isolation:isolate;

  width:
    min(
      1240px,
      calc(100% - 30px)
    );

  margin:
    42px
    auto;

  padding:
    clamp(
      25px,
      4vw,
      48px
    );

  overflow:hidden;

  border:
    1px solid
    var(--bh-showcase-line);

  border-radius:
    30px;

  background:

    radial-gradient(
      circle
      at
      7%
      2%,
      color-mix(
        in srgb,
        var(--bh-accent)
        12%,
        transparent
      ),
      transparent
      34%
    ),

    radial-gradient(
      circle
      at
      91%
      95%,
      color-mix(
        in srgb,
        var(--bh-accent-2)
        12%,
        transparent
      ),
      transparent
      35%
    ),

    linear-gradient(
      145deg,
      rgba(9,20,38,.99),
      rgba(5,11,23,.99)
    );

  box-shadow:
    0
    35px
    90px
    rgba(0,0,0,.26);
}


.bh-c9-showcase::before{

  content:"";

  position:absolute;

  inset:
    0
    0
    auto
    0;

  height:
    3px;

  background:
    linear-gradient(
      90deg,
      var(--bh-brand-green),
      var(--bh-brand-cyan),
      var(--bh-brand-sky),
      var(--bh-brand-blue),
      var(--bh-brand-violet),
      var(--bh-brand-orange),
      var(--bh-brand-gold)
    );

  opacity:.92;

  z-index:2;
}


.bh-c9-showcase::after{

  content:"";

  position:absolute;

  width:
    440px;

  height:
    440px;

  right:
    -210px;

  top:
    -210px;

  border-radius:
    50%;

  background:
    var(--bh-accent);

  filter:
    blur(110px);

  opacity:
    .055;

  pointer-events:none;

  z-index:-1;
}


.bh-c9-showcase[data-product="billing"]{

  --bh-accent:
    var(--bh-brand-green);

  --bh-accent-2:
    var(--bh-brand-cyan);
}


.bh-c9-layout{

  display:grid;

  grid-template-columns:
    minmax(0,.88fr)
    minmax(480px,1.12fr);

  gap:
    clamp(
      28px,
      4vw,
      60px
    );

  align-items:center;
}


/* =========================================================
   COPY / CONTENT
   ========================================================= */

.bh-c9-copy{

  position:relative;

  z-index:3;
}


.bh-c9-eyebrow{

  display:inline-flex;

  align-items:center;

  gap:7px;

  min-height:
    29px;

  padding:
    5px
    11px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--bh-accent)
      26%,
      transparent
    );

  border-radius:
    999px;

  background:
    color-mix(
      in srgb,
      var(--bh-accent)
      7%,
      transparent
    );

  color:
    #dffcff;

  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    .09em;

  text-transform:
    uppercase;
}


.bh-c9-title{

  margin:
    15px
    0
    8px;

  font-size:
    clamp(
      33px,
      4.2vw,
      58px
    );

  line-height:
    1.04;

  letter-spacing:
    -.035em;

  font-weight:
    950;

  background:
    linear-gradient(
      102deg,
      var(--bh-brand-green),
      var(--bh-brand-cyan),
      var(--bh-brand-sky),
      var(--bh-brand-blue),
      var(--bh-brand-violet),
      var(--bh-brand-orange),
      var(--bh-brand-gold)
    );

  -webkit-background-clip:text;

  background-clip:text;

  -webkit-text-fill-color:
    transparent;

  color:
    transparent;
}


.bh-c9-subtitle{

  max-width:
    650px;

  color:
    #d4e0ec;

  font-size:
    clamp(
      15px,
      1.7vw,
      19px
    );

  line-height:
    1.55;

  font-weight:
    780;
}


.bh-c9-body{

  max-width:
    650px;

  margin-top:
    13px;

  color:
    var(--bh-showcase-muted);

  font-size:
    14px;

  line-height:
    1.75;

  white-space:
    pre-line;
}


.bh-c9-live-row{

  display:flex;

  flex-wrap:wrap;

  gap:
    7px;

  margin-top:
    16px;
}


.bh-c9-chip{

  display:inline-flex;

  align-items:center;

  gap:
    6px;

  padding:
    6px
    9px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:
    999px;

  background:
    rgba(255,255,255,.035);

  color:
    #b7c8da;

  font-size:
    10px;

  font-weight:
    800;
}


.bh-c9-chip-dot{

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    var(--bh-accent);

  box-shadow:
    0
    0
    11px
    var(--bh-accent);
}


/* =========================================================
   ROTATING FEATURE
   ========================================================= */

.bh-c9-rotator{

  margin-top:
    20px;

  min-height:
    86px;

  padding:
    13px
    15px;

  border-left:
    3px solid
    var(--bh-accent);

  border-radius:
    0
    14px
    14px
    0;

  background:
    linear-gradient(
      90deg,
      color-mix(
        in srgb,
        var(--bh-accent)
        8%,
        transparent
      ),
      rgba(255,255,255,.018)
    );
}


.bh-c9-rotator-label{

  color:
    var(--bh-accent);

  font-size:
    9px;

  font-weight:
    900;

  letter-spacing:
    .10em;

  text-transform:
    uppercase;
}


.bh-c9-rotator-text{

  display:block;

  margin-top:
    6px;

  min-height:
    28px;

  color:
    #f2f8ff;

  font-size:
    18px;

  line-height:
    1.4;

  font-weight:
    850;
}


.bh-c9-rotator-text::after{

  content:"";

  display:inline-block;

  width:
    2px;

  height:
    1em;

  margin-left:
    4px;

  vertical-align:
    -.13em;

  background:
    var(--bh-accent);

  animation:
    bhC9Cursor
    .75s
    step-end
    infinite;
}


@keyframes bhC9Cursor{

  50%{
    opacity:0;
  }

}


/* =========================================================
   CTA
   ========================================================= */

.bh-c9-actions{

  display:flex;

  flex-wrap:wrap;

  gap:
    10px;

  margin-top:
    20px;
}


.bh-c9-primary,
.bh-c9-secondary{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:
    8px;

  min-height:
    44px;

  padding:
    9px
    16px;

  border-radius:
    12px;

  font-size:
    12px;

  font-weight:
    900;

  text-decoration:none;

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}


.bh-c9-primary{

  border:
    1px solid
    color-mix(
      in srgb,
      var(--bh-accent)
      48%,
      transparent
    );

  background:
    linear-gradient(
      115deg,
      var(--bh-brand-green),
      var(--bh-brand-cyan),
      var(--bh-brand-sky),
      var(--bh-brand-blue)
    );

  color:
    #031421;

  box-shadow:
    0
    10px
    26px
    rgba(32,236,240,.12);
}


.bh-c9-secondary{

  border:
    1px solid
    rgba(255,255,255,.10);

  background:
    rgba(255,255,255,.035);

  color:
    #e8f4ff;
}


.bh-c9-primary:hover,
.bh-c9-secondary:hover{

  transform:
    translateY(-2px);
}


/* =========================================================
   MOCKUP STAGE
   ========================================================= */

.bh-c9-stage{

  position:relative;

  min-height:
    490px;

  perspective:
    1400px;

  z-index:2;
}


.bh-c9-orbit{

  position:absolute;

  inset:
    8%
    3%
    10%
    3%;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--bh-accent)
      10%,
      transparent
    );

  border-radius:
    50%;

  transform:
    rotate(-9deg);

  pointer-events:none;
}


.bh-c9-orbit::before,
.bh-c9-orbit::after{

  content:"";

  position:absolute;

  width:
    8px;

  height:
    8px;

  border-radius:
    50%;

  background:
    var(--bh-accent);

  box-shadow:
    0
    0
    18px
    var(--bh-accent);
}


.bh-c9-orbit::before{

  left:
    12%;

  top:
    19%;
}


.bh-c9-orbit::after{

  right:
    11%;

  bottom:
    21%;
}


/* =========================================================
   DESKTOP / BROWSER MOCKUP
   ========================================================= */

.bh-c9-browser{

  position:absolute;

  width:
    min(
      92%,
      620px
    );

  left:
    0;

  top:
    36px;

  overflow:hidden;

  border:
    1px solid
    rgba(125,175,225,.19);

  border-radius:
    18px;

  background:
    #081321;

  box-shadow:
    0
    30px
    75px
    rgba(0,0,0,.34);

  transform:
    rotateY(-7deg)
    rotateX(2deg)
    translateZ(0);

  animation:
    bhC9FloatDesktop
    7s
    ease-in-out
    infinite;
}


@keyframes bhC9FloatDesktop{

  0%,
  100%{

    transform:
      rotateY(-7deg)
      rotateX(2deg)
      translateY(0);
  }

  50%{

    transform:
      rotateY(-5deg)
      rotateX(1deg)
      translateY(-7px);
  }

}


.bh-c9-browser-bar{

  height:
    39px;

  display:flex;

  align-items:center;

  gap:
    7px;

  padding:
    0
    12px;

  border-bottom:
    1px solid
    rgba(255,255,255,.07);

  background:
    rgba(15,23,42,.96);
}


.bh-c9-browser-dot{

  width:
    8px;

  height:
    8px;

  border-radius:
    50%;

  background:
    #334155;
}


.bh-c9-browser-dot:nth-child(1){

  background:
    #fb7185;
}


.bh-c9-browser-dot:nth-child(2){

  background:
    var(--bh-brand-gold);
}


.bh-c9-browser-dot:nth-child(3){

  background:
    var(--bh-brand-green);
}


.bh-c9-url{

  flex:1;

  margin-left:
    8px;

  padding:
    5px
    9px;

  border-radius:
    7px;

  background:
    rgba(255,255,255,.04);

  color:
    #6f839a;

  font-size:
    8px;

  overflow:hidden;

  white-space:nowrap;
}


.bh-c9-browser-screen{

  position:relative;

  min-height:
    330px;

  background:
    linear-gradient(
      150deg,
      #071221,
      #0a172a
    );
}


.bh-c9-browser-screen > img{

  display:block;

  width:100%;

  height:
    330px;

  object-fit:
    cover;

  object-position:
    top center;
}


/* =========================================================
   AUTO CUSTOM WEBSITE FALLBACK
   ========================================================= */

.bh-c9-auto-web{

  height:
    330px;

  padding:
    21px;

  overflow:hidden;

  background:

    radial-gradient(
      circle
      at
      75%
      12%,
      rgba(115,62,253,.18),
      transparent
      30%
    ),

    linear-gradient(
      145deg,
      #071322,
      #0a172b
    );
}


.bh-c9-auto-nav{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:
    15px;
}


.bh-c9-auto-logo{

  color:
    var(--bh-brand-cyan);

  font-size:
    10px;

  font-weight:
    950;

  letter-spacing:
    .08em;
}


.bh-c9-auto-links{

  display:flex;

  gap:
    12px;
}


.bh-c9-auto-links span{

  width:
    30px;

  height:
    4px;

  border-radius:
    999px;

  background:
    rgba(255,255,255,.18);
}


.bh-c9-auto-hero{

  display:grid;

  grid-template-columns:
    1.1fr
    .9fr;

  gap:
    18px;

  margin-top:
    31px;
}


.bh-c9-auto-copy strong{

  display:block;

  color:
    #eff8ff;

  font-size:
    20px;

  line-height:
    1.22;
}


.bh-c9-auto-copy p{

  margin:
    9px
    0
    0;

  color:
    #8298ae;

  font-size:
    9px;

  line-height:
    1.55;
}


.bh-c9-auto-button{

  display:inline-flex;

  margin-top:
    13px;

  padding:
    6px
    10px;

  border-radius:
    8px;

  background:
    linear-gradient(
      110deg,
      var(--bh-brand-cyan),
      var(--bh-brand-blue)
    );

  color:
    #031421;

  font-size:
    8px;

  font-weight:
    900;
}


.bh-c9-auto-art{

  position:relative;

  min-height:
    145px;

  border:
    1px solid
    rgba(39,185,253,.13);

  border-radius:
    15px;

  background:
    linear-gradient(
      145deg,
      rgba(39,185,253,.07),
      rgba(115,62,253,.08)
    );
}


.bh-c9-auto-art::before{

  content:"";

  position:absolute;

  inset:
    20%
    17%;

  border-radius:
    12px;

  border:
    1px solid
    rgba(32,236,240,.25);

  transform:
    rotate(-8deg);

  box-shadow:
    0
    0
    35px
    rgba(32,236,240,.09);
}


.bh-c9-auto-art::after{

  content:"</>";

  position:absolute;

  inset:
    0;

  display:grid;

  place-items:center;

  color:
    var(--bh-brand-cyan);

  font-size:
    35px;

  font-weight:
    900;
}


.bh-c9-auto-cards{

  display:grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  gap:
    8px;

  margin-top:
    21px;
}


.bh-c9-auto-cards div{

  min-height:
    58px;

  padding:
    8px;

  border:
    1px solid
    rgba(255,255,255,.06);

  border-radius:
    9px;

  background:
    rgba(255,255,255,.025);
}


.bh-c9-auto-cards b{

  display:block;

  color:
    #cedbea;

  font-size:
    8px;
}


.bh-c9-auto-cards span{

  display:block;

  width:
    70%;

  height:
    4px;

  margin-top:
    7px;

  border-radius:
    999px;

  background:
    rgba(255,255,255,.12);
}


/* =========================================================
   AUTO BILLING DASHBOARD
   ========================================================= */

.bh-c9-billing-auto{

  height:
    330px;

  display:grid;

  grid-template-columns:
    93px
    1fr;

  background:
    #f6f8fb;
}


.bh-c9-billing-side{

  padding:
    15px
    10px;

  color:
    #fff;

  background:
    linear-gradient(
      180deg,
      #071a35,
      #0b2a4c
    );
}


.bh-c9-billing-brand{

  color:
    #72f4bd;

  font-size:
    8px;

  font-weight:
    950;

  line-height:
    1.4;
}


.bh-c9-billing-menu{

  margin-top:
    20px;
}


.bh-c9-billing-menu span{

  display:block;

  height:
    6px;

  margin:
    10px
    0;

  border-radius:
    999px;

  background:
    rgba(255,255,255,.18);
}


.bh-c9-billing-menu span:nth-child(2){

  width:
    74%;

  background:
    rgba(96,248,160,.42);
}


.bh-c9-billing-menu span:nth-child(3){

  width:
    86%;
}


.bh-c9-billing-menu span:nth-child(4){

  width:
    68%;
}


.bh-c9-billing-main{

  padding:
    16px;

  color:
    #203044;
}


.bh-c9-billing-heading{

  display:flex;

  align-items:center;

  justify-content:space-between;

  font-size:
    10px;

  font-weight:
    900;
}


.bh-c9-billing-new{

  padding:
    5px
    8px;

  border-radius:
    7px;

  background:
    #19b86a;

  color:#fff;

  font-size:
    7px;
}


.bh-c9-kpis{

  display:grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  gap:
    8px;

  margin-top:
    14px;
}


.bh-c9-kpi{

  padding:
    10px;

  border:
    1px solid
    #e5eaf0;

  border-radius:
    9px;

  background:
    #fff;

  box-shadow:
    0
    5px
    14px
    rgba(22,42,66,.05);
}


.bh-c9-kpi small{

  display:block;

  color:
    #8290a1;

  font-size:
    6px;
}


.bh-c9-kpi strong{

  display:block;

  margin-top:
    5px;

  color:
    #1c2b3e;

  font-size:
    12px;
}


.bh-c9-invoice-table{

  margin-top:
    13px;

  overflow:hidden;

  border:
    1px solid
    #e5eaf0;

  border-radius:
    9px;

  background:#fff;
}


.bh-c9-table-head,
.bh-c9-table-row{

  display:grid;

  grid-template-columns:
    1fr
    .7fr
    .8fr;

  gap:
    6px;

  padding:
    8px
    10px;

  font-size:
    6px;
}


.bh-c9-table-head{

  color:
    #8090a2;

  background:
    #f1f4f7;

  font-weight:
    800;
}


.bh-c9-table-row{

  border-top:
    1px solid
    #edf0f3;

  color:
    #526173;
}


.bh-c9-table-row b{

  color:
    #169b5d;
}


/* =========================================================
   MOBILE MOCKUP
   ========================================================= */

.bh-c9-phone{

  position:absolute;

  z-index:6;

  width:
    155px;

  right:
    4px;

  bottom:
    10px;

  padding:
    8px;

  border:
    1px solid
    rgba(255,255,255,.16);

  border-radius:
    28px;

  background:
    #050b13;

  box-shadow:
    0
    28px
    60px
    rgba(0,0,0,.38);

  transform:
    rotate(4deg);

  animation:
    bhC9FloatPhone
    5.8s
    ease-in-out
    infinite;
}


@keyframes bhC9FloatPhone{

  0%,
  100%{

    transform:
      rotate(4deg)
      translateY(0);
  }

  50%{

    transform:
      rotate(2deg)
      translateY(-9px);
  }

}


.bh-c9-phone-notch{

  width:
    54px;

  height:
    5px;

  margin:
    0
    auto
    6px;

  border-radius:
    999px;

  background:
    #1c2633;
}


.bh-c9-phone-screen{

  position:relative;

  min-height:
    270px;

  overflow:hidden;

  border-radius:
    21px;

  background:
    linear-gradient(
      155deg,
      #071421,
      #0c1c31
    );
}


.bh-c9-phone-screen > img{

  display:block;

  width:100%;

  height:
    270px;

  object-fit:
    cover;

  object-position:
    top center;
}


/* =========================================================
   AUTO PHONE UI
   ========================================================= */

.bh-c9-auto-phone{

  min-height:
    270px;

  padding:
    13px
    10px;
}


.bh-c9-phone-title{

  color:
    #f0f8ff;

  font-size:
    9px;

  font-weight:
    900;
}


.bh-c9-phone-sub{

  margin-top:
    3px;

  color:
    #71879c;

  font-size:
    6px;
}


.bh-c9-phone-panel{

  margin-top:
    12px;

  padding:
    11px;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius:
    12px;

  background:
    linear-gradient(
      145deg,
      rgba(39,185,253,.07),
      rgba(115,62,253,.07)
    );
}


.bh-c9-phone-panel strong{

  display:block;

  color:
    var(--bh-brand-cyan);

  font-size:
    16px;
}


.bh-c9-phone-panel small{

  color:
    #7d91a7;

  font-size:
    6px;
}


.bh-c9-phone-list{

  margin-top:
    11px;
}


.bh-c9-phone-item{

  display:flex;

  align-items:center;

  gap:
    7px;

  margin:
    7px
    0;

  padding:
    7px;

  border:
    1px solid
    rgba(255,255,255,.06);

  border-radius:
    9px;

  background:
    rgba(255,255,255,.025);
}


.bh-c9-phone-icon{

  width:
    21px;

  height:
    21px;

  display:grid;

  place-items:center;

  flex:
    0
    0
    21px;

  border-radius:
    7px;

  background:
    color-mix(
      in srgb,
      var(--bh-accent)
      12%,
      transparent
    );

  color:
    var(--bh-accent);

  font-size:
    8px;
}


.bh-c9-phone-line{

  flex:1;
}


.bh-c9-phone-line b{

  display:block;

  color:
    #cbd9e6;

  font-size:
    6px;
}


.bh-c9-phone-line span{

  display:block;

  width:
    64%;

  height:
    3px;

  margin-top:
    4px;

  border-radius:
    999px;

  background:
    rgba(255,255,255,.10);
}


/* =========================================================
   FLOATING MINI PANELS
   ========================================================= */

.bh-c9-float-card{

  position:absolute;

  z-index:7;

  padding:
    9px
    11px;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius:
    12px;

  background:
    rgba(8,18,34,.92);

  box-shadow:
    0
    14px
    35px
    rgba(0,0,0,.26);

  backdrop-filter:
    blur(15px);

  color:
    #d9e8f5;

  font-size:
    8px;

  font-weight:
    800;
}


.bh-c9-float-card b{

  display:block;

  margin-bottom:
    2px;

  color:
    var(--bh-accent);

  font-size:
    10px;
}


.bh-c9-float-one{

  top:
    4px;

  right:
    23px;

  animation:
    bhC9MiniOne
    5s
    ease-in-out
    infinite;
}


.bh-c9-float-two{

  left:
    31px;

  bottom:
    3px;

  animation:
    bhC9MiniTwo
    6s
    ease-in-out
    infinite;
}


@keyframes bhC9MiniOne{

  50%{
    transform:
      translateY(-7px)
      translateX(3px);
  }

}


@keyframes bhC9MiniTwo{

  50%{
    transform:
      translateY(6px)
      translateX(-3px);
  }

}


/* =========================================================
   ADMIN / CODE FLOATING PANEL — CUSTOM
   ========================================================= */

.bh-c9-admin-float{

  position:absolute;

  z-index:5;

  left:
    22px;

  bottom:
    44px;

  width:
    190px;

  padding:
    11px;

  border:
    1px solid
    rgba(115,62,253,.18);

  border-radius:
    13px;

  background:
    rgba(9,16,31,.95);

  box-shadow:
    0
    16px
    38px
    rgba(0,0,0,.30);
}


.bh-c9-admin-head{

  display:flex;

  align-items:center;

  justify-content:space-between;

  color:
    #9fb0c2;

  font-size:
    7px;

  font-weight:
    800;
}


.bh-c9-admin-live{

  color:
    var(--bh-brand-green);
}


.bh-c9-code{

  margin-top:
    10px;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  font-size:
    6px;

  line-height:
    1.75;

  color:
    #748ba1;
}


.bh-c9-code .cyan{

  color:
    var(--bh-brand-cyan);
}


.bh-c9-code .violet{

  color:
    #b489ff;
}


.bh-c9-code .green{

  color:
    var(--bh-brand-green);
}


/* =========================================================
   LOADING / ERROR
   ========================================================= */

.bh-c9-status{

  width:
    min(
      1180px,
      calc(100% - 30px)
    );

  margin:
    25px
    auto;

  padding:
    14px;

  border:
    1px solid
    rgba(245,197,30,.20);

  border-radius:
    12px;

  background:
    rgba(245,197,30,.05);

  color:
    #efd571;

  font-size:
    12px;

  text-align:center;
}


/* =========================================================
   ONLY HIDE LEGACY CONTENT AFTER SUCCESSFUL RENDER
   ========================================================= */

.bh-c9-superseded{

  display:
    none !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1050px){

  .bh-c9-layout{

    grid-template-columns:
      1fr;

  }


  .bh-c9-copy{

    max-width:
      820px;
  }


  .bh-c9-stage{

    width:
      min(
        760px,
        100%
      );

    margin:
      0
      auto;
  }

}


@media(max-width:680px){

  .bh-c9-showcase{

    width:
      calc(
        100% - 18px
      );

    margin:
      26px
      auto;

    padding:
      23px
      16px;

    border-radius:
      22px;
  }


  .bh-c9-title{

    font-size:
      clamp(
        31px,
        11vw,
        44px
      );
  }


  .bh-c9-subtitle{

    font-size:
      15px;
  }


  .bh-c9-body{

    font-size:
      13.5px;
  }


  .bh-c9-stage{

    min-height:
      405px;
  }


  .bh-c9-browser{

    width:
      calc(
        100% - 36px
      );

    left:
      0;

    top:
      27px;

    transform:
      none;

    animation:
      none;
  }


  .bh-c9-browser-screen,
  .bh-c9-browser-screen > img,
  .bh-c9-auto-web,
  .bh-c9-billing-auto{

    height:
      245px;

    min-height:
      245px;
  }


  .bh-c9-phone{

    width:
      125px;

    right:
      0;

    bottom:
      14px;
  }


  .bh-c9-phone-screen,
  .bh-c9-phone-screen > img{

    min-height:
      218px;

    height:
      218px;
  }


  .bh-c9-auto-phone{

    min-height:
      218px;
  }


  .bh-c9-admin-float{

    width:
      155px;

    left:
      3px;

    bottom:
      5px;
  }


  .bh-c9-float-one{

    right:
      2px;
  }


  .bh-c9-float-two{

    display:none;
  }


  .bh-c9-auto-copy strong{

    font-size:
      14px;
  }


  .bh-c9-auto-cards{

    grid-template-columns:
      repeat(
        2,
        1fr
      );
  }


  .bh-c9-billing-auto{

    grid-template-columns:
      65px
      1fr;
  }


  .bh-c9-kpis{

    gap:
      5px;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(
  prefers-reduced-motion:
  reduce
){

  .bh-c9-browser,
  .bh-c9-phone,
  .bh-c9-float-one,
  .bh-c9-float-two,
  .bh-c9-rotator-text::after{

    animation:
      none !important;
  }

}


/* =========================================================
   PRINT
   ========================================================= */

@media print{

  .bh-c9-showcase{

    width:100%;

    break-inside:
      avoid;

    background:
      #fff !important;

    box-shadow:
      none !important;

    border-color:
      #dce4ed !important;
  }


  .bh-c9-title{

    background:
      none !important;

    -webkit-text-fill-color:
      #253649 !important;

    color:
      #253649 !important;
  }


  .bh-c9-body,
  .bh-c9-subtitle{

    color:
      #526477 !important;
  }


  .bh-c9-browser,
  .bh-c9-phone,
  .bh-c9-float-card,
  .bh-c9-admin-float{

    animation:
      none !important;
  }

}