/* /iv-terapiya/<slug>/ protocol pages. Site tokens (styles.css) + one accent
   per line, --ln / --ln-soft, set on <main> from the bag label colour.
   The recurring motif is the drip line: effects hang on it as drops, and the
   three procedure steps sit on the same line. One drop falls once on load. */

.ivp { --ln: var(--teal-500); --ln-soft: var(--teal-50); }
.ivp .breadcrumb { padding: 0 0 22px; flex-wrap: wrap; }

/* ---------- Hero ---------- */
.ivp-hero { padding: 36px 0 24px; }
.ivp-hero-grid {
  display: grid; grid-template-columns: minmax(300px, 5fr) 7fr;
  gap: clamp(32px, 5vw, 80px); align-items: center;
}
.ivp-stage {
  position: relative; margin: 0;
  aspect-ratio: 4 / 5; border-radius: var(--r-xl);
  background:
    radial-gradient(120% 80% at 50% 35%, #fff 0%, var(--ln-soft) 62%, var(--ln-soft) 100%);
  display: grid; place-items: center; overflow: hidden;
  border: 1px solid var(--line);
}
.ivp-bagimg {
  position: relative; z-index: 1;
  width: auto; height: 84%; max-width: 86%; object-fit: contain;
  filter: drop-shadow(0 22px 26px rgba(14,43,48,.14));
}
.ivp-floor {
  position: absolute; left: 50%; bottom: 7%; width: 46%; height: 18px; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(closest-side, rgba(14,43,48,.18), transparent);
}

/* Drawn bag (no photo yet): an outline in the line colour, name on the label. */
.ivp-drawn { position: relative; z-index: 1; display: grid; place-items: center; width: 62%; }
.ivp-drawn svg { width: 100%; height: auto; overflow: visible; }
.ivp-drawn-bag { fill: rgba(255,255,255,.72); stroke: var(--ln); stroke-width: 2.5; }
.ivp-drawn-hole { fill: var(--ln-soft); stroke: var(--ln); stroke-width: 2; }
.ivp-drawn-band { fill: var(--ln); }
.ivp-drawn-port { fill: #fff; stroke: var(--ln); stroke-width: 2; }
.ivp-drawn-row { stroke: var(--ln); stroke-opacity: .28; stroke-width: 6; stroke-linecap: round; }
.ivp-drawn-name {
  position: absolute; left: 22%; right: 22%; top: 21.8%; height: 18.2%;
  display: grid; place-items: center; text-align: center;
  color: #fff; font-weight: 800; font-size: clamp(15px, 1.6vw, 22px); line-height: 1.05; letter-spacing: -.01em;
}

.ivp-line { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; font-weight: 600; color: var(--ln); }
.ivp-line-dot {
  width: 10px; height: 13px; flex: none;
  background: var(--ln); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
}
.ivp-h1 { margin: 14px 0 0; letter-spacing: -.035em; line-height: .98; color: var(--ink); }
.ivp-h1-kind { display: block; font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; letter-spacing: -.01em; color: var(--muted); margin-bottom: 8px; }
.ivp-h1-name { display: block; font-size: clamp(44px, 6.4vw, 92px); font-weight: 800; overflow-wrap: anywhere; hyphens: manual; }
.ivp-lead { margin: 22px 0 0; max-width: 34em; font-size: 18px; line-height: 1.55; color: var(--ink-2); }

.ivp-spec {
  display: grid; grid-template-columns: repeat(3, auto); justify-content: start; width: fit-content; max-width: 100%;
  margin: 28px 0 0; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
}
.ivp-spec div { padding: 14px 22px; }
.ivp-spec div + div { border-left: 1px solid var(--line); }
.ivp-spec dt { font-size: 13px; color: var(--muted); }
.ivp-spec dd { margin: 4px 0 0; font-size: 18px; font-weight: 700; color: var(--ink); white-space: nowrap; }

.ivp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 28px; }
.ivp-phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); }
.ivp-phone:hover { color: var(--teal-600); }
.ivp-fine { margin: 16px 0 0; font-size: 14px; color: var(--muted); }

/* ---------- Effects on the drip line + who it is for ---------- */
.ivp-body { padding: 56px 0 24px; }
.ivp-body-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.ivp-h2 { margin: 0; font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; color: var(--ink); }

.ivp-drip { position: relative; list-style: none; margin: 30px 0 0; padding: 4px 0 0 52px; }
.ivp-drip::before { /* the tube */
  content: ""; position: absolute; left: 17px; top: -10px; bottom: 26px; width: 3px; border-radius: 3px;
  background: linear-gradient(var(--ln-soft), var(--ln) 22%, var(--ln));
}
.ivp-effect {
  position: relative; padding: 14px 0 22px;
  font-size: clamp(19px, 1.7vw, 24px); font-weight: 650; letter-spacing: -.015em; line-height: 1.3; color: var(--ink);
}
.ivp-effect + .ivp-effect { border-top: 1px solid var(--line); }
.ivp-effect::before { /* a drop on the tube */
  content: ""; position: absolute; left: -44px; top: 17px; width: 18px; height: 23px;
  background: var(--ln); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  box-shadow: 0 0 0 5px var(--bg);
}
/* the one load moment: a drop leaves the tube and settles on the first effect */
.ivp-drip::after {
  content: ""; position: absolute; left: 12px; top: -10px; width: 13px; height: 17px;
  background: var(--lime-300); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  opacity: 0; animation: ivpDrop 1.4s cubic-bezier(.45, 0, .7, 1) .5s 1 forwards;
}
@keyframes ivpDrop {
  0% { opacity: 0; transform: translateY(-16px) scale(.6); }
  25% { opacity: 1; }
  80% { opacity: 1; transform: translateY(26px) scale(1); }
  100% { opacity: 0; transform: translateY(30px) scale(1.4); }
}

