/*
  Corporate site redesign - October 2026
  ---------------------------------------
  Shared stylesheet for the redesigned corporate pages rendered by
  index-redesign-2026.cfm (views in /views-2026/).

  Built from the designer's preview files in /redesign/:
    - Homepage Adaptations      -> base shell (header, hero, cards, footer)
    - Pricing page adaptations  -> .plan, .price-table, .fee-choice, .stripe-box ...
    - Fundraisers page          -> .concept, .two-panels, .step-list, .four-steps ...
    - Events landing page       -> .event-panel, .two-cards, .feature-grid.four ...
    - Ticketing pack (root)     -> .shop, .checkin-panel, .tools (restyled to the new palette)
    - Finances handover         -> .hero-art, .payout-diagram, .claim-steps, .planning-grid ...

  Brand rules (Website-Design-Navigation-and-SEO-Handover, 6 Oct 2026):
    Only these accents: #06B6C8 #814C98 #3C67AF #FDF3CF #F8F0E9 #29B2A1 #67AF55 #FFCA00 #E60080 #F191BB
    Black and white for text and neutral surfaces.
    Per-brand values arrive as CSS custom properties on <body>: --brand, --wash, --wash-alt, --onbrand.
    Every cream (#FDF3CF) and neutral (#F8F0E9) surface uses --wash / --wash-alt, so PTA Events keeps the
    designer's cream while Charity Hub and Clubs Hub get a light tint of their own colour (set in brand.cfm).
*/

