/* BALENA Bill-BOX: all styles scoped to the dedicated page */
body.bb-page{margin:0;color:#173a60;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;background:white;line-height:1.75}#bb-main *, .bb-footer *{box-sizing:border-box}#bb-main a, .bb-footer a{text-decoration:none}#bb-main img{max-width:100%;height:auto;display:block}.bb-wrap{max-width:1220px;margin:0 auto;padding:0 28px}.bb-btn{display:inline-block;padding:14px 27px;border-radius:40px;background:linear-gradient(110deg,#1774bf,#0494dc);color:#fff!important;font-weight:800;font-size:14px;box-shadow:0 7px 20px #0065ad25}.bb-btn-small{font-size:12px;padding:11px 22px}.bb-hero{background:linear-gradient(120deg,#fff 25%,#f0f9ff 100%)}.bb-hero-grid{display:grid;grid-template-columns:46% 54%;align-items:center;gap:10px;min-height:565px;padding-top:55px;padding-bottom:55px}.bb-eyebrow{color:#157ec7;font-size:13px;font-weight:800;letter-spacing:.04em}.bb-product{color:#0476c3;font-weight:900;font-size:30px;margin:5px 0 0}.bb-en{color:#529dd0;font-size:12px;letter-spacing:.16em;margin:0 0 23px}.bb-hero h1{font-size:clamp(28px,3vw,42px);line-height:1.55;letter-spacing:-.04em;color:#11375e;margin:0 0 22px}.bb-hero h1 em{font-style:normal;color:#1c8dd4}.bb-lead{font-size:14px;max-width:550px;margin:0 0 10px}.bb-connect{color:#2672a4;font-weight:700}.bb-hero-copy .bb-btn{margin-top:22px}.bb-hero-visual{position:relative}.bb-hero-visual img{border-radius:25px;filter:drop-shadow(0 16px 25px #1b6da51c)}.bb-hero-label{position:absolute;bottom:13px;left:6%;right:6%;text-align:center;padding:12px;background:#fffffff0;border:1px solid #d6e8f5;border-radius:15px;font-size:12px;font-weight:800;color:#126eac}.bb-index{background:#eaf6ff}.bb-index .bb-wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.bb-index a{padding:16px 4px;display:flex;align-items:center;gap:8px;color:#244e70;font-weight:700;font-size:11px;justify-content:center}.bb-index span{background:linear-gradient(#1689d5,#0768b5);color:#fff;border-radius:7px 7px 12px 12px;font-size:17px;padding:4px 8px}.bb-intro{text-align:center;padding-top:76px;padding-bottom:55px}.bb-intro h2{font-size:35px;margin:10px 0}.bb-intro h2 span{color:#0984d0}.bb-intro>p:last-child{color:#627b93}.bb-feature{padding:22px 0}.bb-feature-grid{display:grid;grid-template-columns:25% 35% 40%;align-items:center;gap:0;background:linear-gradient(110deg,#f0f9ff,#f7fbff);border:1px solid #e4f2fc;border-radius:20px;padding:24px;min-height:310px}.bb-feature-even .bb-feature-grid{background:linear-gradient(110deg,#f8fcff,#eaf7ff)}.bb-feature-illustration{position:relative;padding-top:22px}.bb-feature-illustration img{border-radius:15px}.bb-shield{position:absolute;top:-5px;left:0;z-index:1;display:flex;align-items:center;justify-content:center;width:58px;height:68px;border-radius:11px 11px 27px 27px;background:linear-gradient(140deg,#1698e1,#0761ad);font-size:26px;color:#fff;font-weight:800;box-shadow:0 4px 12px #1875b52b}.bb-feature-text{padding:12px 22px}.bb-feature-kicker{font-weight:900;color:#0b7dc5;margin:0;font-size:20px}.bb-feature-text h3{font-size:24px;margin:0 0 13px;line-height:1.4;color:#123a63}.bb-feature-text>p:not(.bb-feature-kicker){font-size:13px;margin:0 0 13px}.bb-feature-text ul{list-style:none;padding:0;margin:0}.bb-feature-text li{font-size:13px;font-weight:700;margin:7px 0;position:relative;padding-left:25px}.bb-feature-text li:before{content:'✓';position:absolute;left:0;top:2px;border-radius:50%;background:#0d85ce;color:white;font-size:11px;width:18px;height:18px;display:flex;align-items:center;justify-content:center}.bb-feature-text .bb-note{font-size:11px!important;color:#6c8295;margin-top:12px!important}.bb-feature-screen{margin:0;padding:13px;background:#fff;border:1px solid #dcebf5;border-radius:14px;box-shadow:0 8px 24px #0b5d9620}.bb-feature-screen img{width:100%;border:1px solid #e5edf4;border-radius:6px}.bb-feature-screen figcaption{font-size:11px;color:#5b7893;margin-top:9px;font-weight:700}.bb-feature-screen figcaption span{float:right;color:#087cc8}.bb-problems{margin-top:55px;margin-bottom:35px;background:#edf8ff;border-radius:18px;padding-top:28px;padding-bottom:28px;text-align:center}.bb-problems h2{font-size:25px;color:#0780c8}.bb-problem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.bb-problem-grid>div{background:white;border-radius:14px;padding:25px 10px;font-size:34px}.bb-problem-grid strong{display:block;font-size:13px;line-height:1.6}.bb-cta{margin-top:35px;background:linear-gradient(110deg,#279be4,#0874c2);color:#fff;text-align:center;padding:60px 0}.bb-cta .bb-eyebrow{color:#bce8ff}.bb-cta h2{font-size:32px;line-height:1.5}.bb-cta p{font-size:14px}.bb-btn-white{background:#fff;color:#0875c2!important;margin-top:15px}.bb-footer{background:#f7fbfe;padding:20px 0;font-size:12px}.bb-footer .bb-wrap{display:flex;justify-content:space-between}.bb-footer a{color:#1275b9}@media(max-width:900px){.bb-hero-grid{grid-template-columns:1fr}.bb-hero-visual{max-width:700px;margin:auto}.bb-feature-grid{grid-template-columns:1fr 1.2fr}.bb-feature-illustration{grid-column:1}.bb-feature-text{grid-column:2}.bb-feature-screen{grid-column:1/-1;margin-top:15px}.bb-index .bb-wrap{overflow-x:auto;display:flex}.bb-index a{min-width:170px}.bb-problem-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.bb-wrap{padding-left:18px;padding-right:18px}.bb-hero-grid{padding-top:35px;padding-bottom:35px}.bb-product{font-size:24px}.bb-hero h1{font-size:29px}.bb-intro{padding-top:50px;padding-bottom:25px}.bb-intro h2{font-size:26px}.bb-feature-grid{display:block;padding:18px}.bb-feature-illustration{max-width:330px;margin:auto}.bb-feature-text{padding:15px 2px}.bb-feature-text h3{font-size:21px}.bb-feature-screen{margin-top:15px}.bb-problem-grid{grid-template-columns:1fr 1fr}.bb-problem-grid strong{font-size:11px}.bb-cta h2{font-size:24px}.bb-footer .bb-wrap{display:block;text-align:center}}

/* Shared theme header is used; Bill-BOX styles stay inside its content. */
body.bb-page #bb-main{width:100%;overflow:hidden}
body.bb-page .bb-hero-visual img{width:100%;height:auto;object-fit:contain}
body.bb-page .bb-hero-grid{grid-template-columns:minmax(0,44%) minmax(0,56%);gap:18px}
@media(max-width:900px){body.bb-page .bb-hero-grid{grid-template-columns:minmax(0,1fr)}}


/* Bill-BOX: spacious alternating full-width feature sections */
@media (min-width: 901px) {
  body.bb-page #bb-main .bb-feature { padding: 0; background: #fff; }
  body.bb-page #bb-main .bb-feature.bb-feature-even { background: #eaf7ff; }
  body.bb-page #bb-main .bb-feature-grid {
    background: transparent; border: 0; border-radius: 0;
    box-shadow: none; padding: 92px 12px; min-height: 440px;
    grid-template-columns: 25% 35% 40%;
  }
  body.bb-page #bb-main .bb-feature-even .bb-feature-grid { background: transparent; }
  body.bb-page #bb-main .bb-feature-illustration { padding-top: 0; padding-left: 12px; }
  body.bb-page #bb-main .bb-feature-illustration img { border-radius: 0; }
  body.bb-page #bb-main .bb-shield { top: -22px; left: 0; }
  body.bb-page #bb-main .bb-feature-text { padding: 12px 28px; }
}
@media (min-width: 601px) and (max-width: 900px) {
  body.bb-page #bb-main .bb-feature { padding: 0; background: #fff; }
  body.bb-page #bb-main .bb-feature.bb-feature-even { background: #eaf7ff; }
  body.bb-page #bb-main .bb-feature-grid,
  body.bb-page #bb-main .bb-feature-even .bb-feature-grid {
    background: transparent; border: 0; border-radius: 0; padding: 70px 16px;
  }
  body.bb-page #bb-main .bb-feature-illustration img { border-radius: 0; }
}
@media (max-width: 600px) {
  body.bb-page #bb-main .bb-feature { padding: 0; background: #fff; }
  body.bb-page #bb-main .bb-feature.bb-feature-even { background: #eaf7ff; }
  body.bb-page #bb-main .bb-feature-grid,
  body.bb-page #bb-main .bb-feature-even .bb-feature-grid {
    background: transparent; border: 0; border-radius: 0; padding: 52px 18px;
  }
  body.bb-page #bb-main .bb-feature-illustration img { border-radius: 0; }
  body.bb-page #bb-main .bb-shield { top: 0; left: 0; }
}

