/*
    KwikEat order site: the look of the KwikEat merchant portal (KwikEat.Merchant's
    wwwroot/css/kwikeat.css, itself the look of KwikEat Desktop) on top of the
    DevExpress Fluent theme with the KwikEat green as accent (App.razor). Only the
    colours, header, cards and the few helper classes these pages use - no
    Bootstrap.
*/

/* the headings' typeface: Big Shoulders Display (SIL Open Font License, wwwroot/fonts/OFL-big-shoulders-display.txt), condensed like the
   letters on a menu board or a shop front, so long Dutch words fit; served from this site rather than from Google (no
   visitor data to Google, no extra connection); variable in weight */
@font-face {
    font-family: "Big Shoulders Display";
    font-style: normal;
    font-weight: 600 900;
    font-display: swap;
    src: url("/fonts/big-shoulders-display-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Big Shoulders Display";
    font-style: normal;
    font-weight: 600 900;
    font-display: swap;
    src: url("/fonts/big-shoulders-display-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* the text's typeface: Atkinson Hyperlegible Next (SIL Open Font License,
   wwwroot/fonts/OFL-atkinson-hyperlegible-next.txt), made by the Braille Institute to be read easily, also by people
   who see less well: 1, I and l, 0 and O look different, which helps with prices and codes. On every device the same,
   where Segoe UI is Windows only; variable in weight */
@font-face {
    font-family: "Atkinson Hyperlegible Next";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Atkinson Hyperlegible Next";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/atkinson-hyperlegible-next-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Atkinson Hyperlegible Next";
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/atkinson-hyperlegible-next-italic-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* a hand's typeface for the one place that speaks as the shop owner ("Jouw winkel. Jouw prijzen.", Shared/YourShopBlock):
   Caveat Brush (SIL Open Font License, wwwroot/fonts/OFL-caveat-brush.txt), Latin only (the words need no more) */
@font-face {
    font-family: "Caveat Brush";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/caveat-brush-latin.woff2") format("woff2");
}

:root {
    --ke-red: #D42814;
    --ke-red-dark: #B3210F;
    --ke-red-darker: #931B0C;
    --ke-yellow: #FFC107;
    --ke-yellow-logo: #FCCD2A;
    --ke-green: #1E8C3A;
    --ke-green-dark: #06300B;
    --ke-green-pressed: #19772F;
    --ke-green-light: #DBEDDF;
    --ke-secondary: #DBEDDF;
    --ke-secondary-hover: #C4E1CC;
    --ke-amber: #8A6100;
    --ke-amber-light: #FFF4D6;
    --ke-red-light: #FBE2DE;
    --ke-surface: #FFFFFF;
    --ke-background: #FBF7F1;
    --ke-text: #2B2523;
    --ke-text-muted: #6E6461;
    --ke-border: #E8DFD4;
    --ke-font: "Atkinson Hyperlegible Next", "Segoe UI", "Segoe UI Variable", system-ui, -apple-system, Roboto, sans-serif;
    --ke-font-display: "Big Shoulders Display", "Arial Narrow", var(--ke-font);
    /* the dark under the text on a photo: the browns of the crust and the oven, not grey */
    --ke-ember: 30, 17, 10;
    /* a light shadow under the blocks, in the text's warm brown rather than grey */
    --ke-shadow: 0 1px 2px rgba(43, 37, 35, .06), 0 4px 14px rgba(43, 37, 35, .07);
    --ke-header-height: 56px;
    /* every DevExpress component's font, as in the merchant portal */
    --dxds-font-family-sans-serif: var(--ke-font);
}

html, body {
    margin: 0;
    background: var(--ke-background);
    color: var(--ke-text);
    font-family: var(--ke-font);
}

a {
    color: var(--ke-green);
}

/* ---- buttons: green primary, light green secondary (as KwikEat Desktop) ---- */

.dxbl-btn.dxbl-btn-primary {
    --dxbl-btn-bg: var(--ke-green);
    --dxbl-btn-border-color: var(--ke-green);
    --dxbl-btn-hover-bg: var(--ke-green-pressed);
    --dxbl-btn-hover-border-color: var(--ke-green-pressed);
    --dxbl-btn-active-bg: var(--ke-green-dark);
    --dxbl-btn-active-border-color: var(--ke-green-dark);
    --dxbl-btn-color: #fff;
    font-weight: 600;
}

.dxbl-btn.dxbl-btn-secondary {
    --dxbl-btn-bg: var(--ke-secondary);
    --dxbl-btn-border-color: var(--ke-secondary);
    --dxbl-btn-hover-bg: var(--ke-secondary-hover);
    --dxbl-btn-hover-border-color: var(--ke-secondary-hover);
    --dxbl-btn-active-bg: var(--ke-secondary-hover);
    --dxbl-btn-active-border-color: var(--ke-secondary-hover);
    --dxbl-btn-color: var(--ke-green-dark);
    font-weight: 600;
}

/* plain-anchor buttons on static SSR pages (no circuit for DxButton), and a plain form's submit button */
a.ke-button, button.ke-button {
    display: inline-block;
    padding: 10px 22px;
    border: 0;
    border-radius: 6px;
    background: var(--ke-green);
    color: #fff;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

a.ke-button:hover, button.ke-button:hover {
    background: var(--ke-green-pressed);
    color: #fff;
}

a.ke-button.ke-button-secondary {
    background: var(--ke-secondary);
    color: var(--ke-green-dark);
}

a.ke-button.ke-button-secondary:hover {
    background: var(--ke-secondary-hover);
}

/* ---- the frame: red header, page, footer ---- */

.ke-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.ke-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--ke-red);
    color: #fff;
    min-height: var(--ke-header-height);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 0 16px;
}

.ke-logo {
    display: block;
    height: 28px;
    margin-right: 12px;
}

.ke-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
}

.ke-nav-right {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

/* the header's links, as the desktop's module buttons: red, the current one yellow */
.ke-nav a, .ke-nav-right a, .ke-nav-right button {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 12px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #fff;
    font: 600 14px var(--ke-font);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.ke-nav a:hover, .ke-nav-right a:hover, .ke-nav-right button:hover {
    background: var(--ke-red-dark);
    color: #fff;
}

.ke-nav a.ke-nav-current {
    background: var(--ke-yellow);
    color: var(--ke-text);
}

.ke-nav-right form {
    margin: 0;
}

.ke-main {
    flex: 1 0 auto;
}

.ke-page {
    max-width: 1080px;
    margin: 0 auto;
    padding: 28px 20px 40px 20px;
    font-size: 17px;
    line-height: 1.6;
}

.ke-page-narrow {
    max-width: 760px;
}

.ke-page-title {
    font-size: 26px;
    font-weight: 600;
    margin: 0 0 6px 0;
}

.ke-page-subtitle {
    color: var(--ke-text-muted);
    font-size: 16px;
    margin: 0 0 20px 0;
}

.ke-footer {
    border-top: 1px solid var(--ke-border);
    background: var(--ke-surface);
    color: var(--ke-text-muted);
    font-size: 13px;
    text-align: center;
    padding: 18px 16px;
}

.ke-footer a {
    color: var(--ke-text-muted);
}

/* ---- cards (FormCard on the desktop) ---- */

.ke-card {
    background: var(--ke-surface);
    border: 1px solid var(--ke-border);
    border-radius: 8px;
    padding: 24px 28px;
    box-shadow: var(--ke-shadow);
}

.ke-card + .ke-card {
    margin-top: 16px;
}

.ke-card h3, .ke-card-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 12px 0;
}

/* the start page: intro + feature cards */
.ke-hero {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 24px;
    align-items: center;
    margin-bottom: 24px;
}

.ke-hero-logo {
    width: 100%;
    max-width: 320px;
    justify-self: center;
}

.ke-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.ke-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.ke-feature h4 {
    margin: 0 0 6px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--ke-green-dark);
}

.ke-feature p {
    margin: 0;
    color: var(--ke-text-muted);
    font-size: 16px;
}

/* the start page's screenshots: KwikEat Desktop in a window frame, the lightbox on click (Shared/Screenshot) */
.ke-page-wide {
    max-width: 1240px;
}

.ke-shot {
    display: block;
    width: 100%;
    padding: 0;
    cursor: zoom-in;
    border: 1px solid var(--ke-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--ke-surface);
    box-shadow: 0 6px 24px rgba(43, 37, 35, .14);
    transition: box-shadow .15s, transform .15s;
}

.ke-shot:hover {
    box-shadow: 0 10px 32px rgba(43, 37, 35, .22);
    transform: translateY(-2px);
}

.ke-shot img {
    display: block;
    width: 100%;
    height: auto;
}

.ke-shot-hero {
    max-width: 860px;
    margin: 24px auto;
}

/* the lightbox (wwwroot/js/lightbox.js): a <dialog> over the whole screen, the picture as large as fits, its caption
   and count below it, previous / next at the sides, close at the top right */
.ke-lightbox {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: none;
    /* the dark is the dialog's own (it covers the whole screen): ::backdrop doesn't take it in every browser */
    background: rgba(30, 17, 10, .94);
    color: #fff;
    overflow: hidden;
    /* a horizontal swipe is for the lightbox (wwwroot/js/lightbox.js), not the browser */
    touch-action: pan-y;
    user-select: none;
}

.ke-lightbox::backdrop {
    background: transparent;
}

html:has(.ke-lightbox[open]) {
    overflow: hidden;
}

.ke-lightbox figure {
    box-sizing: border-box;
    height: 100%;
    margin: 0;
    padding: 56px 72px 20px 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.ke-lightbox img {
    display: block;
    max-width: 100%;
    max-height: calc(100% - 50px);
    min-height: 0;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
    background: #fff;
}

.ke-lightbox figcaption {
    display: flex;
    gap: 16px;
    align-items: baseline;
    max-width: 100%;
    font: 17px/1.4 var(--ke-font);
}

.ke-lightbox-count {
    flex: none;
    color: rgba(255, 255, 255, .65);
    font-size: 15px;
}

.ke-lightbox button {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font: 300 34px/1 var(--ke-font);
    cursor: pointer;
}

.ke-lightbox button:hover {
    background: rgba(255, 255, 255, .24);
}

.ke-lightbox button:focus-visible {
    outline: 3px solid var(--ke-yellow);
    outline-offset: 2px;
}

.ke-lightbox-prev {
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
}

.ke-lightbox-next {
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
}

.ke-lightbox-close {
    top: 10px;
    right: 14px;
}

.ke-lightbox-single .ke-lightbox-prev, .ke-lightbox-single .ke-lightbox-next {
    display: none;
}

@media (max-width: 720px) {
    .ke-lightbox figure {
        padding: 60px 12px 72px 12px;
    }

    /* on a phone the arrows below the picture, swiping works too */
    .ke-lightbox-prev, .ke-lightbox-next {
        top: auto;
        bottom: 14px;
        transform: none;
    }

    .ke-lightbox-prev {
        left: calc(50% - 60px);
    }

    .ke-lightbox-next {
        right: calc(50% - 60px);
    }
}

/* your shop, your prices (Shared/YourShopBlock): yellow, the four words large on the left, the reason on the right */
.ke-own {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 20px 40px;
    align-items: center;
    margin: 16px 0;
    padding: 32px 36px;
    border-radius: 12px;
    background: var(--ke-yellow);
    color: var(--ke-text);
    box-shadow: var(--ke-shadow);
}

/* written by hand, as on the shop's own menu board */
.ke-own h2 {
    margin: 0;
    font-family: "Caveat Brush", var(--ke-font-display);
    font-size: clamp(40px, 4.6vw, 56px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: 0;
    color: var(--ke-text);
}

/* each word pair on its own line: four short sentences */
.ke-own h2 span {
    display: block;
}

.ke-own-text p {
    margin: 0;
    font-size: 18px;
    line-height: 1.55;
}

.ke-own-text p + p {
    margin-top: 10px;
    font-weight: 700;
}

@media (max-width: 800px) {
    .ke-own {
        grid-template-columns: 1fr;
        padding: 26px 22px;
    }
}

/* why KwikEat Desktop (/kassa): a red block right under the introduction, six reasons */
.ke-why {
    margin-top: 16px;
    padding: 30px 32px 34px 32px;
    border-radius: 12px;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 193, 7, .22), rgba(255, 193, 7, 0) 50%),
        var(--ke-red);
    color: #fff;
    box-shadow: var(--ke-shadow);
    scroll-margin-top: calc(var(--ke-header-height) + 16px);
}

.ke-why h2 {
    margin: 0 0 20px 0;
    font-size: 40px;
    font-weight: 900;
    line-height: 1.05;
    color: #fff;
}

.ke-why-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 32px;
}

