/* Secrets to Dog Training, VSL with delayed reveal (/stdt-reveal/).
   Bones from the owner's VSL delayed-reveal archetype: headline, video, trust line, one quote, then the
   revealed half (offer card, guarantee, what's inside, the creator's story, how it works, customer stories,
   FAQ, with the offer card three times). Skin from Kingdom of Pets' own pages via kop-base.css: the blue bar,
   pale-blue panels, the pale-yellow order box, red order buttons, the orange guarantee, Open Sans headings
   and Noto Serif body text. Red also marks the hook word, as the video's own slides do. */
:root {
  --sr-col: 760px;
  --sr-wide: 1100px;
  --sr-cream-line: #ebe2a2;   /* the live order box's border on --kop-cream */
  --sr-cover-bg: #e2eefa;     /* the pale blue the 2012 cover images were saved on (--kop-sky, one shade off) */
}

body { overflow-x: hidden; overflow-x: clip; }
p { margin: 0 0 1em; }
b, strong { color: var(--kop-ink); }
svg { width: 1em; height: 1em; flex: none; }
.c { text-align: center; }
.sr-col { max-width: calc(var(--sr-col) + 32px); margin: 0 auto; padding: 0 16px; }
.d-only { display: inline; }
.m-only { display: none; }
.sr-sec { padding: 70px 0; }
.sr-tint { background: var(--kop-sky-2); }
.sr-eyebrow { margin: 0 0 10px; color: var(--kop-blue-deep); font: 800 12.5px/1.5 var(--kop-sans); letter-spacing: .14em; text-transform: uppercase; }
.sr-h2 { margin: 0; font: 800 clamp(27px, 3.4vw, 38px)/1.16 var(--kop-sans); letter-spacing: -.005em; text-wrap: balance; }
.sr-h2 .acc { display: block; color: var(--kop-blue-deep); }
.sr-lead { max-width: 660px; margin: 16px auto 0; color: var(--kop-muted); font-size: 18px; }
.sr-lead b { color: var(--kop-ink); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--kop-blue); outline-offset: 3px; }

/* The top bar's order button waits for the reveal, so the price never shows before the video names it. */
.sr-pre .kop-top-buy { display: none; }

