/* Pages carried over from the old site (templates/page/content.html.twig).
   Same world as the homepage: sky gradient hero, condensed headlines, large
   text for readers aged 40 to 50, photos that open in the lightbox. */

.c-page {
    --c-gap: clamp(2.5rem, 1.6rem + 3.5vw, 5rem);
    padding-bottom: var(--c-gap);
}

/* Hero */

.c-hero {
    position: relative;
    padding-block: clamp(2rem, 1rem + 3vw, 3.5rem) var(--c-gap);
    background:
        radial-gradient(50rem 26rem at 85% 20%, rgba(18, 195, 206, 0.13), transparent 70%),
        linear-gradient(180deg, var(--sky) 0%, #f5f9fd 65%, var(--white) 100%);
}

.c-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 46rem);
    gap: clamp(2rem, 4vw, 4.5rem);
    align-items: center;
}

.c-hero--media .c-hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

.c-hero h1 {
    color: var(--blue);
    font-size: clamp(2.5rem, 1.5rem + 3vw, 4.25rem);
    line-height: 1.02;
    letter-spacing: -0.012em;
    text-wrap: balance;
}

.c-hero--post h1 {
    font-size: clamp(2.25rem, 1.5rem + 2.2vw, 3.5rem);
}

.c-hero-text {
    margin-top: 1.25rem;
    color: var(--ink-soft);
    font-size: var(--step-0);
    line-height: 1.6;
}

.c-hero-text p + p {
    margin-top: 0.9em;
}

.c-hero .actions {
    margin-top: 1.75rem;
}

/* "whole": true keeps a long memorial or bio text next to the photo, set
   in the body size of the page (operator, 2026-09-27, Philipp Sandner). */
.c-hero--whole .c-hero-grid {
    align-items: start;
}

.c-hero--whole .c-hero-text {
    color: var(--ink);
    font-size: var(--step-0);
    line-height: 1.7;
}

/* "title_above": true sets the title over text and photo, across the
   whole container (operator, 2026-09-27, "Academia meets Practitioners",
   21X). On wide screens the first line fills the container; the balanced
   wrap of the other hero titles would split it into two half-width lines. */
.c-hero-title-above {
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

@media (min-width: 64.01rem) {
    .c-hero h1.c-hero-title-above {
        text-wrap: wrap;
    }
}

/* Under a title that spans both columns, text and photo start on the same
   line, as in the feature sections. */
.c-hero--title-above .c-hero-grid {
    align-items: start;
}

.c-hero--title-above .c-hero-copy > .c-hero-text:first-child {
    margin-top: 0;
}

/* Contact hero: the text starts at the top edge of the form (operator,
   2026-09-27). */
.c-hero--form .c-hero-title-above {
    margin-bottom: 1.25rem;
}

.c-hero--form .c-hero-copy > .c-hero-text:first-child {
    margin-top: 0;
}

/* "title_full": true with "title_above" puts the title on one line across
   the screen (operator, 2026-09-27, /frankfurt-main-finance-fmf/). The
   room under it stays as on the TechQuartier page. Below 90rem the line
   is too long for the screen and wraps. */
@media (min-width: 90rem) {
    .c-hero.c-hero--title-full h1 {
        white-space: nowrap;
    }
}

.c-hero-logo {
    display: block;
    width: min(20rem, 70%);
    margin-top: 2rem;
}

.c-hero-logo img {
    display: block;
    width: 100%;
    height: auto;
}

.c-hero-text .c-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2.5rem;
    margin-top: 1.75rem;
}

.c-hero-media {
    margin: 0;
}

.c-hero-media .c-photo {
    aspect-ratio: var(--ratio, 4 / 3);
    box-shadow: 0 30px 60px -34px rgba(13, 20, 51, 0.45);
}

/* The Google Maps link under a place photo, set like a photo caption. */
.c-hero-map {
    margin-top: 0.75rem;
    font-size: 1rem;
}

.c-hero-map a {
    color: var(--ink-soft);
    text-decoration-thickness: 0.06em;
}

.c-hero-map a:hover {
    color: var(--blue);
}

/* The author and license of a free photo, smaller than a caption. */
.c-credit {
    color: var(--ink-soft);
    font-size: 0.8125rem;
}

.c-hero-map .c-credit {
    display: block;
    margin-top: 0.25rem;
}

.c-credit a {
    color: inherit;
}

/* Headers carry no skyline silhouette; the operator found it out of
   place (2026-09-27). The drawn skyline stays on the homepage only. */

/* "gap": "none" on cards right after the header pulls them up to the
   header text, as on /sponsor-an-event/ (operator, 2026-09-27). */
.c-hero:has(+ .c-cards--gap-none) {
    padding-bottom: clamp(1.75rem, 1.2rem + 1.5vw, 2.75rem);
}

.c-hero + .c-cards--gap-none {
    padding-top: 0;
}

/* "sky": a card block at the top of the page takes the hero's gradient,
   so /services/ opens like the other pages (operator, 2026-09-27). */
.c-cards.c-cards--sky {
    padding-block: clamp(2rem, 1rem + 3vw, 3.5rem) var(--c-gap);
    background:
        radial-gradient(50rem 26rem at 85% 20%, rgba(18, 195, 206, 0.13), transparent 70%),
        linear-gradient(180deg, var(--sky) 0%, #f5f9fd 65%, var(--white) 100%);
}

/* Plans: a pricing table. Each plan is a card, and the cards share their
   rows (subgrid), so names, prices, buttons and lists line up. The
   featured plan is the primary blue card with its badge on the top edge;
   never navy (operator, 2026-09-27, /membership/ and /partnerships/). */

.c-plans {
    padding-top: var(--c-gap);
}

/* The plans title is the page's main offer: set at the size of the page
   title, while it stays an h2 under the hero's h1 (operator, 2026-09-27). */
.c-plans-head .c-title {
    font-size: clamp(2.5rem, 1.5rem + 3vw, 4.25rem);
}

.c-plans-head .c-text {
    margin-top: 1rem;
}

.c-plans-head .c-text p {
    max-width: none;
}

.c-plan-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(5, auto);
    gap: 0 clamp(1rem, 2vw, 1.75rem);
    margin: clamp(2.75rem, 5vw, 4rem) 0 0;
    padding: 0;
    list-style: none;
}

