.db-rbar{position:relative;overflow:hidden;isolation:isolate;padding:0;background:#0B1220;font-family:Inter,system-ui,sans-serif}
.db-rbar__bg,.db-rbar__panel{position:absolute;top:0;bottom:0;z-index:-1;pointer-events:none}
.db-rbar__bg{left:0;right:0}
.db-rbar__bg img,.db-rbar__panel img{display:block;width:100%;height:100%;object-fit:cover;object-position:left center}
.db-rbar__panel{right:0;width:52.8%;overflow:hidden;border-left:4px solid #6CC4E6;
  border-radius:400px 0 0 400px / 50% 0 0 50%;box-shadow:-10px 0 34px rgba(108,196,230,.45);background:#D6EFFA}
.db-rbar__inner{position:relative;max-width:1440px;margin:0 auto;padding:44px 0 56px;box-sizing:border-box}

/* Title + See-all link: same bubble as the Gallery title */
.db-rbar__title,.db-rbar__pill{border:3px solid transparent;border-radius:999px;
  background:linear-gradient(#0E1628,#0E1628) padding-box,linear-gradient(90deg,#D85A1C,#67C9E8) border-box;
  box-shadow:0 10px 26px rgba(0,0,0,.5);color:#fff;font-family:Barlow,sans-serif;font-weight:800;line-height:1}
.db-rbar__title{display:table;margin:0 auto;padding:14px 50px 16px;font-size:clamp(26px,2.8vw,40px);white-space:nowrap;text-align:center}
.db-rbar__pill{display:inline-flex;align-items:center;margin-top:20px;padding:12px 32px 14px;font-size:22px;white-space:nowrap;text-decoration:none}
.db-rbar__pill:hover{color:#fff;filter:brightness(1.12)}

/* styles.css (loaded site-wide) has a leftover ".reviews-wheel h2{font-size:42px;
   margin:0 0 32px}" rule from the old wheel design (0,1,1 specificity). This section
   keeps the reviews-wheel class, so that rule still matches our h2 and beats
   .db-rbar__title (0,1,0) on font-size and margin -- locking the title at a flat 42px
   and flush-left instead of the responsive, centered bubble. Scoping through the
   .db-rbar ancestor (0,2,0) wins on specificity alone, no !important needed. */
.db-rbar .db-rbar__title{font-size:clamp(26px,2.8vw,40px);margin:0 auto}

.db-rbar__cols{display:grid;grid-template-columns:48.6% 51.4%;min-height:690px}
.db-rbar__reviews{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 40px 20px 70px;box-sizing:border-box;min-width:0}
.db-rbar__brands{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 60px 20px 10.4%;box-sizing:border-box;min-width:0}

/* Review cards */
.db-rbar__viewport{width:580px;max-width:100%;overflow:hidden;padding:6px 0 14px}
.db-rbar__track{display:flex;gap:20px;transition:transform .7s ease;will-change:transform}
.db-rbar__card{flex:0 0 480px;display:flex;flex-direction:column;box-sizing:border-box;min-height:268px;border-radius:18px;
  overflow:hidden;background:#fff;text-decoration:none;box-shadow:0 14px 30px rgba(0,0,0,.45)}
.db-rbar__card:focus-visible{outline:3px solid #67C9E8;outline-offset:3px}
.db-rbar__head{display:flex;align-items:center;gap:14px;padding:16px 20px;background:linear-gradient(135deg,#5DB6DC,#3192BF)}
.db-rbar__avatar{width:50px;height:50px;flex-shrink:0;border-radius:50%;border:2px solid #fff;box-sizing:border-box;
  background:#10182A;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;object-fit:cover}
.db-rbar__who{display:flex;flex-direction:column;gap:2px}
.db-rbar__name{color:#fff;font-size:17px;font-weight:800}
.db-rbar__stars{color:#FFE08A;font-size:15px;letter-spacing:1px}
.db-rbar__meta{color:#EAF6FB;font-size:12.5px;font-weight:500}
.db-rbar__text{display:block;flex-grow:1;padding:18px 22px 10px;color:#0F172A;font-size:15px;line-height:1.6}
.db-rbar__read{padding:0 22px 16px;color:#3192BF;font-size:13px;font-weight:700}
.db-rbar__controls{display:flex;align-items:center;gap:16px;margin-top:10px}
.db-rbar__arrow{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:transparent;
  color:#fff;font-size:22px;line-height:1;cursor:pointer}
.db-rbar__arrow:hover{background:rgba(255,255,255,.1)}
.db-rbar__dots{display:flex;gap:8px;align-items:center}
.db-rbar__dots button{width:8px;height:8px;padding:0;border:0;border-radius:4px;background:rgba(255,255,255,.4);cursor:pointer;transition:width .3s ease,background .3s ease}
.db-rbar__dots button[aria-current="true"]{width:24px;background:#5DB6DC}

/* Brands side */
.db-rbar__brands h3{margin:0 0 26px;font:800 34px/1.15 Barlow,sans-serif;color:#0F172A;text-align:center}
.db-rbar__collage{position:relative;width:520px;max-width:100%;height:300px}
.db-rbar__tile{position:absolute;box-sizing:border-box;border-radius:18px;background:#fff;
  box-shadow:0 12px 26px rgba(16,24,42,.18);display:flex;align-items:center;justify-content:center}
.db-rbar__tile img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.db-rbar__tile.t1{left:0;top:6px;width:270px;height:124px;padding:14px 20px;transform:rotate(-4deg)}
.db-rbar__tile.t2{left:292px;top:0;width:220px;height:124px;padding:12px 22px;transform:rotate(3deg)}
.db-rbar__tile.t3{left:14px;top:160px;width:248px;height:118px;padding:18px 22px;transform:rotate(3deg)}
.db-rbar__tile.t4{left:282px;top:164px;width:236px;height:118px;padding:20px 26px;transform:rotate(-3deg)}
.db-rbar__badge{position:absolute;left:238px;top:107px;width:76px;height:76px;border-radius:50%;background:#fff;
  border:3px solid #4CC25A;box-sizing:border-box;box-shadow:0 8px 18px rgba(16,24,42,.25);display:flex;align-items:center;justify-content:center}
.db-rbar__badge svg{width:44px;height:44px}
@keyframes dbGreenGlow{0%{box-shadow:0 0 0 0 rgba(76,194,90,.7),0 14px 28px rgba(47,101,49,.45)}
  70%{box-shadow:0 0 0 16px rgba(76,194,90,0),0 14px 28px rgba(47,101,49,.45)}
  100%{box-shadow:0 0 0 0 rgba(76,194,90,0),0 14px 28px rgba(47,101,49,.45)}}
.db-rbar__any{margin:34px 0 0;display:inline-flex;align-items:center;gap:10px;padding:14px 30px 14px 20px;
  border:3px solid #fff;border-radius:999px;background:linear-gradient(135deg,#52A954,#3B7A3D 55%,#2F6531);
  color:#fff;font:800 24px/1 Barlow,sans-serif;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.3);
  animation:dbGreenGlow 1.8s ease-out infinite}
.db-rbar__any svg{width:30px;height:30px;flex-shrink:0}

/* Laptop widths: shrink the right side slightly */
@media (max-width:1399px){
  .db-rbar__brands{padding-right:30px}
  .db-rbar__brands h3{font-size:28px}
  .db-rbar__collage{transform:scale(.86);transform-origin:top center;height:260px;margin-bottom:-4px}
  .db-rbar__any{font-size:20px}
  /* Below ~1420px the reviews column is narrower than the fixed 580px viewport, so
     .db-rbar__viewport shrinks (via its own max-width:100%) but the 480px card does
     not -- the "next card peeking" gap shrinks toward zero and goes negative (card
     clipped by the viewport) right above the 1180px stacking breakpoint. Scaling the
     card to 86% of whatever the viewport actually resolves to keeps a steady peek
     at every width in this range; min() leaves the literal 480px untouched above
     ~1399px, where it already equals the 580px/480px spec values unmodified. */
  .db-rbar__card{flex-basis:min(480px, 86%)}
}

/* Tablet/phone: stack. Light-blue panel becomes a rounded block under the reviews. */
@media (max-width:1180px){
  .db-rbar__panel{display:none}
  .db-rbar__cols{grid-template-columns:1fr;min-height:0;gap:30px;margin-top:30px}
  .db-rbar__reviews{padding:0 16px}
  .db-rbar__brands{margin:0 16px;padding:34px 20px 36px;border-radius:28px;border-top:4px solid #6CC4E6;
    background:#D6EFFA url('/Images/redesign/review-ribbons-panel.svg') center / cover no-repeat;
    box-shadow:0 -8px 26px rgba(108,196,230,.35)}
  .db-rbar__collage{transform:none;height:auto;width:100%;max-width:520px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .db-rbar__tile{position:static;width:auto!important;height:96px!important}
  .db-rbar__badge{display:none}
}
@media (max-width:900px){
  .db-rbar__title{white-space:normal;max-width:calc(100% - 32px);box-sizing:border-box;padding:12px 24px 14px;border-radius:28px;line-height:1.15}
}
@media (max-width:700px){
  .db-rbar__viewport{width:100%}
  .db-rbar__card{flex-basis:calc(100% - 40px);min-height:250px}
  .db-rbar__pill{font-size:18px;padding:11px 22px 13px}
  .db-rbar__brands h3{font-size:24px}
  .db-rbar__any{white-space:normal;font-size:18px;text-align:left;padding:12px 20px 12px 14px}
}
@media (prefers-reduced-motion:reduce){.db-rbar__track{transition:none}.db-rbar__any{animation:none}}

/* dark-theme.css (loaded site-wide, after this file is NOT guaranteed) carries
   !important rules that would otherwise win here. Three real conflicts:
   - [class*="card"] matches .db-rbar__card and repaints it navy instead of white.
   - h1,h2,h3,h4{color:#FFFFFF!important} would make .db-rbar__brands h3 unreadable
     on its light-blue panel.
   - p,li,...{color:var(--db-muted)!important} would mute .db-rbar__any's white
     text on its green bubble. */
.db-rbar__card{background:#fff!important;border-color:transparent!important;box-shadow:0 14px 30px rgba(0,0,0,.45)!important}
.db-rbar__brands h3{color:#0F172A!important}
.db-rbar__any{color:#fff!important}