/* Layout correction: 01 | illustration | text | application screenshot */
@media (min-width: 1101px) {
  body.bb-page #bb-main .bb-feature-grid {
    grid-template-columns: 76px minmax(0, 29fr) minmax(0, 30fr) minmax(0, 41fr);
    column-gap: 20px;
    padding: 100px 12px;
    align-items: center;
  }
  body.bb-page #bb-main .bb-feature-illustration {
    display: contents;
  }
  body.bb-page #bb-main .bb-shield {
    position: static;
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    align-self: center;
    margin: 0;
  }
  body.bb-page #bb-main .bb-feature-illustration > img {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    height: auto;
    min-width: 0;
  }
  body.bb-page #bb-main .bb-feature-text {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    padding: 10px 8px;
  }
  body.bb-page #bb-main .bb-feature-screen {
    grid-column: 4;
    grid-row: 1;
    min-width: 0;
  }
}
@media (min-width: 601px) and (max-width: 1100px) {
  body.bb-page #bb-main .bb-feature-grid {
    grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.1fr);
    column-gap: 16px;
    row-gap: 26px;
  }
  body.bb-page #bb-main .bb-feature-illustration { display: contents; }
  body.bb-page #bb-main .bb-shield {
    position: static;
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
  }
  body.bb-page #bb-main .bb-feature-illustration > img {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
  }
  body.bb-page #bb-main .bb-feature-text {
    grid-column: 3;
    grid-row: 1;
    padding: 12px;
  }
  body.bb-page #bb-main .bb-feature-screen {
    grid-column: 2 / 4;
    grid-row: 2;
    margin: 0;
  }
}
@media (max-width: 600px) {
  body.bb-page #bb-main .bb-feature-illustration {
    padding-top: 0;
    padding-left: 0;
  }
  body.bb-page #bb-main .bb-shield {
    position: relative;
    top: auto;
    left: auto;
    margin-bottom: 18px;
  }
}