.ke-why-item {
    padding-top: 14px;
    border-top: 2px solid rgba(255, 255, 255, .3);
}

.ke-why-item h3 {
    margin: 0 0 6px 0;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--ke-yellow-logo);
}

.ke-why-item p {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .92);
}

@media (max-width: 900px) {
    .ke-why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .ke-why {
        padding: 24px 20px 26px 20px;
    }

    .ke-why h2 {
        font-size: 32px;
    }

    .ke-why-grid {
        grid-template-columns: 1fr;
    }
}

/* a part of KwikEat: text and screenshot side by side, every other one the other way round */
.ke-showcase {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 32px;
    align-items: center;
}

.ke-showcase:nth-of-type(even) .ke-showcase-text {
    order: 2;
}

.ke-showcase h2, .ke-cta h2, .ke-section-title {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 10px 0;
}

.ke-showcase p {
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.ke-showcase ul {
    margin: 0;
    padding-left: 20px;
    color: var(--ke-text-muted);
    font-size: 16px;
    line-height: 1.6;
}

.ke-showcase li::marker {
    color: var(--ke-green);
}

.ke-section-title {
    margin: 32px 0 12px 0;
}

.ke-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
    background: var(--ke-green-light);
    border-color: var(--ke-secondary-hover);
}

.ke-cta p {
    margin: 0;
}

