/* =============================================================================================
 * COMMUNITY HELPER — public site stylesheet.
 *
 * This is the whole visual layer for the anonymous marketing surface. It replaces the old
 * site's Tailwind-generated app.css: the utility-class markup was rewritten into the semantic
 * classes below, so there is no framework, no build step, and no generated file to regenerate.
 *
 * RULES THIS FILE LIVES UNDER
 *   * wwwroot/ds/ is NEVER edited (README rule 14). Everything here composes on top of it, the
 *     same relationship portal.css has to the authenticated shell.
 *   * The CSP is 'self'-only with no 'unsafe-inline' (portal off), so every rule the site needs
 *     has to exist HERE — a style="…" attribute in a .razor is both blocked by the browser and
 *     build-broken by InlineStyleGuardrailTests.
 *   * Everything is scoped under .site-shell so the design system's own palette, and the
 *     portal's, are untouched. The public surface is LIGHT-ONLY by design: no
 *     prefers-color-scheme block, no [data-theme] block, no theme toggle.
 *
 * BREAKPOINTS are the old site's custom ones, not Tailwind's defaults:
 *     sm 480px   md 768px   lg 976px
 * ============================================================================================= */

/* ---------------------------------------------------------------------------------------------
 * Poppins 300–800, latin, self-hosted from /fonts. Carried over from the old
 * tools/tailwind/input.css unchanged — same files, same weights, same font-display.
 * ------------------------------------------------------------------------------------------- */

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("/fonts/poppins-300.woff2") format("woff2");
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/poppins-400.woff2") format("woff2");
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/poppins-500.woff2") format("woff2");
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/poppins-600.woff2") format("woff2");
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/poppins-700.woff2") format("woff2");
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("/fonts/poppins-800.woff2") format("woff2");
}

/* ---------------------------------------------------------------------------------------------
 * Palette. Every value is lifted from the old tailwind.blazor.config.js `colors` map — only the
 * entries the site actually uses. Scoped to .site-shell so the design system's tokens (and the
 * portal's) keep their own values everywhere else.
 * ------------------------------------------------------------------------------------------- */

.site-shell {
    /* brand */
    --ch-violet: #7800FF; /* violet-bright   */
    --ch-violet-80: rgba(120, 0, 255, .8);
    --ch-violet-40: rgba(120, 0, 255, .4);
    --ch-pink: #FB0874; /* pink-bright     */
    --ch-pink-80: rgba(251, 8, 116, .8);
    --ch-purple-bright: #9700CD;
    --ch-purple-bright-80: rgba(151, 0, 205, .8);
    --ch-purple-deep: #5C017D;

    /* ink + surfaces */
    --ch-ink: #222222; /* black-soft      */
    --ch-ink-80: rgba(34, 34, 34, .8);
    --ch-ink-40: rgba(34, 34, 34, .4);
    --ch-white: #FFFFFF;
    --ch-white-60: rgba(255, 255, 255, .6);
    --ch-white-80: rgba(255, 255, 255, .8);
    --ch-blue-light: #F0F6FF;
    --ch-lavender: #F9F5FF;
    --ch-gray-light: #EFEFEF;
    --ch-gray-lightest: #F0F0F0;
    --ch-gray-smoke: #F5F5F5;
    --ch-gray-50: #F9FAFB; /* blue-alice      */
    --ch-gray-cool: #E5E7EB;
    --ch-gray-slate: #6C757D;
    --ch-gray-base: #959595;

    /* accents */
    --ch-red: #DC3545; /* red-bold        */
    --ch-red-pale: #F9DEDE;
    --ch-green: #0AA548; /* green-bright    */
    --ch-green-light: #EEFDF7;
    --ch-blue-vivid: #007BFF;
    --ch-yellow-dark: #FFC107;
    --ch-violet-100: #EDE9FE;
    --ch-violet-700: #6D28D9;
    --ch-google-red: #DB4437;
    --ch-gmail-red: #EF4444;
    --ch-mosque-pink: #BE185D;
    --ch-link-blue: #2563EB;
    --ch-legal-ink: #374151;

    /* The hero scrim over every interior page's banner image: purple-neon-80 → purple-neon-23. */
    --ch-hero-scrim: linear-gradient(to bottom, #7800FFD6, #7800FF3B);

    /* elevation — the two named shadows plus the Tailwind defaults the markup used */
    --ch-shadow-elevated: 0 8px 20px #00000029;
    --ch-shadow-soft-card: 0 6px 18px rgba(0, 0, 0, .16), 0 8px 24px rgba(0, 0, 0, .12);
    --ch-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);
    --ch-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
    --ch-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
    --ch-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);

    /* gradients used in three places each, so they are named once */
    --ch-panel-gradient: linear-gradient(to bottom, var(--ch-blue-light), var(--ch-lavender));
    --ch-banner-gradient: linear-gradient(to right, var(--ch-blue-light), var(--ch-lavender));
}

/* ---------------------------------------------------------------------------------------------
 * Type reset.
 *
 * THE HEADING RULES ARE LOAD-BEARING, not tidiness. ds/tokens/base.css sets `h1 { font:
 * var(--type-h1) }` — the `font` SHORTHAND, which carries font-family. Without restating it
 * here every heading on the public site would render in the design system's display face
 * (Fraunces) while the body correctly showed Poppins, and the mismatch is subtle enough to
 * ship unnoticed.
 * ------------------------------------------------------------------------------------------- */

.site-shell {
    display: block;
    min-height: 100vh;
    font-family: "Poppins", Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ch-ink);
    background: var(--ch-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* html { scroll-behavior: smooth } — carried verbatim from input.css. The home page's
   #programs / #contribution hero anchors depend on it. */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

.site-shell h1,
.site-shell h2,
.site-shell h3,
.site-shell h4,
.site-shell h5,
.site-shell h6 {
    margin: 0;
    font: inherit;
    font-family: "Poppins", Arial, Helvetica, sans-serif;
    color: inherit;
    letter-spacing: normal;
    text-wrap: balance;
}

.site-shell p,
.site-shell ul,
.site-shell ol,
.site-shell figure {
    margin: 0;
}

.site-shell ul,
.site-shell ol {
    padding: 0;
    list-style: none;
}

.site-shell a {
    text-decoration: none;
    text-decoration-color: currentColor;
    transition: color .3s ease-in-out;
}

.site-shell a:not(.ch-btn):not(.ch-anchor-btn) {
    color: inherit;
}

.site-shell a:not(.ch-btn):not(.ch-anchor-btn):hover {
    color: inherit;
}

.site-shell img,
.site-shell svg {
    display: block;
    max-width: 100%;
}

.site-shell button:not(.ch-btn) {
    font: inherit;
    color: inherit;
    border: 0;
    background: none;
}

/* Number-input spinner removal, autofill reset and the custom scrollbar — carried verbatim
   from the old input.css. */
.site-shell input::-webkit-outer-spin-button,
.site-shell input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.site-shell input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.site-shell input:-webkit-autofill {
    background-color: transparent !important;
    color: inherit !important;
}

.ch-scroll-x::-webkit-scrollbar {
    height: 6px;
}

.ch-scroll-x::-webkit-scrollbar-track {
    background: #F1F5F9;
    border-radius: 10px;
}

.ch-scroll-x::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 10px;
}

.ch-scroll-x::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

.ch-scroll-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.ch-scroll-hide::-webkit-scrollbar {
    display: none;
}

/* Icon sizing. The icon components take no height/width props — a per-instance size would have
   to be an inline style, which the CSP blocks and InlineStyleGuardrailTests build-breaks. */
.ch-icon-12 {
    width: 12px;
    height: 12px;
}

.ch-icon-16 {
    width: 16px;
    height: 16px;
}

.ch-icon-20 {
    width: 20px;
    height: 20px;
}

.ch-icon-24 {
    width: 24px;
    height: 24px;
}

.ch-icon-28 {
    width: 28px;
    height: 28px;
}

.ch-icon-32 {
    width: 32px;
    height: 32px;
}

/* The FaGoogle brand red on /privacy-policy. A class, never a colour attribute. */
.ch-icon-google {
    color: var(--ch-google-red);
}