/* ---------- hero: headline and player ---------- */
.sr-hero { padding: 34px 16px 30px; text-align: center; background: linear-gradient(180deg, var(--kop-sky) 0%, var(--kop-sky-2) 45%, #fff 100%); }
.sr-hero h1 { max-width: 1000px; margin: 0 auto 24px; font-size: clamp(25px, 3.3vw, 39px); font-weight: 800; line-height: 1.18; letter-spacing: -.01em; text-wrap: balance; }
.sr-hero h1 .hook { color: var(--kop-red); white-space: nowrap; }

.vsl { position: relative; max-width: 740px; margin: 0 auto; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--kop-line), 0 18px 44px rgba(15, 79, 120, .2); text-align: left; }
.vsl-stage { position: relative; aspect-ratio: 4 / 3; background: #fff; cursor: pointer; user-select: none; -webkit-user-select: none; }
.vsl-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.vsl-slide.on { opacity: 1; }

/* The play cover sits in the bottom quarter, below slide 000's words and photo (they end 65% of the way down). */
.vsl-cover { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: center; gap: 18px; width: 100%; margin: 0; padding: 0 20px 5%; border: 0; border-radius: 0; color: #fff; cursor: pointer; font-family: var(--kop-sans); text-align: left;
  background: linear-gradient(180deg, rgba(15, 79, 120, 0) 68%, rgba(15, 79, 120, .6) 84%, rgba(15, 79, 120, .92) 100%); }
.vsl-big { display: grid; place-items: center; flex: none; width: 84px; height: 84px; border-radius: 50%; background: linear-gradient(var(--kop-blue), var(--kop-blue-deep)); box-shadow: 0 0 0 5px rgba(255, 255, 255, .9), 0 12px 30px rgba(15, 79, 120, .45); transition: transform .15s ease; }
.vsl-big svg { width: 40px; height: 40px; margin-left: 4px; }
.vsl-big .i-replay svg { margin-left: 0; }
.vsl-cover:hover .vsl-big { transform: scale(1.06); }
.vsl-cover-txt { display: flex; flex-direction: column; gap: 2px; padding-bottom: 12px; }
.vsl-cover-t { font-size: 23px; font-weight: 800; line-height: 1.25; text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.vsl-cover-s { font-size: 14.5px; font-weight: 600; opacity: .92; }
.vsl-cover .s-paused, .vsl-cover .s-ended, .vsl-big .i-replay { display: none; }
.vsl[data-state="paused"] .vsl-cover .s-idle, .vsl[data-state="ended"] .vsl-cover .s-idle { display: none; }
.vsl[data-state="paused"] .vsl-cover .s-paused { display: inline; }
.vsl[data-state="ended"] .vsl-cover .s-ended { display: inline; }
.vsl[data-state="ended"] .vsl-big .i-play { display: none; }
.vsl[data-state="ended"] .vsl-big .i-replay { display: grid; }
.vsl[data-state="playing"] .vsl-cover, .vsl[data-state="loading"] .vsl-cover, .vsl[data-state="error"] .vsl-cover { display: none; }

.vsl-spin { position: absolute; top: 50%; left: 50%; z-index: 1; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 4px solid rgba(37, 150, 212, .25); border-top-color: var(--kop-blue); display: none; animation: vsl-spin .9s linear infinite; }
.vsl[data-state="loading"] .vsl-spin { display: block; }
@keyframes vsl-spin { to { transform: rotate(360deg); } }
.vsl-msg { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; margin: 0; padding: 12px 14px; border-radius: 8px; background: var(--kop-cream); border: 1px solid var(--sr-cream-line); color: var(--kop-ink); font: 600 15px/1.45 var(--kop-sans); text-align: center; }

.vsl-bar { display: flex; align-items: center; gap: 12px; padding: 7px 14px 7px 8px; background: var(--kop-blue-ink); }
.vsl-pp { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.vsl-pp:hover { background: rgba(255, 255, 255, .12); }
.vsl-pp svg { width: 20px; height: 20px; }
.vsl-pp .i-pause { display: none; }
.vsl[data-state="playing"] .vsl-pp .i-pause, .vsl[data-state="loading"] .vsl-pp .i-pause { display: grid; }
.vsl[data-state="playing"] .vsl-pp .i-play, .vsl[data-state="loading"] .vsl-pp .i-play { display: none; }
.vsl-pp span { display: grid; }
.vsl-track { position: relative; flex: 1; height: 18px; cursor: pointer; }
.vsl-track::before, .vsl-reach, .vsl-fill { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 6px; border-radius: 3px; }
.vsl-track::before { background: rgba(255, 255, 255, .2); }
.vsl-reach, .vsl-fill { transform-origin: left center; transform: scaleX(0); transition: transform .25s linear; }
.vsl-reach { background: rgba(255, 255, 255, .35); }
.vsl-fill { background: #fff; }

.sr-sound { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 0; color: var(--kop-muted); font: 14.5px/1.45 var(--kop-sans); }
.sr-sound svg { width: 20px; height: 20px; color: var(--kop-blue); }
.sr-hero .kop-rating { margin: 12px 0 0; }

/* Price strip under the player, opened with the rest of the offer (the live page shows its buy button here at 17:46). */
.sr-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; max-width: 740px; margin: 18px auto 0; padding: 16px 20px; border: 1px solid var(--sr-cream-line); border-radius: 12px; background: var(--kop-cream); box-shadow: 0 8px 22px rgba(15, 79, 120, .08); }
.sr-strip-price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 10px; margin: 0; font: 800 30px/1.1 var(--kop-sans); color: var(--kop-ink); }
.sr-strip-price s { font-size: 20px; font-weight: 600; }
.sr-strip-price span { flex-basis: 100%; color: var(--kop-muted); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.sr-strip .kop-buy { padding: 14px 30px; font-size: 19px; }
.sr-strip-more { display: inline-flex; align-items: center; gap: 6px; flex-basis: 100%; justify-content: center; font: 600 14px/1.4 var(--kop-sans); }

/* ---------- the one customer quote, on the blue of the top bar ---------- */
.sr-quote { background: var(--kop-blue); padding: 34px 16px; }
.sr-quote-in { max-width: 760px; margin: 0 auto; }
.sr-quote .kop-review { box-shadow: 0 14px 34px rgba(15, 79, 120, .3); border: 0; }

/* ---------- reveal ---------- */
[data-reveal][hidden] { display: none; }
.js [data-reveal] { opacity: 0; transition: opacity .8s ease; }
.js [data-reveal].is-in { opacity: 1; }

/* ---------- offer block (shown three times) ---------- */
.sr-pkg { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: center; max-width: 920px; margin: 40px 16px 0; padding: 46px 36px 32px; border: 1px solid var(--sr-cream-line); border-radius: 16px; background: var(--kop-cream); box-shadow: 0 22px 50px rgba(15, 79, 120, .12); }
@media (min-width: 953px) { .sr-pkg { margin-left: auto; margin-right: auto; } }
.sr-ribbon { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); padding: 6px 20px; border-radius: 999px; background: var(--kop-blue); color: #fff; font: 800 12px/1.4 var(--kop-sans); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 4px 12px rgba(15, 79, 120, .25); }
.sr-pkg-art { position: relative; height: 300px; }
.sr-pkg-art img { position: absolute; filter: drop-shadow(0 14px 20px rgba(15, 79, 120, .22)); }
.sr-pkg-art .a1 { left: 0; bottom: 10px; width: 42%; }
.sr-pkg-art .a3 { right: 0; bottom: 18px; width: 34%; }
.sr-pkg-art .a2 { left: 47%; bottom: 0; width: 52%; transform: translateX(-50%); }
.sr-save { position: absolute; top: 0; right: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 90px; height: 90px; border-radius: 50%; background: var(--kop-red); color: #fff; font: 800 12px/1.1 var(--kop-sans); letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 8px 18px rgba(200, 32, 32, .3); transform: rotate(-8deg); }
.sr-save b { color: #fff; font-size: 22px; letter-spacing: 0; }
.sr-pkg-info { text-align: center; }
.sr-pkg-name { margin: 0 0 8px; color: var(--kop-ink); font: 800 28px/1.15 var(--kop-sans); }
.sr-pkg-scope { display: inline-block; margin: 0 0 14px; padding: 5px 12px; border-radius: 999px; background: var(--kop-sky); color: var(--kop-blue-ink); font: 800 11.5px/1.4 var(--kop-sans); letter-spacing: .06em; text-transform: uppercase; }
.sr-pkg-reg { margin: 0; color: var(--kop-muted); font: 16px/1.4 var(--kop-sans); }
.sr-pkg-price { margin: 0 0 14px; color: var(--kop-ink); font: 800 64px/1.05 var(--kop-sans); }
.sr-pkg-price sup { margin-right: 2px; font-size: 30px; vertical-align: 26px; }
.sr-pkg-price small { display: block; color: var(--kop-muted); font-size: 13.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.sr-pills { display: grid; gap: 7px; margin: 0 0 18px; padding: 0; list-style: none; }
.sr-pills li { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: #fff; color: var(--kop-blue-ink); font: 800 12.5px/1.3 var(--kop-sans); letter-spacing: .08em; text-transform: uppercase; box-shadow: inset 0 0 0 1px var(--kop-line); }
.sr-pills svg { width: 15px; height: 15px; color: var(--kop-blue); }
.sr-pkg .kop-buy { padding: 17px 20px; font-size: 21px; }
.sr-pkg .kop-pay-note { margin-top: 16px; }
.sr-pkg .kop-shipped { margin-top: 10px; }

/* ---------- guarantee ---------- */
.sr-guar { margin-top: 34px; }
.sr-dan-line { margin: 26px 0 0; padding: 0 0 0 20px; border-left: 4px solid var(--kop-orange); }
.sr-dan-line p { margin: 0 0 8px; font-style: italic; }
.sr-dan-line footer img { display: block; width: 150px; }

/* ---------- cards ---------- */
.sr-card { display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--kop-line); border-radius: 14px; background: #fff; box-shadow: 0 8px 22px rgba(15, 79, 120, .06); }
.sr-card h3 { margin: 0 0 4px; font-size: 19px; line-height: 1.3; }
.sr-card p { font-size: 16px; line-height: 1.6; }
.sr-pill { align-self: flex-start; margin: auto 0 0 !important; padding: 4px 11px; border-radius: 8px; background: var(--kop-sky); color: var(--kop-blue-ink); font: 800 11px/1.5 var(--kop-sans) !important; letter-spacing: .1em; text-transform: uppercase; }
.sr-pill.line { background: transparent; box-shadow: inset 0 0 0 1.5px var(--kop-blue-deep); color: var(--kop-blue-deep); }

/* ---------- what's inside ---------- */
.sr-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; max-width: calc(var(--sr-wide) + 32px); margin: 40px auto 0; padding: 0 16px; }
.sr-part-img { display: flex; align-items: center; justify-content: center; height: 200px; margin: -22px -22px 16px; border-radius: 14px 14px 0 0; background: var(--sr-cover-bg); overflow: hidden; }
.sr-part-img img { max-height: 170px; width: auto; }
.sr-part-img img[src$=".png"] { filter: drop-shadow(0 10px 14px rgba(15, 79, 120, .16)); }
.sr-part-img.fan img { width: 27%; max-height: none; margin: 0 -3%; filter: none; }
.sr-part-img.fan img:nth-child(1) { transform: rotate(-7deg) translateY(6px); }
.sr-part-img.fan img:nth-child(2) { transform: rotate(-2deg); position: relative; z-index: 1; }
.sr-part-img.fan img:nth-child(3) { transform: rotate(3deg); position: relative; z-index: 2; }
.sr-part-img.fan img:nth-child(4) { transform: rotate(8deg) translateY(6px); position: relative; z-index: 3; }
.sr-part-val { margin: 0 0 6px !important; color: var(--kop-red); font: 800 13px/1.4 var(--kop-sans) !important; letter-spacing: .08em; text-transform: uppercase; }
.sr-meta { margin: 0 0 10px !important; color: var(--kop-blue-deep); font: 600 14px/1.45 var(--kop-sans) !important; }
.sr-part p:not(.sr-meta):not(.sr-pill):not(.sr-part-val) { margin-bottom: 16px; }
.sr-valuewrap { max-width: 680px; margin: 46px auto 0; padding: 0 16px; }
.sr-yourprice { margin: 18px 0 0; text-align: center; font: 700 22px/1.4 var(--kop-sans); color: var(--kop-ink); }
.sr-yourprice b { font-size: 30px; color: var(--kop-red); }
.sr-yourprice span { display: block; color: var(--kop-muted); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- Dan and Jen ---------- */
.sr-dan-in { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 48px; align-items: start; max-width: calc(var(--sr-wide) + 32px); margin: 0 auto; padding: 0 16px; }
.sr-dan-card { position: sticky; top: 84px; padding: 0 0 20px; border: 1px solid var(--kop-line); border-radius: 16px; background: #fff; text-align: center; overflow: hidden; box-shadow: var(--kop-shadow); }
.sr-dan-photo { display: block; width: 100%; height: 320px; object-fit: cover; object-position: center 30%; margin-bottom: 16px; }
.sr-dan-name { margin: 0 16px; color: var(--kop-ink); font: 800 22px/1.2 var(--kop-sans); }
.sr-dan-title { margin: 6px 18px 16px; color: var(--kop-blue-deep); font: 600 14.5px/1.45 var(--kop-sans); }
.sr-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 16px; }
.sr-stats p { margin: 0; padding: 12px 8px; border-radius: 10px; background: var(--kop-sky-2); color: var(--kop-muted); font: 700 11.5px/1.35 var(--kop-sans); letter-spacing: .04em; text-transform: uppercase; }
.sr-stats b { display: block; color: var(--kop-blue-deep); font-size: 19px; letter-spacing: 0; text-transform: none; }
.sr-dan-story .sr-h2 { margin-bottom: 26px; }
.sr-dan-story > p { font-size: 18.5px; }
.sr-fig { margin: 4px 0 14px; width: 240px; }
.sr-fig img { display: block; width: 100%; border-radius: 10px; box-shadow: var(--kop-shadow); }
.sr-fig.right { float: right; margin-left: 24px; }
.sr-fig.left { float: left; margin-right: 24px; }
.sr-qbox { clear: both; margin: 28px 0; padding: 22px 26px; border-left: 5px solid var(--kop-blue); border-radius: 0 12px 12px 0; background: #fff; box-shadow: 0 8px 22px rgba(15, 79, 120, .07); }
.sr-qbox p { margin: 0 0 8px; color: var(--kop-ink); font-size: 22px; font-style: italic; line-height: 1.45; }
.sr-qbox footer { color: var(--kop-muted); font: 600 14px/1.4 var(--kop-sans); }
.sr-qbox footer::before { content: "— "; }

/* ---------- how it works ---------- */
.sr-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; max-width: calc(var(--sr-wide) + 32px); margin: 58px auto 0; padding: 0 16px; }
.sr-step { position: relative; padding-top: 38px; }
.sr-num { position: absolute; top: -22px; left: 22px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--kop-blue); color: #fff; font: 800 20px/1 var(--kop-sans); box-shadow: 0 0 0 5px #fff; }
.sr-step-sec { margin: 0 0 4px !important; color: var(--kop-muted); font: 800 12px/1.4 var(--kop-sans) !important; letter-spacing: .12em; text-transform: uppercase; }
.sr-step h3 { color: var(--kop-blue-deep); margin-bottom: 10px; }
.sr-step p:not(.sr-pill):not(.sr-step-sec) { margin-bottom: 16px; }

/* ---------- customer stories ---------- */
.sr-reviews { max-width: calc(var(--sr-wide) + 32px); margin: 40px auto 26px; padding: 0 16px; columns: 2; column-gap: 24px; }
.sr-reviews .kop-review { break-inside: avoid; margin-bottom: 24px; }

/* ---------- FAQ ---------- */
.sr-faq { margin-top: 30px; border-top: 1px solid var(--kop-line); }
.sr-faq details { border-bottom: 1px solid var(--kop-line); }
.sr-faq summary { position: relative; padding: 18px 44px 18px 0; color: var(--kop-ink); font: 700 18px/1.4 var(--kop-sans); cursor: pointer; list-style: none; }
.sr-faq summary::-webkit-details-marker { display: none; }
.sr-faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--kop-blue); color: #fff; font: 700 20px/1 var(--kop-sans); }
.sr-faq details[open] summary::after { content: "–"; }
.sr-faq .a p { margin: 0 0 18px; font-size: 17px; }
.sr-support { margin: 24px 0 0; color: var(--kop-muted); font: 15px/1.5 var(--kop-sans); text-align: center; }

/* ---------- exit pop (free 6 Day Course) ---------- */
.sr-exit { width: min(640px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 14px; background: #fff; color: var(--kop-text); overflow: auto; box-shadow: 0 30px 80px rgba(0, 0, 0, .4); }
.sr-exit[open] { display: grid; grid-template-columns: 190px minmax(0, 1fr); }
.sr-exit::backdrop { background: rgba(15, 79, 120, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sr-exit-x { position: absolute; top: 8px; right: 10px; z-index: 2; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--kop-muted); font-size: 26px; line-height: 1; cursor: pointer; }
.sr-exit-x:hover { color: var(--kop-ink); }
.sr-exit-art { display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--kop-sky); }
.sr-exit-art img { width: 150px; }
.sr-exit-body { padding: 28px 26px 22px; }
.sr-exit-tag { margin: 0 0 10px; color: var(--kop-red); font: 800 14px/1.4 var(--kop-sans); letter-spacing: .06em; text-transform: uppercase; }
.sr-exit-tag b { display: inline-block; margin-right: 6px; padding: 2px 9px; border-radius: 4px; background: var(--kop-red); color: #fff; }
.sr-exit h2 { margin: 0 0 10px; font-size: 26px; line-height: 1.2; }
.sr-exit-body > p:not(.sr-exit-tag) { margin: 0 0 16px; font-size: 16.5px; }
.sr-exit-no { display: block; margin: 12px auto 0; padding: 6px 8px; border: 0; background: none; color: var(--kop-muted); font: 600 14px/1.4 var(--kop-sans); text-decoration: underline; cursor: pointer; }
.sr-exit-no:hover { color: var(--kop-ink); }

@media (prefers-reduced-motion: reduce) {
  .vsl-slide, .vsl-reach, .vsl-fill, .js [data-reveal], .vsl-big { transition: none; }
  .vsl-spin { animation: none; }
}

/* ---------- tablet ---------- */
@media (max-width: 1000px) {
  .sr-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 22px; }
  .sr-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sr-dan-in { grid-template-columns: 250px minmax(0, 1fr); gap: 32px; }
  .sr-dan-photo { height: 260px; }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  body { font-size: 17px; }
  .sr-sec { padding: 52px 0; }
  .d-only { display: none; }
  .m-only { display: inline; }
  .sr-hero { padding: 24px 16px 26px; }
  .sr-hero h1 { margin-bottom: 18px; }
  .sr-hero h1 .hook { white-space: normal; }
  .vsl { margin: 0 -4px; border-radius: 8px; }
  .vsl-big { width: 52px; height: 52px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 8px 20px rgba(15, 79, 120, .4); }
  .vsl-big svg { width: 26px; height: 26px; margin-left: 3px; }
  .vsl-cover { padding: 0 12px 4%; gap: 12px; }
  .vsl-cover-txt { padding-bottom: 6px; }
  .vsl-cover-t { font-size: 16px; }
  .vsl-cover-s { font-size: 12.5px; }
  .vsl-msg { font-size: 13.5px; padding: 9px 10px; }
  .sr-sound { font-size: 13.5px; text-align: left; align-items: flex-start; }
  .sr-sound svg { margin-top: 1px; }
  .sr-strip { padding: 14px; }
  .sr-strip .kop-buy { width: 100%; }
  .sr-quote { padding: 26px 12px; }
  .sr-pkg { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 40px 18px 24px; }
  .sr-pkg-art { height: 220px; max-width: 340px; width: 100%; margin: 0 auto; }
  .sr-save { width: 76px; height: 76px; font-size: 10.5px; }
  .sr-save b { font-size: 18px; }
  .sr-pkg-price { font-size: 56px; }
  .sr-pkg .kop-buy { font-size: 19px; }
  .sr-pills li { font-size: 11.5px; letter-spacing: .05em; }
  .sr-parts { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .sr-part-img { height: 170px; }
  .sr-part-img img { max-height: 144px; }
  .sr-dan-in { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .sr-dan-card { position: static; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 16px; align-items: center; padding: 16px; text-align: left; }
  .sr-dan-photo { grid-row: span 2; width: 110px; height: 140px; margin: 0; border-radius: 10px; }
  .sr-dan-name, .sr-dan-title { margin: 0; }
  .sr-stats { grid-column: 1 / -1; margin: 10px 0 0; }
  .sr-dan-story > p { font-size: 17.5px; }
  .sr-fig { width: 150px; }
  .sr-fig.right { margin-left: 14px; }
  .sr-fig.left { margin-right: 14px; }
  .sr-qbox { padding: 18px 18px; }
  .sr-qbox p { font-size: 19px; }
  .sr-steps { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .sr-reviews { columns: 1; }
  .sr-faq summary { font-size: 17px; }
  .sr-exit { width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: 16px 16px 0 0; }
  .sr-exit[open] { grid-template-columns: minmax(0, 1fr); }
  .sr-exit-art { padding: 14px; }
  .sr-exit-art img { width: 96px; }
  .sr-exit-body { padding: 18px 18px 18px; }
  .sr-exit h2 { font-size: 22px; }
}