.ke-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 900px) {
    .ke-showcase {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .ke-showcase:nth-of-type(even) .ke-showcase-text {
        order: 0;
    }
}

@media (max-width: 720px) {
    .ke-hero {
        grid-template-columns: 1fr;
    }

    .ke-hero-logo {
        max-width: 220px;
    }

    .ke-card {
        padding: 18px 16px;
    }
}

/* the price line above the order form */
.ke-price {
    background: var(--ke-green-light);
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 24px;
}

.ke-price p {
    margin: 0;
}

/* ---- helpers the pages use (formerly Bootstrap's) ---- */

.alert {
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 16px;
    border: 1px solid transparent;
}

.alert-info {
    background: var(--ke-green-light);
    border-color: var(--ke-secondary-hover);
}

.alert-danger {
    background: var(--ke-red-light);
    border-color: #F3B8AF;
    color: var(--ke-red-darker);
}

.text-muted { color: var(--ke-text-muted); }
.text-success { color: var(--ke-green); }
.text-danger { color: var(--ke-red); }
.text-warning { color: var(--ke-amber); }

.w-100 { width: 100%; }
.p-0 { padding: 0 !important; }
.mt-3 { margin-top: 1rem; }
.pt-3 { padding-top: 1rem; }
.d-flex { display: flex; }
.flex-row-reverse { flex-direction: row-reverse; }

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th, .table td {
    text-align: left;
    padding: 8px;
    border-bottom: 1px solid var(--ke-border);
}

/* the licence terms */
.ke-terms h4 {
    margin: 20px 0 6px 0;
    font-size: 16px;
}

/* the app's privacy policy (Pages/PrivacyNl, PrivacyEn, PrivacyConnectorNl, PrivacyConnectorEn): lists and the table
   of what is sent; the table scrolls sideways on a phone */
.ke-privacy ul {
    margin: 0 0 12px 0;
    padding-left: 20px;
}

.ke-privacy li + li {
    margin-top: 4px;
}

.ke-privacy a {
    text-decoration: underline;
}

.ke-privacy-table {
    overflow-x: auto;
    margin: 0 0 12px 0;
}

.ke-privacy-table table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 14px;
}

