/* The public site: the pages someone meets before they have an account.
 *
 * This continues the language of core/css/auth.css rather than opening a
 * second one. Everything structural comes from Tabler's custom properties,
 * so light and dark need no separate rule set; only the two brand colours
 * and the one ink tone are stated here.
 *
 * The mark is a rounded square holding three white circles under an arc —
 * people under a shared roof — filled with a gradient that runs from the
 * brand blue at its top left to cyan at its bottom right. That gradient is
 * the page's one recurring device: it opens the page as the hero, closes it
 * as the last band, walks across the stations of the association year, and
 * lights every icon chip. Wherever two of the brand's colours meet, they
 * meet the way they meet in the mark.
 *
 * Colour is carried by whole surfaces, not by hairlines, and the gradient
 * always runs the same way the mark's does: blue first, cyan after.
 */

/* The brand's colours, the mark's gradient and the colour of every subject
   area come from core/css/palette.css, which the application loads too. Only
   what the public pages alone need is stated here. */

:root {
    --cn-measure: 46rem;
    --cn-page: 68rem;
    --cn-section-y: clamp(3.5rem, 2rem + 6vw, 6.5rem);
}

/* ------------------------------------------------------------ typography */

/* Bricolage Grotesque (SIL OFL, see ../fonts/OFL.txt), self-hosted. Loading
   it from Google's CDN would hand every visitor's address to a third party,
   which would contradict what this very page promises. Two subsets: latin
   covers German and English, latin-ext the accented names a club register
   in Austria is full of. If a file is missing the page falls back to
   Tabler's own stack and stays entirely usable, only less characteristic. */
@font-face {
    font-family: "Bricolage Grotesque";
    src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
    font-weight: 400 800;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Bricolage Grotesque";
    src: url("../fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
    font-weight: 400 800;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

.cn-display {
    font-family: "Bricolage Grotesque", var(--tblr-font-sans-serif);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.05;
    text-wrap: balance;
}

/* ---------------------------------------------------------------- shell */

.cn-site {
    /* The public pages sit outside the app shell and bring their own
       vertical rhythm. Tabler's primary is repointed at the mark's blue, so
       every button, link and outline on these pages is the brand's own
       colour rather than the framework's. */
    --tblr-primary: var(--cn-blue);
    --tblr-primary-rgb: 37, 99, 235;
    --tblr-primary-fg: #ffffff;
    --tblr-primary-darken: #1d4fd7;
    --tblr-link-color: var(--cn-blue);
    --tblr-link-hover-color: #1d4fd7;

    min-height: 100dvh;
    /* Paper, not white: a trace of the brand blue in the page, so a white
       card on top of it reads as a card. */
    background: color-mix(in srgb, var(--cn-blue) 4%, var(--tblr-bg-surface));
}

/* The bar is the top edge of the hero's colour field and carries the same
   gradient. Horizontal is what makes that work: a level gradient does not
   depend on the height of the box it fills, so the bar and the hero below
   it hold the same colour at every x and the seam between them disappears —
   and the bar keeps the gradient once it detaches and sticks over white
   content, where a tilted one would suddenly show its other end. */
.cn-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: linear-gradient(90deg, var(--cn-gradient));
    color: #fff;
}

/* The mark's own square is blue and cyan and would sink into the bar, so it
   sits on a white chip. A shadow rather than padding: the image keeps its
   size and the row its baseline. */
.cn-topbar .cn-brand__mark {
    background: #fff;
    box-shadow: 0 0 0 3px #fff;
}

.cn-topbar .cn-brand__word {
    color: #fff;
}

.cn-topbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    max-width: var(--cn-page);
    margin-inline: auto;
    padding: 0.75rem 1.25rem;
}

.cn-topbar__nav {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-left: auto;
    font-size: 0.9375rem;
}

/* Four entries do not need a burger menu — they need a second line. The
   nav wraps below the brand and spreads across it. */
@media (max-width: 34rem) {
    .cn-topbar__nav {
        width: 100%;
        margin-left: 0;
        justify-content: space-between;
        gap: 0.75rem;
        font-size: 0.875rem;
    }
}

