@charset "utf-8";

/* ==========================================================================
   PetClean – advertorial
   1. Fonts
   2. Tokens
   3. Reset & base
   4. Layout / shell
   5. Chrome: progress, topbar, sticky CTA
   6. Article typography
   7. Media
   8. Components
   9. Offer block
   10. Motion
   11. Responsive
   ========================================================================== */

/* 1. Fonts ----------------------------------------------------------------
   Subset to what the page actually needs: Latin-1 plus general punctuation,
   and Latin Extended-A for ő/ű. The declared unicode-range matches the subset
   exactly, so any character outside it falls back to the system font instead
   of rendering as .notdef. Full ranges cost 178 KB; these cost 79 KB. */
@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-017F;
}
@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0020-00FF, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Jakarta var';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/jakarta-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-017F;
}
@font-face {
  font-family: 'Jakarta var';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/jakarta-var-latin.woff2') format('woff2');
  unicode-range: U+0020-00FF, U+2000-206F, U+20AC, U+2122, U+2212;
}

/* 2. Tokens --------------------------------------------------------------- */
:root {
  --ink: #101720;
  --ink-2: #1b2632;
  --body: #33424f;
  --muted: #718493;
  --faint: #9aabb8;
  --line: #e5ecf1;
  --line-2: #eef3f6;
  --paper: #fff;
  --wash: #f6f9fb;

  --brand: #14b3c2;
  --brand-2: #0f97a6;
  --brand-deep: #086a75;
  --brand-wash: #eafafc;

  --red: #dc2545;
  --red-2: #b81634;
  --red-wash: #fff2f5;

  --gold: #ffd247;
  --gold-ink: #3a2d00;

  --go: #17a552;
  --go-2: #0f8a42;

  --sans: 'Inter var', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --disp: 'Jakarta var', 'Inter var', system-ui, sans-serif;

  --col: 660px;
  --pad: 20px;
  --r: 14px;
  --r-lg: 20px;

  --sh-1: 0 1px 2px rgba(16, 23, 32, .05), 0 4px 14px rgba(16, 23, 32, .05);
  --sh-2: 0 2px 6px rgba(16, 23, 32, .06), 0 14px 40px rgba(16, 23, 32, .09);
  --sh-3: 0 24px 70px rgba(8, 106, 117, .18);

  --ease: cubic-bezier(.22, .68, 0, 1);
  --ease-2: cubic-bezier(.34, 1.42, .64, 1);
}

/* 3. Reset & base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.72;
  color: var(--body);
  background: #eef2f5;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }
a { color: var(--brand-2); }

::selection { background: var(--brand); color: #fff; }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* 4. Layout / shell ------------------------------------------------------- */
.shell {
  max-width: calc(var(--col) + 80px);
  margin: 0 auto;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgba(16, 23, 32, .05), 0 30px 90px rgba(16, 23, 32, .07);
}

.doc {
  max-width: var(--col);
  margin: 0 auto;
  padding: 0 var(--pad) 8px;
}

/* full-bleed inside the shell */
.bleed {
  margin-inline: calc(var(--pad) * -1);
}

/* 5. Chrome --------------------------------------------------------------- */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 60;
  background: rgba(16, 23, 32, .07);
}
.progress > i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--brand-deep), var(--brand), #7fe6ef);
  box-shadow: 0 0 12px rgba(20, 179, 194, .8);
  transition: width .1s linear;
}

.topbar {
  position: fixed;
  inset: 3px 0 auto 0;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  background: rgba(255, 255, 255, .84);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid var(--line-2);
  transform: translateY(-104%);
  transition: transform .6s var(--ease);
}
.topbar.on { transform: none; }

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--disp);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -.025em;
  color: var(--ink);
  white-space: nowrap;
}
.wordmark .dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px rgba(20, 179, 194, .18);
  flex: none;
}
.wordmark b { color: var(--brand-2); font-weight: 800; }

.chapter {
  min-width: 0;
  font-family: var(--disp);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity .4s var(--ease);
}
.chapter i { color: var(--brand-2); font-style: normal; }

