/* Bottle Refreshr: a little more atmosphere without changing the site structure. */
.hero { position:relative; isolation:isolate; }
.hero::before { content:""; position:absolute; z-index:-1; inset:10% -10% auto -10%; height:92%; pointer-events:none; background:radial-gradient(ellipse at 77% 43%,rgba(64,206,168,.10),transparent 35%),radial-gradient(ellipse at 8% 75%,rgba(79,145,178,.09),transparent 30%); }
.hero-flow-lines { position:absolute; z-index:-1; top:8%; left:-12%; width:124%; height:90%; fill:none; stroke:#72c5b4; stroke-width:1; opacity:.19; pointer-events:none; }
.hero-flow-lines path:nth-child(2) { opacity:.7; }
.hero-flow-lines path:nth-child(3) { opacity:.4; }
.hero-visual { isolation:isolate; }
.hero-visual::before { content:""; position:absolute; z-index:-1; inset:-5% -9% 10% -11%; border:1px solid rgba(104,211,178,.23); border-radius:48% 52% 51% 49% / 47% 48% 52% 53%; background:radial-gradient(ellipse at 50% 42%,rgba(81,194,173,.17),transparent 61%); box-shadow:0 0 0 34px rgba(83,205,171,.035),0 0 0 76px rgba(83,205,171,.018); transform:rotate(9deg); pointer-events:none; }
.hero-visual-note { position:absolute; z-index:7; top:-14px; right:20px; padding:10px 14px; background:#8bddaf; color:#0c2830; font-family:var(--font-body); font-size:10px; font-weight:800; letter-spacing:.16em; line-height:1.4; text-transform:uppercase; transform:rotate(3deg); box-shadow:0 10px 24px rgba(0,0,0,.24); pointer-events:none; }
.before-after-slider { box-shadow:0 24px 45px rgba(0,0,0,.35),0 58px 100px rgba(0,0,0,.24); }
.compat-chips { position:relative; z-index:2; }

/* An editorial pause connects the cleaning demonstration to real life. */
.daybreak { padding:78px 0 12px; background:linear-gradient(180deg,var(--navy),#0b2031); }
.daybreak-frame { position:relative; min-height:570px; overflow:hidden; isolation:isolate; border:1px solid rgba(140,211,190,.23); box-shadow:0 25px 55px rgba(0,0,0,.28),18px 18px 0 rgba(88,164,148,.09); }
.daybreak-frame>img { position:absolute; z-index:-3; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 53%; }
.daybreak-frame::before { content:""; position:absolute; z-index:-2; inset:0; background:linear-gradient(90deg,rgba(7,23,37,.88) 0%,rgba(8,25,40,.69) 33%,rgba(8,25,40,.19) 69%,rgba(8,25,40,.08)),linear-gradient(0deg,rgba(7,23,37,.44),transparent 48%); }
.daybreak-frame::after { content:""; position:absolute; z-index:-1; width:75%; height:125%; left:-19%; top:3%; border:1px solid rgba(183,240,214,.33); border-radius:50%; transform:rotate(-18deg); pointer-events:none; }
.daybreak-topline { display:flex; justify-content:space-between; gap:16px; margin:28px 32px 0; padding-bottom:15px; border-bottom:1px solid rgba(223,245,236,.45); color:#e3f5ed; font-size:10px; font-weight:800; letter-spacing:.19em; text-transform:uppercase; }
.daybreak-copy { position:relative; max-width:640px; padding:95px 56px 74px; }
.daybreak-kicker { display:block; margin-bottom:22px; color:#9ce7c0; font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
.daybreak h2 { max-width:600px; margin:0 0 24px; color:#f8fbf9; font-family:Georgia,'Times New Roman',serif; font-size:clamp(3.15rem,6vw,6rem); font-weight:400; letter-spacing:-.065em; line-height:.99; text-wrap:balance; }
.daybreak h2 em { color:#95e0b5; font-weight:400; }
.daybreak p { max-width:410px; color:#d0e3e5; font-size:16px; line-height:1.7; }
.daybreak a { display:inline-flex; align-items:center; gap:26px; margin-top:31px; padding:0 0 8px; border-bottom:1px solid #9ce7c0; color:#d9f5e5; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; transition:gap .2s ease,color .2s ease; }
.daybreak a:hover { gap:34px; color:#fff; }
.daybreak-caption { position:absolute; right:30px; bottom:24px; color:#e0eeed; font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; text-shadow:0 2px 7px #071725; }

/* Keep the familiar four-step grid, but let its real photographs carry more of the story. */
.how-section { position:relative; isolation:isolate; overflow:hidden; }
.how-section::before { content:""; position:absolute; z-index:-1; width:68vw; height:35vw; min-width:600px; min-height:310px; top:10%; right:-20%; border:1px solid rgba(93,201,168,.18); border-radius:50%; transform:rotate(-13deg); box-shadow:0 0 0 35px rgba(93,201,168,.035),0 0 0 76px rgba(93,201,168,.021); pointer-events:none; }
.how-section .section-title { max-width:750px; margin-inline:auto; }
.steps-grid { gap:14px; overflow:visible; background:transparent; border-radius:0; margin-bottom:20px; }
.step-card { border:1px solid rgba(119,188,176,.21); border-radius:18px; padding:22px 22px 28px; background:linear-gradient(150deg,#112b3d,#0d2235 74%); box-shadow:0 18px 35px rgba(0,0,0,.17); }
.step-card:nth-child(even) { transform:translateY(19px); }
.step-card:hover { background:#143347; }
.step-img { width:100%; height:auto; aspect-ratio:1; object-fit:cover; border:7px solid #173a49; box-shadow:0 17px 28px rgba(0,0,0,.29),0 0 0 1px rgba(141,218,191,.28); }
.step-num { margin-top:-4px; font-size:52px; }
.how-footer { padding-top:16px; }

/* Give the existing product image a more deliberate stage. */
.ebay-band { position:relative; isolation:isolate; overflow:hidden; }
.ebay-band::before { content:""; position:absolute; z-index:-1; width:640px; height:440px; left:-130px; top:-150px; border:1px solid rgba(121,215,174,.18); border-radius:50%; transform:rotate(23deg); box-shadow:0 0 0 44px rgba(121,215,174,.025),0 0 0 98px rgba(121,215,174,.016); }
.ebay-band-jar { position:relative; }
.ebay-band-jar::before { content:""; position:absolute; z-index:-1; left:16%; right:16%; top:15%; bottom:12%; border-radius:50%; background:rgba(59,173,152,.19); filter:blur(30px); }
.ebay-band-jar img { filter:drop-shadow(0 25px 28px rgba(0,0,0,.37)); }

@media (max-width:900px) {
  .daybreak { padding-top:58px; }
  .daybreak-frame { min-height:600px; }
  .daybreak-frame>img { object-position:64% center; }
  .daybreak-frame::before { background:linear-gradient(90deg,rgba(7,23,37,.85),rgba(7,23,37,.49) 65%,rgba(7,23,37,.2)),linear-gradient(0deg,rgba(7,23,37,.7),transparent 76%); }
  .daybreak-copy { padding:115px 40px 75px; }
}
@media (max-width:600px) {
  .hero-flow-lines { top:29%; height:64%; opacity:.13; }
  .hero-visual::before { inset:-3% -6% 13%; box-shadow:0 0 0 22px rgba(83,205,171,.027); }
  .hero-visual-note { top:-12px; right:12px; padding:8px 10px; font-size:8px; }
  .daybreak { padding:42px 0 0; }
  .daybreak-frame { min-height:600px; box-shadow:8px 9px 0 rgba(88,164,148,.08); }
  .daybreak-frame>img { object-position:66% center; }
  .daybreak-frame::before { background:linear-gradient(0deg,rgba(7,23,37,.95) 0%,rgba(7,23,37,.71) 44%,rgba(7,23,37,.17) 100%); }
  .daybreak-frame::after { width:125%; height:70%; top:auto; bottom:-28%; left:-40%; }
  .daybreak-topline { margin:20px 18px 0; font-size:8px; letter-spacing:.12em; }
  .daybreak-topline span:last-child { display:none; }
  .daybreak-copy { position:absolute; bottom:42px; padding:0 23px; }
  .daybreak-kicker { margin-bottom:13px; font-size:9px; }
  .daybreak h2 { margin-bottom:18px; font-size:clamp(2.8rem,12vw,4.4rem); }
  .daybreak p { font-size:14px; }
  .daybreak a { margin-top:18px; font-size:10px; }
  .daybreak-caption { right:18px; bottom:16px; font-size:8px; }
  .steps-grid { gap:14px; }
  .step-card:nth-child(even) { transform:none; }
  .step-img { max-width:330px; margin-inline:auto; }
  .how-footer { padding-top:0; }
}
@media (prefers-reduced-motion:reduce) {
  .daybreak a,.hero-visual-note { transition:none; }
}