.ke-privacy-table th, .ke-privacy-table td {
    border: 1px solid var(--ke-border);
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
}

.ke-privacy-table th {
    background: var(--ke-green-light);
    font-weight: 600;
}

/* Blazor's reconnect UI (App.razor) - hidden unless blazor.web.js shows it */
#components-reconnect-modal {
    display: none;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 2000;
    align-items: center;
    justify-content: center;
    background: rgba(43, 37, 35, .45);
}

.components-reconnect-panel {
    background: var(--ke-surface);
    border-radius: 8px;
    padding: 20px 24px;
    max-width: 420px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
}

.components-reconnect-panel p {
    display: none;
    margin: 0;
}

.components-reconnect-panel button, .components-reconnect-panel a {
    margin-left: 8px;
    padding: 4px 12px;
    border: none;
    border-radius: 4px;
    background: var(--ke-green);
    color: #fff;
    font: 600 14px var(--ke-font);
    text-decoration: none;
    cursor: pointer;
}

.components-reconnect-show .status-show,
.components-reconnect-failed .status-failed,
.components-reconnect-rejected .status-rejected {
    display: block;
}

/* ---- kwikeat.com, the pages for merchants (Pages/Site) ---- */

.ke-nav-right a.ke-nav-signup {
    background: var(--ke-yellow);
    color: var(--ke-text);
    font-weight: 600;
    border-radius: 6px;
}

.ke-nav-right a.ke-nav-signup:hover {
    background: var(--ke-yellow-logo);
    color: var(--ke-text);
}

/* the cards' headings, whatever their level (h2/h3 for the page outline, h4 before) */
.ke-feature h2, .ke-feature h3 {
    margin: 0 0 6px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--ke-green-dark);
}

.ke-showcase.ke-showcase-text-only, .ke-page .ke-showcase:not(:has(.ke-shot)) {
    grid-template-columns: 1fr;
}

/* the two products side by side */
.ke-products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    margin: 16px 0;
}

.ke-products .ke-card + .ke-card, .ke-features .ke-card + .ke-card {
    margin-top: 0;
}

.ke-product {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ke-product h2 {
    margin: 0;
    font-size: 24px;
}

.ke-product-tagline {
    margin: 0;
    color: var(--ke-text-muted);
}

.ke-product ul, .ke-product ol {
    margin: 4px 0;
    padding-left: 20px;
    line-height: 1.6;
}

.ke-product-price {
    font-weight: 600;
    color: var(--ke-green-dark);
    margin: 4px 0 8px;
}

.ke-product .ke-button {
    align-self: flex-start;
    margin-top: auto;
}

/* together (the home page): the text on the left, KwikEat Desktop's board with a caption on the right */
.ke-together {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px 36px;
    align-items: center;
    border-left: 4px solid var(--ke-green);
    margin-bottom: 16px;
}

/* the card's heading, though it is inside the text's column */
.ke-together h2 {
    margin: 0 0 12px 0;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.1;
}

.ke-together p {
    margin-bottom: 0;
}

.ke-together-shot {
    margin: 0;
}

.ke-together-shot figcaption {
    margin-top: 10px;
    font-size: 15px;
    color: var(--ke-text-muted);
    text-align: center;
}

@media (max-width: 860px) {
    .ke-together {
        grid-template-columns: 1fr;
    }

    .ke-together h2 {
        font-size: 30px;
    }
}

/* something that isn't there yet, said plainly */
.ke-note {
    background: var(--ke-amber-light);
    border-color: #F1DDA6;
    margin: 16px 0;
}

.ke-note p {
    margin: 0;
}

.ke-facts {
    padding-left: 20px;
    line-height: 1.7;
}

.ke-small {
    font-size: 15px;
    color: var(--ke-text-muted);
}

/* the tiers on /prijzen */
.ke-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.ke-tiers .ke-card + .ke-card {
    margin-top: 0;
}

.ke-tier h3 {
    margin: 0 0 8px 0;
    font-size: 20px;
}

.ke-tier-price {
    font-size: 32px;
    font-weight: 700;
    color: var(--ke-green-dark);
    margin: 0;
}

.ke-tier-price span {
    font-size: 15px;
    font-weight: 400;
    color: var(--ke-text-muted);
}

.ke-tier-fee {
    font-weight: 600;
    margin: 4px 0;
}

/* Start's lower commission with KwikEat Desktop: a small green tag under the commission */
.ke-tier-note {
    align-self: flex-start;
    display: inline-block;
    margin: 6px 0 4px 0;
    padding: 3px 10px;
    border-radius: 6px;
    background: var(--ke-green-light);
    color: var(--ke-green-dark);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.ke-table-scroll {
    overflow-x: auto;
}

.ke-price-table {
    width: 100%;
    border-collapse: collapse;
}

.ke-price-table th, .ke-price-table td {
    border-bottom: 1px solid var(--ke-border);
    padding: 8px 10px;
    text-align: right;
    white-space: nowrap;
}

.ke-price-table th[scope="row"], .ke-price-table thead th:first-child {
    text-align: left;
    white-space: normal;
}

.ke-price-table .ke-best {
    font-weight: 700;
    color: var(--ke-green-dark);
    background: var(--ke-green-light);
}

.ke-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 10px;
    background: var(--ke-amber-light);
    color: var(--ke-amber);
    font-size: 12px;
    font-weight: 600;
    vertical-align: middle;
}

/* questions and answers: folded, but in the HTML */
.ke-faq details {
    border-bottom: 1px solid var(--ke-border);
    padding: 10px 0;
}

.ke-faq summary {
    cursor: pointer;
    font-weight: 600;
}

.ke-faq details p {
    margin: 8px 0 4px;
    line-height: 1.6;
}

.ke-footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
    margin-bottom: 10px;
    font-size: 15px;
}

