/* ---------- Header ---------- */
.site-header { background: var(--blue); color: #fff; position: relative; z-index: var(--z-header); --focus: #fff; }
.header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s5); min-height: clamp(64px, 5vw, 76px); }
.header__nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px); }
.header__nav a { font-weight: 600; font-size: clamp(0.9rem, 0.6rem + 0.4vw, 1rem); text-decoration: none; padding: 8px 4px; position: relative; white-space: nowrap; }
.header__nav a::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 2px; height: 3px; border-radius: 3px; background: var(--turq); transform: scaleX(0); transform-origin: left; transition: transform var(--t-fast); }
.header__nav a:hover::after, .header__nav a[aria-current="page"]::after { transform: scaleX(1); }
.header__nav--left { justify-self: start; margin-left: 2vw; }
.header__right { justify-self: end; display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px); }
.logo { display: inline-flex; align-items: center; gap: 0.3em; text-decoration: none; color: #fff; font-weight: 800; font-size: clamp(1.4rem, 1rem + 0.8vw, 1.7rem); letter-spacing: -0.045em; line-height: 1; }
.logo img { height: 1.55em; width: auto; display: block; }
.menu-btn { display: none; width: 48px; height: 48px; place-items: center; background: transparent; border: var(--bw) solid #fff; border-radius: 50%; color: #fff; }
.menu-btn .icon { width: 24px; height: 24px; stroke-width: 2.6; }
.search-btn { display: none; width: 44px; height: 44px; place-items: center; color: #fff; border-radius: 50%; margin-left: -8px; }
.search-btn .icon { width: 28px; height: 28px; stroke-width: 2.6; }
@media (max-width: 1024px) {
  /* Mobile & tablet header: search left, logo centred, circled menu right */
  .header__inner { grid-template-columns: 1fr auto 1fr; }
  .header__nav { display: none; }
  .search-btn { display: grid; justify-self: start; }
  .menu-btn { display: grid; }
  .header__right .btn { display: none; }
  .header__inner { min-height: 0; padding-block: 22px; }
  .site-header .logo { font-size: clamp(1.9rem, 6.4vw, 2.4rem); }
  .menu-btn { width: 52px; height: 52px; }
  .header__right { gap: 12px; }
}

dialog.drawer { margin: 0 0 0 auto; width: min(88vw, 400px); height: 100dvh; max-height: none; border: 0; border-left: var(--bw-card) solid var(--black); background: var(--blue); color: #fff; padding: 0; --focus: #fff; }
dialog.drawer::backdrop { background: rgba(5, 5, 20, 0.6); }
.drawer__inner { display: flex; flex-direction: column; gap: var(--s5); padding: 20px 24px 32px; min-height: 100%; }
.drawer__top { display: flex; justify-content: space-between; align-items: center; }
.drawer .icon-btn { background: transparent; border-color: #fff; color: #fff; }
.drawer nav { display: grid; gap: 4px; }
.drawer nav a { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; text-decoration: none; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.2); }
.drawer nav a[aria-current="page"] { color: var(--turq); }
.drawer .btn { margin-top: auto; }

/* ---------- Page hero band (sub-pages share the header's blue) ---------- */
.page-hero { background: var(--blue); color: #fff; --focus: #fff; padding-block: clamp(16px, 3vw, 40px) clamp(36px, 5vw, 80px); position: relative; overflow: hidden; }
.page-hero h1 { max-width: 16ch; }
.page-hero p.lead { margin-top: var(--s4); max-width: 52ch; }
.page-hero .breadcrumbs { margin-bottom: var(--s5); }
.page-hero__deco { position: absolute; right: var(--gutter); top: 50%; width: clamp(80px, 10vw, 150px); transform: translateY(-50%) rotate(8deg); animation: bob 6s ease-in-out infinite alternate; pointer-events: none; }
@media (max-width: 760px) { .page-hero__deco { display: none; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--black); color: #fff; padding-block: clamp(40px, 5vw, 80px) 28px; --focus: #fff; }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); }
.footer__brand p { margin-top: var(--s4); max-width: 34ch; opacity: 0.75; }
.footer__col h2 { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--turq); margin-bottom: var(--s4); }
.footer__col ul { list-style: none; display: grid; gap: 10px; }
.footer__col a { text-decoration: none; font-weight: 600; opacity: 0.9; }
.footer__col a:hover { color: var(--turq); text-decoration: underline; text-underline-offset: 4px; opacity: 1; }
.footer__bottom { margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid rgba(255,255,255,.18); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: var(--fs-small); opacity: 0.8; }
.footer__social { display: flex; gap: 10px; margin-top: var(--s5); }
.footer__social a { width: 44px; height: 44px; display: grid; place-items: center; border: var(--bw) solid #fff; border-radius: 50%; }
.footer__social a:hover { background: var(--turq); color: var(--black); }
@media (max-width: 1024px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 460px) { .footer__grid { grid-template-columns: 1fr; } }

/* ---------- Floating 3D decorations ---------- */
@keyframes bob { from { translate: 0 0; } to { translate: 0 -10px; } }
.deco { position: absolute; pointer-events: none; user-select: none; animation: bob 5s ease-in-out infinite alternate; filter: drop-shadow(0 10px 14px rgba(0,0,0,.28)); }
.deco--delay { animation-delay: -2.4s; animation-duration: 6.2s; }

.country-btn { display: inline-flex; align-items: center; gap: 8px; color: inherit; font: inherit; cursor: pointer; text-decoration: none; }
.country-btn span.u, .country-btn:hover { text-decoration: underline; text-underline-offset: 4px; }
.country-btn .icon { width: 18px; height: 18px; flex: none; }

/* Side panel menu: larger logo */
.drawer .logo { font-size: 2.1rem; }

/* Outlines-off experiment: keep the header menu ring from the mobile reference, and give outline-less buttons on blue a visible fill */
.menu-btn { border: 2px solid #fff; }
.drawer .icon-btn { border: 2px solid #fff; }
.hero .btn-secondary, .cta .btn-secondary, .page-hero .btn-secondary { background: rgba(255,255,255,.18); color: #fff; box-shadow: none; }

/* ---------- No shadows, faint black lines on light buttons and cards ---------- */
html :is(.btn, .chip-btn, .pagination button, .stepper button, .card, .cc, .give-fab, .kind, .type-card, .faq details, dialog.modal, .toast, .progress__thumb, .cc__save, .detail__cover, .hero__photo, .dash__nav button.tab, .supporter),
html :is(.btn, .chip-btn, .card, .cc, .type-card, .cc__save):is(:hover, :active) { box-shadow: none !important; }
html .deco { filter: none; }
html :is(.btn-outline, .chip-btn, .pagination button, .stepper button, .chip--outline, .cc__save, .dash__nav button.tab) { border: 1px solid rgba(0,0,51,.25); }
html .btn-secondary:not(.hero .btn-secondary):not(.cta .btn-secondary):not(.page-hero .btn-secondary) { border: 1px solid rgba(0,0,51,.25); }
html :is(.card, .cc, .give-fab, dialog.modal, .type-card, .faq details, .supporter, .kind) { border: 1px solid rgba(0,0,51,.2); }
html :is(.chip-btn[aria-pressed="true"], .chip-btn[aria-current="true"], .pagination button[aria-current="page"], .stepper button[aria-current="step"], .dash__nav button.tab[aria-selected="true"]) { border-color: transparent; }
html :is(dialog.modal--give .donate, .detail__cover) { border: 0; }
/* The blue "Explore" buttons are now light with dark text */
html :is(.hero, .cta, .page-hero) .btn-secondary { background: #fff; color: var(--black); border: 0; }

/* ---------- Mobile & tablet: floating header, clean pages (no blue sub-header) ---------- */
/* No ring around the menu icon; the three lines are twice as wide */
.menu-btn { border: 0; }
.menu-btn .icon { width: 48px; height: 48px; stroke-width: 1.7; }
@media (max-width: 1024px) {
  .menu-btn { width: 56px; height: 52px; justify-self: end; margin-right: -6px; }
  /* Every page except the homepage: the header floats as a rounded blue pill over the page */
  html:not([data-ga-page="home"]) .site-header { margin: 12px 14px 0; border-radius: 36px; }
  html:not([data-ga-page="home"]) .header__inner { padding-inline: 22px; padding-block: 18px; }
  /* The blue band under the header (and its description) is gone: a clean page with a plain dark title */
  .page-hero { background: transparent; color: var(--black); --focus: var(--black); padding-block: 28px 0; }
  .page-hero .breadcrumbs, .page-hero__deco, .page-hero:not(#profileHero) p.lead { display: none; }
  .page-hero h1 { max-width: none; font-size: clamp(1.9rem, 7vw, 2.8rem); }
  #profileHero { padding-top: 24px; }
  html:not([data-ga-page="home"]) .page-body { padding-top: 24px; }
  /* Sign-in / sign-up / reset: drop the blue side panel */
  .auth { grid-template-columns: 1fr; min-height: 0; }
  html .auth .auth__side { display: none; }
}

/* ---------- Title font, slim buttons, thinner progress, label bubbles, comments, timeline ---------- */
@font-face { font-family: "GivingAid Title"; src: url("../fonts/GivingAid-Title-Bold.otf") format("opentype"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root { --font-title: "GivingAid Title", var(--font); }
html :is(h1, h2) { font-family: var(--font-title); }

/* All buttons are slim like the "All Campaigns" chip; only the hero keeps its large buttons */
html .btn, html .btn-lg, html .btn-sm { min-height: 44px; padding: 0.55em 1.4em; font-size: 0.95rem; }
html .hero .btn-lg { min-height: 60px; padding: 0.85em 2.2em; font-size: 1.2rem; }

/* Thinner progress bars */
html .progress { height: 12px; }
html .progress__thumb { width: 40px; height: 20px; }
html .progress--sm { height: 10px; }
html .progress--sm .progress__thumb { width: 32px; height: 18px; }
html .give-fab .progress { height: 10px; }
html .give-fab .progress__thumb { width: 36px; height: 18px; }

/* Category chip is centred on the line of the save heart */
html .cc__cat { top: 35px; transform: translateY(-50%); }

/* "Creator" / "Creators" bubble: text centred in the black pill (also on the campaign page) */
html :is(.cc__who small, .give-fab__who small, .organizer small) { display: inline-flex; align-items: center; justify-content: center; text-align: center; width: fit-content; height: 18px; padding: 0 9px; line-height: 1; background: var(--black); color: #fff; font-size: 0.6rem; font-weight: 700; border-radius: 99px; margin-bottom: 3px; }

/* Comments: time, like and count sit beside the report (3-dot) button */
html .word__side { display: inline-flex; align-items: center; gap: 12px; }
html .word__side .word__time { display: inline; margin: 0; font-size: 0.85rem; }
html .word__side .word__like { margin: 0; padding: 4px 2px; font-size: 0.85rem; gap: 5px; }
html .word__side .word__like .icon { width: 20px; height: 20px; }

/* Updates: the vertical progress line is back */
html .timeline { border-left: 2px solid var(--black); }
html .timeline li::before { border: 2px solid var(--black); box-sizing: border-box; left: -34px; }

/* ---------- Round 2 fixes ---------- */
/* Creator bubble: smaller, and the creator's name sits underneath it again */
html :is(.cc__who small, .give-fab__who small, .organizer small) { display: flex; height: 15px; padding: 0 7px; font-size: 0.55rem; margin: 0 0 3px; }
html .cc__who span { display: block; }
/* No glow or shadow behind the city & country button */
html :is(.chip--outline, .cc__tag .chip) { box-shadow: none !important; }
/* Bigger hero image */
@media (min-width: 1025px) { .hero__grid { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); } }
@media (max-width: 1024px) { .hero__media { margin: 10px 0 0; } }
/* Campaign page keeps the original body font for its headings */
html[data-ga-page="campaign"] :is(h1, h2) { font-family: var(--font); }

/* ---------- Round 3: footer layout, hero figures, card givers ---------- */
.footer__top { display: flex; justify-content: space-between; align-items: flex-start; gap: clamp(28px, 6vw, 96px); }
.footer__brand .footer__tag { margin-top: 18px; max-width: 14ch; opacity: 1; font-family: var(--font-title); font-weight: 800; font-size: clamp(2.2rem, 1.2rem + 2.8vw, 3.2rem); line-height: 1; letter-spacing: -0.03em; }
.footer__social { margin-top: 28px; }
.footer__cols { display: flex; gap: clamp(32px, 5vw, 80px); }
.footer__col h2 { color: #fff; text-transform: none; letter-spacing: 0; font-size: 1rem; margin-bottom: 22px; }
.footer__col ul { gap: 16px; }
.footer__col a { font-weight: 500; opacity: .9; }
.footer__bottom { margin-top: clamp(36px, 5vw, 64px); padding-top: 28px; align-items: center; opacity: 1; font-size: 1rem; }
.footer__bottom > span { opacity: .85; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 8px 36px; margin-left: auto; }
.footer__legal a { text-decoration: none; opacity: .9; } .footer__legal a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer__note { margin-top: 20px; font-size: var(--fs-small); opacity: .55; }
@media (max-width: 1024px) {
  .footer__top { flex-direction: column; gap: 36px; }
  .footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 24px; width: 100%; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer__bottom .footer__legal { order: -1; margin-left: 0; gap: 6px 22px; }
  .footer__bottom > span { order: 0; }
  .footer__bottom .country-btn { order: 1; }
}
/* Hero figures use the title font; taller hero image */
html .hero__stats dt { font-family: var(--font-title); }
html .hero__photo { aspect-ratio: 4 / 3; }
/* Card: givers pushed to the right edge */
html .cc__givers { margin-left: auto; }

/* ---------- Round 4: smaller mobile & tablet header ---------- */
@media (max-width: 1024px) {
  .header__inner { padding-block: 12px; }
  html:not([data-ga-page="home"]) .header__inner { padding-block: 10px; padding-inline: 16px; }
  html:not([data-ga-page="home"]) .site-header { margin: 10px 14px 0; border-radius: 28px; }
  html[data-ga-page="campaign"] .site-header { top: 10px; }
  .site-header .logo { font-size: clamp(1.4rem, 4.8vw, 1.75rem); }
  .search-btn { width: 36px; height: 36px; margin-left: -4px; }
  .search-btn .icon { width: 22px; height: 22px; stroke-width: 2.4; }
  .menu-btn { width: 40px; height: 36px; margin-right: -2px; }
  .menu-btn .icon { width: 34px; height: 34px; stroke-width: 1.8; }
}

/* ---------- Round 5 ---------- */
/* Hero figures: label centred under each number */
html .hero__stats > div { align-items: center; text-align: center; }
/* Closing band before the footer: no blue, dark green text */
html .cta { background: transparent; color: #000033; --focus: #000033; }
html .cta .btn-secondary { background: #fff; color: #000033; border: 1px solid rgba(0,0,51,.25); }
/* Campaign page (mobile & tablet): no blank strip after the footer; the floating Give card steps aside when the footer is reached */
@media (max-width: 1024px) {
  html body.has-give { padding-bottom: 0; }
  html .give-fab.is-away { opacity: 0; visibility: hidden; pointer-events: none; }
  html .give-fab { transition: opacity .2s ease, visibility .2s; }
}
/* Mobile & tablet homepage header: slightly bigger logo, more room above and below */
@media (max-width: 1024px) {
  html[data-ga-page="home"] .header__inner { padding-block: 20px; }
  html[data-ga-page="home"] .site-header .logo { font-size: clamp(1.6rem, 5.4vw, 2rem); }
}

/* Footer logo a little bigger */
html .footer__brand .logo { font-size: clamp(1.8rem, 1.4rem + 1vw, 2.2rem); }

/* ---------- Mobile & tablet homepage: floating header and a light hero with dark green text ---------- */
@media (max-width: 1024px) {
  html[data-ga-page="home"] .site-header { margin: 10px 14px 0; border-radius: 28px; }
  html[data-ga-page="home"] .header__inner { padding-block: 10px; padding-inline: 16px; }
  html[data-ga-page="home"] .site-header .logo { font-size: clamp(1.4rem, 4.8vw, 1.75rem); }
  html .hero { background: transparent; color: #000033; --focus: #000033; }
}

/* ---------- Web homepage: floating header pill and a light hero with dark green text ---------- */
@media (min-width: 1025px) {
  html[data-ga-page="home"] .site-header { max-width: var(--container); width: calc(100% - var(--gutter) * 2); margin: 14px auto 0; border-radius: 44px; }
  html[data-ga-page="home"] .header__inner { padding-inline: 28px; }
  html[data-ga-page="home"] .hero { padding-top: 28px; }
  html .hero .btn-secondary { border: 1px solid rgba(0,0,51,.25); }
}
@media (min-width: 1025px) { html .hero { background: transparent; color: #000033; --focus: #000033; } }

/* ---------- Web, every page (and any future page): floating header pill, clean light page header ---------- */
@media (min-width: 1025px) {
  html .site-header { max-width: var(--container); width: calc(100% - var(--gutter) * 2); margin: 14px auto 0; border-radius: 44px; }
  html .header__inner { padding-inline: 28px; }
  html[data-ga-page="campaign"] .site-header { position: relative; top: auto; left: auto; right: auto; }
  .page-hero { background: transparent; color: #000033; --focus: #000033; padding-block: 36px 0; }
  .page-hero__deco { display: none; }
  .page-hero h1 { max-width: none; }
  .page-hero p.lead { color: #000033; opacity: .8; }
  html .page-body { padding-top: 28px; }
  html[data-ga-page="campaign"] .page-body { padding-top: 28px; }
}

/* Campaign page: "Other campaigns" heading uses the title font */
html[data-ga-page="campaign"] .related h2 { font-family: var(--font-title); }

/* Campaign page: "Other campaigns" heading uses the title font */
html[data-ga-page="campaign"] .related h2 { font-family: var(--font-title); }

/* ---------- Mobile & tablet: dropdown menu, floating Start button, header text, amount chips, Read more ---------- */
dialog.drawer { display: none; }
@media (max-width: 1024px) {
  dialog.drawer[open] { display: block; position: fixed; top: var(--drop-top, 70px); left: 14px; right: 14px; bottom: auto; margin: 0; width: auto; height: auto; max-height: calc(100dvh - var(--drop-top, 70px) - 14px); overflow-y: auto; border: 0; border-radius: 0 0 32px 32px; background: var(--blue); color: #fff; padding: 0; z-index: 45; animation: menu-drop .26s cubic-bezier(.2,.8,.2,1) both; }
  dialog.drawer.is-closing { animation: menu-lift .2s ease both; }
  .drawer__inner { padding: 44px 24px 28px; gap: 18px; min-height: 0; align-items: stretch; text-align: center; }
  .drawer nav { gap: 0; }
  .drawer nav a { font-family: var(--font-title); font-size: 1.5rem; font-weight: 800; text-align: center; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.18); }
  .drawer nav a:last-child { border-bottom: 0; }
  .drawer .btn { margin-top: 6px; }
  html .site-header, html[data-ga-page="campaign"] .site-header { z-index: 60; }
}
@keyframes menu-drop { from { opacity: 0; transform: translateY(-26px); } to { opacity: 1; transform: none; } }
@keyframes menu-lift { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-26px); } }

.float-start { display: none; }
@media (max-width: 1024px) {
  .float-start { display: inline-flex; position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 40; transform: translate(-50%, 24px); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .25s ease, opacity .25s ease, visibility .25s; box-shadow: 0 8px 24px rgba(0,0,51,.28) !important; padding-inline: 2em; }
  .float-start.is-on { transform: translate(-50%, 0); opacity: 1; visibility: visible; pointer-events: auto; }
}

/* Page header titles are no longer clipped */
.page-hero { overflow: visible; }
html .page-hero h1 { line-height: 1.25; padding-bottom: .12em; }

/* Amount chips in the giving form never overlap, even for currencies with many digits */
html .amounts { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
html .amounts .chip-btn { min-width: 0; padding-inline: 8px; white-space: nowrap; font-size: .88rem; }

/* "Read more": light button, aligned left */
html .story-more { padding-inline: 1.2em; align-self: flex-start; }
html .amounts.amounts--long { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }

/* Floating Start button: a clean light card like the Give card */
@media (max-width: 1024px) {
  html .float-start { display: block; width: min(calc(100% - 24px), 520px); padding: 12px 14px; background: #fff; border: 1px solid rgba(0,0,51,.2); border-radius: 28px; box-shadow: 0 10px 30px rgba(0,0,0,.22) !important; }
  .float-start .btn { width: 100%; }
}
/* Menu items: no outline ring (keyboard focus shows an underline instead) */
.drawer a, .drawer a:focus, .drawer a:focus-visible { outline: none; }
.drawer nav a:focus-visible { text-decoration: underline; text-underline-offset: 6px; }

/* Dark green button, and the crown beside "Real Influencers. Real Impacts." */
.btn-dark { background: #000033; color: #fff; border: 0; }
html .btn-dark:hover { background: #004a45; }
html .creators .deco--crown { width: clamp(90px, 11vw, 170px); right: 4%; top: 46%; rotate: 8deg; filter: drop-shadow(0 12px 14px rgba(0,0,51,.25)); }
@media (max-width: 1024px) { html .creators .deco--crown { right: 0; top: auto; bottom: -16px; width: 110px; } }

/* Web header: with six links, keep the logo centred and every item on one line */
@media (min-width: 1025px) {
  html .header__inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; }
  html .header__nav { gap: clamp(10px, 1.5vw, 26px); }
  html .header__nav a { font-size: clamp(.82rem, .5rem + .35vw, .95rem); }
  html .header__nav--left { margin-left: 0; }
  html .header__right { gap: clamp(10px, 1.5vw, 24px); }
  html .header__right .btn { white-space: nowrap; flex: none; }
  html .site-header .logo { flex: none; }
}
@media (min-width: 1025px) and (max-width: 1199px) {
  html .header__inner { padding-inline: 20px; gap: 10px; }
  html .header__nav { gap: 10px; }
  html .header__nav a { font-size: .8rem; padding-inline: 2px; }
  html .header__right .btn { padding-inline: 1em; font-size: .85rem; }
  html .site-header .logo { font-size: 1.3rem; }
}

/* Menu: no underlines or separator lines */
html .drawer nav a, html .drawer nav a:focus-visible { border-bottom: 0; text-decoration: none; }
html .drawer nav a { padding: 15px 0; }
html .drawer nav a:focus-visible { background: rgba(255,255,255,.12); border-radius: 14px; }
html .creators .deco--crown { width: clamp(150px, 17vw, 250px); rotate: 0deg; top: 30%; right: 0; }
@media (max-width: 1024px) { html .creators .deco--crown { width: 150px; bottom: -24px; right: -8px; } }

/* Round: Account dropdown (Sign In / Sign Up) */
.acct { position: relative; display: inline-block; }
html .acct__btn { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-weight: 600; font-size: clamp(.82rem, .5rem + .35vw, .95rem); color: inherit; background: none; border: 0; padding: 8px 4px; cursor: pointer; white-space: nowrap; }
html .acct__btn svg { transition: transform .2s; }
html .acct__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
html .acct__menu { position: absolute; top: calc(100% + 14px); right: 0; min-width: 170px; background: #fff; color: var(--black); border: 1px solid rgba(0,0,51,.12); border-radius: 18px; padding: 8px; display: grid; gap: 2px; z-index: 60; animation: menu-drop .2s ease; }
html .acct__menu[hidden] { display: none; }
html .acct__menu a, html .acct__out { display: block; width: 100%; text-align: left; font: inherit; font-weight: 600; font-size: .95rem; color: var(--black); background: none; border: 0; text-decoration: none; padding: 10px 14px; border-radius: 12px; cursor: pointer; }
html .acct__menu a::after { display: none; }
html .acct__menu a:hover, html .acct__out:hover { background: rgba(0,0,51,.06); }
/* inside the mobile menu: inline, centred */
html .drawer .acct { display: block; }
html .drawer .acct__btn { width: 100%; justify-content: center; font-family: var(--font-title); font-size: 1.5rem; font-weight: 800; padding: 15px 0; }
html .drawer .acct__menu { position: static; background: transparent; border: 0; color: #fff; padding: 0 0 8px; animation: none; min-width: 0; }
html .drawer .acct__menu a, html .drawer .acct__out { color: #fff; text-align: center; font-size: 1.1rem; font-weight: 600; padding: 9px 0; }
html .drawer .acct__menu a:hover, html .drawer .acct__out:hover { background: rgba(255,255,255,.12); }
html .acct__btn[data-current="true"] { text-decoration: none; }
@media (max-width: 1024px) { .header__nav .acct { display: none; } }
/* auth pages: no blue panel */
html .auth__side { background: transparent; color: var(--black); --focus: var(--blue); }
html .auth__side h1 { color: var(--black); font-family: var(--font-title); }

/* Round: web Account dropdown matches the blue header */
@media (min-width: 1025px) {
  html .acct__menu { background: var(--blue); color: #fff; border: 0; }
  html .acct__menu a, html .acct__out { color: #fff; }
  html .acct__menu a:hover, html .acct__out:hover { background: rgba(255,255,255,.14); }
}
@media (min-width: 1025px) { html .acct__menu { top: calc(100% + 22px); } }

/* Round: mobile & tablet floating header stays fixed, fades after 1.5s idle, returns on activity */
@media (max-width: 1024px) {
  html .site-header, html:not([data-ga-page="home"]) .site-header, html[data-ga-page="campaign"] .site-header, html[data-ga-page="home"] .site-header { position: fixed; top: 10px; left: 14px; right: 14px; width: auto; max-width: none; margin: 0; z-index: 60; transition: opacity .45s ease, transform .45s ease; }
  html:not([data-ga-page="campaign"]) body { padding-top: var(--hdr-pad, 72px); }
  html .site-header.is-hidden { opacity: 0; transform: translateY(-18px); pointer-events: none; }
}
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) { html .site-header { transition: opacity .01s; transform: none !important; } }

/* Round: header dropdowns (How it works, About, Account) */
html .acct--left .acct__menu { left: 0; right: auto; }
html .header__nav--left .acct__btn, html .header__right .acct__btn { font-size: clamp(.82rem, .5rem + .35vw, .95rem); }
@media (max-width: 1024px) { .header__nav--left .acct { display: none; } }

/* Round: web header: logo on the left, all menu items on the right */
@media (min-width: 1025px) {
  html .header__inner { display: flex; align-items: center; gap: 0; }
  html .header__inner .logo { order: 0; margin-right: auto; }
  html .header__nav--left { order: 1; margin: 0; justify-self: auto; }
  html .header__right { order: 2; display: flex; align-items: center; }
  html .header__nav--left { margin-right: clamp(10px, 1.6vw, 26px); }
  html .header__right .header__nav { margin-right: clamp(10px, 1.6vw, 24px); }
}
html .footer__social { flex-wrap: wrap; max-width: 100%; }

/* Footer: plain body text about line */
.footer__about { margin-top: 18px; max-width: 34ch; font-family: var(--font); font-weight: 500; font-size: .95rem; line-height: 1.55; opacity: .9; }
/* Faint outline on check boxes so they read clearly when empty */
html .check input { border: 1px solid rgba(0,0,51,.4); }
html .check input:checked { border-color: rgba(0,0,51,.55); }

/* Smooth transitions: pages, popups, toasts, steps */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: ga-fade-out .16s ease both; }
::view-transition-new(root) { animation: ga-fade-in .24s ease both; }
@keyframes ga-fade-in { from { opacity: 0; } }
@keyframes ga-fade-out { to { opacity: 0; } }
@keyframes ga-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes ga-pop { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes ga-pop-out { to { opacity: 0; transform: translateY(10px) scale(.97); } }
.pg-fade body { animation: ga-fade-in .26s ease both; }
.pg-fade.pg-out body { opacity: 0; transition: opacity .16s ease; }
dialog.modal[open] { animation: ga-pop .24s cubic-bezier(.2,.8,.2,1) both; }
dialog.modal[open]::backdrop { animation: ga-fade-in .24s ease both; }
dialog.modal.is-closing { animation: ga-pop-out .17s ease both; }
dialog.modal.is-closing::backdrop { animation: ga-fade-out .17s ease both; }
.toast { animation: ga-rise .26s ease both; } .toast.is-out { opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; }
#wizardRoot > *, .auth__card > div:not([hidden]):not(.notice):not(.methods), #dashPanel > * { animation: ga-rise .3s ease both; }
a.give-fab__who { color: inherit; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* Review step: title left, Edit right on every screen size */
html .review-sec .row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
html .review-sec .row-between h3 { margin: 0; }
html .review-sec .row-between .btn { flex: none; width: auto; }
@media (max-width: 560px) { .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .photo__main { left: 6px; bottom: 6px; padding: 4px 10px; font-size: .72rem; } }

/* Phones and tablets: one button size everywhere, hero included (reference: the "Start a campaign" button on How it works
   and the amount buttons in the Give form: 44px high, 15.2px text). */
@media (max-width: 1024px) {
  html :is(.btn, .btn-sm, .btn-lg, .method, .chip-btn):not(.btn-text) { min-height: 44px; padding: .55em 1.3em; font-size: .95rem; line-height: 1.2; }
  html :is(.btn, .btn-sm, .btn-lg):not(.btn-text) .icon { width: 1.1em; height: 1.1em; }
}

/* Footer bottom line: smaller text */
html .site-footer .footer__bottom, html .site-footer .footer__bottom > span, html .site-footer .footer__bottom a, html .site-footer .footer__bottom .country-btn { font-size: 13px !important; }

/* Light footer */
html .site-footer { background: #fff; color: var(--black); border-top: 1px solid rgba(0,0,51,.14); --focus: var(--blue); }
html .site-footer .footer__col h2 { color: var(--black); }
html .site-footer .footer__col a:hover, html .site-footer .footer__legal a:hover { color: var(--blue); }
html .site-footer .footer__social a { border-color: rgba(0,0,51,.25); color: var(--black); }
html .site-footer .footer__social a:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
html .site-footer .footer__bottom { border-top-color: rgba(0,0,51,.14); }
html .site-footer .country-btn { color: var(--black); }

/* Footer body text weight */
html .site-footer .footer__about, html .site-footer .footer__col a, html .site-footer .footer__bottom, html .site-footer .footer__bottom > span, html .site-footer .footer__bottom a, html .site-footer .country-btn { font-weight: 500; }

/* Giving Creators card: light text to 500 */
html .creator-card .creator-card__bio, html .creator-card .creator-card__stats span:not(.verified) { font-weight: 500; }

/* Giving Creators card layout */
html .creator-card { gap: 14px; padding: 22px; justify-items: stretch; }
html .creator-card__head { display: flex; align-items: center; gap: 18px; }
html .creator-card__img { width: 92px; height: 92px; flex: none; }
html .creator-card__id { display: grid; gap: 8px; min-width: 0; flex: 1 1 auto; }
html .creator-card__tags { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 8px; }
html .gc-tag { display: inline-flex; align-items: center; gap: 5px; background: var(--blue); color: #fff; border-radius: 999px; padding: 3px 10px 3px 5px; font-size: .7rem; font-weight: 700; white-space: nowrap; line-height: 1; }
html .gc-tag img { width: 16px; height: 16px; min-width: 16px; flex: 0 0 16px; display: block; object-fit: contain; margin: 0; }
html .verified { padding: 3px 9px 3px 4px; font-size: .66rem; gap: 5px; }
html .verified .vstar { width: 15px; height: 15px; }
html .verified .icon { width: 12px; height: 12px; }
html .creator-card .verified { position: static; }
html .creator-card__name { margin: 0; font-size: 1.55rem; }
html .creator-card__meta { margin: 0; font-weight: 500; font-size: .9rem; }
html .creator-card__meta i { font-style: normal; margin: 0 4px; }
html .creator-card__stats > span { display: inline-flex !important; align-items: center; justify-content: center; gap: 5px; }
html .creator-card__stats > span img { width: 18px; height: 18px; flex: none; }
@media (max-width: 480px) { html .creator-card { padding: 18px; } html .creator-card__head { gap: 12px; } html .creator-card__img { width: 72px; height: 72px; } html .creator-card__name { font-size: 1.3rem; } html .gc-tag { font-size: .72rem; } }

/* Close button: simple round button with a rounded X */
html .modal__head .icon-btn, html .icon-btn[aria-label="Close"] { width: 38px; height: 38px; border: 0; background: rgba(0,0,51,.07); color: var(--black); box-shadow: none; }
html .modal__head .icon-btn:hover, html .icon-btn[aria-label="Close"]:hover { background: var(--turq); }
html .modal__head .icon-btn svg, html .icon-btn[aria-label="Close"] svg { width: 18px; height: 18px; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* Footer currency / country switcher as a bubble */
html .site-footer .country-btn { border: 1px solid rgba(0,0,51,.2); border-radius: 999px; padding: 9px 20px; background: #fff; text-decoration: none; }
html .site-footer .country-btn:hover { border-color: var(--blue); text-decoration: none; }

/* Giving Creators card: tag + Verified on one row, name, meta on one line, navy bio, stat pills */
html .creator-card { container-type: inline-size; }
html .creator-card__tags { flex-wrap: nowrap; }
html .creator-card__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html .creator-card .creator-card__bio { color: var(--black); font-weight: 500; }
@container (max-width: 430px) {
  .creator-card__head { gap: 12px; }
  .creator-card__img { width: 76px; height: 76px; }
  .creator-card__name { font-size: 1.35rem; }
  .creator-card__meta { font-size: .82rem; }
  html .creator-card .gc-tag, html .creator-card .verified { font-size: .64rem; }
}
/* Close button: a touch cuter */
html .modal__head .icon-btn, html .icon-btn[aria-label="Close"] { width: 40px; height: 40px; background: rgba(0,0,51,.06); }
html .creator-card__meta { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }

/* Floating Start a campaign bar: fully round */
html .float-start { border-radius: 999px !important; padding: 10px 12px; }

/* Give popup: no black outline on close button or confirmation card */
html dialog .icon-btn, html dialog .icon-btn[aria-label="Close"] { border: 0 !important; box-shadow: none !important; outline-color: transparent; } html dialog .icon-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } html .confirm-box { border: 0 !important; box-shadow: none !important; }

/* Popups: no focus outline on the dialog, close button or confirmation card */
html dialog.modal, html dialog.modal:focus, html dialog.modal:focus-visible, html dialog.modal .modal__head .icon-btn, html dialog.modal .modal__head .icon-btn:focus, html dialog.modal .modal__head .icon-btn:focus-visible, html dialog.modal .modal__body:focus, html dialog.modal .modal__body:focus-visible, html dialog.modal .confirm-box, html dialog.modal .confirm-box:focus-visible, html dialog.modal [tabindex="-1"]:focus-visible { outline: none !important; }

/* Site editor: hidden parts and the block library */
.cms-hidden { display: none !important; }
.cms-b { display: block; }
.cms-bg-paper { background: #ececf1; } .cms-bg-white { background: #fff; } .cms-bg-turq { background: var(--turq); }
.cms-bg-blue { background: var(--blue); color: #fff; --focus: #fff; } .cms-bg-dark { background: var(--black); color: #fff; --focus: #fff; }
.cms-text { max-width: 68ch; } .cms-text--wide { max-width: none; } .cms-center { margin-inline: auto; text-align: center; }
.cms-text h2 { margin-bottom: var(--s4); } .cms-text p + p { margin-top: var(--s3); }
.cms-grid { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .cms-grid--2, .cms-grid--3, .cms-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1025px) { .cms-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cms-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cms-figure { margin: 0; } .cms-figure img { width: 100%; height: auto; display: block; border-radius: var(--r-img); object-fit: cover; }
.cms-figure--full img { border-radius: 0; } .cms-figure figcaption { margin-top: 8px; color: var(--gray); font-size: .9rem; font-weight: 500; }
.cms-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-img); overflow: hidden; background: #000; } .cms-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (min-width: 700px) { .steps.cms-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .steps.cms-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1025px) { .steps.cms-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .steps.cms-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cms-btns { display: flex; flex-wrap: wrap; gap: 12px; } .cms-btns.cms-center { justify-content: center; }
.cms-stats { display: flex; flex-wrap: wrap; gap: 12px; }
.cms-space hr { border: 0; border-top: 1px solid rgba(0,0,51,.14); margin: 0 auto; position: relative; top: 50%; }
.cms-col h3 { margin-bottom: 8px; } .cms-col p { margin-top: 8px; } .cms-col .btn { margin-top: 14px; }
.cms-empty { padding: 24px; border: 1px dashed rgba(0,0,51,.3); border-radius: 16px; text-align: center; font-weight: 600; }

/* News */
.news-article { max-width: 760px; margin-inline: auto; }
.news-back { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; margin-bottom: var(--s5); }
.news-back svg { width: 18px; height: 18px; }
.news-title { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); line-height: 1.1; }
.news-meta { margin-top: 12px; color: var(--gray); font-weight: 600; }
.news-cover { width: 100%; height: auto; border-radius: var(--r-img); margin-top: var(--s5); display: block; }
.news-body { margin-top: var(--s5); font-size: 1.05rem; line-height: 1.7; font-weight: 500; }
.news-body > * + * { margin-top: 1em; } .news-body h2 { font-size: 1.6rem; margin-top: 1.6em; } .news-body h3 { font-size: 1.25rem; margin-top: 1.4em; }
.news-body ul, .news-body ol { padding-left: 1.4em; } .news-body li + li { margin-top: .4em; }
.news-body blockquote { border-left: 4px solid var(--turq); padding: 4px 0 4px 18px; font-weight: 600; }
.news-body img { max-width: 100%; height: auto; border-radius: var(--r-sm); }
.news-body a { color: var(--blue); }

/* Success story cards: verified star sits right after the name; amount stays tidy */
html .story__meta { align-items: center; gap: 12px; }
html .story__meta .who { min-width: 0; flex: 1 1 auto; }
html .story__meta .who__n { display: inline; line-height: 1.25; min-width: 0; }
html .story__meta .who__n .vinline { display: inline-flex; vertical-align: middle; margin: -2px 0 0 5px; }
html .story__meta .story__raised { flex: none; white-space: nowrap; text-align: right; }
html .story-page__who .gc-tag { margin-bottom: 10px; }

/* Phones: date fields stay inside their card; the "Submitted for review" card keeps its padding */
html input[type="date"].input, html input[type="datetime-local"].input { display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; -webkit-appearance: none; appearance: none; text-align: left; line-height: 1.2; }
html input[type="date"].input::-webkit-date-and-time-value { text-align: left; min-height: 1.2em; }
html .card.card--pad.success { padding: clamp(22px, 5vw, 44px); box-sizing: border-box; }
html .card.card--pad.success > * { max-width: 100%; box-sizing: border-box; }
html .card.card--pad.success .btn { width: 100%; max-width: 360px; }
html .card.card--pad.success .notice { width: 100%; text-align: left; }

/* Success stories: card names and the Creator card */
@media (min-width: 1025px) {
  html .story__meta .who__n { display: inline-flex; align-items: center; gap: 6px; }
  html .story__meta .who__n .nm span { display: block; line-height: 1.2; }
  html .story__meta .who__n .vinline { margin: 0; }
}
html .story__meta .who__n .vstar { width: 12px; height: 12px; }
html .story-page__head { display: grid; gap: 10px; justify-items: start; }
html .story-page__id { display: grid; gap: 8px; justify-items: start; min-width: 0; }
html .story-page__who h3 { display: block; margin: 0; line-height: 1.25; }
html .story-page__who h3 .vinline { display: inline-flex; vertical-align: middle; margin: -3px 0 0 6px; }
html .story-page__who h3 .vstar { width: 18px; height: 18px; }
html .story-page__who .creator-card__meta { margin: 0; }
html .story-page__visit { font-weight: 800; text-decoration: none; color: var(--black); }
@media (max-width: 1024px) {
  html .story-page__who { position: static; }
  html .story-page__head { display: flex; align-items: center; gap: 16px; }
  html .story-page__who .creator-card__img { width: 88px; height: 88px; flex: none; }
  html .story-page__who h3 { font-size: 1.35rem; }
}
@media (max-width: 480px) { html .story-page__head { gap: 12px; } html .story-page__who .creator-card__img { width: 72px; height: 72px; } html .story-page__who h3 { font-size: 1.2rem; } }

/* Tighter pill-to-name spacing; story names as "First L."; creator page head follows the Giving Creators card */
html .story-page__who .gc-tag, html .profile__id .gc-tag { margin: 0; }
html .story-page__id { gap: 5px; }
html .story__meta .who__n { display: inline-flex; align-items: center; gap: 5px; }
html .story__meta .who__n .vinline { margin: 0; }
/* Creator page head: one grid, two layouts */
html .profile__tag { margin: 0; justify-self: start; }
html .profile__name, html .profile__meta, html .profile__bio { margin: 0; }
html .profile__name .verified-star { margin-left: 4px; }
html .profile__soc:empty { display: none; }
html .profile__actions { margin: 0; flex-wrap: nowrap; }
html .profile__actions .btn { width: auto; }
@media (min-width: 1025px) {
  html .profile { grid-template-columns: auto auto auto minmax(0, 1fr); grid-template-areas: "av tag tag tag" "av name act ." "av meta meta meta" "av bio bio bio" "av soc soc soc" "av stats stats stats"; column-gap: 0; row-gap: 12px; align-items: center; }
  html .profile .avatar--lg { grid-area: av; align-self: start; margin-right: clamp(18px, 3vw, 40px); }
  html .profile__tag { grid-area: tag; } html .profile__name { grid-area: name; } html .profile__meta { grid-area: meta; }
  html .profile__bio { grid-area: bio; } html .profile__soc { grid-area: soc; } html .profile__stats { grid-area: stats; margin-top: 4px; }
  html .profile__actions { grid-area: act; margin-left: 24px; }
}
@media (max-width: 1024px) {
  html .profile { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "av tag" "av name" "av meta" "bio bio" "soc soc" "stats stats" "act act"; column-gap: 16px; row-gap: 2px; align-items: center; }
  html .profile .avatar--lg { grid-area: av; width: 88px; height: 88px; }
  html .profile__tag { grid-area: tag; margin-bottom: 4px; } html .profile__name { grid-area: name; font-size: 1.5rem; } html .profile__meta { grid-area: meta; margin-top: 2px; }
  html .profile__bio { grid-area: bio; margin-top: 10px; } html .profile__soc { grid-area: soc; margin-top: 12px; } html .profile__stats { grid-area: stats; margin-top: 16px; }
  html .profile__actions { grid-area: act; margin: 14px 0 34px; flex-direction: column; }
  html .profile__actions .btn { width: 100%; }
  html .profile__name .verified-star .vstar { min-width: 20px; min-height: 20px; width: 20px; height: 20px; }
}
@media (max-width: 480px) { html .profile { column-gap: 12px; } html .profile .avatar--lg { width: 72px; height: 72px; } html .profile__name { font-size: 1.3rem; } }

/* Giving popups: close button right, full-width buttons, 500 body weight, roomy amount field */
html .modal__head .icon-btn { margin-left: auto; }
html dialog.modal--give, html dialog.modal--giveflow { font-weight: 500; }
html dialog.modal--give :is(.input, .select, .textarea), html dialog.modal--giveflow :is(.input, .select, .textarea) { font-weight: 500; }
html dialog.modal--give .btn, html dialog.modal--giveflow .btn:not(.btn-text) { width: 100%; justify-content: center; min-height: 44px; font-size: .95rem; }
html dialog.modal--giveflow .modal__foot { flex-direction: column; }
html dialog.modal--give .input-affix .input { font-family: var(--font-title); font-weight: 800; font-size: 1.7rem; min-height: 64px; padding-left: 2.6em; letter-spacing: -.01em; }
html dialog.modal--give .input-affix > span { font-family: var(--font-title); font-size: 1.5rem; left: .9em; }
html .confirm-box dd.confirm-camp { display: flex; align-items: center; justify-content: flex-end; gap: 10px; text-align: right; }
html .confirm-box dd.confirm-camp img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: none; }

/* Campaign page: overlapping Creator avatars get a light outline like the homepage */
html .organizer__imgs img { box-sizing: content-box; border: 3px solid var(--paper, #f7f7f7); border-radius: 50%; }
html .confirm-box dd.confirm-camp { grid-column: 1 / -1; justify-content: flex-start; text-align: left; font-size: .95rem; line-height: 1.25; }
html .confirm-box dt:first-of-type { grid-column: 1 / -1; margin-bottom: -2px; }

/* Give popup: bigger amount field; confirmation card weights and right-aligned campaign */
html dialog.modal--give .input-affix .input { font-size: clamp(2.4rem, 1.5rem + 3vw, 3.4rem); min-height: 88px; padding-left: 1.9em; }
html dialog.modal--give .input-affix > span { font-size: clamp(2rem, 1.3rem + 2.4vw, 2.8rem); left: .5em; }
html .confirm-box dd { font-weight: 600; }
html .confirm-box dd.confirm-camp { flex-direction: row-reverse; justify-content: flex-start; text-align: right; font-weight: 600; }
html .confirm-box dd.confirm-camp span { min-width: 0; text-align: right; }
html .confirm-box dt:first-of-type { grid-column: 1 / -1; }

/* Success story body text matches "Where the money goes" */
html .story-text { font-size: 1rem; font-weight: 500; }

/* Creator stack (also used under a Creator's followers) */
.creator-stack { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.creator-stack--end { margin-top: clamp(28px, 4vw, 44px); }
.creator-stack__imgs { display: flex; }
.creator-stack__imgs a { margin-left: -18px; border-radius: 50%; }
.creator-stack__imgs a:first-child { margin-left: 0; }
.creator-stack__imgs img { box-sizing: content-box; width: 52px; height: 52px; border-radius: 50%; border: 4px solid var(--paper, #f7f7f7); object-fit: cover; background: var(--turq); }

/* Home "How GivingAid works": path tabs inside the white band */
html .how-home .how-tabs { margin-top: 8px; }
html body.page-how, html body.page-how .faq__a, html body.page-how .ribbon__arrow { font-weight: 500; }
html .profile__tag .verified, html .story-page__id .verified { position: static; display: inline-flex; align-self: start; }

/* ---- Round: confirm title right, tap highlight, story/comment text, followers card, accent-green hovers, Creator page weights ---- */
html .confirm-box dt:first-of-type { text-align: right; }
html .drawer, html .drawer *, html .menu-btn, html .acct__btn, html .search-btn { -webkit-tap-highlight-color: transparent; }
html .drawer .acct__btn:focus:not(:focus-visible), html .acct__btn:focus:not(:focus-visible) { outline: none; box-shadow: none; }
html .word p { font-size: 1rem; font-weight: 500; line-height: inherit; }
html .fol-card { padding: clamp(18px, 2vw, 24px); }
html .fol-card > h2 { font-size: 1.3rem; margin-bottom: 6px; }
html .fol-card .supporter { padding: 10px 12px; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; }
html[data-ga-page="creator"] body { font-weight: 500; }
html[data-ga-page="creator"] .lead, html[data-ga-page="creator"] .muted { font-weight: 500; }

/* Hover colour: every interactive hover uses the accent green */
html :is(.btn-outline, .btn-dark, .chip-btn:not([aria-pressed="true"]), .kpi--btn, .dash__nav button.tab:not([aria-selected="true"]), .method, .share__grid a, .share__native, .share__qr, .social, .word__menu, .word-pop button, a.notif, a.notif.unread, .type-card, .gc-tag--btn ):hover { background: var(--turq); color: var(--black); }
html .btn-dark:hover { background: var(--turq); color: var(--black); }
html .site-footer .footer__social a:hover { background: var(--turq); border-color: var(--turq); color: var(--black); }
html .rolepick:hover .rolepick__body, html .dropzone:hover { background: var(--turq); }
html :is(.st__exit, .st__ib:not(:disabled), .st__rail button, .st-row__b, .st-fmt button, .st-item__h button, .st-libg button, .st-tile):hover { background: var(--turq); }

/* Menus: underline only, no boxed hover */
html .acct__menu a:hover, html .acct__out:hover, html .drawer .acct__menu a:hover, html .drawer .acct__out:hover, html .drawer nav a:hover, html .acct__btn:hover { background: none; color: inherit; text-decoration: underline; text-decoration-color: var(--turq); text-decoration-thickness: 2px; text-underline-offset: 5px; }
html .menu-btn:hover, html .search-btn:hover { background: none; color: inherit; }
@media (min-width: 1025px) { html .fol-card { max-width: 430px; } }

/* Campaign thumbnail first, then its name/link, left-aligned */
.camp-ref { display: inline-flex; align-items: center; justify-content: flex-start; gap: 10px; text-align: left; min-width: 0; max-width: 100%; }
.camp-ref > img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: none; background: var(--turq); }
.camp-ref__t { min-width: 0; overflow-wrap: anywhere; }
.op-top li { align-items: center; }

/* Menus and footer: hover only changes the text colour to turquoise (no boxes, no underline). Social icons keep their own hover. */
html .header__nav a:not([aria-current="page"]):hover::after { transform: scaleX(0); }
html :is(.acct__btn, .menu-btn, .search-btn, .drawer nav a, .acct__menu a, .acct__out, .header__nav a, .header__nav button):is(:hover, :active, :focus, :focus-visible) { background: none; box-shadow: none; outline: none; text-decoration: none; }
html :is(.acct__btn, .drawer nav a, .acct__menu a, .acct__out, .header__nav a, .header__nav button):is(:hover, :active) { color: var(--turq); }
html .acct__btn[data-current="true"], html .header__nav a[aria-current="page"] { text-decoration: none; position: relative; }
html .header__nav a::after { height: 2px; border-radius: 999px; bottom: 3px; }
html .acct__btn[data-current="true"]::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: -2px; height: 2px; border-radius: 999px; background: var(--turq); }
html .site-footer :is(.footer__col a, .footer__legal a, .country-btn):is(:hover, :active, :focus, :focus-visible) { background: none; border-color: inherit; box-shadow: none; text-decoration: none; border-radius: 0; outline: none; opacity: 1; }
html .site-footer :is(.footer__col a, .footer__legal a, .country-btn):is(:hover, :active) { color: var(--turq); }
html .site-footer .footer__social a:hover { background: var(--turq); border-color: var(--turq); color: var(--black); }

/* Confirm card: "Campaign" title left, rectangular thumbnail on the left, name beside it */
html .confirm-box dt:first-of-type { text-align: left; }
html .confirm-box dd.confirm-camp { flex-direction: row; justify-content: flex-start; text-align: left; }
html .confirm-box dd.confirm-camp span { text-align: left; }
html .confirm-box dd.confirm-camp img { width: 72px; height: 48px; border-radius: 10px; }
/* Give card, desktop: slightly shorter "own amount" box (amount figures unchanged) */
@media (min-width: 1025px) { html dialog.modal--give .input-affix .input { min-height: 0; line-height: 1.3; padding-top: .4em; padding-bottom: .4em; } }
/* Menu: no "active page" underline */
html .header__nav a[aria-current="page"]::after, html .acct__btn[data-current="true"]::after { content: none; display: none; }
html .header__nav a[aria-current="page"], html .acct__btn[data-current="true"] { text-decoration: none; }

/* Confirm card: name right-aligned beside the left thumbnail; "How often?" pill sized to fit */
html .confirm-box dd.confirm-camp span { flex: 1; min-width: 0; text-align: right; }
html #donateForm .seg, html .modal--give .seg { display: inline-flex; width: fit-content; max-width: 100%; justify-self: start; align-self: flex-start; }

/* Give card: Continue and Confirm buttons a touch wider */
html dialog.modal--give #donateForm button[type="submit"], html dialog.modal--giveflow #confirmBtn { width: calc(100% + 16px); margin-inline: -8px; }

/* Give card: slightly taller Continue and Confirm buttons */
html #donateForm button[type="submit"].btn, html #confirmBtn { min-height: 46px; padding-top: .6em; padding-bottom: .6em; }

/* Confirm popup title: thick header font, a little larger */
html dialog.modal--giveflow .modal__title, html dialog.modal--giveflow .modal__head h2, html dialog.modal--giveflow .modal__head h3 { font-family: var(--font-title); font-weight: 800; font-size: 1.85rem !important; line-height: 1.15; letter-spacing: -.01em; }
/* All buttons use the taller size (Continue/Confirm height) */
html :is(.btn, .btn-sm, .btn-lg):not(.btn-text) { min-height: 46px; padding-top: .6em; padding-bottom: .6em; }

/* Thank-you heading matches the Confirm popup title */
html .success h2 { font-family: var(--font-title); font-weight: 800; font-size: 1.85rem !important; line-height: 1.15; letter-spacing: -.01em; }
/* Receipt popup: left-aligned with the receipt, wide buttons */
html dialog.modal--receipt .rcw .rc { margin: 0; max-width: none; padding: 6px 0; }
html dialog.modal--receipt .modal__foot { justify-content: flex-start; flex-wrap: nowrap; flex-direction: row; }
@media (min-width: 1025px) { html dialog.modal--receipt .modal__foot .btn { flex: 0 0 calc(25% - 6px); min-width: 0; padding-inline: .5em; } }
@media (max-width: 1024px) { html dialog.modal--receipt .modal__foot { flex-wrap: wrap; } html dialog.modal--receipt .modal__foot .btn { flex: 1 1 100%; width: 100%; } }

/* Receipt popup buttons: same height as Continue / Confirm */
html dialog.modal--receipt .modal__foot .btn { min-height: 46px; padding-top: .6em; padding-bottom: .6em; font-size: .95rem; font-weight: 800; }
html dialog.modal--receipt .rcw .rc__top { align-items: flex-start; }

/* Receipt popup, desktop: roomier padding */
@media (min-width: 1025px) {
  html dialog.modal--receipt .modal__head { padding: 36px 44px 6px; }
  html dialog.modal--receipt .modal__body { padding: 12px 44px 8px; }
  html dialog.modal--receipt .modal__foot { padding: 20px 44px 40px; }
  html dialog.modal--receipt .rcw .rc { padding: 14px 0; }
  html dialog.modal--receipt .modal__head .icon-btn { margin-right: -14px; }
}

/* Universal button: slightly shorter, roomy sides (hero buttons follow it too) */
html :is(.btn, .btn-sm, .btn-lg):not(.btn-text), html .hero .btn-lg { min-height: 46px; padding-top: .6em; padding-bottom: .6em; padding-left: 1.8em; padding-right: 1.8em; font-size: .95rem; }
html dialog.modal--receipt .modal__foot .btn { padding-left: .5em; padding-right: .5em; }
/* Receipt: logo a hair smaller on mobile and tablet; tighter gap above the buttons on desktop */
@media (max-width: 1024px) { html dialog.modal--receipt .rc__brand img { height: 59.7px !important; } }
@media (min-width: 1025px) { html dialog.modal--receipt .modal__body { padding-bottom: 0; } html dialog.modal--receipt .modal__foot { padding-top: 4px; } html dialog.modal--receipt .rcw .rc { padding-bottom: 4px; } }

/* Voices of kindness comments match Q&A answers (same size and weight) */
html .word p, html .qa__a p { font-size: 1rem; font-weight: 500; line-height: 1.6; }
/* Gift receipt: amount row left-aligned with no background */
html dialog.modal--receipt .rc__total { justify-content: flex-start !important; background: none !important; padding-left: 0 !important; padding-right: 0 !important; }
@media (max-width: 1024px) {
  html dialog.modal--receipt .rc__brand img { height: 42.8px !important; }
  html dialog.modal--receipt .rc__meta { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (min-width: 1025px) {
  html dialog.modal--receipt .rc__meta { justify-content: space-between; gap: 0; }
  html dialog.modal--receipt .rc__total { margin-top: 6px; }
  html dialog.modal--receipt .rc__note { margin-top: 0; }
  html dialog.modal--receipt .modal__foot { padding-top: 16px; }
}

/* Gift receipt, mobile & tablet: tighter gap between the amount row and the thank-you line */
@media (max-width: 1024px) { html dialog.modal--receipt .rc__note { margin-top: 4px; } html dialog.modal--receipt .rc__total { margin-top: 10px; } }

/* Minimum text weight is 500 (400 is too thin): body text, paragraphs, form fields and dropdown text */
body { font-weight: 500; }
p, li, td, th, dd, dt, small, label, blockquote, figcaption { font-weight: 500; }
input, select, option, textarea { font-weight: 500; }
/* Flag: active (flagged) state is #ff0055 */
html .chip--flag, html .op-filters .chip-btn[data-filter="creators:flagged"][aria-pressed="true"] { background: #ff0055; border-color: #ff0055; color: #fff; }
html .chip--flag svg { stroke: #fff; }
html .btn[data-act="flagUser"]:is(:hover,:focus-visible) { background: #ff0055; border-color: #ff0055; color: #fff; }

/* Tablet & mobile: four stat cards sit evenly (no lone card on a second row) */
@media (max-width: 1024px) { html .kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; } }
@media (min-width: 561px) and (max-width: 1024px) { .footer__cols { grid-template-columns: repeat(3, 1fr); } }

/* Tablets (641–1024px) use the mobile layout, kept comfortable instead of stretched */
@media (min-width: 641px) and (max-width: 1024px) {
  html .hero__media { max-width: 720px; margin-inline: auto; }
  html .hero__photo { aspect-ratio: 16 / 10; }
  html :is(.hero__actions, .cta__actions, .story-band__cta, .state) .btn, html .state .btn { max-width: 420px; margin-inline: auto; }
  html :is(.hero__actions, .cta__actions) { display: grid; grid-template-columns: minmax(0, 420px); justify-content: center; }
  html .story-band__cta .btn { margin-inline: 0; }
}
@media (min-width: 1025px) and (max-width: 1100px) {
  html .header__inner { padding-inline: 16px; gap: 8px; }
  html .header__nav { gap: 4px; }
  html .header__nav a { font-size: .76rem; padding-inline: 2px; }
  html .header__right .btn { padding-inline: .8em; font-size: .8rem; }
  html .site-header .logo { font-size: 1.15rem; }
  html .site-header .logo img { height: 30px; }
}

/* Support inbox: conversation thread */
.tk-thread { display: grid; gap: 10px; }
.tk-msg { background: #f1f2f7; border-radius: 16px; padding: 12px 16px; }
.tk-msg--us { background: #e6fffb; }
.tk-msg--note { background: #fff6d6; }
.tk-msg__h { font-size: .85rem; color: var(--gray); margin: 0 0 4px; }
.tk-msg p:last-child { margin: 0; font-weight: 500; white-space: pre-wrap; }

/* Phones and tablets: footer social icons sit flush with the text on the left, all eight on one row */
@media (max-width: 1024px) {
  html .footer__social, html .site-footer .footer__social { flex-wrap: nowrap; gap: clamp(14px, 4.7vw, 22px); max-width: 100%; justify-content: flex-start; margin-left: 0; }
  html .site-footer .footer__social a { width: 17px; height: 17px; border: 0; border-radius: 0; position: relative; flex: none; background: none; }
  html .site-footer .footer__social a::after { content: ""; position: absolute; inset: -11px; border-radius: 50%; }
  html .site-footer .footer__social a:hover { background: none; color: var(--blue); }
  html .footer__social a svg { width: 17px; height: 17px; }
}

/* Give popups: size to the visible screen (not the full height behind a phone browser's bottom bar) */
html dialog.modal--give, html dialog.modal--giveflow { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
html dialog.modal--give .modal__body, html dialog.modal--giveflow .modal__body { max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); overflow-y: auto; }

/* Give popup amount: slightly shorter box, original digit size */
html dialog.modal--give .input-affix .input { height: 100px; min-height: 0; padding-top: 0; padding-bottom: 0; line-height: 1.2; box-sizing: border-box; }
@media (min-width: 1025px) { html dialog.modal--give .input-affix .input { height: 96px; padding-top: 0; padding-bottom: 0; } }