/* Screen-reader-only text (the old markup's `sr-only`). */
.ch-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------------------------------------
 * Layout primitives.
 *
 * .ch-container reproduces Tailwind's `container mx-auto px-6 lg:px-12` under the old site's
 * CUSTOM screens (sm 480 / md 768 / lg 976), not Tailwind's stock ones — the max-width steps
 * below are those breakpoints.
 * ------------------------------------------------------------------------------------------- */

.ch-container {
    width: 100%;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

@media (min-width: 480px) {
    .ch-container {
        max-width: 480px;
    }
}

@media (min-width: 768px) {
    .ch-container {
        max-width: 768px;
    }
}

@media (min-width: 976px) {
    .ch-container {
        max-width: 976px;
        padding-inline: 3rem;
    }
}

@media (min-width: 1280px) {
    .ch-container {
        max-width: 1280px;
    }
}

@media (min-width: 1536px) {
    .ch-container {
        max-width: 1536px;
    }
}

@media (min-width: 2200px) {
    .ch-container {
        max-width: 2200px;
    }
}

/* <Section> — bg-white text-black-soft py-6 */
.ch-section {
    background: var(--ch-white);
    color: var(--ch-ink);
    padding-block: 1.5rem;
}

/* <PageContainer> — the gradient rounded panel used by the stubs and the 404 */
.ch-panel {
    background: var(--ch-panel-gradient);
    border-radius: .75rem;
    padding: 1.5rem;
}

/* <HeroSection> inner row */
.ch-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

@media (min-width: 976px) {
    .ch-hero {
        flex-direction: row;
    }
}

/* ---------------------------------------------------------------------------------------------
 * Buttons.
 *
 * One base plus the nine ButtonVariant colours, each in solid and outline form — the exact
 * pairs the old Button.razor switch produced. Size/shape live in purpose-named modifiers
 * rather than a utility zoo, because every call site in the old markup used one of five shapes.
 *
 * `display: flex` (not inline-flex) is deliberate: the old base class was `flex`, which makes
 * the button a block-level flex container. Call sites rely on that — inside a flex row it
 * shrinks to content, and stood alone it fills its column.
 * ------------------------------------------------------------------------------------------- */

.ch-btn {
    display: flex;
    min-width: fit-content;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    white-space: nowrap;
    border: 0;
    border-radius: .375rem;
    padding: .5rem 1.25rem;
    font-family: inherit;
    font-size: .625rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    transition: background-color .5s, color .5s, border-color .5s;
}

.ch-btn:disabled,
.ch-btn.is-disabled {
    pointer-events: none;
    opacity: .5;
}

/* --- solid variants --- */
.ch-btn--purple {
    background: var(--ch-purple-bright);
    color: var(--ch-white);
}

.ch-btn--purple:hover {
    background: var(--ch-purple-bright-80);
    color: var(--ch-white);
}

.ch-btn--green {
    background: var(--ch-green);
    color: var(--ch-white);
}

.ch-btn--green:hover {
    background: rgba(10, 165, 72, .8);
    color: var(--ch-white);
}

.ch-btn--violet {
    background: var(--ch-violet);
    color: var(--ch-white);
}

.ch-btn--violet:hover {
    background: var(--ch-violet-80);
    color: var(--ch-white);
}

.ch-btn--orange {
    background: var(--ch-red);
    color: var(--ch-white);
}

.ch-btn--orange:hover {
    background: rgba(220, 53, 69, .8);
    color: var(--ch-white);
}

.ch-btn--pink {
    background: var(--ch-pink);
    color: var(--ch-white);
}

.ch-btn--pink:hover {
    background: var(--ch-pink-80);
    color: var(--ch-white);
}

.ch-btn--gray {
    background: var(--ch-gray-slate);
    color: var(--ch-white);
}

.ch-btn--gray:hover {
    background: rgba(108, 117, 125, .8);
    color: var(--ch-white);
}

.ch-btn--black {
    background: var(--ch-ink);
    color: var(--ch-white);
}

.ch-btn--black:hover {
    background: var(--ch-ink-80);
    color: var(--ch-white);
}

.ch-btn--blue {
    background: var(--ch-blue-vivid);
    color: var(--ch-white);
}

.ch-btn--blue:hover {
    background: rgba(0, 123, 255, .8);
    color: var(--ch-white);
}

.ch-btn--white {
    background: var(--ch-white);
    color: var(--ch-ink);
    box-shadow: var(--ch-shadow);
}

.ch-btn--white:hover {
    background: var(--ch-white-80);
    color: var(--ch-ink);
}

/* --- outline variants --- */
.ch-btn--outline {
    border: 1px solid transparent;
    background: var(--ch-white);
}

.ch-btn--outline:hover {
    background: var(--ch-gray-lightest);
}

.ch-btn--outline.ch-btn--purple {
    border-color: var(--ch-purple-bright);
    color: var(--ch-purple-bright);
}

.ch-btn--outline.ch-btn--purple:hover {
    background: var(--ch-gray-lightest);
    color: var(--ch-purple-bright);
}

.ch-btn--outline.ch-btn--green {
    border-color: var(--ch-green);
    color: var(--ch-green);
}

.ch-btn--outline.ch-btn--green:hover {
    background: var(--ch-gray-lightest);
    color: var(--ch-green);
}

.ch-btn--outline.ch-btn--violet {
    border-color: var(--ch-violet);
    color: var(--ch-violet);
}

.ch-btn--outline.ch-btn--violet:hover {
    background: var(--ch-gray-lightest);
    color: var(--ch-violet);
}

.ch-btn--outline.ch-btn--orange {
    border-color: var(--ch-red);
    color: var(--ch-red);
}

.ch-btn--outline.ch-btn--orange:hover {
    background: var(--ch-gray-lightest);
    color: var(--ch-red);
}

.ch-btn--outline.ch-btn--pink {
    border-color: var(--ch-pink);
    color: var(--ch-pink);
}

.ch-btn--outline.ch-btn--pink:hover {
    background: var(--ch-gray-lightest);
    color: var(--ch-pink);
}

.ch-btn--outline.ch-btn--gray {
    border-color: var(--ch-gray-slate);
    color: #000000;
}

.ch-btn--outline.ch-btn--gray:hover {
    background: var(--ch-gray-lightest);
    color: #000000;
}

.ch-btn--outline.ch-btn--black {
    border-color: var(--ch-ink);
    color: var(--ch-ink);
}

.ch-btn--outline.ch-btn--black:hover {
    background: var(--ch-gray-lightest);
    color: var(--ch-ink);
}

.ch-btn--outline.ch-btn--blue {
    border-color: var(--ch-blue-vivid);
    color: var(--ch-blue-vivid);
}

.ch-btn--outline.ch-btn--blue:hover {
    background: var(--ch-gray-lightest);
    color: var(--ch-blue-vivid);
}

.ch-btn--outline.ch-btn--white {
    border-color: var(--ch-white);
    background: transparent;
    color: var(--ch-white);
    box-shadow: none;
}

.ch-btn--outline.ch-btn--white:hover {
    background: transparent;
    color: var(--ch-gray-lightest);
}

/* --- shapes: one per call-site family in the old markup --- */

/* header/nav pills */
.ch-btn--nav {
    height: 2.5rem;
    border-radius: 9999px;
    font-size: .75rem;
}

.ch-btn--nav.ch-btn--outline {
    border-width: 2px;
}

/* mobile-overlay pills — full width, larger type */
.ch-btn--nav-mobile {
    width: 100%;
    border-radius: 9999px;
    padding: .75rem 1.5rem;
    font-size: 1rem;
}

.ch-btn--nav-mobile.ch-btn--outline {
    border-width: 2px;
}

/* footer "Contribute" */
.ch-btn--footer {
    width: 8rem;
    height: 2.5rem;
    border-radius: 9999px;
    font-size: .875rem;
}

/* card CTAs (contribution cards, flip-card "Explore More") */
.ch-btn--card {
    width: 100%;
    height: 2.5rem;
    border-radius: 9999px;
    font-size: .75rem;
    font-weight: 500;
}

.ch-btn--flip {
    width: 100%;
    height: 2.5rem;
    border-radius: 9999px;
    font-size: .75rem;
}

/* form submits */
.ch-btn--submit {
    width: 100%;
    height: 2.75rem;
    border-radius: .5rem;
    font-size: .875rem;
    font-weight: 600;
}

.ch-btn--inline {
    padding: .625rem 1rem;
    font-size: .875rem;
    font-weight: 700;
}

/* Anchor-styled CTAs on the hero — an <a>, not a button, because they are in-page links. */
.ch-anchor-btn {
    display: flex;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9999px;
    padding-inline: 1.25rem;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .5s;
}

.ch-anchor-btn--violet {
    background: var(--ch-violet);
    color: var(--ch-white);
}

.ch-anchor-btn--violet:hover {
    background: var(--ch-violet-80);
    color: var(--ch-white);
}

.ch-anchor-btn--outline {
    border: 2px solid var(--ch-purple-bright);
    background: var(--ch-white);
    color: var(--ch-purple-bright);
}

.ch-anchor-btn--outline:hover {
    background: var(--ch-gray-lightest);
    color: var(--ch-purple-bright);
}

/* ---------------------------------------------------------------------------------------------
 * Header.
 *
 * The desktop dropdown and the mobile overlay are CHECKBOX toggles, not JS state: a hidden
 * (but focusable) checkbox plus <label> triggers, so both menus open, close and are keyboard
 * operable with scripting entirely disabled. site.js only adds the two conveniences CSS cannot
 * express — close-on-outside-click and close-on-Escape.
 * ------------------------------------------------------------------------------------------- */

.ch-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--ch-white);
    color: var(--ch-ink);
    box-shadow: var(--ch-shadow-md);
}

