/* ═══════════════════════════════════════════════════════════════════════════
   The redesigned site's shared look (2026-11-01, approved page by page in the
   Design chat): tokens, topbar, the floating glass header pill, buttons, section
   labels, scribbles, the product band, guarantee, social, FAQ, signup, footer.
   Every redesigned page has <body class="rg2 …"> and loads this after
   css/shared.css; page-only styles live in css/index.css, css/product.css, …
   ═══════════════════════════════════════════════════════════════════════════ */

.rg2 {
  --navy-0: #04060e;
  --gold: #F6B11E;
  --gold-hover: #E09E12;
  --ink: #f6b11e;                                    /* scribble pen */
  --on-gold: #1b2340;
  --ice: #dbe6ff;
  --txt: #f2f5ff;
  --muted: rgba(226,232,255,.72);
  --faint: rgba(226,232,255,.46);
  --hair: rgba(255,255,255,.12);
  --glass: rgba(255,255,255,.045);
  --pad: clamp(22px, 8vw, 116px);                    /* 116px at 1440, as the mockup */
  --join: 60px;                                      /* slanted section joins */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  font-family: 'Onest', 'Segoe UI', system-ui, sans-serif;
  background: var(--navy-0);
  -webkit-font-smoothing: antialiased;
}
.rg2 h1, .rg2 h2, .rg2 h3 { font-family: inherit; }
.rg2 a { text-decoration: none; }

/* ── Section labels ─────────────────────────────────────────────────────── */
.rg2 .kicker {
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-text); margin-bottom: 18px;
}
.rg2 [data-tone="dark"] .kicker { color: var(--gold); }

/* ── Buttons: gold pill (every .btn-pink on a redesigned page) + glass pill  */
.rg2 .btn-pink, .rg2 .btn-glass {
  display: inline-flex; align-items: center; justify-content: center;
  height: 56px; padding: 0 34px; border-radius: 999px;
  font-size: 16px; font-weight: 600; letter-spacing: .01em; text-transform: none;
  white-space: nowrap; cursor: pointer;
  transition: background .2s, transform .15s, box-shadow .2s, border-color .2s;
}
.rg2 .btn-pink { background: var(--gold); color: var(--on-gold); border: 0; box-shadow: 0 10px 36px rgba(246,177,30,.26); }
.rg2 .btn-pink:hover { background: var(--gold-hover); transform: translateY(-2px); box-shadow: 0 14px 40px rgba(246,177,30,.34); }
.rg2 .btn-glass {
  border: 1px solid rgba(255,255,255,.18); background: var(--glass); color: var(--txt); font-weight: 500;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.rg2 .btn-glass:hover { border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.08); }
/* white pill with a navy border, for a second action on a light card */
.rg2 .btn-outline {
  display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 30px; border-radius: 999px;
  border: 1.5px solid #1b2340; background: #fff; color: #1b2340; font-size: 16px; font-weight: 600; text-transform: none; letter-spacing: 0;
  white-space: nowrap; transition: background-color .2s, color .2s;
}
.rg2 .btn-outline:hover { background: #1b2340; color: #fff; }

/* ── Scribbles: gold pen strokes in the hand of the logo's „RefreshGear" ── */
.rg2 .sc {
  position: absolute; pointer-events: none; overflow: visible;
  fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.rg2 .sc path { vector-effect: non-scaling-stroke; }
.rg2 .ulw, .rg2 .circ { position: relative; display: inline-block; }
.rg2 .sc-ul { left: -1%; width: 103%; bottom: -12px; height: 20px; }
.rg2 .sc-circ { left: -16px; top: -8px; width: calc(100% + 32px); height: calc(100% + 16px); }

/* ── Film grain + light shapes on the dark sections ─────────────────────── */
.rg2 .hero::after, .rg2 .product-desc-section::after, .rg2 .pricing-section::after,
.rg2 .signup-section::after, .rg2 .footer::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: .07; mix-blend-mode: overlay; background-image: var(--grain);
}
.rg2 .lt, .rg2 .band { position: absolute; display: block; pointer-events: none; z-index: 0; border-radius: 50%; }

/* ═══ TOP BAR ═══════════════════════════════════════════════════════════ */
.rg2 .topbar {
  position: relative; z-index: 20; display: flex; align-items: center; justify-content: center; gap: 14px;
  height: 34px; padding: 0 16px; background: rgba(0,0,0,.28); border-bottom: 1px solid var(--hair);
  font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
  white-space: nowrap;
}
.rg2 .topbar #freeShipMsg { color: var(--muted); }
.rg2 .topbar i { width: 1px; height: 12px; background: var(--hair); }

/* ═══ HEADER — floating glass pill ══════════════════════════════════════ */
.rg2 .header-wrap {
  position: sticky; top: 0; z-index: 1000;
  height: 104px; margin-bottom: -104px; padding: 20px 56px 0;
  background: none; border: 0; box-shadow: none; pointer-events: none;
}
.rg2 .header-wrap.scrolled { box-shadow: none; }
.rg2 .navbar {
  pointer-events: auto; max-width: 1240px; height: 70px; margin: 0 auto; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 20px 50px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.14);
  transition: background-color .35s, border-color .35s, box-shadow .35s;
}
/* below the hero the glass turns dark navy: white cards and light sections behind
   a clear pill washed the menu out */
