/* Market page layouts: the public website (ADR-016; Figma: Navigation / Public header, Public solutions menu, Public menu sheet,
   Public footer; Marketing / Hero, Office check, Proof point, Section head, Service card, Product preview, Feature panel, Pricing
   calculator, Accountability item, Day tab, Day panel, Feedback panel, Access panel, Page hero, CTA band, Contact card). Loaded by
   _MarketPublicLayout only. Page layout only; shared components live in citybites.market.components.css. Tokens only. */

body:has(> .cb-mk-public) { margin: 0; }
.cb-mk-public {
    --_cb-mk-public-gutter: var(--cb-mk-space-5);
    --_cb-mk-public-header: 4rem;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: clip;
    background: var(--cb-mk-color-bg-page);
}
.cb-mk-public-main { flex: 1; outline: none; }
.cb-mk-public-main [id] { scroll-margin-top: calc(var(--_cb-mk-public-header) + var(--cb-mk-space-5)); }
.cb-mk-public-frame { width: min(100% - 2 * var(--_cb-mk-public-gutter), 80rem); margin-inline: auto; }
.cb-mk-public .text-muted { margin: 0; color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }

/* Small shared pieces */
.cb-mk-public-tile { display: inline-grid; flex: none; place-items: center; width: var(--cb-mk-size-40); height: var(--cb-mk-size-40); border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-accent-soft); color: var(--cb-mk-color-text-brand); }
.cb-mk-public-arrow { display: inline-flex; align-items: center; gap: var(--cb-mk-space-2); width: fit-content; color: var(--cb-mk-color-text-brand); font: var(--cb-mk-text-label-m); text-decoration: none; }
a.cb-mk-public-arrow:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.cb-mk-public-note { display: flex; align-items: flex-start; gap: var(--cb-mk-space-3); margin: 0; color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }
.cb-mk-public-note > .cb-mk-icon { margin-top: var(--cb-mk-space-1); }
.cb-mk-public-tag { align-self: flex-start; padding: var(--cb-mk-space-2) var(--cb-mk-space-4); border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-accent); color: var(--cb-mk-color-text-on-accent); font: var(--cb-mk-text-label-s); }
.cb-mk-public-checks { display: flex; flex-direction: column; gap: var(--cb-mk-space-3); margin: 0; padding: 0; list-style: none; font: var(--cb-mk-text-body-s); }
.cb-mk-public-checks > li { display: flex; align-items: flex-start; gap: var(--cb-mk-space-3); }
.cb-mk-public-checks .cb-mk-icon { margin-top: var(--cb-mk-space-1); color: var(--cb-mk-color-text-brand); }
.cb-mk-public-checks--inverse { gap: var(--cb-mk-space-4); font: var(--cb-mk-text-body-m); }
.cb-mk-public-checks--inverse .cb-mk-icon { margin-top: 0; color: var(--cb-mk-color-bg-accent); }
.cb-mk-public-summary.validation-summary-valid { display: none; }
.cb-mk-public-summary.validation-summary-errors { padding: var(--cb-mk-space-4) var(--cb-mk-space-5); border-radius: var(--cb-mk-radius-field); background: var(--cb-mk-color-bg-danger-soft); color: var(--cb-mk-color-text-danger); font: var(--cb-mk-text-label-s); }
.cb-mk-public-summary ul { margin: 0; padding: 0; list-style: none; }

/* Header (Figma: Navigation / Public header) */
.cb-mk-public-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--cb-mk-color-border-default); background: var(--cb-mk-color-bg-surface); }
.cb-mk-public-header__inner { display: flex; align-items: center; gap: var(--cb-mk-space-8); min-height: var(--_cb-mk-public-header); }
.cb-mk-public-brand { display: inline-flex; flex: none; align-items: center; gap: var(--cb-mk-space-3); color: var(--cb-mk-color-text-primary); font: var(--cb-mk-text-heading-4); letter-spacing: var(--cb-mk-tracking-heading-4); text-decoration: none; }
.cb-mk-public-brand--on-inverse { color: var(--cb-mk-color-text-on-inverse); }
.cb-mk-public-nav { display: none; align-items: center; gap: var(--cb-mk-space-2); }
.cb-mk-public-nav__menu { position: relative; }
.cb-mk-public-nav__link { display: inline-flex; align-items: center; gap: var(--cb-mk-space-2); min-height: var(--cb-mk-control-height-sm); padding: 0 var(--cb-mk-space-4); border: 0; border-radius: var(--cb-mk-radius-full); background: none; color: var(--cb-mk-color-text-primary); font: var(--cb-mk-text-label-m); text-decoration: none; cursor: pointer; transition: background-color var(--cb-mk-motion-fast) var(--cb-mk-motion-ease); }
.cb-mk-public-nav__link:hover,
.cb-mk-public-nav__link[aria-expanded="true"] { background: var(--cb-mk-color-bg-sunken); }
.cb-mk-public-nav__link > .cb-mk-icon { color: var(--cb-mk-color-text-secondary); transition: transform var(--cb-mk-motion-base) var(--cb-mk-motion-ease); }
.cb-mk-public-nav__link[aria-expanded="true"] > .cb-mk-icon { transform: rotate(180deg); }
.cb-mk-public-header__actions { display: flex; flex: none; align-items: center; gap: var(--cb-mk-space-3); margin-left: auto; }
.cb-mk-public-header__wide { display: none; }

/* Solutions menu (Figma: Navigation / Public solutions menu) */
.cb-mk-public-menu { position: absolute; top: calc(100% + var(--cb-mk-space-3)); left: 0; z-index: 30; display: flex; flex-direction: column; gap: var(--cb-mk-space-2); width: 27.5rem; padding: var(--cb-mk-space-3); border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-card); background: var(--cb-mk-color-bg-raised); box-shadow: var(--cb-mk-shadow-overlay); }
.cb-mk-public-menu__head { display: flex; flex-direction: column; gap: var(--cb-mk-space-2); padding: var(--cb-mk-space-4) var(--cb-mk-space-4) var(--cb-mk-space-3); }
.cb-mk-public-menu__link { display: flex; align-items: flex-start; gap: var(--cb-mk-space-4); padding: var(--cb-mk-space-3) var(--cb-mk-space-4); border-radius: var(--cb-mk-radius-md); color: inherit; text-decoration: none; }
.cb-mk-public-menu__link:hover { background: var(--cb-mk-color-bg-accent-soft); }
.cb-mk-public-menu__link:hover .cb-mk-public-tile { background: var(--cb-mk-color-bg-accent); }
.cb-mk-public-menu__copy { display: flex; flex-direction: column; gap: var(--cb-mk-space-1); min-width: 0; }
.cb-mk-public-menu__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--cb-mk-space-4); margin-top: var(--cb-mk-space-2); padding: var(--cb-mk-space-4) var(--cb-mk-space-4) var(--cb-mk-space-3); border-top: 1px solid var(--cb-mk-color-border-default); }