.ch-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: .5rem;
}

.ch-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.ch-logo img {
    width: 200px;
    height: auto;
}

/* The toggles themselves: focusable for keyboard users, invisible to everyone else. */
.ch-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

/* --- burger + mobile overlay (below md) --- */

.ch-burger {
    display: block;
    cursor: pointer;
    z-index: 50;
    color: var(--ch-ink);
}

.ch-burger svg {
    width: 1.5rem;
    height: 1.5rem;
}

.ch-menu-toggle:checked ~ .ch-burger {
    display: none;
}

.ch-toggle:focus-visible + .ch-burger,
.ch-toggle:focus-visible + .ch-dd-label,
.ch-toggle:focus-visible + .ch-mobile-link {
    outline: 2px solid var(--ch-violet);
    outline-offset: 2px;
}

.ch-mobile-menu {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: var(--ch-white);
    overflow-y: auto;
}

.ch-menu-toggle:checked ~ .ch-mobile-menu {
    display: block;
}

.ch-mobile-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    cursor: pointer;
    color: var(--ch-ink);
}

.ch-mobile-close svg {
    width: 1.5rem;
    height: 1.5rem;
}

.ch-mobile-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding-inline: 1.5rem;
}

.ch-mobile-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 2rem;
    font-weight: 700;
    gap: 1.5rem;
}

.ch-mobile-list > li {
    width: 100%;
    text-align: center;
}

.ch-mobile-link {
    display: block;
    padding: .75rem 1rem;
    font-size: 1.125rem;
    transition: color .3s ease-in-out;
}

.ch-mobile-link:hover {
    color: var(--ch-violet);
}

.ch-mobile-link.is-active {
    color: var(--ch-violet);
}

/* the dropdown trigger form of the same link — a <label>, so it needs the flex row the
   chevron sits in (site.css sets svg { display: block }, which kills inline flow) */
.ch-mobile-link--group {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}

.ch-mobile-group {
    width: 100%;
}

.ch-mobile-sub {
    display: none;
    width: 100%;
    margin-top: .5rem;
    padding-block: .5rem;
    border-radius: .375rem;
    background: var(--ch-gray-50);
}

.ch-toggle:checked ~ .ch-mobile-sub {
    display: block;
}

.ch-mobile-sub a {
    display: block;
    padding: .5rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    transition: background-color .3s, color .3s;
}

.ch-mobile-sub a:hover {
    background: var(--ch-violet-100);
}

.ch-mobile-sub a.is-active {
    background: var(--ch-violet-100);
    color: var(--ch-violet-700);
}

.ch-mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    padding-inline: 2rem;
}

/* --- desktop nav (md and up) --- */

.ch-nav {
    display: none;
    align-items: center;
}

.ch-nav-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
}

.ch-nav-item {
    position: relative;
}

.ch-nav-link,
.ch-dd-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .5rem;
    font-size: .75rem;
    border-bottom: 4px solid transparent;
    cursor: pointer;
    user-select: none;
    transition: color .3s ease-in-out, border-color .3s ease-in-out, border-width .3s ease-in-out;
}

.ch-nav-link:hover,
.ch-dd-label:hover {
    border-bottom-width: 2px;
    border-bottom-color: var(--ch-violet);
}

.ch-nav-link.is-active,
.ch-dd-label.is-active {
    color: var(--ch-violet);
    border-bottom-color: var(--ch-violet);
}

.ch-nav-chevron {
    width: 10px;
    height: 10px;
    margin-left: .25rem;
    transform: rotate(180deg);
    transition: transform .3s;
}

.ch-mobile-chevron {
    width: .75rem;
    height: .75rem;
    margin-left: .75rem;
    transform: rotate(180deg);
    transition: transform .3s;
}

.ch-toggle:checked + .ch-mobile-link .ch-mobile-chevron {
    transform: rotate(0deg);
}

.ch-toggle:checked + .ch-dd-label .ch-nav-chevron {
    transform: rotate(0deg);
}

.ch-dropdown {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: .5rem;
    width: 14rem;
    padding: .5rem;
    border-radius: .375rem;
    background: var(--ch-white);
    box-shadow: var(--ch-shadow-md);
    z-index: 50;
}

.ch-toggle:checked ~ .ch-dropdown {
    display: block;
}

.ch-dropdown a {
    display: block;
    padding: .5rem .75rem;
    font-size: .75rem;
    font-weight: 500;
    border-radius: .375rem;
    transition: background-color .3s, color .3s;
}

.ch-dropdown a:hover {
    background: var(--ch-violet-100);
}

.ch-dropdown a.is-active {
    background: var(--ch-violet-100);
    color: var(--ch-violet-700);
}

.ch-nav-actions {
    display: flex;
    flex-direction: row;
    gap: .5rem;
    margin-left: 1.5rem;
}

@media (min-width: 768px) {
    .ch-burger,
    .ch-mobile-menu,
    .ch-menu-toggle:checked ~ .ch-mobile-menu {
        display: none;
    }

    .ch-nav {
        display: flex;
    }
}

/* ---------------------------------------------------------------------------------------------
 * Footer.
 * ------------------------------------------------------------------------------------------- */

.ch-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 480px) {
    .ch-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 976px) {
    .ch-footer-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.ch-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    grid-column: span 2;
}

.ch-footer-brand img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.ch-footer-brand h3 {
    margin-top: .5rem;
    font-size: 1.125rem;
    font-weight: 800;
}

.ch-footer-brand p {
    font-size: .875rem;
    font-weight: 500;
}

.ch-footer-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ch-footer-col h3 {
    font-size: 1.125rem;
    font-weight: 700;
}

.ch-footer-links {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    font-size: .75rem;
}

.ch-footer-links a {
    font-weight: 500;
}

.ch-footer-links a:hover {
    color: var(--ch-gray-slate);
}

.ch-social-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 500;
}

.ch-social-link img {
    width: 12px;
    height: 12px;
}

.ch-social-link:hover {
    color: var(--ch-gray-slate);
}

.ch-copyright {
    background: var(--ch-white);
    color: var(--ch-ink);
    padding: .5rem;
}

@media (min-width: 768px) {
    .ch-copyright {
        padding: 1.5rem;
    }
}

.ch-copyright-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: .5rem;
}

@media (min-width: 768px) {
    .ch-copyright-inner {
        font-size: .875rem;
    }
}

/* ---------------------------------------------------------------------------------------------
 * Cards.
 * ------------------------------------------------------------------------------------------- */