.ivp-for {
  background: var(--ln-soft); border-radius: var(--r-lg); padding: 30px 30px 28px;
}
.ivp-needs { list-style: none; margin: 18px 0 0; padding: 0; }
.ivp-needs li { position: relative; padding: 10px 0 10px 30px; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.ivp-needs li::before {
  content: ""; position: absolute; left: 2px; top: 14px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--ln) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.ivp-label { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(14,43,48,.1); }
.ivp-label p { margin: 0; font-size: 13px; color: var(--muted); }
.ivp-label ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 10px 0 0; padding: 0; }
.ivp-label li { padding: 7px 13px; border-radius: 999px; background: #fff; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }

/* ---------- Procedure: three steps on the same line ---------- */
.ivp-how { padding: 56px 0; }
.ivp-steps { counter-reset: s; list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; }
.ivp-steps::before { content: ""; position: absolute; left: 22px; right: 22px; top: 21px; height: 3px; border-radius: 3px; background: var(--ln-soft); }
.ivp-steps li { counter-increment: s; position: relative; display: flex; flex-direction: column; gap: 6px; }
.ivp-steps li::before {
  content: counter(s); position: relative; z-index: 1;
  width: 44px; height: 44px; margin-bottom: 14px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); border: 3px solid var(--ln); color: var(--ln); font-weight: 800; font-size: 17px;
}
.ivp-steps strong { font-size: 19px; font-weight: 750; color: var(--ink); }
.ivp-steps span { font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 26em; }