/* The hero and the access panel: an inset forest panel with a photo under the sign-in forest wash (Marketing / Hero) */
.cb-mk-public-hero,
.cb-mk-public-access { position: relative; isolation: isolate; overflow: hidden; width: min(100% - 2 * var(--cb-mk-space-5), 88rem); margin-inline: auto; border-radius: var(--cb-mk-radius-2xl); background: var(--cb-mk-color-bg-brand); color: var(--cb-mk-color-text-on-brand); }
.cb-mk-public-hero { margin-top: var(--cb-mk-space-5); }
.cb-mk-public-hero::after,
.cb-mk-public-access::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in srgb, var(--cb-mk-color-bg-brand) 92%, transparent) 0%, color-mix(in srgb, var(--cb-mk-color-bg-brand) 62%, transparent) 100%); }
.cb-mk-public-hero__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.cb-mk-public-hero__grid { display: grid; gap: var(--cb-mk-space-7); padding: var(--cb-mk-space-8) var(--cb-mk-space-7) var(--cb-mk-space-7); }
.cb-mk-public-hero__copy { display: flex; flex-direction: column; gap: var(--cb-mk-space-7); min-width: 0; }
.cb-mk-public-hero__title em,
.cb-mk-public-access__title em { display: block; color: var(--cb-mk-color-bg-accent); font-style: normal; }
.cb-mk-public-hero__lead { font: var(--cb-mk-text-body-l); }
.cb-mk-public-hero__lead strong { font-weight: 600; }
.cb-mk-public-hero__note { opacity: 0.8; font: var(--cb-mk-text-caption); }

/* Office check (Figma: Marketing / Office check) */
.cb-mk-public-check { display: flex; flex-direction: column; gap: var(--cb-mk-space-3); }
.cb-mk-public-check__label { font: var(--cb-mk-text-label-s); }
.cb-mk-public-check__row { display: flex; flex-direction: column; gap: var(--cb-mk-space-3); }
.cb-mk-public-check__row > .cb-mk-button { width: 100%; }
.cb-mk-public-check__field { display: flex; flex: 1; align-items: center; gap: var(--cb-mk-space-3); min-width: 0; padding-inline: var(--cb-mk-space-5); border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-surface); color: var(--cb-mk-color-text-secondary); }
.cb-mk-public-check__input { flex: 1; min-width: 0; min-height: var(--cb-mk-control-height); padding: 0; border: 0; outline: none; background: none; color: var(--cb-mk-color-text-primary); font: var(--cb-mk-text-body-m); }
.cb-mk-public-check__input::placeholder { color: var(--cb-mk-color-text-disabled); }
.cb-mk-public-check__field:focus-within { box-shadow: 0 0 0 2px var(--cb-mk-color-bg-accent); }
.cb-mk-public-check__field:has([aria-invalid="true"]) { background: var(--cb-mk-color-bg-danger-soft); box-shadow: 0 0 0 2px var(--cb-mk-color-border-danger); }
.cb-mk-public-check__result { display: flex; align-items: flex-start; gap: var(--cb-mk-space-4); margin-top: calc(-1 * var(--cb-mk-space-3)); padding: var(--cb-mk-space-4) var(--cb-mk-space-5); border-radius: var(--cb-mk-radius-field); background: var(--cb-mk-color-bg-surface); color: var(--cb-mk-color-text-primary); }
.cb-mk-public-check__mark { display: inline-grid; flex: none; place-items: center; width: var(--cb-mk-space-8); height: var(--cb-mk-space-8); border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-accent); color: var(--cb-mk-color-text-on-accent); }
.cb-mk-public-check__mark > * { display: none; }
.cb-mk-public-check__result[data-status="serviceable"] [data-icon="check"],
.cb-mk-public-check__result[data-status="launch-market"] [data-icon="check"],
.cb-mk-public-check__result[data-status="outside"] [data-icon="info"],
.cb-mk-public-check__result[data-status="review"] [data-icon="info"],
.cb-mk-public-check__result[data-status="needs-more"] [data-icon="alert"],
.cb-mk-public-check__result[data-status="loading"] .cb-mk-spinner { display: block; }
.cb-mk-public-check__result:is([data-status="outside"], [data-status="review"], [data-status="loading"]) .cb-mk-public-check__mark { background: var(--cb-mk-color-bg-sunken); color: var(--cb-mk-color-text-primary); }
.cb-mk-public-check__result[data-status="needs-more"] .cb-mk-public-check__mark { background: var(--cb-mk-color-bg-danger-soft); color: var(--cb-mk-color-text-danger); }
.cb-mk-public-check__text { display: flex; flex-direction: column; gap: var(--cb-mk-space-1); min-width: 0; font: var(--cb-mk-text-label-m); }
.cb-mk-public-check__text small { color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }

/* Photo mosaic and collage */
.cb-mk-public-hero__mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 7.5rem; gap: var(--cb-mk-space-4); min-width: 0; }
.cb-mk-public-hero__collage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cb-mk-space-4); height: 7.5rem; min-width: 0; }
.cb-mk-public-hero__figure { position: relative; min-width: 0; min-height: 0; overflow: hidden; border-radius: var(--cb-mk-radius-xl); background: var(--cb-mk-color-bg-inverse); }
.cb-mk-public-hero__figure--main { grid-column: 1 / -1; grid-row: span 2; }
.cb-mk-public-hero__figure > img { width: 100%; height: 100%; object-fit: cover; }
.cb-mk-public-hero__figure > figcaption { position: absolute; bottom: var(--cb-mk-space-4); left: var(--cb-mk-space-4); }

/* Proof points (Figma: Marketing / Proof point) */
.cb-mk-public-proofs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cb-mk-space-6) var(--cb-mk-space-5); padding-block: var(--cb-mk-space-7) var(--cb-mk-space-3); }
.cb-mk-public-proof { display: flex; flex-direction: column; gap: var(--cb-mk-space-2); min-width: 0; }

/* Sections and their heads (Figma: Marketing / Section head) */
.cb-mk-public-section { padding-block: var(--cb-mk-space-8); }
.cb-mk-public-section__inner { display: flex; flex-direction: column; gap: var(--cb-mk-space-7); }
.cb-mk-public-head { display: grid; gap: var(--cb-mk-space-4); }
.cb-mk-public-head__title { display: flex; flex-direction: column; gap: var(--cb-mk-space-4); min-width: 0; }
.cb-mk-public-head__side { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cb-mk-space-4); min-width: 0; }
.cb-mk-public-head__lead { margin: 0; color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-body-l); }
.cb-mk-public-title em { display: block; color: var(--cb-mk-color-text-secondary); font-style: normal; }