/* ---- headings: Big Shoulders Display; condensed, so a step larger than a normal face would be (24, 34, 46, 62, 84) ---- */

h1, h2, h3, .ke-page-title, .ke-section-title {
    font-family: var(--ke-font-display);
    letter-spacing: 0.005em;
    text-wrap: balance;
}

.ke-page-title {
    font-size: 46px;
    font-weight: 850;
    line-height: 1.05;
}

.ke-section-title, .ke-showcase h2, .ke-cta h2, .ke-product h2, .ke-card > h2 {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.1;
}

.ke-card h3, .ke-card-title, .ke-tier h3 {
    font-size: 24px;
    font-weight: 800;
}

/* a tier's price is read as a heading: in the headings' face (the text face's slashed zero is for reading, not for
   a big €0) */
.ke-tier-price {
    font-family: var(--ke-font-display);
    font-size: 46px;
    font-weight: 900;
    line-height: 1.05;
}

.ke-tier-price span {
    font-family: var(--ke-font);
}

/* a card's own heading starts at the card's padding, not a line below it */
.ke-card > h2:first-child {
    margin-top: 0;
}

/* the small headings of the feature cards */
.ke-feature h2, .ke-feature h3 {
    font-size: 22px;
    font-weight: 800;
}

/* ---- photos: the page's photo with its heading on it (Shared/PhotoBanner) ---- */

.ke-banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    min-height: 300px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: rgb(var(--ke-ember));
    color: #fff;
    box-shadow: var(--ke-shadow);
}

.ke-banner-photo {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ke-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(var(--ke-ember), .85) 0%, rgba(var(--ke-ember), .4) 45%, rgba(var(--ke-ember), 0) 80%);
}

.ke-banner-text {
    max-width: 760px;
    padding: 28px 32px;
}

.ke-banner h1 {
    margin: 0;
    font-size: clamp(40px, 6vw, 62px);
    font-weight: 900;
    line-height: 1;
    color: #fff;
}

.ke-banner-subtitle {
    margin: 10px 0 0 0;
    font-size: 18px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .9);
}

/* the home page: the photo is the page's opening, the text on its dark side */
.ke-banner-hero {
    align-items: center;
    min-height: min(76vh, 580px);
}

.ke-banner-hero::after {
    background: linear-gradient(90deg, rgba(var(--ke-ember), .9) 0%, rgba(var(--ke-ember), .66) 42%, rgba(var(--ke-ember), .08) 78%);
}

.ke-banner-hero .ke-banner-text {
    max-width: 720px;
    padding: 48px 52px;
}

.ke-banner-hero h1 {
    font-size: clamp(48px, 7.6vw, 84px);
}

.ke-banner-hero .ke-banner-subtitle {
    margin-top: 12px;
    font-family: var(--ke-font-display);
    font-size: 28px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--ke-yellow);
}

.ke-banner-hero p {
    font-size: 17px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .9);
}

/* a photo at the top of a card: edge to edge, over the card's padding */
.ke-card-photo {
    display: block;
    width: calc(100% + 56px);
    max-width: none;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin: -24px -28px 8px -28px;
    border-radius: 7px 7px 0 0;
}

/* the call to sign up at the end of the home page, over the oven's fire */
.ke-cta.ke-cta-photo {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 44px 40px;
    border: none;
    border-radius: 12px;
    background: rgb(var(--ke-ember));
    color: #fff;
}

.ke-cta-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ke-cta-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(var(--ke-ember), .9) 0%, rgba(var(--ke-ember), .6) 55%, rgba(var(--ke-ember), .3) 100%);
}

.ke-cta-photo h2 {
    font-size: 46px;
    font-weight: 900;
    color: #fff;
}

.ke-cta-photo p {
    color: rgba(255, 255, 255, .9);
    font-size: 17px;
}

/* buttons on a photo: signing up in the header's yellow, the other one light */
a.ke-button.ke-button-signup {
    background: var(--ke-yellow);
    color: var(--ke-text);
}

a.ke-button.ke-button-signup:hover {
    background: var(--ke-yellow-logo);
    color: var(--ke-text);
}

a.ke-button.ke-button-light {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
}

a.ke-button.ke-button-light:hover {
    background: rgba(255, 255, 255, .26);
    color: #fff;
}

a.ke-button:focus-visible, button.ke-button:focus-visible {
    outline: 3px solid var(--ke-yellow);
    outline-offset: 2px;
}