/* sticky bottom bar */
.dock {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 56;
  padding: 10px max(12px, calc(50vw - var(--col) / 2 - 18px));
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 30px rgba(16, 23, 32, .07);
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateY(130%);
  transition: transform .65s var(--ease);
}
.dock.on { transform: none; }

.dock .txt { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.dock .txt strong {
  display: block;
  font-family: var(--disp);
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.01em;
}
.dock .txt strong b { color: var(--red); font-weight: 800; }
.dock .txt span { font-size: 11.5px; color: var(--muted); font-weight: 500; }

/* the button keeps a slow glow so the bar stays noticeable */
.dockbtn {
  flex: none;
  display: block;
  padding: 14px 18px;
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  font-family: var(--disp);
  font-size: clamp(.82rem, 3.4vw, .95rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.012em;
  color: #fff;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--go), #22c26c 55%, var(--go));
  box-shadow: 0 6px 18px rgba(23, 165, 82, .32), inset 0 1px 0 rgba(255, 255, 255, .26);
  animation: dock-glow 4s ease-in-out infinite;
  transition: transform .22s var(--ease-2);
}
.dockbtn:hover { transform: translateY(-1px); }
.dockbtn:active { transform: translateY(1px) scale(.995); }

@keyframes dock-glow {
  0%, 100% { box-shadow: 0 6px 18px rgba(23, 165, 82, .32), 0 0 0 0 rgba(23, 165, 82, 0), inset 0 1px 0 rgba(255, 255, 255, .26); }
  50%      { box-shadow: 0 8px 26px rgba(23, 165, 82, .5), 0 0 0 5px rgba(23, 165, 82, .09), inset 0 1px 0 rgba(255, 255, 255, .26); }
}

/* 6. Article typography --------------------------------------------------- */
h1 {
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(1.72rem, 6.6vw, 2.55rem);
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--ink);
  margin: clamp(28px, 7vw, 42px) 0 0;
  text-wrap: balance;
}
h1 .hl { color: var(--red-2); display: block; margin-top: .28em; }
h1 .u {
  background-image: linear-gradient(transparent 62%, rgba(255, 210, 71, .55) 62%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 1.4s .6s var(--ease);
}
.in h1 .u, h1.in .u { background-size: 100% 100%; }

.rule {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: 22px 0 18px;
}

.dek {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 1.03rem;
  line-height: 1.5;
  color: var(--ink-2);
  letter-spacing: -.011em;
  margin: 0 0 22px;
}

h2 {
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(1.32rem, 5.1vw, 1.82rem);
  line-height: 1.18;
  letter-spacing: -.026em;
  color: var(--ink);
  margin: 52px 0 20px;
  text-wrap: balance;
}
h2 .q { color: var(--brand-2); }

h3 {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 1.07rem;
  line-height: 1.35;
  letter-spacing: -.018em;
  color: var(--ink);
  margin: 34px 0 12px;
}
h3.ask { color: var(--red-2); }

p { margin: 0 0 17px; }
p.lead { font-size: 1.06rem; }
strong, b { color: var(--ink-2); font-weight: 700; }
em { font-style: italic; }

/* pseudo-links, exactly like the editorial reference.
   The rule draws itself in when the phrase reaches the middle of the screen
   (see the .lit observer in app.js). */
.k {
  color: var(--brand-2);
  font-weight: 500;
  background-image: linear-gradient(var(--brand), var(--brand));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
}
.js .k {
  background-size: 0% 2px;
  transition: background-size .85s var(--ease);
}
.js .k.lit { background-size: 100% 2px; }

/* section head counter */
.sec { scroll-margin-top: 70px; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 56px 0 -10px;
  font-family: var(--disp);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-2);
}
.tag i {
  font-style: normal;
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 8px;
  background: var(--brand-wash);
  color: var(--brand-deep);
  font-size: 11px;
  letter-spacing: 0;
  box-shadow: inset 0 0 0 1px rgba(20, 179, 194, .22);
}
.tag + h2 { margin-top: 16px; }

/* 7. Media ---------------------------------------------------------------- */
figure { margin: 24px 0; }

.shot {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--wash);
  box-shadow: var(--sh-1);
}
.shot > img { width: 100%; }

figcaption {
  margin-top: 9px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  font-weight: 500;
}