/* Final: hero illustration prominence and true four-column features */
body.bb-page #bb-main .bb-hero-label { display:none; }
body.bb-page #bb-main .bb-feature-illustration img { border-radius:0 !important; }
body.bb-page #bb-main .bb-feature-number .bb-shield {
  position:static; margin:0; width:64px; height:74px;
}
@media (min-width:1101px) {
  body.bb-page #bb-main .bb-hero-grid {
    grid-template-columns:minmax(0,42%) minmax(0,58%); gap:0;
  }
  body.bb-page #bb-main .bb-hero-visual {
    width:112%; max-width:none; transform:translateX(-2%);
  }
  body.bb-page #bb-main .bb-hero-visual img { width:100%; max-width:none; border-radius:0; }
  body.bb-page #bb-main .bb-feature-grid {
    grid-template-columns:76px minmax(0,29fr) minmax(0,30fr) minmax(0,41fr);
    column-gap:20px;
  }
  body.bb-page #bb-main .bb-feature-number {grid-column:1;grid-row:1;align-self:center;justify-self:center;}
  body.bb-page #bb-main .bb-feature-illustration {display:block;grid-column:2;grid-row:1;padding:0;min-width:0;}
  body.bb-page #bb-main .bb-feature-illustration img {width:100%;}
  body.bb-page #bb-main .bb-feature-text {grid-column:3;grid-row:1;}
  body.bb-page #bb-main .bb-feature-screen {grid-column:4;grid-row:1;}
}
@media (min-width:601px) and (max-width:1100px) {
  body.bb-page #bb-main .bb-feature-number {grid-column:1;grid-row:1;justify-self:center;}
  body.bb-page #bb-main .bb-feature-illustration {display:block;grid-column:2;grid-row:1;padding:0;min-width:0;}
  body.bb-page #bb-main .bb-feature-text {grid-column:3;grid-row:1;}
  body.bb-page #bb-main .bb-feature-screen {grid-column:2 / 4;grid-row:2;}
}
@media (max-width:600px) {
  body.bb-page #bb-main .bb-feature-number {margin-bottom:18px;}
  body.bb-page #bb-main .bb-feature-illustration {display:block;}
}


/* ============================================================
   BALENA Bill-BOX / HERO ONLY / 2026-10-22
   Based on BALENA Card hero. Other sections are untouched.
   ============================================================ */
body.bb-page #bb-main .bb-hero { background:linear-gradient(105deg,#fff 30%,#f1faff 100%); }
body.bb-page #bb-main .bb-hero-grid {
  max-width:1500px; min-height:565px;
  grid-template-columns:minmax(0,43%) minmax(0,57%);
  gap:0; padding-top:42px; padding-bottom:0;
  align-items:stretch;
}
body.bb-page #bb-main .bb-hero-copy {
  position:relative; z-index:2; min-width:0;
  padding:10px 12px 58px 0;
  align-self:center;
}
body.bb-page #bb-main .bb-hero .bb-eyebrow {margin:0 0 6px; font-size:12px;}
body.bb-page #bb-main .bb-brand {max-width:485px; margin:0 0 5px;}
body.bb-page #bb-main .bb-brand-logo {width:100%; max-height:105px; object-fit:contain; object-position:left center;}
body.bb-page #bb-main .bb-hero-category {
  display:block; width:min(100%,485px); padding:4px 10px;
  margin:0 0 24px; text-align:center;
  background:#087bc5; color:#fff; font-size:15px;
  font-weight:800; letter-spacing:.18em; line-height:1.4;
}
body.bb-page #bb-main .bb-hero h1 {
  font-size:clamp(29px,2.55vw,39px); line-height:1.5;
  margin:0 0 22px; letter-spacing:-.045em;
}
body.bb-page #bb-main .bb-hero .bb-lead {font-size:14px; line-height:1.85; max-width:535px; margin-bottom:10px;}
body.bb-page #bb-main .bb-hero-actions {display:flex; flex-wrap:wrap; gap:12px; margin-top:26px;}
body.bb-page #bb-main .bb-hero-actions .bb-btn {
  margin:0; display:inline-flex; align-items:center; justify-content:space-between;
  min-width:190px; padding:13px 22px; border:2px solid #087bc5;
  border-radius:30px; box-shadow:none; font-size:14px;
}
body.bb-page #bb-main .bb-hero-actions .bb-btn span {font-size:22px; line-height:0.6; padding-left:18px;}
body.bb-page #bb-main .bb-hero-actions .bb-btn-outline {
  background:#fff; color:#087bc5!important;
}
body.bb-page #bb-main .bb-hero-visual {
  position:relative; display:flex; align-items:flex-end; justify-content:flex-end;
  width:100%; max-width:none; transform:none; min-width:0;
  margin:0; overflow:visible;
}
body.bb-page #bb-main .bb-hero-visual img {
  display:block; width:115%; max-width:none; height:auto;
  object-fit:contain; border-radius:0; filter:none;
  margin:0 -5% 0 0;
}
body.bb-page #bb-main .bb-hero-label {display:none!important;}
@media (max-width:1100px) {
  body.bb-page #bb-main .bb-hero-grid {grid-template-columns:minmax(0,46%) minmax(0,54%); min-height:500px;}
  body.bb-page #bb-main .bb-hero h1 {font-size:clamp(25px,3vw,34px);}
  body.bb-page #bb-main .bb-hero-visual img {width:115%; margin-right:-5%;}
  body.bb-page #bb-main .bb-hero-actions .bb-btn {min-width:160px;}
}
@media (max-width:900px) {
  body.bb-page #bb-main .bb-hero-grid {grid-template-columns:minmax(0,1fr); min-height:0; padding-top:38px;}
  body.bb-page #bb-main .bb-hero-copy {padding:0 0 22px;}
  body.bb-page #bb-main .bb-hero-visual {width:100%; justify-content:center;}
  body.bb-page #bb-main .bb-hero-visual img {width:100%; max-width:100%; margin:0;}
  body.bb-page #bb-main .bb-brand {max-width:470px;}
}
@media (max-width:600px) {
  body.bb-page #bb-main .bb-hero-grid {padding-top:28px;}
  body.bb-page #bb-main .bb-hero h1 {font-size:clamp(25px,6.5vw,31px);}
  body.bb-page #bb-main .bb-hero-category {margin-bottom:18px;}
  body.bb-page #bb-main .bb-hero-actions {gap:9px;}
  body.bb-page #bb-main .bb-hero-actions .bb-btn {min-width:0; flex:1; padding:11px 14px; font-size:12px;}
}

/* 2026-10-22: revised taller hero composition, no enlargement/overlap */
@media (min-width: 901px) {
  body.bb-page #bb-main .bb-hero-grid {
    grid-template-columns: minmax(0,44%) minmax(0,56%);
    min-height: 590px;
  }
  body.bb-page #bb-main .bb-hero-copy {z-index:2;}
  body.bb-page #bb-main .bb-hero-visual {
    transform:none!important; align-self:stretch; align-items:flex-end;
    width:100%; overflow:hidden;
  }
  body.bb-page #bb-main .bb-hero-visual img {
    display:block; width:100%!important; max-width:100%!important;
    height:auto; margin:0!important; transform:none!important;
    object-fit:contain; object-position:right bottom; border-radius:0;
  }
}
@media (max-width:900px) {
  body.bb-page #bb-main .bb-hero-visual img {width:100%!important; max-width:100%!important; transform:none!important; margin:0!important;}
}
body.bb-page #bb-main .bb-hero h1 {font-weight:800!important;}