@media (max-width: 720px) {
    .ke-page-title {
        font-size: 38px;
    }

    .ke-section-title, .ke-showcase h2, .ke-cta h2, .ke-product h2, .ke-card > h2 {
        font-size: 30px;
    }

    .ke-banner {
        min-height: 220px;
        border-radius: 10px;
    }

    .ke-banner-text {
        padding: 20px;
    }

    .ke-banner-subtitle {
        font-size: 16px;
    }

    /* on a phone the photo goes on top and the text below it, on the dark */
    .ke-banner-hero {
        display: block;
        min-height: 0;
    }

    .ke-banner-hero .ke-banner-photo {
        position: relative;
        z-index: auto;
        height: 220px;
    }

    .ke-banner-hero::after {
        bottom: auto;
        height: 220px;
        background: linear-gradient(to top, rgb(var(--ke-ember)) 0%, rgba(var(--ke-ember), 0) 55%);
    }

    .ke-banner-hero .ke-banner-text {
        position: relative;
        padding: 4px 20px 24px 20px;
    }

    .ke-banner-hero .ke-banner-subtitle {
        font-size: 24px;
    }

    .ke-banner-hero p {
        font-size: 16px;
    }

    .ke-card-photo {
        width: calc(100% + 32px);
        margin: -18px -16px 8px -16px;
    }

    .ke-cta.ke-cta-photo {
        padding: 28px 20px;
    }

    .ke-cta-photo h2 {
        font-size: 38px;
    }
}

/* a row of cards and a block after one another: the same room as between two blocks */
:is(.ke-features, .ke-tiers) + :is(.ke-card, .ke-features, .ke-tiers),
.ke-card + :is(.ke-features, .ke-tiers) {
    margin-top: 16px;
}

/* the box the ticket rail hangs in: a real kitchen, blurred (images/site/kitchen-blur.webp, 800px and blurred
   beforehand, a few KB) under a dark veil, so the heading is white and the tickets stand out */
.ke-rail-box {
    margin-top: 16px;
    padding: 26px 28px 34px 28px;
    border-radius: 12px;
    background:
        linear-gradient(rgba(var(--ke-ember), .35), rgba(var(--ke-ember), .15)),
        url("/images/site/kitchen-blur.webp") center / cover,
        rgb(var(--ke-ember));
    box-shadow: var(--ke-shadow);
}

.ke-rail-box .ke-section-title {
    color: #fff;
    text-shadow: 0 1px 8px rgba(var(--ke-ember), .6);
}

@media (max-width: 560px) {
    .ke-rail-box {
        padding: 20px 14px 26px 14px;
    }
}

.ke-rail-box + .ke-card {
    margin-top: 16px;
}

.ke-rail-box .ke-section-title {
    margin: 0 0 18px 0;
}

.ke-rail-box .ke-tickets {
    margin-bottom: 0;
}

/* a tier with a button: the button at the bottom, level in the three cards */
.ke-tier:has(.ke-tier-cta) {
    display: flex;
    flex-direction: column;
}

a.ke-button.ke-tier-cta {
    margin-top: auto;
    align-self: stretch;
    padding: 12px 22px;
    text-align: center;
}

.ke-tier:has(.ke-tier-cta) .ke-tier-points,
.ke-tier:has(.ke-tier-cta) .ke-tier-for {
    margin-bottom: 22px;
}

/* the tier that stands out, just: the same frame, a few pixels higher with a little more shadow, and the one filled
   button */
.ke-tiers .ke-tier.ke-tier-highlight {
    transform: translateY(-4px);
    box-shadow: 0 2px 4px rgba(43, 37, 35, .06), 0 10px 24px rgba(43, 37, 35, .12);
}

@media (max-width: 720px) {
    .ke-tiers .ke-tier.ke-tier-highlight {
        transform: none;
    }
}

/* a tier's points: what sets it apart */
.ke-tier-points {
    margin: 12px 0 0 0;
    padding: 12px 0 0 0;
    border-top: 1px solid var(--ke-border);
    list-style: none;
}

.ke-tier-points li {
    position: relative;
    padding-left: 26px;
    font-size: 16px;
    line-height: 1.5;
}

.ke-tier-points li + li {
    margin-top: 8px;
}

.ke-tier-points li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .32em;
    width: 7px;
    height: 12px;
    border: solid var(--ke-green);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

/* the steps (/online-betalen) as kitchen tickets on a ticket rail: paper with a torn zigzag edge, hanging a little
   askew from a steel rail */
.ke-tickets {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0 0 24px 0;
    padding: 0 12px;
    list-style: none;
}

.ke-tickets::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    height: 14px;
    border-radius: 7px;
    background: linear-gradient(to bottom, #F2F4F5 0%, #B9BFC4 45%, #8E959B 55%, #D5D9DC 100%);
    box-shadow: 0 2px 4px rgba(43, 37, 35, .25);
}

.ke-tickets li {
    padding-top: 6px;
    filter: drop-shadow(0 4px 8px rgba(43, 37, 35, .14));
}

/* the paper hangs askew, the rail stays straight */
.ke-tickets li:nth-child(odd) .ke-ticket {
    transform: rotate(-.9deg);
}

.ke-tickets li:nth-child(even) .ke-ticket {
    transform: rotate(.8deg);
}