/* <CardsSection> */
.ch-cards-wrap {
    display: flex;
    gap: .75rem;
}

.ch-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
}

@media (min-width: 768px) {
    .ch-cards--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ch-cards--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ch-cards--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ch-cards--5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .ch-cards--6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.ch-cards--padded {
    padding-inline: 1rem;
}

@media (min-width: 768px) {
    .ch-cards--padded {
        padding-inline: 5rem;
    }
}

/* --- <FlipCard>: CSS-ONLY, no circuit ---------------------------------------------------------
 *
 * The old card flipped on CLICK, which needed an Interactive Server circuit for a boolean —
 * and forced the whole home page interactive, because a RenderFragment (the card image) cannot
 * be passed across a static→interactive render-mode boundary. Flipping on :hover and
 * :focus-within removes both problems at once and keeps the card keyboard-reachable: tabbing
 * to the "Explore More" link inside the back face triggers :focus-within, which reveals it.
 * ------------------------------------------------------------------------------------------- */

.ch-flip-card {
    position: relative;
    perspective: 1000px;
    width: 100%;
    max-width: 24rem;
    min-height: 28rem;
    border-radius: 1rem;
    background: var(--ch-blue-light);
    color: var(--ch-ink);
    border: 1px solid var(--ch-gray-light);
}

.ch-flip-inner {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform .5s;
}

.ch-flip-card:hover .ch-flip-inner,
.ch-flip-card:focus-within .ch-flip-inner {
    transform: rotateY(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .ch-flip-inner {
        transition: none;
    }
}

.ch-flip-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: var(--ch-blue-light);
    color: var(--ch-ink);
}

.ch-flip-front {
    border: 1px solid var(--ch-gray-light);
}

.ch-flip-back {
    transform: rotateY(180deg);
    box-shadow: var(--ch-shadow-elevated);
    padding: 1rem;
    justify-content: space-between;
    overflow-y: auto;
}

@media (min-width: 768px) {
    .ch-flip-back {
        padding: 2rem;
    }
}

.ch-flip-hint {
    position: absolute;
    bottom: .75rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    z-index: 20;
    transition: opacity .3s;
}

.ch-flip-card:hover .ch-flip-hint,
.ch-flip-card:focus-within .ch-flip-hint {
    opacity: 0;
}

.ch-flip-hint > span {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--ch-white-60);
    color: var(--ch-ink);
    font-size: 11px;
    font-weight: 600;
    padding: .5rem 1rem;
    border-radius: 9999px;
    box-shadow: var(--ch-shadow-sm);
}

.ch-flip-label {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 800;
    text-align: center;
}

.ch-flip-media {
    position: relative;
    width: 100%;
    height: 100%;
    flex-shrink: 0;
}

.ch-flip-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ch-flip-copy {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.ch-flip-copy h3 {
    font-size: 1.25rem;
    font-weight: 800;
    padding-block: .75rem;
}

.ch-flip-copy p {
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.625;
    margin-bottom: .75rem;
}

.ch-flip-actions {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    justify-content: center;
}

/* --- <SimpleCard> --- */
.ch-simple-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    max-width: 24rem;
    text-align: left;
    overflow: hidden;
    border-radius: 1rem;
    background: var(--ch-panel-gradient);
    color: var(--ch-ink);
    box-shadow: var(--ch-shadow-elevated);
    transition: all .3s;
}

.ch-simple-card-media {
    margin-bottom: .75rem;
}

.ch-simple-card h3 {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.25;
}

.ch-simple-card-desc {
    margin-top: .5rem;
    font-size: .75rem;
    font-style: italic;
    line-height: 1.25;
    flex: 1 1 0%;
}

.ch-simple-card-sub {
    margin-top: .75rem;
    font-size: .75rem;
}

.ch-simple-card-sub > :first-child {
    font-weight: 700;
}

.ch-simple-card-sub > :nth-child(2) {
    font-weight: 600;
}

/* --- <ContributionCard> --- */
.ch-contribution-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: 24rem;
    text-align: left;
    overflow: hidden;
    border-radius: 1rem;
    background: var(--ch-white);
    color: var(--ch-ink);
    box-shadow: var(--ch-shadow-elevated);
    transition: all .3s;
}

.ch-contribution-card-media {
    position: relative;
    width: 100%;
    height: 12rem;
    flex-shrink: 0;
}

.ch-contribution-card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ch-contribution-card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem 2rem;
}

.ch-contribution-card-label {
    display: block;
    margin-top: 1rem;
    font-size: 1.125rem;
    font-weight: 800;
}

.ch-contribution-card-desc {
    display: block;
    flex-grow: 1;
    margin-top: 1rem;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.625;
}

.ch-contribution-card-action {
    width: 100%;
    margin-top: 1rem;
}

/* ---------------------------------------------------------------------------------------------
 * Home page.
 * ------------------------------------------------------------------------------------------- */

.ch-hero-copy {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 2rem;
}

@media (min-width: 976px) {
    .ch-hero-copy {
        align-items: flex-start;
    }
}

.ch-hero-headline {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.ch-hero-title {
    margin: 0;
    line-height: 1.15;
}

/* Line 1: Empowering Communities (Length perfectly matches Line 2) */
.ch-hero-title-main,
.ch-hero-title > span:first-child {
    display: block;
    margin-bottom: .5rem;
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--ch-violet);
    white-space: nowrap;
}

@media (min-width: 480px) {
    .ch-hero-title-main,
    .ch-hero-title > span:first-child {
        font-size: 1.75rem;
    }
}

@media (min-width: 768px) {
    .ch-hero-title-main,
    .ch-hero-title > span:first-child {
        font-size: 1.95rem;
    }
}

@media (min-width: 976px) {
    .ch-hero-title-main,
    .ch-hero-title > span:first-child {
        font-size: 2.08rem;
    }
}

@media (min-width: 1280px) {
    .ch-hero-title-main,
    .ch-hero-title > span:first-child {
        font-size: 2.2rem;
    }
}

/* Line 2: with Free Tools & Complete Privacy (On 2nd line right below H1) */
.ch-hero-subtitle {
    display: block;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ch-ink);
    white-space: nowrap;
}

.ch-hero-title > span:not(:first-child) {
    display: inline;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ch-ink);
    white-space: nowrap;
}

@media (min-width: 480px) {
    .ch-hero-subtitle,
    .ch-hero-title > span:not(:first-child) {
        font-size: 1.3rem;
    }
}

@media (min-width: 768px) {
    .ch-hero-subtitle,
    .ch-hero-title > span:not(:first-child) {
        font-size: 1.45rem;
    }
}

@media (min-width: 976px) {
    .ch-hero-subtitle,
    .ch-hero-title > span:not(:first-child) {
        font-size: 1.55rem;
    }
}

@media (min-width: 1280px) {
    .ch-hero-subtitle,
    .ch-hero-title > span:not(:first-child) {
        font-size: 1.65rem;
    }
}

.ch-accent {
    color: var(--ch-violet);
}

.ch-hero-lead {
    max-width: 28rem;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.625;
    margin-top: .25rem;
}

.ch-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1rem;
    width: 100%;
    max-width: 28rem;
}

.ch-hero-media {
    display: flex;
    flex: 1 1 0%;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.ch-hero-media img {
    height: auto;
}

@media (min-width: 976px) {
    .ch-hero-media {
        justify-content: flex-end;
    }
}

/* mission + vision */
.ch-mv-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
}

@media (min-width: 768px) {
    .ch-mv-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.ch-mv-card {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    padding: 2.75rem 1rem;
    border: 1px solid var(--ch-gray-light);
    border-radius: .5rem;
    background: var(--ch-panel-gradient);
}

.ch-mv-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 32rem;
}

.ch-mv-body h3 {
    font-size: 1.5rem;
    font-weight: 600;
}

.ch-mv-body p {
    font-size: .875rem;
    white-space: pre-line;
}

/* contribution band */
.ch-contribute {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
    width: 100%;
    margin-bottom: 2rem;
    padding: 3rem 1rem 5rem;
    border-radius: .75rem;
    background: var(--ch-violet);
    color: var(--ch-white);
    text-align: center;
}