/* yellow annotated caption bar, as in the reference */
.annot { border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-1); }
.annot img { width: 100%; }
.annot .bar {
  background: var(--gold);
  color: var(--gold-ink);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  padding: 9px 12px;
}

/* side-by-side text + image */
.split { display: grid; gap: 16px; margin: 26px 0; }
.split figure { margin: 0; }
.split .txt > :first-child { margin-top: 0; }
@media (min-width: 620px) {
  .split { grid-template-columns: 1fr 1fr; align-items: start; gap: 22px; }
  .split .txt > :last-child { margin-bottom: 0; }
}

/* image that can be tapped to enlarge */
.zoom { cursor: zoom-in; }
.zoom::after {
  content: "";
  position: absolute;
  right: 10px; bottom: 10px;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: rgba(16, 23, 32, .58) center / 15px 15px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-8 8M3 21l8-8'/%3E%3C/svg%3E");
  backdrop-filter: blur(4px);
  opacity: 0;
  transform: scale(.8);
  transition: opacity .6s, transform .6s var(--ease-2);
  pointer-events: none;
}
.shot.in.zoom::after { opacity: 1; transform: none; }

/* 8. Components ----------------------------------------------------------- */

/* byline */
.byline {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0 4px;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  margin: 20px 0 26px;
  padding-bottom: 14px;
}
.avatar {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 32%;
  background: var(--brand-wash);
  box-shadow: 0 3px 10px rgba(16, 23, 32, .16), inset 0 0 0 1px rgba(16, 23, 32, .06);
}
.byline .who { line-height: 1.35; }
.byline .who strong {
  display: block;
  font-family: var(--disp);
  font-size: 14.5px;
  color: var(--ink);
  font-weight: 700;
}
.byline .who span { font-size: 12.5px; color: var(--muted); font-weight: 500; }

/* X / check lists */
.marks { list-style: none; margin: 4px 0 22px; padding: 0; }
.marks li {
  position: relative;
  padding: 9px 0 9px 34px;
  font-weight: 600;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line-2);
}
.marks li:last-child { border-bottom: 0; }
.marks li::before {
  position: absolute;
  left: 0; top: 9px;
  width: 22px; height: 22px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.marks.x li::before {
  content: "✕";
  background: var(--red-wash);
  color: var(--red);
  box-shadow: inset 0 0 0 1px rgba(220, 37, 69, .18);
}
.marks.dot li::before {
  content: "";
  background: var(--brand-wash);
  box-shadow: inset 0 0 0 1px rgba(20, 179, 194, .25);
  background-image: radial-gradient(circle, var(--brand) 34%, transparent 35%);
}
.js .marks li { opacity: 0; transform: translateX(-10px); }
.js .marks.in li, .js .in .marks li { animation: slide-in .8s var(--ease) forwards; animation-delay: var(--sd, 0s); }
.js .marks.in li:nth-child(2), .js .in .marks li:nth-child(2) { animation-delay: calc(var(--sd, 0s) + .17s); }
.js .marks.in li:nth-child(3), .js .in .marks li:nth-child(3) { animation-delay: calc(var(--sd, 0s) + .34s); }
.js .marks.in li:nth-child(4), .js .in .marks li:nth-child(4) { animation-delay: calc(var(--sd, 0s) + .51s); }

/* call-outs */
.note {
  position: relative;
  margin: 26px 0;
  padding: 18px 18px 18px 22px;
  border-radius: var(--r);
  background: var(--red-wash);
  box-shadow: inset 0 0 0 1px rgba(220, 37, 69, .12);
}
.note::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--red);
  transform-origin: top;
  transition: transform 1.1s .15s var(--ease);
}
.js .note::before { transform: scaleY(0); }
.js .note.in::before { transform: none; }
.note .up {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--red-2);
  margin: 0 0 8px;
}
.note .big {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1.38;
  letter-spacing: -.018em;
  color: var(--ink);
  margin: 0;
}
.note p:last-child { margin-bottom: 0; }
.note .shot { margin-top: 14px; }