.ke-ticket {
    transform-origin: 50% 0;
    height: 100%;
    box-sizing: border-box;
    padding: 22px 22px 34px 22px;
    background: #FFFBF1;
    /* the torn edge: teeth in the bottom 8px only, the paper above them whole */
    -webkit-mask:
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 8px repeat-x,
        linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat;
    mask:
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 8px repeat-x,
        linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat;
}

.ke-ticket-no {
    display: block;
    padding-bottom: 8px;
    margin-bottom: 12px;
    border-bottom: 2px dashed var(--ke-border);
    font: 900 44px/1 var(--ke-font-display);
    color: var(--ke-red);
}

.ke-ticket h3 {
    margin: 0 0 8px 0;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--ke-text);
}

.ke-ticket p {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--ke-text-muted);
}

@media (max-width: 1000px) {
    .ke-tickets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 34px;
    }

    /* a rail above each row */
    .ke-tickets::before {
        display: none;
    }

    .ke-tickets li {
        padding-top: 0;
        border-top: 14px solid transparent;
        background: linear-gradient(to bottom, #F2F4F5 0%, #B9BFC4 45%, #8E959B 55%, #D5D9DC 100%) top / calc(100% + 20px) 14px no-repeat border-box;
    }
}

@media (max-width: 560px) {
    .ke-tickets {
        grid-template-columns: 1fr;
        padding: 0 6px;
    }
}

/* the payment methods (/online-betalen): tiles beside Stripe's badge */
.ke-methods {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 28px 40px;
    align-items: start;
}

.ke-methods h2 {
    margin: 0 0 16px 0;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.1;
}

/* a card's text starts and ends at the card's padding */
.ke-card > p:first-child {
    margin-top: 0;
}

.ke-card > p:last-child {
    margin-bottom: 0;
}

.ke-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ke-chips li {
    padding: 12px 16px;
    border: 1px solid var(--ke-border);
    border-left: 4px solid var(--ke-green);
    border-radius: 8px;
    background: var(--ke-background);
    font-weight: 700;
    line-height: 1.3;
}

.ke-chips li span {
    display: block;
    font-weight: 400;
    font-size: 15px;
    color: var(--ke-text-muted);
}

.ke-stripe {
    padding: 20px 22px;
    border-radius: 10px;
    background: #F6F5FF;
}

.ke-stripe img {
    display: block;
    width: 150px;
    height: auto;
}

.ke-stripe p {
    margin: 14px 0 0 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ke-text-muted);
}

.ke-stripe p + a {
    display: inline-block;
    margin-top: 10px;
    font-size: 15px;
    font-weight: 600;
}

/* a section (/online-bestellen) with Stripe's badge beside its text */
.ke-page .ke-showcase:has(.ke-stripe) {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: start;
}

/* the text on the left, whatever place the section has (sections otherwise take turns) */
.ke-page .ke-showcase:has(.ke-stripe) .ke-showcase-text {
    order: 0;
}

@media (max-width: 800px) {
    .ke-methods, .ke-page .ke-showcase:has(.ke-stripe) {
        grid-template-columns: 1fr;
    }

    .ke-methods h2 {
        font-size: 30px;
    }
}

@media (max-width: 480px) {
    .ke-chips {
        grid-template-columns: 1fr;
    }
}

/* ---- the header's menu (Shared/MainLayout, wwwroot/js/menu.js) ----
   Wide: .ke-menu isn't a box, its pages and buttons sit in the header as they always did. Narrow: the burger button
   opens it as a red circle growing from the button over the whole screen, the pages coming up one after the other in
   the menu board's letters, the current one yellow. */

.ke-menu {
    display: contents;
}

.ke-burger, .ke-header-signup {
    display: none;
}