/* ---------- Other drips of the line ---------- */
.ivp-more { padding: 8px 0 64px; }
.ivp-more-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 28px; }
.ivp-all { font-weight: 700; color: var(--teal-600); border-bottom: 1px solid currentColor; }
.ivp-sibs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; margin-top: 26px; }
.ivp-sib { display: flex; flex-direction: column; gap: 4px; color: var(--ink); }
.ivp-sib-pic {
  display: grid; place-items: center; height: 200px; margin-bottom: 10px; overflow: hidden;
  border-radius: var(--r-md); background: var(--ln-soft);
}
.ivp-sib-pic img { height: 168px; width: auto; max-width: 90%; object-fit: contain; transition: transform .25s ease; }
.ivp-sib:hover .ivp-sib-pic img { transform: translateY(-4px); }
.ivp-sib strong { font-size: 16px; font-weight: 750; }
.ivp-sib > span:last-child { font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.ivp-sib:hover strong { color: var(--ln); }
.ivp-drawn--sm { width: 46%; }
.ivp-drawn--sm .ivp-drawn-name { display: none; } /* the name is printed under the picture */

/* ---------- Narrow screens ---------- */
@media (max-width: 860px) {
  .ivp-hero { padding: 16px 0 8px; }
  .ivp-hero-grid { grid-template-columns: 1fr; gap: 22px; }
  .ivp-stage { aspect-ratio: auto; height: 320px; border-radius: var(--r-lg); }
  .ivp-intro { order: -1; }
  .ivp-spec { grid-template-columns: repeat(3, 1fr); justify-content: stretch; width: auto; }
  .ivp-spec div { padding: 12px 12px; }
  .ivp-spec dd { font-size: 15px; white-space: normal; }
  .ivp-cta .btn { flex: 1 1 100%; justify-content: center; }
  .ivp-body { padding-top: 36px; }
  .ivp-body-grid { grid-template-columns: 1fr; }
  .ivp-for { padding: 24px 20px; }
  .ivp-steps { grid-template-columns: 1fr; gap: 18px; }
  .ivp-steps::before { left: 20px; right: auto; top: 22px; bottom: 22px; width: 3px; height: auto; }
  .ivp-steps li { padding-left: 64px; min-height: 44px; }
  .ivp-steps li::before { position: absolute; left: 0; top: 0; margin: 0; }
  .ivp-sibs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .ivp-sib { flex: 0 0 150px; scroll-snap-align: start; }
  .ivp-sib-pic { height: 170px; }
  .ivp-sib-pic img { height: 142px; }
}
@media (prefers-reduced-motion: reduce) {
  .ivp-drip::after { animation: none; }
  .ivp-sib-pic img { transition: none; }
}

/* ---------- Phones (2026-10-18, user: "eyes end up looking different places,
   no title that catches the eye") ----------
   One tinted card read top to bottom, centred: bag photo → small labels →
   big name → one line → three fact pills → one booking button → phone +
   Telegram. Same text as desktop; desktop layout untouched. */
.ivp-tg { display: none; }
@media (max-width: 640px) {
  .ivp-hero { padding: 12px 0 4px; }
  .ivp-hero .wrap.ivp-head {
    display: flex; flex-direction: column; align-items: center; gap: 0;
    margin: 0 10px; padding: 18px 18px 22px; border-radius: 28px; text-align: center;
    background: radial-gradient(120% 60% at 50% 22%, #fff 0%, var(--ln-soft) 70%);
    border: 1px solid var(--line);
  }
  .ivp-intro { display: contents; }
  .ivp .breadcrumb { order: 0; justify-content: center; padding: 0; font-size: 12px; }
  .ivp-stage { order: 1; width: 100%; height: 250px; margin: 8px 0 16px; background: none; border: 0; aspect-ratio: auto; }
  .ivp-bagimg { height: 100%; }
  .ivp-line { order: 2; justify-content: center; font-size: 13px; }
  .ivp-h1 { order: 3; margin-top: 8px; }
  .ivp-h1-kind { font-size: 15px; margin-bottom: 4px; }
  .ivp-h1-name { font-size: clamp(40px, 13vw, 56px); line-height: 1; }
  .ivp-lead { order: 4; margin: 12px 0 0; font-size: 16px; line-height: 1.45; }
  .ivp-spec {
    order: 5; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
    width: auto; margin: 16px 0 0; border: 0; background: none;
  }
  .ivp-spec div, .ivp-spec div + div {
    display: flex; align-items: baseline; gap: 5px; padding: 6px 12px;
    border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.8);
  }
  .ivp-spec div:not(:last-child) dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ivp-spec dt { font-size: 13px; }
  .ivp-spec dd { margin: 0; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
  .ivp-cta { order: 6; width: 100%; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
  .ivp-cta .btn { flex: 1 1 100%; justify-content: center; padding: 16px 22px; font-size: 16px; }
  .ivp-phone, .ivp-tg {
    display: inline-flex; flex: 1 1 0; min-width: 0; justify-content: center; align-items: center; gap: 6px;
    padding: 12px 8px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.8);
    font-size: 14px; font-weight: 700; color: var(--teal-800, #1D5C63); white-space: nowrap;
  }
  .ivp-fine { order: 7; margin: 14px 0 0; font-size: 12.5px; }

  /* Below the card: calmer rhythm, smaller headings, tighter effect rows. */
  .ivp-body { padding-top: 32px; }
  .ivp-h2 { font-size: 24px; }
  .ivp-drip { margin-top: 16px; }
  .ivp-effect { padding: 10px 0 14px; font-size: 17px; }
  .ivp-effect::before { top: 12px; width: 15px; height: 19px; left: -42px; }
}

/* Effects list: numbers instead of drops (2026-10-18, user: the green drops
   "look bad"). Thin 01–05 in the line colour, no tube, no falling drop. */
.ivp-drip { counter-reset: eff; padding-left: 48px; }
.ivp-drip::before, .ivp-drip::after { content: none; display: none; animation: none; }
.ivp-effect { counter-increment: eff; }
.ivp-effect::before {
  content: counter(eff, decimal-leading-zero);
  left: -48px; top: calc(14px + .65em); width: auto; height: auto;
  background: none; border-radius: 0; box-shadow: none;
  font-size: 13px; font-weight: 700; letter-spacing: .1em; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--ln);
}
@media (max-width: 640px) {
  .ivp-drip { padding-left: 40px; }
  .ivp-effect::before { left: -40px; top: 15px; width: auto; height: auto; font-size: 12.5px; }
}

/* ---------- "Как проходит процедура" — phones (2026-10-18, user: "more creative") ----------
   Each step is a card with a drop that fills ⅓ → ⅔ → full on the way to the
   procedure; the drops are joined by a short IV tube. The last card is the
   destination (tinted, with the time). Desktop keeps the horizontal line. */
.ivp-vessel, .ivp-step-n, .ivp-time { display: none; }
@media (max-width: 640px) {
  .ivp-how { padding: 40px 0 44px; }
  .ivp-steps { gap: 14px; margin-top: 20px; }
  .ivp-steps::before { display: none; }
  .ivp-steps li {
    display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: start;
    padding: 16px 16px 16px 14px; min-height: 0;
    background: #fff; border: 1px solid var(--line); border-radius: 20px;
  }
  .ivp-steps li::before { display: none; }
  .ivp-steps li:last-child { background: var(--ln-soft); border-color: color-mix(in srgb, var(--ln) 30%, transparent); }
  /* the tube between drops */
  .ivp-steps li:not(:last-child)::after {
    content: ""; position: absolute; left: 35px; bottom: -15px; width: 3px; height: 16px;
    border-radius: 3px; background: var(--ln); opacity: .45;
  }
  .ivp-steps .ivp-vessel { display: block; grid-column: 1; grid-row: 1 / span 3; width: 40px; height: 52px; margin: 0; }
  .ivp-vessel svg { width: 100%; height: 100%; overflow: visible; }
  .ivp-vessel-line { fill: none; stroke: var(--ln); stroke-width: 2.2; }
  .ivp-vessel-fill {
    fill: var(--ln); opacity: .9;
    transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(var(--fill));
  }
  .ivp-steps--anim .ivp-vessel-fill { transform: scaleY(0); transition: transform 1.1s cubic-bezier(.3,.7,.2,1) .15s; }
  .ivp-steps--anim li.is-in .ivp-vessel-fill { transform: scaleY(var(--fill)); }
  .ivp-step-n { display: block; grid-column: 2; font-size: 12.5px; font-weight: 700; color: var(--ln); letter-spacing: .01em; }
  .ivp-steps strong { grid-column: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 2px; font-size: 18px; }
  .ivp-steps span { grid-column: 2; margin-top: 4px; font-size: 14.5px; }
  .ivp-time {
    display: inline-block; padding: 3px 10px; border-radius: 999px; font-style: normal;
    font-size: 12.5px; font-weight: 700; color: #fff; background: var(--ln);
  }
}

/* Bag photo size in px, not %: iOS Safari didn't resolve height:100% inside
   the grid stage and showed the photo full-size, cropped (2026-10-18, user
   screenshot "only half of it is there"). */
@media (max-width: 860px) {
  .ivp-stage { display: flex; align-items: center; justify-content: center; }
  .ivp-bagimg { height: 272px; width: auto; max-width: 100%; object-fit: contain; }
}
@media (max-width: 640px) {
  .ivp-stage { height: 250px; }
  .ivp-bagimg { height: 236px; }
}
/* Same for the drawn bag (protocols without a photo): size by height in px. */
@media (max-width: 860px) {
  .ivp-stage .ivp-drawn { width: auto; height: 272px; aspect-ratio: 240 / 320; }
  .ivp-stage .ivp-drawn svg { width: 100%; height: 100%; }
}
@media (max-width: 640px) {
  .ivp-stage .ivp-drawn { height: 236px; }
}

/* Phones: show only the top of the bag (logo + protocol name + subtitle) and
   dissolve its lower edge into the card (2026-10-18, user). In every bag photo
   the label band ends at ~39% of the height and the bag starts at ~9%, so the
   photo is 320px wide, lifted by 8% and the stage cut at ~37% with a soft
   mask over its last third. */
@media (max-width: 640px) {
  .ivp-stage {
    position: relative; display: block; height: 154px; margin: 10px 0 14px; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 64%, rgba(0,0,0,.55) 82%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 64%, rgba(0,0,0,.55) 82%, transparent 100%);
  }
  .ivp-stage .ivp-bagimg {
    position: absolute; left: 50%; top: 0; width: 320px; height: auto; max-width: none;
    transform: translate(-50%, -8%); filter: none;
  }
  .ivp-stage .ivp-drawn {
    position: absolute; left: 50%; top: 0; width: 270px; height: auto; aspect-ratio: 240 / 320;
    transform: translate(-50%, -2%);
  }
  .ivp-stage .ivp-drawn-name { font-size: 22px; }
  .ivp-floor { display: none; }
}

/* ---------- Phones: "the label continues" (option A, 2026-10-18) ----------
   The cropped bag fades straight into a label built like the one printed on
   the bag: coloured band (kicker, name in condensed caps, line name), white
   area with the bag's "+" points, fine-print facts strip with a thin coloured
   edge. Segments are siblings (intro is display:contents), stacked gap-free
   by `order`; together they read as one label. */
.ivp-tag-kick, .ivp-tag-sub, .ivp-tag-points { display: none; }
@media (max-width: 640px) {
  .ivp-line, .ivp-lead, .ivp-label { display: none; }
  .ivp-stage { margin-bottom: 0; }

  .ivp-tag-kick, .ivp .ivp-h1, .ivp-tag-sub, .ivp-tag-points, .ivp-spec { align-self: stretch; margin-left: 0; margin-right: 0; }

  /* coloured band */
  .ivp-tag-kick {
    display: block; order: 2; margin: 0; padding: 16px 16px 0;
    background: var(--ln); color: rgba(255,255,255,.82); border-radius: 18px 18px 0 0;
    font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  }
  .ivp .ivp-h1 { order: 3; margin: 0; padding: 4px 16px 0; background: var(--ln); color: #fff; }
  .ivp-h1-kind { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ivp-h1-name {
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif; font-weight: 700;
    font-size: clamp(40px, 12.5vw, 54px); line-height: 1; letter-spacing: .01em; text-transform: uppercase;
  }
  .ivp-tag-sub {
    display: block; order: 4; margin: 0; padding: 6px 16px 16px;
    background: var(--ln); color: rgba(255,255,255,.9);
    font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  }

  /* white area with the bag's points */
  .ivp-tag-points {
    display: block; order: 5; list-style: none; margin: 0; padding: 6px 16px 4px; text-align: left;
    background: #fff; border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  }
  .ivp-tag-points li {
    position: relative; padding: 10px 0 10px 28px; font-size: 16.5px; font-weight: 600; color: var(--ink);
  }
  .ivp-tag-points li + li { border-top: 1px solid var(--line); }
  .ivp-tag-points li::before {
    content: "+"; position: absolute; left: 2px; top: 6px; font-size: 22px; font-weight: 600; color: var(--ln);
  }

  /* fine-print facts with the label's thin coloured bottom edge */
  .ivp-spec {
    order: 6; display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 0; margin: 0;
    background: #fff; border: 1px solid var(--line); border-top: 1px dashed var(--line);
    border-bottom: 6px solid var(--ln); border-radius: 0 0 18px 18px;
  }
  .ivp-spec div, .ivp-spec div + div {
    display: flex; flex-direction: column-reverse; align-items: center; justify-content: flex-end; gap: 2px;
    padding: 12px 6px; border: 0; border-radius: 0; background: none;
  }
  .ivp-spec div + div { border-left: 1px solid var(--line); }
  .ivp-spec div:not(:last-child) dt { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .ivp-spec dt { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .ivp-spec dd { font-size: 14px; font-weight: 700; white-space: normal; line-height: 1.2; }

  .ivp-cta { margin-top: 18px; }
}
/* Long names (e.g. POST-OPERATION) must fit the band: size the condensed caps
   from the longest word (--nw, set in iv-protocol.php; ~0.52em per letter). */
@media (max-width: 640px) {
  .ivp-h1-name { font-size: min(54px, calc((100vw - 92px) / (var(--nw, 6) * .52))); overflow-wrap: normal; }
}
/* Long protocol names: the booking button may wrap instead of overflowing. */
@media (max-width: 640px) {
  .ivp-cta .btn { white-space: normal; text-align: center; line-height: 1.25; min-width: 0; }
}

/* PREVIEW — Detox+ only until the user confirms (2026-10-18, user: "the bag is
   too small next to the band", "do it for one IV page so I can confirm").
   The bag's printed label is exactly as wide as the band (label = 42.5% of the
   photo width) and the photo is cut in the plain green just above the printed
   name (Detox+: white tab ends 28%, plain green 28.5–31%, name from 31.5%), so
   the band's name reads as the bag's own label continuing. The bag top fades
   in; the cut edge blends into the band colour. Band width = 100vw − 56px. */
@media (max-width: 640px) {
  .ivp[data-slug] .ivp-head { --bw: calc(100vw - 56px); }
  .ivp[data-slug] .ivp-stage {
    height: calc(var(--bw) * .52); margin: 4px 0 0; border-radius: 0;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.5) 12%, #000 34%);
            mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.5) 12%, #000 34%);
  }
  .ivp[data-slug] .ivp-stage::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; z-index: 2;
    background: linear-gradient(180deg, transparent, var(--ln));
  }
  .ivp[data-slug] .ivp-stage .ivp-bagimg {
    width: calc(var(--bw) / .4255); left: 50%; top: 0; transform: translate(-50%, -14%);
  }
  .ivp[data-slug] .ivp-tag-kick { border-radius: 0; margin-top: -1px; padding-top: 6px; }
}

/* ---------- PREVIEW, Detox+ only: the label card IS an IV bag (phones) ----------
   2026-10-18, user: "the top is just the IV bag — you see the edges, pointy on
   the left and right, a hole in the middle; make it 3D, like a pop-up". The
   photo is hidden; .ivp-bag wraps H1 → facts and becomes a clear plastic bag:
   SVG top (pointed corners, seal, hanging hole, sheen), plastic side/bottom
   margins around the label, MEDELA tab on the label, depth shadow, one rise
   on load. Everywhere else .ivp-bag is display:contents (no effect). */
.ivp-bag { display: contents; }
.ivp-bagtop, .ivp-bagtab { display: none; }
@media (max-width: 640px) {
  .ivp[data-slug] .ivp-head { background: none; border: 0; padding: 4px 6px 20px; }
  .ivp[data-slug] .ivp-stage { display: none; }
  .ivp[data-slug] .ivp .breadcrumb, .ivp[data-slug] .breadcrumb { margin-bottom: 18px; }
  .ivp[data-slug] .ivp-bag {
    --bagw: calc(100vw - 40px); --toph: calc(var(--bagw) * 96 / 360);
    order: 2; align-self: stretch; position: relative; isolation: isolate; display: flex; flex-direction: column;
    padding: 0 12px 14px; margin: 0 4px; background: none;
    filter: drop-shadow(0 22px 26px rgba(14,43,48,.16)) drop-shadow(0 4px 6px rgba(14,43,48,.08));
    animation: ivpBagRise .8s cubic-bezier(.2,.9,.25,1.15) .1s both;
  }
  /* plastic sides + bottom, only below the shaped top */
  .ivp[data-slug] .ivp-bag::before {
    content: ""; position: absolute; z-index: -1; left: 1px; right: 1px; top: calc(var(--toph) - 2px); bottom: 0;
    background: linear-gradient(90deg, #e3ebe9 0%, #fbfdfc 18%, #fff 50%, #f6f9f8 82%, #dfe7e5 100%);
    border: 1px solid rgba(14,43,48,.12); border-top: 0; border-radius: 0 0 30px 30px; top: calc(var(--toph) * .4);
    box-shadow: inset 0 -10px 18px rgba(14,43,48,.05);
  }
  .ivp[data-slug] .ivp-bag > * { order: 0; }
  .ivp[data-slug] .ivp-bagtop { display: block; margin: 0 -12px -1px; line-height: 0; }
  .ivp[data-slug] .ivp-bagtop svg { width: 100%; height: auto; display: block; overflow: visible; }
  .ivp-bagtop-body { fill: url(#ivpPlastic); }
  .ivp-bagtop-edge { fill: none; stroke: rgba(14,43,48,.12); stroke-width: 1; }
  .ivp-bagtop-seal { fill: none; stroke: rgba(14,43,48,.13); stroke-width: 1.2; stroke-dasharray: 2 3; }
  .ivp-bagtop-sheen { fill: url(#ivpSheen); opacity: .7; }
  .ivp-bagtop-hole { fill: var(--bg); stroke: rgba(14,43,48,.22); stroke-width: 1.2; }
  /* the label inside the bag */
  .ivp[data-slug] .ivp-tag-kick { position: relative; order: 1; margin-top: 0; padding-top: 62px; border-radius: 16px 16px 0 0; }
  .ivp[data-slug] .ivp .ivp-h1, .ivp[data-slug] .ivp-h1 { order: 2; }
  .ivp[data-slug] .ivp-tag-sub { order: 3; }
  .ivp[data-slug] .ivp-tag-points { order: 4; border: 0; }
  .ivp[data-slug] .ivp-spec { order: 5; border-left: 0; border-right: 0; border-radius: 0 0 16px 16px; }
  .ivp[data-slug] .ivp-bagtab {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    position: absolute; z-index: 3; left: 50%; transform: translateX(-50%);
    top: calc(var(--toph) - 22px); width: 108px; padding: 8px 0 7px;
    background: #fff; border-radius: 0 0 12px 12px; box-shadow: 0 6px 12px rgba(14,43,48,.12);
  }
  .ivp-bagtab img { width: 34px; height: 34px; }
  .ivp-bagtab b { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: #8fb23a; }
  .ivp[data-slug] .ivp-cta { order: 3; }
  .ivp[data-slug] .ivp-fine { order: 4; }
}
@keyframes ivpBagRise { from { opacity: 0; transform: translateY(26px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ivp-bag { animation: none !important; } }

/* ---------- PREVIEW v3, Detox+ only: photoreal plastic bag (phones) ----------
   2026-10-18, user: "add a plastic bag effect, use Higgsfield, make it
   perfect". The bag is a Higgsfield render (GPT Image 2, empty clear PVC bag
   on the page colour #FAF8F2), sliced into top (pointed corners, seal, hole,
   creases), a 1-row middle that repeats seamlessly, and bottom (seal + blue
   ports); slice edges are cross-faded into the middle row. Stretches to any
   label height. Source: .tmp_screens/higgsfield-phone-heroes/bagfull-v1.png.
   Ratios (of bag width): top .779, bottom .741; label from .27, side margin
   .085, label ends .40 above the bottom. Overrides the v2 drawn top. */
@media (max-width: 640px) {
  .ivp[data-slug] .ivp-bag {
    --bagw: min(calc(100vw - 28px), 420px);
    width: var(--bagw); align-self: center; margin: 0;
    padding: calc(var(--bagw) * .27) calc(var(--bagw) * .085) calc(var(--bagw) * .40);
    background:
      url("ivbag-top.webp") top center / 100% auto no-repeat,
      url("ivbag-bottom.webp") bottom center / 100% auto no-repeat,
      url("ivbag-mid.webp") center / 100% auto repeat-y;
    filter: drop-shadow(0 18px 22px rgba(14,43,48,.10));
  }
  .ivp[data-slug] .ivp-bag::before { content: none; }
  .ivp[data-slug] .ivp-bagtop { display: none; }
  .ivp[data-slug] .ivp-bagtab { top: calc(var(--bagw) * .27 - 1px); }
  /* the label is printed on the plastic: slight see-through + a gloss streak */
  .ivp[data-slug] .ivp-tag-kick,
  .ivp[data-slug] .ivp-h1,
  .ivp[data-slug] .ivp-tag-sub { background: color-mix(in srgb, var(--ln) 94%, transparent); }
  .ivp[data-slug] .ivp-tag-points,
  .ivp[data-slug] .ivp-spec { background: rgba(255,255,255,.9); }
  .ivp[data-slug] .ivp-bag::after {
    content: ""; position: absolute; z-index: 4; pointer-events: none;
    left: calc(var(--bagw) * .085); right: calc(var(--bagw) * .085);
    top: calc(var(--bagw) * .27); bottom: calc(var(--bagw) * .40); border-radius: 16px;
    background:
      linear-gradient(105deg, transparent 18%, rgba(255,255,255,.22) 24%, rgba(255,255,255,.05) 31%, transparent 36%),
      linear-gradient(105deg, transparent 62%, rgba(255,255,255,.12) 66%, transparent 71%);
  }
}
@media (max-width: 640px) { .ivp[data-slug] .ivp-tag-kick { padding-top: 80px; } }
@media (max-width: 640px) { .ivp-spec div:not(:last-child) dd { white-space: nowrap; } .ivp-spec { grid-template-columns: auto auto 1fr; } }

/* PREVIEW v3 compact (2026-10-18, user): smaller bag + label so the bag, the
   booking button and phone/Telegram fit the first phone screen; label a bit
   narrower so a little more plastic shows at the sides. */
@media (max-width: 640px) {
  .ivp[data-slug] .ivp-head { padding-top: 0; padding-bottom: 12px; }
  .ivp[data-slug] .breadcrumb { margin-bottom: 6px; }
  .ivp[data-slug] .ivp-bag {
    --bagw: min(calc(100vw - 80px), 330px);
    padding: calc(var(--bagw) * .25) calc(var(--bagw) * .115) calc(var(--bagw) * .36);
    animation-duration: .7s;
  }
  .ivp[data-slug] .ivp-bag::after {
    left: calc(var(--bagw) * .115); right: calc(var(--bagw) * .115);
    top: calc(var(--bagw) * .25); bottom: calc(var(--bagw) * .36);
  }
  .ivp[data-slug] .ivp-bagtab { top: calc(var(--bagw) * .25 - 1px); width: 76px; padding: 5px 0 4px; border-radius: 0 0 9px 9px; }
  .ivp[data-slug] .ivp-bagtab img { width: 22px; height: 22px; }
  .ivp[data-slug] .ivp-bagtab b { font-size: 8.5px; }
  .ivp[data-slug] .ivp-tag-kick { padding: 50px 10px 0; font-size: 9.5px; border-radius: 12px 12px 0 0; }
  .ivp[data-slug] .ivp-h1 { padding: 2px 10px 0; }
  .ivp[data-slug] .ivp-h1-name { font-size: min(36px, calc((100vw - 150px) / (var(--nw, 6) * .52))); }
  .ivp[data-slug] .ivp-tag-sub { padding: 3px 10px 10px; font-size: 9.5px; }
  .ivp[data-slug] .ivp-tag-points { padding: 2px 12px; }
  .ivp[data-slug] .ivp-tag-points li { padding: 5px 0 5px 20px; font-size: 13px; }
  .ivp[data-slug] .ivp-tag-points li::before { font-size: 16px; top: 2px; }
  .ivp[data-slug] .ivp-spec { border-radius: 0 0 12px 12px; border-bottom-width: 4px; }
  .ivp[data-slug] .ivp-spec div, .ivp[data-slug] .ivp-spec div + div { padding: 6px 4px; }
  .ivp[data-slug] .ivp-spec dd { font-size: 11.5px; }
  .ivp[data-slug] .ivp-spec dt { font-size: 8.5px; }
  .ivp[data-slug] .ivp-cta { margin-top: 10px; gap: 8px; }
  .ivp[data-slug] .ivp-cta .btn { padding: 13px 18px; font-size: 15px; }
  .ivp[data-slug] .ivp-phone, .ivp[data-slug] .ivp-tg { padding: 10px 8px; font-size: 13.5px; }
}
@media (max-width: 640px) {
  .ivp[data-slug] .ivp-head .breadcrumb { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ivp[data-slug] .ivp-tag-kick { font-size: 0; padding-top: 44px; }
  .ivp[data-slug] .ivp-bag {
    --bagw: min(calc(100vw - 92px), 310px);
    padding-bottom: calc(var(--bagw) * .33); filter: none; margin-top: 8px;
  }
  .ivp[data-slug] .ivp-bag::after { bottom: calc(var(--bagw) * .33); }
  .ivp[data-slug] .ivp-tag-points li { padding: 4px 0 4px 20px; }
}
@media (max-width: 640px) {
  .ivp[data-slug].ivp .ivp-hero, .ivp[data-slug] .ivp-hero { padding-top: 2px; }
  .ivp[data-slug] .ivp-bag { --bagw: min(calc(100vw - 108px), 300px); margin-top: 0; }
  .ivp[data-slug] .ivp-cta { margin-top: 6px; }
  .ivp[data-slug] .ivp-cta .btn { padding: 12px 18px; }
  .ivp[data-slug] .ivp-phone, .ivp[data-slug] .ivp-tg { padding: 9px 8px; }
}
/* Label to the size the user drew (2026-10-18): ~60% of the bag width,
   starting lower and ending higher; bag unchanged. */
@media (max-width: 640px) {
  .ivp[data-slug] .ivp-bag { padding: calc(var(--bagw) * .32) calc(var(--bagw) * .2) calc(var(--bagw) * .42); }
  .ivp[data-slug] .ivp-bag::after { left: calc(var(--bagw) * .2); right: calc(var(--bagw) * .2); top: calc(var(--bagw) * .32); bottom: calc(var(--bagw) * .42); border-radius: 10px; }
  .ivp[data-slug] .ivp-bagtab { top: calc(var(--bagw) * .32 - 1px); width: 58px; padding: 4px 0 3px; border-radius: 0 0 7px 7px; }
  .ivp[data-slug] .ivp-bagtab img { width: 16px; height: 16px; }
  .ivp[data-slug] .ivp-bagtab b { font-size: 6.5px; }
  .ivp[data-slug] .ivp-tag-kick { padding-top: 34px; border-radius: 10px 10px 0 0; }
  .ivp[data-slug] .ivp-h1 { padding: 0 6px; }
  .ivp[data-slug] .ivp-h1-name { font-size: min(28px, calc((100vw - 250px) / (var(--nw, 6) * .52))); }
  .ivp[data-slug] .ivp-tag-sub { padding: 2px 6px 7px; font-size: 7px; letter-spacing: .12em; }
  .ivp[data-slug] .ivp-tag-points { padding: 1px 8px; }
  .ivp[data-slug] .ivp-tag-points li { padding: 3px 0 3px 14px; font-size: 11px; }
  .ivp[data-slug] .ivp-tag-points li::before { font-size: 13px; top: 1px; left: 0; }
  .ivp[data-slug] .ivp-spec { border-radius: 0 0 10px 10px; border-bottom-width: 3px; }
  .ivp[data-slug] .ivp-spec div, .ivp[data-slug] .ivp-spec div + div { padding: 4px 2px; }
  .ivp[data-slug] .ivp-spec dd { font-size: 9.5px; }
  .ivp[data-slug] .ivp-spec dt { font-size: 6.5px; letter-spacing: .03em; }
}
/* Bigger bag (2026-10-18, user: buttons lower, filling the first screen).
   Everything inside the bag now scales with its width (--bagw), keeping the
   label proportions the user set. */
@media (max-width: 640px) {
  .ivp[data-slug] .ivp-bag { --bagw: min(calc(100vw - 44px), 360px); }
  .ivp[data-slug] .ivp-bagtab { width: calc(var(--bagw) * .204); padding: calc(var(--bagw) * .014) 0 calc(var(--bagw) * .0105); border-radius: 0 0 calc(var(--bagw) * .025) calc(var(--bagw) * .025); }
  .ivp[data-slug] .ivp-bagtab img { width: calc(var(--bagw) * .056); height: calc(var(--bagw) * .056); }
  .ivp[data-slug] .ivp-bagtab b { font-size: calc(var(--bagw) * .0228); }
  .ivp[data-slug] .ivp-tag-kick { padding-top: calc(var(--bagw) * .12); border-radius: calc(var(--bagw) * .035) calc(var(--bagw) * .035) 0 0; }
  .ivp[data-slug] .ivp-h1 { padding: 0 calc(var(--bagw) * .021); }
  .ivp[data-slug] .ivp-h1-name { font-size: min(calc(var(--bagw) * .098), calc((var(--bagw) * .56) / (var(--nw, 6) * .52))); }
  .ivp[data-slug] .ivp-tag-sub { padding: calc(var(--bagw) * .007) calc(var(--bagw) * .021) calc(var(--bagw) * .025); font-size: calc(var(--bagw) * .0246); }
  .ivp[data-slug] .ivp-tag-points { padding: 1px calc(var(--bagw) * .028); }
  .ivp[data-slug] .ivp-tag-points li { padding: calc(var(--bagw) * .0105) 0 calc(var(--bagw) * .0105) calc(var(--bagw) * .049); font-size: calc(var(--bagw) * .0386); }
  .ivp[data-slug] .ivp-tag-points li::before { font-size: calc(var(--bagw) * .0456); }
  .ivp[data-slug] .ivp-spec { border-radius: 0 0 calc(var(--bagw) * .035) calc(var(--bagw) * .035); }
  .ivp[data-slug] .ivp-spec div, .ivp[data-slug] .ivp-spec div + div { padding: calc(var(--bagw) * .014) calc(var(--bagw) * .007); }
  .ivp[data-slug] .ivp-spec dd { font-size: calc(var(--bagw) * .0333); }
  .ivp[data-slug] .ivp-spec dt { font-size: calc(var(--bagw) * .0228); }
  .ivp[data-slug] .ivp-bag::after { border-radius: calc(var(--bagw) * .035); }
}

/* ---------- PREVIEW, Detox+ only: steps as an IV drip system (phones) ----------
   2026-10-18, user sketch: IV bag + drip chamber on step 1, the tube running
   down through all three cards, steps 2 and 3 clipped onto it. Vector (inline
   SVG), line colour via --ln. One drop falls in the chamber on a slow loop
   (off under reduced motion). Replaces the filling drops on this page. */
.ivp-ivkit, .ivp-node { display: none; }
@media (max-width: 640px) {
  .ivp[data-slug] .ivp-steps { position: relative; }
  .ivp[data-slug] .ivp-steps .ivp-vessel { display: none; }
  .ivp[data-slug] .ivp-steps li:not(:last-child)::after { display: none; }
  .ivp[data-slug] .ivp-steps .ivp-ivkit {
    display: block; grid-column: 1; grid-row: 1 / span 3; width: 40px; height: 92px; position: relative; z-index: 3;
  }
  .ivp-ivkit svg { width: 100%; height: 100%; overflow: visible; }
  .ivk-bag { fill: #fff; stroke: var(--ln); stroke-width: 1.8; }
  .ivk-hole { fill: var(--bg); stroke: var(--ln); stroke-width: 1.2; }
  .ivk-label { fill: var(--ln); }
  .ivk-liquid { fill: var(--ln); opacity: .22; }
  .ivk-neck { fill: var(--ln); }
  .ivk-chamber { fill: #fff; stroke: var(--ln); stroke-width: 1.6; }
  .ivk-chamber-liquid { fill: var(--ln); opacity: .35; }
  .ivk-drop { fill: var(--ln); animation: ivkDrip 2.4s cubic-bezier(.55,0,.8,.6) infinite; }
  .ivk-tube { fill: var(--ln); }
  @keyframes ivkDrip {
    0%, 30% { transform: translateY(0) scale(.6); opacity: 0; }
    40% { transform: translateY(0) scale(1); opacity: 1; }
    78% { transform: translateY(8px) scale(1); opacity: 1; }
    86%, 100% { transform: translateY(9px) scale(1.3, .5); opacity: 0; }
  }
  /* the tube through the cards: starts under step 1's chamber (card padding 16 + 92) */
  .ivp[data-slug] .ivp-steps::before {
    content: ""; display: block; position: absolute; z-index: 2;
    left: 32.5px; right: auto; top: 106px; bottom: 26px; width: 3px; height: auto;
    border-radius: 3px; background: var(--ln);
  }
  /* end of the line: a small catheter tip */
  .ivp[data-slug] .ivp-steps::after {
    content: ""; position: absolute; z-index: 2; left: 29px; bottom: 16px; width: 10px; height: 12px;
    border-radius: 3px 3px 5px 5px; background: var(--ln);
  }
  /* steps 2 and 3 clip onto the tube */
  .ivp[data-slug] .ivp-steps .ivp-node {
    display: block; grid-column: 1; grid-row: 1 / span 3; align-self: start; justify-self: start;
    position: relative; z-index: 3; margin: 2px 0 0 11px; width: 18px; height: 18px; border-radius: 50%;
    background: #fff; border: 3px solid var(--ln); box-shadow: 0 0 0 4px #fff;
  }
  .ivp[data-slug] .ivp-steps li:last-child .ivp-node { background: var(--ln); box-shadow: 0 0 0 4px var(--ln-soft); }
}
@media (prefers-reduced-motion: reduce) { .ivk-drop { animation: none; opacity: 1; } }

/* ---------- PREVIEW, Detox+ only: "Шкала" — the bag's volume scale (phones) ----------
   2026-10-18, chosen by three creative directors in debate, user: "yes, let's go".
   A frosted 40px strip printed like an IV bag's graduation scale (minor ticks,
   "мл" stamp, no numbers); each benefit hangs on a major tick; full-ink text
   always. One motion: the --ln-soft liquid drains top-down (bag emptying into
   the patient); each tick turns --ln and grows as the level passes. Default =
   finished state (JS adds .is-pre, then .is-run). Reduced motion: finished. */
@media (max-width: 640px) {
  .ivp[data-slug] .ivp-drip { position: relative; counter-reset: none; margin-top: 18px; padding: 6px 0 8px 62px; }
  /* the strip */
  .ivp[data-slug] .ivp-drip::before {
    content: "мл"; display: flex; align-items: flex-end; justify-content: center;
    position: absolute; left: 0; top: 0; bottom: 0; width: 40px; padding-bottom: 6px; z-index: 0;
    border: 1px solid rgba(14,43,48,.14); border-radius: 8px; animation: none;
    background:
      repeating-linear-gradient(180deg, transparent 0 13px, rgba(14,43,48,.28) 13px 14px) right 6px top 0 / 8px 100% no-repeat,
      linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.75) 45%, rgba(255,255,255,0) 60%),
      linear-gradient(90deg, #eef3f2, #fbfdfc 40%, #f3f7f6);
    font: 700 10px/1 "Roboto Condensed", "Arial Narrow", sans-serif; letter-spacing: .04em; color: rgba(14,43,48,.45);
  }
  /* the liquid inside the strip (finished state: a little left at the bottom) */
  .ivp[data-slug] .ivp-drip::after {
    content: ""; display: block; position: absolute; z-index: 0; left: 1px; top: 1px; bottom: 1px; width: 38px; height: auto;
    border-radius: 7px; background: linear-gradient(180deg, color-mix(in srgb, var(--ln) 42%, transparent), color-mix(in srgb, var(--ln) 26%, transparent));
    box-shadow: inset 0 2px 0 color-mix(in srgb, var(--ln) 70%, #fff);
    transform-origin: 50% 100%; transform: scaleY(.12); animation: none; opacity: 1;
  }
  .ivp[data-slug] .ivp-drip.is-pre::after { transform: scaleY(1); }
  .ivp[data-slug] .ivp-drip.is-run::after { transition: transform 1.5s cubic-bezier(.45,.05,.55,.95); }
  /* the benefits on their major ticks */
  .ivp[data-slug] .ivp-effect {
    position: relative; padding: 9px 0; border: 0;
    font-size: 19px; font-weight: 700; line-height: 1.28; letter-spacing: -.01em; color: var(--ink);
  }
  .ivp[data-slug] .ivp-effect + .ivp-effect { border-top: 0; }
  .ivp[data-slug] .ivp-effect::before {
    content: ""; position: absolute; left: -24px; top: calc(9px + .64em); width: 18px; height: 3px;
    border-radius: 2px; background: var(--ln); box-shadow: none; font-size: inherit;
    transform-origin: 0 50%; transform: none;
  }
  .ivp[data-slug] .ivp-drip.is-pre .ivp-effect::before { background: rgba(14,43,48,.25); transform: scaleX(.5); }
  .ivp[data-slug] .ivp-drip.is-run .ivp-effect::before {
    transition: transform .35s ease, background-color .35s ease; transition-delay: var(--td, 0ms);
  }
}

/* Booking button in the protocol hero takes the line colour (2026-10-18, user:
   "match it with the label"). --ln-btn = --ln, or a slightly darker shade for
   the two lines whose label colour is under 4.5:1 with white text. */
.ivp-cta .btn {
  background: var(--ln-btn, var(--ln)); color: #fff;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--ln) 30%, transparent);
}
.ivp-cta .btn:hover { background: color-mix(in srgb, var(--ln-btn, var(--ln)) 86%, #000); }
.ivp-cta .btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--ln) 45%, transparent); outline-offset: 3px; }
/* Rollout to all 33 (2026-10-18): long names / long label points must not push
   the booking buttons off the first screen. Name: fits the longest word AND at
   most two lines (from total length --nl); points a touch smaller. */
@media (max-width: 640px) {
  .ivp[data-slug] .ivp-h1-name {
    font-size: min(calc(var(--bagw) * .098), calc((var(--bagw) * .56) / (var(--nw, 6) * .52)), calc((var(--bagw) * 1.05) / (var(--nl, 6) * .52)));
    line-height: .98;
  }
  .ivp[data-slug] .ivp-tag-points li { font-size: calc(var(--bagw) * .035); line-height: 1.22; padding-top: calc(var(--bagw) * .008); padding-bottom: calc(var(--bagw) * .008); }
  .ivp[data-slug] .ivp-tag-sub { line-height: 1.25; }
}
/* Uzbek pages: the scale's unit stamp in Latin (2026-10-18). */
@media (max-width: 640px) { html[lang="uz"] .ivp[data-slug] .ivp-drip::before { content: "ml"; } }