.c-plan {
    position: relative;
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    align-content: start;
    padding: clamp(1.75rem, 2.6vw, 2.5rem) clamp(1.25rem, 2.2vw, 2.25rem);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--white);
}

.c-plan.is-featured {
    border-color: var(--blue);
    background: var(--blue);
    color: var(--white);
}

.c-plan-top {
    display: flex;
    align-items: baseline;
}

.c-plan h3 {
    color: var(--blue);
    font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.375rem);
    line-height: 1.04;
}

.c-plan.is-featured h3 {
    color: var(--white);
}

/* The badge sits on the card's top edge, half above it. */
.c-plan-badge {
    position: absolute;
    top: 0;
    left: clamp(1.25rem, 2.2vw, 2.25rem);
    transform: translateY(-50%);
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    background: var(--cyan);
    color: var(--navy);
    font-size: 0.9375rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.c-plan-text {
    margin-top: 0.6rem;
    color: var(--ink-soft);
    font-size: 1.125rem;
    line-height: 1.5;
}

.c-plan.is-featured .c-plan-text {
    color: rgba(255, 255, 255, 0.82);
}

.c-plan-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.6rem;
    margin-top: clamp(1.5rem, 2.6vw, 2.25rem);
    color: var(--navy);
}

.c-plan.is-featured .c-plan-price {
    color: var(--white);
}

.c-plan-price strong {
    font-size: clamp(3.25rem, 2rem + 3.4vw, 5rem);
    font-stretch: var(--condensed);
    font-weight: 850;
    line-height: 0.95;
    letter-spacing: -0.02em;
}

.c-plan-price span {
    color: var(--ink-soft);
    font-size: 1.125rem;
    font-weight: 600;
}

.c-plan-price small {
    flex-basis: 100%;
    margin-top: 0.5rem;
    color: var(--ink-soft);
    font-size: 0.9375rem;
}

.c-plan.is-featured .c-plan-price span,
.c-plan.is-featured .c-plan-price small {
    color: rgba(255, 255, 255, 0.75);
}

.c-plan .button {
    justify-self: stretch;
    justify-content: center;
    margin-top: 1.5rem;
}

.c-plan-items {
    margin: 1.75rem 0 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid var(--rule);
    list-style: none;
    font-size: 1.125rem;
    line-height: 1.5;
}

.c-plan.is-featured .c-plan-items {
    border-top-color: rgba(255, 255, 255, 0.2);
}

.c-plan-items li {
    position: relative;
    padding-left: 1.75rem;
}

.c-plan-items li + li {
    margin-top: 0.7rem;
}

/* A check mark drawn from two borders. */
.c-plan-items li::before {
    content: "";
    position: absolute;
    left: 0.2rem;
    top: 0.3em;
    width: 0.4rem;
    height: 0.75rem;
    border: solid var(--cyan);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

.c-plans-note,
.c-plans-note p {
    max-width: none;
}

/* The note under the plans is fine print: small and gray. */
.c-text.c-plans-note {
    margin-top: clamp(2rem, 4vw, 3rem);
    color: var(--ink-soft);
    font-size: var(--step--1);
    line-height: 1.5;
}

@media (max-width: 64rem) {
    .c-plan-list {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        gap: 2.75rem;
    }

    .c-plan {
        grid-row: auto;
        grid-template-rows: none;
    }
}

/* Contact form: next to the page title on /contact/, below the legal
   text on /legal/. The form sits on white so its fields read clearly on
   the sky gradient. */

.c-hero--form .c-hero-grid,
.c-contact-grid {
    align-items: start;
}

.c-contact {
    padding-top: var(--c-gap);
}

/* The team photo under the contact options on /contact/. */
.c-hero-team {
    margin: 2.25rem 0 0;
}

.c-hero-team .c-photo {
    aspect-ratio: var(--ratio, 5 / 3);
    box-shadow: 0 30px 60px -34px rgba(13, 20, 51, 0.45);
}

.c-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 4vw, 4.5rem);
}

.c-contact-copy .c-title + .c-text {
    margin-top: 1.25rem;
}

.c-hero-form {
    padding: clamp(1.25rem, 2.5vw, 2.25rem);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: 0 30px 60px -34px rgba(13, 20, 51, 0.35);
}

/* Breadcrumb */

/* One quiet line at the top left of the page, above the hero and the
   stage. The current page's title gets cut with an ellipsis instead of
   wrapping. */
.c-crumbs {
    order: -2;
    background: var(--sky);
}

/* The sky tint only joins the crumbs to a hero or stage below; a page
   without one (Engage) keeps a white line. */
.c-page:not(:has(> .c-hero, > .c-stage, > .c-cards--sky)) > .c-crumbs {
    background: none;
}

.c-crumbs ol {
    display: flex;
    align-items: baseline;
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0.625rem var(--gutter) 0;
    list-style: none;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--ink-soft);
    white-space: nowrap;
}

.c-crumbs li:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The slash trails its item, so a wrapped line never starts with one. */
.c-crumbs li:not(:last-child)::after {
    content: "/";
    margin-inline: 0.45rem;
    color: var(--teal);
}

.c-crumbs a {
    color: var(--ink-soft);
    text-decoration: none;
}

.c-crumbs a:hover {
    text-decoration: underline;
}

/* Photos */

.c-photo {
    display: block;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--paper);
    cursor: zoom-in;
}

.c-photo[href$="/"] {
    cursor: pointer;
}

.c-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 900ms var(--ease-out);
}

.c-photo:hover img {
    transform: scale(1.04);
}

/* A label on the photo, as the old site had it: a navy tab in the top left
   corner with a cyan rule under it. */
.c-photo:has(.c-photo-badge) {
    position: relative;
}

.c-photo-badge {
    position: absolute;
    top: 0;
    left: clamp(1rem, 3%, 1.5rem);
    padding: 0.7rem 0.85rem 0.55rem;
    border-bottom: 3px solid var(--cyan);
    border-radius: 0 0 var(--radius) var(--radius);
    background: var(--navy);
    color: var(--white);
    font-size: var(--step--1);
    font-stretch: var(--semi);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
}