.rg2 .header-wrap.is-solid .navbar {
  background-color: rgba(10,14,34,.84); border-color: rgba(255,255,255,.10);
  box-shadow: 0 14px 40px rgba(27,35,64,.28), inset 0 1px 0 rgba(255,255,255,.10);
}
.rg2 .nav-inner { max-width: none; height: 100%; padding: 0 14px 0 36px; display: grid; grid-template-columns: 1fr auto 1fr; }
.rg2 .nav-left { gap: 38px; }
.rg2 .nav-left a {
  position: relative; padding: 8px 0; border: 0;
  font-size: 12.5px; font-weight: 500; letter-spacing: .16em; color: var(--faint);
}
.rg2 .nav-left a:hover { color: var(--txt); border: 0; }
.rg2 .nav-left a.active { color: var(--txt); }
.rg2 .nav-left a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); }
/* The logo file has an empty band under the script „RefreshGear" (its drawing ends at
   90 % of the canvas), so a centred box showed the logo high in the bar (founder
   2026-11-05). Moving the image down by half that band centres what you see, at
   any logo height. */
.rg2 .nav-logo img { height: 52px; padding: 0; filter: none; translate: 0 5%; }
.rg2 .nav-right { gap: 10px; }
.rg2 .nav-cart {
  width: 42px; height: 42px; justify-content: center; border-radius: 50%;
  border: 1px solid var(--hair); background: var(--glass); color: var(--txt);
}
.rg2 .cart-count {
  top: -4px; right: -4px; width: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--gold); color: var(--on-gold); font-size: 10.5px; font-weight: 700;
}
.rg2 .hamburger {
  width: 38px; height: 38px; padding: 0; align-items: center; border-radius: 50%;
  border: 1px solid var(--hair); background: var(--glass);
}
.rg2 .hamburger span { width: 16px; height: 1.5px; background: #fff; }
.rg2 .hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.rg2 .hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.rg2 .mobile-nav {
  pointer-events: auto; max-width: 1240px; margin: 8px auto 0; border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(9,13,32,.94);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 20px 50px rgba(0,0,0,.45);
}
.rg2 .mobile-nav.open { padding: 6px 22px 10px; }
.rg2 .mobile-nav a { font-size: 13px; font-weight: 500; letter-spacing: .16em; color: var(--muted); border-bottom-color: rgba(255,255,255,.08); }
.rg2 .mobile-nav a.active { color: var(--gold); }

/* ═══ JOINS — each section slides over the one before it on a slant ═══ */
.rg2 .how-section, .rg2 .social-section, .rg2 .product-desc-section, .rg2 .guarantee-section,
.rg2 .pricing-section, .rg2 .faq-section, .rg2 .signup-section { position: relative; overflow: hidden; }
.rg2 .social-section, .rg2 .product-desc-section, .rg2 .guarantee-section,
.rg2 .pricing-section, .rg2 .faq-section, .rg2 .signup-section {
  margin-top: calc(-1 * var(--join)); clip-path: polygon(0 var(--join), 100% 0, 100% 100%, 0 100%);
}

/* ═══ 3 · SOCIAL (white) ═══════════════════════════════════════════════ */
.rg2 .social-section { z-index: 3; background: #fff; color: #1b2340; padding: 170px 0 120px; text-align: center; }
.rg2 .social-section .kicker, .rg2 .rg-social-title, .rg2 .rg-social-sub { padding: 0 var(--pad); }
.rg2 .rg-social-title { font-size: 54px; font-weight: 500; letter-spacing: -.02em; line-height: 1.08; color: #1b2340; margin: 0 0 14px; }
.rg2 .rg-social-sub { font-size: 18px; color: #444466; }
.rg2 .rg-social-sub a { color: var(--accent-text); font-weight: 600; }
.rg2 .rg-social-sub .sc-ul { bottom: -7px; height: 11px; left: -2%; width: 104%; }
.rg2 .rg-social-wrap { padding: 44px 0 120px; }
.rg2 .rg-social-card.is-active { box-shadow: 0 30px 60px rgba(27,35,64,.28); }

/* ═══ 4 · PRODUCT (dark, one wide beam from the top-left) ══════════════ */
.rg2 .product-desc-section {
  z-index: 4; isolation: isolate; color: #fff; padding: 190px var(--pad) 210px;
  background: linear-gradient(180deg, #0b1230 0%, #070b1c 60%, #04060e 100%);
}
.rg2 .product-desc-section .lt-1 { left: -20%; top: -10%; width: 90%; height: 140%; transform: rotate(-28deg); filter: blur(80px);
  background: linear-gradient(180deg, transparent 15%, rgba(70,130,255,.55) 40%, rgba(140,190,255,.75) 52%, rgba(70,130,255,.5) 64%, transparent 85%); }
.rg2 .product-desc-section .lt-2 { left: -10%; bottom: -40%; width: 60%; height: 80%; filter: blur(90px); background: radial-gradient(closest-side, rgba(40,90,220,.5), transparent 70%); }
.rg2 .product-desc-section .lt-3 { right: -10%; top: -30%; width: 50%; height: 70%; filter: blur(90px); background: radial-gradient(closest-side, rgba(20,40,120,.6), transparent 70%); }
.rg2 .product-desc-inner {
  position: relative; z-index: 1; max-width: 1208px; margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 70px; align-items: center;
}
.rg2 .product-desc-content h2 { font-size: 46px; font-weight: 500; letter-spacing: -.02em; line-height: 1.1; color: #fff; margin-bottom: 24px; }
.rg2 .product-desc-content p { font-size: 17.5px; line-height: 1.65; color: var(--muted); margin: 0 0 18px; max-width: 560px; }
.rg2 .product-desc-content .sc-ul { bottom: -6px; height: 12px; left: -1%; width: 102%; }
.rg2 .price-line { font-size: 28px; font-weight: 600; color: #fff; margin: 26px 0 24px; }
.rg2 .product-desc-image img { width: 100%; height: auto; display: block; filter: drop-shadow(0 40px 60px rgba(0,0,0,.55)); }

/* ═══ 5 · GUARANTEE (white, photo right) ═══════════════════════════════ */
.rg2 .guarantee-section { z-index: 5; background: #fff; color: #1b2340; padding: 180px var(--pad) 210px; }
.rg2 .guarantee-inner { max-width: 1208px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 1fr; gap: 80px; align-items: center; }
.rg2 .guarantee-text h2 { font-size: 46px; font-weight: 500; letter-spacing: -.02em; line-height: 1.1; color: #1b2340; margin-bottom: 24px; }
.rg2 .guarantee-text p { font-size: 17.5px; line-height: 1.7; color: #444466; margin: 0 0 16px; max-width: 560px; }
.rg2 .guarantee-text strong { font-weight: 600; color: #1b2340; }
.rg2 .guarantee-text .btn-pink { margin-top: 10px; }
.rg2 .circ-15 { padding: 0 8px; margin: 0 -3px; }
.rg2 .circ-15 .sc-circ { left: -4px; top: -6px; width: calc(100% + 8px); height: calc(100% + 12px); }
.rg2 .guarantee-text .sc-ul { bottom: -5px; height: 11px; left: -1%; width: 102%; }
.rg2 .guarantee-image img { width: 100%; height: auto; display: block; border-radius: 24px; }

/* ═══ 7 · FAQ (white, one column, thin +/−) ════════════════════════════ */
.rg2 .faq-section { z-index: 7; background: #fff; color: #1b2340; text-align: center; padding: 180px 8% 120px; }
.rg2 .faq-section h2 { font-size: 46px; font-weight: 500; letter-spacing: -.02em; line-height: 1.1; margin-bottom: 48px; color: #1b2340; }
.rg2 .faq-section h2 .sc-ul { bottom: -10px; height: 18px; left: -1%; width: 102%; }
.rg2 .faq-list { max-width: 900px; margin: 0 auto; text-align: left; }
.rg2 .faq-item { border: 0; border-bottom: 1px solid rgba(27,35,64,.12); border-radius: 0; padding: 20px 0; margin: 0; background: none; box-shadow: none; }
.rg2 .faq-item:first-child { border-top: 1px solid rgba(27,35,64,.12); }
.rg2 .faq-q { gap: 20px; padding: 0; font-size: 15px; font-weight: 600; letter-spacing: .04em; color: #1b2340; background: none; }
/* js/main.js adds a text „+"/„−" with inline styles; draw it as two thin lines instead */
.rg2 .faq-indicator {
  position: relative; flex: none; width: 28px; height: 28px; padding: 0 !important;
  font-size: 0 !important; color: transparent !important; transform: none !important;
}
.rg2 .faq-indicator::before, .rg2 .faq-indicator::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: #1b2340; transform: translate(-50%, -50%);
}
.rg2 .faq-indicator::before { width: 14px; height: 1.5px; }
.rg2 .faq-indicator::after { width: 1.5px; height: 14px; transition: transform .25s ease; }
.rg2 .faq-item.open .faq-indicator::after { transform: translate(-50%, -50%) rotate(90deg); }
.rg2 .faq-a { font-size: 15.5px; line-height: 1.7; color: #444466; padding: 0 48px 0 0; transition: max-height .4s ease, opacity .3s ease, margin-top .3s ease !important; }
.rg2 .faq-item.open .faq-a { margin-top: 14px; }

/* ═══ 8 · SIGNUP (dark, a white card in a swirl of three ribbons) ══════ */
.rg2 .signup-section {
  z-index: 8; isolation: isolate; display: block; background: var(--navy-0); padding: 160px 8% 140px;
}
.rg2 .signup-section .lt-1 { left: -20%; top: -20%; width: 140%; height: 70%; transform: rotate(-12deg); filter: blur(70px);
  background: linear-gradient(90deg, transparent 10%, rgba(60,120,255,.5) 35%, rgba(190,220,255,.7) 50%, rgba(60,120,255,.45) 65%, transparent 90%); }
.rg2 .signup-section .lt-2 { left: -10%; bottom: -25%; width: 120%; height: 60%; transform: rotate(8deg); filter: blur(80px);
  background: linear-gradient(90deg, transparent 10%, rgba(40,80,220,.45) 40%, rgba(140,190,255,.5) 58%, transparent 90%); }
.rg2 .signup-section .lt-3 { left: 30%; top: 20%; width: 40%; height: 60%; filter: blur(60px); background: radial-gradient(closest-side, rgba(10,16,48,.9), transparent 70%); }
/* the swirl fades into the base colour before the footer: no seam */
.rg2 .signup-section::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 180px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(4,6,14,0), var(--navy-0));
}
.rg2 .signup-box {
  position: relative; z-index: 2; max-width: 760px; margin: 0 auto; padding: 60px 48px; border-radius: 28px; text-align: center;
  background: #fff; color: #1b2340; box-shadow: 0 30px 70px rgba(0,0,0,.5);
}
.rg2 .signup-box h2 { font-size: 38px; font-weight: 500; letter-spacing: -.02em; color: #1b2340; margin-bottom: 28px; }
.rg2 .signup-box h2 .sc-ul { bottom: -8px; height: 14px; left: -2%; width: 104%; }
/* one row down to phones (css/shared.css stacks it from 900px, which collapsed the input) */
.rg2 .signup-form { display: flex; flex-direction: row; gap: 12px; max-width: 520px; margin: 0 auto; }
.rg2 .signup-form input {
  flex: 1; min-width: 0; height: 56px; padding: 0 22px; border-radius: 999px; border: 1px solid rgba(27,35,64,.18);
  background: #f6f8fc; color: #1b2340; font: inherit; font-size: 16px;
}
.rg2 .signup-form input::placeholder { color: #8a90a8; }
.rg2 .signup-form input:focus { border-color: var(--gold); outline: none; }
.rg2 .signup-form .btn-pink { border-radius: 999px; padding: 0 34px; font-size: 16px; }

/* ═══ FOOTER (dark, continues the signup's stage; a quiet steel sheen) ═ */
.rg2 .footer { position: relative; z-index: 9; overflow: hidden; isolation: isolate; background: var(--navy-0); color: #fff; padding: 0; border: 0; }
.rg2 .footer > *:not(.lt) { position: relative; z-index: 1; }
.rg2 .footer .lt-1 { right: -12%; bottom: -70%; width: 60%; height: 180%; transform: rotate(-18deg); filter: blur(80px);
  background: linear-gradient(180deg, transparent 20%, rgba(90,120,200,.28) 50%, transparent 80%); }
.rg2 .footer-inner { max-width: 1208px; margin: 0 auto; padding: 72px var(--pad) 56px; display: grid; grid-template-columns: auto 1fr 1fr 1.4fr; gap: 48px; }
.rg2 .footer-logo img { height: 72px; width: auto; display: block; }
.rg2 .footer-social { gap: 10px; margin-top: 22px; }
.rg2 .footer-social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--hair); background: var(--glass); color: #fff; }
.rg2 .footer-social a:hover { background: var(--glass); border-color: var(--gold); color: var(--gold); }
.rg2 .footer-col h4 { font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 18px; }
.rg2 .footer-col ul { gap: 10px; }
.rg2 .footer-col a { font-size: 15px; color: var(--muted); }
.rg2 .footer-col a:hover { color: #fff; }
.rg2 .footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 20px var(--pad); font-size: 13px; color: var(--faint); }

.rg2 .scroll-top { border-radius: 50%; }

/* ═══ PAGE STAGE — a page's dark opening section (About story, Contact hero) ══
   The homepage hero's look: dark gradient, grain, three diagonal light bands.
   --su is 1px at a 1440 viewport so the bands keep the mockup's proportions;
   pages move the bands with `top` only. Keep every band clear of the bottom edge:
   a blurred band cut by overflow:hidden reads as a straight line. Mark the section
   [data-hero] too, so the header pill stays clear over it (js/site.js). */
.rg2 .page-stage {
  --su: calc(min(100vw, 1440px) / 1440);
  position: relative; z-index: 1; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #04060e 0%, #060a18 100%); color: var(--txt);
}
.rg2 .page-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: .07; mix-blend-mode: overlay; background-image: var(--grain);
}
.rg2 .page-stage > .stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.rg2 .page-stage > :not(.stage) { position: relative; z-index: 2; }
.rg2 .page-stage .band { transform: rotate(-16deg); }
.rg2 .page-stage .band-1 { left: 10%; top: 34%; width: calc(1300 * var(--su)); height: calc(110 * var(--su)); filter: blur(30px);
  background: linear-gradient(90deg, transparent 5%, rgba(90,150,255,.55) 30%, rgba(200,230,255,.75) 52%, rgba(120,230,255,.45) 72%, transparent 95%); }
.rg2 .page-stage .band-2 { left: 22%; top: 2%; width: calc(1250 * var(--su)); height: calc(280 * var(--su)); filter: blur(85px);
  background: linear-gradient(90deg, transparent, rgba(50,100,240,.45), rgba(110,170,255,.30), transparent); }
.rg2 .page-stage .band-3 { left: 34%; top: 62%; width: calc(1000 * var(--su)); height: calc(150 * var(--su)); filter: blur(60px);
  background: linear-gradient(90deg, transparent, rgba(60,80,220,.40), rgba(150,120,255,.22), transparent); }
@media (max-width: 768px) {
  .rg2 .page-stage { --pu: min(calc(100vw / 375), 1.5px); }
  .rg2 .page-stage .band-1 { left: -60%; top: 18%; width: calc(650 * var(--pu)); height: calc(60 * var(--pu)); filter: blur(20px); }
  .rg2 .page-stage .band-2 { left: -40%; top: 0; width: calc(600 * var(--pu)); height: calc(150 * var(--pu)); }
  .rg2 .page-stage .band-3 { left: -30%; top: 40%; width: calc(500 * var(--pu)); height: calc(90 * var(--pu)); }
}
@media (prefers-reduced-motion: no-preference) {
  .rg2 .page-stage > .stage { animation: rg-fade 1.6s ease-out backwards; }
}

/* ═══ BLUE DISSOLVE — a light section painted on the dark (About numbers,
   Contact body). The section itself is dark; three layers under the content:
     .dz   the upper dissolve, a block on a tilted line (−tilt), transparent on its
           dark side so its rotated edges never show over the section above;
     .mid  plain light under the content;
     .dz2  the same block mirrored, fading back into the dark below.
   Pages set the geometry with the variables (as approved at 1440). .mid must start
   below the lowest point of .dz's solid light (76 %) and above .dz's rotated bottom
   edge, and end inside .dz2's opaque part (above 42 %), or a dark wedge or a line
   shows at the screen's side. Wider than 1440, the tilt flattens so the drop across
   the screen stays the 1440 one (--dz-angle) and those limits hold. Markup: <div class="stage" aria-hidden="true"><i class="mid"></i><i class="dz"></i><i class="dz2"></i></div> */
.rg2 .dissolve {
  --dz-h: 600px; --dz-tilt: 5deg; --dz-top: -120px; --dz2-bottom: -120px; --mid: 340px;
  --dz-angle: min(var(--dz-tilt), atan2(calc(720px * tan(var(--dz-tilt))), 50vw));
  position: relative; z-index: 2; overflow-x: clip;
  background: linear-gradient(180deg, #060a18 0%, #04060e 100%); color: #1b2340;
}
.rg2 .dissolve > .stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.rg2 .dissolve > .stage i { position: absolute; display: block; }
.rg2 .dissolve > :not(.stage) { position: relative; z-index: 1; }
.rg2 .dissolve .mid { left: 0; right: 0; top: var(--mid-top, var(--mid)); bottom: var(--mid); background: #f4f6fb; }   /* --mid-top: 0 when the page opens light (no .dz) */
.rg2 .dissolve .dz { left: -40%; width: 180%; height: var(--dz-h); top: var(--dz-top); transform: rotate(calc(-1 * var(--dz-angle)));
  background: linear-gradient(180deg, rgba(6,10,24,0) 0%, rgba(6,10,24,0) 20%, rgba(11,19,50,.7) 30%, #2f4285 42%, #8ea4dd 54%, #d6dff5 65%, #f4f6fb 76%, #f4f6fb 100%); }
.rg2 .dissolve .dz2 { left: -40%; width: 180%; height: var(--dz-h); bottom: var(--dz2-bottom); transform: rotate(var(--dz-angle));
  background: linear-gradient(0deg, rgba(4,6,14,0) 0%, rgba(4,6,14,0) 20%, rgba(10,17,48,.7) 30%, #2b3d7e 42%, #8ea4dd 54%, #d6dff5 65%, #f4f6fb 76%, #f4f6fb 100%); }

/* Signup starting flat on the dark (after a .dissolve): no slant, a dark band on top
   and the ribbons pushed down, so no seam or clipped ribbon edge shows. It sits under
   the dissolve (z-index 2), so a tilted .dz2 finishes its fade over the signup's dark
   top instead of being cut off in a straight line. Markup: <i class="su-top"></i> first. */
.rg2 .signup-section.is-flat { z-index: 1; margin-top: 0; clip-path: none; padding-top: 150px; }
.rg2 .signup-section.is-flat .su-top {
  position: absolute; left: 0; right: 0; top: -2px; height: 320px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, #04060e 0%, #04060e 25%, rgba(4,6,14,0) 100%);
}
.rg2 .signup-section.is-flat .lt-1 { top: 22%; }
.rg2 .signup-section.is-flat .lt-3 { top: 26%; }
@media (max-width: 768px) {
  .rg2 .signup-section.is-flat { padding-top: 100px; }
}

/* ═══ FREE-DELIVERY BAR on a page (Cart, Checkout): Cart.shipBarHtml() fills the
   page's [data-rg-ship-bar] slot (.cart-ship-slot / .co-ship-slot); the drawer's copy
   (.cart-drawer-ship) keeps its own look. A light block, gold track, white upsell row. */
.rg2 :is(.cart-ship-slot, .co-ship-slot) .rg-ship { background: #f4f6fb; border: 1px solid rgba(27,35,64,.12); border-radius: 16px; padding: 16px 18px; color: #1b2340; }
.rg2 :is(.cart-ship-slot, .co-ship-slot) .rg-ship-msg { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.4; }
.rg2 :is(.cart-ship-slot, .co-ship-slot) .rg-ship-msg strong { font-weight: 600; }
.rg2 :is(.cart-ship-slot, .co-ship-slot) .rg-ship-amt { color: #996E13; }
.rg2 :is(.cart-ship-slot, .co-ship-slot) .rg-ship-track { height: 8px; margin-top: 10px; background: #dde2ee; }
.rg2 :is(.cart-ship-slot, .co-ship-slot) .rg-ship-track span { background: linear-gradient(90deg, #F6B11E, #E09E12); }
.rg2 :is(.cart-ship-slot, .co-ship-slot) .rg-ship-card { margin: 12px 0 0; font-size: 13.5px; font-weight: 400; color: #444466; }
.rg2 :is(.cart-ship-slot, .co-ship-slot) .rg-ship-up {
  gap: 12px; margin-top: 10px; padding: 10px 12px;
  background: #fff; border: 1px solid rgba(27,35,64,.12); border-radius: 12px;
}
.rg2 :is(.cart-ship-slot, .co-ship-slot) .rg-ship-up img { background: none; padding: 0; border-radius: 0; }
.rg2 :is(.cart-ship-slot, .co-ship-slot) .rg-ship-up-txt { font-size: 14px; font-weight: 400; color: #1b2340; }
.rg2 :is(.cart-ship-slot, .co-ship-slot) .rg-ship-up-txt strong { color: #1b2340; font-weight: 600; }
.rg2 :is(.cart-ship-slot, .co-ship-slot) .rg-ship-up button {
  height: 36px; padding: 0 16px; border-radius: 999px; border: 1.5px solid #1b2340;
  background: #fff; color: #1b2340; font-size: 13.5px; font-weight: 600;
}
.rg2 :is(.cart-ship-slot, .co-ship-slot) .rg-ship-up button:hover { background: #1b2340; color: #fff; }
@media (max-width: 768px) {
  .rg2 :is(.cart-ship-slot, .co-ship-slot) .rg-ship-up { flex-wrap: wrap; }
  .rg2 :is(.cart-ship-slot, .co-ship-slot) .rg-ship-up-txt { flex: 1 1 160px; }
}

/* ═══ STEPS BAR (Checkout, order confirmation): ✓ done (white, navy ring) · active (navy) ·
   upcoming (grey). Scoped to .steps-bar: the review page has its own .step blocks. ═══ */
.rg2 .steps-bar { display: flex; align-items: center; max-width: 720px; margin: 0 auto 40px; }
.rg2 .steps-bar .step { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: #8a90a8; white-space: nowrap; }
.rg2 .steps-bar .step.done { color: #1b2340; }
.rg2 .steps-bar .step.active { color: #1b2340; font-weight: 600; }
.rg2 .steps-bar .step-num {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  background: #e4e8f2; color: #8a90a8; font-size: 13px; font-weight: 600;
}
.rg2 .steps-bar .step.active .step-num { background: #1b2340; color: #fff; }
.rg2 .steps-bar .step.done .step-num { background: #fff; color: #1b2340; border: 1.5px solid #1b2340; }
.rg2 .steps-bar .step-line { flex: 1; min-width: 10px; height: 1.5px; margin: 0 14px; background: #dde2ee; }
.rg2 .steps-bar .step-line.done { background: #1b2340; }

/* phones (founder 2026-11-02: „not responsive enough" — names ran into the lines and
   „Потвърждение" was cut off): each step is a 92px column, the circle over its name,
   and the lines join the circles (13px down = the circle's middle; the −29px margins
   reach to 4px from each circle). Fits from 320px. */
@media (max-width: 768px) {
  .rg2 .steps-bar { align-items: flex-start; margin-bottom: 28px; }
  .rg2 .steps-bar .step { flex: 0 1 92px; min-width: 0; flex-direction: column; gap: 7px; font-size: 12px; line-height: 1.25; text-align: center; white-space: normal; }
  .rg2 .steps-bar .step-num { width: 26px; height: 26px; font-size: 11.5px; }
  .rg2 .steps-bar .step-line { min-width: 12px; margin: 13px -29px 0; }
}

/* ═══ RESPONSIVE ════════════════════════════════════════════════════════ */
/* tablets keep the full menu (the hamburger starts at 768): tighter, so the BG / RO
   labels stay on one line beside the logo */
@media (min-width: 769px) and (max-width: 1023px) {
  .rg2 .header-wrap { padding: 20px 24px 0; }
  .rg2 .nav-inner { padding: 0 12px 0 26px; }
  .rg2 .nav-left { gap: 22px; }
  .rg2 .nav-left a { font-size: 11.5px; letter-spacing: .1em; white-space: nowrap; }
}
@media (max-width: 1199px) {
  .rg2 .product-desc-inner, .rg2 .guarantee-inner { gap: 48px; }
}


@media (max-width: 900px) {
  .rg2 .product-desc-section { text-align: center; }
  .rg2 .product-desc-inner { grid-template-columns: 1fr; gap: 10px; }
  .rg2 .product-desc-image { order: -1; width: 230px; margin: 0 auto; }
  .rg2 .product-desc-content p { margin-left: auto; margin-right: auto; }
  .rg2 .guarantee-section { text-align: center; }
  .rg2 .guarantee-inner { grid-template-columns: 1fr; gap: 28px; }
  .rg2 .guarantee-image { order: -1; max-width: 260px; width: 100%; margin: 0 auto; }
  .rg2 .guarantee-text p { margin-left: auto; margin-right: auto; }
  .rg2 .footer-inner { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .rg2 .footer-logo { grid-column: 1 / -1; }
  .rg2 .footer-col:last-child { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .rg2 { --join: 40px; }
  .rg2 .topbar { display: flex; height: 30px; font-size: 10px; letter-spacing: .1em; }
  .rg2 .topbar i, .rg2 .topbar span:not(:first-child) { display: none; }
  .rg2 .header-wrap { height: 76px; margin-bottom: -76px; padding: 12px 12px 0; }
  .rg2 .navbar { height: 58px; }
  .rg2 .nav-inner { display: grid; grid-template-columns: auto 1fr auto; padding: 0 9px 0 18px; }
  .rg2 .nav-logo { justify-self: start; }
  .rg2 .nav-logo img { height: 40px; }
  .rg2 .nav-cart { width: 38px; height: 38px; }
  .rg2 .social-section { padding: 120px 0 120px; }
  .rg2 .social-section .kicker, .rg2 .rg-social-title, .rg2 .rg-social-sub { padding: 0 22px; }
  .rg2 .rg-social-title { font-size: 34px; }
  .rg2 .rg-social-sub { font-size: 15px; }
  .rg2 .rg-social-wrap { padding: 24px 0 64px; }
  /* the strip clips its overflow: the shadow must end inside its 24/64px padding, or its cut edge shows as a line */
  .rg2 .rg-social-card.is-active { box-shadow: 0 20px 40px rgba(27,35,64,.28); }
  .rg2 .product-desc-section { padding: 120px 22px 120px; }
  .rg2 .product-desc-content h2 { font-size: 30px; }
  .rg2 .product-desc-content p { font-size: 15.5px; }
  .rg2 .price-line { font-size: 24px; margin: 18px 0; }
  .rg2 .guarantee-section { padding: 120px 22px 120px; }
  .rg2 .guarantee-text h2 { font-size: 30px; }
  .rg2 .guarantee-text p { font-size: 15.5px; }
  .rg2 .faq-section { padding: 120px 22px 80px; }
  .rg2 .faq-section h2 { font-size: 30px; margin-bottom: 28px; }
  .rg2 .faq-section h2 .sc-ul { bottom: -7px; height: 13px; }
  .rg2 .faq-q { font-size: 13.5px; }
  .rg2 .faq-a { font-size: 14.5px; padding-right: 0; }
  .rg2 .signup-section { padding: 100px 22px 80px; }
  .rg2 .signup-box { padding: 40px 24px; }
  .rg2 .signup-box h2 { font-size: 26px; }
  .rg2 .signup-form { flex-direction: column; }
  .rg2 .signup-form input { flex: none; width: 100%; border: 1px solid rgba(27,35,64,.18); border-radius: 999px; }
  .rg2 .signup-form .btn-pink { border-radius: 999px; }
  .rg2 .footer-inner { padding: 48px 22px 36px; }
  .rg2 .footer-logo img { height: 56px; }
  .rg2 .footer-bottom { padding: 18px 22px; }
}

/* ═══ Reduced motion: everything shown in its final state ══════════════ */
@media (prefers-reduced-motion: reduce) {
  .rg2 .reveal { opacity: 1; transform: none; transition: none; }
  .rg2 .faq-indicator::after, .rg2 .navbar { transition: none; }
}

/* ═══ MOTION (js/site.js drives the scroll-linked parts) ═════════════════
   Transforms here use the individual translate / scale properties, so they
   never fight the .reveal entrance (which animates `transform`) or the
   centring transforms of the hero pieces. */

/* Scribbles: the pen follows each stroke; marks draw one at a time, left to
   right (js/site.js queues them). The dash is dropped once drawn (.sc-done). */
.rg2 .sc { --d: .6s; }
.rg2 .sc-circ { --d: .85s; }
.rg2 .hv-arr, .rg2 .pricing-note .sc { --d: .7s; }
.rg2 .hv-note .old .sc { --d: .45s; }
.rg2 .sc-draw path { stroke-dasharray: 1 2; stroke-dashoffset: 1.01; transition: stroke-dashoffset var(--d) cubic-bezier(.55,.1,.35,1); }
.rg2 .sc-draw path + path { transition-delay: calc(var(--d) * .8); }
.rg2 .sc-draw.sc-on path { stroke-dashoffset: 0; }
.rg2 .sc-draw.sc-done path { stroke-dasharray: none; transition: none; }

/* Gold buttons: a light sweep on hover (and once on the hero's after the intro) */
.rg2 .btn-pink { position: relative; overflow: hidden; isolation: isolate; }
.rg2 .btn-pink::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; translate: -110% 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transition: translate .8s cubic-bezier(.2,.7,.2,1);
}
.rg2 .btn-pink:hover::after { translate: 110% 0; }

/* Entrance keyframes (the homepage hero uses them; any page may) */
@keyframes rg-fade { from { opacity: 0; } }
@keyframes rg-rise { from { opacity: 0; translate: 0 28px; } }
@keyframes rg-drop { from { opacity: 0; translate: 0 -14px; } }
@keyframes rg-in { from { scale: .92; translate: 0 18px; } }   /* no fade: the bottles are the LCP image */
@keyframes rg-pop { from { opacity: 0; scale: .9; translate: 0 16px; } }
@keyframes rg-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes rg-shine { from { translate: -110% 0; } to { translate: 110% 0; } }

/* ═══ TOUCH SCREENS (phones, tablets) — the light version of the effects ═══
   2026-11-02: minutes after the redesign went live, Safari on the founder's iPhone
   crashed while scrolling the homepage („A problem repeatedly occurred"). Each
   filter: blur() light (up to 110 px over half a section), the drop-shadowed bottles,
   the frosted glass and the grain blended with mix-blend-mode needs its own big GPU
   buffer at 3× pixel density; together they passed Safari's memory limit.
   On touch screens: the lights are the same gradients softened by a radial mask (no
   blur buffer), no grain, glass is a solid tint, the photos have no drop-shadow.
   Desktop keeps the full look. Selectors with !important beat the page files. */
@media (hover: none), (max-width: 768px) {
  .rg2 :is(.lt, .band, .rb) {
    filter: none !important;
    -webkit-mask-image: radial-gradient(closest-side, #000 15%, transparent);
            mask-image: radial-gradient(closest-side, #000 15%, transparent);
  }
  .rg2 :is(.hero, .product-desc-section, .pricing-section, .signup-section, .footer, .page-stage)::after,
  .rg2.product .lightstage::after { display: none !important; }
  .rg2 *, .rg2 *::before, .rg2 *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .rg2 :is(.hv-bottles, .product-desc-image img, .story-visual img) { filter: none !important; }
  .rg2 :is(.hero .stage, .hv-float, .story-visual) { will-change: auto !important; }
  /* the glass, as a solid tint */
  .rg2 .navbar { background-color: rgba(10,14,34,.55); }
  .rg2 .header-wrap.is-solid .navbar { background-color: rgba(10,14,34,.97); }
  .rg2 .hv-card { background-color: rgba(12,16,38,.86); }
  .rg2 .btn-glass { background-color: rgba(255,255,255,.07); }
}