/* Rails: a row that swipes on phones and takes arrows from 48rem, edge to edge on phones. */
.cb-mk-public-rail { --_cb-mk-public-rail-gap: var(--cb-mk-space-5); }
.cb-mk-public-rail__track { display: grid; grid-auto-flow: column; gap: var(--_cb-mk-public-rail-gap); margin-inline: calc(-1 * var(--_cb-mk-public-gutter)); padding-inline: var(--_cb-mk-public-gutter); scroll-padding-inline: var(--_cb-mk-public-gutter); scroll-snap-type: x proximity; }
.cb-mk-public-rail__track > * { scroll-snap-align: start; }
.cb-mk-public-rail__track--four { grid-auto-columns: min(17.5rem, 80%); }
.cb-mk-public-rail__track--three { grid-auto-columns: min(20rem, 85%); }
.cb-mk-public-rail .cb-mk-scroller__arrow { display: none; z-index: 2; }

/* Service card (Figma: Marketing / Service card) */
.cb-mk-public-service { display: flex; flex-direction: column; min-width: 0; padding: 0; overflow: hidden; border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-card); background: var(--cb-mk-color-bg-surface); color: inherit; text-align: left; cursor: pointer; transition: border-color var(--cb-mk-motion-fast) var(--cb-mk-motion-ease), box-shadow var(--cb-mk-motion-fast) var(--cb-mk-motion-ease); }
.cb-mk-public-service:hover { border-color: var(--cb-mk-color-border-strong); box-shadow: var(--cb-mk-shadow-raised); }
.cb-mk-public-service__photo { display: block; width: 100%; aspect-ratio: 3 / 2; border-radius: 0; }
.cb-mk-public-service__kicker { position: absolute; top: var(--cb-mk-space-4); left: var(--cb-mk-space-4); }
.cb-mk-public-service__status { position: absolute; top: var(--cb-mk-space-4); right: var(--cb-mk-space-4); }
.cb-mk-public-service__body { display: flex; flex: 1; flex-direction: column; gap: var(--cb-mk-space-3); padding: var(--cb-mk-space-6); }
.cb-mk-public-service__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cb-mk-space-3); margin-top: auto; padding-top: var(--cb-mk-space-4); }
.cb-mk-public-service__foot > .cb-mk-public-arrow { font: var(--cb-mk-text-label-s); }
.cb-mk-public-service-detail { display: flex; flex-direction: column; gap: var(--cb-mk-space-6); }
.cb-mk-public-service-detail__photo { flex: none; aspect-ratio: 19 / 12; }
.cb-mk-public-service-detail__foot { align-items: center; justify-content: space-between; }
.cb-mk-public-service-detail__price { gap: 0; }

/* Kitchen card: the Restaurant card with a read-only foot */
.cb-mk-public-kitchen { min-width: 0; }
.cb-mk-public-kitchen .cb-mk-restaurant-card__body { flex: 1; }
.cb-mk-public-kitchen__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cb-mk-space-3); margin-top: auto; }

/* Pill tabs and the Feature panel (Figma: Marketing / Feature panel) */
.cb-mk-public-tabnum { margin-right: var(--cb-mk-space-3); opacity: 0.64; font: var(--cb-mk-text-caption); font-variant-numeric: tabular-nums; }
.cb-mk-public-feature { display: grid; gap: var(--cb-mk-space-7); }
.cb-mk-public-feature__copy { display: flex; flex-direction: column; gap: var(--cb-mk-space-4); min-width: 0; }
.cb-mk-public-feature__copy .cb-mk-public-checks { padding-top: var(--cb-mk-space-3); }

/* Product preview (Figma: Marketing / Product preview): demonstration data in a browser frame */
.cb-mk-public-preview { min-width: 0; overflow: hidden; border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-field); background: var(--cb-mk-color-bg-surface); font: var(--cb-mk-text-caption); }
.cb-mk-public-preview__bar { display: flex; align-items: center; gap: var(--cb-mk-space-2); padding: var(--cb-mk-space-3) var(--cb-mk-space-4); background: var(--cb-mk-color-bg-sunken); }
.cb-mk-public-preview__bar > i { flex: none; width: var(--cb-mk-space-3); height: var(--cb-mk-space-3); border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-border-strong); }
.cb-mk-public-preview__bar > span { flex: 1; min-width: 0; margin-left: var(--cb-mk-space-3); overflow: hidden; color: var(--cb-mk-color-text-secondary); text-overflow: ellipsis; white-space: nowrap; }
.cb-mk-public-preview__app { display: grid; grid-template-columns: minmax(0, 1fr); }
.cb-mk-public-preview__side { display: none; flex-direction: column; gap: var(--cb-mk-space-2); padding: var(--cb-mk-space-4); background: var(--cb-mk-color-bg-inverse); color: var(--cb-mk-color-text-on-inverse); }
.cb-mk-public-preview__side > strong { margin-bottom: var(--cb-mk-space-2); color: var(--cb-mk-color-bg-accent); font: var(--cb-mk-text-heading-4); }
.cb-mk-public-preview__side > span { padding: var(--cb-mk-space-2) var(--cb-mk-space-3); border-radius: var(--cb-mk-radius-sm); }
.cb-mk-public-preview__side > span[aria-current="true"] { background: var(--cb-mk-color-bg-brand); }
.cb-mk-public-preview__main { display: flex; flex-direction: column; gap: var(--cb-mk-space-4); min-width: 0; padding: var(--cb-mk-space-5); }
.cb-mk-public-preview__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cb-mk-space-2) var(--cb-mk-space-3); }
.cb-mk-public-preview__head > b { font: var(--cb-mk-text-label-m); }
.cb-mk-public-preview__head > span { color: var(--cb-mk-color-text-secondary); }
.cb-mk-public-preview__chips { display: flex; flex-wrap: wrap; gap: var(--cb-mk-space-2); }
.cb-mk-public-preview__cards { display: grid; gap: var(--cb-mk-space-3); }
.cb-mk-public-preview__cards > article { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: var(--cb-mk-space-4); overflow: hidden; border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-md); }
.cb-mk-public-preview__cards img { grid-row: span 2; width: 100%; height: 100%; min-height: 3.5rem; object-fit: cover; }
.cb-mk-public-preview__cards b { align-self: end; padding-top: var(--cb-mk-space-3); font: var(--cb-mk-text-label-s); }
.cb-mk-public-preview__cards span { align-self: start; padding-bottom: var(--cb-mk-space-3); color: var(--cb-mk-color-text-secondary); }
.cb-mk-public-preview__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--cb-mk-space-4); padding: var(--cb-mk-space-3) var(--cb-mk-space-4); border-radius: var(--cb-mk-radius-md); background: var(--cb-mk-color-bg-accent-soft); }
.cb-mk-public-preview__summary-text { display: flex; flex-direction: column; min-width: 0; }
.cb-mk-public-preview__summary-text small { color: var(--cb-mk-color-text-secondary); font: inherit; }
.cb-mk-public-preview__summary-text b { font: var(--cb-mk-text-label-s); }
.cb-mk-public-preview__controls { display: grid; gap: var(--cb-mk-space-3); }
.cb-mk-public-preview__controls > article { display: flex; flex-direction: column; gap: var(--cb-mk-space-1); padding: var(--cb-mk-space-3) var(--cb-mk-space-4); border-radius: var(--cb-mk-radius-md); background: var(--cb-mk-color-bg-page); }
.cb-mk-public-preview__controls small { color: var(--cb-mk-color-text-secondary); font: inherit; }
.cb-mk-public-preview__controls strong { font: var(--cb-mk-text-label-s); }
.cb-mk-public-preview__table { width: 100%; border-collapse: collapse; }
.cb-mk-public-preview__table th { padding: var(--cb-mk-space-3) var(--cb-mk-space-3) var(--cb-mk-space-3) 0; border-bottom: 1px solid var(--cb-mk-color-border-default); color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-label-s); text-align: left; }
.cb-mk-public-preview__table td { padding: var(--cb-mk-space-3) var(--cb-mk-space-3) var(--cb-mk-space-3) 0; border-bottom: 1px solid var(--cb-mk-color-border-default); }
.cb-mk-public-preview__table tbody tr:last-child td { border-bottom: 0; }
.cb-mk-public-preview__rows { display: flex; flex-direction: column; gap: var(--cb-mk-space-3); margin: 0; padding: 0; list-style: none; }
.cb-mk-public-preview__rows > li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cb-mk-space-2) var(--cb-mk-space-4); padding: var(--cb-mk-space-3) var(--cb-mk-space-4); border-radius: var(--cb-mk-radius-md); background: var(--cb-mk-color-bg-page); }
.cb-mk-public-preview__rows > li > b { font: var(--cb-mk-text-label-s); }
.cb-mk-public-preview__rows > li > :nth-child(2) { flex: 1 1 8rem; min-width: 0; }
.cb-mk-public-preview__rows > li > em { font-style: normal; }
.cb-mk-public-preview__row { display: flex; align-items: center; justify-content: space-between; gap: var(--cb-mk-space-3); padding: var(--cb-mk-space-3) var(--cb-mk-space-4); border-radius: var(--cb-mk-radius-md); background: var(--cb-mk-color-bg-page); }
.cb-mk-public-preview__row > span { color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-body-s); }
.cb-mk-public-preview__row > b { font: var(--cb-mk-text-label-s); }
.cb-mk-public-preview__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cb-mk-space-3); padding-top: var(--cb-mk-space-3); }
.cb-mk-public-preview__foot > b { font: var(--cb-mk-text-label-s); }
.cb-mk-public-preview__foot > em { font-style: normal; }