/* Course facts (label and value) of a training, in a grid of small cells. */
.c-text .c-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem 1.5rem;
    margin-top: 1.5em;
}

.c-facts > div {
    padding-top: 0.7rem;
    border-top: 2px solid var(--cyan);
}

.c-facts dt {
    color: var(--ink-soft);
    font-size: var(--step--1);
    line-height: 1.3;
}

.c-facts dd {
    margin: 0.2rem 0 0;
    color: var(--navy);
    font-size: var(--step-1);
    font-stretch: var(--semi);
    font-weight: 700;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}

.c-facts + * {
    margin-top: 1.5em;
}

@media (min-width: 40em) {
    .c-text .c-facts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Headings and running text */

.c-title {
    color: var(--blue);
    font-size: clamp(2rem, 1.35rem + 2vw, 3.125rem);
    line-height: 1.04;
    text-wrap: balance;
}

h3.c-title {
    font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.25rem);
}

.c-title--small {
    font-size: var(--step-2);
}

.c-text {
    color: var(--ink);
    font-size: var(--step-0);
    line-height: 1.7;
}

.c-title + .c-text,
.c-title + .c-inline-media {
    margin-top: 1.25rem;
}

.c-text > * + * {
    margin-top: 1em;
}

.c-text h2,
.c-text h3,
.c-text h4 {
    margin-top: 1.6em;
    color: var(--blue);
    font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
    line-height: 1.1;
}

.c-text h4 {
    font-size: var(--step-1);
}

.c-text a {
    overflow-wrap: anywhere;
    color: var(--blue);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

.c-text a:hover {
    text-decoration-thickness: 2px;
}

.c-text ul,
.c-text ol {
    padding-left: 1.3em;
}

.c-text li + li {
    margin-top: 0.4em;
}

.c-text li::marker {
    color: var(--cyan);
}

/* A schedule list has one row per date, with its "Add to cart" at the end. */
.c-text ul:has(> li > .button) {
    padding-left: 0;
    list-style: none;
    border-top: 1px solid var(--rule);
}

.c-text li:has(> .button) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    margin: 0;
    padding-block: 0.75rem;
    border-bottom: 1px solid var(--rule);
}

.c-text li > .button {
    color: var(--white);
    overflow-wrap: normal;
}

.c-text strong {
    font-weight: 700;
    color: var(--navy);
}

.c-text blockquote {
    margin: 1.5em 0;
    padding-left: 1.25rem;
    border-left: 3px solid var(--cyan);
    font-size: var(--step-1);
    color: var(--navy);
}

.c-text img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
}

.c-text iframe {
    width: 100%;
    min-height: 420px;
    border: 0;
}

.c-text table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.125rem;
}

.c-text th,
.c-text td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--rule);
    text-align: left;
    vertical-align: top;
}

.c-measure {
    max-width: 46rem;
}

.c-page .actions {
    margin-top: 1.75rem;
}

/* Feature: photo and text side by side, alternating */

.c-feature {
    padding-top: var(--c-gap);
}

/* "gap": "large" adds room above a feature, as for "Frankfurt: Where
   Money Is (Really) Made" on the TechQuartier page (operator,
   2026-09-27). */
.c-feature.c-feature--gap-large {
    padding-top: calc(var(--c-gap) * 1.75);
}

/* "gap_below": "large" adds the same room under it, as for "Helping You
   To Grow" on /services/ (operator, 2026-09-27). */
.c-feature.c-feature--gap-below {
    padding-bottom: calc(var(--c-gap) * 0.75);
}

.c-feature-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 5vw, 5.5rem);
    align-items: center;
}

.c-feature--flip .c-feature-media {
    order: 2;
}

.c-feature--text .c-feature-grid {
    grid-template-columns: minmax(0, 46rem);
}

.c-feature-media {
    margin: 0;
}

.c-feature-media .c-photo {
    aspect-ratio: var(--ratio, 4 / 3);
}

/* "points": true on a feature without photo sets its h3 sections side by
   side over the full width, each under a cyan rule like the course facts
   ("Good Reasons for CoreLedger", operator 2026-09-27). */
.c-feature--points .c-feature-grid {
    grid-template-columns: minmax(0, 1fr);
}

.c-feature--points .c-feature-copy .c-text {
    max-width: none;
}

.c-feature--points .c-text h3 {
    margin-top: 2.25rem;
    padding-top: 1rem;
    border-top: 2px solid var(--cyan);
    font-size: var(--step-1);
}

.c-feature--points .c-text h3:first-child {
    margin-top: 0;
}

.c-feature--points .c-text h3 + p {
    margin-top: 0.75rem;
}

@media (min-width: 56em) {
    .c-feature--points .c-text {
        display: grid;
        grid-template-rows: auto 1fr;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        column-gap: clamp(2rem, 4vw, 4rem);
    }

    .c-feature--points .c-text h3 {
        margin-top: 0;
    }
}

/* A logo in a photo frame is shown whole on white, never cropped. */
.c-photo--logo {
    background: var(--white);
    box-shadow: inset 0 0 0 1px var(--rule);
}

.c-photo--logo img {
    object-fit: contain;
    padding: 8%;
}

/* "cutout": true sets a graphic with a transparent background straight on
   the section, whole and without frame, fill or shadow (/coreledger/,
   operator 2026-09-27). */