@media (min-width: 768px) {
    .ch-contribute {
        padding-inline: 3rem;
    }
}

.ch-contribute-head {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 48rem;
}

.ch-contribute-head h2,
.ch-contribute-head h3 {
    font-size: 1.5rem;
    font-weight: 800;
}

.ch-contribute-head p {
    font-size: .75rem;
    line-height: 1.625;
}

.ch-contribute-banner {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .125rem;
    width: 100%;
    max-width: 72rem;
    padding: 1rem;
    border-radius: 9999px;
    background: var(--ch-banner-gradient);
    color: var(--ch-ink);
    font-size: .875rem;
    font-weight: 500;
    box-shadow: var(--ch-shadow-md);
}

/* centered section head shared by Programs and the other landing sections */
.ch-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
    width: 100%;
    text-align: center;
}

.ch-centered-head {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 48rem;
}

.ch-section-title {
    font-size: 1.5rem;
    font-weight: 800;
}

.ch-section-lead {
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.625;
}

.ch-full {
    width: 100%;
}

/* volunteer CTA band */
.ch-volunteer-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    border-radius: 1rem;
    padding: 2rem 1rem;
    background: linear-gradient(to top left, var(--ch-violet), var(--ch-pink));
    color: var(--ch-white);
}

@media (min-width: 768px) {
    .ch-volunteer-cta {
        padding: 3rem 4rem;
    }
}

.ch-volunteer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 32rem;
}

.ch-volunteer-inner h3 {
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 800;
}

@media (min-width: 768px) {
    .ch-volunteer-inner h3 {
        font-size: 1.5rem;
    }
}

.ch-volunteer-strong {
    margin-bottom: 1.5rem;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.625;
}

.ch-volunteer-muted {
    margin-bottom: 2rem;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.625;
    color: var(--ch-white-80);
}

@media (min-width: 768px) {
    .ch-volunteer-strong,
    .ch-volunteer-muted {
        font-size: .875rem;
    }
}

.ch-volunteer-btn {
    display: inline-block;
    width: 100%;
    max-width: 24rem;
    margin-top: 1.5rem;
    padding: .5rem 2rem;
    border-radius: .5rem;
    background: var(--ch-pink);
    color: var(--ch-white);
    font-size: 1.125rem;
    font-weight: 600;
    text-align: center;
}

.ch-volunteer-btn:hover {
    color: var(--ch-white);
}

/* ---------------------------------------------------------------------------------------------
 * Modals.
 *
 * Native <dialog>, opened by site.js from a [data-modal-open] trigger. With scripting off the
 * dialog simply never opens — the content behind it (the contribution cards, the share link) is
 * reachable on the home page regardless, so nothing is lost.
 * ------------------------------------------------------------------------------------------- */

.ch-modal {
    padding: 0;
    border: 0;
    background: transparent;
    max-width: 100vw;
    max-height: 100vh;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: var(--ch-ink);
}

.ch-modal::backdrop {
    background: var(--ch-violet-40);
    backdrop-filter: blur(4px);
}

.ch-modal-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 1rem;
}

.ch-modal-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 10;
    cursor: pointer;
    background: none;
    border: 0;
    transition: color .3s;
}

/* contribute modal */
.ch-modal-contribute {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1366px;
    height: 80vh;
    border-radius: .75rem;
    background: var(--ch-violet);
    color: var(--ch-white);
    overflow: hidden;
}

.ch-modal-contribute .ch-modal-close {
    color: #F3F4F6;
}

.ch-modal-contribute .ch-modal-close:hover {
    color: #E5E7EB;
}

.ch-modal-scroll {
    flex: 1 1 0%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.5rem 2rem;
}

@media (min-width: 768px) {
    .ch-modal-scroll {
        padding: 3rem;
    }
}

/* spread-the-word modal */
.ch-modal-share {
    position: relative;
    width: 100%;
    max-width: 36rem;
    padding: 2rem;
    border: 1px solid var(--ch-gray-light);
    border-radius: .75rem;
    background: var(--ch-panel-gradient);
    color: var(--ch-ink);
    box-shadow: var(--ch-shadow-lg);
}

@media (min-width: 768px) {
    .ch-modal-share {
        padding: 4rem;
    }
}

.ch-modal-share .ch-modal-close {
    top: 2rem;
    right: 2rem;
    color: var(--ch-ink-40);
}

.ch-modal-share .ch-modal-close:hover {
    color: var(--ch-ink-80);
}

.ch-modal-share h2 {
    margin-bottom: 1rem;
    font-size: 1.125rem;
    font-weight: 700;
    text-align: left;
}

.ch-share-label {
    display: block;
    margin-bottom: .5rem;
    font-size: .875rem;
    font-weight: 500;
    text-align: left;
}

.ch-share-row {
    display: flex;
    width: 100%;
    align-items: center;
    gap: .75rem;
    overflow: hidden;
    border-radius: .5rem;
    background: var(--ch-white);
}

.ch-share-row input {
    flex: 1 1 0%;
    min-width: 0;
    padding: .75rem 1rem;
    font-size: .75rem;
    font-style: italic;
    border: 0;
    background: transparent;
    color: inherit;
}

.ch-share-row input:focus {
    outline: none;
}

/* ---------------------------------------------------------------------------------------------
 * Interior pages.
 *
 * Everything from here down is the content surface: the "coming soon" stubs, the four programme
 * pages, /services, the two legal pages, the 404 and the error page. They share a small
 * vocabulary — a banner, an intro row, a gradient band of product cards, a "Who Can Use It"
 * panel — with per-page modifiers where the old markup genuinely differed, rather than a shared
 * component that would flatten those differences.
 * ------------------------------------------------------------------------------------------- */

/* --- "coming soon" stubs + the two full-page messages ---------------------------------------- */

.ch-stub {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    height: 28rem;
    text-align: center;
}

.ch-stub h1,
.ch-stub-lead {
    font-size: 1.875rem;
    font-weight: 800;
}

@media (min-width: 768px) {
    .ch-stub h1,
    .ch-stub-lead {
        font-size: 2.25rem;
    }
}

.ch-stub h1 {
    color: var(--ch-ink);
}

.ch-stub-lead {
    color: var(--ch-violet);
}

.ch-stub-meta {
    font-size: .875rem;
    font-weight: 400;
    color: var(--ch-gray-slate);
}

.ch-stub-meta code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* The "Go Back Home" call to action on /not-found and /Error. */
.ch-cta-link {
    display: inline-block;
    padding: .5rem 2rem;
    border-radius: .5rem;
    background: var(--ch-violet);
    color: var(--ch-white);
    font-weight: 600;
    transition: background-color .3s;
}

.ch-cta-link:hover {
    background: var(--ch-violet-80);
    color: var(--ch-white);
}

.ch-center {
    text-align: center;
}

.ch-notfound-media {
    position: relative;
    width: 100%;
    height: 24rem;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .75rem;
    overflow: hidden;
}

.ch-notfound-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(.9);
}

/* --- interior page banner --------------------------------------------------------------------
 * Image, purple scrim, centred white heading. The scrim is its own gradient layer rather than a
 * translucent colour on the text container, exactly as the old markup had it. */

.ch-page-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 8;
    border-radius: 1rem;
    overflow: hidden;
}

@media (min-width: 768px) {
    .ch-page-hero {
        aspect-ratio: 16 / 5;
    }
}

/* /privacy-policy sets a minimum height instead of an aspect ratio below 768px. */
.ch-page-hero--min {
    aspect-ratio: auto;
    min-height: 240px;
}

@media (min-width: 480px) {
    .ch-page-hero--min {
        min-height: 280px;
    }
}

@media (min-width: 768px) {
    .ch-page-hero--min {
        aspect-ratio: 16 / 5;
    }
}

.ch-page-hero-media {
    position: absolute;
    inset: 0;
}

.ch-page-hero-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ch-page-hero-scrim {
    position: absolute;
    inset: 0;
    background: var(--ch-hero-scrim);
}

.ch-page-hero-body {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--ch-white);
}