/* Pricing calculator (Figma: Marketing / Pricing calculator) */
.cb-mk-public-pricing { display: grid; gap: var(--cb-mk-space-6); }
.cb-mk-public-pricing__controls { display: flex; flex-direction: column; gap: var(--cb-mk-space-6); min-width: 0; }
.cb-mk-public-pricing__people { display: flex; align-items: center; justify-content: space-between; gap: var(--cb-mk-space-4); margin-bottom: calc(-1 * var(--cb-mk-space-4)); }
.cb-mk-public-pricing__range { width: 100%; height: var(--cb-mk-space-7); margin: 0; accent-color: var(--cb-mk-color-bg-brand); cursor: pointer; }
.cb-mk-public-pricing__group { min-width: 0; margin: 0; padding: 0; border: 0; }
.cb-mk-public-pricing__group > legend { margin-bottom: var(--cb-mk-space-3); padding: 0; }
.cb-mk-public-pricing__programs { display: flex; flex-direction: column; gap: var(--cb-mk-space-3); }
.cb-mk-public-program { display: flex; align-items: center; justify-content: space-between; gap: var(--cb-mk-space-4); width: 100%; padding: var(--cb-mk-space-4) var(--cb-mk-space-5); border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-field); background: var(--cb-mk-color-bg-surface); color: inherit; text-align: left; cursor: pointer; transition: border-color var(--cb-mk-motion-fast) var(--cb-mk-motion-ease), background-color var(--cb-mk-motion-fast) var(--cb-mk-motion-ease); }
.cb-mk-public-program:hover { border-color: var(--cb-mk-color-border-strong); }
.cb-mk-public-program[aria-pressed="true"] { border-color: var(--cb-mk-color-border-brand); background: var(--cb-mk-color-bg-accent-soft); }
.cb-mk-public-program__text { display: flex; flex-direction: column; min-width: 0; }
.cb-mk-public-program__range { flex: none; font: var(--cb-mk-text-label-m); font-style: normal; font-variant-numeric: tabular-nums; }
.cb-mk-public-program__range small { display: block; font-style: normal; }
.cb-mk-public-pricing__result { display: flex; flex-direction: column; gap: var(--cb-mk-space-5); min-width: 0; padding: var(--cb-mk-space-6); border-radius: var(--cb-mk-radius-card); background: var(--cb-mk-color-bg-inverse); color: var(--cb-mk-color-text-on-inverse); }
.cb-mk-public-pricing__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--cb-mk-space-4); }
.cb-mk-public-pricing__head > span { opacity: 0.8; }
.cb-mk-public-pricing__saving { display: flex; flex: none; flex-direction: column; padding: var(--cb-mk-space-3) var(--cb-mk-space-4); border-radius: var(--cb-mk-radius-md); background: var(--cb-mk-color-bg-accent); color: var(--cb-mk-color-text-on-accent); }
.cb-mk-public-pricing__saving .cb-mk-caption { color: inherit; }
.cb-mk-public-pricing__total { margin: 0; font: var(--cb-mk-text-display-l); letter-spacing: var(--cb-mk-tracking-display-l); font-variant-numeric: tabular-nums; }
.cb-mk-public-pricing__program { opacity: 0.8; font: var(--cb-mk-text-body-s); }
.cb-mk-public-pricing__breakdown { display: flex; flex-direction: column; gap: var(--cb-mk-space-5); padding-top: var(--cb-mk-space-5); border-top: 1px solid var(--cb-mk-color-border-overlay); }
.cb-mk-public-bars { display: flex; flex-direction: column; gap: var(--cb-mk-space-3); }
.cb-mk-public-bars__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--cb-mk-space-4); font: var(--cb-mk-text-label-s); }
.cb-mk-public-bars__head > b { font: inherit; }
.cb-mk-public-bars__head > strong { flex: none; font: inherit; }
.cb-mk-public-bars__track { display: flex; gap: var(--cb-mk-space-1); overflow: hidden; border-radius: var(--cb-mk-radius-full); font-style: normal; }
.cb-mk-public-bars__track > b { flex: 1 1 var(--cb-mk-progress, 33%); min-width: 2.25rem; padding-block: var(--cb-mk-space-2); background: var(--cb-mk-color-bg-accent); color: var(--cb-mk-color-text-on-accent); font: var(--cb-mk-text-label-s); text-align: center; }
.cb-mk-public-bars__track > b:nth-child(2) { background: var(--cb-mk-color-bg-accent-soft); }
.cb-mk-public-bars__track > b:nth-child(3) { background: var(--cb-mk-color-bg-surface); }
.cb-mk-public-bars__legend { display: flex; flex-wrap: wrap; gap: var(--cb-mk-space-2) var(--cb-mk-space-4); font: var(--cb-mk-text-caption); }
.cb-mk-public-bars__legend > span { display: inline-flex; align-items: center; gap: var(--cb-mk-space-2); }
.cb-mk-public-bars__legend > span::before { content: ""; width: var(--cb-mk-space-3); height: var(--cb-mk-space-3); border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-accent); }
.cb-mk-public-bars__legend > span:nth-child(2)::before { background: var(--cb-mk-color-bg-accent-soft); }
.cb-mk-public-bars__legend > span:nth-child(3)::before { background: var(--cb-mk-color-bg-surface); }