/* ============================================================
   Bill-BOX hero refinement 2026-10-22
   Only the hero image composition is adjusted.
   ============================================================ */
@media (min-width: 1101px) {
  body.bb-page #bb-main .bb-hero-grid {
    grid-template-columns: minmax(0, 44%) minmax(0, 56%);
  }
  body.bb-page #bb-main .bb-hero-visual {
    position: relative;
    overflow: hidden;
    align-self: stretch;
    min-width: 0;
    isolation: isolate;
  }
  body.bb-page #bb-main .bb-hero-visual img {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 112% !important;
    max-width: none !important;
    height: auto;
    margin: 0 !important;
    transform: none !important;
    object-fit: contain;
    object-position: right bottom;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.6) 9%, #000 19%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.6) 9%, #000 19%);
  }
}
@media (min-width: 901px) and (max-width: 1100px) {
  body.bb-page #bb-main .bb-hero-visual {
    overflow: hidden;
  }
  body.bb-page #bb-main .bb-hero-visual img {
    width: 100% !important;
    max-width: 100% !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 14%);
    mask-image: linear-gradient(to right, transparent 0%, #000 14%);
  }
}
/* BALENA Bill-Box：ヒーロー画像の上端を自然にぼかす */
@media (min-width: 901px) {
  body.bb-page #bb-main .bb-hero-visual img {
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.15) 8%,
      rgba(0, 0, 0, 0.65) 20%,
      #000 30%,
      #000 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.15) 8%,
      rgba(0, 0, 0, 0.65) 20%,
      #000 30%,
      #000 100%
    );
  }
}
/* BALENA Bill-Box：ヒーロー画像の右余白を解消 */
@media (min-width: 901px) {
  body.bb-page #bb-main .bb-hero-visual {
    margin-right: calc(50% - 50vw);
  }

  body.bb-page #bb-main .bb-hero-visual img {
    width: 100%;
    max-width: none;
  }
}

/* ============================================================
   BALENA Bill-BOX / Feature section spacing and sizing
   01 | illustration | description | screenshot
   Hero and the four benefit icons remain unchanged.
   ============================================================ */
@media (min-width: 1101px) {
  body.bb-page #bb-main .bb-feature .bb-wrap {
    max-width: 1500px;
    padding-left: 28px;
    padding-right: 28px;
  }
  body.bb-page #bb-main .bb-feature-grid {
    grid-template-columns: 72px minmax(0, 28fr) minmax(0, 29fr) minmax(0, 43fr);
    column-gap: 22px;
    padding: 58px 0;
    min-height: 0;
    align-items: center;
  }
  body.bb-page #bb-main .bb-feature-number {
    align-self: center;
    justify-self: center;
  }
  body.bb-page #bb-main .bb-feature-number .bb-shield {
    width: 70px;
    height: 80px;
    font-size: 29px;
  }
  body.bb-page #bb-main .bb-feature-illustration {
    width: 100%;
    padding: 0;
    align-self: center;
  }
  body.bb-page #bb-main .bb-feature-illustration > img {
    width: 100%;
    height: auto;
    max-width: none;
    object-fit: contain;
  }
  body.bb-page #bb-main .bb-feature-text {
    padding: 0 4px;
    align-self: center;
  }
  body.bb-page #bb-main .bb-feature-screen {
    width: 100%;
    margin: 0;
    padding: 11px;
    align-self: center;
  }
}
@media (min-width: 601px) and (max-width: 1100px) {
  body.bb-page #bb-main .bb-feature-grid {
    padding-top: 48px;
    padding-bottom: 48px;
    row-gap: 22px;
  }
  body.bb-page #bb-main .bb-feature-text {
    padding: 8px;
  }
  body.bb-page #bb-main .bb-feature-screen {
    width: 100%;
  }
}

/* Feature numbering: place 01-05 at the upper left of each section */
@media (min-width: 1101px) {
  body.bb-page #bb-main .bb-feature-grid {
    grid-template-columns: minmax(0, 30fr) minmax(0, 30fr) minmax(0, 40fr);
    grid-template-rows: auto auto;
    column-gap: 28px;
    row-gap: 22px;
    padding-top: 44px;
    padding-bottom: 52px;
    align-items: start;
  }
  body.bb-page #bb-main .bb-feature-number {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: start;
    align-self: start;
  }
  body.bb-page #bb-main .bb-feature-illustration {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }
  body.bb-page #bb-main .bb-feature-text {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }
  body.bb-page #bb-main .bb-feature-screen {
    grid-column: 3;
    grid-row: 2;
    align-self: start;
  }
}
@media (min-width: 601px) and (max-width: 1100px) {
  body.bb-page #bb-main .bb-feature-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-rows: auto auto auto;
    row-gap: 20px;
  }
  body.bb-page #bb-main .bb-feature-number {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: start;
  }
  body.bb-page #bb-main .bb-feature-illustration {
    grid-column: 1;
    grid-row: 2;
  }
  body.bb-page #bb-main .bb-feature-text {
    grid-column: 2;
    grid-row: 2;
  }
  body.bb-page #bb-main .bb-feature-screen {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}
@media (max-width: 600px) {
  body.bb-page #bb-main .bb-feature-number {
    margin-bottom: 18px;
  }
}