.ch-page-hero-body h1 {
    margin-bottom: 1rem;
    font-size: 1.875rem;
    font-weight: 800;
}

@media (min-width: 768px) {
    .ch-page-hero-body h1 {
        font-size: 2.25rem;
    }
}

/* /paying-it-forward's banner puts more air under the heading. */
.ch-page-hero-body--roomy h1 {
    margin-bottom: 1.5rem;
}

.ch-page-hero-sub {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.625;
}

@media (min-width: 768px) {
    .ch-page-hero-sub {
        font-size: 1.5rem;
    }
}

/* /services' banner subtitle is lighter and narrower than the programme pages'. */
.ch-page-hero-sub--light {
    max-width: 36rem;
    font-size: 1rem;
    font-weight: 500;
}

@media (min-width: 768px) {
    .ch-page-hero-sub--light {
        font-size: 1.125rem;
    }
}

/* The two legal pages: smaller heading, two lines of small print, no vertical padding at md. */
.ch-page-hero--legal .ch-page-hero-body {
    padding: 0 1rem;
}

@media (min-width: 768px) {
    .ch-page-hero--legal .ch-page-hero-body {
        padding-inline: 1.5rem;
    }
}

.ch-page-hero--legal .ch-page-hero-body h1 {
    font-size: 1.25rem;
    font-weight: 700;
}

@media (min-width: 480px) {
    .ch-page-hero--legal .ch-page-hero-body h1 {
        font-size: 1.5rem;
    }
}

@media (min-width: 768px) {
    .ch-page-hero--legal .ch-page-hero-body h1 {
        font-size: 1.875rem;
    }
}

.ch-page-hero-note {
    max-width: 42rem;
    font-size: .875rem;
    line-height: 1.625;
}

@media (min-width: 480px) {
    .ch-page-hero-note {
        font-size: 1rem;
    }
}

@media (min-width: 768px) {
    .ch-page-hero-note {
        font-size: .875rem;
    }
}

/* --- introduction row ------------------------------------------------------------------------ */

.ch-section--spaced {
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .ch-section--spaced {
        margin-bottom: 2rem;
    }
}

.ch-intro-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1rem;
}

@media (min-width: 768px) {
    .ch-intro-row {
        flex-direction: row;
        gap: 10rem;
    }
}

/* /building-for-communities keeps the tight gap at every width. */
@media (min-width: 768px) {
    .ch-intro-row--tight {
        gap: 1rem;
    }
}

.ch-intro-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    text-align: left;
}

@media (min-width: 768px) {
    .ch-intro-copy {
        width: 50%;
    }
}

.ch-intro-copy h2 {
    margin-block: 1rem;
    font-size: 1.25rem;
    font-weight: 800;
}

@media (min-width: 768px) {
    .ch-intro-copy h2 {
        font-size: 1.5rem;
    }
}

.ch-intro-copy p {
    margin-bottom: 1rem;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.625;
}

@media (min-width: 768px) {
    .ch-intro-copy p {
        font-size: .875rem;
    }
}

.ch-intro-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
    align-items: stretch;
}

@media (min-width: 768px) {
    .ch-intro-cards {
        width: 50%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 976px) {
    .ch-intro-cards--wide {
        width: 100%;
    }
}

.ch-intro-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2rem 2.5rem;
    text-align: left;
    border: 1px solid var(--ch-gray-light);
    border-radius: 1.5rem;
    background: var(--ch-panel-gradient);
}

/* /building-for-communities' intro cards are tighter and stack the icon above the title. */
.ch-intro-card--compact {
    padding: 1rem;
}

.ch-intro-card h3 {
    margin-top: .25rem;
    margin-bottom: .5rem;
    font-size: 1rem;
    font-weight: 700;
}

/* /paying-it-forward's intro-card heading is one step larger. */
.ch-intro-card--lg h3 {
    font-size: 1.125rem;
}

.ch-intro-card p {
    margin-bottom: 1rem;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.625;
}

.ch-intro-card--compact p {
    margin-bottom: 0;
}

.ch-icon-badge {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: .25rem;
    flex-shrink: 0;
}

.ch-intro-card--compact .ch-icon-badge {
    margin-top: 0;
    margin-bottom: .75rem;
}

.ch-icon-badge img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* --- gradient band of product cards ---------------------------------------------------------- */

.ch-band {
    background: var(--ch-panel-gradient);
    padding-block: 1.5rem;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .ch-band {
        padding-block: 3rem;
        margin-bottom: 2rem;
    }
}

.ch-band-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 1.5rem;
    text-align: left;
}

.ch-band-head h2 {
    margin-bottom: .75rem;
    font-size: 1.25rem;
    font-weight: 800;
}

@media (min-width: 768px) {
    .ch-band-head h2 {
        font-size: 1.5rem;
    }
}

.ch-band-head p {
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.625;
}

@media (min-width: 768px) {
    .ch-band-head p {
        font-size: .875rem;
    }
}

.ch-product-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .ch-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.ch-product-card {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    text-align: left;
    border-radius: 1.5rem;
    background: var(--ch-white);
    box-shadow: var(--ch-shadow-sm);
}

@media (min-width: 768px) {
    .ch-product-card {
        padding: 2.5rem;
    }
}

.ch-product-card-head {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: 1.5rem;
}

/* /paying-it-forward closes the gap under the card heading, because a description follows it. */
.ch-product-card-head--tight {
    margin-bottom: .75rem;
}

.ch-product-card-head h3 {
    font-size: 1rem;
    font-weight: 700;
}

.ch-icon-dot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    margin-top: .25rem;
    flex-shrink: 0;
}

.ch-icon-dot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ch-product-card-desc {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: 1rem;
}

.ch-product-card-desc p {
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.625;
}

.ch-bullets {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.ch-bullets li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .75rem;
    font-weight: 500;
}

.ch-bullets li::before {
    content: "";
    flex-shrink: 0;
    width: .5rem;
    height: .5rem;
    margin-top: .375rem;
    border-radius: 9999px;
    background: var(--ch-ink);
}

/* --- "Who Can Use It" panel ------------------------------------------------------------------ */

.ch-who-wrap {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.ch-who {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 2.5rem;
    width: 100%;
    min-width: 15rem;
    padding: 1rem;
    overflow: auto;
    text-align: left;
    border: 1px solid var(--ch-gray-cool);
    border-radius: .75rem;
    background: var(--ch-panel-gradient);
    color: var(--ch-ink);
}

@media (min-width: 768px) {
    .ch-who {
        padding: 2rem 0;
    }
}

.ch-who-media {
    display: none;
}

@media (min-width: 768px) {
    .ch-who-media {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 33.3333%;
    }
}

.ch-who-media-inner {
    width: 100%;
    height: 100%;
    border-radius: 0 9999px 9999px 0;
    background: var(--ch-violet);
}

.ch-who-media-frame {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 18rem;
}

.ch-who-media-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 9999px 9999px 0;
}

.ch-who-body {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    justify-content: center;
    gap: 1.25rem;
    width: 100%;
    border-radius: .75rem;
    background: rgba(255, 255, 255, .5);
}

@media (min-width: 768px) {
    .ch-who-body {
        width: 66.6667%;
        border-radius: 9999px 0 0 9999px;
    }
}

.ch-who-inner {
    padding: 1rem 2rem;
}

@media (min-width: 768px) {
    .ch-who-inner {
        padding: 4rem 8rem;
    }
}

/* /paying-it-forward's list is the long one, so its panel is shallower. */
@media (min-width: 768px) {
    .ch-who-inner--short {
        padding-block: 2rem;
    }
}

.ch-who-inner h3 {
    margin-bottom: 2rem;
    font-size: 1.5rem;
    font-weight: 800;
}

.ch-who-inner--short h3 {
    margin-bottom: 1.5rem;
}

.ch-who-list {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 1rem;
}

.ch-who-list > div {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .75rem;
    font-weight: 500;
}

.ch-who-list > div::before {
    content: "";
    flex-shrink: 0;
    width: .5rem;
    height: .5rem;
    border-radius: 9999px;
    background: var(--ch-ink);
}

/* --- /services ------------------------------------------------------------------------------- */