/* Feedback panel (Figma: Marketing / Feedback panel): the card sits over the photo's lower edge, like the store banner */
.cb-mk-public-feedback { display: grid; gap: var(--cb-mk-space-7); }
.cb-mk-public-feedback__copy { display: flex; flex-direction: column; gap: var(--cb-mk-space-5); min-width: 0; }
.cb-mk-public-feedback__visual { display: flex; flex-direction: column; min-width: 0; }
.cb-mk-public-feedback__photo { aspect-ratio: 4 / 3; border-radius: var(--cb-mk-radius-xl); }
.cb-mk-public-feedback__card { position: relative; gap: var(--cb-mk-space-3); margin: calc(-1 * var(--cb-mk-space-10)) var(--cb-mk-space-5) 0; box-shadow: var(--cb-mk-shadow-raised); }
.cb-mk-public-feedback__quote { display: flex; flex-direction: column; gap: var(--cb-mk-space-3); }
.cb-mk-public-feedback__dish { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cb-mk-space-2) var(--cb-mk-space-4); }
.cb-mk-public-feedback__stars { color: var(--cb-mk-color-text-warning); font-style: normal; letter-spacing: 0.1em; }
.cb-mk-public-feedback__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--cb-mk-space-4); }

/* How the day works (Figma: Marketing / Day tab, Day panel) */
.cb-mk-public-day__tabs { display: flex; gap: var(--cb-mk-space-5); overflow-x: auto; scrollbar-width: none; }
.cb-mk-public-day__tabs::-webkit-scrollbar { display: none; }
.cb-mk-public-day__tab { display: flex; flex: 1 0 4.5rem; flex-direction: column; gap: var(--cb-mk-space-2); padding: 0 0 var(--cb-mk-space-4); border: 0; border-bottom: 1px solid var(--cb-mk-color-border-strong); background: none; color: var(--cb-mk-color-text-secondary); text-align: left; cursor: pointer; transition: color var(--cb-mk-motion-fast) var(--cb-mk-motion-ease); }
.cb-mk-public-day__tab:hover { color: var(--cb-mk-color-text-primary); }
.cb-mk-public-day__tab > b { font: var(--cb-mk-text-label-s); font-variant-numeric: tabular-nums; }
.cb-mk-public-day__tab > span { font: var(--cb-mk-text-label-m); }
.cb-mk-public-day__tab[aria-selected="true"] { border-bottom: 2px solid var(--cb-mk-color-border-brand); padding-bottom: calc(var(--cb-mk-space-4) - 1px); color: var(--cb-mk-color-text-primary); }
.cb-mk-public-day__tab[aria-selected="true"] > b { color: var(--cb-mk-color-text-brand); }
.cb-mk-public-day { display: grid; gap: 0; }
.cb-mk-public-day__photo { aspect-ratio: 16 / 10; border-radius: 0; }
.cb-mk-public-day__copy { display: flex; flex-direction: column; justify-content: center; gap: var(--cb-mk-space-4); min-width: 0; padding: var(--cb-mk-space-6); }
.cb-mk-public-day__copy .cb-mk-public-checks { padding-top: var(--cb-mk-space-3); }

/* Accountability (Figma: Marketing / Accountability item): one white card split by hairlines */
.cb-mk-public-standards { display: grid; gap: 1px; background: var(--cb-mk-color-border-default); }
.cb-mk-public-standard { display: flex; flex-direction: column; gap: var(--cb-mk-space-3); min-width: 0; padding: var(--cb-mk-space-6); background: var(--cb-mk-color-bg-surface); }
.cb-mk-public-standards__note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cb-mk-space-3) var(--cb-mk-space-7); }
.cb-mk-public-standards__note > p { flex: 1 1 18rem; min-width: 0; }
.cb-mk-public-standards__note > a { flex: none; }

/* FAQ */
.cb-mk-public-faqs { display: grid; align-items: start; gap: var(--cb-mk-space-3); }

/* Access panel (Figma: Marketing / Access panel) */
.cb-mk-public-access { display: grid; gap: var(--cb-mk-space-7); margin-block: var(--cb-mk-space-8) var(--cb-mk-space-11); padding: var(--cb-mk-space-7); }
.cb-mk-public-access::after { background: linear-gradient(180deg, color-mix(in srgb, var(--cb-mk-color-bg-brand) 72%, transparent) 0%, var(--cb-mk-color-bg-brand) 92%); }
.cb-mk-public-access__copy { display: flex; flex-direction: column; gap: var(--cb-mk-space-5); min-width: 0; }
.cb-mk-public-access__overline { color: var(--cb-mk-color-bg-accent); }
.cb-mk-public-access__contact { display: flex; flex-wrap: wrap; gap: var(--cb-mk-space-2) var(--cb-mk-space-7); font: var(--cb-mk-text-label-s); }
.cb-mk-public-access__contact > a { color: inherit; text-underline-offset: 0.2em; }
.cb-mk-public-access__card { min-width: 0; padding: var(--cb-mk-space-6); border-radius: var(--cb-mk-radius-card); background: var(--cb-mk-color-bg-surface); color: var(--cb-mk-color-text-primary); }
.cb-mk-public-access__form { display: flex; flex-direction: column; gap: var(--cb-mk-space-6); }
.cb-mk-public-access__step { display: flex; flex-direction: column; gap: var(--cb-mk-space-5); min-width: 0; margin: 0; padding: 0; border: 0; }
.cb-mk-public-access__step > legend { margin-bottom: var(--cb-mk-space-5); padding: 0; }
.cb-mk-public-access__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--cb-mk-space-3); }
.cb-mk-public-access__sent { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cb-mk-space-4); }
.cb-mk-public-access__mark { display: inline-grid; place-items: center; width: var(--cb-mk-size-48); height: var(--cb-mk-size-48); border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-accent); color: var(--cb-mk-color-text-on-accent); }