.c-photo.c-photo--cutout {
    overflow: visible;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.c-photo--cutout img {
    object-fit: contain;
    padding: 0;
}

.c-photo--cutout:hover img {
    transform: none;
}

/* "whole": true shows a tall diagram uncut at its own ratio, no taller
   than the text beside it (operator, 2026-09-27). */
.c-feature-media .c-photo--whole {
    aspect-ratio: auto;
    width: fit-content;
    margin-inline: auto;
    background: none;
}

.c-photo--whole img {
    width: auto;
    max-width: 100%;
    max-height: 28rem;
    object-fit: contain;
}

.c-feature-copy .c-text {
    max-width: 44rem;
}

/* "text_wide": true gives the text 60 % and the photo 40 %, and the text
   fills its column (operator, 2026-09-27, NFT Skybar on the TechQuartier
   page). */
@media (min-width: 64.01rem) {
    .c-feature--text-wide .c-feature-grid {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    }

    .c-feature--text-wide.c-feature--flip .c-feature-grid {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }
}

.c-feature--text-wide .c-feature-copy .c-text {
    max-width: none;
}

/* "image_below": true runs the text over the full width and puts the
   logo under it, above the button (operator, 2026-09-27, FS-C4DE on
   /frankfurt-school-blockchain-center/). "wide": true runs a section
   without a photo over the full width ("Bringing Together Leaders" on
   /services/). */
:is(.c-feature--image-below, .c-feature--wide) .c-feature-grid {
    grid-template-columns: minmax(0, 1fr);
}

:is(.c-feature--image-below, .c-feature--wide) .c-feature-copy .c-text,
:is(.c-feature--image-below, .c-feature--wide) .c-text :is(p, ul, ol, li) {
    max-width: none;
}

.c-feature-logo {
    width: min(100%, 20rem);
    margin: 1.75rem 0 0;
}

.c-feature-logo img {
    display: block;
    width: 100%;
    height: auto;
}

/* "half": true gives photo and text the same width, as for the author
   portrait on /building-ai-agents-for-finance/ (operator, 2026-09-27). */
@media (min-width: 64.01rem) {
    .c-feature--half .c-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* "title_above": true sets the heading over photo and text, on one line
   on wide screens (operator, 2026-09-27, "The Right Setting For Market
   Movers" on /about-us/). */
.c-feature-title {
    margin-bottom: clamp(1rem, 1.6vw, 1.5rem);
}

/* Under a heading that spans both columns, photo and text start on the
   same line. */
.c-feature--title-above .c-feature-grid {
    align-items: start;
}

@media (min-width: 64.01rem) {
    .c-feature-title {
        white-space: nowrap;
    }
}

/* A long feature: the photo sits next to the opening paragraphs, and the
   rest of the text follows in the reading column. */

.c-feature--long .c-feature-copy .c-text {
    font-size: var(--step-0);
    line-height: 1.6;
}

/* The rest of a long feature runs the full page width (operator,
   2026-09-27). */
.c-feature-more {
    margin-top: clamp(2rem, 4vw, 3.5rem);
}

.c-feature-more.c-measure,
.c-feature-more p {
    max-width: none;
}

/* Prose */

.c-prose,
.c-buttons,
.c-heading,
.c-image,
.c-video,
.c-embed,
.c-yard,
.c-accordion,
.c-linklist {
    margin: 0;
    padding-top: var(--c-gap);
}

.c-buttons,
.c-prose + .c-prose {
    padding-top: 1.5rem;
}

/* "gap_below": "large" gives a prose block extra room underneath
   (Honoring the Legacy of Philipp Sandner, operator, 2026-09-27). */
.c-prose.c-prose--gap-below {
    padding-bottom: calc(var(--c-gap) * 0.75);
}

/* The email line of "We're here to help!" sits close to the team photos:
   30 % less room, then 40 % less again (operator, 2026-09-27). */
.c-prose.c-prose--tight {
    padding-top: calc(var(--c-gap) * 0.42);
}

/* A prose block that opens with an h2 starts a new section, so it keeps
   the full gap above its heading (operator, 2026-09-27). */
.c-prose + .c-prose:has(h2.c-title) {
    padding-top: var(--c-gap);
}

/* "wide": true lets the text run the full page width, as for the
   Ecosystem Council on /about-us/ (operator, 2026-09-27). */
.c-prose--wide :is(.c-measure, p),
.c-hero--wide .c-hero-text :is(p, li) {
    max-width: none;
}

.c-hero--wide .c-hero-grid {
    grid-template-columns: minmax(0, 1fr);
}

/* "width": "photos" ends the text where the fourth photo of a people grid
   ends. From 79.5rem the grid has five columns, so the text spans four of
   them and three gaps (operator, 2026-09-27, /team/). */
@media (min-width: 79.5rem) {
    .c-hero--photo-width .c-hero-text :is(p, li) {
        max-width: calc(80% - 0.2 * clamp(1.25rem, 2.5vw, 2.25rem));
    }
}

/* Legal pages run one wide section after the other; each heading sits
   closer to the text above it (operator, 2026-09-27). */
.c-prose--wide + .c-prose--wide:has(h2.c-title),
.c-hero--wide + .c-prose--wide:has(h2.c-title) {
    padding-top: clamp(1.75rem, 1.2rem + 1.5vw, 2.75rem);
}

.c-hero--wide:has(+ .c-prose--wide) {
    padding-bottom: 0;
}

/* Two texts side by side, 50:50 from 64rem up, the heading over both
   (operator, 2026-09-27, NFT Skybar). */
.c-split {
    display: grid;
    gap: 1em clamp(2rem, 5vw, 5.5rem);
}

.c-title + .c-split {
    margin-top: 1.25rem;
}

.c-split p {
    max-width: none;
}

@media (min-width: 64.01rem) {
    .c-split {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.c-inline-media {
    margin: 0 0 1.5rem;
}

/* "list_columns": a long list runs in two columns across the page, so
   the eighteen topics of a course read at a glance. */
.c-prose--columns .c-measure {
    max-width: none;
}

@media (min-width: 48rem) {
    .c-prose--columns .c-text ul {
        columns: 2;
        column-gap: clamp(2rem, 5vw, 5.5rem);
    }

    .c-prose--columns .c-text li {
        break-inside: avoid;
    }
}

/* Cards */

.c-cards,
.c-logos,
.c-gallery {
    padding-top: var(--c-gap);
}

/* "gap": "large" adds room above a card group, gallery, prose or logo
   block. /about-us/ uses it for Core Team, Ecosystem Council, the partner
   logos and From Our Blog; the capture 21 page for its gallery
   (operator, 2026-09-27). */
.c-cards.c-cards--gap-large,
.c-gallery.c-gallery--gap-large,
.c-prose.c-prose--gap-large,
.c-logos.c-logos--gap-large {
    padding-top: calc(var(--c-gap) * 1.75);
}

.c-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: clamp(1.75rem, 3vw, 2.75rem) clamp(1.25rem, 2.5vw, 2.25rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.c-card a {
    display: grid;
    align-content: start;
    gap: 1rem;
    height: 100%;
    color: var(--ink);
    text-decoration: none;
}

.c-card-photo {
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    background: var(--paper);
}

.c-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 900ms var(--ease-out);
}

.c-card a:hover .c-card-photo img {
    transform: scale(1.05);
}

.c-card-body {
    display: grid;
    align-content: start;
    gap: 0.4rem;
}

.c-card :is(h2, h3) {
    position: relative;
    padding-bottom: 0.6rem;
    color: var(--blue);
    font-size: 1.625rem;
    line-height: 1.08;
}

.c-card :is(h2, h3)::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 2.25rem;
    height: 3px;
    background: var(--cyan);
    transition: width 500ms var(--ease-out);
}

.c-card a:hover :is(h2, h3) {
    color: var(--blue);
}

.c-card a:hover :is(h2, h3)::after {
    width: 100%;
}

.c-card-text {
    color: var(--ink-soft);
    font-size: 1.125rem;
    line-height: 1.55;
}

.c-card-meta {
    color: var(--ink-soft);
    font-size: 1rem;
}

.c-cards--people .c-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}

.c-cards--people .c-card-photo {
    position: relative;
    aspect-ratio: 1;
}

/* On hover a 6px cyan frame draws in and the photo zooms to 112 %, more
   than a post photo does (operator, 2026-09-27). */
.c-cards--people .c-card-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 0 var(--cyan);
    pointer-events: none;
    transition: box-shadow 350ms var(--ease-out);
}

.c-cards--people .c-card-photo img {
    transition-duration: 600ms;
}

.c-cards--people .c-card a:is(:hover, :focus-visible) .c-card-photo::after {
    box-shadow: inset 0 0 0 6px var(--cyan);
}

.c-cards--people .c-card a:is(:hover, :focus-visible) .c-card-photo img {
    transform: scale(1.12);
}

.c-cards--list .c-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}

.c-cards--list .c-card-photo {
    aspect-ratio: 16 / 10;
}

.c-cards--list .c-card :is(h2, h3) {
    font-size: 1.5rem;
}

/* Long lists (blog, news): the newest entry opens the list across two
   columns, like the lead story of a magazine page. */

@media (min-width: 64rem) {
    .c-cards--list:not(.c-cards--people, .c-cards--after-stage) .c-card:first-child:has(.c-card-photo img) {
        grid-column: span 2;
    }

    .c-cards--list:not(.c-cards--people, .c-cards--after-stage) .c-card:first-child:has(.c-card-photo img) .c-card-photo {
        aspect-ratio: 16 / 8.2;
    }

    .c-cards--list:not(.c-cards--people, .c-cards--after-stage) .c-card:first-child:has(.c-card-photo img) :is(h2, h3) {
        font-size: clamp(2rem, 1.2rem + 1.6vw, 2.75rem);
    }

    .c-cards--list:not(.c-cards--people, .c-cards--after-stage) .c-card:first-child:has(.c-card-photo img) .c-card-text {
        font-size: var(--step-1);
    }
}

/* Logos */

.c-logos .logo-field {
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 1rem 2rem;
    margin-bottom: 0;
}

/* Partner logos in page content come as 4:3 canvases with the mark in the
   middle; shown at the tile's full width they read at a normal size. */
.c-logos .logo-field a,
.c-logos .logo-field span {
    min-height: 0;
}

.c-logos .logo-field img {
    width: 100%;
    max-width: 15rem;
    height: auto;
    object-fit: contain;
}

/* On a phone the partner logos sit four to a row, so more of them fit on
   one screen (operator, 2026-09-27). */
@media (max-width: 40rem) {
    .c-logos .logo-field {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.25rem 0.75rem;
    }
}

/* Gallery */

.c-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.75rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.c-gallery-grid a {
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    background: var(--paper);
    cursor: zoom-in;
}

.c-gallery-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 900ms var(--ease-out);
}

