.debt-page { overflow-x: hidden; background: #f7f7f2; }.debt-page .primary-nav .active { color: var(--purple); border-bottom-color: var(--purple); }
.debt-hero { position: relative; min-height: 810px; overflow: hidden; color: #fff; background: var(--ink); }.debt-hero::after { position: absolute; right: -12vw; bottom: -18vw; width: 48vw; height: 48vw; content: ""; background: var(--orange); border-radius: 50%; opacity: .95; }
.debt-hero-inner { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding: clamp(4rem,7vw,7rem) 3rem 6rem; }
.breadcrumb { display: flex; gap: .65rem; margin: 0 0 4rem; color: rgba(255,255,255,.6); font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.breadcrumb a { text-decoration-thickness: 1px; text-underline-offset: 4px; }.debt-hero .eyebrow { color: var(--lime); }
.debt-hero h1,.debt-stakes h2,.campaign-call h2,.canada-asks h2,.canada-movement h2,.jubilee h2,.global-cta h2 { margin: 0; font-family: "Barlow Semi Condensed",Impact,sans-serif; font-weight: 800; letter-spacing: -.045em; line-height: .86; text-transform: uppercase; }.debt-hero h1 { max-width: 940px; font-size: clamp(5.5rem,11vw,11.5rem); }.debt-hero h1 em { color: var(--lime); font-style: normal; }
.hero-bottom { display: flex; align-items: end; justify-content: space-between; gap: 3rem; margin-top: 3rem; }.hero-bottom p { margin: 0; color: rgba(255,255,255,.8); font: 700 clamp(1.3rem,2vw,2rem)/1.1 "Barlow Semi Condensed",sans-serif; text-transform: uppercase; }.debt-button { display: inline-flex; width: max-content; align-items: center; gap: 1rem; padding: 1rem 1.35rem; color: #fff; background: var(--purple); border-radius: 999px; font-weight: 800; text-decoration: none; text-transform: uppercase; transition: transform 200ms ease,background 200ms ease; }.debt-button:hover,.debt-button:focus-visible { background: var(--orange); transform: translateY(-3px); }
.hero-total { position: absolute; z-index: 3; top: 4rem; right: max(3rem,calc((100vw - 1240px)/2)); display: flex; width: 230px; height: 230px; align-items: center; justify-content: center; flex-direction: column; color: var(--ink); background: var(--lime); border: 8px solid #fff; border-radius: 50%; box-shadow: 0 18px 50px rgba(23,47,55,.3); transform: rotate(6deg); }.hero-total strong { font: 800 3.2rem/.9 "Barlow Semi Condensed",sans-serif; }.hero-total span { max-width: 120px; margin-top: .6rem; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-align: center; text-transform: uppercase; }
.campaign-score { display: grid; grid-template-columns: 1.4fr repeat(3,1fr); color: #fff; background: var(--purple); }.score { min-height: 230px; padding: 2.5rem; border-right: 1px solid rgba(255,255,255,.25); }.score:last-child { border-right: 0; }.score strong { display: block; color: var(--lime); font: 800 clamp(3.3rem,5vw,5.4rem)/.9 "Barlow Semi Condensed",sans-serif; }.score span { display: block; max-width: 190px; margin-top: 1.3rem; color: rgba(255,255,255,.78); font-size: .85rem; font-weight: 700; line-height: 1.35; }.score-main { background: #70206d; }
.debt-stakes { display: grid; grid-template-columns: 1fr .9fr; gap: clamp(4rem,8vw,9rem); max-width: 1240px; margin: 0 auto; padding: clamp(7rem,11vw,11rem) 3rem; }.debt-stakes .eyebrow,.campaign-call .eyebrow,.asks-heading .eyebrow,.movement-copy .eyebrow,.jubilee-copy .eyebrow { color: var(--purple); }.debt-stakes h2,.campaign-call h2,.canada-asks h2,.canada-movement h2,.jubilee h2,.global-cta h2 { font-size: clamp(4rem,7vw,7.2rem); }.stakes-copy { padding-top: 3rem; }.stakes-copy p { color: #53686f; }.stakes-copy .stakes-lead { margin-top: 0; color: var(--ink); font-size: clamp(1.45rem,2.5vw,2.35rem); font-weight: 700; line-height: 1.25; }.stakes-copy strong { color: var(--purple); }
.campaign-call { padding: clamp(7rem,10vw,10rem) max(3rem,calc((100vw - 1240px)/2)); background: #e9eee9; }.call-intro { display: grid; grid-template-columns: 1fr .85fr; gap: 0 5rem; align-items: end; margin-bottom: 5rem; }.call-intro .eyebrow { grid-column: 1/-1; }.call-intro > p:last-child { max-width: 450px; margin: 0 0 .5rem; color: #52676d; }.demand-summary { margin: 0; padding: 0; border-top: 1px solid rgba(23,47,55,.25); }.demand-summary article { padding: 2.2rem .5rem 2.2rem 1.5rem; border-bottom: 1px solid rgba(23,47,55,.25); border-left: 7px solid var(--orange); }.demand-summary strong { font: 700 clamp(1.8rem,3.4vw,3.4rem)/1 "Barlow Semi Condensed",sans-serif; }
.canada-asks { max-width: 1240px; margin: 0 auto; padding: clamp(7rem,11vw,11rem) 3rem; }.asks-heading { display: grid; grid-template-columns: .8fr 1fr; gap: 0 5rem; align-items: end; margin-bottom: 5rem; }.asks-heading .eyebrow { grid-column: 1/-1; }.asks-heading > p:last-child { max-width: 430px; margin: 0 0 .5rem; color: #566a70; }.ask-list { border-top: 1px solid rgba(23,47,55,.22); }.ask { --ask-color: var(--orange); border-bottom: 1px solid rgba(23,47,55,.22); }.ask-purple { --ask-color: var(--purple); }.ask-teal { --ask-color: var(--teal-bright); }.ask summary { display: grid; grid-template-columns: 1fr 50px; gap: 1.5rem; align-items: center; padding: 2rem .5rem; cursor: pointer; list-style: none; }.ask summary::-webkit-details-marker { display: none; }.ask summary p { margin: 0; color: var(--ask-color); font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.ask summary h3 { margin: .25rem 0 0; font: 800 clamp(2rem,4vw,4.2rem)/.95 "Barlow Semi Condensed",sans-serif; text-transform: uppercase; }.ask summary b { color: var(--ask-color); font-size: 2.4rem; transition: transform 200ms ease; }.ask[open] summary b { transform: rotate(45deg); }.ask-body { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; padding: 0 4rem 2.5rem .5rem; }.ask-body p { margin: 0; color: #53676d; }.ask-body strong { color: var(--ink); }
.canada-movement { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: clamp(4rem,8vw,8rem); padding: clamp(6rem,10vw,10rem) max(3rem,calc((100vw - 1240px)/2)); color: #fff; background: var(--teal); }.movement-image { margin: 0; }.movement-image img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50% 50% 1.2rem 1.2rem; box-shadow: 0 22px 60px rgba(0,0,0,.2); }.movement-image figcaption { margin-top: 1rem; color: rgba(255,255,255,.62); font-size: .78rem; }.movement-copy .eyebrow { color: var(--lime); }.movement-copy p { color: rgba(255,255,255,.78); }.movement-copy a { color: #fff; text-decoration-color: var(--lime); text-underline-offset: 3px; }
.jubilee { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(4rem,9vw,10rem); align-items: center; max-width: 1240px; margin: 0 auto; padding: clamp(7rem,11vw,11rem) 3rem; }.jubilee-mark { display: flex; width: min(100%,410px); aspect-ratio: 1; align-items: center; justify-content: center; flex-direction: column; color: #fff; background: var(--orange); border-radius: 50%; box-shadow: 0 0 0 22px rgba(241,89,34,.1),0 0 0 44px rgba(142,34,136,.06); transform: rotate(-5deg); }.jubilee-mark strong { font: 800 clamp(4.5rem,7vw,7rem)/.9 "Barlow Semi Condensed",sans-serif; }.jubilee-mark span { font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }.jubilee-copy p { max-width: 610px; color: #53676d; }
.global-cta { display: grid; grid-template-columns: 1fr auto; gap: 5rem; align-items: end; padding: clamp(7rem,11vw,11rem) max(3rem,calc((100vw - 1240px)/2)); color: #fff; background: var(--purple); }.global-cta .eyebrow { color: var(--lime); }.global-cta p:last-child { color: rgba(255,255,255,.76); font-size: 1.2rem; }.button-light { color: var(--ink); background: var(--lime); }.button-light:hover,.button-light:focus-visible { color: #fff; background: var(--orange); }
@media (max-width: 920px) { .hero-total { width: 190px; height: 190px; }.campaign-score { grid-template-columns: repeat(2,1fr); }.score:nth-child(2) { border-right: 0; }.score:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.25); }.debt-stakes,.canada-movement,.jubilee { grid-template-columns: 1fr; }.call-intro,.asks-heading { grid-template-columns: 1fr; gap: 2rem; }.call-intro .eyebrow,.asks-heading .eyebrow { grid-column: auto; }.global-cta { grid-template-columns: 1fr; gap: 3rem; } }
@media (max-width: 640px) { .debt-hero { min-height: 760px; }.debt-hero-inner { padding: 3rem 1.25rem 5rem; }.breadcrumb { margin-bottom: 3rem; }.debt-hero h1 { font-size: clamp(4.5rem,21vw,7rem); }.hero-bottom { display: block; }.hero-bottom .debt-button { margin-top: 2rem; }.hero-total { top: auto; right: 1.25rem; bottom: 1.25rem; width: 150px; height: 150px; border-width: 5px; }.hero-total strong { font-size: 2.3rem; }.hero-total span { font-size: .62rem; }.campaign-score { grid-template-columns: 1fr; }.score { min-height: 175px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.25); }.debt-stakes,.canada-asks,.jubilee { padding-right: 1.25rem; padding-left: 1.25rem; }.campaign-call,.canada-movement,.global-cta { padding-right: 1.25rem; padding-left: 1.25rem; }.ask summary { grid-template-columns: 1fr 30px; gap: .75rem; }.ask-body { grid-template-columns: 1fr; gap: 1.2rem; padding: 0 .5rem 2rem; }.jubilee-mark { width: 280px; }.debt-button { font-size: .82rem; } }
@media (prefers-reduced-motion: reduce) { .debt-button,.ask summary b { transition: none; } }