/* CTA band (Figma: Marketing / CTA band) */
.cb-mk-public-cta { display: flex; flex-direction: column; gap: var(--cb-mk-space-6); padding: var(--cb-mk-space-7); border-radius: var(--cb-mk-radius-card); background: var(--cb-mk-color-bg-inverse); color: var(--cb-mk-color-text-on-inverse); }
.cb-mk-public-cta__copy { display: flex; flex: 1; flex-direction: column; gap: var(--cb-mk-space-3); min-width: 0; }
.cb-mk-public-cta__copy > .cb-mk-overline { color: var(--cb-mk-color-bg-accent); }
.cb-mk-public-cta__copy > p { opacity: 0.8; }
.cb-mk-public-cta__actions { display: flex; flex: none; flex-wrap: wrap; gap: var(--cb-mk-space-3); }
.cb-mk-public-cta__actions > .cb-mk-button:not(.cb-mk-button--accent) { color: var(--cb-mk-color-text-primary); }

/* Help and support (Figma: Marketing / Page hero, Contact card) */
.cb-mk-public-topics { display: grid; gap: var(--cb-mk-space-3); }
.cb-mk-public-topic { display: flex; align-items: flex-start; gap: var(--cb-mk-space-4); padding: var(--cb-mk-space-5); border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-card); background: var(--cb-mk-color-bg-surface); color: inherit; text-align: left; cursor: pointer; transition: border-color var(--cb-mk-motion-fast) var(--cb-mk-motion-ease), box-shadow var(--cb-mk-motion-fast) var(--cb-mk-motion-ease); }
.cb-mk-public-topic:hover { border-color: var(--cb-mk-color-border-strong); box-shadow: var(--cb-mk-shadow-raised); }
.cb-mk-public-topic__text { display: flex; flex-direction: column; gap: var(--cb-mk-space-1); min-width: 0; }
.cb-mk-public-help__faq { display: grid; gap: var(--cb-mk-space-7); }
.cb-mk-public-help__aside { display: flex; flex-direction: column; gap: var(--cb-mk-space-5); min-width: 0; }
.cb-mk-public-help__filters { display: flex; flex-wrap: wrap; gap: var(--cb-mk-space-3); }
.cb-mk-public-help__stuck { gap: var(--cb-mk-space-3); }
.cb-mk-public-help__items { display: flex; flex-direction: column; gap: var(--cb-mk-space-4); min-width: 0; }
.cb-mk-public-help__results { display: flex; flex-direction: column; gap: var(--cb-mk-space-3); }
.cb-mk-public-contacts { display: grid; gap: var(--cb-mk-space-3); }
.cb-mk-public-contact { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cb-mk-space-2); padding: var(--cb-mk-space-7); border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-card); background: var(--cb-mk-color-bg-surface); color: inherit; text-decoration: none; overflow-wrap: anywhere; transition: border-color var(--cb-mk-motion-fast) var(--cb-mk-motion-ease), box-shadow var(--cb-mk-motion-fast) var(--cb-mk-motion-ease); }
.cb-mk-public-contact:hover { border-color: var(--cb-mk-color-border-strong); box-shadow: var(--cb-mk-shadow-raised); }
.cb-mk-public-contact > .cb-mk-public-tile { margin-bottom: var(--cb-mk-space-3); }
.cb-mk-public-contact > em { font-style: normal; }
.cb-mk-public-help__ask { display: grid; gap: var(--cb-mk-space-7); align-items: start; }
.cb-mk-public-help__ask-copy { display: flex; flex-direction: column; gap: var(--cb-mk-space-5); min-width: 0; }
.cb-mk-public-help__ask-photo { aspect-ratio: 16 / 10; border-radius: var(--cb-mk-radius-xl); }
.cb-mk-public-help__form { gap: var(--cb-mk-space-5); min-width: 0; }
.cb-mk-public-help__demo { display: grid; gap: var(--cb-mk-space-7); align-items: center; }
.cb-mk-public-help__demo-copy { display: flex; flex-direction: column; gap: var(--cb-mk-space-5); min-width: 0; }
.cb-mk-public-help__book { gap: var(--cb-mk-space-4); }
.cb-mk-public-help__book-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--cb-mk-space-2) var(--cb-mk-space-4); color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }

/* Kitchen preview: the store banner with no ordering controls, then the menu */
.cb-mk-public-preview-page { display: flex; flex-direction: column; gap: var(--cb-mk-space-7); padding-block: var(--cb-mk-space-6) var(--cb-mk-space-11); }
.cb-mk-public-preview-page__cover > img { width: 100%; height: 100%; object-fit: cover; }
.cb-mk-public-preview-page__cta { grid-area: actions; }
.cb-mk-public-preview-page__meta { grid-area: meta; display: flex; flex-direction: column; gap: var(--cb-mk-space-3); min-width: 0; }
.cb-mk-public-preview-page__nav { position: sticky; top: var(--_cb-mk-public-header); z-index: 5; margin-inline: calc(-1 * var(--cb-mk-space-3)); padding: var(--cb-mk-space-3); background: var(--cb-mk-color-bg-page); }
.cb-mk-public-preview-page .cb-mk-public-head { align-items: start; }
.cb-mk-public-preview-page__reviews { display: flex; flex-direction: column; gap: var(--cb-mk-space-5); }
.cb-mk-public-preview-page__review-grid { display: grid; gap: var(--cb-mk-space-3); }
.cb-mk-public-food-menu { display: flex; flex-direction: column; gap: var(--cb-mk-space-7); }
.cb-mk-public-food-menu__title { display: flex; flex-direction: column; gap: var(--cb-mk-space-2); }
.cb-mk-public-menu-section { display: flex; flex-direction: column; gap: var(--cb-mk-space-5); }
.cb-mk-public-main .cb-mk-public-menu-section[id] { scroll-margin-top: calc(var(--_cb-mk-public-header) + 4.5rem); }
.cb-mk-public-menu-section__head { display: flex; flex-direction: column; gap: var(--cb-mk-space-2); }
.cb-mk-public-menu-grid { display: grid; gap: var(--cb-mk-space-4); }
.cb-mk-public-offering { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem; min-width: 0; overflow: hidden; border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-card); background: var(--cb-mk-color-bg-surface); }
.cb-mk-public-offering:not(:has(.cb-mk-public-offering__photo)) { grid-template-columns: minmax(0, 1fr); }
.cb-mk-public-offering__body { display: flex; flex-direction: column; gap: var(--cb-mk-space-3); min-width: 0; padding: var(--cb-mk-space-5); }
.cb-mk-public-offering__head { display: flex; flex-direction: column; gap: var(--cb-mk-space-1); }
.cb-mk-public-offering__title { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--cb-mk-space-3); }
.cb-mk-public-offering__more > summary { display: inline-flex; align-items: center; gap: var(--cb-mk-space-2); color: var(--cb-mk-color-text-brand); font: var(--cb-mk-text-label-s); list-style: none; cursor: pointer; }
.cb-mk-public-offering__more > summary::-webkit-details-marker { display: none; }
.cb-mk-public-offering__more > summary > .cb-mk-icon { transition: transform var(--cb-mk-motion-base) var(--cb-mk-motion-ease); }
.cb-mk-public-offering__more[open] > summary > .cb-mk-icon { transform: rotate(180deg); }
.cb-mk-public-offering__more > p { margin-top: var(--cb-mk-space-2); white-space: pre-line; }
.cb-mk-public-offering__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cb-mk-space-3); margin-top: auto; padding-top: var(--cb-mk-space-2); }
.cb-mk-public-offering__tags { display: flex; flex-wrap: wrap; gap: var(--cb-mk-space-2); }
.cb-mk-public-offering__photo { height: 100%; min-height: 8rem; border-radius: 0; }
/* The tooltip citybites.allergen-tooltips.js builds on the body. No popup in Market is dark. */
.cb-allergen-tooltip { position: fixed; z-index: 1300; width: max-content; max-width: min(20rem, calc(100vw - 1rem)); padding: var(--cb-mk-space-2) var(--cb-mk-space-3); border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-sm); background: var(--cb-mk-color-bg-raised); box-shadow: var(--cb-mk-shadow-overlay); color: var(--cb-mk-color-text-primary); font: var(--cb-mk-text-label-s); pointer-events: none; }
.cb-allergen-tooltip[hidden] { display: none; }