.c-gallery-grid a:hover img {
    transform: scale(1.05);
}

/* Media and embeds */

.c-image figcaption,
.c-feature-media figcaption {
    margin-top: 0.6rem;
    color: var(--ink-soft);
    font-size: 1rem;
}

/* A photo caption in a feature hangs under the photo, so the text next to
   it centers on the photo alone (operator, 2026-09-27, /services/). Once
   the columns stack, it stays in the flow. */
@media (min-width: 64.01rem) {
    .c-feature-media:has(figcaption) {
        position: relative;
    }

    .c-feature-media figcaption {
        position: absolute;
        top: 100%;
        left: 0;
    }
}

.c-video video {
    display: block;
    width: 100%;
    max-width: 64rem;
    border-radius: var(--radius);
    background: var(--navy);
}

.c-frame {
    max-width: 64rem;
}

.c-frame iframe {
    display: block;
    width: 100%;
    height: min(var(--h, 900px), 1400px);
    border: 0;
    border-radius: var(--radius);
    background: var(--white);
}

.c-frame--video iframe {
    height: auto;
    aspect-ratio: 16 / 9;
}

.c-yard .yard {
    min-height: 12rem;
}

/* "title" on a yard block: the heading sits right over the calendar
   (operator, 2026-09-27, /events/). */
.c-yard-title {
    margin-bottom: 1.5rem;
}

/* Under the hero, the hero's bottom padding alone sets the gap to the
   calendar title: 76 px instead of 152 (operator, 2026-09-27, /events/). */
.c-hero + .c-yard:has(.c-yard-title) {
    padding-top: 0;
}

/* "gap": "large" on a yard block, as for "Our Past Events" on /events/
   (operator, 2026-09-27). Same room as a feature with that gap. */
.c-yard.c-yard--gap-large {
    padding-top: calc(var(--c-gap) * 1.75);
}

/* yard.js draws the calendar wider than the phone screen for a moment. */
.c-yard {
    overflow-x: clip;
}

/* Accordion */

.c-accordion details {
    border-top: 1px solid var(--rule);
}

.c-accordion details:last-child {
    border-bottom: 1px solid var(--rule);
}

.c-accordion summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 56px;
    padding: 0.9rem 0;
    color: var(--navy);
    font-size: var(--step-1);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.c-accordion summary::-webkit-details-marker {
    display: none;
}

.c-accordion summary::after {
    content: "+";
    color: var(--blue);
    font-size: 1.75rem;
    line-height: 1;
    transition: transform 300ms var(--ease-out);
}