/* ---------- Poppins ----------
   Loaded from Google Fonts in head.cfm (weights 400-800, display=swap), as the current site does.
   Local TTF copies and the OFL licence remain in /assets/fonts/poppins/ should self-hosting be wanted again. */

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;font-family:Poppins,sans-serif;color:#000;background:#fff;font-size:16px;line-height:1.7;--brand:#814C98;--wash:#FDF3CF;--wash-alt:#F8F0E9;--onbrand:#fff;--button:#FFCA00;--onbutton:#000}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{line-height:1.16;letter-spacing:-.035em}
h1{font-size:clamp(40px,4.5vw,65px);font-weight:700;margin:18px 0 23px}
h2{font-size:clamp(30px,3.2vw,45px);margin:12px 0 20px}
h3{font-size:23px}
p+p{margin-top:16px}
/* Text links: black text, brand-coloured underline. Navigation links override this below. */
a{color:inherit;text-decoration:underline;text-decoration-color:var(--brand);text-decoration-thickness:2px;text-underline-offset:4px}
a:hover{text-decoration-thickness:3px}
/* On brand-coloured or black surfaces the underline takes the text colour, or it would disappear */
.closing a:not(.button),.promise a,.shop-panel a,.checkin-panel a,.year-panel a,.payout-result a{text-decoration-color:currentColor}
img{display:block;max-width:100%;height:auto}
em{font-style:normal}
h1 em{color:#814C98}
body.club h1 em{color:#000;text-decoration:underline;text-decoration-color:var(--brand);text-decoration-thickness:6px;text-underline-offset:8px}
body.charity h1 em{color:#000}
button,summary{font:inherit}
.wrap{width:min(1200px,calc(100% - 64px));margin:auto}
.skip{position:absolute;left:12px;top:-100px;z-index:20;background:#fff;padding:14px}
.skip:focus{top:10px}
/* Focus ring: black ring with a white halo so it is visible on white, cream, brand colours and the black shop band (WCAG 1.4.11 / 2.4.7) */
:focus-visible{outline:3px solid #000;outline-offset:3px;box-shadow:0 0 0 3px #fff}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Header / navigation ---------- */
.site-header{background:#fff;border-bottom:1px solid #000;position:relative;z-index:10}
.nav{display:flex;align-items:center;gap:30px;min-height:100px}
/* Logos are sized by height so the element is exactly as wide as the image. Each logo file has a
   built-in left margin (PTA 6%, Charity Hub 6%, Clubs Hub 7.8%); the translate pulls the visible
   mark back onto the content edge without affecting layout. */
.logo{height:84px;width:auto;max-width:260px;object-fit:contain;object-position:left center}
.footer .logo{height:66px}
body.pta .logo,body.charity .logo{transform:translateX(-6%)}
body.club .logo{transform:translateX(-7.8%)}
.nav nav{display:flex;align-items:center;gap:22px;margin-left:auto;font-size:14px;font-weight:600}
/* Navigation links: plain at rest, brand underline on hover/focus, thick brand underline for the current page */
.nav a,.dropdown a,.section-nav a,.footer a,.breadcrumb a,.tag,.post-card h3 a,.post-more,.post-nav-card,.card>a{text-decoration:none}
.nav a:hover,.nav a:focus-visible,.dropdown a:hover,.dropdown a:focus-visible,.section-nav a:hover,.section-nav a:focus-visible,.footer a:hover,.footer a:focus-visible,.breadcrumb a:hover,.post-card h3 a:hover,.post-more:hover,.card>a:hover{text-decoration:underline;text-decoration-color:var(--brand);text-decoration-thickness:3px;text-underline-offset:5px}
.nav details{position:relative}
.nav summary{cursor:pointer;padding:15px 0;list-style:none}
.nav summary::-webkit-details-marker{display:none}
.nav summary:after{content:' \25BE';font-size:12px}
.nav details[open] summary:after{content:' \25B4'}
.dropdown{position:absolute;top:100%;left:0;background:#fff;border:1px solid #000;border-radius:10px;min-width:270px;padding:14px;display:grid;gap:5px}
.dropdown a{padding:7px;display:block}
.nav [aria-current=page]{text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--brand)}
.nav>.button{margin-left:12px}
.nav .button:hover,.nav .button:focus-visible{text-decoration:none;filter:brightness(1.06)}
.mobile-toggle{display:none}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:13px 23px;border:2px solid #000;border-radius:8px;background:var(--button);color:var(--onbutton);font-weight:600;text-decoration:none;font-size:15px;cursor:pointer}
.button.outline{background:#fff;color:#000}
/* Button colour per brand (2026-10-08), as --button / --onbutton. PTA Events keeps the designer's yellow
   (the default on body above). Charity Hub and Clubs Hub use a second palette accent that is clearly
   distinct from their brand colour, with white text: Charity Hub uses the PTA Events purple #814C98 (6.1:1)
   and Clubs Hub dark teal #008F86 (4.0:1, passes AA for large text only; black text would give 5.3:1).
   Both are brand palette colours (see CLAUDE.md). Everything that wears the button colour uses these:
   buttons, badges, the checkout pill, the Finances payout diagram and buttons inside blog posts.
   Outline buttons and the video play button stay as they are. */
body.charity{--button:#814C98;--onbutton:#fff}
body.club{--button:#008F86;--onbutton:#fff}
body.charity .button:not(.outline):hover,body.club .button:not(.outline):hover{filter:brightness(1.08)}
.breadcrumb{font-size:14px;padding:20px 0}

/* ---------- Hero ---------- */
.hero{background:var(--wash);padding:58px 0}
.hero-grid{display:grid;grid-template-columns:1.08fr 1fr;gap:45px;align-items:center}
.eyebrow{font-size:14px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.hero .lead{font-size:18px;max-width:570px}
.actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:27px;align-items:center}
.small{font-size:13px;margin-top:14px}
.hero-photo{height:470px;width:100%;object-fit:cover;border-radius:80px 12px 80px 12px}
.hero-visual figcaption{position:relative;margin:-35px 22px 0;padding:18px 20px;background:var(--brand);border:1px solid #000;border-radius:10px;font-size:15px;font-weight:600;color:var(--onbrand)}
.hero-art img{width:100%;max-height:560px;object-fit:contain;margin:0 auto}
@media(max-width:700px){.hero-art img{max-height:300px}}
.hero-art figcaption{position:relative;margin:-20px auto 0;padding:14px 20px;background:#fff;border:1px solid #000;border-radius:10px;font-size:14px;font-weight:600;max-width:max-content}
.promise{background:var(--brand);color:var(--onbrand)}
.promise .wrap>span{display:inline-flex;align-items:center;gap:8px}
.promise .card-icon{position:static;color:inherit;flex:none}
.promise .card-icon svg{width:20px;height:20px}
.promise .wrap{display:flex;justify-content:space-between;gap:18px;padding:18px 0;font-size:14px;font-weight:600;flex-wrap:wrap}

/* ---------- Sections ---------- */
.section{padding:80px 0}
.band{background:var(--wash)}
.intro{text-align:center;max-width:880px;margin:auto}
.tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.intro .tags{justify-content:center}
.tag{border:1px solid #000;border-radius:30px;padding:8px 15px;font-size:14px;background:#fff;text-decoration:none}
a.tag:hover{text-decoration:underline}
.section-head{max-width:780px;margin-bottom:30px}
.section-nav{display:flex;gap:24px;flex-wrap:wrap;padding:20px 0;font-size:14px;font-weight:600}
.section-nav a{white-space:nowrap}
.split{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}
.split.top{align-items:start}
.split.top .eyebrow{margin-top:0}
.statement{font-size:24px;font-weight:600;line-height:1.5}
.note{border-left:5px solid var(--brand);padding:15px 22px;background:var(--wash);margin-top:25px}
.related{display:flex;gap:15px;flex-wrap:wrap}
.related a{display:inline-block;border:1px solid #000;border-radius:8px;padding:12px 18px;text-decoration:none}
.related a:hover{text-decoration:underline}

/* Feature cards */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feature-grid.four{grid-template-columns:repeat(4,1fr)}
.feature-grid.four .card{padding:24px}
.feature-grid.four h3{font-size:22px}
/* Homepage feature index: all ten features, five across, compact; a checkerboard of white and the brand tint */
.feature-grid.five{grid-template-columns:repeat(5,1fr);gap:16px}
.feature-grid.five .card{padding:20px 18px}
.feature-grid.five .card:nth-child(n){background:#fff}
.feature-grid.five .card:nth-child(even){background:var(--wash)}
.feature-grid.five .card .number{margin-bottom:18px}
.feature-grid.five .card-icon{top:18px;right:16px}
.feature-grid.five .card-icon svg{width:28px;height:28px}
.feature-grid.five h3{font-size:18px;line-height:1.25}
.feature-grid.five .card p{font-size:14px;line-height:1.55;margin:10px 0 16px}
.card{padding:28px;border:1px solid #000;border-radius:14px;background:#fff;display:flex;flex-direction:column;align-items:flex-start}
.card:nth-child(2),.card:nth-child(5){background:var(--wash)}
.card:nth-child(3),.card:nth-child(6){background:var(--wash-alt)}
.card .number{font-size:14px;font-weight:700;background:var(--brand);color:var(--onbrand);padding:5px 10px;border-radius:5px;margin-bottom:25px}
/* Icon in the card's top-right corner, level with the number badge (views-2026/icons.cfm) */
.card,.stat,.fee-choice article{position:relative}
/* Icons are black on every brand (owner's choice, 2026-10-09): clear on white, the light tints and every card */
.card-icon{position:absolute;top:22px;right:22px;line-height:0;color:#000}
/* Boxes that open with a heading (behind-the-scenes tools, pricing feature groups): icon above the heading */
.tool .card-icon,.feature-groups .card-icon{position:static;display:block;margin-bottom:14px}
/* Small fee-choice boxes: a smaller icon to the left, any explanation (.source) under the label */
.fee-options div{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center}
.fee-options .card-icon{position:static;grid-row:span 2}
.fee-options .card-icon svg{width:26px;height:26px}
.fee-options .source{grid-column:2}
/* Lists with an icon per item (pricing's Premium panel, referral steps): icon left, text beside it on one line */
ul.with-icons li,ol.with-icons li{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center}
.with-icons .card-icon{position:static;grid-row:span 2}
.with-icons .card-icon svg{width:26px;height:26px}
.feature-list.with-icons li:before{content:none}
.card p{margin:16px 0 22px}
.card a{margin-top:auto;font-weight:600;font-size:14px}
.feature-list{list-style:none;padding:0;margin:22px 0}
.feature-list li{padding:12px 0;border-top:1px solid #000}
.feature-list li:before{content:'\2713  ';font-weight:bold}

/* Platform statistics (homepage) */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat{border:1px solid #000;border-radius:14px;padding:26px 24px;background:#fff;display:flex;flex-direction:column;overflow:hidden}
.stat-figure{font-size:clamp(40px,3.6vw,56px);font-weight:700;line-height:1;letter-spacing:-.04em;color:var(--brand);margin:0}
body.charity .stat-figure,body.club .stat-figure{color:#000}
.stat-label{font-weight:600;font-size:15px;margin:10px 0 0}
.stat-note{font-size:14px;line-height:1.5;margin:12px 0 0;padding-top:12px;border-top:1px solid #000}
.stats-section .small{margin-top:16px}

/* Brand panels */
.shop-panel{background:var(--brand);color:var(--onbrand);padding:35px;border-radius:18px}
.shop-items{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:25px 0}
.shop-items>span{display:flex;align-items:center;gap:10px;border:1px solid currentColor;border-radius:8px;padding:20px 12px;font-weight:600}
/* Icons on brand-coloured panels follow the panel's text colour, not the usual black */
.shop-panel .card-icon,.checkin-panel .card-icon,.year-panel .card-icon,.two-panels .selection .card-icon{color:inherit}
.shop-panel .card-icon{position:static;flex:none}
.shop-panel .card-icon svg{width:24px;height:24px}
.panel-note{font-size:14px;border-top:1px solid currentColor;padding-top:18px}
.finance-panel{background:var(--wash);border:1px solid #000;border-radius:18px;padding:32px}
.finance-panel li{display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:6px 20px;align-items:start;border-top:1px solid #000;padding:15px 0}
/* Numbered steps: a narrow number column so the text sits on the left */
.finance-panel .numbered li{grid-template-columns:1.5em 1fr;gap:6px 12px}
.finance-panel li>strong:last-child{text-align:right}
.finance-panel ul{list-style:none;padding:0;margin:20px 0}
.finance-panel p{margin-top:15px}
.badge{display:inline-block;background:var(--button);color:var(--onbutton);border:1px solid #000;padding:4px 10px;border-radius:20px;font-size:13px;font-weight:600}
.badge.brand{background:var(--brand);color:var(--onbrand)}

/* Fees */
.fees{background:var(--wash);border-radius:22px;padding:44px}
.fee-options{display:grid;gap:12px}
.fee-options div{background:#fff;border:1px solid #000;border-radius:9px;padding:17px 20px;font-weight:600}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.step{border-top:4px solid var(--brand);padding:24px 0;position:relative}
.step .card-icon{top:17px;right:0}
.step h3{margin:15px 0}
.four-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.four-steps article{border-top:5px solid var(--brand);padding:22px 0;position:relative}
.four-steps .card-icon{top:19px;right:0}
.four-steps h3{margin:15px 0}

/* FAQs */
.faq-grid{display:grid;grid-template-columns:.75fr 1fr;gap:70px}
.faqs details{border-top:1px solid #000}
.faqs details:last-child{border-bottom:1px solid #000}
.faqs summary{cursor:pointer;padding:20px 35px 20px 0;font-weight:600;list-style:none;position:relative}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary:after{content:'+';position:absolute;right:5px;top:16px;font-size:24px;line-height:1}
.faqs details[open] summary:after{content:'\2212'}
.faqs p{padding:0 0 24px}

/* Platform screenshots (assets/images/corporate-2026/screenshots/) */
.screenshot{margin:0}
.screenshot img{display:block;width:100%;height:auto;border-radius:18px}
/* A section heading with a screenshot beside it, cards underneath (Finances "Day to day", Sponsors "Three places") */
.head-with-screenshot{margin-bottom:36px}
.head-with-screenshot .section-head{margin-bottom:0}

/* Reviews: one featured quote in a white panel with a brand-coloured quotation mark, the rest as a
   list of pull quotes beside it (a solid brand panel was too strong, owner 2026-10-09) */
.reviews{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:start}
.reviews figure{margin:0}
.reviews blockquote{margin:0}
.reviews figcaption{display:flex;align-items:center;gap:14px;line-height:1.4}
.reviews figcaption img{border-radius:50%;object-fit:contain;background:#fff;border:1px solid #000;flex:none}
.reviews figcaption strong{display:block}
.review-featured{background:#fff;border:1px solid #000;border-radius:18px;padding:40px 40px 34px}
.review-featured .quote-mark{display:block;font-size:96px;line-height:.7;font-weight:700;margin-bottom:6px;color:var(--brand)}
.review-featured blockquote p{font-size:clamp(19px,1.7vw,23px);line-height:1.5;font-weight:500}
.review-featured figcaption{margin-top:28px;padding-top:22px;border-top:1px solid currentColor;font-size:15px}
.review-featured figcaption img{width:56px;height:56px}
.review-list figure{padding:22px 0;border-top:1px solid #000}
.review-list figure:first-child{padding-top:0;border-top:0}
.review-list blockquote p{font-size:16px;line-height:1.6}
.review-list figcaption{margin-top:12px;font-size:14px}
.review-list figcaption img{width:40px;height:40px}

/* Stories */
.quote{font-size:18px;line-height:1.6;max-width:850px}
.story{border-left:6px solid var(--brand);padding-left:28px}
.detail-photo{height:380px;object-fit:cover;border-radius:16px;width:100%}

/* Click-to-play video */
.video-frame{position:relative;aspect-ratio:16/9;border:1px solid #000;border-radius:16px;overflow:hidden;background:#000}
.video-frame img{width:100%;height:100%;object-fit:cover}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.play-button{position:absolute;inset:0;margin:auto;width:76px;height:76px;border-radius:50%;background:#FFCA00;color:#000;border:2px solid #000;display:grid;place-items:center;cursor:pointer;padding:0}
.play-button:hover{transform:scale(1.06)}
.play-button svg{margin-left:3px}

/* Closing */
.closing{background:var(--brand);color:var(--onbrand);text-align:center;padding:65px 24px}
.closing p{max-width:650px;margin:20px auto}

/* ---------- Footer ---------- */
.footer{padding:55px 0 25px}
.footer-grid{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:36px}
.footer a{display:block;font-size:14px;margin:9px 0}
.footer h3{font-size:17px}
.footer .logo{margin-bottom:15px}
.footer .social{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 0;padding:0;list-style:none}
.footer .social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #000;border-radius:50%;margin:0;color:#000;background:#fff}
.footer .social a:hover{background:var(--wash)}
.footer .social svg{display:block}
.legal{margin-top:35px;padding-top:22px;border-top:1px solid #000;font-size:13px}
.legal a{display:inline;margin:0 15px 0 0;font-size:13px}
.legal-links{margin-top:10px}

/* ---------- Pricing page ---------- */
.pricing .hero{padding:42px 0}
.pricing .hero-photo{height:350px}
.pricing .hero h1{font-size:clamp(38px,4vw,58px)}
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.plan{border:2px solid #000;border-radius:18px;padding:34px;display:flex;flex-direction:column}
.plan.premium{border:3px solid var(--brand);background:var(--wash)}
.plan h3{font-size:30px;margin:18px 0 12px}
.price{font-size:52px;letter-spacing:-.04em;font-weight:700;line-height:1.2;margin-top:25px}
.plan .button{width:100%;margin-top:23px}
.plan ul{list-style:none;padding:0;margin:22px 0 0}
.plan li{padding:9px 0;border-top:1px solid #000}
.plan li:before{content:'\2713  ';font-weight:700}
.rate{margin-top:20px;font-size:18px;font-weight:600}
.table-wrap{overflow-x:auto;border:1px solid #000;border-radius:12px}
.price-table{width:100%;border-collapse:collapse;font-size:16px}
.price-table caption{text-align:left;padding:18px;font-weight:600}
.price-table th,.price-table td{text-align:left;padding:18px 15px;border-bottom:1px solid #000;vertical-align:top}
.price-table thead{background:var(--brand);color:var(--onbrand)}
.price-table tbody tr:nth-child(even){background:var(--wash-alt)}
.price-table th[scope=row]{font-weight:500}
.price-table tbody tr:last-child th,.price-table tbody tr:last-child td{border-bottom:0}
.fees-note{font-size:14px;margin:20px 0}
.fee-choice{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fee-choice article{border:1px solid #000;border-radius:13px;padding:27px;background:#fff}
.fee-choice h3{margin:15px 0}
.stripe-box{border:1px solid #000;padding:30px;border-radius:14px;background:var(--wash)}
.stripe-box strong{display:block;font-size:30px}
.feature-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feature-groups article{background:var(--wash);padding:27px;border-radius:12px;border:1px solid #000}
.feature-groups ul{padding-left:20px}
.review-date{font-size:13px;margin-top:22px}

/* ---------- Fundraisers page ---------- */
.concept{border:1px solid #000;border-radius:18px;padding:32px;background:var(--wash)}
.concept h3{margin:15px 0}
/* One size for every panel heading (owner, 2026-10-09). Info panels mark theirs up as h2 for the
   document outline, but they should look like the other panels' h3, not like a section heading. */
.finance-panel>h2{font-size:23px;margin:15px 0}
.concept p{margin-top:16px}
.concept .row{display:flex;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid #000}
.concept .row strong{font-size:22px}
.concept .row span{font-size:15px}
.concept progress{width:100%;height:25px;accent-color:var(--brand);margin-top:22px}
.concept .caption{font-size:13px}
.two-panels{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.two-panels article{border:1px solid #000;border-radius:15px;padding:30px}
.two-panels article:nth-child(2){background:var(--wash)}
.two-panels h3{margin:18px 0}
.two-panels p{margin-bottom:20px}
.step-list{list-style:none;padding:0;margin:0}
.step-list li{padding:17px 0;border-bottom:1px solid #000}
.step-list strong{display:block}
/* No closing rule when the list ends its box; it stays when a caption follows to separate the two */
.step-list:last-child>li:last-child{border-bottom:0;padding-bottom:0}

/* ---------- Events page ---------- */
.event-panel{border:1px solid #000;border-radius:18px;padding:30px;background:var(--wash)}
.event-panel h3{margin:16px 0}
.event-panel .item{background:#fff;border:1px solid #000;border-radius:9px;padding:19px;margin-top:14px}
.event-panel .item.featured{border-left:7px solid var(--brand)}
.event-panel .item strong{display:block;font-size:20px}
.event-panel .item span{font-size:14px}
.event-panel .illustration{font-size:13px;margin-top:17px}
.two-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.two-cards article{border:1px solid #000;padding:30px;border-radius:15px;background:#fff}
.two-cards article:nth-child(2){background:var(--wash)}
.two-cards h3{margin:16px 0}
.two-cards p{margin-bottom:20px}
.example-steps{list-style:none;padding:0;margin:22px 0}
.example-steps li{border-top:1px solid #000;padding:15px 0}

/* ---------- Ticketing page (from the ticketing pack, brought into the shared light style) ---------- */
.shop{background:var(--wash)}
.shop em{color:var(--brand)}
body.charity .shop em,body.club .shop em{color:#000;text-decoration:underline;text-decoration-color:var(--brand);text-decoration-thickness:5px;text-underline-offset:6px}
.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.shop-card{min-height:160px;border:1px solid #000;border-radius:14px;padding:24px;display:flex;flex-direction:column;justify-content:space-between;background:#fff}
.shop-card .symbol{color:#000;line-height:1}
.shop-card h3{font-size:21px}
.shop-bottom{display:flex;gap:30px;justify-content:space-between;align-items:center;border-top:1px solid #000;margin-top:28px;padding-top:24px}
.shop-bottom p{font-size:15px;max-width:620px;margin:0}
.checkout-label{white-space:nowrap;background:var(--button);border:1px solid #000;color:var(--onbutton);padding:9px 15px;border-radius:20px;font-size:14px;font-weight:600}
.checkin-panel{background:var(--brand);color:var(--onbrand);border-radius:18px;padding:36px;border:1px solid #000}
.checkin-panel h3{margin:17px 0}
.checkin-panel ul{list-style:none;padding:0;margin:25px 0 0}
.checkin-panel li{border-top:1px solid currentColor;padding:15px 0;font-size:16px}
.checkin-panel li:last-child{padding-bottom:0}
.checkin-panel p{font-size:14px;margin-top:20px}
.tools{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:30px}
.tool{border:1px solid #000;border-radius:12px;padding:28px;background:#fff}
.tool p{font-size:16px;margin-top:12px}

/* ---------- Finances page (from the Finances handover, restyled to the shared palette) ---------- */
.finances .hero .eyebrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.proof{font-weight:600;margin-top:16px}
.payout-diagram{border:1px solid #000;border-radius:18px;padding:27px 30px 20px;background:#fff;box-shadow:10px 10px 0 var(--wash)}
.diagram-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:12px;letter-spacing:.09em;font-weight:700;margin-bottom:10px;text-transform:uppercase}
.ledger{list-style:none;padding:0;margin:0 0 20px}
.ledger li{display:flex;align-items:center;padding:15px 0;border-bottom:1px solid #000;gap:15px;font-size:15px;font-weight:500}
/* Every ledger line gets the same light brand tint behind a line icon from views-2026/icons.cfm */
.ledger-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:7px;line-height:0;border:1px solid #000;background:var(--wash);flex:none}
.ledger-icon .card-icon{position:static}
.ledger-icon .card-icon svg{width:22px;height:22px}
.ledger .sign{margin-left:auto;font-weight:600;font-size:21px}
.payout-result{display:flex;align-items:center;justify-content:space-between;background:var(--button);color:var(--onbutton);border-radius:8px;padding:15px 18px;font-weight:600;border:1px solid #000}
/* White so the tick stands out on every brand's button colour, yellow included */
.result-tick{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;color:#000;border:1px solid #000}
.payout-diagram>p{font-size:13px;margin-top:15px;text-align:center}
.diagram-caption{font-size:12px;display:block;text-align:center;margin-top:5px}
.reconciliation{display:flex;gap:24px;align-items:center;border-top:1px solid #000;margin-top:65px;padding-top:32px}
.reconciliation .line-icon{font-size:32px;flex:none;background:var(--wash);width:60px;height:60px;display:grid;place-items:center;border-radius:50%;border:1px solid #000}
.reconciliation h3{font-size:19px;font-weight:600;line-height:1.4}
.reconciliation p{font-size:14px;margin-top:8px;max-width:740px}
.reassurance{font-size:12px;font-weight:600;border:1px solid #000;padding:7px 12px;border-radius:5px;white-space:nowrap;margin-left:auto}
.claim-steps{list-style:none;padding:0;margin:28px 0 23px}
.claim-steps li{display:flex;gap:15px;align-items:flex-start;margin-bottom:20px}
.claim-steps li>span{display:grid;place-items:center;background:var(--brand);color:var(--onbrand);border-radius:50%;width:30px;height:30px;flex:none;font-size:13px;font-weight:700;border:1px solid #000}
.claim-steps strong{font-size:15px;line-height:1.4;display:block;padding-top:3px}
.claim-steps p{font-size:14px;margin-top:4px}
.planning-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.planning-grid article{border-radius:14px;padding:37px 40px 32px;border:1px solid #000}
.plan-panel{background:var(--wash)}
.year-panel{background:var(--brand);color:var(--onbrand)}
.panel-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
.feature-number{font-size:37px;line-height:1;font-weight:700}
.planning-grid h3{font-size:29px;line-height:1.3}
.planning-grid p{font-size:15px;margin-top:20px}
.panel-detail{display:flex;gap:13px;margin-top:29px;border-top:1px solid currentColor;padding-top:18px;font-size:12px;font-weight:600;flex-wrap:wrap}
.panel-detail span+span:before{content:'\00B7';margin-right:13px}
.funds{display:grid;grid-template-columns:.85fr 1.5fr;gap:50px;padding:34px 0 0;margin-top:24px;border-top:1px solid #000}
.funds h3{font-size:20px;line-height:1.5;font-weight:600}
.routine-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:35px}
.routine-grid>li{border-top:4px solid var(--brand);padding-top:25px;position:relative}
.routine-grid .card-icon{top:18px;right:0}
.routine-grid li>span{font-size:14px;font-weight:700}
.routine-grid h3{font-size:18px;line-height:1.5;margin:12px 0}
.routine-grid p{font-size:14px}

/* ---------- Registration form ---------- */
.register .hero{padding:48px 0}
.form-card{background:#fff;border:1px solid #000;border-radius:18px;padding:36px;max-width:860px;margin:0 auto}
.form-card h2{font-size:24px;margin:34px 0 16px;padding-top:28px;border-top:1px solid #000}
.form-card .alert+h2,.form-card .small+h2{margin-top:10px;padding-top:0;border-top:0}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 22px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field.full{grid-column:1/-1}
.field label,legend{font-weight:600;font-size:15px}
.field .hint,fieldset .hint{font-size:13px;margin:0}
/* A hint that belongs to a pair of fields: a full-width row, pulled up close to the fields above */
.field-grid>.grid-hint{grid-column:1/-1;font-size:13px;margin:-16px 0 0}
.field input[type=text],.field input[type=email],.field input[type=password],.field select{font:inherit;font-size:16px;padding:12px 14px;border:1px solid #000;border-radius:8px;background:#fff;color:#000;width:100%;min-height:48px}
.field.has-error input,.field.has-error select{border:2px solid #E60080}
.field-error{background:var(--wash);border-left:4px solid #E60080;padding:8px 12px;font-size:14px;border-radius:0 6px 6px 0;margin-top:6px}
.password-wrap{display:flex;gap:8px}
.password-wrap input{flex:1;min-width:0}
.toggle-password{font:inherit;font-size:14px;font-weight:600;border:1px solid #000;background:#fff;border-radius:8px;padding:0 14px;cursor:pointer;min-height:48px;min-width:64px}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{padding:0;margin-bottom:6px}
.check-list{display:grid;gap:12px;margin:14px 0;padding:0;list-style:none}
.check{display:flex;gap:12px;align-items:flex-start;font-size:15px}
.check input{width:24px;height:24px;flex:none;margin:1px 0 0;accent-color:var(--brand)}
.check label{font-weight:500}
.alert{border:2px solid #E60080;background:#fff;border-radius:10px;padding:16px 20px;margin-bottom:24px;font-weight:600}
.notice{border:1px solid #000;border-radius:10px;padding:18px 20px;font-size:14px;background:var(--wash-alt)}
.notice p+p{margin-top:10px}
/* Long notices scroll inside a short box. The outer box keeps the border and rounded corners;
   the inner .notice-body scrolls, inset from the edge so its scroll bar never cuts across a
   corner. tabindex on .notice-body lets keyboard users scroll it. */
.notice.scroll{padding:8px 8px 8px 20px}
.notice.scroll .notice-body{max-height:180px;overflow-y:auto;padding:10px 12px 10px 0}
.web-address{font-size:14px;overflow-wrap:anywhere;margin:0}
.form-card .actions{margin-top:30px}
[hidden]{display:none!important}

/* ---------- Blog ---------- */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post-card{border:1px solid #000;border-radius:14px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.post-card>a img{width:100%;aspect-ratio:16/9;object-fit:cover}
.post-card-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1;gap:10px}
.post-card h3{font-size:21px;line-height:1.3}
.post-card p{margin:0;font-size:15px}
.post-meta{font-size:13px;font-weight:600;margin:0}
.post-more{margin-top:auto;font-weight:600;font-size:14px;padding-top:8px}
.post-header{padding:28px 0 10px;max-width:900px}
.post-header h1{font-size:clamp(32px,3.6vw,50px)}
.post-hero{width:100%;max-height:480px;object-fit:cover;border-radius:16px;margin-top:28px;border:1px solid #000}
.post-body{max-width:780px;margin:40px auto 0;font-size:17px;line-height:1.75}
.post-body h2,.post-body h3,.post-body h4{margin:34px 0 12px;letter-spacing:-.02em}
.post-body h2{font-size:30px}
.post-body h3{font-size:25px}
.post-body h4{font-size:21px}
.post-body h6{font-size:18px;font-weight:600;margin:24px 0 8px}
.post-body p{margin:0 0 16px}
.post-body ul,.post-body ol{margin:0 0 18px;padding-left:26px}
.post-body li{margin-bottom:8px}
.post-body img{max-width:100%;height:auto;border-radius:12px;margin:10px auto}
.post-body a{color:#000}
.post-body .common-button,.post-body button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:13px 23px;border:2px solid #000;border-radius:8px;background:var(--button);color:var(--onbutton);font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.post-body .common-button a,.post-body button a{text-decoration:none;color:#000}
.post-body .table,.post-body table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:15px}
.post-body td,.post-body th{border:1px solid #000;padding:8px 10px;text-align:left;vertical-align:top}
.post-body .table-responsive{overflow-x:auto}
.post-body .highlight-blog,.post-body .post_event{border-left:5px solid var(--brand);background:var(--wash);padding:16px 20px;margin:24px 0;border-radius:0 10px 10px 0}
.post-body .faq-heading{font-size:25px;margin:34px 0 14px}
.post-body .accordian{border:1px solid #000;border-radius:10px;margin-bottom:10px;background:#fff}
.post-body .accordian .question{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 18px;cursor:pointer;font-weight:600}
.post-body .accordian .question h3,.post-body .accordian .accordian-title{font-size:17px;margin:0}
.post-body .accordian .question:after{content:'+';font-size:22px;line-height:1;flex:none}
.post-body .accordian.open .question:after{content:'\2212'}
.post-body .accordian .question svg{display:none}
.post-body .accordian .answer{display:none;padding:0 18px 16px}
.post-body .accordian.open .answer{display:block}
/* Bootstrap utilities the post files were written against */
.post-body .m-0{margin:0}.post-body .mb-0{margin-bottom:0}.post-body .mb-1{margin-bottom:.25rem}.post-body .mb-2{margin-bottom:.5rem}.post-body .mb-3{margin-bottom:1rem}.post-body .mb-4{margin-bottom:1.5rem}.post-body .mt-1{margin-top:.25rem}.post-body .mt-2{margin-top:.5rem}
.post-body .fw-bold{font-weight:700}.post-body .fw-semibold{font-weight:600}.post-body .fs-5{font-size:1.25rem}.post-body .text-center{text-align:center}.post-body .text-capitalize{text-transform:capitalize}
.post-body .img-fluid{max-width:100%;height:auto}.post-body .d-flex{display:flex}.post-body .justify-content-center{justify-content:center}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:50px;padding-top:30px;border-top:1px solid #000}
.post-nav-card{display:flex;flex-direction:column;gap:6px;border:1px solid #000;border-radius:12px;padding:20px 22px;text-decoration:none;background:#fff}
.post-nav-card:hover{background:var(--wash)}
.post-nav-card:last-child{text-align:right}

/* ---------- Legal pages (text built by the root terms/privacy/cookies files) ---------- */
.legal-text{max-width:860px;margin:0 auto;font-size:15px;line-height:1.7}
.legal-text h1{font-size:clamp(34px,4vw,52px)}
.legal-text h2,.legal-text h3,.legal-text h5{font-size:22px;margin:40px 0 14px;letter-spacing:-.02em}
.legal-text h6{font-size:16px;font-weight:700;margin:26px 0 8px;text-transform:uppercase;letter-spacing:.05em}
.legal-text p,.legal-text p.terms{margin:0 0 14px}
.legal-text table{width:100%;border-collapse:collapse;margin:0 0 10px}
.legal-text td{vertical-align:top;padding:2px 10px 2px 0}
.legal-text td[width="5%"]{white-space:nowrap;min-width:48px}
.legal-text .table-wrap{margin:14px 0 24px;background:#fff}
.legal-text .price-table{margin:0;font-size:15px}
.legal-text .price-table th,.legal-text .price-table td{padding:14px 15px;border-bottom:1px solid #000}
.legal-text ul,.legal-text ol{margin:0 0 16px;padding-left:24px}
.legal-text li{margin-bottom:8px}
.legal-contents{border:1px solid #000;border-radius:12px;padding:18px 22px;margin:24px 0 10px;background:var(--wash)}
.legal-contents ol{margin:0;padding-left:22px;columns:2;column-gap:30px}
.legal-contents li{margin-bottom:6px;break-inside:avoid}

/* ---------- Your website ---------- */
.url-display{font-size:clamp(22px,2.6vw,34px);font-weight:600;letter-spacing:-.02em;overflow-wrap:anywhere;border:1px solid #000;border-radius:12px;display:inline-block;padding:12px 22px;background:#fff}
.url-display em{color:var(--brand)}
body.charity .url-display em,body.club .url-display em{color:#000;text-decoration:underline;text-decoration-color:var(--brand);text-decoration-thickness:4px;text-underline-offset:6px}

/* ---------- Comparison page ---------- */
.compare .promise .wrap{justify-content:center;gap:40px}
.operating-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:25px}
.operating-grid span{background:#fff;border:1px solid #000;border-radius:12px;padding:24px 14px;font-weight:600;text-align:center}
.two-panels article.zeffy-panel{border:2px solid #000;border-radius:18px;background:#fff;padding:34px}
.two-panels article.selection{background:var(--brand);color:var(--onbrand);border:1px solid #000;border-radius:18px;padding:34px}
.selection .feature-list li{border-top-color:currentColor}
.selection a:not(.button){text-decoration-color:currentColor}
.source{font-size:13px;display:block;margin-top:12px;font-weight:400}
.comparison-note{font-size:14px;margin:18px 0 0}
.compare-table th[scope=row]{font-weight:600}
.compare-table .own-row{background:var(--wash)}
.compare-table tbody tr:nth-child(even){background:#fff}
.compare-table td:nth-child(2){width:40%}
.fee-options div .source{margin-top:6px}
.sources{padding:40px 0 60px}
.sources details{border:1px solid #000;border-radius:12px;padding:0 22px;background:var(--wash)}
.sources summary{cursor:pointer;padding:18px 40px 18px 0;list-style:none;position:relative}
.sources summary::-webkit-details-marker{display:none}
.sources summary:after{content:'+';position:absolute;right:0;top:14px;font-size:24px;line-height:1}
.sources details[open] summary:after{content:'\2212'}
.sources details[open] summary{border-bottom:1px solid #000;margin-bottom:16px}
.sources p{font-size:14px;margin:0 0 14px}
.sources ul{font-size:14px;columns:2;column-gap:40px;margin:0 0 20px;padding-left:20px}
.sources li{margin:0 0 8px;overflow-wrap:anywhere;break-inside:avoid}

/* ---------- Celebrating impact ---------- */
.impact .hero-art img{max-height:420px}

/* ---------- Responsive ---------- */
@media(max-width:1050px){
  .nav{gap:15px;flex-wrap:wrap;padding:18px 0}
  .nav nav{order:3;width:100%;justify-content:space-between;margin:0}
  .nav>.button{margin-left:auto}
  .hero-grid{gap:28px}
  .feature-grid.five{grid-template-columns:1fr 1fr}
  .hero-photo{height:410px}
  .reassurance{display:none}
}
@media(max-width:950px){
  .feature-grid.four,.feature-grid.five,.four-steps,.routine-grid,.post-grid,.stats{grid-template-columns:1fr 1fr}
  .reviews{grid-template-columns:1fr;gap:36px}
}
@media(max-width:700px){
  .wrap{width:calc(100% - 36px)}
  .nav{min-height:80px;gap:10px}
  /* The logo gives way on very narrow phones (or with large text) so the menu and Register
     buttons stay on the logo's line: its link starts from zero width and takes the space left */
  .nav>a:first-child{flex:1 1 0;min-width:0}
  .logo{height:auto;max-height:60px;max-width:min(180px,100%)}
  .footer .logo{height:56px}
  /* Sized so the longest address (www.charity-hub.co.uk/yourname) stays on one line down to a 360px phone */
  .url-display{font-size:clamp(14px,4.2vw,22px);padding:10px 14px}
  /* A grid column will not shrink below its content, so one wide panel could push the page sideways */
  .split>*{min-width:0}
  /* Shop tiles: two across while they fit, one across on the narrowest phones */
  .shop-panel{padding:26px 22px}
  .shop-items{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
  .shop-items>span{padding:16px 12px;font-size:15px}
  .nav>.button{padding:10px 12px;font-size:13px;min-height:44px}
  .nav .hide-narrow{display:none}
  /* Hamburger button sits hard against the right edge, with the Register button beside it */
  .mobile-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #000;background:#fff;color:#000;border-radius:8px;padding:0;cursor:pointer;margin-left:auto;flex:none}
  .mobile-toggle .icon-close{display:none}
  .mobile-toggle[aria-expanded=true]{background:#000;color:#fff}
  .mobile-toggle[aria-expanded=true] .icon-menu{display:none}
  .mobile-toggle[aria-expanded=true] .icon-close{display:block}
  .nav>.button{margin-left:0}
  /* Open mobile menu: one flat list with dividers; the Features group expands in place, indented */
  .nav nav{display:none;flex-direction:column;align-items:stretch;gap:0;width:100%;margin:0;padding:6px 0 10px;border-top:1px solid #000;font-size:16px}
  .nav nav.open{display:flex}
  .nav nav>a,.nav summary{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid #000}
  .nav details{width:100%}
  .nav details[open] summary{border-bottom:0}
  .dropdown{position:static;min-width:0;border:0;border-radius:0;background:transparent;padding:0 0 10px 18px;margin-bottom:0;border-bottom:1px solid #000;gap:0}
  .dropdown a{padding:10px 0;font-size:15px;font-weight:500}
  .dropdown a[aria-current=page],.nav nav>a[aria-current=page]{font-weight:700}
  .hero{padding:35px 0}
  .hero-grid,.split,.faq-grid,.plan-grid,.fee-choice,.feature-groups,.two-panels,.two-cards,.four-steps,.feature-grid.four,.planning-grid,.funds{grid-template-columns:1fr}
  .hero-grid,.split,.faq-grid{gap:35px}
  .hero-photo{height:330px}
  .hero h1{font-size:43px}
  .promise .wrap{display:grid;grid-template-columns:1fr 1fr;font-size:13px}
  .section{padding:50px 0}
  .feature-grid,.feature-grid.five,.steps{grid-template-columns:1fr}
  .review-featured{padding:28px 24px 24px}
  .review-featured .quote-mark{font-size:72px}
  /* Two across while "Merchandise" fits, one across on the narrowest phones */
  .shop-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .shop-card{padding:18px;min-height:130px}
  .shop-card h3{font-size:17px}
  .shop-bottom{align-items:flex-start;flex-direction:column;gap:18px}
  .tools{grid-template-columns:1fr}
  .fees{padding:28px 22px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid>div:first-child{grid-column:1/-1}
  .hero-visual figcaption{margin:-25px 14px 0}
  .quote{font-size:17px}
  .section-nav{gap:12px 18px}
  .plan{padding:27px}
  .price{font-size:46px}
  .price-table th,.price-table td{padding:13px 9px;font-size:14px}
  .price-table{min-width:440px}
  .pricing .hero-photo{height:285px}
  .pricing .hero h1{font-size:40px}
  .concept,.event-panel{padding:24px}
  .concept .row{gap:14px;padding:14px 0}
  .concept .row span{font-size:14px}
  .concept .row strong{font-size:17px;flex:none;white-space:nowrap}
  .concept h3,.finance-panel>h2,.event-panel h3,.checkin-panel h3,.shop-panel h3{font-size:20px}
  .checkin-panel{padding:28px}
  .planning-grid article{padding:28px}
  .reconciliation{align-items:flex-start;margin-top:45px}
  .routine-grid{grid-template-columns:1fr 1fr;gap:30px 24px}
  .field-grid{grid-template-columns:1fr}
  .form-card{padding:24px 18px}
  .post-grid,.post-nav{grid-template-columns:1fr}
  .stats{gap:12px}
  /* Stat cards are too narrow on phones to share a line with the figure: icon sits above it */
  .stat .card-icon{position:static;margin-bottom:12px}
  .stat{padding:18px 16px;border-radius:12px}
  .stat-figure{font-size:30px}
  .stat-label{font-size:13px;line-height:1.35;margin-top:6px}
  .stat-note{font-size:13px;margin-top:10px;padding-top:10px}
  .finance-panel li{grid-template-columns:1fr}
  .finance-panel li>strong:last-child{text-align:left}
  .operating-grid{grid-template-columns:1fr 1fr}
  .sources ul{columns:1}
  .compare-table{min-width:680px}
  .post-nav-card:last-child{text-align:left}
  .legal-contents ol{columns:1}
  .post-body{font-size:16px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{.nav nav,.actions,.button,.mobile-toggle,.skip{display:none}.section{padding:30px 0}.hero-photo{height:300px}details>p{display:block}details,.card,.tool,.plan{break-inside:avoid}}