/* :not(.btn) throughout — the call to action is a button and keeps the
   button's own colours. Without it the link colour lands grey-on-blue,
   which is a contrast failure, not a style choice. */
/* Barely under white: on a blue this saturated, a link faded far enough to
   read as "quieter" also falls under 4.5:1. The current page is told apart
   by weight and an underline instead. */
.cn-topbar__nav a:not(.btn) {
    color: rgb(255 255 255 / 92%);
    text-decoration: none;
}

.cn-topbar__nav a:not(.btn):hover,
.cn-topbar__nav a:not(.btn):focus-visible {
    color: #fff;
}

.cn-topbar__nav a:not(.btn)[aria-current="page"] {
    color: #fff;
    font-weight: 600;
    /* The current page is marked by an underline as well as by weight:
       white-on-blue leaves no second shade of white to signal with. */
    text-decoration: underline;
    text-underline-offset: 0.35em;
}

/* ------------------------------------------------------------------ action */

/* One button for every call to action on the public site, in the one colour
   that is neither the page nor the brand. It has to hold on white paper and
   on the blue field alike, so it is a solid fill with dark ink rather than
   an outline.
   Scoped through .cn-site for weight, not for reach: this stylesheet is
   linked before Tabler's, so a bare .cn-btn-accent would tie with .btn on
   specificity and lose the tie — leaving a transparent button. */
.cn-site .cn-btn-accent {
    --tblr-btn-color: var(--cn-accent-ink);
    --tblr-btn-bg: var(--cn-accent);
    --tblr-btn-border-color: transparent;
    --tblr-btn-hover-color: var(--cn-accent-ink);
    --tblr-btn-hover-bg: var(--cn-accent-hover);
    --tblr-btn-hover-border-color: transparent;
    --tblr-btn-active-color: var(--cn-accent-ink);
    --tblr-btn-active-bg: var(--cn-accent-hover);
    --tblr-btn-active-border-color: transparent;
    --tblr-btn-focus-shadow-rgb: 245, 159, 0;
    font-weight: 600;
}

/* --------------------------------------------------------------- section */

/* Not scoped to .cms-block: a section can also come straight from a
   template — the contact form does — and it needs the same measure and
   gutter as one that came out of the CMS. */
.cn-section {
    max-width: var(--cn-page);
    margin-inline: auto;
    padding: var(--cn-section-y) 1.25rem;
}

/* Two sections in a row would otherwise stack both their paddings and
   drift apart. The hero is exempt: it has no bottom padding of its own,
   so the section under it needs its full top padding. */
.cms-block:has(.cn-section) + .cms-block > .cn-section {
    padding-top: 0;
}

.cn-section__head {
    max-width: var(--cn-measure);
    margin-bottom: 2.5rem;
}

.cn-section__title {
    margin: 0 0 0.75rem;
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);
}

.cn-section__intro {
    margin: 0;
    color: var(--tblr-secondary);
    font-size: 1.0625rem;
    line-height: 1.65;
    text-wrap: pretty;
}

/* ------------------------------------------------------------------ hero */

/* The mark, blown up to the width of the window. Two layers do it. The
   linear one is level, so the bar above can carry the identical gradient and
   the two read as one surface. The radial one puts the diagonal back — and
   with it the mark's pure cyan, in the bottom right corner, the one part of
   the hero that never holds text. */
.cn-hero {
    background:
        radial-gradient(115% 85% at 100% 100%,
            color-mix(in srgb, var(--cn-cyan) 78%, transparent) 0%, transparent 62%),
        linear-gradient(90deg, var(--cn-gradient));
    color: #fff;
}

/* Narrow screens have text where a wide one has margin, so the cyan core is
   pulled back into the corner it came from. */
@media (max-width: 48rem) {
    .cn-hero {
        background:
            radial-gradient(80% 45% at 100% 100%,
                color-mix(in srgb, var(--cn-cyan) 70%, transparent) 0%, transparent 65%),
            linear-gradient(90deg, var(--cn-gradient));
    }
}