/* looping demo clip, presented as a silent "gif" */
.clip {
  position: relative;
  display: block;
  margin: 16px 0 0;
  border-radius: var(--r);
  overflow: hidden;
  background: #0d1620;
  box-shadow: var(--sh-1);
  aspect-ratio: 1;
}
.clip.wide { aspect-ratio: 16 / 9; margin: 0; }
figure > .clip { margin: 0; }
.clip video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.clip .tape {
  position: absolute;
  left: 10px; bottom: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(13, 22, 32, .62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff;
  pointer-events: none;
}
.clip .tape::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ff5470;
  box-shadow: 0 0 0 3px rgba(255, 84, 112, .28);
  animation: rec 2s ease-in-out infinite;
}
@keyframes rec { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.cap { margin: 9px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); font-weight: 500; }

/* the product line-up shot sits on a soft wash so the white cut-out doesn't float */
.kitshot .shot {
  background: linear-gradient(165deg, #f3fbfc, #e9f5f7);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-1);
}

.note.good { background: #edfbf2; box-shadow: inset 0 0 0 1px rgba(23, 165, 82, .14); }
.note.good::before { background: var(--go); }
.note.good .up { color: var(--go-2); }

.note.cool { background: var(--brand-wash); box-shadow: inset 0 0 0 1px rgba(20, 179, 194, .16); }
.note.cool::before { background: var(--brand); }
.note.cool .up { color: var(--brand-deep); }

/* speech bubble */
.bubble {
  position: relative;
  margin: 14px 0 26px;
  padding: 16px 18px;
  border-radius: var(--r);
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--brand), var(--sh-1);
  font-style: italic;
  font-weight: 600;
  color: var(--ink-2);
  transform-origin: 20% 0;
}
.bubble::before, .bubble::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 26px;
  border: 9px solid transparent;
}
.bubble::before { border-bottom-color: var(--brand); }
.bubble::after { border-bottom-color: #fff; margin-bottom: -1.5px; }
.bubble p:last-child { margin-bottom: 0; }

/* testimonial */
.said {
  margin: 26px 0;
  padding: 20px;
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, #fbfdfe, #f1f7f9);
  box-shadow: inset 0 0 0 1px var(--line);
}
.said .mk {
  font-family: var(--disp);
  font-size: 46px;
  line-height: .6;
  color: var(--brand);
  opacity: .35;
  margin-bottom: 6px;
}
.said blockquote {
  margin: 0 0 14px;
  font-size: 1.03rem;
  line-height: 1.62;
  font-weight: 500;
  font-style: italic;
  color: var(--ink-2);
}
.said .by { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.said .by b { color: var(--ink-2); }

/* 3-up cards */
.trio { display: grid; gap: 12px; margin: 24px 0; }
@media (min-width: 560px) { .trio { grid-template-columns: repeat(3, 1fr); } }
.card {
  border-radius: var(--r);
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-1);
}
.card .hd {
  padding: 11px 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.32;
  color: var(--ink);
}
.card .hd i {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--brand-2);
  margin-bottom: 3px;
}
.card .ft {
  padding: 9px 12px;
  background: var(--red-wash);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--red-2);
  line-height: 1.35;
}
.card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 560px) { .card img { aspect-ratio: 1 / 1; } }

/* icon row */
.icons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 26px 0;
  padding: 18px 12px;
  border-radius: var(--r);
  background: var(--wash);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.icons figure { margin: 0; text-align: center; }
.icons img {
  width: 100%;
  max-width: 74px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 8px;
  box-shadow: 0 3px 12px rgba(16, 23, 32, .16), inset 0 0 0 1px rgba(255, 255, 255, .5);
}
.icons figcaption {
  margin: 0;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* hand-drawn arrow tying the contaminant row to the carpet photo below it */
.pointsto {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  margin: -12px 0 -14px;
  color: var(--red);
}
.pointsto span {
  font-family: var(--disp);
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.015em;
  color: var(--red-2);
  max-width: 16em;
  padding-top: 4px;
  text-align: right;
}
.pointsto svg { width: 36px; height: 38px; flex: none; }
.js .pointsto svg { opacity: 0; transform: translateY(-8px); transition: opacity .8s .3s var(--ease), transform .8s .3s var(--ease); }
.js .pointsto.in svg { opacity: 1; transform: none; }

/* stat strip */
.stats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 1px;
  margin: 26px 0;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--line);
  box-shadow: inset 0 0 0 1px var(--line);
}
.stats div { background: #fff; padding: 15px 12px; text-align: center; }
.stats b {
  display: block;
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(1.28rem, 5.6vw, 1.6rem);
  letter-spacing: -.03em;
  color: var(--brand-deep);
  line-height: 1.1;
}
.stats span {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--muted);
}

