/* ==========================================================================
   Article PDF download card (inc/article-download.php, js/article-download.js)
   On wide screens the script moves it into the article's side rail under
   Share; on phones it stays where the editor placed it.
   ========================================================================== */
.rcn-dl { --g: #26d07c; --t: #00c2a8; --gd: #0f8a4f; margin: 2.5rem 0; }
.article-rail .rcn-dl { margin: 0; }
/* No scrolling inside the rail: js/article-download.js keeps the whole rail
   (contents, share, card) within the screen so it stays sticky -- compact
   card on shorter laptop screens, card moved into the article if even that
   would not fit. */
.rcn-dl-card {
	position: relative; isolation: isolate; overflow: hidden;
	border-radius: 18px; padding: 18px 18px 20px;
	background: radial-gradient(120% 90% at 0% 0%, rgba(38,208,124,.22), transparent 55%), linear-gradient(180deg, #0d1512, #070a09);
	color: #fff; box-shadow: 0 24px 48px -28px rgba(4,17,11,.7);
	opacity: 0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.rcn-dl.is-in .rcn-dl-card { opacity: 1; transform: none; }
/* moving gradient border */
.rcn-dl-card::before {
	content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: -1;
	background: conic-gradient(from var(--rcn-dl-a, 0deg), rgba(38,208,124,.9), rgba(0,194,168,.2), rgba(255,255,255,.08), rgba(0,194,168,.2), rgba(38,208,124,.9));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
	animation: rcn-dl-spin 6s linear infinite;
}
@property --rcn-dl-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes rcn-dl-spin { to { --rcn-dl-a: 360deg; } }
.rcn-dl-glow { position: absolute; width: 220px; height: 220px; right: -90px; top: -90px; border-radius: 50%; background: radial-gradient(circle, rgba(0,194,168,.35), transparent 65%); filter: blur(10px); z-index: -1; animation: rcn-dl-float 9s ease-in-out infinite alternate; }
@keyframes rcn-dl-float { to { transform: translate(-40px, 50px) scale(1.15); } }

/* the PDF: a small stack of pages, tilted, fanning out on hover */
.rcn-dl-cover { position: relative; width: 52%; max-width: 150px; margin: 4px auto 18px; aspect-ratio: 210 / 297; perspective: 700px; }
.rcn-dl-cover img, .rcn-dl-page { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 6px; }
.rcn-dl-cover img { object-fit: cover; box-shadow: 0 16px 30px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08); transform: rotateY(-14deg) rotateX(6deg) rotateZ(-2deg); transition: transform .6s cubic-bezier(.16,1,.3,1); animation: rcn-dl-bob 5s ease-in-out infinite; }
.rcn-dl-page { background: linear-gradient(160deg, #f4f2ee, #d9d6cf); box-shadow: 0 10px 20px -10px rgba(0,0,0,.6); transition: transform .6s cubic-bezier(.16,1,.3,1); }
.rcn-dl-page--2 { transform: rotateY(-14deg) rotateX(6deg) rotateZ(2deg) translate(8px, 4px); opacity: .9; }
.rcn-dl-page--3 { transform: rotateY(-14deg) rotateX(6deg) rotateZ(6deg) translate(16px, 8px); opacity: .7; }
.rcn-dl-card:hover .rcn-dl-cover img { transform: rotateY(-4deg) rotateX(2deg) rotateZ(-4deg) translateY(-6px); }
.rcn-dl-card:hover .rcn-dl-page--2 { transform: rotateZ(5deg) translate(18px, 2px); }
.rcn-dl-card:hover .rcn-dl-page--3 { transform: rotateZ(12deg) translate(34px, 6px); }
@keyframes rcn-dl-bob { 50% { translate: 0 -4px; } }
.rcn-dl-sheen { position: absolute; inset: 0; border-radius: 6px; overflow: hidden; transform: rotateY(-14deg) rotateX(6deg) rotateZ(-2deg); pointer-events: none; }
.rcn-dl-sheen::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); animation: rcn-dl-sheen 4.5s ease-in-out infinite 1.2s; }
@keyframes rcn-dl-sheen { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.rcn-dl-badge { position: absolute; right: -10px; bottom: 10px; padding: 4px 9px; border-radius: 8px; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: #fff; background: linear-gradient(135deg, #f04438, #c4320a); box-shadow: 0 8px 16px -6px rgba(240,68,56,.7); }

.rcn-dl-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--g); }
.rcn-dl-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--g); box-shadow: 0 0 0 0 rgba(38,208,124,.6); animation: rcn-dl-ping 2s infinite; }
@keyframes rcn-dl-ping { 70% { box-shadow: 0 0 0 8px rgba(38,208,124,0); } 100% { box-shadow: 0 0 0 0 rgba(38,208,124,0); } }
.rcn-dl .rcn-dl-heading { margin: 0 0 6px; font-size: 1.06rem; line-height: 1.28; font-weight: 700; letter-spacing: -.01em; color: #fff; }
.rcn-dl .rcn-dl-text { margin: 0 0 14px; font-size: .84rem; line-height: 1.5; color: #b7c4be; }

.rcn-dl-field { position: relative; }
.rcn-dl-field svg { position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; translate: 0 -50%; color: #7f8d86; pointer-events: none; transition: color .2s; }
.rcn-dl-field input, .rcn-dl-field--preview {
	width: 100%; min-height: 46px; padding: 10px 12px 10px 40px; border-radius: 12px; font: inherit; font-size: .9rem; color: #fff; text-overflow: ellipsis;
	background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); outline: none; transition: border-color .2s, box-shadow .2s, background .2s; box-sizing: border-box;
}
.rcn-dl-field input::placeholder { color: #6f7d77; }
.rcn-dl-field input:focus { border-color: var(--g); background: rgba(38,208,124,.07); box-shadow: 0 0 0 4px rgba(38,208,124,.16); }
.rcn-dl-field:focus-within svg { color: var(--g); }
.rcn-dl-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.rcn-dl-consent { display: flex; gap: 9px; align-items: flex-start; margin: 12px 0 14px; font-size: .74rem; line-height: 1.45; color: #9aa8a2; cursor: pointer; }
.rcn-dl-consent input { flex: none; width: 16px; height: 16px; margin-top: 1px; accent-color: var(--g); }
.rcn-dl-consent a { color: var(--g); }

.rcn-dl-btn {
	position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px;
	border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: .95rem; font-weight: 700; color: #04110b;
	background: linear-gradient(100deg, var(--g), var(--t)); box-shadow: 0 12px 26px -12px rgba(38,208,124,.85);
	transition: transform .15s ease, box-shadow .25s ease, filter .2s;
}
.rcn-dl-btn::after { content: ""; position: absolute; top: 0; bottom: 0; width: 45%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); animation: rcn-dl-sheen 3.6s ease-in-out infinite 2s; }
.rcn-dl-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(38,208,124,.95); }
.rcn-dl-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.rcn-dl-arrow { width: 18px; height: 18px; transition: transform .25s; }
.rcn-dl-btn:hover .rcn-dl-arrow { transform: translateX(4px); }
.rcn-dl-spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(4,17,11,.25); border-top-color: #04110b; animation: rcn-dl-rot .8s linear infinite; }
@keyframes rcn-dl-rot { to { transform: rotate(360deg); } }
.rcn-dl.is-busy .rcn-dl-spinner { display: block; }
.rcn-dl.is-busy .rcn-dl-arrow { display: none; }
.rcn-dl.is-busy .rcn-dl-btn { pointer-events: none; filter: saturate(.8); }
.rcn-dl-error { display: flex; gap: 6px; align-items: flex-start; margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; font-size: .76rem; line-height: 1.4; color: #ffb4ab; background: rgba(240,68,56,.12); border: 1px solid rgba(240,68,56,.28); }
.rcn-dl-error[hidden] { display: none; }
.rcn-dl.is-shake .rcn-dl-form { animation: rcn-dl-shake .4s; }
@keyframes rcn-dl-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* sent */
.rcn-dl.is-done .rcn-dl-form, .rcn-dl.is-done .rcn-dl-body > .rcn-dl-heading, .rcn-dl.is-done .rcn-dl-body > .rcn-dl-text, .rcn-dl.is-done .rcn-dl-body > .rcn-dl-eyebrow { display: none; }
.rcn-dl-done { position: relative; text-align: center; padding: .4rem 0 .2rem; animation: rcn-dl-pop .6s cubic-bezier(.16,1,.3,1) both; }
@keyframes rcn-dl-pop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
.rcn-dl-check { width: 64px; height: 64px; display: block; margin: .2rem auto .5rem; }
.rcn-dl-check circle { stroke: var(--g); stroke-width: 3; stroke-dasharray: 152; stroke-dashoffset: 152; animation: rcn-dl-draw .7s .1s cubic-bezier(.65,0,.35,1) forwards; }
.rcn-dl-check path { stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: rcn-dl-draw .45s .7s cubic-bezier(.65,0,.35,1) forwards; }
@keyframes rcn-dl-draw { to { stroke-dashoffset: 0; } }
.rcn-dl.is-done .rcn-dl-cover img { animation: rcn-dl-fly 1.1s cubic-bezier(.6,-0.2,.4,1) both; }
@keyframes rcn-dl-fly { 0% { transform: rotateY(-14deg) rotateX(6deg) rotateZ(-2deg); } 45% { transform: rotateY(0) rotateZ(-8deg) translateY(-10px) scale(.92); } 100% { transform: rotateY(-14deg) rotateX(6deg) rotateZ(-2deg); } }
.rcn-dl .rcn-dl-sent { margin: .7rem 0 0; font-size: .8rem; color: #9aa8a2; word-break: break-all; }
.rcn-dl-sent b { color: #fff; }
.rcn-dl-burst { position: absolute; left: 50%; top: 34px; width: 0; height: 0; pointer-events: none; }
.rcn-dl-burst i { position: absolute; width: 7px; height: 11px; border-radius: 2px; background: var(--g); opacity: 0; }
.rcn-dl.is-done .rcn-dl-burst i { animation: rcn-dl-confetti 1.1s .55s cubic-bezier(.2,.7,.3,1) forwards; }
.rcn-dl-burst i:nth-child(3n) { background: var(--t); }
.rcn-dl-burst i:nth-child(4n) { background: #ffd166; }
.rcn-dl-burst i:nth-child(5n) { background: #fff; }
@keyframes rcn-dl-confetti { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)); } }

/* In the article body (phones): the article's own heading, paragraph and
   list styles must not restyle the card. */
.article-content .rcn-dl { max-width: 460px; margin-inline: auto; }
.article-content .rcn-dl .rcn-dl-heading { font-size: 1.25rem; border: 0; padding: 0; }
.article-content .rcn-dl .rcn-dl-heading::before, .article-content .rcn-dl .rcn-dl-heading::after { content: none; }

/* Tablets and large phones in landscape (card in the article, 640px+):
   a full-width banner like the sections around it -- the PDF on the left,
   text and form on the right, email and button on one row. */
@media (min-width: 640px) {
	.article-content .rcn-dl { max-width: none; margin-block: 2.75rem; }
	.article-content .rcn-dl .rcn-dl-card { display: grid; grid-template-columns: minmax(150px, 200px) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 48px); align-items: center; padding: clamp(26px, 3.5vw, 40px); border-radius: 22px; }
	.article-content .rcn-dl .rcn-dl-cover { width: 100%; max-width: 190px; margin: 0 auto; }
	.article-content .rcn-dl .rcn-dl-heading { font-size: clamp(1.4rem, 2.4vw, 1.75rem); margin-bottom: 8px; }
	.article-content .rcn-dl .rcn-dl-text { font-size: 1rem; margin-bottom: 20px; }
	.article-content .rcn-dl .rcn-dl-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
	.article-content .rcn-dl .rcn-dl-field { grid-column: 1; }
	.article-content .rcn-dl .rcn-dl-btn { grid-column: 2; grid-row: 1; width: auto; padding: 0 26px; white-space: nowrap; }
	.article-content .rcn-dl .rcn-dl-consent, .article-content .rcn-dl .rcn-dl-error { grid-column: 1 / -1; margin: 0; }
	.article-content .rcn-dl .rcn-dl-done { text-align: left; }
	.article-content .rcn-dl .rcn-dl-check { margin-left: 0; }
	.article-content .rcn-dl .rcn-dl-burst { left: 32px; }
}

/* Compact (shorter laptop screens): no cover picture or line of text; a
   small document mark beside the heading instead. */
.rcn-dl--compact .rcn-dl-cover, .rcn-dl--compact .rcn-dl-body > .rcn-dl-text { display: none; }
.rcn-dl--compact .rcn-dl-body > .rcn-dl-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.rcn-dl--compact .rcn-dl-body > .rcn-dl-heading::before { content: "PDF"; flex: none; display: grid; place-items: center; width: 34px; height: 42px; border-radius: 6px; font-size: 9px; font-weight: 800; letter-spacing: .06em; color: #fff; background: linear-gradient(160deg, #f04438, #b42318); box-shadow: 0 8px 16px -8px rgba(240,68,56,.8); }
.rcn-dl--compact.is-done .rcn-dl-check { width: 48px; height: 48px; }

/* editor preview */
.rcn-dl--editor .rcn-dl-card { opacity: 1; transform: none; max-width: 300px; }
.rcn-dl--editor .rcn-dl-btn { display: flex; }
.rcn-dl-field--preview { color: #6f7d77; margin-bottom: .7rem; }
.rcn-dl-editor-note { margin: .8rem 0 0; font-size: .72rem; color: #7f8d86; }

@media (prefers-reduced-motion: reduce) {
	.rcn-dl-card, .rcn-dl-card::before, .rcn-dl-glow, .rcn-dl-cover img, .rcn-dl-sheen::after, .rcn-dl-btn::after, .rcn-dl-eyebrow::before, .rcn-dl-done, .rcn-dl.is-done .rcn-dl-burst i { animation: none !important; transition: none !important; }
	.rcn-dl-card { opacity: 1; transform: none; }
	.rcn-dl-check circle, .rcn-dl-check path { stroke-dashoffset: 0; }
}