:root {
  --black: #0b0b0b;
  --ink: #1a1a1a;
  --grey: #5e5e5e;
  --red: #e30613;
  --red-2: #b8050f;
  --yellow: #ffd400;
  --green: #17a34a;
  --paper: #f5f3ef;
  --line: #dcdcdc;
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: #2a2a2a; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

.page { max-width: 800px; margin-inline: auto; background: #fff; box-shadow: 0 0 40px rgba(0, 0, 0, .7); overflow: hidden; container-type: inline-size; }
.red { color: var(--red); }
.yellow { color: var(--yellow); }

h1, h2 { font-weight: 900; text-transform: uppercase; line-height: 1.04; letter-spacing: -.02em; }
h2 { font-size: clamp(2rem, 9.5cqw, 4.4rem); }

/* Top bar */
.topbar { background: var(--red); color: #fff; text-align: center; font-weight: 800; letter-spacing: .06em; font-size: clamp(.6rem, 2.75cqw, 1.2rem); padding: 9px 4px; white-space: nowrap; }
.topbar i { font-style: normal; font-size: .6em; vertical-align: middle; margin: 0 .4em; }

/* Hero */
.hero { position: relative; background: var(--black); color: #fff; }
.hero__text { position: relative; z-index: 2; padding: 6cqw 4cqw 0; text-align: center; }
.hero__bg { width: 100%; aspect-ratio: 4 / 3.5; object-fit: cover; object-position: 70% 20%; margin-top: -7cqw; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 58%, transparent 96%); mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 58%, transparent 96%); }
.kicker { font-weight: 600; font-size: clamp(.9rem, 4cqw, 1.7rem); margin-bottom: .5em; }
h1 { font-size: clamp(2rem, 10.2cqw, 5.2rem); text-shadow: 0 4px 24px rgba(0, 0, 0, .9); }
.hero__product { position: relative; z-index: 2; margin-top: -34cqw; padding: 0 5cqw 7cqw; display: flex; align-items: flex-end; gap: 3cqw; }
.hero__product .tube { width: 23cqw; flex: none; filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .8)); }
.hero__product .tube--b { transform: rotate(-9deg); margin-right: -12cqw; opacity: .96; }
.hero__product .tube--a { transform: rotate(5deg); animation: float 5s ease-in-out infinite; }
.hero__claim { padding-bottom: 3cqw; display: grid; gap: .35em; min-width: 0; }
.hero__claim b { font-size: clamp(1.5rem, 7.6cqw, 3.6rem); font-weight: 900; line-height: 1; text-transform: uppercase; color: var(--yellow); }
.hero__claim span { font-size: clamp(.95rem, 4.3cqw, 2rem); font-weight: 600; line-height: 1.2; }
.hero__claim .leaf { font-style: normal; color: #6ee79a; font-weight: 800; }
.hero__claim em { font-style: normal; justify-self: start; background: var(--red); font-weight: 800; font-size: clamp(.78rem, 3.4cqw, 1.5rem); padding: .35em .7em; border-radius: 6px; margin-top: .3em; }
.hero__claim u { display: flex; align-items: center; gap: .4em; text-decoration: none; color: var(--yellow); font-weight: 900; white-space: nowrap; }
.truck { width: 1.5em; height: 1.07em; flex: none; display: inline-block; vertical-align: -.15em; }
@keyframes slowzoom { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* Bands */
.band { padding: 11cqw 6cqw; text-align: center; }
.band--black { background: radial-gradient(120% 80% at 50% 0%, #2a0507 0%, var(--black) 60%); color: #fff; }
.band--yellow { background: linear-gradient(180deg, #ffe14a, var(--yellow)); }
.band--light { background: var(--paper); }
.band__pre { font-weight: 800; font-size: clamp(1rem, 4.6cqw, 2rem); margin-bottom: .5em; }
.band__text { font-size: clamp(1rem, 4.2cqw, 1.8rem); font-weight: 500; line-height: 1.4; margin-top: 1.1em; }
.fine { font-size: clamp(.78rem, 3cqw, 1.1rem); color: var(--grey); margin-top: 1.6em; }

.checks { margin-top: 8cqw; display: grid; gap: 6cqw; text-align: left; }
.checks li { display: flex; align-items: center; gap: 4.5cqw; }
.tick { width: 15cqw; flex: none; color: var(--red); filter: drop-shadow(0 0 14px rgba(227, 6, 19, .6)); }
.checks span { font-size: clamp(1.1rem, 5.6cqw, 2.7rem); font-weight: 500; line-height: 1.15; }
.checks b { display: block; font-weight: 900; }

/* CTA bar */
.cta { position: relative; display: flex; align-items: stretch; margin: 5cqw 4cqw; border-radius: 999px; background: #fff; box-shadow: 0 8px 26px rgba(0, 0, 0, .28), inset 0 0 0 2px #eee; overflow: visible; }
.cta__tag { background: linear-gradient(180deg, #f0323c, var(--red-2)); color: #fff; border-radius: 999px; padding: 2.6cqw 4cqw; display: grid; align-content: center; font-size: clamp(.7rem, 3.3cqw, 1.6rem); line-height: 1.15; box-shadow: 0 4px 12px rgba(184, 5, 15, .5); }
.cta__tag b { font-weight: 900; white-space: nowrap; }
.cta__go { flex: 1; display: grid; place-items: center; color: var(--red); font-weight: 900; font-size: clamp(1rem, 5.3cqw, 2.7rem); letter-spacing: -.02em; padding-right: 12cqw; white-space: nowrap; }
.cta__hand { position: absolute; right: 0; bottom: -5cqw; width: 14cqw; animation: tap 1.1s ease-in-out infinite; }
@keyframes tap { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-10%) scale(.92); } }
.band--black + .cta, .scenes + .cta { margin-top: 5cqw; }
.page > .cta { margin-block: 7cqw; }

/* Pain scenes */
.scenes { display: grid; gap: 4px; background: var(--black); }
.scene { position: relative; overflow: hidden; }
.scene img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .92) 100%); }
.scene figcaption { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 5cqw; color: #fff; font-size: clamp(1.15rem, 5.8cqw, 2.8rem); font-weight: 500; line-height: 1.12; }
.scene small { display: table; background: var(--red); font-size: .46em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: .35em .8em; border-radius: 4px; margin-bottom: .7em; }
.scene b { font-weight: 900; color: var(--yellow); text-transform: uppercase; }

/* Solution */
.solution { background: linear-gradient(180deg, #fff 0%, #f1efe9 100%); padding: 11cqw 6cqw 4cqw; text-align: center; }
.solution__pre { font-weight: 700; color: var(--grey); font-size: clamp(1rem, 4.4cqw, 1.9rem); margin-bottom: .4em; }
.solution__visual { position: relative; height: 82cqw; margin: 6cqw 0 4cqw; display: grid; place-items: center; }
.solution__glow { position: absolute; width: 74cqw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #ffe9a8 0%, #ffd400 38%, rgba(255, 212, 0, 0) 70%); animation: pulse 4s ease-in-out infinite; }
.solution__visual .tube { position: absolute; height: 78cqw; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .35)); }
.solution__visual .tube--b { transform: translateX(-13cqw) rotate(-10deg) scale(.9); }
.solution__visual .tube--a { transform: translateX(7cqw) rotate(6deg); animation: float 5s ease-in-out infinite; }
.seal { position: absolute; width: 25cqw; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center; color: #fff; font-weight: 700; font-size: clamp(.6rem, 2.9cqw, 1.3rem); line-height: 1.1; letter-spacing: .06em; border: .8cqw dashed rgba(255, 255, 255, .7); box-shadow: 0 8px 20px rgba(0, 0, 0, .3); transform: rotate(-10deg); }
.seal b { display: block; font-weight: 900; font-size: 1.25em; }
.seal--green { background: radial-gradient(circle at 35% 30%, #35c96c, #0f7a35); left: 0; top: 4cqw; }
.seal--gold { background: radial-gradient(circle at 35% 30%, #f6c443, #b9820a); right: 0; bottom: 6cqw; transform: rotate(9deg); }
@keyframes pulse { 0%, 100% { scale: 1; opacity: .9; } 50% { scale: 1.08; opacity: 1; } }

.dots { text-align: left; border-left: 1cqw solid var(--red); margin-left: 3cqw; display: grid; gap: 5cqw; padding: 1cqw 0; }
.dots li { position: relative; padding-left: 7cqw; font-size: clamp(1.05rem, 4.9cqw, 2.2rem); font-weight: 500; line-height: 1.2; }
.dots li::before { content: ""; position: absolute; left: -3.2cqw; top: .1em; width: 5.4cqw; aspect-ratio: 1; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 1cqw rgba(227, 6, 19, .2); }
.dots b { font-weight: 900; }
.dots--wide { margin-top: 7cqw; }

/* Herbal ingredients */
.herbs { background: radial-gradient(120% 70% at 50% 0%, #1f6b3c 0%, #0c3a1e 55%, #072512 100%); color: #fff; padding: 11cqw 6cqw; text-align: center; }
.herbs__pre { font-weight: 700; color: #a8e6bf; letter-spacing: .14em; text-transform: uppercase; font-size: clamp(.8rem, 3.4cqw, 1.4rem); margin-bottom: .6em; }
.herbs__list { margin-top: 8cqw; display: grid; gap: 3.5cqw; text-align: left; }
.herbs__list li { display: flex; align-items: center; gap: 4.5cqw; background: rgba(255, 255, 255, .07); border: 2px solid rgba(255, 255, 255, .14); border-radius: 4cqw; padding: 4cqw; }
.herb { flex: none; width: 17cqw; aspect-ratio: 1; padding: 3cqw; border-radius: 50%; background: #fff; color: #15803d; box-shadow: 0 0 0 1cqw rgba(255, 212, 0, .55); }
.herbs__list b { display: block; font-weight: 900; text-transform: uppercase; color: var(--yellow); font-size: clamp(1.1rem, 5.2cqw, 2.3rem); line-height: 1.15; }
.herbs__list span { display: block; font-weight: 500; opacity: .9; font-size: clamp(.9rem, 3.8cqw, 1.5rem); line-height: 1.35; margin-top: .25em; }
.herbs__note { margin-top: 6cqw; font-size: clamp(.78rem, 3cqw, 1.1rem); opacity: .7; }

/* Dream */
.dream { position: relative; color: #fff; background: var(--black); padding-bottom: 34cqw; }
.dream img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.dream::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 36%, var(--black) 68%); }
.dream__text { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 6cqw; text-align: center; }
.dream__text p { font-weight: 600; font-size: clamp(.95rem, 4.2cqw, 1.8rem); margin-bottom: .5em; }

/* Steps */
.steps { margin-top: 8cqw; display: grid; gap: 4cqw; text-align: left; }
.steps li { display: flex; gap: 4.5cqw; align-items: center; background: #fff; border-radius: 4cqw; padding: 4.5cqw; box-shadow: 0 6px 18px rgba(0, 0, 0, .08); font-size: clamp(.92rem, 3.9cqw, 1.6rem); line-height: 1.3; color: var(--grey); }
.steps i { flex: none; width: 14cqw; aspect-ratio: 1; border-radius: 50%; background: var(--red); color: #fff; font-style: normal; font-weight: 900; font-size: clamp(1.5rem, 7.5cqw, 3.4rem); display: grid; place-items: center; }
.steps b { display: block; color: var(--ink); font-weight: 900; font-size: 1.2em; text-transform: uppercase; margin-bottom: .15em; }

.trust { margin-top: 8cqw; display: grid; gap: 3.5cqw; text-align: left; }
.trust div { border: 2px solid rgba(255, 255, 255, .16); border-left: 1.4cqw solid var(--yellow); border-radius: 3cqw; padding: 4.5cqw; background: rgba(255, 255, 255, .04); }
.trust b { display: block; color: var(--yellow); font-weight: 900; font-size: clamp(1.15rem, 5.4cqw, 2.4rem); }
.trust span { font-size: clamp(.92rem, 3.9cqw, 1.6rem); font-weight: 500; opacity: .88; line-height: 1.35; display: block; margin-top: .3em; }

/* Order */
.order-wrap { padding: 8cqw 4cqw 9cqw; background: #fff; scroll-margin-top: 0; }
.step-h { display: flex; align-items: center; gap: 3.5cqw; margin: 9cqw 0 4cqw; padding: 3.5cqw 4cqw; background: var(--black); color: #fff; border-radius: 3.5cqw; font-weight: 900; font-size: clamp(1.15rem, 5.4cqw, 2.3rem); line-height: 1.15; scroll-margin-top: 12px; }
.order-wrap > .step-h { margin-top: 0; }
.step-h i { flex: none; width: 12cqw; aspect-ratio: 1; border-radius: 50%; background: var(--yellow); color: #000; font-style: normal; font-size: 1.25em; display: grid; place-items: center; }
.step-h small { display: block; color: var(--yellow); font-size: .58em; letter-spacing: .12em; margin-bottom: .15em; }
.step-help { font-weight: 700; font-size: clamp(1rem, 4.4cqw, 1.7rem); text-align: center; margin: 0 0 4cqw; }
.next { display: block; width: 100%; margin-top: 5cqw; border: 0; cursor: pointer; background: linear-gradient(180deg, #22c55e, #128a3c); color: #fff; font-weight: 900; font-size: clamp(1.4rem, 7cqw, 3rem); padding: .55em .6em; border-radius: 3.5cqw; box-shadow: 0 6px 0 #0c6a2d, 0 14px 24px rgba(18, 138, 60, .35); }
.next span { display: inline-block; animation: bob 1s ease-in-out infinite; }
.next small { display: block; font-size: .5em; font-weight: 700; opacity: .95; margin-top: .1em; }
@keyframes bob { 0%, 100% { translate: 0 -3px; } 50% { translate: 0 5px; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.packs { display: grid; gap: 4cqw; }
.pack { display: block; cursor: pointer; }
.pack input, .pay input { position: absolute; opacity: 0; pointer-events: none; }
.pack__body { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 2cqw; border: 3px solid #e3e3e3; border-radius: 5cqw; padding: 5cqw 4cqw 0 5cqw; background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .1); overflow: hidden; transition: border-color .2s, box-shadow .2s, transform .2s; }
.pack input:checked + .pack__body { border-color: var(--green); box-shadow: 0 10px 30px rgba(23, 163, 74, .35); transform: scale(1.015); }
.pack input:focus-visible + .pack__body, .pay input:focus-visible + span { outline: 3px solid var(--yellow); outline-offset: 2px; }
.pack__badge { position: absolute; top: 0; right: 0; background: var(--red); color: #fff; font-weight: 900; font-size: clamp(.62rem, 2.8cqw, 1.2rem); letter-spacing: .08em; padding: .5em 1.2em; border-bottom-left-radius: 3cqw; }
.pack__info { display: grid; justify-items: start; min-width: 0; }
.pack__name { font-weight: 900; font-size: clamp(2rem, 10.5cqw, 5rem); line-height: 1; letter-spacing: -.03em; }
.pack__sub { color: var(--grey); font-weight: 600; font-size: clamp(.78rem, 3.4cqw, 1.5rem); margin-top: .3em; line-height: 1.25; }
.pack__sub b { display: block; color: var(--ink); font-weight: 800; font-size: 1.1em; }
.pack__ship { display: inline-flex; align-items: center; gap: .4em; background: var(--green); color: #fff; font-weight: 900; font-size: clamp(.75rem, 3.4cqw, 1.6rem); padding: .4em .7em; border-radius: 999px; margin-top: .5em; white-space: nowrap; box-shadow: 0 4px 10px rgba(23, 163, 74, .35); }
.pack__save { font-weight: 800; color: var(--green); font-size: clamp(.78rem, 3.4cqw, 1.5rem); margin-top: .5em; }
.pack__save s { color: #9a9a9a; font-weight: 600; margin-right: .3em; }
.pack__price { color: var(--red); font-weight: 900; font-size: clamp(2.2rem, 12cqw, 5.6rem); line-height: 1.05; letter-spacing: -.03em; margin-top: .1em; white-space: nowrap; }
.pack__pick { margin: 3cqw 0 0 -5cqw; background: #ececec; color: var(--green); font-weight: 900; font-size: clamp(.9rem, 4.2cqw, 1.9rem); padding: .7em 1.6em .7em calc(5cqw + .2em); border-radius: 0 999px 0 0; transition: background .2s, color .2s; }
.pack__pick .on, .pack input:checked + .pack__body .pack__pick .off { display: none; }
.pack input:checked + .pack__body .pack__pick { background: var(--green); color: #fff; }
.pack input:checked + .pack__body .pack__pick .on { display: inline; }
.pack__tubes { display: flex; align-self: center; padding-bottom: 4cqw; flex: none; }
.pack__tubes .tube { height: 40cqw; width: auto; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .25)); }
.pack__tubes .tube + .tube { margin-left: -7cqw; }

.pays { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.pay span { display: flex; align-items: center; justify-content: center; gap: .35em; text-align: center; height: 100%; border: 3px solid #cfcfcf; border-radius: 3cqw; padding: 5cqw 2cqw; font-weight: 800; font-size: clamp(1rem, 4.4cqw, 1.8rem); cursor: pointer; transition: .2s; }
.pay input:checked + span::before { content: "✓"; }
.pay input:checked + span { border-color: var(--green); background: #effaf3; color: #0f7a35; }

.field { display: block; margin-bottom: 4.5cqw; min-width: 0; }
.field > span { display: block; font-weight: 800; font-size: clamp(1.05rem, 4.6cqw, 1.7rem); margin-bottom: .35em; }
.field em { display: block; font-style: normal; font-weight: 600; color: var(--grey); font-size: clamp(.85rem, 3.6cqw, 1.2rem); margin-top: .4em; }
.field input, .field select, .field textarea { width: 100%; border: 3px solid #b5b5b5; border-radius: 2.5cqw; padding: .8em .7em; background: #fff; font-size: clamp(1.15rem, 5cqw, 1.7rem); font-weight: 600; outline: none; appearance: none; -webkit-appearance: none; transition: border-color .2s, box-shadow .2s; }
.field ::placeholder { color: #a3a3a3; font-weight: 500; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .6em center; background-size: 1.1em; padding-right: 2em; }
.field textarea { resize: vertical; min-height: 5.5em; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(23, 163, 74, .18); }
.field small { display: none; background: var(--red); color: #fff; font-size: clamp(.9rem, 3.8cqw, 1.2rem); font-weight: 700; padding: .5em .8em; border-radius: 0 0 8px 8px; }
.field.is-bad input, .field.is-bad select, .field.is-bad textarea { border-color: var(--red); }
.field.is-bad small { display: block; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.consent { display: flex; align-items: center; gap: .8em; font-size: clamp(.9rem, 3.7cqw, 1.2rem); font-weight: 600; color: #444; line-height: 1.4; cursor: pointer; margin-top: 5cqw; padding: 3.5cqw; border: 3px solid #cfcfcf; border-radius: 3cqw; }
.consent:has(input:checked) { border-color: var(--green); background: #effaf3; }
.consent.is-bad { border-color: var(--red); }
.consent input { width: 2.2em; height: 2.2em; flex: none; accent-color: var(--green); margin: 0; }
.consent.is-bad span { color: var(--red); font-weight: 700; }
.alert { background: var(--red); color: #fff; border-radius: 10px; padding: 12px 16px; font-size: .92rem; font-weight: 700; margin-bottom: 16px; }

.summary { margin: 5cqw 0 4cqw; border-radius: 3cqw; background: var(--paper); padding: 4cqw; display: grid; gap: .5em; font-size: clamp(.92rem, 3.8cqw, 1.4rem); }
.summary div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.summary span { color: var(--grey); font-weight: 600; }
.summary .free { color: #fff; background: var(--green); font-weight: 900; padding: .2em .7em; border-radius: 999px; display: inline-flex; align-items: center; gap: .4em; white-space: nowrap; }
.sticky i { font-style: normal; display: flex; align-items: center; gap: .35em; color: var(--yellow); font-weight: 800; white-space: nowrap; }
.summary__total { border-top: 2px dashed #cfcfcf; padding-top: .6em; }
.summary__total b { font-size: 1.7em; font-weight: 900; color: var(--red); letter-spacing: -.02em; white-space: nowrap; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; background: linear-gradient(180deg, #22c55e, #128a3c); color: #fff; font-weight: 900; border: 0; cursor: pointer; padding: .8em 1.4em; border-radius: 12px; box-shadow: 0 6px 0 #0c6a2d, 0 14px 24px rgba(18, 138, 60, .4); transition: transform .12s, box-shadow .12s; }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #0c6a2d; }
.btn--lg { font-size: clamp(1.25rem, 6.2cqw, 2.6rem); padding: .75em 1em; border-radius: 3.5cqw; animation: nudge 2.4s ease-in-out infinite; }
.btn--sm { font-size: .9rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .7; animation: none; }
@keyframes nudge { 0%, 86%, 100% { scale: 1; } 90% { scale: 1.03; } 94% { scale: .99; } }
.order__safe { text-align: center; color: #444; font-weight: 700; font-size: clamp(.9rem, 3.8cqw, 1.3rem); margin-top: 6cqw; }

/* FAQ */
.faq { margin-top: 7cqw; text-align: left; }
.faq details { background: #fff; border-radius: 3cqw; margin-bottom: 2.5cqw; box-shadow: 0 4px 12px rgba(0, 0, 0, .06); }
.faq summary { cursor: pointer; list-style: none; padding: 1em 3em 1em 1.1em; font-weight: 800; font-size: clamp(1rem, 4.2cqw, 1.6rem); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .8em; top: 50%; translate: 0 -50%; font-size: 1.5em; font-weight: 700; color: var(--red); transition: rotate .25s; }
.faq details[open] summary::after { rotate: 45deg; }
.faq p { padding: 0 1.1em 1.1em; color: var(--grey); font-size: clamp(.92rem, 3.8cqw, 1.4rem); }

.footer { background: var(--black); color: rgba(255, 255, 255, .55); padding: 9cqw 6cqw 130px; font-size: clamp(.72rem, 2.8cqw, .95rem); display: grid; gap: 1em; text-align: center; }
.footer b { color: #fff; font-weight: 900; font-size: 1.6em; letter-spacing: .1em; }

/* Sticky CTA */
.sticky { position: fixed; left: 0; right: 0; bottom: 10px; z-index: 60; width: min(520px, calc(100% - 16px)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: linear-gradient(149deg, #c22a1f, #a11208); color: #fff; border: 2px dashed rgba(255, 255, 255, .55); border-radius: 12px; padding: 8px 8px 8px 12px; font-size: .74rem; font-weight: 600; line-height: 1.25; box-shadow: 0 12px 30px rgba(0, 0, 0, .55); transition: translate .35s, opacity .35s; }
.sticky > span:first-child { flex: 1; min-width: 0; }
.sticky b { display: block; font-size: clamp(.7rem, 3.6vw, 1.05rem); font-weight: 900; white-space: nowrap; }
.sticky__btn { flex: none; background: var(--yellow); color: #000; border-radius: 8px; padding: 11px 10px; font-weight: 900; font-size: clamp(.72rem, 3.4vw, .9rem); white-space: nowrap; animation: nudge 2s ease-in-out infinite; }
.sticky.is-hidden { translate: 0 160%; opacity: 0; pointer-events: none; }

/* Step guide: tells the visitor what to do next inside the order form */
.guide { position: fixed; left: 0; right: 0; bottom: 10px; z-index: 61; width: min(780px, calc(100% - 16px)); margin-inline: auto; display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer; background: linear-gradient(180deg, #22c55e, #128a3c); color: #fff; border: 3px solid #fff; border-radius: 16px; padding: 10px 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); transition: translate .3s, opacity .3s; }
.guide.is-hidden { translate: 0 160%; opacity: 0; pointer-events: none; }
.guide__sel { flex: none; background: #fff; color: #0f7a35; border-radius: 10px; padding: 8px 10px; font-weight: 800; font-size: .82rem; line-height: 1.2; white-space: nowrap; }
.guide__next { flex: 1; min-width: 0; font-size: clamp(1rem, 4.4vw, 1.3rem); font-weight: 900; line-height: 1.15; }
.guide__next small { display: block; font-size: .62em; font-weight: 700; letter-spacing: .1em; opacity: .9; }
.guide__arrow { flex: none; font-size: 1.9rem; font-weight: 900; line-height: 1; animation: bob 1s ease-in-out infinite; }
.guide.is-pulse { animation: nudge .5s ease-out; }
.wa { position: fixed; right: 14px; bottom: 90px; z-index: 55; width: 52px; height: 52px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .45); }
.wa svg { width: 28px; height: 28px; }

/* Reveal */
.js .reveal { opacity: 0; translate: 0 26px; transition: opacity .6s ease-out, translate .6s ease-out; transition-delay: var(--d, 0s); }
.js .reveal.is-in { opacity: 1; translate: 0 0; }

/* Thank-you + admin */
.ico { width: 1.25em; height: 1.25em; }
.plain { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; background: var(--paper); }
.card { background: #fff; border-radius: 22px; box-shadow: 0 20px 50px rgba(0, 0, 0, .18); padding: 34px 22px; width: min(520px, 100%); text-align: center; container-type: inline-size; }
.card h1 { font-size: clamp(1.7rem, 7vw, 2.4rem); margin: 18px 0 12px; text-shadow: none; }
.card h1 em { font-style: normal; color: var(--red); }
.card > p { color: var(--grey); font-weight: 500; }
.card__ok { width: 76px; height: 76px; margin-inline: auto; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; animation: pop .6s cubic-bezier(.2, 1.4, .4, 1); }
.card__ok .ico { width: 38px; height: 38px; stroke-width: 3; }
.card .summary { text-align: left; margin: 22px 0; padding: 16px; border-radius: 14px; font-size: .95rem; }
.card .field { text-align: left; margin-bottom: 14px; }
.card .field > span { display: block; font-weight: 800; font-size: .85rem; margin-bottom: 6px; }
.card .field input { border-radius: 10px; font-size: 1rem; }
.card .btn { font-size: 1.05rem; }
@keyframes pop { from { scale: 0; } }

.admin { width: min(1200px, 100% - 32px); margin: 28px auto; background: #fff; border-radius: 18px; padding: 22px; }
.admin h1 { font-size: 1.7rem; }
.admin__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.admin__stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; font-size: .86rem; }
.admin__stats span { background: var(--paper); border-radius: 999px; padding: 6px 14px; }
.table { overflow-x: auto; border-radius: 12px; border: 1px solid var(--line); }
.table table { border-collapse: collapse; width: 100%; font-size: .88rem; min-width: 900px; }
.table th, .table td { padding: 11px 13px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--grey); }
.table select { border: 2px solid var(--line); border-radius: 8px; padding: 6px 8px; background: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; translate: 0 0; }
}