/* redes.css: page-only styles for /producao-de-conteudo-para-redes-sociais-no-paraguai/
   Concept: the page as a feed. CSS-built phones with parallax layers in a high-key hero, a pinned
   phone whose screen scrolls with page progress, a process strip and a monthly cadence calendar.
   Loaded after main.css and servico.css (glass, faq, related, end, logos). */
:root { --rd-ease: cubic-bezier(.22, 1, .36, 1); --rd-ink: #17191c; }

/* ── Phone mockup (all sizes derive from --ph; --u = 1% of phone width) ──── */
.rd-phone { --ph: 560px; --pw: calc(var(--ph) * .4737); --u: calc(var(--pw) / 100);
  position: relative; flex: none; box-sizing: border-box; width: var(--pw); height: var(--ph); padding: calc(var(--u) * 2.4);
  border-radius: calc(var(--u) * 14); background: linear-gradient(150deg, #43474f, #121316 42%, #2a2d33);
  box-shadow: 0 0 0 calc(var(--u) * .5) #0b0c0e, 0 40px 60px -28px rgba(23, 25, 28, .55), inset 0 0 0 1px rgba(255, 255, 255, .12); }
.rd-phone::before, .rd-phone::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #1c1e22; }
.rd-phone::before { right: -3px; top: 24%; height: 13%; }
.rd-phone::after { left: -3px; top: 20%; height: 7%; box-shadow: 0 calc(var(--u) * 12) 0 #1c1e22; }
.rd-screen { position: relative; box-sizing: border-box; height: 100%; overflow: hidden; isolation: isolate; background: #111;
  border-radius: calc(var(--u) * 11.8); font-size: calc(var(--u) * 3.6); line-height: 1.2; color: #fff; font-family: var(--f-body); }
.rd-island { position: absolute; z-index: 8; top: calc(var(--u) * 2.6); left: 50%; width: calc(var(--u) * 27); height: calc(var(--u) * 7.4);
  margin-left: calc(var(--u) * -13.5); border-radius: 99px; background: #000; }

/* slides */
.rd-sl { position: relative; height: 100%; overflow: hidden; background: #000; }
.rd-pic, .rd-pic img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rd-pic { overflow: hidden; }
.rd-pic img { object-fit: cover; }
.rd-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .38), transparent 22%, transparent 52%, rgba(0, 0, 0, .66)); }
.rd-i { width: calc(var(--u) * 7.2); height: calc(var(--u) * 7.2); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.rd-i--mail { width: 18px; height: 18px; color: #8b929a; }
.rd-logo { flex: none; display: block; }
.rd-play { width: 60%; height: 60%; fill: #fff; }
.rd-bar { display: block; width: var(--w, 80%); height: calc(var(--u) * 2.5); margin: calc(var(--u) * 2) 0 0; border-radius: 99px; background: rgba(255, 255, 255, .72); }
.rd-av { flex: none; width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: 50%; background: linear-gradient(135deg, #ff5a4d, #cc1010); box-shadow: 0 0 0 calc(var(--u) * .5) rgba(255, 255, 255, .8); }
.rd-av--ring { box-shadow: 0 0 0 calc(var(--u) * .8) #E4405F, 0 0 0 calc(var(--u) * 1.6) rgba(0, 0, 0, .35); }
.rd-who { display: flex; align-items: center; gap: calc(var(--u) * 2.4); }
.rd-who b { font-weight: 700; font-size: 1em; }
.rd-who u { margin-left: calc(var(--u) * 1); padding: calc(var(--u) * 1) calc(var(--u) * 2.6); border: 1px solid currentColor; border-radius: calc(var(--u) * 2); text-decoration: none; font-size: .88em; font-weight: 600; }

/* reel */
.rd-top { position: absolute; z-index: 3; left: calc(var(--u) * 6); right: calc(var(--u) * 6); top: calc(var(--u) * 13); display: flex; justify-content: space-between; align-items: center; font-size: 1.35em; }
.rd-top b { font-weight: 700; }
.rd-rail { position: absolute; z-index: 3; right: calc(var(--u) * 4.5); bottom: calc(var(--u) * 20); display: grid; gap: calc(var(--u) * 5.6); justify-items: center; }
.rd-cap { position: absolute; z-index: 3; left: calc(var(--u) * 5); right: calc(var(--u) * 19); bottom: calc(var(--u) * 8); }
.rd-cap .rd-who { margin-bottom: calc(var(--u) * 1); }
.rd-prog { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: calc(var(--u) * 1); background: rgba(255, 255, 255, .25); }
.rd-prog i { display: block; height: 100%; width: 100%; background: #fff; transform-origin: left; transform: scaleX(.38); }

/* story */
.rd-segs { position: absolute; z-index: 3; left: calc(var(--u) * 5); right: calc(var(--u) * 5); top: calc(var(--u) * 12.5); display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 1.4); }
.rd-segs i { position: relative; height: calc(var(--u) * .9); border-radius: 99px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.rd-segs i::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0); }
.rd-segs .is-full::after { transform: scaleX(1); }
.rd-segs .is-run::after { transform: scaleX(.55); }
.rd-who--story { position: absolute; z-index: 3; left: calc(var(--u) * 6); top: calc(var(--u) * 17); }
.rd-reply { position: absolute; z-index: 3; left: calc(var(--u) * 5); right: calc(var(--u) * 5); bottom: calc(var(--u) * 6); display: flex; align-items: center; gap: calc(var(--u) * 3.4); }
.rd-reply span { flex: 1; padding: calc(var(--u) * 2.6) calc(var(--u) * 4); border: 1px solid rgba(255, 255, 255, .7); border-radius: 99px; font-size: .95em; color: rgba(255, 255, 255, .92); }

/* youtube */
.rd-sl--yt { background: #0f0f0f; padding-top: calc(var(--u) * 13); }
.rd-yt__player { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #222; }
.rd-yt__player img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-yt__play { position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 15); height: calc(var(--u) * 15); margin: calc(var(--u) * -7.5) 0 0 calc(var(--u) * -7.5); border-radius: 50%;
  background: rgba(15, 15, 15, .62); display: grid; place-items: center; }
.rd-yt__play .rd-play { width: 56%; height: 56%; margin-left: 8%; }
.rd-yt__bar { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--u) * 1); background: rgba(255, 255, 255, .3); }
.rd-yt__bar b { display: block; width: 46%; height: 100%; background: #f00; }
.rd-yt__meta { padding: calc(var(--u) * 1.5) calc(var(--u) * 4.5) 0; }
.rd-yt__meta .rd-who { margin-top: calc(var(--u) * 4); }
.rd-yt__meta .rd-who u { color: #0f0f0f; background: #fff; border: 0; }
.rd-yt__shorts { padding: calc(var(--u) * 5) calc(var(--u) * 4.5) 0; }
.rd-yt__shorts b { display: block; font-size: 1.05em; margin-bottom: calc(var(--u) * 2.4); }
.rd-yt__shorts > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 2); }
.rd-yt__list { display: grid; gap: calc(var(--u) * 3); padding: calc(var(--u) * 5) calc(var(--u) * 4.5) 0; }
.rd-yt__row { display: flex; align-items: center; gap: calc(var(--u) * 3); }
.rd-yt__row > span { flex: 1; }
.rd-yt__row .rd-bar { margin: calc(var(--u) * 1.6) 0 0; }
.rd-yt__thumb { position: relative; flex: none; width: 34%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: calc(var(--u) * 2); background: #222; }
.rd-yt__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-th { position: relative; aspect-ratio: 9 / 15; overflow: hidden; border-radius: calc(var(--u) * 2.4); background: #222; }
.rd-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* feed post, ad, e-mail (light UIs) */
.rd-sl--post, .rd-sl--ad, .rd-sl--mail { background: #fff; color: var(--rd-ink); padding: calc(var(--u) * 13) 0 0; }
.rd-sl--post .rd-bar, .rd-sl--ad .rd-bar, .rd-sl--mail .rd-bar { background: #d6d9dd; margin-inline: calc(var(--u) * 4.5); }
.rd-sl--post .rd-av, .rd-sl--ad .rd-av, .rd-sl--mail .rd-av { box-shadow: none; }
.rd-who--post { padding: 0 calc(var(--u) * 4.5) calc(var(--u) * 3); }
.rd-who--post .rd-i:last-child { margin-left: auto; }
.rd-two { display: grid; gap: calc(var(--u) * .6); }
.rd-two em { font-style: normal; font-size: .84em; color: #636a72; }
.rd-sq { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: #ddd; }
.rd-sq img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-acts { display: flex; align-items: center; gap: calc(var(--u) * 3.6); padding: calc(var(--u) * 3.4) calc(var(--u) * 4.5) calc(var(--u) * 1); }
.rd-acts span { flex: 1; }
.rd-ad__img { position: relative; margin-top: calc(var(--u) * 3); width: 100%; aspect-ratio: 4 / 4.6; overflow: hidden; background: #ddd; }
.rd-ad__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-ad__foot { display: flex; align-items: center; gap: calc(var(--u) * 3); padding: calc(var(--u) * 3) calc(var(--u) * 4.5); background: #f1f3f5; }
.rd-ad__foot span { flex: 1; }
.rd-ad__foot .rd-bar { margin: calc(var(--u) * 1.4) 0 0; }
.rd-ad__foot u { padding: calc(var(--u) * 2.2) calc(var(--u) * 3.6); border-radius: calc(var(--u) * 1.8); background: #0866FF; color: #fff; text-decoration: none; font-weight: 700; font-size: .92em; }
.rd-sl--mail { background: #f3f2f0; }
.rd-mail__hd { display: flex; align-items: center; gap: calc(var(--u) * 2.6); padding: 0 calc(var(--u) * 4.5) calc(var(--u) * 3); font-weight: 700; font-size: 1.1em; }
.rd-mail__hd .rd-i { color: var(--rd-ink); }
.rd-mail__row { display: flex; align-items: center; gap: calc(var(--u) * 3); padding: calc(var(--u) * 2.4) calc(var(--u) * 4.5); border-top: 1px solid #dfdcd8; }
.rd-mail__row > span { flex: 1; }
.rd-mail__row .rd-bar { margin: calc(var(--u) * 1.2) 0 0; }
.rd-mail__msg { margin: calc(var(--u) * 2) calc(var(--u) * 3) 0; padding: calc(var(--u) * 3.4) 0 calc(var(--u) * 4); border-radius: calc(var(--u) * 4); background: #fff; box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .35); }
.rd-sl--mail .rd-bar--dk { background: var(--rd-ink); margin-top: 0; }
.rd-mail__vid { position: relative; margin: calc(var(--u) * 3) calc(var(--u) * 3.4) 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: calc(var(--u) * 2.6); background: #ddd; }
.rd-mail__vid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-mail__btn { display: block; margin: calc(var(--u) * 4) calc(var(--u) * 4.5) 0; padding: calc(var(--u) * 2.8); border-radius: calc(var(--u) * 2.4); background: var(--red); color: #fff; text-align: center; text-decoration: none; font-weight: 700; }

/* ── Hero (high-key) ────────────────────────────────────────────────────── */
.rd-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--paper); color: var(--rd-ink);
  padding-block: clamp(7rem, 14vh, 8.5rem) clamp(3rem, 7vh, 5rem); }
.rd-hero__dots { position: absolute; z-index: -1; left: 0; right: 0; top: -10%; bottom: -10%; pointer-events: none;
  background-image: radial-gradient(rgba(23, 25, 28, .13) 1.2px, transparent 1.4px); background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 70% 45%, #000, transparent 75%); mask-image: radial-gradient(ellipse 70% 70% at 70% 45%, #000, transparent 75%);
  transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
.rd-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.rd-hero__txt > * { max-width: 540px; }
.rd-eyebrow { display: inline-flex; align-items: center; gap: .6rem; padding: .42rem .95rem .42rem .8rem; border-radius: 999px; background: var(--rd-ink); color: #fff;
  font: 700 .72rem/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; }
.rd-eyebrow i { width: 9px; height: 9px; border-radius: 50%; background: var(--red-lit); }
.rd-hero h1 { margin-top: 1.1rem; font-size: clamp(2.1rem, 4.3vw, 3.5rem); line-height: 1.05; text-wrap: balance; color: var(--rd-ink); }
.rd-hero h1 em { font-style: normal; color: var(--red); }
.rd-lead { margin-top: 1.2rem; font-size: clamp(1rem, 1.35vw, 1.1rem); color: #3b4047; }
.rd-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }
.rd-facts { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.9rem 0 0; padding: 0; list-style: none; }
.rd-facts li { padding: .4rem .9rem; border-radius: 999px; font-size: .76rem; font-weight: 700; color: #2a2d31; background: rgba(255, 255, 255, .78); border: 1px solid rgba(23, 25, 28, .12); }
.rd-hero__txt > * { animation: rd-rise .9s var(--rd-ease) both; }
.rd-hero__txt > :nth-child(2) { animation-delay: .08s; } .rd-hero__txt > :nth-child(3) { animation-delay: .16s; }
.rd-hero__txt > :nth-child(4) { animation-delay: .24s; } .rd-hero__txt > :nth-child(5) { animation-delay: .32s; }
@keyframes rd-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* hero stage: every .rd-layer moves at its own speed (parallax depth) */
.rd-stage { position: relative; height: clamp(520px, 68svh, 660px); }
.rd-layer { position: absolute; transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
.rd-layer--blob { inset: 0; pointer-events: none; }
.rd-blob { position: absolute; left: 50%; top: 52%; width: min(110%, 560px); aspect-ratio: 1; margin: calc(min(110%, 560px) / -2) 0 0 calc(min(110%, 560px) / -2); border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 46, 34, .22), rgba(255, 46, 34, 0) 66%); }
.rd-layer--a { left: 34%; top: 2%; z-index: 3; }
.rd-layer--a .rd-phone { --ph: clamp(430px, 62svh, 600px); transform: rotate(2.5deg); animation: rd-pop 1s var(--rd-ease) .15s both; }
.rd-layer--b { left: 1%; top: 17%; z-index: 2; }
.rd-layer--b .rd-phone { --ph: clamp(340px, 49svh, 470px); transform: rotate(-7deg); animation: rd-pop 1s var(--rd-ease) .3s both; }
@keyframes rd-pop { from { opacity: 0; translate: 0 36px; } to { opacity: 1; translate: 0 0; } }
.rd-chip { display: inline-flex; align-items: center; gap: .55rem; padding: .55rem 1rem .55rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .95); color: var(--rd-ink);
  font: 700 .8rem/1 var(--f-body); letter-spacing: .01em; box-shadow: 0 16px 30px -14px rgba(23, 25, 28, .5), 0 0 0 1px rgba(23, 25, 28, .06);
  animation: rd-float 5.5s ease-in-out var(--lag, 0s) infinite alternate; }
@keyframes rd-float { from { translate: 0 -5px; } to { translate: 0 6px; } }
.rd-layer--c1 { right: 2%; top: 14%; z-index: 4; }
.rd-layer--c2 { left: 0; bottom: 14%; z-index: 4; }
.rd-layer--c3 { right: 0; bottom: 26%; z-index: 4; }
.rd-layer--c4 { left: 6%; top: 6%; z-index: 4; }

/* ── Pinned phone ───────────────────────────────────────────────────────── */
.rd-pin { position: relative; background: var(--void); border-top: 1px solid var(--edge); color: var(--bone); }
.rd-pin__stick { position: relative; padding-block: var(--rhythm); overflow: hidden; isolation: isolate; }
.rd-pin__glow { position: absolute; z-index: -1; right: 6%; top: 50%; width: min(60vw, 720px); aspect-ratio: 1; margin-top: calc(min(60vw, 720px) / -2); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 46, 34, .2), rgba(255, 46, 34, 0) 66%); transform: translate3d(0, calc((var(--p, 0) - .5) * -140px), 0); will-change: transform; }
.rd-pin.is-pinned { height: calc(100svh + (var(--n) - 1) * 72svh); }
.rd-pin.is-pinned .rd-pin__stick { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; padding-block: 5.2rem 1.5rem; }
.rd-pin__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; width: 100%; }
.rd-pin__hd h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-top: .8rem; text-wrap: balance; }
.rd-pin__hd p:last-child { margin-top: .9rem; color: var(--mist); max-width: 52ch; }
.rd-fmts { list-style: none; margin: clamp(1.4rem, 3vh, 2.2rem) 0 0; padding: 0; border-top: 1px solid var(--edge); }
.rd-fmt { border-bottom: 1px solid var(--edge); }
.rd-fmt__btn { appearance: none; background: none; border: 0; border-radius: 0; width: 100%; margin: 0; cursor: pointer; text-align: left; color: var(--dim);
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; align-items: center; gap: .4rem; min-height: 3.3rem; padding: .35rem 0; transition: color .3s ease; font: inherit; }
.rd-fmt__btn:hover { color: var(--bone); }
.rd-fmt__btn:focus-visible { outline-offset: -2px; }
.rd-fmt__n { font: 700 .74rem var(--f-display); letter-spacing: .14em; }
.rd-fmt__t { display: flex; align-items: baseline; gap: .8rem; min-width: 0; flex-wrap: wrap; }
.rd-fmt__t b { font: 600 1.08rem/1.25 var(--f-display); letter-spacing: -.01em; }
.rd-fmt__t em { font-style: normal; font-size: .8rem; opacity: 0; transition: opacity .3s ease; }
.rd-fmt__lg { display: flex; align-items: center; gap: .55rem; opacity: .45; transition: opacity .3s ease; }
.rd-fmt.is-on .rd-fmt__btn { color: #fff; }
.rd-fmt.is-on .rd-fmt__n { color: var(--red-lit); }
.rd-fmt.is-on .rd-fmt__t em { opacity: 1; color: var(--mist); }
.rd-fmt.is-on .rd-fmt__lg { opacity: 1; }
.rd-fmt__d { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--rd-ease); }
.rd-fmt__d > p { overflow: hidden; min-height: 0; margin: 0; padding-left: 2.8rem; max-width: 56ch; font-size: .92rem; color: var(--mist); opacity: 0; transition: opacity .35s ease; }
.rd-fmt.is-on .rd-fmt__d { grid-template-rows: 1fr; }
.rd-fmt.is-on .rd-fmt__d > p { opacity: 1; padding-bottom: 1.1rem; }
.rd-pin__phone { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.rd-phone--pin { --ph: clamp(400px, calc(100svh - 9.5rem), 620px); }
.rd-pin:not(.is-pinned) .rd-phone--pin { --ph: 560px; }
.rd-strip { height: 100%; transform: translate3d(0, calc(var(--pos, 0) * -100%), 0); will-change: transform; }
.rd-pin:not(.is-pinned) .rd-strip { transition: transform .7s var(--rd-ease); }
.rd-strip .rd-sl { height: 100%; }
.rd-strip .rd-pic img, .rd-strip .rd-sq img, .rd-strip .rd-ad__img img, .rd-strip .rd-yt__player img {
  transform: translate3d(0, calc(var(--d, 0) * -7%), 0) scale(1.16); will-change: transform; }
.rd-dots { display: flex; gap: .5rem; }
.rd-dots i { width: 8px; height: 8px; border-radius: 99px; background: var(--edge); transition: width .4s var(--rd-ease), background .3s ease; }
.rd-dots i.is-on { width: 26px; background: var(--red-lit); }

/* ── Process strip ──────────────────────────────────────────────────────── */
.rd-process h2 { text-wrap: balance; }
.rd-flowbox { --g: clamp(1rem, 2vw, 1.8rem); position: relative; margin-top: clamp(1rem, 3vw, 2rem); }
.rd-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 var(--g); }
.rd-flow li { position: relative; padding-top: 4.1rem; }
.rd-node { position: absolute; z-index: 1; top: 0; left: 0; width: 46px; height: 46px; box-sizing: border-box; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 2px solid var(--paper-line); color: #636a72; font: 700 .8rem var(--f-display); letter-spacing: .06em; transition: background .4s ease, border-color .4s ease, color .4s ease; }
.rd-flow li.is-done .rd-node { background: var(--red); border-color: var(--red); color: #fff; }
.rd-flow h3 { font-size: 1.1rem; color: var(--rd-ink); }
.rd-flow p { margin-top: .5rem; font-size: .9rem; color: #4a4f56; }
.rd-flow__track { position: absolute; top: 22px; left: 23px; right: calc((100% - 4 * var(--g)) / 5 - 23px + 0px); height: 2px; background: var(--paper-line); display: block; }
.rd-flow__fill { display: block; height: 100%; background: var(--red); transform-origin: left; transform: scaleX(var(--prog, 1)); }

/* ── Cadence ────────────────────────────────────────────────────────────── */
.rd-keep__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.rd-keep h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-top: .8rem; text-wrap: balance; }
.rd-keep__lead { margin-top: 1rem; color: var(--mist); max-width: 54ch; }
.rd-keep__list { list-style: none; margin: 1.8rem 0 0; padding: 0; counter-reset: k; }
.rd-keep__list li { counter-increment: k; position: relative; padding: 1rem 0 1rem 2.6rem; border-top: 1px solid var(--edge); }
.rd-keep__list li::before { content: counter(k, decimal-leading-zero); position: absolute; left: 0; top: 1.2rem; font: 700 .76rem var(--f-display); letter-spacing: .1em; color: var(--red-lit); }
.rd-keep__list b { display: block; font: 600 1.02rem var(--f-display); color: #fff; }
.rd-keep__list p { margin-top: .3rem; font-size: .9rem; color: var(--mist); }
.rd-cal { margin: 0; padding: clamp(.9rem, 2vw, 1.4rem); border-radius: 22px; background: var(--panel); border: 1px solid var(--edge); box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .8); }
.rd-cal__days, .rd-cal__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(4px, .8vw, 8px); }
.rd-cal__days span { padding-bottom: .55rem; text-align: center; font: 700 .68rem var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.rd-cell { --c: var(--edge); position: relative; aspect-ratio: 1 / .82; min-width: 0; display: flex; align-items: flex-end; padding: .4rem .5rem; overflow: hidden; border-radius: 10px;
  background: #1c2025; border: 1px solid var(--edge); }
.rd-cell--empty { background: transparent; border-style: dashed; }
.rd-cell::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--c); }
.rd-cell b { font: 700 clamp(.58rem, 1.2vw, .76rem) var(--f-body); color: #fff; white-space: nowrap; }
.rd-cell--reel { --c: #E4405F; } .rd-cell--story { --c: #f2f2f2; } .rd-cell--post { --c: #0866FF; }
.rd-cell--short { --c: #FF0000; } .rd-cell--ad { --c: #e0a526; } .rd-cell--mail { --c: #8b929a; }
.rd-cal figcaption { margin-top: 1rem; font-size: .8rem; color: var(--mist); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-height: 720px) and (min-width: 801px) { .rd-pin__hd p:last-child { display: none; } }
@media (max-width: 1100px) {
  .rd-layer--a { left: 30%; }
  .rd-fmt__t em { display: none; }
}
@media (max-width: 900px) {
  .rd-hero__grid, .rd-keep__grid { grid-template-columns: 1fr; }
  .rd-hero { padding-bottom: 2rem; }
  .rd-stage { height: 520px; max-width: 520px; width: 100%; margin-inline: auto; }
  .rd-layer--a { left: 32%; top: 3%; }
  .rd-layer--a .rd-phone { --ph: 440px; }
  .rd-layer--b .rd-phone { --ph: 350px; }
  .rd-layer--b { left: 0; top: 18%; }
}
@media (max-width: 800px) {
  .rd-pin__grid { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; }
  .rd-pin__txt { display: contents; }
  .rd-pin__hd { order: 0; text-align: center; }
  .rd-pin__hd .label, .rd-pin__hd p:last-child { display: none; }
  .rd-pin__hd h2 { margin-top: 0; font-size: 1.4rem; }
  .rd-pin__phone { order: 1; }
  .rd-fmts { order: 2; margin-top: 0; border-top: 0; }
  .rd-phone--pin { --ph: clamp(250px, calc(100svh - 25rem), 400px); }
  .rd-pin:not(.is-pinned) .rd-phone--pin { --ph: 440px; }
  .rd-pin.is-pinned .rd-pin__stick { padding-block: 4.8rem 1rem; }
  .rd-pin.is-pinned .rd-fmt:not(.is-on) { display: none; }
  .rd-pin.is-pinned .rd-fmt { border-bottom: 0; }
  .rd-pin.is-pinned .rd-fmt__btn { pointer-events: none; min-height: 2.4rem; }
  .rd-pin.is-pinned .rd-fmt__lg { display: none; }
  .rd-pin.is-pinned .rd-fmt__d > p { padding-left: 2.8rem; }
  .rd-pin__glow { display: none; }
  .rd-process .rd-flow { grid-template-columns: 1fr; gap: 1.6rem 0; }
  .rd-flow li { padding: 0 0 0 4rem; min-height: 46px; }
  .rd-flow li:not(:last-child)::before { content: ""; position: absolute; left: 22px; top: 48px; bottom: -1.6rem; width: 2px; background: var(--paper-line); }
  .rd-flow li.is-done:not(:last-child)::before { background: var(--red); }
  .rd-flow__track { display: none; }
  .rd-flow h3 { padding-top: .7rem; }
}
@media (max-width: 480px) {
  .rd-cta .btn { flex: 1 1 100%; text-align: center; }
  .rd-stage { height: 470px; }
  .rd-layer--a .rd-phone { --ph: 390px; }
  .rd-layer--b .rd-phone { --ph: 310px; }
  .rd-layer--a { left: 34%; }
  .rd-chip { font-size: .72rem; padding: .45rem .8rem .45rem .65rem; }
  .rd-cell { padding: .3rem .3rem; border-radius: 7px; }
}

/* ── Reduced motion: static, but fully readable ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rd-hero__txt > *, .rd-layer--a .rd-phone, .rd-layer--b .rd-phone, .rd-chip { animation: none; }
  .rd-layer, .rd-hero__dots, .rd-pin__glow { transform: none !important; will-change: auto; }
  .rd-strip, .rd-strip img { will-change: auto; }
  .rd-strip { transition: none !important; }
  .rd-fmt__d, .rd-fmt__d > p, .rd-dots i, .rd-node, .rd-fmt__btn { transition: none; }
}