/* Privacy and Terms */
.cb-mk-public-legal { display: flex; flex-direction: column; gap: var(--cb-mk-space-7); padding-block: var(--cb-mk-space-8) var(--cb-mk-space-11); }
.cb-mk-public-legal__head { display: flex; flex-direction: column; gap: var(--cb-mk-space-3); }
.cb-mk-public-legal__prose { gap: var(--cb-mk-space-8); }
.cb-mk-public-legal__section { display: flex; flex-direction: column; gap: var(--cb-mk-space-4); }
.cb-mk-public-legal__section > * { max-width: 46rem; }
.cb-mk-public-legal__section > p,
.cb-mk-public-legal__section > ul { color: var(--cb-mk-color-text-secondary); }
.cb-mk-public-legal__section > ul { display: flex; flex-direction: column; gap: var(--cb-mk-space-2); margin: 0; padding-left: var(--cb-mk-space-6); list-style: disc; }

/* Footer (Figma: Navigation / Public footer) */
.cb-mk-public-footer { padding-block: var(--cb-mk-space-10) var(--cb-mk-space-8); background: var(--cb-mk-color-bg-inverse); color: var(--cb-mk-color-text-on-inverse); }
.cb-mk-public-footer__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cb-mk-space-8) var(--cb-mk-space-5); }
.cb-mk-public-footer__intro { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--cb-mk-space-5); min-width: 0; }
.cb-mk-public-footer__intro > p { max-width: 24rem; opacity: 0.8; font: var(--cb-mk-text-body-s); }
.cb-mk-public-footer__contact { display: flex; flex-direction: column; gap: var(--cb-mk-space-2); font: var(--cb-mk-text-label-s); }
.cb-mk-public-footer__contact > a { width: fit-content; color: inherit; text-decoration: none; }
.cb-mk-public-footer__group { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cb-mk-space-4); min-width: 0; }
.cb-mk-public-footer__group > h2 { opacity: 0.8; font: var(--cb-mk-text-label-s); }
.cb-mk-public-footer__group > a { color: inherit; font: var(--cb-mk-text-body-s); text-decoration: none; }
.cb-mk-public-footer a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.cb-mk-public-footer :is(a, button):focus-visible { outline-color: var(--cb-mk-color-bg-accent); }
.cb-mk-public-footer__bar { display: flex; flex-direction: column; gap: var(--cb-mk-space-3); margin-top: var(--cb-mk-space-8); padding-top: var(--cb-mk-space-6); border-top: 1px solid var(--cb-mk-color-border-overlay); opacity: 0.8; font: var(--cb-mk-text-caption); }

@media (max-width: 47.99rem) {
    .cb-mk-public-pricing__total { font-size: 2.75rem; }
    .cb-mk-public-menu { display: none; }
}

@media (min-width: 48rem) {
    .cb-mk-public { --_cb-mk-public-gutter: var(--cb-mk-space-8); }
    .cb-mk-public-hero__grid { padding: var(--cb-mk-space-10); }
    .cb-mk-public-check__row { flex-direction: row; align-items: center; gap: var(--cb-mk-space-3); padding: var(--cb-mk-space-2); border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-surface); }
    .cb-mk-public-check__row > .cb-mk-button { width: auto; flex: none; }
    .cb-mk-public-check__field { padding-inline: var(--cb-mk-space-4) 0; border-radius: 0; background: none; }
    .cb-mk-public-check__field:focus-within,
    .cb-mk-public-check__field:has([aria-invalid="true"]) { background: none; box-shadow: none; }
    .cb-mk-public-check__row:focus-within { box-shadow: 0 0 0 2px var(--cb-mk-color-bg-accent); }
    .cb-mk-public-check__row:has([aria-invalid="true"]) { background: var(--cb-mk-color-bg-danger-soft); box-shadow: 0 0 0 2px var(--cb-mk-color-border-danger); }
    .cb-mk-public-hero__mosaic { grid-auto-rows: 10rem; }
    .cb-mk-public-hero__collage { height: 12rem; }
    .cb-mk-public-section { padding-block: var(--cb-mk-space-10); }
    .cb-mk-public-section__inner { gap: var(--cb-mk-space-8); }
    .cb-mk-public-proofs { padding-block: var(--cb-mk-space-8) var(--cb-mk-space-5); }
    .cb-mk-public-rail { --_cb-mk-public-rail-gap: var(--cb-mk-space-7); }
    .cb-mk-public-rail .cb-mk-scroller__arrow { display: inline-grid; }
    .cb-mk-public-rail .cb-mk-scroller__arrow:disabled { display: none; }
    .cb-mk-public-rail__track--four,
    .cb-mk-public-rail__track--three { grid-auto-columns: calc((100% - 2 * var(--_cb-mk-public-gutter) - var(--_cb-mk-public-rail-gap)) / 2); }
    .cb-mk-public-preview__side { display: flex; }
    .cb-mk-public-preview__app { grid-template-columns: 10.25rem minmax(0, 1fr); }
    .cb-mk-public-preview__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cb-mk-public-preview__cards > article { display: flex; flex-direction: column; align-items: stretch; }
    .cb-mk-public-preview__cards img { height: auto; min-height: 0; aspect-ratio: 2 / 1; }
    .cb-mk-public-preview__cards b { align-self: auto; padding: var(--cb-mk-space-3) var(--cb-mk-space-3) 0; }
    .cb-mk-public-preview__cards span { align-self: auto; padding: 0 var(--cb-mk-space-3) var(--cb-mk-space-3); }
    .cb-mk-public-preview__controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cb-mk-public-feedback__card { margin-inline: var(--cb-mk-space-7); }
    .cb-mk-public-standards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cb-mk-public-access { padding: var(--cb-mk-space-10); }
    .cb-mk-public-access__card { padding: var(--cb-mk-space-8); }
    .cb-mk-public-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cb-mk-public-contacts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cb-mk-public-preview-page__review-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cb-mk-public-menu-grid { gap: var(--cb-mk-space-5); }
    .cb-mk-public-offering { grid-template-columns: minmax(0, 1fr) 8rem; }
    .cb-mk-public-cta { padding: var(--cb-mk-space-9); }
    .cb-mk-public-footer__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cb-mk-public-footer__bar { flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
}

