/* Fundraiser: tracker page, home strip, detail block.
   Styled after the No Fuss flyer: royal blue, sky-blue bands, condensed
   uppercase headings, heart outlines, star badges, dotted dividers, a comet
   that rides the bar. Brand vars come from rt-site-vars. */

.rt-fr-tracker, .rt-fr-banner, .rt-fr-detail {
	--fr-ink: var(--rt-ink, #1d497c);
	--fr-primary: var(--rt-primary, #2566b6);
	--fr-bright: var(--rt-primary-bright, #229ce0);
	--fr-sky: color-mix(in srgb, var(--fr-bright) 18%, #fff);
	--fr-gold: var(--rt-neutral, #c4ccd2); /* silver: the old Cox gold is retired (Principal Kelly, 8-28) */
	--fr-silver: #9aa3ad;
	--fr-paper: var(--rt-paper, #fff);
	--fr-display: var(--rt-font-display, "RT Display", "Arial Narrow", sans-serif);
}

/* ---- Type ---- */
.rt-fr-h2 { display: flex; align-items: center; justify-content: center; gap: .45em; margin: 2.4rem 0 1.1rem; font-family: var(--fr-display); font-weight: var(--rt-font-display-weight, 700); font-size: clamp(1.7rem, 3.4vw, 2.4rem); letter-spacing: .04em; text-transform: uppercase; color: var(--fr-primary); }
.rt-fr-h2 i { color: var(--fr-gold); font-size: .8em; }
.rt-fr-h2--ribbon { position: relative; }
.rt-fr-h2--ribbon span { display: inline-block; padding: .25em 1.2em; background: var(--fr-primary); color: #fff; border-radius: 6px; transform: rotate(-1.5deg); box-shadow: 0 6px 16px rgba(37,102,182,.3); }
.rt-fr-h2--ribbon i { color: #fff; }

/* ---- Head ---- */
.rt-fr-head { text-align: center; padding: .5rem 0 1.2rem; }
.rt-fr-tagline-band { display: inline-flex; align-items: center; gap: .6em; margin: 0 0 1.2rem; padding: .35em 1.2em; background: var(--fr-sky); color: var(--fr-primary); font-family: var(--fr-display); font-weight: var(--rt-font-display-weight, 700); font-size: clamp(1.05rem, 2.2vw, 1.45rem); letter-spacing: .08em; text-transform: uppercase; clip-path: polygon(0 0, 100% 0, 97% 100%, 3% 100%); }
.rt-fr-tagline-band i { color: var(--fr-primary); }

/* ---- Progress ---- */
.rt-fr-progress { position: relative; }
.rt-fr-numbers { display: flex; align-items: baseline; justify-content: center; gap: .5em; flex-wrap: wrap; margin: 0 0 .4rem; }
.rt-fr-raised { font-family: var(--fr-display); font-size: clamp(2.6rem, 7vw, 4.6rem); font-weight: var(--rt-font-display-weight, 700); line-height: 1; letter-spacing: .01em; color: var(--fr-primary); }
.rt-fr-raised-word { font-size: .3em; letter-spacing: .14em; color: var(--fr-ink); opacity: .8; }
.rt-fr-goal { font-size: 1.05rem; font-weight: 700; color: var(--fr-ink); opacity: .85; }
.rt-fr-bar { position: relative; height: 30px; border-radius: 999px; background: var(--fr-sky); overflow: visible; margin: 1rem 0 3.4rem; box-shadow: inset 0 2px 4px rgba(29,73,124,.18); }
.rt-fr-fill { position: relative; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--fr-ink), var(--fr-primary) 60%, var(--fr-bright)); transition: width 2.2s cubic-bezier(.22,1,.36,1); box-shadow: 0 0 18px rgba(34,156,224,.5); }
.rt-fr-fill::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, transparent 0, rgba(255,255,255,.35) 50%, transparent 100%); background-size: 200% 100%; animation: rt-fr-shine 2.6s linear infinite; }
.rt-fr-comet { position: absolute; right: -10px; top: 50%; width: 34px; height: 34px; margin-top: -17px; }
.rt-fr-comet::after { content: "\2605"; position: absolute; inset: 0; font-size: 30px; line-height: 34px; text-align: center; color: var(--fr-gold); text-shadow: 0 0 10px rgba(160,170,178,.9), 0 0 22px rgba(255,255,255,.8); animation: rt-fr-twinkle 1.6s ease-in-out infinite; }
.rt-fr-comet::before { content: ""; position: absolute; right: 22px; top: 11px; width: 110px; height: 12px; border-radius: 999px; background: linear-gradient(270deg, rgba(255,255,255,.95), rgba(160,170,178,.6) 40%, transparent); filter: blur(.5px); }
.rt-fr-mark { position: absolute; top: 100%; transform: translateX(-50%); margin-top: 8px; text-align: center; line-height: 1; color: var(--fr-ink); opacity: .45; transition: opacity .4s, transform .4s; width: 6.5em; }
.rt-fr-mark i { display: block; font-size: 1.15rem; margin: 0 auto 4px; color: var(--fr-silver); }
.rt-fr-mark b { display: block; font-family: var(--fr-display); font-weight: var(--rt-font-display-weight, 700); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.rt-fr-mark small { display: block; font-size: .62rem; font-weight: 700; opacity: .8; margin-top: 2px; }
.rt-fr-mark.is-hit { opacity: 1; color: var(--fr-primary); }
/* Reached: the icon grows and takes the brand color so it no longer matches
   the unreached ones (Furi, 9-6: Liftoff looked like nothing happened). */
.rt-fr-mark.is-hit i { color: var(--fr-primary); font-size: 1.7rem; margin-bottom: 2px; filter: drop-shadow(0 0 6px rgba(160,170,178,.7)); }
.rt-fr-mark.is-hit b { font-size: .88rem; }
/* The latest milestone earned wears a glowing ring behind its icon. */
.rt-fr-mark.is-latest i { position: relative; z-index: 1; }
.rt-fr-mark.is-latest b { margin-top: .5rem; }
.rt-fr-mark.is-latest::before { content: ""; position: absolute; left: 50%; top: -.35rem; width: 2.5rem; height: 2.5rem; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 55%, transparent 72%); box-shadow: 0 0 0 3px var(--fr-primary), 0 0 18px var(--fr-primary); animation: rt-fr-ring 2.4s ease-in-out infinite; }
@keyframes rt-fr-ring { 0%, 100% { box-shadow: 0 0 0 3px var(--fr-primary), 0 0 14px var(--fr-primary); } 50% { box-shadow: 0 0 0 4px var(--fr-primary), 0 0 26px var(--fr-primary); } }
.rt-fr-progress--compact .rt-fr-mark.is-hit i { font-size: 1.15rem; }
.rt-fr-progress--compact .rt-fr-mark.is-latest::before { width: 1.9rem; height: 1.9rem; top: -.3rem; }
.rt-fr-banner .rt-fr-mark.is-hit i { color: #fff; filter: drop-shadow(0 0 8px rgba(255,255,255,.8)); }
.rt-fr-banner .rt-fr-mark.is-latest::before { box-shadow: 0 0 0 3px #fff, 0 0 18px #fff; animation: none; }
.rt-fr-mark.is-hit.is-fresh { animation: rt-fr-pop .8s cubic-bezier(.34,1.56,.64,1); }
/* The milestone moment: dim the page, land the badge big in the middle. */
.rt-fr-hero-dim { position: fixed; inset: 0; z-index: 9700; background: rgba(15,28,54,.72); opacity: 0; transition: opacity .35s; }
.rt-fr-hero-dim.is-on { opacity: 1; }
.rt-fr-hero { position: fixed; left: 50%; top: 50%; z-index: 9701; transform: translate(-50%,-50%) scale(.6); opacity: 0; display: grid; justify-items: center; gap: .8rem; text-align: center; padding: 0 1rem; max-width: 92vw; transition: transform .5s cubic-bezier(.22,1.2,.36,1), opacity .35s; }
.rt-fr-hero.is-on { transform: translate(-50%,-50%) scale(1); opacity: 1; }
.rt-fr-hero-icon { width: clamp(124px, 22vw, 168px); height: clamp(124px, 22vw, 168px); border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--fr-primary); font-size: clamp(3.4rem, 10vw, 4.6rem); box-shadow: 0 0 0 6px var(--fr-primary), 0 0 40px var(--fr-primary); }
.rt-fr-hero b { color: #fff; font-family: var(--fr-display); font-weight: var(--rt-font-display-weight, 700); font-size: clamp(1.7rem, 5vw, 2.4rem); line-height: 1.1; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.rt-fr-hero b span { display: block; }
.rt-fr-hero b .rt-fr-hero-pct { color: var(--fr-gold, #c4ccd2); }
.rt-fr-hero small { color: #fff; font-size: clamp(1rem, 2.6vw, 1.2rem); font-weight: 600; opacity: .95; }
@media (prefers-reduced-motion: reduce) { .rt-fr-mark.is-latest::before { animation: none; } }
.rt-fr-togo { margin: 0; font-family: var(--fr-display); font-weight: var(--rt-font-display-weight, 700); font-size: 1.25rem; letter-spacing: .05em; text-transform: uppercase; color: var(--fr-primary); }
.rt-fr-togo em { font-style: normal; color: var(--fr-ink); }
@keyframes rt-fr-shine { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes rt-fr-pop { 0% { transform: translateX(-50%) scale(.5) rotate(-20deg); } 60% { transform: translateX(-50%) scale(1.4) rotate(8deg); } 100% { transform: translateX(-50%) scale(1) rotate(0); } }
@keyframes rt-fr-twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.18) rotate(18deg); } }

/* compact (strip, slider) */
.rt-fr-progress--compact .rt-fr-numbers { justify-content: flex-start; }
.rt-fr-progress--compact .rt-fr-raised { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.rt-fr-progress--compact .rt-fr-bar { height: 16px; margin: .5rem 0 2rem; }
.rt-fr-progress--compact .rt-fr-comet { width: 22px; height: 22px; margin-top: -11px; right: -6px; }
.rt-fr-progress--compact .rt-fr-comet::after { font-size: 20px; line-height: 22px; }
.rt-fr-progress--compact .rt-fr-comet::before { width: 60px; height: 8px; top: 7px; right: 14px; }
.rt-fr-progress--compact .rt-fr-mark { width: 5em; margin-top: 5px; }
.rt-fr-progress--compact .rt-fr-mark i { font-size: .8rem; margin-bottom: 2px; }
.rt-fr-progress--compact .rt-fr-mark b { font-size: .62rem; }
.rt-fr-progress--compact .rt-fr-mark small { display: none; }

/* ---- Stats, countdown, ctas ---- */
.rt-fr-stats { list-style: none; display: flex; justify-content: center; gap: 2rem; padding: 0; margin: .2rem 0 .8rem; flex-wrap: wrap; color: var(--fr-ink); font-weight: 700; }
.rt-fr-stats b { display: block; font-family: var(--fr-display); font-size: 1.9rem; line-height: 1; color: var(--fr-primary); }
.rt-fr-countdown { display: inline-flex; align-items: center; gap: .45em; margin: .4rem 0; padding: .4em 1.1em; border-radius: 999px; font-family: var(--fr-display); font-weight: var(--rt-font-display-weight, 700); letter-spacing: .06em; text-transform: uppercase; font-size: 1rem; background: var(--fr-gold); color: var(--fr-ink); }
.rt-fr-countdown.is-soon { background: var(--fr-ink); color: #fff; }
.rt-fr-countdown.is-now { background: #d63c2f; color: #fff; animation: rt-fr-pulse 1.4s ease-in-out infinite; }
.rt-fr-countdown.is-upcoming { background: var(--fr-ink); color: #fff; }
.rt-fr-countdown.is-over { background: var(--fr-sky); color: var(--fr-ink); }
@keyframes rt-fr-pulse { 50% { transform: scale(1.04); } }
.rt-fr-ctas { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin: .8rem 0 0; }
/* The Donate button is the one thing on this page we want pressed, so it
   carries the brand blue and the only motion. The countdown above it steps
   back to silver rather than competing (Furi, 9-1). */
.rt-fr-btn--give { position: relative; overflow: hidden; isolation: isolate; background: var(--fr-primary) !important; color: #fff !important; border-color: var(--fr-primary) !important; box-shadow: 0 6px 18px rgba(37,102,182,.38); font-weight: 800; }
.rt-fr-btn--give:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 10px 24px rgba(37,102,182,.45); }
/* A light crossing the face: long pause, quick sweep, nothing that flashes. */
.rt-fr-btn--give::after { content: ""; position: absolute; top: -60%; left: -40%; width: 26%; height: 220%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform: rotate(18deg); pointer-events: none; animation: rt-fr-sparkle 4.5s ease-in-out infinite; }
@keyframes rt-fr-sparkle { 0%, 62% { left: -40%; opacity: 0; } 66% { opacity: 1; } 92%, 100% { left: 116%; opacity: 0; } }
/* Bigger than every other button on the page: it is the one thing we want
   pressed (Furi, 9-1). Pill shape, one size up, full width on a phone. */
.rt-fr-ctas .rt-fr-btn--give { font-size: 1.3rem; padding: 18px 46px; border-radius: 999px; letter-spacing: .03em; }
.rt-fr-ctas .rt-fr-btn--give i { margin-right: .3em; }
.rt-fr-btn--give.is-pressed { transform: translateY(1px) scale(.98); }
/* Glints: small four-point stars that twinkle at the edges of the face, each
   on its own beat, so the button sparkles as well as shines. */
.rt-fr-glint { position: absolute; z-index: 1; width: 10px; height: 10px; pointer-events: none; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 4px #fff); opacity: 0; animation: rt-fr-twinkle 2.6s ease-in-out infinite; }
.rt-fr-glint:nth-of-type(1) { top: 12%; right: 8%; }
.rt-fr-glint:nth-of-type(2) { bottom: 14%; left: 10%; width: 8px; height: 8px; animation-delay: .9s; }
.rt-fr-glint:nth-of-type(3) { top: 20%; left: 33%; width: 6px; height: 6px; animation-delay: 1.7s; }
.rt-fr-glint:nth-of-type(4) { bottom: 18%; right: 30%; width: 7px; height: 7px; animation-delay: 2.1s; }
@keyframes rt-fr-twinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: 1; transform: scale(1.25) rotate(45deg); } }
@media (max-width: 720px) { .rt-fr-ctas .rt-fr-btn--give { width: 100%; text-align: center; font-size: 1.2rem; padding: 16px 24px; } }

/* ---- Comet moments (what a gift funds) ---- */
.rt-fr-moments { margin: 2rem auto 0; max-width: 760px; padding: 1.2rem 1.4rem 1rem; border: 3px solid var(--fr-primary); border-radius: 18px; background: var(--fr-paper); }
.rt-fr-moments-title { margin: 0 0 .6rem; text-align: center; font-family: var(--fr-display); font-weight: var(--rt-font-display-weight, 700); font-size: clamp(1.2rem, 2.4vw, 1.6rem); letter-spacing: .05em; text-transform: uppercase; color: var(--fr-primary); }
.rt-fr-moments-title i { color: var(--fr-primary); margin-left: .3em; }
.rt-fr-moments ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1.5rem; }
.rt-fr-moments li { display: flex; align-items: center; gap: .8em; padding: .55rem .2rem; border-bottom: 2px dotted var(--fr-primary); font-weight: 600; color: var(--fr-ink); }
.rt-fr-moments li i { font-size: 1.5rem; width: 1.4em; text-align: center; color: var(--fr-primary); }
.rt-fr-moments li:nth-child(4n+1) i { color: #e0433a; } .rt-fr-moments li:nth-child(4n+2) i { color: #f28c28; } .rt-fr-moments li:nth-child(4n+3) i { color: var(--fr-bright); } .rt-fr-moments li:nth-child(4n) i { color: var(--fr-gold); }

/* ---- Prizes (flyer cards: star badge, uppercase title, dotted rules) ---- */
.rt-fr-prize-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.rt-fr-prize { position: relative; background: var(--fr-paper); border-radius: 18px; padding: 1rem 1.1rem 1.1rem; box-shadow: 0 10px 28px rgba(29,73,124,.14); transition: transform .25s; display: grid; grid-template-columns: 64px 1fr; gap: .2rem .9rem; align-items: start; }
.rt-fr-prize:hover { transform: translateY(-4px) rotate(-.4deg); }
.rt-fr-prize.has-leader { border: 3px solid var(--fr-gold); }
.rt-fr-prize-badge { grid-row: 1 / span 3; position: relative; width: 64px; height: 64px; display: grid; place-items: center; color: #fff; font-family: var(--fr-display); font-weight: var(--rt-font-display-weight, 700); font-size: 1rem; letter-spacing: .02em; }
.rt-fr-prize-badge::before { content: ""; position: absolute; inset: 0; background: var(--fr-primary); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); filter: drop-shadow(0 3px 4px rgba(0,0,0,.2)); }
.rt-fr-prize-badge span { position: relative; z-index: 1; padding-top: 6px; }
.rt-fr-prize--student_2 .rt-fr-prize-badge::before, .rt-fr-prize--class_1 .rt-fr-prize-badge::before { background: var(--fr-silver); }
.rt-fr-prize--unique_donors .rt-fr-prize-badge::before { background: var(--fr-bright); }
.rt-fr-prize-head { margin: .1rem 0 0; font-family: var(--fr-display); font-weight: var(--rt-font-display-weight, 700); font-size: 1.3rem; letter-spacing: .05em; text-transform: uppercase; color: var(--fr-primary); line-height: 1.05; }
.rt-fr-prize-what { margin: 0; font-family: var(--fr-display); font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; color: var(--fr-ink); line-height: 1.15; }
.rt-fr-prize-lead-word { grid-column: 1 / -1; margin: .6rem 0 0; padding-top: .6rem; border-top: 2px dotted var(--fr-primary); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--fr-primary); }
.rt-fr-prize-lead-word.is-open { color: var(--fr-silver); }
.rt-fr-prize-leaders { grid-column: 1 / -1; list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .4rem; }
.rt-fr-prize-leaders li { display: grid; grid-template-columns: 1fr auto; gap: 0 .5rem; align-items: center; padding: .5rem .7rem; border-radius: 12px; background: var(--fr-sky); }
.rt-fr-prize-leaders li b { grid-column: 1; color: var(--fr-ink); }
.rt-fr-prize-leaders li span { grid-column: 1; font-size: .8rem; opacity: .8; }
.rt-fr-prize-leaders li em { grid-column: 2; grid-row: 1 / span 2; font-style: normal; font-family: var(--fr-display); font-size: 1.2rem; color: var(--fr-primary); }
.rt-fr-tie-note { margin: .9rem 0 0; font-size: .85rem; opacity: .75; text-align: center; }

/* ---- Leaderboards ---- */
.rt-fr-boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 2.5rem; }
.rt-fr-list { list-style: none; margin: 0; padding: 0; }
.rt-fr-row { display: grid; grid-template-columns: 4.4em 1fr auto; gap: .8rem; align-items: center; padding: .6rem .5rem; border-bottom: 2px dotted color-mix(in srgb, var(--fr-primary) 45%, transparent); }
.rt-fr-row.is-top { background: var(--fr-sky); border-radius: 12px; border-bottom-color: transparent; margin-bottom: 2px; }
.rt-fr-rank { display: flex; align-items: center; gap: .3em; font-family: var(--fr-display); font-weight: var(--rt-font-display-weight, 700); font-size: 1.05rem; letter-spacing: .04em; color: var(--fr-ink); }
.rt-fr-rank i { font-size: 1.1rem; }
.rt-fr-rank small { font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.is-top-1 .rt-fr-rank i { color: var(--fr-gold); } .is-top-2 .rt-fr-rank i { color: var(--fr-silver); } .is-top-3 .rt-fr-rank i { color: #c47a3d; }
.rt-fr-who { display: grid; }
.rt-fr-who b { color: var(--fr-ink); }
.rt-fr-who span { font-size: .8rem; opacity: .75; }
.rt-fr-sum { font-family: var(--fr-display); font-size: 1.25rem; color: var(--fr-primary); }
.rt-fr-more, .rt-fr-fresh, .rt-fr-empty { text-align: center; opacity: .75; font-size: .9rem; }
.rt-fr-fresh { margin-top: 2rem; }
.rt-fr-thanks { margin: 2.5rem 0 0; text-align: center; font-family: var(--fr-display); font-weight: var(--rt-font-display-weight, 700); font-size: clamp(1.3rem, 3vw, 2rem); letter-spacing: .06em; text-transform: uppercase; color: var(--fr-primary); }
.rt-fr-thanks i { margin-left: .3em; }

/* ---- Home strip ---- */
.rt-fr-banner { background: linear-gradient(120deg, var(--fr-ink), var(--fr-primary) 55%, var(--fr-bright)); color: #fff; }
.rt-fr-banner--home { position: relative; z-index: 2; }
.rt-fr-banner-inner { max-width: min(1440px, 94vw); margin: 0 auto; padding: .9rem 0; display: grid; grid-template-columns: minmax(200px, 1fr) minmax(260px, 1.4fr) auto; gap: 1rem 2rem; align-items: center; }
.rt-fr-banner .rt-fr-kicker { display: block; font-family: var(--fr-display); font-weight: var(--rt-font-display-weight, 700); font-size: 1.5rem; letter-spacing: .05em; text-transform: uppercase; line-height: 1; }
.rt-fr-banner .rt-fr-tagline { display: block; opacity: .92; font-size: .9rem; margin-top: .3rem; }
.rt-fr-banner .rt-fr-countdown { background: rgba(255,255,255,.18); color: #fff; margin-top: .5rem; font-size: .75rem; padding: .3em .9em; }
.rt-fr-banner .rt-fr-countdown.is-soon { background: var(--fr-gold); color: #1a1a1a; }
.rt-fr-banner .rt-fr-countdown.is-now { background: #d63c2f; }
.rt-fr-banner .rt-fr-raised, .rt-fr-banner .rt-fr-raised-word, .rt-fr-banner .rt-fr-goal, .rt-fr-banner .rt-fr-mark, .rt-fr-banner .rt-fr-mark.is-hit { color: #fff; }
.rt-fr-banner .rt-fr-bar { background: rgba(255,255,255,.22); box-shadow: none; }
.rt-fr-banner .rt-fr-fill { background: linear-gradient(90deg, #fff, var(--fr-gold)); box-shadow: 0 0 16px rgba(160,170,178,.5); }
.rt-fr-banner .rt-fr-ctas { margin: 0; justify-content: flex-end; }
.rt-fr-banner .rt-btn--ghost { color: #fff; border-color: rgba(255,255,255,.7); }
@media (max-width: 860px) { .rt-fr-banner-inner { grid-template-columns: 1fr; text-align: center; gap: .6rem; padding: 1rem 0; } .rt-fr-banner .rt-fr-numbers, .rt-fr-progress--compact .rt-fr-numbers, .rt-fr-banner .rt-fr-ctas { justify-content: center; } }
/* On the blue banner the give button inverts: a white pill with brand text
   and blue glints, so it is not blue on blue (Furi, 9-1). */
.rt-fr-banner .rt-fr-btn--give { background: #fff !important; color: var(--fr-primary) !important; border-color: #fff !important; box-shadow: 0 8px 22px rgba(0,0,0,.28); }
.rt-fr-banner .rt-fr-btn--give:hover { background: var(--fr-sky) !important; }
.rt-fr-banner .rt-fr-btn--give i { color: var(--fr-primary); }
.rt-fr-banner .rt-fr-btn--give::after { background: linear-gradient(100deg, transparent, rgba(37,102,182,.3), transparent); }
.rt-fr-banner .rt-fr-glint { background: var(--fr-bright); filter: drop-shadow(0 0 4px var(--fr-bright)); }
/* Phones: the banner runs edge to edge (no white arch slivers beside it), the
   bar keeps room for its end labels, and the two buttons stack at one width. */
@media (max-width: 768px) {
  .rt-fr-banner--home { width: 100vw; margin-left: calc(50% - 50vw); }
  .rt-fr-banner-inner { max-width: none; padding: 1.1rem 5vw 1.2rem; gap: .5rem; }
  .rt-fr-banner .rt-fr-kicker { font-size: 1.35rem; }
  .rt-fr-banner .rt-fr-tagline { font-size: .88rem; line-height: 1.35; }
  .rt-fr-progress--compact .rt-fr-bar { margin: .5rem 2.4em 1.9rem; }
  .rt-fr-progress--compact .rt-fr-mark { width: 4.6em; }
  .rt-fr-progress--compact .rt-fr-mark b { font-size: .56rem; letter-spacing: .04em; }
  .rt-fr-banner .rt-fr-ctas { flex-direction: column; align-items: center; gap: .6rem; margin-top: .2rem; }
  .rt-fr-banner .rt-fr-ctas .rt-btn, .rt-fr-banner .rt-fr-ctas .rt-fr-btn--give { width: min(100%, 320px); text-align: center; font-size: 1.05rem; padding: 14px 24px; }
  .rt-fr-bar { margin-left: 2.6em; margin-right: 2.6em; }
  .rt-fr-mark { width: 5em; }
  .rt-fr-mark b { font-size: .68rem; }
}

/* ---- Tracker page shell ---- */
.rt-fr-tracker { max-width: min(1200px, 94vw); margin: 0 auto; }

/* ---- Detail block ---- */
.rt-fr-detail { margin: 1rem 0 1.5rem; padding: 1.2rem 1.4rem; border-radius: 18px; background: var(--fr-sky); text-align: center; }

/* ---- Celebration canvas ---- */
.rt-fr-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 9999; }
@media (prefers-reduced-motion: reduce) { .rt-fr-fill { transition: none; } .rt-fr-fill::after, .rt-fr-countdown.is-now, .rt-fr-mark.is-fresh, .rt-fr-comet::after, .rt-fr-btn--give::after, .rt-fr-glint { animation: none; } }

/* The record to beat, under the raised/goal numbers. */
.rt-fr-record { margin: .15rem 0 .6rem; font-size: .95rem; font-weight: 700; letter-spacing: .02em; color: var(--rt-gray, #6b6b6b); }
.rt-fr-record i { color: var(--rt-primary-bright, #229ce0); margin-right: .25rem; }
.rt-fr-record.is-broken { color: var(--rt-primary-bright, #229ce0); font-size: 1.15rem; animation: rt-fr-pop .6s ease-out; }
.rt-fr-record.is-broken span { display: block; font-size: .8rem; font-weight: 600; color: var(--rt-gray, #6b6b6b); }

/* A prize every student can earn, not a race for one. */
.rt-fr-everyone {
  margin: 14px 0 0;
  padding: 10px 16px;
  border: 2px dashed var(--rt-primary, #2566b6);
  border-radius: var(--rt-radius, 10px);
  text-align: center;
  font-weight: 700;
}
.rt-fr-everyone i { margin-right: .4em; color: var(--rt-primary, #2566b6); }

/* The questions families ask, folded so the page stays scannable. */
.rt-fr-faq { margin: 26px 0 0; }
.rt-fr-faq-item {
  border: 1px solid var(--rt-line, #e2e8f0);
  border-radius: var(--rt-radius, 10px);
  padding: 10px 16px;
  margin: 0 0 8px;
  background: var(--rt-paper, #fff);
}
.rt-fr-faq-item summary { font-weight: 700; cursor: pointer; }
.rt-fr-faq-item p { margin: 8px 0 0; }

/* ---- The everyone prize and its treasure chest ----
   Under the ranked prizes: the line every student can cross, how many have
   crossed it, and a mobile-game style chest that hands out a pretend
   mystery prize for fun (the real one needs the real gift; the fine print
   says so). The chest is HTML, not SVG, so the lid can swing in 3D. */
.rt-fr-everyone-wrap { margin: 14px 0 0; }
.rt-fr-everyone-wrap .rt-fr-everyone { margin: 0; }
.rt-fr-everyone-count { margin: .5rem 0 0; text-align: center; font-family: var(--fr-display); font-weight: var(--rt-font-display-weight, 700); font-size: clamp(1.15rem, 2.4vw, 1.5rem); letter-spacing: .04em; text-transform: uppercase; color: var(--fr-primary); }
.rt-fr-everyone-count b { display: inline-block; min-width: 1.6em; padding: 0 .35em; border-radius: 8px; background: var(--fr-primary); color: #fff; }
.rt-fr-everyone-count.is-open { color: var(--fr-ink); font-size: 1rem; letter-spacing: .03em; }

.rt-fr-chest { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: .6rem 1.2rem; align-items: center; max-width: 640px; margin: 14px auto 0; padding: 14px 18px 12px; border-radius: var(--rt-radius, 10px); background: var(--fr-sky); }
.rt-fr-chest-btn { position: relative; display: grid; justify-items: center; gap: .5rem; padding: .5rem .2rem .2rem; border: 0; background: none; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rt-fr-chest-scene { position: relative; display: block; width: 150px; height: 118px; perspective: 520px; transition: transform .2s ease; }
.rt-fr-chest-btn:hover .rt-fr-chest-scene, .rt-fr-chest-btn:focus-visible .rt-fr-chest-scene { transform: translateY(-3px); }
.rt-fr-chest:not(.is-open) .rt-fr-chest-scene { animation: rt-fr-chest-wiggle 5s ease-in-out infinite; }
@keyframes rt-fr-chest-wiggle { 0%, 86%, 100% { transform: rotate(0); } 89% { transform: rotate(-3deg); } 92% { transform: rotate(3deg); } 95% { transform: rotate(-2deg); } 98% { transform: rotate(1deg); } }
.rt-fr-chest-body, .rt-fr-chest-lid { position: absolute; left: 0; right: 0; display: block; }
.rt-fr-chest-body { bottom: 0; height: 68px; border-radius: 4px 4px 14px 14px; background: linear-gradient(180deg, var(--fr-primary) 0%, var(--fr-ink) 100%); border-top: 3px solid rgba(0,0,0,.28); box-shadow: inset 0 -7px 0 rgba(0,0,0,.2), inset 0 3px 0 rgba(255,255,255,.1), 0 10px 20px rgba(0,0,0,.22); z-index: 3; }
.rt-fr-chest-lid { top: 10px; height: 48px; border-radius: 44px 44px 4px 4px / 34px 34px 4px 4px; background: linear-gradient(180deg, #fff 0%, var(--fr-bright) 4%, var(--fr-bright) 45%, var(--fr-primary) 100%); box-shadow: inset 0 4px 0 rgba(255,255,255,.28), inset 0 -5px 0 rgba(0,0,0,.16), 0 3px 8px rgba(0,0,0,.25); transform-origin: 50% 100%; transform: rotateX(0); transition: transform .6s cubic-bezier(.2, .9, .3, 1.15); z-index: 2; }
/* Silver bands on the lid and the body. */
.rt-fr-chest-body::before, .rt-fr-chest-body::after, .rt-fr-chest-lid::before, .rt-fr-chest-lid::after { content: ""; position: absolute; top: 0; bottom: 0; width: 15px; background: linear-gradient(90deg, #9aa3ad, #eef2f5 50%, #9aa3ad); box-shadow: 0 0 0 1px rgba(0,0,0,.14); }
.rt-fr-chest-body::before, .rt-fr-chest-lid::before { left: 24px; }
.rt-fr-chest-body::after, .rt-fr-chest-lid::after { right: 24px; }
.rt-fr-chest-lid::before, .rt-fr-chest-lid::after { top: 2px; border-radius: 6px 6px 0 0; }
.rt-fr-chest-lock { position: absolute; left: 50%; top: -16px; z-index: 4; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; transform: translateX(-50%); background: radial-gradient(circle at 35% 32%, #f7f9fb, #a9b2ba 72%); color: var(--fr-primary); font-size: 18px; box-shadow: 0 2px 6px rgba(0,0,0,.32), inset 0 -2px 0 rgba(0,0,0,.12); }
.rt-fr-chest-glow { position: absolute; left: 14px; right: 14px; top: 26px; height: 54px; z-index: 1; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255,240,170,.98), rgba(255,220,110,.45) 55%, transparent 74%); opacity: 0; transform: scaleY(.25); filter: blur(2px); transition: opacity .35s .25s ease, transform .5s .25s ease; }
.rt-fr-chest.is-open .rt-fr-chest-lid { transform: rotateX(112deg); }
.rt-fr-chest.is-open .rt-fr-chest-glow { opacity: 1; transform: scaleY(1); }
.rt-fr-chest-glint { position: absolute; z-index: 5; width: 10px; height: 10px; pointer-events: none; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 4px #fff); opacity: 0; animation: rt-fr-twinkle 2.4s ease-in-out infinite; }
.rt-fr-chest-glint:nth-child(1) { top: 6px; right: 18px; }
.rt-fr-chest-glint:nth-child(2) { top: 40px; left: 4px; width: 8px; height: 8px; animation-delay: .8s; }
.rt-fr-chest-glint:nth-child(3) { bottom: 10px; right: 6px; width: 7px; height: 7px; animation-delay: 1.5s; }
.rt-fr-chest.is-open .rt-fr-chest-glint { width: 14px; height: 14px; animation-duration: 1.2s; }
.rt-fr-chest-cta { font-family: var(--fr-display); font-weight: var(--rt-font-display-weight, 700); font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fr-primary); }
.rt-fr-chest-wait { margin: 0; text-align: center; font-weight: 700; color: var(--fr-ink); opacity: .85; }
.rt-fr-chest-prize { display: grid; justify-items: center; gap: .35rem; text-align: center; animation: rt-fr-chest-pop .55s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes rt-fr-chest-pop { 0% { opacity: 0; transform: translateY(24px) scale(.6); } 100% { opacity: 1; transform: none; } }
.rt-fr-chest-prize-art { display: grid; place-items: center; width: 124px; height: 124px; overflow: hidden; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px var(--fr-primary), 0 0 0 9px #fff, 0 10px 24px rgba(0,0,0,.16); color: var(--fr-primary); font-size: 3rem; }
.rt-fr-chest-prize-art img { width: 100%; height: 100%; object-fit: cover; }
.rt-fr-chest-prize b { font-family: var(--fr-display); font-weight: var(--rt-font-display-weight, 700); font-size: 1.3rem; letter-spacing: .04em; text-transform: uppercase; color: var(--fr-ink); }
.rt-fr-chest-again { font-size: .8rem; opacity: .75; }
.rt-fr-chest-fine { grid-column: 1 / -1; margin: .2rem 0 0; padding-top: .6rem; border-top: 1px dashed rgba(0,0,0,.15); font-size: .82rem; line-height: 1.45; text-align: center; opacity: .9; }
@media (max-width: 640px) {
  .rt-fr-chest { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 12px 14px 10px; }
  .rt-fr-chest-prize-art { width: 104px; height: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  .rt-fr-chest:not(.is-open) .rt-fr-chest-scene, .rt-fr-chest-glint { animation: none; }
  .rt-fr-chest-lid, .rt-fr-chest-glow { transition: none; }
  .rt-fr-chest-prize { animation: none; }
}