/* 2026-10-22: restore full-size illustrations while keeping number above */
@media (min-width: 1101px) {
  body.bb-page #bb-main .bb-feature-grid {
    grid-template-columns: minmax(0, 31fr) minmax(0, 29fr) minmax(0, 40fr);
    grid-template-rows: auto auto;
    column-gap: 24px;
    row-gap: 14px;
    align-items: start;
  }
  body.bb-page #bb-main .bb-feature-number {
    grid-column: 1; grid-row: 1;
    justify-self: start; align-self: start;
  }
  body.bb-page #bb-main .bb-feature-illustration {
    display: block !important;
    grid-column: 1; grid-row: 2;
    width: 100%; min-width: 0;
    padding: 0 !important;
    align-self: center;
  }
  body.bb-page #bb-main .bb-feature-illustration > img {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain;
    border-radius: 0 !important;
  }
  body.bb-page #bb-main .bb-feature-text {
    grid-column: 2; grid-row: 2;
    align-self: center;
  }
  body.bb-page #bb-main .bb-feature-screen {
    grid-column: 3; grid-row: 2;
    align-self: center;
  }
}
@media (min-width: 601px) and (max-width: 1100px) {
  body.bb-page #bb-main .bb-feature-illustration {
    display: block !important; width: 100%; min-width: 0; padding: 0 !important;
  }
  body.bb-page #bb-main .bb-feature-illustration > img {
    display: block; width: 100% !important; max-width: none !important;
    height: auto !important; max-height: none !important;
  }
}

/* 2026-10-22: stable feature layout; prevent illustration column collapse */
@media (min-width: 1101px) {
  body.bb-page #bb-main .bb-feature .bb-feature-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    column-gap: 2% !important;
    row-gap: 20px !important;
    width: 100% !important;
    max-width: 1500px !important;
    padding: 44px 28px 56px !important;
  }
  body.bb-page #bb-main .bb-feature .bb-feature-number {
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }
  body.bb-page #bb-main .bb-feature .bb-feature-illustration {
    display: block !important;
    position: relative !important;
    flex: 0 0 30% !important;
    width: 30% !important;
    max-width: 30% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.bb-page #bb-main .bb-feature .bb-feature-illustration > img {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: contain !important;
    border-radius: 0 !important;
  }
  body.bb-page #bb-main .bb-feature .bb-feature-text {
    flex: 0 0 29% !important;
    width: 29% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.bb-page #bb-main .bb-feature .bb-feature-screen {
    flex: 0 0 37% !important;
    width: 37% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 11px !important;
  }
}

/* 2026-10-22: keep 01-05 at the left edge, above the full-size illustrations */
@media (min-width: 1101px) {
  body.bb-page #bb-main .bb-feature .bb-feature-number {
    align-self: flex-start !important;
    text-align: left !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }
  body.bb-page #bb-main .bb-feature .bb-feature-number .bb-shield {
    position: static !important;
    margin: 0 !important;
    flex: 0 0 auto;
  }
}


/* 2026-10-22 / Feature redesign: heading above, illustration | bullets | screenshot below.
   Scoped to Bill-BOX features; hero and benefit icons are unchanged. */
#bb-main .bb-feature .bb-feature-heading { min-width:0; }
#bb-main .bb-feature .bb-feature-heading .bb-feature-kicker {font-size:clamp(21px,2vw,29px);line-height:1.35;margin:0 0 3px;font-weight:900;color:#087dc5;}
#bb-main .bb-feature .bb-feature-heading h3 {font-size:clamp(23px,2.3vw,34px);line-height:1.35;margin:0 0 12px;color:#123a63;font-weight:800;}
#bb-main .bb-feature .bb-feature-description {font-size:15px;line-height:1.85;margin:0;max-width:820px;}
#bb-main .bb-feature .bb-feature-points {min-width:0;align-self:center;}
#bb-main .bb-feature .bb-feature-points ul {list-style:none;margin:0;padding:0;}
#bb-main .bb-feature .bb-feature-points li {position:relative;margin:14px 0;padding-left:34px;font-size:clamp(15px,1.15vw,18px);font-weight:750;line-height:1.65;}
#bb-main .bb-feature .bb-feature-points li::before {content:'✓';position:absolute;left:0;top:2px;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#0d85ce;color:#fff;font-size:15px;font-weight:900;}
#bb-main .bb-feature .bb-feature-points .bb-note {font-size:12px;color:#607b90;line-height:1.7;margin:14px 0 0;}
@media (min-width:1101px) {
  body.bb-page #bb-main .bb-feature .bb-feature-grid {
    display:grid!important;grid-template-columns:minmax(0,32fr) minmax(0,27fr) minmax(0,41fr)!important;
    grid-template-rows:auto auto!important;column-gap:30px!important;row-gap:20px!important;
    align-items:center!important;max-width:1500px!important;width:100%!important;
    padding:48px 28px 62px!important;
  }
  body.bb-page #bb-main .bb-feature .bb-feature-number {
    grid-column:1!important;grid-row:1!important;align-self:start!important;justify-self:start!important;
    width:auto!important;margin:0!important;
  }
  body.bb-page #bb-main .bb-feature .bb-feature-heading {
    grid-column:1 / 3!important;grid-row:1!important;align-self:start!important;
    margin-left:94px!important;min-height:82px;
  }
  body.bb-page #bb-main .bb-feature .bb-feature-illustration {
    grid-column:1!important;grid-row:2!important;display:block!important;
    flex:none!important;width:100%!important;max-width:none!important;min-width:0!important;
    padding:0!important;margin:0!important;align-self:center!important;
  }
  body.bb-page #bb-main .bb-feature .bb-feature-illustration > img {
    width:100%!important;max-width:100%!important;height:auto!important;max-height:none!important;
    display:block!important;object-fit:contain!important;
  }
  body.bb-page #bb-main .bb-feature .bb-feature-points {grid-column:2!important;grid-row:2!important;}
  body.bb-page #bb-main .bb-feature .bb-feature-screen {
    grid-column:3!important;grid-row:2!important;flex:none!important;
    width:100%!important;max-width:none!important;margin:0!important;align-self:center!important;
  }
}
@media (min-width:701px) and (max-width:1100px) {
  body.bb-page #bb-main .bb-feature .bb-feature-grid {
    display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    grid-template-rows:auto auto auto!important;gap:24px!important;padding:45px 24px!important;
  }
  body.bb-page #bb-main .bb-feature .bb-feature-number {grid-column:1!important;grid-row:1!important;justify-self:start!important;}
  body.bb-page #bb-main .bb-feature .bb-feature-heading {grid-column:1 / -1!important;grid-row:1!important;margin-left:80px!important;align-self:start!important;}
  body.bb-page #bb-main .bb-feature .bb-feature-illustration {grid-column:1!important;grid-row:2!important;display:block!important;padding:0!important;}
  body.bb-page #bb-main .bb-feature .bb-feature-illustration img {width:100%!important;max-width:100%!important;}
  body.bb-page #bb-main .bb-feature .bb-feature-points {grid-column:2!important;grid-row:2!important;}
  body.bb-page #bb-main .bb-feature .bb-feature-screen {grid-column:1 / -1!important;grid-row:3!important;width:100%!important;}
}
@media (max-width:700px) {
  body.bb-page #bb-main .bb-feature .bb-feature-grid {
    display:grid!important;grid-template-columns:56px minmax(0,1fr)!important;
    grid-template-rows:auto auto auto auto!important;gap:18px!important;padding:36px 18px!important;
  }
  body.bb-page #bb-main .bb-feature .bb-feature-number {grid-column:1!important;grid-row:1!important;margin:0!important;}
  body.bb-page #bb-main .bb-feature .bb-feature-heading {grid-column:2!important;grid-row:1!important;}
  body.bb-page #bb-main .bb-feature .bb-feature-heading .bb-feature-kicker {font-size:19px;}
  body.bb-page #bb-main .bb-feature .bb-feature-heading h3 {font-size:22px;}
  body.bb-page #bb-main .bb-feature .bb-feature-description {font-size:13px;}
  body.bb-page #bb-main .bb-feature .bb-feature-illustration {grid-column:1 / -1!important;grid-row:2!important;display:block!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;}
  body.bb-page #bb-main .bb-feature .bb-feature-illustration img {width:100%!important;max-width:100%!important;}
  body.bb-page #bb-main .bb-feature .bb-feature-points {grid-column:1 / -1!important;grid-row:3!important;}
  body.bb-page #bb-main .bb-feature .bb-feature-screen {grid-column:1 / -1!important;grid-row:4!important;width:100%!important;}
}