@media (min-width: 64rem) {
    .cb-mk-public { --_cb-mk-public-gutter: var(--cb-mk-space-9); --_cb-mk-public-header: 4.5rem; }
    .cb-mk-public-nav { display: flex; }
    .cb-mk-public-header__wide { display: inline-flex; }
    .cb-mk-public-header__menu { display: none; }
    .cb-mk-public-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); align-items: center; gap: var(--cb-mk-space-11); padding: var(--cb-mk-space-11); }
    .cb-mk-public-hero__title.cb-mk-display-l { font: var(--cb-mk-text-heading-1); letter-spacing: var(--cb-mk-tracking-heading-1); }
    .cb-mk-public-hero__mosaic { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: repeat(2, 13rem); grid-auto-rows: auto; }
    .cb-mk-public-hero__figure--main { grid-column: 1; grid-row: 1 / span 2; }
    .cb-mk-public-hero__collage { height: 16rem; }
    .cb-mk-public-hero--page .cb-mk-public-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); }
    .cb-mk-public-proofs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cb-mk-space-7); }
    .cb-mk-public-proof + .cb-mk-public-proof { padding-left: var(--cb-mk-space-7); border-left: 1px solid var(--cb-mk-color-border-default); }
    .cb-mk-public-head { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); align-items: end; column-gap: var(--cb-mk-space-11); }
    .cb-mk-public-rail__track { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
    .cb-mk-public-rail__track--four { grid-auto-columns: minmax(16rem, 1fr); }
    .cb-mk-public-rail__track--three { grid-auto-columns: calc((100% - 2 * var(--_cb-mk-public-rail-gap)) / 3); }
    .cb-mk-public-rail .cb-mk-scroller__arrow--prev { left: calc(-1 * var(--cb-mk-space-6)); }
    .cb-mk-public-rail .cb-mk-scroller__arrow--next { right: calc(-1 * var(--cb-mk-space-6)); }
    .cb-mk-public-feature { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); align-items: center; gap: var(--cb-mk-space-9); padding: var(--cb-mk-space-8); }
    .cb-mk-public-pricing { grid-template-columns: minmax(0, 1fr) minmax(0, 37.5rem); gap: var(--cb-mk-space-8); padding: var(--cb-mk-space-8); }
    .cb-mk-public-pricing__result { padding: var(--cb-mk-space-8); }
    .cb-mk-public-feedback { grid-template-columns: minmax(0, 1fr) minmax(0, 38.75rem); align-items: center; gap: var(--cb-mk-space-11); }
    .cb-mk-public-day { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cb-mk-public-day__photo { aspect-ratio: auto; min-height: 26rem; }
    .cb-mk-public-day__copy { padding: var(--cb-mk-space-10); }
    .cb-mk-public-standards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cb-mk-public-faqs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cb-mk-space-4); }
    .cb-mk-public-access { grid-template-columns: minmax(0, 1fr) minmax(0, 32.5rem); align-items: center; gap: var(--cb-mk-space-11); padding: var(--cb-mk-space-11); }
    .cb-mk-public-access::after { background: linear-gradient(90deg, color-mix(in srgb, var(--cb-mk-color-bg-brand) 92%, transparent) 0%, color-mix(in srgb, var(--cb-mk-color-bg-brand) 62%, transparent) 100%); }
    .cb-mk-public-cta { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--cb-mk-space-8); padding: var(--cb-mk-space-10); }
    .cb-mk-public-topics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cb-mk-public-help__faq { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: start; gap: var(--cb-mk-space-10); }
    .cb-mk-public-help__aside { position: sticky; top: calc(var(--_cb-mk-public-header) + var(--cb-mk-space-5)); }
    .cb-mk-public-help__ask { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cb-mk-space-10); }
    .cb-mk-public-help__demo { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: var(--cb-mk-space-11); }
    .cb-mk-public-preview-page__cover { height: 18rem; }
    .cb-mk-public-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cb-mk-public-legal__nav { top: calc(var(--_cb-mk-public-header) + var(--cb-mk-space-5)); }
    .cb-mk-public-legal__nav .cb-mk-section-nav__label { overflow: visible; white-space: normal; }
    .cb-mk-public-legal__prose { padding: var(--cb-mk-space-9); }
    .cb-mk-public-footer { padding-top: var(--cb-mk-space-11); }
    .cb-mk-public-footer__inner { grid-template-columns: minmax(0, 1.8fr) repeat(4, minmax(0, 1fr)); gap: var(--cb-mk-space-10); }
    .cb-mk-public-footer__intro { grid-column: auto; }
}

/* From 80rem the hero headline is the full display size and the mosaic has its full width. */
@media (min-width: 80rem) {
    .cb-mk-public-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 35rem); }
    .cb-mk-public-hero__title.cb-mk-display-l { font: var(--cb-mk-text-display-l); letter-spacing: var(--cb-mk-tracking-display-l); }
    .cb-mk-public-hero__mosaic { grid-template-rows: repeat(2, 14.75rem); }
}

/* Reduced motion: the motion tokens already drop to 0ms; these rails also stop scrolling smoothly. */
@media (prefers-reduced-motion: reduce) {
    .cb-mk-public-rail__track,
    .cb-mk-public-preview-page .cb-mk-scroller__track { scroll-behavior: auto; }
}