.ch-services-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
}

.ch-services-intro h2 {
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 800;
}

@media (min-width: 768px) {
    .ch-services-intro h2 {
        font-size: 1.5rem;
    }
}

.ch-services-intro p {
    margin-bottom: 1rem;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.625;
}

@media (min-width: 768px) {
    .ch-services-intro p {
        font-size: .875rem;
    }
}

.ch-section--why {
    border-bottom: 1px solid var(--ch-lavender);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
}

.ch-why {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.ch-why h2 {
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 800;
}

@media (min-width: 768px) {
    .ch-why h2 {
        font-size: 1.5rem;
    }
}

.ch-why-cards {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.ch-why-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1.5rem 1rem;
    text-align: center;
    border: 1px solid var(--ch-gray-light);
    border-radius: 1.5rem;
    background: var(--ch-panel-gradient);
}

@media (min-width: 768px) {
    .ch-why-card {
        width: calc(33.333% - .667rem);
    }
}

.ch-why-card p {
    font-size: .875rem;
    font-weight: 500;
}

.ch-why-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-bottom: 1rem;
}

.ch-why-icon img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* --- /building-for-communities: the Live Apps block ------------------------------------------ */

.ch-liveapp-head {
    padding-block: 1rem;
    margin-top: -4rem;
    text-align: center;
}

.ch-liveapp-head h2 {
    font-size: 1.25rem;
    font-weight: 700;
}

.ch-liveapp-head p {
    font-size: .875rem;
    font-weight: 700;
}

.ch-liveapp {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    padding: 1rem;
    overflow: hidden;
    text-align: left;
    border: 2px solid var(--ch-gray-light);
    border-radius: 26px;
    background: var(--ch-panel-gradient);
    color: var(--ch-ink);
}

@media (min-width: 768px) {
    .ch-liveapp {
        flex-direction: row;
        align-items: stretch;
        padding: 2rem;
    }
}

.ch-liveapp-copy {
    flex-shrink: 0;
    width: 100%;
}

@media (min-width: 768px) {
    .ch-liveapp-copy {
        width: 33.3333%;
        padding-right: 1rem;
    }
}

.ch-liveapp-copy h3 {
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 700;
}

@media (min-width: 768px) {
    .ch-liveapp-copy h3 {
        font-size: 1.5rem;
    }
}

.ch-liveapp-copy > p {
    font-size: 1rem;
    line-height: 1.625;
}

@media (min-width: 976px) {
    .ch-liveapp-copy > p {
        font-size: .75rem;
    }
}

.ch-liveapp-features {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: 3rem;
}

.ch-liveapp-features-title {
    font-weight: 700;
}

.ch-liveapp-features p {
    display: flex;
    gap: .5rem;
    font-size: .75rem;
}

.ch-liveapp-features img {
    width: 15px;
    height: auto;
    flex-shrink: 0;
}

.ch-liveapp-slider {
    position: relative;
    flex: 1 1 0%;
    width: 100%;
    min-width: 0;
}

/* THE TRACK IS NATIVELY SCROLLABLE, and that is deliberately the no-JS story. The old slider
   moved by swapping one of four fixed transform classes, which nothing could change with
   scripting off — the arrows were simply dead. Scroll-snap makes the track swipeable and
   keyboard-scrollable on its own; the prev/next buttons are a convenience site.js adds, and they
   stay hidden until it has, so there is never an inert control on the page. */
.ch-slider-track {
    display: flex;
    gap: 20px;
    height: 350px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.ch-slider-track::-webkit-scrollbar {
    display: none;
}

.ch-slider-card {
    position: relative;
    flex: 0 0 180px;
    width: 180px;
    height: 280px;
    scroll-snap-align: start;
    overflow: hidden;
    border-radius: 1rem;
    background: #F3F4F6;
    box-shadow: var(--ch-shadow-md);
}

.ch-slider-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ch-slider-btn {
    display: none;
    position: absolute;
    top: 140px;
    z-index: 10;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    transition: opacity .3s;
}

[data-slider-ready] .ch-slider-btn {
    display: block;
}

.ch-slider-btn img {
    width: 25px;
    height: auto;
}

.ch-slider-btn:disabled {
    opacity: .3;
    cursor: default;
}

.ch-slider-prev {
    left: -1rem;
}

.ch-slider-next {
    right: -1rem;
}

.ch-liveapp-download {
    margin-top: 1.5rem;
}

.ch-liveapp-download h3 {
    font-size: 1rem;
    font-weight: 700;
}

.ch-liveapp-download-row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-top: .5rem;
}

.ch-liveapp-download-row img {
    height: auto;
}

/* --- legal pages ----------------------------------------------------------------------------- */

.ch-legal {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    width: 100%;
    padding: 2rem 1rem;
    border: 1px solid var(--ch-gray-light);
    border-radius: .5rem;
    background: var(--ch-panel-gradient);
}

@media (min-width: 480px) {
    .ch-legal {
        padding-inline: 1.5rem;
    }
}

.ch-legal-block {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* The negative top margin is carried across on purpose: with a 4rem gap between blocks, it is
   what produces the spacing the live site actually shows. */
.ch-legal-head {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-top: -2.25rem;
}

.ch-legal-head--first {
    margin-top: -.75rem;
}

/* A second heading INSIDE a block pushes down instead of pulling up. */
.ch-legal-head--mid {
    margin-top: 0;
}

.ch-legal-head svg {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: .25rem;
    color: var(--ch-mosque-pink);
}

.ch-legal-head--mid svg {
    margin-top: 1.5rem;
}

.ch-legal-head h2,
.ch-legal-head h3,
.ch-legal-head h6 {
    font-size: 1rem;
    font-weight: 700;
}

@media (min-width: 480px) {
    .ch-legal-head h2,
    .ch-legal-head h3,
    .ch-legal-head h6 {
        font-size: 1.125rem;
    }
}

@media (min-width: 480px) {
    .ch-legal-head--xl h2 {
        font-size: 1.25rem;
    }
}

.ch-legal-head--mid h3,
.ch-legal-head--mid h6 {
    margin-top: 1.25rem;
    font-size: 1.125rem;
}

.ch-legal-block p {
    font-size: .875rem;
}

.ch-legal-block h6 {
    font-size: .875rem;
    font-weight: 700;
}

.ch-legal-block h6.ch-legal-plain {
    font-weight: 400;
}

.ch-legal-block .ch-legal-strong {
    font-weight: 700;
}

.ch-legal-list {
    list-style: disc;
    padding-left: 1.25rem;
    font-size: .875rem;
}

.ch-legal-list li {
    display: list-item;
}

.ch-legal-list .ch-legal-list {
    padding-left: 1.25rem;
}

.ch-legal-rule {
    position: relative;
    top: .5rem;
    border-top: 1px solid var(--ch-violet);
}

.ch-legal-contact {
    font-size: .875rem;
}

.ch-legal-contact li {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--ch-legal-ink);
}

.ch-legal-contact li + li {
    margin-top: .5rem;
}

.ch-legal-contact span {
    font-weight: 500;
}

.ch-legal-contact svg {
    flex-shrink: 0;
    width: .875rem;
    height: .875rem;
}

.ch-icon-gmail {
    color: var(--ch-gmail-red);
}

.ch-legal a {
    color: var(--ch-link-blue);
}

.ch-legal a:hover {
    color: var(--ch-link-blue);
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------------------------
 * Public forms — the four OTP-gated wizards.
 *
 * TOASTS ARE GONE AND THAT SHOWS UP HERE. The old site pushed success and failure over a SignalR
 * circuit as a floating toast; there is no circuit now, so every message renders server-side,
 * inline, in the position it applies to. .ch-form-alert and .ch-form-notice are those messages,
 * styled to read the way the toasts did.
 * ------------------------------------------------------------------------------------------- */

.ch-wizard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    padding: 2.5rem .75rem;
    border-radius: .75rem;
    background: linear-gradient(to top left, var(--ch-blue-light), var(--ch-lavender));
    color: var(--ch-ink);
}

/* the thank-you screen, which needs to fill the space the form left */
.ch-wizard--tall {
    justify-content: center;
    min-height: 20rem;
    gap: .25rem;
}