/* before / after slider */
.ba {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sh-1);
  aspect-ratio: 4 / 3;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  background: #222;
  cursor: ew-resize;
}
/* the tall pair is a low-resolution source: cap its width so it isn't upscaled */
.ba.tall { aspect-ratio: 3 / 4; max-width: 320px; margin-inline: auto; }
.ba img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.ba .aft { clip-path: inset(0 0 0 var(--p, 50%)); }
.ba .lbl {
  position: absolute;
  bottom: 10px;
  z-index: 3;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.ba .lbl.b { left: 10px; background: rgba(16, 23, 32, .66); }
.ba .lbl.a { right: 10px; background: rgba(20, 179, 194, .88); }
.ba .hnd {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--p, 50%);
  width: 3px;
  margin-left: -1.5px;
  z-index: 4;
  background: #fff;
  box-shadow: 0 0 14px rgba(0, 0, 0, .45);
  pointer-events: none;
}
.ba .hnd::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 40px; height: 40px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff center / 17px 17px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101720' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-5 6 5 6M15 6l5 6-5 6'/%3E%3C/svg%3E");
  box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
}
.ba .hint {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .93);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .4s;
}
.ba.touched .hint { opacity: 0; }

/* surface cards: which job needs which tool, each with a before/after pair */
.surfaces { display: grid; gap: 12px; margin: 24px 0 26px; }
@media (min-width: 620px) { .surfaces { grid-template-columns: 1fr 1fr; gap: 14px; } }

.surf {
  border-radius: var(--r);
  padding: 14px;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(20, 179, 194, .5);
}
.surf .hd {
  margin: 0 0 12px;
  font-family: var(--disp);
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.018em;
  color: var(--ink);
}
.surf .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.surf .pair figure { position: relative; margin: 0; overflow: hidden; }
.surf .pair img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
@media (min-width: 620px) { .surf .pair img { aspect-ratio: 3 / 4; } }
.surf .pair .lbl {
  position: absolute;
  bottom: 8px;
  padding: 4px 9px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  color: #fff;
}
.surf .pair .lbl.b { left: 8px; background: rgba(16, 23, 32, .88); }
.surf .pair .lbl.a { right: 8px; background: var(--brand); }

/* product blocks */
.prods { margin: 30px 0 8px; }
.prod {
  position: relative;
  margin: 0 0 18px;
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-1);
  overflow: hidden;
  transition: box-shadow .9s, transform .9s var(--ease);
}
.prod.in { box-shadow: inset 0 0 0 1px rgba(20, 179, 194, .3), var(--sh-2); }
.prod .top {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 16px 13px;
  background: linear-gradient(180deg, var(--brand-wash), #fff);
}
.prod .no {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 10px;
  font-family: var(--disp);
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  background: linear-gradient(140deg, var(--brand), var(--brand-deep));
  box-shadow: 0 3px 10px rgba(8, 106, 117, .28);
}
.prod .nm {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 1.08rem;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1.2;
}
.prod .nm i {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-2);
  margin-top: 3px;
}
.prod .body { padding: 4px 16px 16px; }
.prod .body p { font-size: 15.5px; margin-bottom: 12px; }
.prod .body p:last-child { margin-bottom: 0; }
.prod .ba,
.prod .clip { margin: 0 16px 16px; }
.prod .use {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 16px 16px;
}
.prod .use span {
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--wash);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
}