.c-accordion details[open] summary::after {
    transform: rotate(45deg);
}

.c-accordion details .c-text {
    padding-bottom: 1.25rem;
}

/* Link lists */

/* auto-fit: three lists share the full width, with no empty fourth
   column (operator, 2026-09-27, /academy/). */
.c-linklist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 2rem 3rem;
}

.c-linklist ul {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.c-linklist li {
    border-top: 1px solid var(--rule);
}

.c-page [id] {
    scroll-margin-top: calc(var(--header-h, 5rem) + 1.5rem);
}

.c-linklist span {
    display: flex;
    align-items: center;
    min-height: 48px;
    color: var(--ink);
    font-size: var(--step-0);
}

.c-linklist a {
    display: flex;
    align-items: center;
    min-height: 48px;
    color: var(--ink);
    font-size: var(--step-0);
    text-decoration: none;
}

.c-linklist a:hover {
    color: var(--blue);
}

/* Error pages (templates/bundles/TwigBundle/Exception/): the content hero
   with more room, so a short message does not leave the footer floating. */

.c-error .c-hero {
    padding-block: clamp(3rem, 1.5rem + 6vw, 7rem) clamp(2rem, 1rem + 3vw, 3.5rem);
}

.c-error .c-hero-text {
    max-width: 40rem;
}

.c-error .c-prose {
    padding-bottom: clamp(3rem, 1.5rem + 5vw, 6rem);
}

.c-error-code {
    margin-top: 2rem;
    color: var(--ink-soft);
    font-size: var(--step--1);
    font-variant-numeric: tabular-nums;
}

/* Search page */

.c-search-form {
    display: flex;
    gap: 0.75rem;
    max-width: 46rem;
    margin-top: 1.5rem;
}

.c-search-form input {
    flex: 1;
    min-width: 0;
    min-height: 56px;
    padding: 0 1.1rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--ink);
    font: inherit;
    font-size: var(--step-0);
}

/* The knowledge hub pages: search field in the header, "BETA" next to the title. */
.c-hero-search {
    position: relative;
    z-index: 1;
    margin-top: 2rem;
}

.c-hero-badge {
    margin-left: 0.15em;
    font-family: var(--font);
    font-size: max(0.26em, 0.8rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--cyan);
    vertical-align: super;
}

.c-search-form input:focus {
    outline: 2px solid var(--cyan);
    outline-offset: 1px;
}

.c-results {
    display: grid;
    gap: 0;
    max-width: 58rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.c-results li {
    border-top: 1px solid var(--rule);
}

.c-results a {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1.25rem 0;
    color: var(--ink);
    text-decoration: none;
}

.c-results .ph {
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    background: var(--paper);
}

/* A result without a photo shows the skyline instead of an empty box. */
.c-results .ph:empty {
    position: relative;
}

.c-results .ph:empty::after {
    content: "";
    position: absolute;
    inset: 15% 0 0;
    background: linear-gradient(100deg, var(--blue), var(--cyan));
    opacity: 0.3;
    -webkit-mask: url("../images/frankfurt-skyline-EI0R-bq.svg") bottom center / cover no-repeat;
    mask: url("../images/frankfurt-skyline-EI0R-bq.svg") bottom center / cover no-repeat;
}

.c-results .ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c-results h2 {
    color: var(--blue);
    font-size: 1.625rem;
    line-height: 1.1;
}

.c-results a:hover h2 {
    color: var(--blue);
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.c-results p {
    margin-top: 0.35rem;
    color: var(--ink-soft);
    font-size: 1.125rem;
    line-height: 1.5;
}

@media (max-width: 64rem) {
    .c-hero--media .c-hero-grid,
    .c-contact-grid,
    .c-feature-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .c-feature--flip .c-feature-media {
        order: 0;
    }
}

@media (max-width: 40rem) {
    .c-results a {
        grid-template-columns: 5rem minmax(0, 1fr);
        gap: 1rem;
    }

    .c-results h2 {
        font-size: 1.375rem;
    }

    .c-card-grid,
    .c-cards--list .c-card-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .c-cards--people .c-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .c-cards--people .c-card :is(h2, h3) {
        font-size: 1.25rem;
    }

    .c-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .c-search-form {
        flex-wrap: wrap;
    }

    .c-search-form .button {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .c-photo img,
    .c-card-photo img,
    .c-cards--people .c-card-photo::after,
    .c-gallery-grid img {
        transition: none;
    }
}

/* Blog stage: the newest post on navy, photo left, title and teaser right. */

.c-stage {
    position: relative;
    overflow: hidden;
    margin-top: var(--c-gap);
    padding-block: clamp(2.5rem, 5vw, 4.5rem);
    background:
        radial-gradient(45rem 30rem at 85% 110%, rgba(18, 195, 206, 0.3), transparent 70%),
        linear-gradient(150deg, var(--navy) 0%, #152463 75%, var(--blue) 140%);
    color: var(--white);
}

.c-stage-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: clamp(1.75rem, 4vw, 4rem);
}

.c-stage-photo {
    display: block;
    overflow: hidden;
    border-radius: var(--radius);
    aspect-ratio: 16 / 10;
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.6);
}

.c-stage-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 900ms var(--ease-out);
}

.c-stage-photo:hover img {
    transform: scale(1.04);
}

.c-stage-copy {
    display: grid;
    justify-items: start;
    gap: 1.25rem;
}

.c-stage h2 {
    font-size: clamp(2rem, 1.1rem + 2.2vw, 3.25rem);
    line-height: 1.05;
}

.c-stage h2 a {
    color: var(--white);
    text-decoration: none;
    background: linear-gradient(var(--cyan), var(--cyan)) no-repeat 0 100% / 0 3px;
    transition: background-size 500ms var(--ease-out);
}

.c-stage h2 a:hover {
    background-size: 100% 3px;
}

.c-stage p {
    max-width: 44ch;
    color: rgba(255, 255, 255, 0.86);
    font-size: var(--step-1);
    line-height: 1.5;
}

.c-stage + .c-cards {
    padding-top: var(--c-gap);
}

@media (max-width: 56rem) {
    .c-stage-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .c-stage-photo img,
    .c-stage h2 a {
        transition: none;
    }
}

/* On a page with a stage the stage comes first on screen, directly under
   the header; the page title and the grid follow. The h1 stays first in
   the markup. */
.c-page:has(> .c-stage) {
    display: flex;
    flex-direction: column;
}

.c-page > .c-stage {
    order: -1;
    margin-top: 0;
}

/* The crumbs lie on the navy stage. A sky strip above the stage looked
   broken (operator, 2026-09-27). */
.c-page:has(> .c-stage) {
    position: relative;
}

.c-page:has(> .c-stage) > .c-crumbs {
    position: absolute;
    inset: 0 0 auto;
    z-index: 1;
    background: none;
}

.c-page:has(> .c-stage) > .c-crumbs ol {
    padding-top: 0.875rem;
    color: rgba(255, 255, 255, 0.72);
}

.c-page:has(> .c-stage) > .c-crumbs a {
    color: rgba(255, 255, 255, 0.72);
}

.c-page:has(> .c-stage) > .c-crumbs a:hover {
    color: var(--white);
}

.c-page:has(> .c-stage) > .c-crumbs li::after {
    color: var(--cyan);
}

.c-page:has(> .c-stage) > .c-stage {
    padding-top: calc(clamp(2.5rem, 5vw, 4.5rem) + 0.75rem);
}

/* The grid starts close under the page title (operator, 2026-09-27). */
.c-page:has(> .c-stage) > .c-hero {
    padding-bottom: 0;
    background: linear-gradient(180deg, var(--sky) 0%, var(--white) 100%);
}

.c-page > .c-stage + .c-cards {
    padding-top: clamp(1.75rem, 1rem + 2vw, 2.75rem);
}

/* Blog posts use the full page width (operator, 2026-09-27; a centered
   46rem column was rejected the same day). Every block starts on the left
   edge of the page grid, so the text never moves in from one section to
   the next. A photo stands right of its text; a wide diagram (ratio 2 or
   more) runs under its text across the full width. */
.c-page--post .c-measure,
.c-page--post .c-feature-copy .c-text,
.c-page--post .c-text :is(p, ul, ol, li, blockquote) {
    max-width: none;
}

/* Text and photo share a vertical center (operator, 2026-09-27). */
.c-page--post .c-feature-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
}