/* the /services enquiry wizard sits on the brand gradient, white on violet→pink */
.ch-wizard--brand {
    justify-content: center;
    background: linear-gradient(to top left, var(--ch-violet), var(--ch-pink));
    color: var(--ch-white);
}

.ch-wizard-title {
    font-size: 1.5rem;
    font-weight: 800;
}

.ch-wizard--brand .ch-wizard-title {
    font-size: 1.125rem;
}

@media (min-width: 768px) {
    .ch-wizard--brand .ch-wizard-title {
        font-size: 1.5rem;
    }
}

.ch-wizard-sub {
    font-size: .875rem;
    font-weight: 500;
    text-align: center;
}

.ch-wizard--brand .ch-wizard-sub {
    font-size: .75rem;
}

.ch-wizard-sub--roomy {
    margin-bottom: 2rem;
}

.ch-wizard-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
    width: 100%;
    max-width: 28rem;
    margin-top: 2rem;
}

/* the code step is narrower than the email step, as on the live site */
.ch-wizard-form--narrow {
    max-width: 20rem;
}

.ch-wizard-foot {
    margin-top: .75rem;
    font-size: .875rem;
    text-align: center;
}

.ch-wizard-foot-note {
    font-size: .75rem;
}

/* The resend control is a real form POST, so it has to be a <button> in a <form>; this makes it
   sit inline in the sentence around it the way the old <span> did. */
.ch-inline-form {
    display: inline;
}

.ch-linkbtn {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--ch-violet);
    text-decoration: underline;
    cursor: pointer;
}

.ch-linkbtn:hover {
    color: var(--ch-violet-80);
}

.ch-wizard-restart {
    margin-left: .25rem;
    font-weight: 600;
    color: var(--ch-ink);
    text-decoration: underline;
}

/* ---- fields ---------------------------------------------------------------------------------- */

.ch-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
    width: 100%;
    min-width: 0;
}

.ch-label {
    font-size: .875rem;
    font-weight: 500;
}

.ch-input,
.ch-textarea,
.ch-select {
    width: 100%;
    min-width: 0;
    padding: .625rem 1rem;
    border: 1px solid var(--ch-gray-cool);
    border-radius: .5rem;
    background: var(--ch-white);
    color: var(--ch-ink);
    font-family: inherit;
    font-size: .75rem;
}

.ch-textarea {
    resize: vertical;
}

.ch-textarea--tall {
    min-height: 14rem;
}

.ch-input:focus,
.ch-textarea:focus,
.ch-select:focus {
    outline: none;
    border-color: var(--ch-purple-bright);
    box-shadow: 0 0 0 2px var(--ch-purple-bright);
}

.ch-select {
    width: 5rem;
    flex: 0 0 5rem;
    padding-inline: .75rem;
    font-size: .625rem;
}

.ch-phone-row {
    display: flex;
    gap: .5rem;
    width: 100%;
}

.ch-phone-row .ch-input {
    flex: 1 1 auto;
}

/* A verified value, shown rather than asked for. Deliberately NOT a disabled or readonly input:
   a disabled input posts nothing, and a readonly one invites the reader to believe the value
   travels with the form. It does not — the address comes from the challenge, server-side. */
.ch-field-fixed {
    width: 100%;
    padding: .625rem 1rem;
    border: 1px dashed var(--ch-gray-cool);
    border-radius: .5rem;
    background: rgba(255, 255, 255, .5);
    font-size: .75rem;
    word-break: break-all;
}

.ch-field-note {
    width: 100%;
    margin-bottom: 1.5rem;
    font-size: .75rem;
    font-style: italic;
    text-align: left;
    color: rgba(0, 0, 0, .6);
}

.ch-wizard--brand .ch-field-note {
    color: var(--ch-white-80);
}

.ch-field-error,
.ch-field .validation-message {
    font-size: .625rem;
    color: var(--ch-red);
}

.ch-wizard--brand .ch-field-error,
.ch-wizard--brand .ch-field .validation-message {
    color: #FFE0E6;
}

/* ---- inline messages (what the toasts became) ------------------------------------------------ */

.ch-form-alert,
.ch-form-notice {
    width: 100%;
    max-width: 28rem;
    padding: .625rem .875rem;
    border-radius: .5rem;
    font-size: .75rem;
    font-weight: 500;
    text-align: left;
}

.ch-form-alert {
    border: 1px solid var(--ch-red);
    background: var(--ch-red-pale);
    color: #8A1620;
}

.ch-form-notice {
    border: 1px solid var(--ch-violet);
    background: var(--ch-violet-100);
    color: var(--ch-violet-700);
}

/* ---- form bodies ----------------------------------------------------------------------------- */

.ch-form-panel {
    width: 100%;
    padding: .5rem;
    background: var(--ch-panel-gradient);
    color: var(--ch-ink);
}

@media (min-width: 768px) {
    .ch-form-panel {
        padding: 2.5rem;
    }
}

.ch-form-title {
    font-size: 1.5rem;
    font-weight: 700;
}

.ch-form-sub {
    margin-top: .25rem;
    font-size: .875rem;
}

.ch-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
    margin-top: 1rem;
    width: 100%;
}

@media (min-width: 768px) {
    .ch-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
        margin-top: 1.5rem;
    }
}

/* the three wizard-hosted bodies are narrower than the contact panel's */
.ch-form-grid--wizard {
    max-width: 36rem;
}

.ch-field--wide {
    grid-column: 1 / -1;
}

.ch-btn--submit-lg {
    font-size: 1.25rem;
}

/* ---- /contact page shell --------------------------------------------------------------------- */

.ch-contact-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem;
}

@media (min-width: 768px) {
    .ch-contact-wrap {
        padding: 2rem;
    }
}

.ch-contact-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 56rem;
    overflow: hidden;
    border-radius: 1.5rem;
    background: var(--ch-white);
    box-shadow: var(--ch-shadow-md);
}

@media (min-width: 768px) {
    .ch-contact-card {
        flex-direction: row;
    }
}

.ch-contact-aside {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
    padding: 2.5rem;
    background: linear-gradient(to bottom, var(--ch-pink), var(--ch-violet));
    color: var(--ch-white);
}

@media (min-width: 768px) {
    .ch-contact-aside {
        width: 33.3333%;
    }
}

.ch-contact-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
}

.ch-contact-brand h1 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.25;
}

.ch-contact-details {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 1.5rem;
    font-size: .875rem;
    color: rgba(255, 255, 255, .9);
}

.ch-contact-label {
    font-weight: 600;
}

.ch-contact-main {
    width: 100%;
    padding: 2.5rem;
    background: var(--ch-panel-gradient);
    color: var(--ch-ink);
}

@media (min-width: 768px) {
    .ch-contact-main {
        width: 66.6667%;
    }
}

/* The contact panel already carries the gradient, so the wizard inside it must not paint a
   second one on top. */
.ch-contact-main .ch-wizard {
    padding: 0;
    background: none;
}

.ch-contact-main .ch-form-panel {
    padding: 0;
    background: none;
}

/* ---- the six-box code input (site.js progressive enhancement) -------------------------------- */

/* site.js hides the real single field and builds six boxes beside it. Both classes are the
   account surface's own, reused verbatim so one implementation serves both. */
.ch-wizard .otp-real-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ch-wizard .otp-boxes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .25rem;
    width: 100%;
}

.site-shell .otp-box,
.ch-wizard .otp-box {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--ch-gray-cool);
    border-radius: .375rem;
    background: var(--ch-white);
    color: var(--ch-ink);
    color-scheme: light;
    box-shadow: var(--ch-shadow-sm);
    text-align: center;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 2.5rem;
    caret-color: var(--ch-pink);
    transition: border-color .2s, box-shadow .2s;
}

.site-shell .otp-box:focus,
.ch-wizard .otp-box:focus {
    outline: none;
    border-color: var(--ch-pink);
    box-shadow: 0 0 0 2px var(--ch-pink);
}

.site-shell .otp-box.is-filled,
.ch-wizard .otp-box.is-filled {
    border-color: var(--ch-pink);
}