/* how-to steps */
.steps { list-style: none; margin: 26px 0; padding: 0; counter-reset: s; }
.steps li {
  position: relative;
  counter-increment: s;
  padding: 0 0 22px 48px;
}
.steps li::before {
  content: counter(s);
  position: absolute;
  left: 0; top: 0;
  width: 32px; height: 32px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-family: var(--disp);
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  background: linear-gradient(140deg, var(--brand), var(--brand-deep));
  box-shadow: 0 4px 12px rgba(8, 106, 117, .25);
  z-index: 1;
}
.steps li::after {
  content: "";
  position: absolute;
  left: 15.5px; top: 34px; bottom: -2px;
  width: 2px;
  background: linear-gradient(var(--brand), rgba(20, 179, 194, .12));
  transform-origin: top;
  transition: transform 1.1s var(--ease);
}
.js .steps li::after { transform: scaleY(0); }
.js .steps.in li::after { transform: none; }
.js .steps.in li:nth-child(2)::after { transition-delay: .35s; }
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::after { display: none; }
.steps strong {
  display: block;
  font-family: var(--disp);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--ink);
  margin-bottom: 3px;
  padding-top: 4px;
}
.steps span { font-size: 15.5px; }

/* the dark pivot section */
.pivot {
  margin: 46px 0 34px;
  padding: 44px var(--pad) 38px;
  background:
    radial-gradient(120% 80% at 15% 0%, rgba(20, 179, 194, .22), transparent 60%),
    radial-gradient(110% 90% at 95% 100%, rgba(23, 165, 82, .18), transparent 58%),
    #0d1620;
  color: #cfdbe4;
  position: relative;
  overflow: hidden;
}
.pivot::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(20, 179, 194, .6), transparent);
}
.pivot .in-w { max-width: var(--col); margin: 0 auto; }
.pivot .tag { color: #6fe3ef; margin-top: 0; }
.pivot .tag i { background: rgba(20, 179, 194, .16); color: #9defF7; box-shadow: inset 0 0 0 1px rgba(20, 179, 194, .3); }
.pivot h2 { color: #fff; margin-top: 14px; }
.pivot h2 .q { color: #6fe3ef; }
.pivot p { color: #b6c6d3; }
.pivot strong, .pivot b { color: #fff; }
.pivot .k { color: #7fe6ef; background-image: linear-gradient(#7fe6ef, #7fe6ef); }
.pivot .huge {
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(2.1rem, 12vw, 3.4rem);
  line-height: 1;
  letter-spacing: -.045em;
  color: #fff;
  margin: 6px 0 16px;
}
.pivot .huge em {
  font-style: normal;
  background: linear-gradient(100deg, #6fe3ef, #23c06a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pivot .shot { box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.pivot figcaption { color: #8ba0b1; }
.pivot .marks li { color: #dce7ef; border-bottom-color: rgba(255, 255, 255, .08); }
.pivot .marks.x li::before { background: rgba(220, 37, 69, .18); color: #ff8098; box-shadow: inset 0 0 0 1px rgba(220, 37, 69, .3); }
.pivot .note.good { background: rgba(23, 165, 82, .1); box-shadow: inset 0 0 0 1px rgba(35, 192, 106, .26); }
.pivot .note.good .up { color: #4fd98a; }
.pivot .note .big { color: #fff; }
.pivot .cap { color: #8ba0b1; }

/* who-knows row */
.knows { display: grid; gap: 8px; margin: 22px 0; }
.knows div {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
  font-size: 14.5px;
  font-weight: 600;
  color: #e3edf3;
}
.knows div::before {
  content: "✓";
  flex: none;
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 6px;
  background: rgba(35, 192, 106, .2);
  color: #4fd98a;
  font-size: 11px;
  font-weight: 800;
}
.knows div:last-child {
  background: rgba(20, 179, 194, .14);
  box-shadow: inset 0 0 0 1px rgba(20, 179, 194, .34);
  color: #fff;
}

/* 9. Offer ---------------------------------------------------------------- */
.offer {
  position: relative;
  margin: 34px 0 0;
  padding: 30px var(--pad) 36px;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(20, 179, 194, .11), transparent 65%),
    linear-gradient(180deg, #f7fcfd, #fff 55%);
  border-top: 1px solid var(--line);
}
.offer .in-w { max-width: var(--col); margin: 0 auto; }

.kit {
  position: relative;
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-2);
  overflow: hidden;
  margin: 4px 0 24px;
}
.kit .hero {
  display: block;
  width: 100%;
  background: linear-gradient(165deg, #f6f9fa, #eef4f6);
}
.kit .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-2); }
.kit .row figure { margin: 0; background: #fff; }
.kit .row img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* diagonal before/after inside the kit thumbnails */
.kit .dg { position: relative; display: block; }
.kit .dg > img.aft {
  position: absolute;
  inset: 0;
  height: 100%;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.kit .dg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top right, transparent calc(50% - 1px), rgba(255, 255, 255, .85) 50%, transparent calc(50% + 1px));
  pointer-events: none;
}
.kit .row figcaption {
  margin: 0;
  padding: 9px 6px 11px;
  text-align: center;
  font-family: var(--disp);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink);
}
.kit .row figcaption i {
  display: block;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
}
.kit .foot {
  padding: 13px 16px;
  background: linear-gradient(180deg, #fff, var(--brand-wash));
  text-align: center;
  font-family: var(--disp);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--ink);
  border-top: 1px solid var(--line-2);
}

/* Promo sticker. Sized around its longest word: "KEDVEZMÉNY" needs ~62px of
   run, so the disc has to clear that plus padding, otherwise the label spills
   over the edge and onto the photo. */
.badge {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  width: 86px; height: 86px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  font-family: var(--disp);
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -.03em;
  color: #fff;
  background: radial-gradient(circle at 34% 26%, #ff7189, var(--red) 56%, var(--red-2));
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, .55),
    0 8px 22px rgba(184, 22, 52, .34),
    inset 0 1px 0 rgba(255, 255, 255, .35);
}
.badge i {
  font-style: normal;
  display: block;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1;
  opacity: .95;
}

.perks { display: grid; gap: 10px; margin: 22px 0; }
.perk {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border-radius: var(--r);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-1);
}
.perk .ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--brand-wash);
  box-shadow: inset 0 0 0 1px rgba(20, 179, 194, .2);
  color: var(--brand-deep);
}
.perk .ic svg { width: 21px; height: 21px; }
.perk .tx { line-height: 1.5; }
.perk .tx strong {
  display: block;
  font-family: var(--disp);
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--ink);
  margin-bottom: 2px;
}
.perk .tx span { font-size: 14px; color: var(--body); }

.seal {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 22px 0;
  padding: 16px;
  border-radius: var(--r);
  background: linear-gradient(140deg, #fffdf3, #fff8e2);
  box-shadow: inset 0 0 0 1px rgba(255, 210, 71, .5);
}
.seal .medal {
  flex: none;
  width: 58px; height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--disp);
  font-weight: 800;
  font-size: 17px;
  line-height: .95;
  color: #5a4300;
  background: radial-gradient(circle at 34% 28%, #ffe9a3, var(--gold) 60%, #e0ab00);
  box-shadow: 0 5px 16px rgba(224, 171, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.seal .medal i { display: block; font-style: normal; font-size: 8.5px; letter-spacing: .1em; margin-top: 2px; }
.seal .tx strong {
  display: block;
  font-family: var(--disp);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--ink);
  margin-bottom: 3px;
}
.seal .tx span { font-size: 14px; line-height: 1.5; }

/* CTA */
.cta {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 22px 0 14px;
  padding: 19px 24px;
  border-radius: 15px;
  border: 0;
  width: 100%;
  text-align: center;
  text-decoration: none;
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(.95rem, 3.9vw, 1.09rem);
  line-height: 1.28;
  letter-spacing: -.012em;
  color: #fff;
  background: linear-gradient(135deg, var(--go) 0%, #24c86e 52%, var(--go) 100%);
  box-shadow: 0 10px 28px rgba(23, 165, 82, .35), inset 0 1px 0 rgba(255, 255, 255, .28);
  cursor: pointer;
  transition: transform .22s var(--ease-2), box-shadow .3s;
  animation: breathe 3.4s ease-in-out infinite;
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(23, 165, 82, .42), inset 0 1px 0 rgba(255, 255, 255, .28); }
.cta:active { transform: translateY(1px) scale(.994); }
.cta small {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  opacity: .9;
}
.cta .sheen {
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .42), transparent);
  transform: skewX(-18deg);
  animation: sweep 3.6s 1.2s ease-in-out infinite;
  pointer-events: none;
}

.trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
  margin: 4px 0 28px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
}
.trust span { display: inline-flex; align-items: center; gap: 5px; }
.trust span::before { content: "✓"; color: var(--go); font-weight: 800; }

/* Page footer – kept well clear of the closing CTA.
   Scoped to the element: a bare .foot also matches .kit .foot inside the
   offer card, which leaked this margin into the middle of that card. */
footer.foot {
  margin-top: 72px;
  padding: 34px var(--pad) 120px;
  text-align: center;
  border-top: 1px solid var(--line);
  background: var(--wash);
}
footer.foot .wordmark { justify-content: center; margin-bottom: 8px; }
footer.foot p { font-size: 11.5px; color: var(--faint); margin: 0 auto; max-width: 520px; line-height: 1.6; }
footer.foot p + p { margin-top: 8px; }

/* lightbox */
.lb {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(9, 14, 20, .9);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.lb.on { opacity: 1; visibility: visible; }
.lb img {
  max-width: 100%;
  max-height: 88vh;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  transform: scale(.94);
  transition: transform .35s var(--ease-2);
}
.lb.on img { transform: none; }
.lb .x {
  position: absolute;
  top: 14px; right: 14px;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

/* 10. Motion -------------------------------------------------------------- */
/* Hidden start states are scoped to .js so the page stays fully readable
   when scripting is unavailable.
   --sd is a per-batch stagger the script sets, so a screenful of elements
   cascades in instead of all landing on the same frame. */
.js .r { opacity: 0; transform: translateY(30px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); will-change: opacity, transform; }
.js .r.in { opacity: 1; transform: none; }

/* The clip lives on the inner image, never on the observed element itself:
   a clipped target reports an empty intersection rect in Chromium, which would
   deadlock the reveal (never visible -> never observed -> never revealed). */
.js .rw > img { clip-path: inset(0 0 100% 0); transition: clip-path 1.5s var(--ease); }
.js .rw.in > img { clip-path: inset(0 0 0 0); }

.js .rz { opacity: 0; transform: scale(.94); transition: opacity 1s var(--ease), transform 1s var(--ease-2); }
.js .rz.in { opacity: 1; transform: none; }

/* delays last so they win over the shorthands above */
.js .r, .js .rz { transition-delay: var(--sd, 0s); }
.js .rw > img { transition-delay: var(--sd, 0s); }
.js .r.d1 { transition-delay: calc(var(--sd, 0s) + .17s); }
.js .r.d2 { transition-delay: calc(var(--sd, 0s) + .34s); }
.js .r.d3 { transition-delay: calc(var(--sd, 0s) + .51s); }

@keyframes slide-in { to { opacity: 1; transform: none; } }
}
@keyframes breathe {
  0%, 100% { box-shadow: 0 10px 28px rgba(23, 165, 82, .35), inset 0 1px 0 rgba(255, 255, 255, .28); }
  50% { box-shadow: 0 14px 36px rgba(23, 165, 82, .5), inset 0 1px 0 rgba(255, 255, 255, .28); }
}
@keyframes sweep {
  0% { left: -60%; }
  55%, 100% { left: 125%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
  .js .r, .js .rz { opacity: 1; transform: none; }
  .js .rw > img { clip-path: none; }
  .js .k { background-size: 100% 2px; }
  .js .pointsto svg { opacity: 1; transform: none; }
  .clip .tape::before { animation: none; }
  .marks li { opacity: 1; transform: none; }
  .note::before, .steps li::after { transform: none; }
  h1 .u { background-size: 100% 100%; }
}

/* 11. Responsive ---------------------------------------------------------- */
@media (max-width: 400px) {
  :root { --pad: 16px; }
  body { font-size: 16.5px; }
  .icons { grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 14px 8px; }
  .icons figcaption { font-size: 9px; letter-spacing: .04em; }
  .dockbtn { padding: 15px 14px; }
}

@media (min-width: 780px) {
  :root { --pad: 40px; }
  body { font-size: 17.5px; }
  .shell { margin: 26px auto 34px; border-radius: 18px; overflow: hidden; }
  .trio { gap: 14px; }
}

/* inline CTA – only placed by variants that test button placement */
.cta-inline { margin: 30px 0 34px; }
.cta-inline .cta { margin: 0; }