.cn-hero__inner {
    max-width: var(--cn-page);
    margin-inline: auto;
    padding: clamp(3rem, 2rem + 5vw, 5.5rem) 1.25rem clamp(3.5rem, 2rem + 5vw, 5.5rem);
}

/* The beta notice, above everything the hero has to say.
 *
 * A stamp, not a chip: it is tilted, it carries a shadow, and it is set in
 * the display face at a size the rest of the hero's small type never uses.
 * It reads as pressed onto the page after the page was finished, which is
 * exactly what it is — and what makes it removable in one edit.
 *
 * The yellow is the accent taken down until white clears 3:1 on it, which
 * one uppercase word at this size and weight is allowed to rely on. Darker
 * than the call to action on purpose: the button below stays the brightest
 * thing on the page, because it is still the thing to do.
 */
.cn-beta {
    display: flex;
    /* Stacked at every width, so the stamp keeps a line to itself: beside
       the sentence it would read as its label, and it labels the release,
       not the sentence. */
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8125rem;
    margin: 0 0 2rem;
    max-width: 34rem;
}

.cn-beta__stamp {
    display: inline-block;
    flex: none;
    padding: 0.3125rem 0.875rem;
    border-radius: 0.3125rem;
    background: #cf8300;
    color: #fff;
    font-family: "Bricolage Grotesque", var(--tblr-font-sans-serif);
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.15;
    /* Tracking is added after the last letter as well, so the word sits off
       centre in its own box; the indent takes that half back. */
    letter-spacing: 0.16em;
    text-indent: 0.16em;
    text-transform: uppercase;
    transform: rotate(-4deg);
    box-shadow: 0 0.375rem 1.125rem rgb(11 18 32 / 30%);
}

.cn-beta__note {
    color: rgb(255 255 255 / 92%);
    font-size: 1rem;
    line-height: 1.55;
    /* Balanced rather than pretty: two sentences over two lines, and the
       break lands where the sense breaks. */
    text-wrap: balance;
}

.cn-hero__eyebrow {
    margin: 0 0 1rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    /* Warm white, not the accent itself: amber on this blue is 2.4:1, and
       an eyebrow is small text. The warmth still points at the button. */
    color: #fff4e6;
}

.cn-hero__headline {
    margin: 0 0 1.25rem;
    max-width: 18ch;
    font-size: clamp(2.25rem, 1.4rem + 4.2vw, 4.25rem);
}

.cn-hero__subline {
    margin: 0 0 2rem;
    max-width: 34rem;
    color: rgb(255 255 255 / 94%);
    font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
    line-height: 1.6;
    text-wrap: pretty;
}

.cn-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
}

.cn-hero__secondary {
    color: #fff;
    font-weight: 500;
    text-decoration: none;
}

.cn-hero__secondary:hover,
.cn-hero__secondary:focus-visible {
    text-decoration: underline;
}

/* Quieter than the subline by size only. Fading it further is what pushes
   white on this blue below the threshold for small text. */
.cn-hero__footnote {
    margin: 1.25rem 0 0;
    color: rgb(255 255 255 / 90%);
    font-size: 0.875rem;
}

/* --------------------------------------------------------------- features */

.cn-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 1.25rem;
}

/* Each card holds one hue and uses it three times: the bar along its top
   edge, the icon chip, and a wash of it in the card itself. The hue is the
   one its subject wears inside the application — a member is blue on this
   page and blue once the reader has an account — and it is assigned by
   position, since the cards come out of the CMS and carry no area of their
   own. Editing the grid means editing the order below with it. */
.cn-feature {
    position: relative;
    overflow: hidden;
    padding: 1.75rem 1.5rem 1.5rem;
    border: 1px solid color-mix(in srgb, var(--cn-hue) 28%, var(--tblr-border-color));
    border-radius: 0.875rem;
    background: color-mix(in srgb, var(--cn-hue) 7%, var(--tblr-bg-surface));
}

/* The bar fades out towards the right the way the mark's gradient lightens
   towards its far corner — full hue where the eye enters the card. */