/* 2026-10-22: larger illustrations, smaller interface screenshots (desktop only). */
@media (min-width: 1101px) {
  body.bb-page #bb-main .bb-feature .bb-feature-grid {
    grid-template-columns: minmax(0, 42fr) minmax(0, 30fr) minmax(0, 28fr) !important;
    column-gap: 24px !important;
  }
  body.bb-page #bb-main .bb-feature .bb-feature-illustration > img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  body.bb-page #bb-main .bb-feature .bb-feature-screen {
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* ============================================================
   2026-10-23: Final readability / rhythm refinement
   Keeps existing illustrations, system screenshots, header and hero.
   ============================================================ */
body.bb-page #bb-main .bb-intro{
  max-width:none; width:100%; background:linear-gradient(135deg,#f1faff 0%,#fff 72%);
  text-align:center; padding:68px 0 62px; position:relative;
}
body.bb-page #bb-main .bb-intro .bb-wrap{max-width:1120px;margin:0 auto;}
body.bb-page #bb-main .bb-intro .bb-eyebrow{font-size:14px;letter-spacing:.14em;margin:0 0 14px;}
body.bb-page #bb-main .bb-intro h2{font-size:clamp(29px,3.3vw,46px);line-height:1.45;margin:0 auto 16px;color:#123a63;font-weight:900;}
body.bb-page #bb-main .bb-intro h2 span{color:#0984d0;}
body.bb-page #bb-main .bb-intro-subtitle{font-size:22px!important;font-weight:800;color:#166ca7!important;margin:0 0 14px!important;}
body.bb-page #bb-main .bb-intro-desc{font-size:16px!important;line-height:1.9;color:#47677e!important;margin:0 auto 28px!important;}
body.bb-page #bb-main .bb-process{display:flex;align-items:stretch;justify-content:center;gap:0;max-width:980px;margin:28px auto 0;}
body.bb-page #bb-main .bb-process span{flex:1;min-width:0;background:#fff;border:1px solid #cce7f8;padding:14px 10px;color:#126ba9;font-size:15px;font-weight:800;position:relative;box-shadow:0 5px 18px #1b7cbd0d;}
body.bb-page #bb-main .bb-process span:first-child{border-radius:13px 0 0 13px;}
body.bb-page #bb-main .bb-process span:last-child{border-radius:0 13px 13px 0;}
body.bb-page #bb-main .bb-process span+span{border-left:0;}
body.bb-page #bb-main .bb-process span:not(:last-child)::after{content:'›';position:absolute;right:-9px;top:50%;transform:translateY(-50%);color:#1388ce;font-size:28px;z-index:1;}
/* Larger description and less dead space; desktop screenshot grows to 40%. */
body.bb-page #bb-main .bb-feature .bb-feature-description{font-size:17px!important;line-height:1.85!important;max-width:1020px!important;color:#254963!important;}
body.bb-page #bb-main .bb-feature .bb-feature-heading h3{margin-bottom:14px!important;}
body.bb-page #bb-main .bb-feature .bb-feature-points li{font-size:clamp(16px,1.13vw,18px)!important;line-height:1.65!important;margin:12px 0!important;}
body.bb-page #bb-main .bb-feature .bb-feature-screen{padding:12px!important;box-shadow:0 12px 26px #0b5d9619;}
body.bb-page #bb-main .bb-feature .bb-feature-screen figcaption{font-size:12px!important;line-height:1.6;}
@media(min-width:1101px){
 body.bb-page #bb-main .bb-feature .bb-wrap{max-width:1580px!important;padding-left:28px!important;padding-right:28px!important;}
 body.bb-page #bb-main .bb-feature .bb-feature-grid{
   grid-template-columns:minmax(0,32fr) minmax(0,24fr) minmax(0,44fr)!important;
   column-gap:24px!important;row-gap:16px!important;
   padding:40px 20px 42px!important;align-items:center!important;
 }
 body.bb-page #bb-main .bb-feature .bb-feature-heading{grid-column:1 / -1!important;grid-row:1!important;margin-left:94px!important;min-height:0!important;max-width:1080px;}
 body.bb-page #bb-main .bb-feature .bb-feature-number{grid-column:1!important;grid-row:1!important;align-self:start!important;}
 body.bb-page #bb-main .bb-feature .bb-feature-illustration{grid-column:1!important;grid-row:2!important;align-self:center!important;}
 body.bb-page #bb-main .bb-feature .bb-feature-points{grid-column:2!important;grid-row:2!important;align-self:center!important;}
 body.bb-page #bb-main .bb-feature .bb-feature-screen{grid-column:3!important;grid-row:2!important;align-self:center!important;}
 body.bb-page #bb-main .bb-feature .bb-feature-illustration>img{width:100%!important;height:auto!important;}
}
@media(min-width:701px) and (max-width:1100px){
 body.bb-page #bb-main .bb-feature .bb-feature-grid{padding:38px 22px!important;row-gap:16px!important;}
 body.bb-page #bb-main .bb-feature .bb-feature-heading{margin-left:78px!important;}
 body.bb-page #bb-main .bb-feature .bb-feature-screen{max-width:850px!important;justify-self:center!important;}
}
/* Rebuilt closing section: full-width blue band and prominent problem cards */
body.bb-page #bb-main .bb-problems{width:100%;max-width:none;margin:0;padding:70px 0 76px;background:linear-gradient(135deg,#e5f5ff,#f3faff);border-radius:0;text-align:center;}
body.bb-page #bb-main .bb-problems .bb-wrap{max-width:1340px;}
body.bb-page #bb-main .bb-problems .bb-eyebrow{font-size:15px;letter-spacing:.06em;margin:0 0 8px;}
body.bb-page #bb-main .bb-problems h2{font-size:clamp(28px,3vw,40px);font-weight:900;line-height:1.5;color:#123a63;margin:0 0 12px;}
body.bb-page #bb-main .bb-problems h2 span{color:#0b83ca;}
body.bb-page #bb-main .bb-problems-lead{font-size:17px;color:#45677f;line-height:1.85;margin:0 0 32px;}
body.bb-page #bb-main .bb-problem-grid{gap:16px;}
body.bb-page #bb-main .bb-problem-grid>div{padding:26px 18px 24px;min-height:206px;box-shadow:0 8px 22px #0b5d9610;border:1px solid #d9eefa;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;}
body.bb-page #bb-main .bb-problem-icon{font-size:34px;line-height:1.3;margin-bottom:12px;}
body.bb-page #bb-main .bb-problem-grid strong{font-size:16px;line-height:1.55;color:#153b62;}
body.bb-page #bb-main .bb-problem-grid p{font-size:13px;line-height:1.7;color:#58748c;margin:10px 0 0;}
body.bb-page #bb-main .bb-problems-solution{display:flex;align-items:center;justify-content:center;gap:14px;margin:28px auto 0;padding:22px 24px;border-radius:16px;background:#fff;border:2px solid #b4dff6;color:#0d619f;font-size:clamp(16px,1.6vw,21px);line-height:1.6;}
body.bb-page #bb-main .bb-problems-solution span{display:flex;flex:0 0 34px;align-items:center;justify-content:center;background:#0b8bd1;color:#fff;border-radius:50%;width:34px;height:34px;font-weight:900;}
@media(max-width:700px){
 body.bb-page #bb-main .bb-intro{padding:44px 0 40px;}
 body.bb-page #bb-main .bb-intro h2{font-size:clamp(25px,6vw,34px);}
 body.bb-page #bb-main .bb-intro-subtitle{font-size:18px!important;}
 body.bb-page #bb-main .bb-intro-desc{font-size:15px!important;}
 body.bb-page #bb-main .bb-intro-desc br{display:none;}
 body.bb-page #bb-main .bb-process{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
 body.bb-page #bb-main .bb-process span{border:1px solid #cce7f8!important;border-radius:10px!important;font-size:13px;padding:12px 7px;}
 body.bb-page #bb-main .bb-process span::after{display:none;}
 body.bb-page #bb-main .bb-feature .bb-feature-grid{padding:32px 18px!important;gap:15px!important;}
 body.bb-page #bb-main .bb-feature .bb-feature-description{font-size:15px!important;line-height:1.8!important;}
 body.bb-page #bb-main .bb-feature .bb-feature-points li{font-size:15px!important;}
 body.bb-page #bb-main .bb-feature .bb-feature-screen{padding:9px!important;}
 body.bb-page #bb-main .bb-problems{padding:48px 0 52px;}
 body.bb-page #bb-main .bb-problems-lead{font-size:15px;}
 body.bb-page #bb-main .bb-problem-grid{grid-template-columns:1fr 1fr;gap:10px;}
 body.bb-page #bb-main .bb-problem-grid>div{padding:18px 10px;min-height:200px;}
 body.bb-page #bb-main .bb-problem-grid strong{font-size:14px;}
 body.bb-page #bb-main .bb-problem-grid p{font-size:12px;}
 body.bb-page #bb-main .bb-problems-solution{font-size:15px;align-items:flex-start;text-align:left;padding:16px;}
}
@media(max-width:390px){body.bb-page #bb-main .bb-problem-grid{grid-template-columns:1fr;}}

/* 2026-10-23: requested logo tag, compact intro, readability and footer spacing */
body.bb-page #bb-main .bb-brand-tag{display:flex;align-items:center;justify-content:center;background:#087dc3;color:#fff;font-weight:800;letter-spacing:.19em;font-size:17px;line-height:1.3;height:34px;width:min(100%,390px);margin:0 0 20px;border-radius:0;}
body.bb-page #bb-main .bb-brand{margin-bottom:0!important;}
body.bb-page #bb-main .bb-intro{padding:58px 0 48px!important;}
body.bb-page #bb-main .bb-intro .bb-wrap{max-width:1220px!important;text-align:center;}
body.bb-page #bb-main .bb-intro h2{font-size:clamp(34px,4vw,55px)!important;line-height:1.35!important;margin:8px 0 18px!important;}
body.bb-page #bb-main .bb-intro-desc{font-size:17px!important;max-width:820px;margin:0 auto!important;line-height:1.9!important;}
body.bb-page #bb-main .bb-feature .bb-feature-heading{max-width:850px!important;}
body.bb-page #bb-main .bb-feature .bb-feature-description{max-width:740px!important;font-size:17px!important;line-height:1.85!important;text-wrap:pretty;}
body.bb-page #bb-main .bb-problem-icon{width:52px;height:52px;display:flex;align-items:center;justify-content:center;color:#087dc3;margin-bottom:14px;}
body.bb-page #bb-main .bb-problem-icon svg{width:44px;height:44px;display:block;}
body.bb-page #bb-main .bb-problem-grid strong{font-size:19px!important;line-height:1.55!important;font-weight:800!important;}
body.bb-page #bb-main .bb-problem-grid p{font-size:16px!important;line-height:1.75!important;margin-top:12px!important;}
body.bb-page #bb-main .bb-problem-grid>div{min-height:230px;justify-content:flex-start;}
body.bb-page #bb-main .bb-problems{padding-bottom:48px!important;}
body.bb-page #bb-main .bb-cta{margin-top:0!important;}
@media(max-width:700px){body.bb-page #bb-main .bb-brand-tag{width:min(100%,320px);font-size:14px;height:30px;}body.bb-page #bb-main .bb-intro{padding:42px 0 35px!important;}body.bb-page #bb-main .bb-intro h2{font-size:clamp(27px,6vw,35px)!important;}body.bb-page #bb-main .bb-intro-desc{font-size:15px!important;}body.bb-page #bb-main .bb-feature .bb-feature-description{font-size:15px!important;}body.bb-page #bb-main .bb-problem-grid strong{font-size:16px!important;}body.bb-page #bb-main .bb-problem-grid p{font-size:14px!important;}body.bb-page #bb-main .bb-problems{padding-bottom:35px!important;}}

/* 2026-10-23: Simplified features introduction. */
body.bb-page #bb-main .bb-intro{padding:72px 0 70px!important;background:linear-gradient(135deg,#f1faff 0%,#fff 78%)!important;}
body.bb-page #bb-main .bb-intro .bb-wrap{max-width:1100px!important;}
body.bb-page #bb-main .bb-intro .bb-eyebrow,
body.bb-page #bb-main .bb-intro .bb-intro-subtitle,
body.bb-page #bb-main .bb-intro .bb-process{display:none!important;}
body.bb-page #bb-main .bb-intro h2{font-size:clamp(38px,4.3vw,62px)!important;line-height:1.35!important;margin:0 auto 22px!important;letter-spacing:-.025em!important;}
body.bb-page #bb-main .bb-intro .bb-intro-desc{font-size:clamp(17px,1.45vw,21px)!important;max-width:960px!important;line-height:1.85!important;margin:0 auto!important;}
@media(max-width:700px){body.bb-page #bb-main .bb-intro{padding:48px 0 46px!important;}body.bb-page #bb-main .bb-intro h2{font-size:clamp(29px,7vw,39px)!important;}body.bb-page #bb-main .bb-intro .bb-intro-desc{font-size:16px!important;}}

/* BB-INTRO-REVISION-20261023-B */
body.bb-page #bb-main .bb-intro--heading-only h2{font-size:clamp(36px,4.2vw,60px)!important;line-height:1.35!important;text-align:center!important;max-width:1100px!important;}
body.bb-page #bb-main .bb-intro--heading-only .bb-intro-desc{text-align:center!important;max-width:850px!important;}
@media(max-width:700px){body.bb-page #bb-main .bb-intro--heading-only h2{font-size:clamp(28px,7vw,38px)!important;}}

/* 2026-10-23: Match BALENA Sales section heading scale. */
body.bb-page #bb-main .bb-intro.bb-intro--heading-only{padding:58px 0 52px!important;}
body.bb-page #bb-main .bb-intro.bb-intro--heading-only h2{font-size:clamp(30px,3vw,40px)!important;line-height:1.45!important;margin:0 auto 20px!important;letter-spacing:-.02em!important;}
body.bb-page #bb-main .bb-intro.bb-intro--heading-only .bb-intro-desc{font-size:17px!important;line-height:1.85!important;max-width:850px!important;}
@media(max-width:700px){body.bb-page #bb-main .bb-intro.bb-intro--heading-only{padding:42px 0 38px!important;}body.bb-page #bb-main .bb-intro.bb-intro--heading-only h2{font-size:clamp(26px,6vw,32px)!important;}body.bb-page #bb-main .bb-intro.bb-intro--heading-only .bb-intro-desc{font-size:15px!important;}}


/* 2026-10-23: Feature 01-05 vertical alignment refinement.
   Reduce empty space above/below the illustrations and lift screenshots.
   Desktop only; hero, intro, and mobile layouts remain unchanged. */
@media (min-width: 1101px) {
  body.bb-page #bb-main .bb-feature .bb-feature-grid {
    row-gap: 4px !important;
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
  body.bb-page #bb-main .bb-feature .bb-feature-heading {
    align-self: start !important;
  }
  body.bb-page #bb-main .bb-feature .bb-feature-illustration,
  body.bb-page #bb-main .bb-feature .bb-feature-points {
    align-self: start !important;
  }
  body.bb-page #bb-main .bb-feature .bb-feature-screen {
    align-self: start !important;
    transform: translateY(-105px);
    position: relative;
    z-index: 1;
  }
}

/* 2026-10-23: Remove blank space below feature screenshots.
   translateY alone moves the screenshot visually but reserves its old grid height. */
@media (min-width: 1101px) {
  body.bb-page #bb-main .bb-feature .bb-feature-grid {
    padding-bottom: 20px !important;
  }
  body.bb-page #bb-main .bb-feature .bb-feature-screen {
    margin-bottom: -105px !important;
  }
}

/* 2026-10-23: BALENA Cloud standard-feature notice. No changes to feature sections. */
body.bb-page #bb-main .bb-standard-badge{display:inline-flex;align-items:center;gap:9px;margin:0 0 17px;padding:7px 15px;border:1px solid #8bc8ed;border-radius:999px;background:#e8f6ff;color:#086eaf;font-size:14px;font-weight:800;line-height:1.5;letter-spacing:.02em;}
body.bb-page #bb-main .bb-standard-badge-icon{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;background:#0b85c9;color:#fff;font-size:12px;line-height:1;flex-shrink:0;}
body.bb-page #bb-main .bb-cta .bb-standard-cta-note{display:inline-block;max-width:850px;margin:0 auto 15px;padding:10px 20px;border:1px solid rgba(255,255,255,.6);border-radius:999px;background:rgba(255,255,255,.13);color:#fff;font-size:16px;font-weight:800;line-height:1.7;}
@media(max-width:600px){body.bb-page #bb-main .bb-standard-badge{font-size:12px;padding:6px 12px;margin-bottom:15px;}body.bb-page #bb-main .bb-cta .bb-standard-cta-note{font-size:14px;border-radius:14px;padding:10px 14px;}}