.c-page--post .c-feature-media,
.c-page--post .c-feature--flip .c-feature-media {
    order: 2;
}

.c-page--post .c-feature--long .c-feature-copy .c-text {
    font-size: var(--step-0);
    line-height: 1.7;
}

.c-page--post .c-feature--text .c-feature-grid,
.c-page--post .c-feature--panorama .c-feature-grid {
    grid-template-columns: minmax(0, 1fr);
}

.c-page--post .c-feature-media .c-photo--whole img {
    max-height: min(46rem, 88vh);
}

/* A section that goes on without a heading continues the text above. */
.c-page--post > :is(.c-feature, .c-prose):not(:has(.c-title)) {
    padding-top: clamp(2rem, 1.4rem + 2vw, 3rem);
}

/* The author box: portrait and text in two equal columns. */
@media (min-width: 64.01rem) {
    .c-page--post .c-feature--half .c-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: center;
    }
}

@media (max-width: 64rem) {
    .c-page--post .c-feature-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Findings of the design review of 2026-09-27. Full-width lines run to
   about 125 characters, so the body text is set a step larger. */
.c-page--post .c-text,
.c-page--post .c-feature--long .c-feature-copy .c-text {
    font-size: clamp(1.25rem, 0.9rem + 0.75vw, 1.5rem);
    line-height: 1.75;
    text-wrap: pretty;
}

/* The hero uses the 7:5 grid of the sections below, so its photo starts
   on the same edge as every other photo, and the text follows closer. */
.c-page--post > .c-hero {
    padding-bottom: clamp(1rem, 0.5rem + 1.5vw, 2rem);
}

@media (min-width: 64.01rem) {
    .c-page--post .c-hero--media .c-hero-grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: clamp(2rem, 5vw, 5.5rem);
        align-items: center;
    }
}

/* "From Our Blog" keeps the largest gap of the page. */
.c-page--post > .c-cards--gap-large {
    padding-top: calc(var(--c-gap) * 2.25);
}

/* An upright poster or portrait next to a short text stays narrow. */
.c-page--post .c-feature--upright:not(.c-feature--half) .c-feature-media {
    max-width: 26rem;
}

/* Bold words inside a link keep the link color. */
.c-text a strong {
    color: inherit;
}

/* The breadcrumb links get a 44px tall tap area without moving. */
.c-crumbs a {
    position: relative;
}

.c-crumbs a::after {
    content: "";
    position: absolute;
    inset: -0.9rem -0.25rem;
}

/* Offer pages: /sponsor-a-meetup/, /sponsor-a-webinar/, /host-an-event/
   and their German twins (operator, 2026-09-27). A format rail under the
   header, then the offer: what the buyer gets on the left as a term sheet,
   the blue order card on the right with the cart's prices. */

.c-formats {
    padding-top: clamp(2rem, 1.4rem + 2vw, 3.25rem);
}

/* Right under the header the rail needs no room of its own. */
.c-hero + .c-formats {
    padding-top: 0;
}

.c-formats-intro {
    margin-bottom: 0.9rem;
    font-size: var(--step-0);
}

.c-formats-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    list-style: none;
}

.c-formats-list li + li {
    border-left: 1px solid var(--rule);
}

.c-format {
    display: grid;
    gap: 0.2rem;
    height: 100%;
    padding: 1.1rem clamp(1rem, 1.6vw, 1.5rem);
    background: var(--white);
    color: var(--ink);
    text-decoration: none;
    transition: background-color 200ms var(--ease-out);
}

.c-format:hover {
    background: var(--sky);
}

.c-format-name {
    color: var(--blue);
    font-size: var(--step-1);
    font-weight: 800;
    font-stretch: var(--semi);
    line-height: 1.2;
}

.c-format-meta {
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.4;
}

/* The format of this page: primary blue, with the cyan rule of the photo
   badges (operator, 2026-09-27). */
.c-format.is-current {
    background: var(--blue);
    box-shadow: inset 0 3px 0 var(--cyan);
    cursor: default;
}

