/* Financial Rebellion HQ x OhioHealth donor pages (Oct 26 2026). One stylesheet for all four pages. */
:root { --ink:#2D2D2D; --tan:#EFEAD4; --cream:#FAF7EC; --orange:#E4481A; --yellow:#E7B34D; --teal:#83B6B6;
        --dim:#6B6862; --dim-d:#B5B0A2; --card-d:#3A3A3A; --div-t:#D6CFB8; }
* { box-sizing:border-box; margin:0; padding:0 }
html, body { background:var(--tan); color:var(--ink); font-family:"DM Sans", system-ui, sans-serif;
             -webkit-font-smoothing:antialiased; line-height:1.5 }
img, video { display:block; max-width:100% }
a { color:inherit }

/* top bar: the FR | OhioHealth pair and the four pages */
.bar { position:sticky; top:0; z-index:50; background:var(--tan); border-bottom:3px solid var(--ink) }
.bar .in { max-width:1200px; margin:0 auto; padding:14px clamp(16px,4vw,56px); display:flex; align-items:center; justify-content:space-between; gap:12px 28px; flex-wrap:wrap }
.pair { display:flex; align-items:center; gap:14px; text-decoration:none }
.pair .fr { height:30px; width:auto }
.pair .oh { height:26px; width:auto }
.pair i { width:2px; height:28px; background:var(--ink); opacity:.35 }
.nav { display:flex; gap:6px; flex-wrap:wrap }
.nav a { text-decoration:none; font-weight:600; font-size:15px; padding:7px 12px; border-radius:8px; border:2px solid transparent }
.nav a:hover { color:var(--orange) }
.nav a[aria-current="page"] { border-color:var(--ink); background:var(--cream); box-shadow:3px 3px 0 var(--ink) }
.nav a:focus-visible { outline:2px solid var(--orange); outline-offset:2px }
@media (max-width:720px) {
  .bar .in { padding:10px 16px }
  .pair .fr { height:24px } .pair .oh { height:21px }
  .nav { width:100%; justify-content:space-between; gap:2px }
  .nav a { font-size:13.5px; padding:6px 8px }
}

.wrap { max-width:1200px; margin:0 auto; padding:0 clamp(16px,4vw,56px) }
.sec { padding:clamp(52px,7vw,96px) 0 }
.sec.tight { padding-top:0 }
.dark { background:var(--ink); color:var(--tan) }
.disp { font-family:Saira, sans-serif; font-weight:900; text-transform:uppercase; letter-spacing:-.01em; line-height:.95 }
.disp em { font-style:normal; color:var(--orange) }
.eyebrow { display:block; font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:13px; color:var(--orange) }
h1.disp { font-size:clamp(40px,7vw,96px); margin-top:12px }
h2.disp { font-size:clamp(32px,4.8vw,64px); margin-top:12px }
h3 { font-family:Saira, sans-serif; font-weight:800; text-transform:uppercase; font-size:clamp(20px,2vw,26px); line-height:1.05 }
.lead { font-size:clamp(18px,1.7vw,22px); font-weight:500; max-width:52ch; margin-top:18px }
.head { margin-bottom:clamp(28px,4vw,48px) }
p + p { margin-top:12px }
.src { font-size:12.5px; color:var(--dim); margin-top:14px }
.dark .src { color:var(--dim-d) }

/* cards */
.card { background:var(--cream); border:3px solid var(--ink); border-radius:16px; box-shadow:7px 7px 0 var(--ink); overflow:hidden }
.card .tab { height:10px }
.card .pad { padding:clamp(20px,2.2vw,30px) }
.card p { color:#4A4843; margin-top:10px }
.dark .card { background:var(--card-d); border:none; box-shadow:none; color:var(--tan) }
.dark .card p { color:var(--dim-d) }
.o { background:var(--orange) } .y { background:var(--yellow) } .t { background:var(--teal) } .k { background:var(--ink) }
.grid { display:grid; gap:24px }
.g2 { grid-template-columns:repeat(2,1fr) } .g3 { grid-template-columns:repeat(3,1fr) } .g4 { grid-template-columns:repeat(4,1fr) }
@media (max-width:960px) { .g3, .g4 { grid-template-columns:1fr 1fr } }
@media (max-width:640px) { .g2, .g3, .g4 { grid-template-columns:1fr } }
.num { font-family:Saira; font-weight:900; font-size:clamp(40px,4.4vw,64px); line-height:1; letter-spacing:-.01em }
.split { display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(28px,5vw,72px); align-items:center }
@media (max-width:900px) { .split { grid-template-columns:1fr } }

/* hero: the spell-out animation in a framed card */
.hero { padding:clamp(32px,5vw,64px) 0 clamp(44px,6vw,80px) }
.reel { position:relative; background:#EFEAD4; border:3px solid var(--ink); border-radius:18px; box-shadow:8px 8px 0 var(--ink); overflow:hidden }
.reel video { width:100%; height:auto }
.reel .v-sq { display:none }
@media (max-width:640px) { .reel .v-wide { display:none } .reel .v-sq { display:block } }
.reel button { position:absolute; right:12px; bottom:12px; font:600 13px "DM Sans"; padding:6px 12px; border-radius:8px; border:2px solid var(--ink); background:var(--cream); cursor:pointer; opacity:0; transition:opacity .3s }
.reel.done button { opacity:1 }
.hero .intro { display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(24px,4vw,56px); align-items:end; margin-top:clamp(32px,4vw,52px) }
@media (max-width:900px) { .hero .intro { grid-template-columns:1fr } }
.hero .intro .lead { margin-top:0 }

/* the offer: two gifts side by side */
.gift .num { color:var(--orange) }
.gift .who { font-family:Saira; font-weight:800; text-transform:uppercase; font-size:clamp(20px,2vw,26px); margin-top:8px; line-height:1.05 }
.ticket { display:inline-block; margin-top:16px; font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; padding:6px 10px; border-radius:6px; background:var(--yellow); border:2px solid var(--ink) }

/* lists */
.bul { list-style:none; margin-top:18px }
.bul li { position:relative; padding-left:30px; margin:12px 0; font-weight:500; font-size:clamp(16px,1.4vw,19px) }
.bul li::before { content:""; position:absolute; left:0; top:.45em; width:14px; height:14px; border-radius:50%; background:var(--orange) }

/* class schedule */
.sched { list-style:none; display:grid; gap:14px; counter-reset:c }
.sched li { counter-increment:c; display:grid; grid-template-columns:72px 1fr auto; align-items:center; gap:18px; background:var(--cream); border:3px solid var(--ink); border-radius:14px; box-shadow:5px 5px 0 var(--ink); padding:16px 20px }
.sched li::before { content:counter(c, decimal-leading-zero); font-family:Saira; font-weight:900; font-size:40px; line-height:1; color:var(--orange) }
.sched b { font-family:Saira; font-weight:800; text-transform:uppercase; font-size:clamp(18px,1.8vw,23px); line-height:1.1; display:block }
.sched span { color:var(--dim); font-size:15.5px; display:block; margin-top:4px }
.sched em { font-style:normal; font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; color:var(--dim) }
@media (max-width:640px) { .sched li { grid-template-columns:48px 1fr; padding:14px 16px; gap:12px } .sched li::before { font-size:30px } .sched em { grid-column:2 } }

.guest { display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,3vw,36px); align-items:start }
.guest .badge { width:clamp(84px,9vw,120px); aspect-ratio:1; border-radius:50%; background:var(--teal); border:3px solid var(--ink); display:grid; place-items:center; font-family:Saira; font-weight:900; font-size:clamp(30px,3vw,42px) }
@media (max-width:560px) { .guest { grid-template-columns:1fr } }

/* steps */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:20px }
@media (max-width:960px) { .steps { grid-template-columns:1fr 1fr } }
@media (max-width:560px) { .steps { grid-template-columns:1fr } }
.steps .k2 { font-family:Saira; font-weight:900; font-size:clamp(48px,5vw,72px); line-height:.9; color:var(--orange) }
.steps h3 { margin-top:8px }
.steps p { margin-top:8px; color:var(--dim) }
.dark .steps p { color:var(--dim-d) }

/* next page links */
.next { display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
@media (max-width:900px) { .next { grid-template-columns:1fr } }
.next a { text-decoration:none; display:block; background:var(--cream); border:3px solid var(--ink); border-radius:14px; box-shadow:5px 5px 0 var(--ink); padding:20px 22px; transition:transform .12s, box-shadow .12s }
.next a:hover { transform:translate(3px,3px); box-shadow:2px 2px 0 var(--ink) }
.next a b { font-family:Saira; font-weight:800; text-transform:uppercase; font-size:22px; display:block }
.next a span { color:var(--dim); display:block; margin-top:6px }
.next a i { font-style:normal; color:var(--orange); font-weight:700; display:block; margin-top:12px }

.foot { border-top:3px solid var(--ink); padding:28px 0 40px; font-size:14px; color:var(--dim) }
.foot .wrap { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center }
.foot img { height:28px; width:auto }
.nav .s { display:none }
@media (max-width:720px) { .nav .l { display:none } .nav .s { display:inline } }
.hero .intro { grid-template-columns:1.5fr 1fr }
.hero h1.disp { font-size:clamp(40px,6vw,84px) }
@media (max-width:900px) { .hero .intro { grid-template-columns:1fr } }

/* merged from the Oct 15 page: stats, snapshot, problem-to-move grid, report */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:20px }
@media (max-width:960px) { .stats { grid-template-columns:1fr 1fr } }
@media (max-width:480px) { .stats { grid-template-columns:1fr } }
.stat { border-top:4px solid var(--orange); padding-top:14px }
.stat .num { color:var(--orange) }
.stat p { margin-top:8px; font-weight:500 }
.stat small { display:block; margin-top:6px; font-size:12.5px; color:var(--dim) }
.dark .stat small { color:var(--dim-d) }
.snap { background:var(--cream); border:3px solid var(--ink); border-radius:16px; box-shadow:7px 7px 0 var(--ink); padding:22px }
.snap .top { display:flex; justify-content:space-between; align-items:center; font-weight:700 }
.snap .top span { font-size:12px; letter-spacing:.08em; text-transform:uppercase; background:var(--yellow); border:2px solid var(--ink); border-radius:6px; padding:2px 8px }
.snap .nums { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:16px 0 }
.snap .nums div { background:var(--tan); border-radius:10px; padding:10px }
.snap .nums b { display:block; font-family:Saira; font-weight:900; font-size:clamp(20px,2.2vw,28px) }
.snap .nums small { font-size:12px; color:var(--dim) }
.snap .lights { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px }
.snap .lights span { font-size:13px; font-weight:600; padding:4px 10px; border-radius:20px; border:2px solid var(--ink) }
.snap .lights .r { background:#F4B9A6 } .snap .lights .a { background:#F3D9A0 } .snap .lights .g { background:#BFDCCB }
.snap ol { margin-left:20px } .snap li { margin:6px 0; font-weight:600 }
.moves { display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
@media (max-width:960px) { .moves { grid-template-columns:1fr 1fr } }
@media (max-width:560px) { .moves { grid-template-columns:1fr } }
.move { background:var(--cream); border:3px solid var(--ink); border-radius:14px; padding:16px 18px }
.move .pb { font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--orange) }
.move b { display:block; font-family:Saira; font-weight:800; text-transform:uppercase; font-size:20px; margin-top:4px }
.move p { margin-top:6px; color:var(--dim) }
.move .tool { display:inline-block; margin-top:10px; font-size:12.5px; font-weight:700; background:var(--tan); border:2px solid var(--ink); border-radius:6px; padding:2px 8px }
.guests { list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:24px }
@media (max-width:640px) { .guests { grid-template-columns:1fr } }
.guests li { background:var(--card-d); border-radius:12px; padding:14px 18px }
.guests b { display:block; color:var(--tan); font-weight:700 }
.guests span { color:var(--dim-d); font-size:15px }
.report { display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
@media (max-width:900px) { .report { grid-template-columns:1fr 1fr } }
@media (max-width:520px) { .report { grid-template-columns:1fr } }
.report div { background:var(--cream); border:3px solid var(--ink); border-radius:14px; padding:16px 18px }
.report b { display:block; font-family:Saira; font-weight:800; text-transform:uppercase; font-size:20px }
.report span { display:block; color:var(--dim); margin-top:6px }

.steps.three { grid-template-columns:repeat(3,1fr) }
@media (max-width:900px) { .steps.three { grid-template-columns:1fr } }

/* the golden ticket, drawn in HTML (no real book cover yet) */
.ticket-art { display:flex; justify-content:center; padding:20px 0 }
.tk { position:relative; width:100%; max-width:520px; aspect-ratio:1.9; display:grid; grid-template-columns:40% 1fr; align-items:center; gap:4%;
      padding:6% 7%; border:3px solid var(--ink); border-radius:18px; box-shadow:8px 8px 0 var(--ink); transform:rotate(-3deg);
      background:linear-gradient(135deg,#F6D77A 0%,#E7B34D 45%,#F3CF6B 60%,#D9A23C 100%);
      -webkit-mask:radial-gradient(circle 18px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat, radial-gradient(circle 18px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
              mask:radial-gradient(circle 18px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat, radial-gradient(circle 18px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat }
.tk::after { content:""; position:absolute; inset:10px; border:2px dashed rgba(45,45,45,.45); border-radius:12px; pointer-events:none }
.tk img { width:100%; height:auto }
.tk { color:var(--ink) }
.tk-words { display:flex; flex-direction:column; gap:4px }
.tk-kick { font-size:clamp(11px,1.1vw,13px); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--orange) }
.tk b { font-family:Saira; font-weight:900; text-transform:uppercase; font-size:clamp(20px,2.4vw,30px); line-height:.95 }
.tk-time { font-weight:700; font-size:clamp(14px,1.4vw,17px) }
.tk-fine { font-size:clamp(11px,1vw,12.5px); color:#5A4A22 }
.tk-no { position:absolute; right:7%; bottom:7%; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#5A4A22 }

/* one-page version */
.topics { list-style:none; counter-reset:t; display:grid; gap:10px }
.topics li { counter-increment:t; display:grid; grid-template-columns:44px 1fr; align-items:center; gap:12px; font-weight:600; font-size:clamp(16px,1.5vw,19px); padding:10px 0; border-bottom:1px solid #4A4A47 }
.topics li::before { content:counter(t, decimal-leading-zero); font-family:Saira; font-weight:900; font-size:24px; color:var(--orange) }
.report.four { grid-template-columns:repeat(4,1fr) }
@media (max-width:960px) { .report.four { grid-template-columns:1fr 1fr } }
@media (max-width:520px) { .report.four { grid-template-columns:1fr } }
.dark .ticket-art { padding:28px 0 }

/* hero: words left, the animation to the side (Dallin: not a header) */
.hero-split { display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(28px,5vw,64px); align-items:center }
.hero-split .reel { width:100%; max-width:540px; justify-self:end }
@media (max-width:900px) { .hero-split { grid-template-columns:1fr } .hero-split .reel { justify-self:center } }

/* the book, with the golden ticket tucked against its corner */
.bookset { position:relative; max-width:520px; justify-self:center; width:100%; padding-bottom:12% }
.bookset .book { width:100%; height:auto; border-radius:16px; border:3px solid var(--tan) }
.bookset .tk { position:absolute; left:-8%; bottom:0; width:72%; max-width:none; transform:rotate(-6deg); color:var(--ink) }
.bookset .tk b { font-size:clamp(16px,1.7vw,22px) }
.bookset .tk-time { font-size:clamp(12px,1.1vw,14px) }
.bookset .tk-fine, .bookset .tk-no { display:none }
@media (max-width:640px) { .bookset .tk { left:-2%; width:80% } }