.cn-feature::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg,
        var(--cn-hue), color-mix(in srgb, var(--cn-hue) 40%, transparent));
}

.cn-feature:nth-of-type(9n + 1) { --cn-hue: var(--cn-domain-members); }
.cn-feature:nth-of-type(9n + 2) { --cn-hue: var(--cn-domain-meetings); }
.cn-feature:nth-of-type(9n + 3) { --cn-hue: var(--cn-domain-books); }
.cn-feature:nth-of-type(9n + 4) { --cn-hue: var(--cn-domain-reports); }
.cn-feature:nth-of-type(9n + 5) { --cn-hue: var(--cn-domain-receipts); }
.cn-feature:nth-of-type(9n + 6) { --cn-hue: var(--cn-domain-dues); }
.cn-feature:nth-of-type(9n + 7) { --cn-hue: var(--cn-domain-banking); }
/* The direct debit is how the fees are collected, so it wears their colour
   rather than one of its own. */
.cn-feature:nth-of-type(9n + 8) { --cn-hue: var(--cn-domain-dues); }
.cn-feature:nth-of-type(9n + 9) { --cn-hue: var(--cn-domain-system); }

/* The chip itself is `.cn-chip` from palette.css — the same object the
   application puts beside a page title. Only the room it needs above the
   heading and the lift off the card are the card's own. */
.cn-feature__icon {
    margin-bottom: 1rem;
    box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--cn-hue) 70%, transparent);
}

.cn-feature__title {
    margin: 0 0 0.5rem;
    font-size: 1.0625rem;
    font-weight: 600;
}