@media (max-width: 960px) {
    .ke-header {
        flex-wrap: nowrap;
        gap: 8px;
    }

    .ke-logo-link, .ke-burger, .ke-header-signup {
        position: relative;
        z-index: 2;
    }

    a.ke-header-signup {
        display: inline-flex;
        align-items: center;
        height: 36px;
        margin-left: auto;
        padding: 0 14px;
        border-radius: 6px;
        background: var(--ke-yellow);
        color: var(--ke-text);
        font: 600 15px var(--ke-font);
        text-decoration: none;
        transition: opacity .2s;
    }

    .ke-burger {
        display: inline-block;
        flex: none;
        width: 44px;
        height: 44px;
        margin-right: -6px;
        padding: 0;
        border: none;
        border-radius: 8px;
        background: transparent;
        cursor: pointer;
    }

    .ke-burger:focus-visible {
        outline: 3px solid var(--ke-yellow);
        outline-offset: -3px;
    }

    .ke-burger span {
        position: absolute;
        left: 11px;
        top: 21px;
        width: 22px;
        height: 2.5px;
        border-radius: 2px;
        background: #fff;
        transition: transform .4s cubic-bezier(.7, 0, .2, 1), opacity .2s;
    }

    .ke-burger span:nth-child(1) {
        transform: translateY(-7px);
    }

    .ke-burger span:nth-child(3) {
        transform: translateY(7px);
    }

    .ke-menu-open .ke-burger span:nth-child(1) {
        transform: rotate(45deg);
    }

    .ke-menu-open .ke-burger span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    .ke-menu-open .ke-burger span:nth-child(3) {
        transform: rotate(-45deg);
    }

    .ke-menu-open a.ke-header-signup {
        opacity: 0;
        pointer-events: none;
    }

    /* the panel: the whole screen, cut to a circle around the button until it opens */
    .ke-menu {
        position: fixed;
        inset: 0;
        z-index: 1;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        padding: calc(var(--ke-header-height) + 28px) 28px 32px 28px;
        background:
            radial-gradient(circle at 100% 100%, rgba(255, 193, 7, .28), rgba(255, 193, 7, 0) 55%),
            var(--ke-red);
        clip-path: circle(0 at var(--ke-menu-x, calc(100% - 30px)) var(--ke-menu-y, 28px));
        visibility: hidden;
        transition: clip-path .5s cubic-bezier(.7, 0, .2, 1), visibility 0s linear .5s;
    }

    .ke-menu-open .ke-menu {
        clip-path: circle(150vmax at var(--ke-menu-x, calc(100% - 30px)) var(--ke-menu-y, 28px));
        visibility: visible;
        transition: clip-path .65s cubic-bezier(.7, 0, .2, 1), visibility 0s;
    }

    .ke-menu-open body {
        overflow: hidden;
    }

    .ke-menu .ke-nav {
        flex: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .ke-menu .ke-nav a {
        height: auto;
        padding: 2px 0;
        border-radius: 0;
        background: none;
        color: #fff;
        font: 800 clamp(30px, 8.5vw, 40px)/1.15 var(--ke-font-display);
        letter-spacing: .01em;
        opacity: 0;
        transform: translateY(28px);
    }

    .ke-menu .ke-nav a:hover {
        background: none;
        color: var(--ke-yellow-logo);
    }

    .ke-menu .ke-nav a.ke-nav-current {
        background: none;
        color: var(--ke-yellow);
    }

    .ke-menu .ke-nav a:nth-child(2) { --ke-i: 1; }
    .ke-menu .ke-nav a:nth-child(3) { --ke-i: 2; }
    .ke-menu .ke-nav a:nth-child(4) { --ke-i: 3; }
    .ke-menu .ke-nav a:nth-child(5) { --ke-i: 4; }
    .ke-menu .ke-nav a:nth-child(6) { --ke-i: 5; }

    .ke-menu-open .ke-menu .ke-nav a {
        opacity: 1;
        transform: none;
        transition: opacity .35s ease-out, transform .5s cubic-bezier(.2, .9, .25, 1.15);
        transition-delay: calc(.2s + var(--ke-i, 0) * .055s);
    }

    /* log in, sign up, the language: below the pages */
    .ke-menu .ke-nav-right {
        flex-wrap: wrap;
        gap: 10px;
        margin: auto 0 0 0;
        padding-top: 24px;
        border-top: 1px solid rgba(255, 255, 255, .35);
        opacity: 0;
    }

    .ke-menu-open .ke-menu .ke-nav-right {
        opacity: 1;
        transition: opacity .4s ease-out .5s;
    }

    .ke-menu .ke-nav-right a, .ke-menu .ke-nav-right button {
        height: 44px;
        padding: 0 16px;
        font-size: 17px;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
        border-radius: 8px;
    }

    .ke-menu .ke-nav-right a.ke-nav-signup {
        box-shadow: none;
    }
}

@media (max-width: 960px) and (prefers-reduced-motion: reduce) {
    .ke-menu, .ke-menu-open .ke-menu,
    .ke-menu .ke-nav a, .ke-menu-open .ke-menu .ke-nav a,
    .ke-menu .ke-nav-right, .ke-menu-open .ke-menu .ke-nav-right,
    .ke-burger span {
        transition: none;
    }

    .ke-menu .ke-nav a {
        transform: none;
    }
}

/* ---- signing up (/aanmelden): one short form, then "check your mail" ---- */
.ke-signup {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.ke-field {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0;
    border: 0;
}

.ke-field > span, .ke-field > legend {
    font-weight: 600;
    padding: 0;
}

.ke-field input, .ke-field select {
    font: inherit;
    color: var(--ke-text);
    background: var(--ke-surface);
    border: 1px solid #CDBFAF;
    border-radius: 6px;
    padding: 10px 12px;
    width: 100%;
    box-sizing: border-box;
}

.ke-field input:focus-visible, .ke-field select:focus-visible, .ke-choice input:focus-visible, .ke-check input:focus-visible {
    outline: 3px solid var(--ke-yellow);
    outline-offset: 1px;
    border-color: var(--ke-green);
}

.ke-choice label, .ke-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-weight: 400;
}

.ke-choice input, .ke-check input {
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    accent-color: var(--ke-green);
    flex: none;
}

.ke-signup .ke-button {
    justify-self: start;
    margin-top: 4px;
}

.ke-signup .ke-small {
    margin: 0;
}

/* the field only bots fill in: off screen, not hidden from them by display:none */
.ke-trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.ke-signup-errors {
    margin: 16px 0 0;
    padding: 12px 16px 12px 34px;
    border-radius: 6px;
    background: var(--ke-red-light);
    color: var(--ke-red-darker);
}

.ke-signup-sent {
    margin-top: 12px;
    padding: 18px 20px;
    border-left: 4px solid var(--ke-green);
    border-radius: 6px;
    background: var(--ke-green-light);
    color: var(--ke-green-dark);
}

.ke-signup-sent p {
    margin: 0 0 8px;
}

.ke-signup-sent .ke-signup-sent-title {
    font-family: var(--ke-font-display);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
}