.c-format.is-current .c-format-name {
    color: var(--white);
}

.c-format.is-current .c-format-meta {
    color: rgba(255, 255, 255, 0.78);
}

.c-offer {
    padding-top: var(--c-gap);
}

.c-offer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 26rem);
    gap: clamp(2rem, 5vw, 5.5rem);
    align-items: start;
}

.c-offer-lead {
    margin-top: 1.25rem;
}

.c-offer-photo {
    margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
}

.c-offer-photo .c-photo {
    aspect-ratio: 16 / 9;
}

/* The term sheet: one row per thing the buyer gets. */
.c-terms {
    margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
    border-bottom: 1px solid var(--rule);
}

.c-term {
    display: grid;
    grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr);
    gap: 0.3rem 2rem;
    padding: 1.1rem 0;
    border-top: 1px solid var(--rule);
    font-size: var(--step-0);
    line-height: 1.5;
}

.c-term dt {
    color: var(--navy);
    font-weight: 800;
    font-stretch: var(--semi);
}

.c-term dd {
    margin: 0;
}

.c-order {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
    container-type: inline-size;
}

.c-order-card {
    display: grid;
    padding: clamp(1.5rem, 2.4vw, 2.25rem);
    border-radius: var(--radius);
    background: var(--blue);
    color: var(--white);
    box-shadow: 0 28px 50px -30px rgba(33, 63, 154, 0.6);
}

.c-order-card h3 {
    color: var(--white);
    font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.25rem);
}

.c-order-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.5rem;
    margin-top: 1rem;
}

.c-order-price strong {
    font-size: clamp(2.75rem, 1.8rem + 2.6vw, 4rem);
    font-weight: 850;
    font-stretch: var(--condensed);
    font-variant-numeric: tabular-nums;
    line-height: 0.95;
    letter-spacing: -0.02em;
    transition: color 250ms var(--ease-out);
}

/* The date the card sells, under its title. */
.c-order-date {
    margin-top: 0.5rem;
    color: rgba(255, 255, 255, 0.86);
    font-size: 1.125rem;
    font-weight: 700;
}

/* With add-ons ticked the total turns cyan, so the change is seen. */
.c-order-card.has-addons .c-order-price strong {
    color: var(--cyan);
}

.c-order-prefix {
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.125rem;
    font-weight: 600;
}

.c-order-unit {
    flex-basis: 100%;
    margin-top: 0.4rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1rem;
}

.c-order-addons {
    margin: 1.5rem 0 0;
    padding: 1.25rem 0 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.c-order-addons legend {
    float: left;
    width: 100%;
    margin-bottom: 0.35rem;
    padding: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1rem;
    font-weight: 700;
}

.c-addon {
    clear: both;
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: start;
    padding: 0.7rem 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    line-height: 1.4;
    cursor: pointer;
}

.c-addon + .c-addon {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.c-addon input {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0.05rem 0 0;
    accent-color: var(--cyan);
    cursor: pointer;
}

.c-addon input:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 3px;
}

.c-addon:hover {
    color: var(--white);
}

.c-addon-price {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.c-addon:has(input:checked) .c-addon-price {
    color: var(--cyan);
}

.c-order-card .button {
    justify-content: center;
    margin-top: 1.5rem;
}

.c-order-note {
    margin-top: 0.9rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.9375rem;
}

/* One line under the card (operator, 2026-09-27); the size follows the
   card width so the longer German line fits too. */
.c-order-claim {
    margin-top: 1.25rem;
    color: var(--blue);
    font-size: min(1.5rem, 5.4cqi);
    font-weight: 850;
    font-stretch: var(--condensed);
    line-height: 1.1;
    white-space: nowrap;
}

/* The questions line sits close to the team cards above it (operator,
   2026-09-27). */
.c-offer ~ .c-cards--people + .c-prose {
    padding-top: clamp(0.8rem, 0.65rem + 0.5vw, 1.125rem);
}

@media (max-width: 64rem) {
    .c-offer-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .c-order {
        position: static;
        max-width: 34rem;
    }
}

@media (max-width: 48rem) {
    .c-formats-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .c-formats-list li + li {
        border-top: 1px solid var(--rule);
        border-left: 0;
    }

    .c-term {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Search results page: the results start close under the search field
   (operator, 2026-09-27: about two thirds less space). */
.c-page--search .c-hero {
    padding-bottom: 1.5rem;
}

.c-page--search .c-prose {
    padding-top: 1.5rem;
}

/* "From Our Blog" on phones: one row that swipes sideways. Each post is
   75% of the screen wide, so the next one shows at the right edge; the
   row runs to the screen edge and snaps each post to the text edge.
   swipe_controller.js adds the dots under the row (operator, 2026-09-27). */
.swipe-dots {
    display: none;
}

@media (max-width: 40rem) {
    .post-list,
    .c-cards--swipe .c-card-grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 75%;
        gap: 1rem;
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gutter);
        scrollbar-width: none;
    }

    .post-list::-webkit-scrollbar,
    .c-cards--swipe .c-card-grid::-webkit-scrollbar {
        display: none;
    }

    /* Mouse drag (swipe controller): snapping waits until the drag ends. */
    @media (pointer: fine) {
        .post-list,
        .c-cards--swipe .c-card-grid {
            cursor: grab;
        }
    }

    .post-list.is-dragging,
    .c-cards--swipe .c-card-grid.is-dragging {
        cursor: grabbing;
        scroll-snap-type: none;
        user-select: none;
    }

    .post-list > li,
    .c-cards--swipe .c-card {
        scroll-snap-align: start;
    }

    .swipe-dots {
        display: flex;
        justify-content: center;
        margin-top: 0.5rem;
    }

    .swipe-dots button {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
    }

    .swipe-dots button::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 4px;
        background: var(--rule);
        transition: width 300ms var(--ease-out), background-color 300ms var(--ease-out);
    }

    .swipe-dots button[aria-current]::before {
        width: 24px;
        background: var(--blue);
    }

    .swipe-dots button:focus-visible {
        outline: 3px solid var(--cyan);
        outline-offset: -6px;
        border-radius: var(--radius);
    }
}

@media (prefers-reduced-motion: reduce) {
    .swipe-dots button::before {
        transition: none;
    }
}