.cn-feature__body {
    margin: 0;
    color: var(--tblr-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.cn-feature__body p:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------- association year */

/* The signature. The stations are the mark's three circles pulled along a
   line, and the line is the year itself. On a narrow screen it stands up
   and becomes a vertical list — the order survives, the row does not. */
.cn-year {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: 2rem 1rem;
    position: relative;
}

.cn-year__station {
    position: relative;
    padding-top: 2.5rem;
}

/* The mark's gradient is not printed into each dot — it is walked across
   them: the first station is the blue of the mark, the last one its cyan,
   and the year is the distance between. Each station also knows the hue of
   the one after it, so the connecting line is the gradient itself rather
   than a line beside it, and the row reads as one unbroken run of colour. */
.cn-year__station:nth-of-type(5n + 1) { --cn-hue: #2563eb; --cn-hue-next: #2b78e4; }
.cn-year__station:nth-of-type(5n + 2) { --cn-hue: #2b78e4; --cn-hue-next: #1990dd; }
.cn-year__station:nth-of-type(5n + 3) { --cn-hue: #1990dd; --cn-hue-next: #0ba4d3; }
.cn-year__station:nth-of-type(5n + 4) { --cn-hue: #0ba4d3; --cn-hue-next: #06b6d4; }
.cn-year__station:nth-of-type(5n + 5) { --cn-hue: #06b6d4; --cn-hue-next: #2563eb; }

.cn-year__station::before {
    content: "";
    position: absolute;
    top: 0.25rem;
    left: 0;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background: var(--cn-hue);
    /* The halo is what makes a 18px dot read as a station rather than as a
       bullet, and it keeps the connecting line from touching the dot. */
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--cn-hue) 16%, transparent);
}

/* The connecting line runs behind the dots, from the first to the last. */
.cn-year__station::after {
    content: "";
    position: absolute;
    top: 0.75rem;
    left: 1.5rem;
    right: -1rem;
    height: 2px;
    background: linear-gradient(90deg, var(--cn-hue), var(--cn-hue-next));
}

.cn-year__station:last-child::after {
    display: none;
}

.cn-year__when {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    /* The station's hue carried into text, pulled towards the page's ink so
       it clears 4.5:1 — the cyan end of the ramp reads at 2.4:1 on white.
       Mixing with the body colour and not with black keeps it working when
       the page is dark and the ink is light. */
    color: color-mix(in srgb, var(--cn-hue) 62%, var(--tblr-body-color));
}

.cn-year__title {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
}

.cn-year__body {
    margin: 0;
    color: var(--tblr-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.cn-year__body p:last-child {
    margin-bottom: 0;
}

@media (max-width: 48rem) {
    .cn-year {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .cn-year__station {
        padding: 0 0 0 2.25rem;
    }

    .cn-year__station::before {
        top: 0.1875rem;
    }

    /* Vertical: the line now runs downwards between the dots, and so does
       the gradient in it. */
    .cn-year__station::after {
        background: linear-gradient(180deg, var(--cn-hue), var(--cn-hue-next));
        top: 1.875rem;
        left: 0.5rem;
        right: auto;
        bottom: -1.5rem;
        width: 2px;
        height: auto;
    }
}

/* ------------------------------------------------------------------ trust */

/* The gradient again, this time washed out far enough to sit under black
   text: blue on the left, cyan on the right, both barely there. */
.cn-trust {
    border-block: 1px solid color-mix(in srgb, var(--cn-blue) 20%, var(--tblr-border-color));
    background: linear-gradient(115deg,
        color-mix(in srgb, var(--cn-blue) 11%, var(--tblr-bg-surface)),
        color-mix(in srgb, var(--cn-cyan) 13%, var(--tblr-bg-surface)));
}

.cn-trust__inner {
    max-width: var(--cn-page);
    margin-inline: auto;
    padding: 3rem 1.25rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 1.75rem;
}

.cn-trust__item {
    display: flex;
    gap: 0.875rem;
}

.cn-trust__item:nth-of-type(4n + 1) { --cn-hue: var(--cn-domain-reports); }
.cn-trust__item:nth-of-type(4n + 2) { --cn-hue: var(--cn-domain-system); }
.cn-trust__item:nth-of-type(4n + 3) { --cn-hue: var(--cn-domain-members); }
.cn-trust__item:nth-of-type(4n + 4) { --cn-hue: var(--cn-domain-dues); }

.cn-trust__title {
    margin: 0 0 0.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
}

.cn-trust__body {
    margin: 0;
    color: var(--tblr-secondary);
    font-size: 0.875rem;
    line-height: 1.55;
}

/* ---------------------------------------------------------------- pricing */

.cn-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 1.25rem;
    align-items: start;
}

.cn-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.75rem 1.5rem;
    border: 1px solid var(--tblr-border-color);
    border-radius: 0.875rem;
    background: var(--tblr-bg-surface);
}

/* The recommended plan carries the brand hairline — the same device the
   sign-in card uses, so the two pages read as one product. */
.cn-plan--highlighted {
    overflow: hidden;
    box-shadow: 0 1px 2px rgb(15 23 42 / 4%), 0 12px 32px -12px rgb(15 23 42 / 12%);
}

.cn-plan--highlighted::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--cn-blue), var(--cn-cyan));
}

.cn-plan__name {
    margin: 0 0 0.25rem;
    font-size: 1.0625rem;
    font-weight: 600;
}

.cn-plan__tagline {
    margin: 0 0 1.25rem;
    min-height: 2.5rem;
    color: var(--tblr-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}

.cn-plan__price {
    margin: 0 0 0.25rem;
    font-size: 2.25rem;
    line-height: 1;
}

.cn-plan__period {
    margin: 0 0 1.5rem;
    color: var(--tblr-secondary);
    font-size: 0.8125rem;
}

/* The other way to pay, under the monthly price it is measured against.
   Quiet: the reader is comparing plans first and payment terms second. */
.cn-plan__yearly {
    margin: -0.25rem 0 1rem;
    font-size: 0.875rem;
    color: var(--tblr-secondary);
}

/* The one figure on the line that is an argument rather than a fact. */
.cn-plan__saving {
    margin-left: 0.375rem;
    padding: 0.0625rem 0.375rem;
    border-radius: 0.25rem;
    background: color-mix(in srgb, var(--cn-domain-books) 14%, transparent);
    color: color-mix(in srgb, var(--cn-domain-books) 75%, var(--tblr-body-color));
    font-weight: 600;
    white-space: nowrap;
}

.cn-plan__limits {
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
    font-size: 0.9375rem;
}

.cn-plan__limits li {
    padding: 0.375rem 0;
    border-bottom: 1px solid var(--tblr-border-color);
}

.cn-plan__limits li:last-child {
    border-bottom: 0;
}

.cn-plan__features {
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
}

.cn-plan__features li {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.1875rem 0;
}

.cn-plan__features li[data-included="no"] {
    color: var(--tblr-secondary);
}

.cn-plan__action {
    margin-top: auto;
}

.cn-plan__footnote {
    max-width: var(--cn-measure);
    margin: 2rem 0 0;
    color: var(--tblr-secondary);
    font-size: 0.875rem;
    line-height: 1.6;
}

/* -------------------------------------------------------------------- faq */

.cn-faq {
    max-width: var(--cn-measure);
}

.cn-faq__item {
    border-bottom: 1px solid var(--tblr-border-color);
}

.cn-faq__item summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}

.cn-faq__item summary::-webkit-details-marker {
    display: none;
}

.cn-faq__item summary:hover,
.cn-faq__item[open] summary {
    color: var(--cn-blue);
}

.cn-faq__item summary::after {
    content: "+";
    flex: none;
    color: var(--cn-blue);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
}

.cn-faq__item[open] summary::after {
    content: "−";
}

.cn-faq__answer {
    padding-bottom: 1.25rem;
    color: var(--tblr-secondary);
    line-height: 1.65;
}

.cn-faq__answer p:last-child {
    margin-bottom: 0;
}

/* ----------------------------------------------------------------- cta band */

/* The mark's gradient at full size, and the only place on the page it is
   more than a line. It closes what the hero opened: the same blue, arriving
   at the cyan it was heading for. */
/* The same gradient as the hero, on the diagonal the mark uses. Nothing
   sits above or below this band, so it can be tilted the whole way. */
.cn-cta {
    background: linear-gradient(135deg, var(--cn-gradient));
    color: #fff;
}

.cn-cta__inner {
    max-width: var(--cn-page);
    margin-inline: auto;
    padding: clamp(3rem, 2rem + 4vw, 5rem) 1.25rem;
    text-align: center;
}

.cn-cta__headline {
    margin: 0 0 0.75rem;
    font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
    color: #fff;
}

.cn-cta__body {
    max-width: 34rem;
    margin: 0 auto 2rem;
    color: rgb(255 255 255 / 88%);
    line-height: 1.65;
}

.cn-cta__body p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------- footer */

.cn-footer {
    border-top: 1px solid var(--tblr-border-color);
}

.cn-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2rem;
    max-width: var(--cn-page);
    margin-inline: auto;
    padding: 2rem 1.25rem;
    font-size: 0.875rem;
}

.cn-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.cn-footer__links a {
    color: var(--tblr-secondary);
    text-decoration: none;
}

.cn-footer__links a:hover,
.cn-footer__links a:focus-visible {
    color: var(--tblr-body-color);
    text-decoration: underline;
}

.cn-footer__languages {
    margin-left: auto;
    display: flex;
    gap: 0.75rem;
}

.cn-footer__languages [aria-current="true"] {
    color: var(--tblr-body-color);
    font-weight: 600;
}

/* The service administration link. A line of its own below the footer,
   quieter than everything above it: the people it is for know it is
   there, and a visitor should read past it without stopping. */
.cn-footer__staff {
    max-width: var(--cn-page);
    margin-inline: auto;
    padding: 0 1.25rem 1.5rem;
    font-size: 0.75rem;
}

.cn-footer__staff a {
    color: var(--tblr-secondary);
    opacity: 0.65;
    text-decoration: none;
}

.cn-footer__staff a:hover,
.cn-footer__staff a:focus-visible {
    opacity: 1;
    text-decoration: underline;
}

/* ---------------------------------------------------------------- prose */

/* Imprint, privacy: long text, one column, generous measure. */
.cn-prose {
    max-width: var(--cn-measure);
    line-height: 1.7;
}

.cn-prose h2 {
    margin-top: 2.5rem;
    font-size: 1.25rem;
}

.cn-prose h3 {
    margin-top: 1.75rem;
    font-size: 1.0625rem;
}

/* --------------------------------------------------------------- motion */

/* One reveal, and only where a section carries a heading. Nothing moves on
   interaction, and nothing moves at all when the visitor asked for stillness. */
@media (prefers-reduced-motion: no-preference) {
    .cn-beta,
    .cn-hero__eyebrow,
    .cn-hero__headline,
    .cn-hero__subline,
    .cn-hero__actions {
        animation: cn-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .cn-hero__headline { animation-delay: 0.05s; }
    .cn-hero__subline { animation-delay: 0.1s; }
    .cn-hero__actions { animation-delay: 0.15s; }
}

@keyframes cn-rise {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
}

/* -------------------------------------------------------------- a11y */

/* Clipped rather than pushed off-screen: a far-off-canvas element still
   counts towards the scrollable area on some engines. */
.cn-skip {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.cn-skip:focus {
    position: static;
    display: inline-block;
    width: auto;
    height: auto;
    clip-path: none;
    margin: 0.5rem;
    padding: 0.5rem 0.875rem;
    border-radius: 0.5rem;
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
}

/* -------------------------------------------------------------- contact */

.cn-contact {
    max-width: 34rem;
}

/* The honeypot field. Hidden from sight and from assistive technology,
   but still submitted — which is exactly what catches a bot that fills
   every input it finds. */
.cn-trap {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

/* ----------------------------------------------------------------- ticker */

.cn-ticker {
    border-bottom: 1px solid var(--tblr-border-color);
    /* White, against both the blue field above it and the tinted paper
       below: the names are the one thing on this page nobody wrote. */
    background: var(--tblr-bg-surface);
    padding-block: 2.5rem;
    /* The track is wider than the page on purpose; this is what keeps the
       page itself from scrolling sideways. */
    overflow: hidden;
}

.cn-ticker__headline {
    max-width: var(--cn-page);
    margin: 0 auto 1.5rem;
    padding-inline: 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    color: var(--tblr-secondary);
}

.cn-ticker__viewport {
    display: flex;
    width: max-content;
    /* Two identical tracks scroll as one, so shifting by half puts the
       second copy exactly where the first began — the reset is invisible. */
    animation: cn-ticker-drift 30s linear infinite;
}

/* Stop on hover or keyboard focus, so a name can actually be read. */
.cn-ticker:hover .cn-ticker__viewport,
.cn-ticker:focus-within .cn-ticker__viewport {
    animation-play-state: paused;
}

.cn-ticker__track {
    display: flex;
    /* Centred, so a club with a logo and one without still line up. */
    align-items: center;
    gap: 2.75rem;
    margin: 0;
    padding: 0 1.375rem;
    list-style: none;
}

.cn-ticker__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    font-family: "Bricolage Grotesque", var(--tblr-font-sans-serif);
    font-size: 1.125rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--cn-blue) 55%, var(--tblr-body-color));
}

/* Logos come in every proportion there is. Fixing the height and letting
   the width follow makes a row of them read as one band rather than as a
   collection of differently-sized pictures. */
.cn-ticker__logo {
    height: 2.25rem;
    width: auto;
    max-width: 9rem;
    object-fit: contain;
}

/* Too few names to drift: the band stands still and sits in the middle,
   because a row that neither moves nor fills its width would otherwise
   hang off the left edge and read as the start of a list that was cut. */
.cn-ticker--still .cn-ticker__viewport {
    width: 100%;
    justify-content: center;
    animation: none;
}

@keyframes cn-ticker-drift {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Motion that cannot be stopped is a problem for some readers. Without it
   the band becomes an ordinary row they can scroll themselves, and the
   duplicated copy would only repeat every name. */
@media (prefers-reduced-motion: reduce) {
    .cn-ticker__viewport {
        width: 100%;
        overflow-x: auto;
        animation: none;
    }

    .cn-ticker__track[aria-hidden="true"] {
        display: none;
    }
}