/*
 * SCANwelcome public website (scanwelcome.app).
 * CGP: Instrument Serif (display) + Manrope (UI) from marketing.partials.fonts,
 * Midnight / Ivory / Porcelain, Champagne only as a restrained accent.
 * Mobile first; breakpoints 720 px (tablet) and 1080 px (desktop navigation).
 * No zoom locks, inputs and controls >= 16 px, focus always visible.
 */

:root {
    --midnight: #0B1F2A;
    --slate: #16313C;
    --ivory: #F7F4EE;
    --porcelain: #FCFBF8;
    --surface: #FFFFFF;
    --champagne: #C6A574;
    --bronze: #927047;
    --text: #202426;
    --muted: #5F6965;
    --line: #E4E7E3;
    --line-strong: #D5D9D4;

    --radius: 14px;
    --radius-small: 10px;
    --container: 1180px;
    --gutter: 20px;
    --section: 72px;
    --header: 68px;
    --focus: 0 0 0 3px var(--ivory), 0 0 0 5px var(--slate);
}

@media (min-width: 720px) {
    :root { --gutter: 32px; --section: 104px; --header: 76px; }
}

/* Base ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body.mk-body {
    margin: 0;
    background: var(--ivory);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 1rem;
    line-height: 1.6;
    font-feature-settings: "kern";
    -webkit-font-smoothing: antialiased;
    overflow-wrap: break-word;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
picture { display: contents; }
figure { margin: 0; }
p, h1, h2, h3 { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }

a { color: inherit; text-underline-offset: 3px; }

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
#main:focus { outline: none; }
#print:focus { outline: none; }

.mk-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.mk-icon { width: 20px; height: 20px; flex: none; stroke: currentColor; }

.mk-container {
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.mk-skip {
    position: absolute;
    left: 16px; top: -100px;
    z-index: 100;
    padding: 12px 18px;
    background: var(--midnight);
    color: var(--ivory);
    border-radius: var(--radius-small);
    font-weight: 600;
    text-decoration: none;
}
.mk-skip:focus { top: 12px; }

.mk-preview {
    background: var(--slate);
    color: var(--ivory);
    font-size: .875rem;
    font-weight: 600;
    text-align: center;
    padding: 8px var(--gutter);
}

/* Typography ------------------------------------------------------------ */

.mk-display {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.5rem, 1.7rem + 3vw, 4rem);
    line-height: 1.04;
    letter-spacing: -.012em;
    color: var(--midnight);
    text-wrap: balance;
}
.mk-display--page { font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem); }

.mk-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.875rem, 1.45rem + 1.6vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -.008em;
    color: var(--midnight);
    text-wrap: balance;
}
.mk-title--small { font-size: clamp(1.625rem, 1.3rem + 1.1vw, 2.125rem); }

.mk-lead {
    margin-top: 20px;
    font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
    line-height: 1.6;
    color: var(--slate);
    max-width: 36em;
}

.mk-text { margin-top: 16px; color: var(--muted); max-width: 40em; }

.mk-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--slate);
}
.mk-eyebrow::before {
    content: "";
    width: 28px; height: 1px;
    background: var(--champagne);
}
.mk-eyebrow--icon::before { display: none; }
.mk-eyebrow--icon .mk-icon { width: 18px; height: 18px; color: var(--bronze); }

.mk-note { margin-top: 20px; font-size: .9375rem; color: var(--muted); }
.mk-note--key { display: flex; align-items: flex-start; gap: 10px; color: var(--slate); font-weight: 500; max-width: 34em; }
.mk-note--key .mk-icon { width: 20px; height: 20px; margin-top: 2px; color: var(--bronze); }

/* Buttons and links ----------------------------------------------------- */

.mk-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin-top: 32px;
}

.mk-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: 999px;
    font: 600 1rem/1.2 var(--font-ui);
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.mk-button .mk-icon { width: 18px; height: 18px; }

.mk-button--primary { background: var(--midnight); color: var(--ivory); }
.mk-button--primary:hover { background: var(--slate); }

.mk-button--secondary { background: transparent; color: var(--midnight); border-color: var(--line-strong); }
.mk-button--secondary:hover { border-color: var(--midnight); background: var(--surface); }

.mk-button--light { background: var(--ivory); color: var(--midnight); }
.mk-button--light:hover { background: var(--surface); }

.mk-button--ghost { background: transparent; color: var(--ivory); border-color: rgba(247, 244, 238, .35); }
.mk-button--ghost:hover { border-color: var(--ivory); }

.mk-button--small { min-height: 44px; padding: 10px 18px; font-size: .9375rem; }

.mk-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-weight: 600;
    color: var(--midnight);
    text-decoration: underline;
    text-decoration-color: var(--champagne);
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
}
.mk-link:hover { text-decoration-color: var(--midnight); }
.mk-link .mk-icon { width: 18px; height: 18px; }

/* Header ---------------------------------------------------------------- */

.mk-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(247, 244, 238, .94);
    border-bottom: 1px solid var(--line);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
}

.mk-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: var(--header);
}

.mk-logo { display: inline-flex; align-items: center; min-height: 44px; flex: none; }
.mk-logo img { width: 148px; height: auto; }

.mk-nav { display: flex; align-items: center; }

.mk-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--slate);
    text-decoration: none;
}
.mk-nav__link:hover { color: var(--midnight); }
.mk-nav__link[aria-current="page"] {
    color: var(--midnight);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--champagne);
    text-underline-offset: 8px;
}

.mk-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    margin-right: -10px;
    background: none;
    border: 0;
    border-radius: 12px;
    color: var(--midnight);
    cursor: pointer;
}
.mk-menu-toggle .mk-icon { width: 24px; height: 24px; }
.mk-menu-toggle__close { display: none; }
.mk-menu-open .mk-menu-toggle__open { display: none; }
.mk-menu-open .mk-menu-toggle__close { display: block; }

/* Mobile panel */
.mk-nav__panel {
    display: none;
    position: fixed;
    inset: var(--header) 0 0 0;
    z-index: 49;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px var(--gutter) 40px;
    background: var(--ivory);
}
.mk-menu-open .mk-nav__panel { display: block; }
.mk-menu-open body { overflow: hidden; }

.mk-nav__list li { border-bottom: 1px solid var(--line); }
.mk-nav__list .mk-nav__link { width: 100%; min-height: 56px; font-size: 1.125rem; }

.mk-nav__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 24px;
}
.mk-nav__actions .mk-button { width: 100%; }
.mk-nav__login { justify-content: center; border: 1px solid var(--line-strong); border-radius: 999px; }

/* Language switcher */
.mk-lang { position: relative; }
.mk-lang__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--slate);
    list-style: none;
    cursor: pointer;
}
.mk-lang__toggle::-webkit-details-marker { display: none; }
.mk-lang__toggle .mk-icon { width: 18px; height: 18px; }
.mk-lang__chevron { transition: transform .15s ease; }
.mk-lang[open] .mk-lang__chevron { transform: rotate(180deg); }

.mk-lang__list {
    margin-top: 8px !important;
    padding: 6px !important;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.mk-lang__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
}
.mk-lang__list a:hover { background: var(--ivory); }
.mk-lang__list a[aria-current="true"] { font-weight: 600; color: var(--midnight); }
.mk-lang__list a[aria-current="true"]::after { content: none; }
.mk-lang__code { font-size: .8125rem; color: var(--muted); letter-spacing: .04em; }

@media (min-width: 1080px) {
    .mk-menu-toggle { display: none; }

    .mk-nav__panel {
        display: flex;
        align-items: center;
        gap: 28px;
        position: static;
        padding: 0;
        overflow: visible;
        background: none;
    }

    .mk-nav__list { display: flex; gap: 22px; }
    .mk-nav__list li { border: 0; }
    .mk-nav__list .mk-nav__link { width: auto; min-height: 44px; font-size: .9375rem; }

    .mk-nav__actions { flex-direction: row; align-items: center; gap: 8px; margin: 0; }
    .mk-nav__actions .mk-button { width: auto; }
    .mk-nav__login { border: 0; padding: 0 10px; }

    .mk-lang__list {
        position: absolute;
        right: 0;
        top: 100%;
        min-width: 210px;
        box-shadow: 0 12px 32px rgba(11, 31, 42, .08);
    }
}

/* Sections -------------------------------------------------------------- */

.mk-section { padding: var(--section) 0; }
.mk-section--tight { padding-top: 24px; }
.mk-section--porcelain { background: var(--porcelain); border-block: 1px solid var(--line); }
.mk-section__more { margin-top: 32px; }

.mk-intro { max-width: 760px; margin-bottom: 40px; }

/* Hero: copy left, the real guide on two phones right */
.mk-hero { padding: 32px 0 56px; overflow: hidden; }
.mk-hero__grid { display: grid; gap: 40px; align-items: center; }
.mk-hero__copy { max-width: 600px; }

.mk-highlights { display: grid; gap: 12px; margin-top: 32px !important; }
.mk-highlights li { display: flex; align-items: center; gap: 10px; font-size: .9375rem; font-weight: 500; color: var(--slate); }
.mk-highlights .mk-icon { width: 20px; height: 20px; color: var(--bronze); }

.mk-hero__visual { position: relative; aspect-ratio: 1 / 1.08; max-width: 560px; width: 100%; margin: 0 auto; }
.mk-hero__stage {
    position: absolute; inset: 40px 0 0 6%;
    background: var(--porcelain);
    border: 1px solid var(--line);
    border-radius: 28px;
}
.mk-hero__phone { position: absolute; }
.mk-hero__phone--front { left: 8%; top: 0; width: 46%; z-index: 2; }
.mk-hero__phone--back { right: 4%; top: 64px; width: 42%; z-index: 1; }

@media (min-width: 720px) {
    .mk-hero { padding: 56px 0 72px; }
    .mk-highlights { grid-template-columns: repeat(3, auto); justify-content: start; gap: 12px 28px; }
}

@media (min-width: 1080px) {
    .mk-hero { padding: 56px 0 80px; }
    .mk-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
    .mk-hero__visual { max-width: 580px; margin-right: 0; }
    .mk-highlights { grid-template-columns: 1fr; }
}

@media (min-width: 1200px) {
    .mk-highlights { grid-template-columns: repeat(3, auto); }
}

/* Devices around real screenshots (thin bezel, soft depth, no heavy shadows) */
.mk-device-phone {
    padding: 7px;
    background: #101a20;
    border-radius: 40px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 24px 48px -24px rgba(11, 31, 42, .35);
}
.mk-device-phone img { width: 100%; height: auto; border-radius: 33px; background: var(--surface); }
.mk-device-phone figcaption { margin-top: 12px; font-size: .8125rem; font-weight: 600; text-align: center; color: inherit; }
.mk-device-phone--small { padding: 5px; border-radius: 26px; }
.mk-device-phone--small img { border-radius: 21px; }

.mk-device-browser {
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 24px 48px -28px rgba(11, 31, 42, .35);
}
.mk-device-browser__bar { display: flex; gap: 6px; padding: 9px 12px; background: var(--ivory); border-bottom: 1px solid var(--line); }
.mk-device-browser__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.mk-device-browser img { width: 100%; height: auto; }

/* Accommodation types strip */
.mk-types { padding: 28px 0; border-block: 1px solid var(--line); background: var(--porcelain); }
.mk-types__label { margin-bottom: 18px; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-align: center; color: var(--muted); }
.mk-types__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.mk-types__list li { display: flex; align-items: center; gap: 10px; font-size: .875rem; font-weight: 500; line-height: 1.3; color: var(--slate); }
.mk-types__list .mk-icon { width: 20px; height: 20px; color: var(--bronze); }

@media (min-width: 720px) {
    .mk-types__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
    .mk-types__list { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 16px; }
    .mk-types__list li { flex-direction: column; text-align: center; gap: 8px; font-size: .8125rem; }
}

/* Guest experience: hospitality photo with the guide on a computer and a phone */
.mk-experience { display: grid; gap: 48px; align-items: center; }
.mk-experience__media { position: relative; padding-bottom: 56px; }
.mk-experience__media picture img,
.mk-experience__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--porcelain); }
.mk-experience__browser { position: absolute; left: -2%; bottom: 0; width: 58%; }
.mk-experience__phone { position: absolute; right: 4%; bottom: -8px; width: 24%; }
.mk-experience__copy { max-width: 540px; }

.mk-checklist { display: grid; gap: 14px; margin: 28px 0 24px !important; }
.mk-checklist li { display: flex; gap: 12px; align-items: flex-start; color: var(--muted); }
.mk-checklist strong { color: var(--midnight); font-weight: 600; }
.mk-checklist .mk-icon { width: 20px; height: 20px; margin-top: 3px; color: var(--bronze); }

@media (min-width: 960px) {
    .mk-experience { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 72px; }
    .mk-experience__browser { left: -4%; }
}

/* Feature row (max five, compact) */
.mk-intro--center { margin-left: auto; margin-right: auto; text-align: center; }
.mk-intro--center .mk-text { margin-left: auto; margin-right: auto; }
.mk-features-row { display: grid; gap: 14px; }
.mk-feature-card {
    position: relative;
    display: flex; flex-direction: column;
    padding: 24px 22px 56px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.mk-feature-card__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-bottom: 16px;
    border: 1px solid var(--line); border-radius: 50%;
    color: var(--bronze);
}
.mk-feature-card__icon .mk-icon { width: 20px; height: 20px; }
.mk-feature-card__title { font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--midnight); }
.mk-feature-card p { margin-top: 8px; font-size: .9375rem; color: var(--muted); }
.mk-feature-card__link {
    position: absolute; left: 14px; bottom: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%; color: var(--midnight);
}
.mk-feature-card__link:hover { background: var(--ivory); }
.mk-feature-card__link .mk-icon { width: 18px; height: 18px; }

@media (min-width: 720px) { .mk-features-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .mk-features-row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } }

/* Appearance: real themes on phones */
.mk-section--dark { background: var(--midnight); color: var(--ivory); }
.mk-section--dark .mk-title { color: var(--ivory); }
.mk-section--dark .mk-text { color: rgba(247, 244, 238, .78); }
.mk-section--dark :focus-visible { box-shadow: 0 0 0 3px var(--midnight), 0 0 0 5px var(--ivory); }
.mk-section--dark .mk-device-phone { background: #050d12; box-shadow: 0 0 0 1px rgba(247, 244, 238, .12); }
.mk-appearance { display: grid; gap: 40px; align-items: center; }
.mk-appearance__copy .mk-button { margin-top: 28px; }
.mk-themes {
    display: grid; grid-auto-flow: column; grid-auto-columns: 42%;
    gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 4px 4px 12px !important; margin: 0 -4px !important;
}
.mk-themes > li { scroll-snap-align: start; }
.mk-themes figcaption { color: rgba(247, 244, 238, .85); }

@media (min-width: 720px) {
    .mk-themes { grid-auto-columns: 26%; }
}
@media (min-width: 1080px) {
    .mk-appearance { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 64px; }
    .mk-themes { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; gap: 14px; }
}

/* Solution photo cards */
.mk-stays { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
.mk-stay img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-small); background: var(--porcelain); }
.mk-stay__title { margin-top: 12px; font-size: .9375rem; font-weight: 600; line-height: 1.35; color: var(--midnight); }
.mk-stay p {
    margin-top: 4px; font-size: .875rem; color: var(--muted);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
@media (min-width: 720px) { .mk-stays { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .mk-stays { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; } }

.mk-section__more--center { text-align: center; }

/* How it works: horizontal flow on desktop */
.mk-flow { display: grid; gap: 28px; }
.mk-flow__step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; }
.mk-flow__number {
    grid-row: span 2;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--champagne); color: var(--bronze);
    font-family: var(--font-display); font-size: 1.375rem; background: var(--surface);
}
.mk-flow__title { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; color: var(--midnight); align-self: center; }
.mk-flow__step p { grid-column: 2; margin-top: 4px; color: var(--muted); font-size: .9375rem; }

@media (min-width: 960px) {
    .mk-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
    .mk-flow__step { grid-template-columns: 1fr; row-gap: 14px; }
    .mk-flow__number { grid-row: auto; }
    .mk-flow__step p { grid-column: 1; margin-top: -6px; }
    .mk-flow__step:not(:last-child)::after {
        content: ""; position: absolute; top: 22px; left: 60px; right: -16px;
        height: 1px; background: var(--line-strong);
    }
}

.mk-share { display: grid; gap: 12px; margin-top: 40px !important; }
.mk-share li {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 20px; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius-small);
    color: var(--slate); font-weight: 500;
}
.mk-share .mk-icon { width: 20px; height: 20px; color: var(--bronze); }
@media (min-width: 720px) { .mk-share { grid-template-columns: 1fr 1fr; } }

/* Plan notes under the cards */
.mk-plan-notes { display: grid; gap: 12px; max-width: 860px; margin: 28px auto 0; color: var(--muted); font-size: .9375rem; }
.mk-plan-notes strong { color: var(--midnight); font-weight: 600; }
@media (min-width: 960px) { .mk-plan-notes { grid-template-columns: 1fr 1fr; gap: 32px; max-width: none; } }

/* Print template (compact) */
.mk-print { display: grid; gap: 40px; align-items: center; }
.mk-print__media img { width: 100%; border-radius: var(--radius); background: var(--porcelain); }
.mk-print__copy { max-width: 540px; }
.mk-mini-steps { display: grid; gap: 10px; margin: 24px 0 !important; }
.mk-mini-steps li { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--midnight); }
.mk-mini-steps span {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid var(--champagne); color: var(--bronze); font-size: .8125rem;
}
.mk-print .mk-note, .mk-note--print { display: flex; gap: 10px; align-items: flex-start; }
.mk-print .mk-note .mk-icon, .mk-note--print .mk-icon { width: 18px; height: 18px; margin-top: 3px; color: var(--bronze); flex: none; }
@media (min-width: 960px) { .mk-print { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: 72px; } }

/* FAQ teaser */
.mk-faq-teaser { display: grid; gap: 32px; }
.mk-faq-teaser .mk-link { margin-top: 16px; }
.mk-qa { margin: 0; display: grid; gap: 0; }
.mk-qa__item { padding: 20px 0; border-top: 1px solid var(--line); }
.mk-qa__item:last-child { border-bottom: 1px solid var(--line); }
.mk-qa dt { font-weight: 600; color: var(--midnight); }
.mk-qa dd { margin: 6px 0 0; color: var(--muted); }
@media (min-width: 960px) { .mk-faq-teaser { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; } }

/* Product page phones */
.mk-product-phones { position: relative; aspect-ratio: 1 / 1.08; max-width: 460px; width: 100%; justify-self: center; }

/* Inner page head */
.mk-page-head { padding: 32px 0 var(--section); }
.mk-page-head__grid { display: grid; gap: 40px; align-items: center; }
.mk-page-head__copy { max-width: 760px; }

@media (min-width: 1080px) {
    .mk-page-head { padding-top: 48px; }
    .mk-page-head__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
}

.mk-crumbs { margin-bottom: 28px; font-size: .875rem; color: var(--muted); }
.mk-crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.mk-crumbs li + li::before { content: "/"; color: var(--line-strong); }
.mk-crumbs a { display: inline-flex; align-items: center; min-height: 32px; color: var(--slate); }

/* Cards */
.mk-cards { display: grid; gap: 16px; }

.mk-card {
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.mk-card p { margin-top: 10px; color: var(--muted); }
.mk-card .mk-link { margin-top: 12px; }

.mk-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    margin-bottom: 20px;
    border-radius: 12px;
    background: var(--ivory);
    color: var(--bronze);
    flex: none;
}
.mk-card__icon .mk-icon { width: 22px; height: 22px; }

.mk-card__title { font-size: 1.125rem; font-weight: 600; line-height: 1.35; color: var(--midnight); }

@media (min-width: 720px) {
    .mk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (min-width: 1080px) {
    .mk-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mk-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.mk-section--porcelain .mk-card__icon { background: var(--ivory); }

/* Split (copy + media) */
.mk-split { display: grid; gap: 48px; align-items: center; }
.mk-split__copy { max-width: 560px; }

@media (min-width: 960px) {
    .mk-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; }
    .mk-split--single { grid-template-columns: minmax(0, 760px); }
    .mk-split--media-first .mk-split__media { order: -1; }
}

.mk-print-photo img {
    width: 100%;
    border-radius: var(--radius);
    background: var(--porcelain);
}
.mk-print-photo figcaption { margin-top: 12px; font-size: .875rem; color: var(--muted); }

/* Real screenshots */
.mk-phone {
    justify-self: center;
    width: min(320px, 78vw);
    padding: 10px;
    background: var(--midnight);
    border-radius: 44px;
}
.mk-phone img { width: 100%; border-radius: 34px; background: var(--surface); }

.mk-screen {
    margin-top: 48px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.mk-screen img { width: 100%; border-radius: var(--radius-small); }

/* Features list (product) */
.mk-features { display: grid; gap: 28px; }
.mk-feature { display: flex; gap: 20px; align-items: flex-start; }
.mk-feature .mk-card__icon { margin: 0; background: var(--surface); border: 1px solid var(--line); }
.mk-feature__title { font-size: 1.125rem; font-weight: 600; line-height: 1.35; color: var(--midnight); }
.mk-feature p { margin-top: 8px; color: var(--muted); }

@media (min-width: 720px) {
    .mk-split--single .mk-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 48px; }
}

/* Languages */
.mk-languages { display: grid; gap: 32px; }
.mk-languages__list { display: flex; flex-wrap: wrap; gap: 10px; }
.mk-languages__list li {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--slate);
}

@media (min-width: 960px) {
    .mk-languages { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
}

/* Steps */
.mk-steps { display: grid; gap: 16px; counter-reset: none; }
.mk-step {
    position: relative;
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.mk-step__number {
    display: block;
    margin-bottom: 16px;
    font-family: var(--font-display);
    font-size: 2.5rem;
    line-height: 1;
    color: var(--bronze);
}
.mk-step__title { font-size: 1.125rem; font-weight: 600; line-height: 1.35; color: var(--midnight); }
.mk-step p { margin-top: 8px; color: var(--muted); }

@media (min-width: 720px) {
    .mk-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}

.mk-steps--compact { margin: 28px 0 32px; grid-template-columns: 1fr !important; gap: 0; }
.mk-steps--compact .mk-step {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 16px;
    padding: 16px 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
}
.mk-steps--compact .mk-step:last-child { border-bottom: 1px solid var(--line); }
.mk-steps--compact .mk-step__number { grid-row: span 2; margin: 0; font-size: 1.75rem; }
.mk-steps--compact .mk-step p { grid-column: 2; }

/* Timeline (how it works) */
.mk-timeline { display: grid; gap: 0; max-width: 860px; }
.mk-timeline__item {
    position: relative;
    padding: 28px 0 28px 32px;
    border-left: 1px solid var(--line-strong);
}
.mk-timeline__item::before {
    content: "";
    position: absolute;
    left: -5px; top: 38px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--champagne);
}
.mk-timeline__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.5rem, 1.25rem + .9vw, 1.875rem);
    line-height: 1.2;
    color: var(--midnight);
}
.mk-timeline__item p { margin-top: 10px; color: var(--muted); max-width: 40em; }

/* Gallery (home) */
.mk-gallery { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-gallery__item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-small);
    background: var(--porcelain);
}
@media (min-width: 1080px) {
    .mk-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 479px) {
    .mk-gallery { gap: 10px; }
}

/* Solutions */
.mk-solutions { display: grid; gap: 64px; }
.mk-solution { display: grid; gap: 24px; align-items: center; scroll-margin-top: calc(var(--header) + 16px); }
.mk-solution__media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
    background: var(--porcelain);
}
.mk-solution__copy { max-width: 520px; }

@media (min-width: 960px) {
    .mk-solutions { gap: 96px; }
    .mk-solution { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; }
    .mk-solution:nth-child(even) .mk-solution__media { order: 2; }
    .mk-solution--text { grid-template-columns: minmax(0, 760px); }
}

/* Callout */
.mk-callout {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 32px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--champagne);
    border-radius: var(--radius);
    max-width: 860px;
}
.mk-callout .mk-link { margin-top: 16px; }
.mk-callout + .mk-cards { margin-top: 20px; max-width: 860px; }

@media (min-width: 720px) {
    .mk-callout { flex-direction: row; gap: 24px; padding: 36px 40px; }
    .mk-callout .mk-card__icon { margin: 4px 0 0; }
}

/* Plans */
.mk-plans { display: grid; gap: 16px; }
.mk-plan {
    display: flex;
    flex-direction: column;
    padding: 32px 28px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.mk-plan--featured { border-color: var(--midnight); box-shadow: inset 0 3px 0 var(--champagne); }
.mk-plan__name { font-size: 1.125rem; font-weight: 600; color: var(--midnight); }
.mk-plan__price {
    margin-top: 16px;
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 2rem + 1vw, 2.75rem);
    line-height: 1.1;
    color: var(--midnight);
    font-variant-numeric: lining-nums;
}
.mk-plan__limit {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-weight: 600;
    color: var(--slate);
}
.mk-plan__limit .mk-icon { width: 18px; height: 18px; color: var(--bronze); }
.mk-plan__text { margin-top: 12px; color: var(--muted); flex: 1; }
.mk-plan__cta { margin-top: 28px; width: 100%; }

@media (min-width: 720px) {
    .mk-plans--2, .mk-plans--3, .mk-plans--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (min-width: 1080px) {
    .mk-plans--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mk-plans--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.mk-empty {
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--slate);
    max-width: 760px;
}

/* FAQ: answers always visible */
.mk-faq { max-width: 860px; }
.mk-faq__item { padding: 28px 0; border-top: 1px solid var(--line); }
.mk-faq__item:last-child { border-bottom: 1px solid var(--line); }
.mk-faq__q { font-size: 1.1875rem; font-weight: 600; line-height: 1.4; color: var(--midnight); }
.mk-faq__a { margin-top: 10px; color: var(--muted); max-width: 42em; }

/* Closing band (optional photo with midnight tone) */
.mk-band { position: relative; overflow: hidden; background: var(--midnight); color: var(--ivory); padding: var(--section) 0; }
.mk-band__photo { position: absolute; inset: 0; }
.mk-band__photo img { width: 100%; height: 100%; object-fit: cover; }
.mk-band--photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(11, 31, 42, .72); }
.mk-band__inner { position: relative; z-index: 2; display: grid; gap: 8px; align-items: center; }
.mk-band--photo .mk-band__inner { justify-items: center; text-align: center; }
.mk-band--photo .mk-actions { justify-content: center; }
.mk-band--photo { padding: 120px 0; }
.mk-band__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
    line-height: 1.1;
    max-width: 18em;
    text-wrap: balance;
}
.mk-band__text { margin-top: 16px; color: rgba(247, 244, 238, .82); max-width: 36em; }
.mk-band--photo .mk-band__text { margin-left: auto; margin-right: auto; }
.mk-band :focus-visible { box-shadow: 0 0 0 3px var(--midnight), 0 0 0 5px var(--ivory); }

@media (min-width: 1080px) {
    .mk-band:not(.mk-band--photo) .mk-band__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 64px; }
    .mk-band:not(.mk-band--photo) .mk-actions { margin-top: 0; }
}

/* Footer: compact; discreet legal row */
.mk-footer {
    background: var(--midnight);
    color: rgba(247, 244, 238, .78);
    border-top: 1px solid rgba(247, 244, 238, .12);
    padding: 56px 0 24px;
    font-size: .9375rem;
}
.mk-footer a { color: var(--ivory); text-decoration: none; }
.mk-footer a:hover { text-decoration: underline; text-decoration-color: var(--champagne); text-underline-offset: 4px; }
.mk-footer :focus-visible { box-shadow: 0 0 0 3px var(--midnight), 0 0 0 5px var(--ivory); }

.mk-footer__grid { display: grid; gap: 32px; }
.mk-footer__brand img { width: 148px; height: auto; margin-bottom: 16px; }
.mk-footer__brand p { max-width: 28em; }
.mk-footer__nav ul { display: flex; flex-wrap: wrap; gap: 0 24px; }
.mk-footer__nav a { display: inline-flex; align-items: center; min-height: 44px; }
.mk-footer__aside { display: grid; gap: 12px; justify-items: start; }
.mk-footer__mail { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.mk-footer__mail .mk-icon { width: 18px; height: 18px; color: var(--champagne); }
.mk-footer__help { font-size: .8125rem; color: rgba(247, 244, 238, .64); max-width: 26em; }

.mk-lang--footer .mk-lang__toggle { color: var(--ivory); border: 1px solid rgba(247, 244, 238, .24); padding: 0 14px; }
.mk-lang--footer .mk-lang__list { position: static; margin-top: 8px !important; background: #10283a; border-color: rgba(247, 244, 238, .16); }
.mk-lang--footer .mk-lang__list a { color: var(--ivory); }
.mk-lang--footer .mk-lang__list a:hover { background: rgba(247, 244, 238, .08); }
.mk-lang--footer .mk-lang__code { color: rgba(247, 244, 238, .6); }

.mk-footer__base {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 40px; padding-top: 16px;
    border-top: 1px solid rgba(247, 244, 238, .12);
    font-size: .8125rem; color: rgba(247, 244, 238, .7);
}
.mk-footer__legal { display: flex; flex-wrap: wrap; gap: 0 4px; }
.mk-footer__legal li:not(:last-child)::after { content: "·"; margin-left: 4px; color: rgba(247, 244, 238, .4); }
.mk-footer__legal a,
.mk-footer__consent {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
    color: rgba(247, 244, 238, .82); font: inherit; font-size: .8125rem;
    background: none; border: 0; cursor: pointer;
}
.mk-footer__consent:hover { color: var(--ivory); text-decoration: underline; }

@media (min-width: 720px) {
    .mk-footer__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
    .mk-footer__aside { grid-column: 1 / -1; grid-template-columns: auto auto; align-items: center; justify-content: start; gap: 12px 24px; }
    .mk-footer__help { grid-column: 1 / -1; }
}
@media (min-width: 1080px) {
    .mk-footer__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .9fr); gap: 48px; }
    .mk-footer__aside { grid-column: auto; grid-template-columns: 1fr; justify-items: start; }
    .mk-footer__base { flex-direction: row; align-items: center; justify-content: space-between; }
    .mk-lang--footer .mk-lang__list { position: absolute; bottom: 100%; top: auto; left: 0; right: auto; margin: 0 0 8px !important; min-width: 210px; z-index: 5; }
}


@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}

@media print {
    .mk-header, .mk-band, .mk-skip, .mk-preview { display: none; }
    body.mk-body { background: #fff; }
}

/* Premium editorial refinement · 2 November 2026.
   The layout shares the established fonts and tokens; no external assets. */
:root { --radius: 10px; --radius-small: 7px; --section: 56px; }
.mk-container, .mk-hero__copy, .mk-experience__copy, .mk-appearance__copy { min-width: 0; }
.mk-body .mk-intro { margin-bottom: 28px; }
.mk-body .mk-button { border-radius: 9px; }
.mk-hero { position: relative; isolation: isolate; padding: 38px 0 26px; }
.mk-hero__backdrop { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.mk-hero__backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: right bottom; }
.mk-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(247,244,238,.98) 0%, rgba(247,244,238,.92) 43%, rgba(247,244,238,.1) 100%); }
.mk-hero__grid { gap: 30px; position: relative; }
.mk-hero__copy { max-width: 570px; }
.mk-hero__copy .mk-lead { max-width: 34em; }
.mk-hero__copy .mk-display { font-size: clamp(2.7rem, 2rem + 2.5vw, 4.45rem); line-height: 1.02; }
.mk-hero__copy .mk-eyebrow { font-size: .72rem; letter-spacing: .12em; }
.mk-hero__visual { max-width: 440px; aspect-ratio: 1 / 1.13; }
.mk-hero__stage { border: 0; inset: auto -6% -2%; height: 16%; border-radius: 50%; background: radial-gradient(ellipse, rgba(77,59,39,.17), transparent 68%); }
.mk-hero__phone--front { width: 47%; left: 7%; top: 0; transform: rotate(-3deg); }
.mk-hero__phone--back { width: 43%; right: 2%; top: 11%; transform: rotate(9deg); }
.mk-highlights { margin-top: 26px !important; gap: 10px; }
.mk-highlights li { font-size: .82rem; line-height: 1.4; align-items: flex-start; }
.mk-highlights .mk-icon { width: 19px; height: 19px; }
/* Frame and caption are separate so long theme names never extend the bezel. */
.mk-device-phone { padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
.mk-device-phone__shell { position: relative; padding: 5px; background: #101a20; border: 1px solid #5b5f60; border-radius: 32px; box-shadow: 3px 14px 22px -9px rgba(11,31,42,.3), 0 0 0 1px rgba(255,255,255,.3) inset; }
.mk-device-phone__shell img { border-radius: 26px; width: 100%; }
.mk-device-phone--small .mk-device-phone__shell { border-radius: 17px; padding: 3px; box-shadow: 0 6px 14px -8px rgba(11,31,42,.25); }
.mk-device-phone--small .mk-device-phone__shell img { border-radius: 13px; }
.mk-device-phone figcaption { line-height: 1.4; font-size: .72rem; margin-top: 10px; color: var(--slate); }
.mk-types { padding: 19px 0 21px; }
.mk-types__label { margin-bottom: 15px; font-size: .65rem; letter-spacing: .13em; }
.mk-types__list li { font-size: .76rem; }
.mk-experience { gap: 32px; }
.mk-experience__media { padding-bottom: 36px; }
.mk-experience__photo { aspect-ratio: 4 / 3; object-fit: cover; }
.mk-experience__browser { width: 49%; left: 3%; bottom: 0; border-radius: 8px; }
.mk-experience__phone { width: 20%; right: 6%; bottom: -5px; }
.mk-experience__phone .mk-device-phone__shell { border-radius: 20px; padding: 3px; }
.mk-experience__phone img { border-radius: 16px; }
.mk-checklist { gap: 12px; margin: 20px 0 12px !important; font-size: .93rem; }
.mk-features-row { gap: 12px; }
.mk-feature-card { padding: 20px 18px 48px; border-color: #e9e5de; border-radius: 7px; background: rgba(255,255,255,.65); }
.mk-feature-card__icon { border: 0; border-radius: 0; width: 28px; height: 28px; margin-bottom: 12px; }
.mk-feature-card p { font-size: .86rem; line-height: 1.6; }
.mk-feature-card__title { font-size: .93rem; }
.mk-section--studio { background: #eeebe4; border-block: 1px solid #e3dfd7; }
.mk-appearance { gap: 28px; }
.mk-appearance__copy .mk-text { font-size: .93rem; }
.mk-themes { padding: 8px 6px 14px !important; grid-auto-columns: 39%; }
.mk-themes figcaption { color: var(--slate); }
.mk-stays { gap: 24px 12px; }
.mk-stay img { aspect-ratio: 1.18; border-radius: 6px; }
.mk-stay__title { margin-top: 10px; font-size: .9rem; }
.mk-stay p { font-size: .8rem; line-height: 1.55; display: block; overflow: visible; }
.mk-flow__title { font-size: .97rem; }
.mk-flow__step p { font-size: .86rem; }
.mk-flow__number { width: 32px; height: 32px; font-size: 1.1rem; background: #8B6A43; color: #fff; border: 0; } /* WCAG AA: 4.9:1 with white */
.mk-flow__step { grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; }
.mk-share { margin-top: 28px !important; }
.mk-share li { padding: 12px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; font-size: .88rem; align-items: flex-start; }
.mk-plan { background: rgba(255,255,255,.6); padding: 28px; border-radius: 9px; }
.mk-plan--featured { background: #fff; border-color: #b89b73; box-shadow: 0 8px 25px -18px rgba(11,31,42,.2); }
.mk-plan__price { font-family: var(--font-ui); font-weight: 500; font-size: clamp(1.8rem, 1.5rem + .8vw, 2.3rem); letter-spacing: -.04em; }
.mk-plan-notes { font-size: .82rem; gap: 12px; }
.mk-print { max-width: 1080px; }
.mk-print__media { max-width: 250px; width: 100%; justify-self: center; }
.mk-print__media img { max-height: 315px; width: 100%; object-fit: contain; border-radius: 7px; }
.mk-print .mk-title { font-size: clamp(1.85rem, 1.5rem + 1vw, 2.4rem); }
.mk-mini-steps { margin: 18px 0 !important; gap: 8px; }
.mk-mini-steps li { font-size: .9rem; font-weight: 500; }
.mk-qa__item { padding: 16px 0; }
.mk-qa { font-size: .9rem; }
.mk-band--photo { padding: 68px 0; }
.mk-band--photo::before { background: linear-gradient(90deg, rgba(11,31,42,.79), rgba(11,31,42,.59), rgba(11,31,42,.79)); }
.mk-band__title { font-size: clamp(2rem, 1.6rem + 1.5vw, 3rem); }
.mk-band__text { font-size: .95rem; }
.mk-band .mk-actions { margin-top: 22px; }
.mk-footer { padding: 30px 0 12px; }
.mk-footer__grid { gap: 20px; }
.mk-footer__brand img { width: 142px; margin-bottom: 10px; }
.mk-footer__brand p { font-size: .8rem; max-width: 30em; }
.mk-footer__nav ul { gap: 0 18px; }
.mk-footer__nav a, .mk-footer__mail { font-size: .82rem; }
.mk-footer__aside { gap: 4px; }
.mk-footer__help { font-size: .76rem; }
.mk-footer__base { margin-top: 20px; padding-top: 10px; font-size: .76rem; }
.mk-footer__legal a, .mk-footer__consent { font-size: .76rem; }
@media (min-width: 720px) {
    :root { --section: 64px; }
    .mk-hero { padding: 44px 0 30px; }
    .mk-highlights { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
    .mk-themes { grid-auto-columns: 24%; }
}
@media (min-width: 960px) {
    .mk-experience { gap: 48px; }
    .mk-print { grid-template-columns: .65fr 1fr; gap: 60px; }
    .mk-faq-teaser { gap: 56px; }
    .mk-flow { gap: 24px; }
    .mk-flow__step { grid-template-columns: 32px minmax(0, 1fr); row-gap: 0; }
    .mk-flow__number { grid-row: span 2; }
    .mk-flow__step p { grid-column: 2; margin-top: 6px; }
    .mk-flow__step:not(:last-child)::after { top: 16px; left: auto; right: -17px; width: 11px; }
}
@media (min-width: 1080px) {
    :root { --header: 72px; --section: 68px; }
    .mk-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
    .mk-hero__visual { max-width: 470px; margin: 0 0 0 auto; }
    .mk-highlights { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .mk-appearance { grid-template-columns: minmax(0,260px) minmax(0,1fr); gap: 40px; }
    .mk-themes { grid-template-columns: repeat(6,minmax(0,1fr)); grid-auto-flow: row; grid-auto-columns: auto; gap: 12px; }
    .mk-footer__grid { grid-template-columns: 1fr 1.15fr .85fr; gap: 32px; }
    .mk-footer__aside { justify-items: end; text-align: right; }
    .mk-footer__base { gap: 24px; }
}
@media (max-width: 719px) {
    .mk-hero::before { background: linear-gradient(180deg, rgba(247,244,238,.98) 0%, rgba(247,244,238,.94) 47%, rgba(247,244,238,.15) 100%); }
    .mk-hero__copy .mk-lead { font-size: 1rem; }
    .mk-hero__copy .mk-eyebrow { font-size: .65rem; }
    .mk-hero .mk-actions { gap: 10px; }
    .mk-hero .mk-button { font-size: .88rem; padding: 12px 15px; }
    .mk-hero__visual { max-width: 360px; }
    .mk-features-row { grid-template-columns: 1fr; }
    .mk-feature-card { padding: 18px 58px 18px 60px; }
    .mk-feature-card__icon { position: absolute; left: 18px; top: 18px; }
    .mk-feature-card__link { left: auto; right: 6px; bottom: auto; top: 14px; }
    .mk-plan { padding: 24px; }
    .mk-footer__nav ul { gap: 0 18px; }
    .mk-band--photo { padding: 56px 0; }
}
/* Long translated navigation uses the mobile menu until there is real room. */
@media (max-width: 1279px) {
    .mk-menu-toggle { display: inline-flex; }
    .mk-nav__panel { display: none; position: absolute; inset: 100% 0 auto; width: 100%; max-height: calc(100dvh - var(--header)); overflow-y: auto; padding: 16px var(--gutter) 32px; background: var(--ivory); border-bottom: 1px solid var(--line); }
    .mk-menu-open .mk-nav__panel { display: block; }
    .mk-nav__list { display: block; }
    .mk-nav__list li { border-bottom: 1px solid var(--line); }
    .mk-nav__list .mk-nav__link { width: 100%; min-height: 52px; font-size: 1.05rem; }
    .mk-nav__actions { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 20px; }
    .mk-nav__actions .mk-button { width: 100%; }
    .mk-lang__list { position: static; box-shadow: none; }
    .mk-nav__login { border: 1px solid var(--line-strong); }
}
@media (min-width: 1280px) {
    .mk-nav__panel { gap: 20px; }
    .mk-nav__list { gap: 16px; }
    .mk-nav__list .mk-nav__link { font-size: .85rem; }
    .mk-nav__actions .mk-button { font-size: .85rem; padding-inline: 15px; }
    .mk-nav__actions .mk-lang__toggle { font-size: .85rem; }
}

/* Compact footer refinement. Existing brand colours and typefaces are retained. */
.mk-footer--minimal { padding: 20px 0 8px; }
.mk-footer__top { display: grid; gap: 12px 28px; align-items: center; padding-bottom: 12px; }
.mk-footer__identity { display: inline-flex; align-items: center; min-height: 44px; width: fit-content; }
.mk-footer__identity img { width: 148px; height: auto; }
.mk-footer__links ul { display: flex; flex-wrap: wrap; gap: 0 20px; }
.mk-footer__links a { display: inline-flex; align-items: center; min-height: 44px; font-size: .8125rem; line-height: 1.4; }
.mk-footer__contact { display: inline-flex; align-items: center; min-height: 44px; font-size: .8125rem; width: fit-content; }
.mk-footer__bottom { display: flex; align-items: center; flex-wrap: wrap; gap: 0 20px; border-top: 1px solid rgba(247,244,238,.14); padding-top: 8px; }
.mk-footer__copyright { margin: 0; font-size: .75rem; line-height: 1.5; color: rgba(247,244,238,.76); }
.mk-footer--minimal .mk-footer__legal { column-gap: 6px; }
.mk-footer--minimal .mk-footer__legal li { display: inline-flex; align-items: center; }
.mk-footer--minimal .mk-footer__legal li:not(:last-child)::after { content: none; }
.mk-footer--minimal .mk-footer__legal a, .mk-footer--minimal .mk-footer__consent { padding-inline: 0; font-size: .75rem; min-height: 44px; }
.mk-footer--minimal .mk-lang--footer { margin-left: auto; }
.mk-footer--minimal .mk-lang__toggle { border: 0; padding: 0 4px; border-radius: 4px; font-size: .75rem; font-weight: 500; }
.mk-footer--minimal .mk-lang__toggle .mk-icon { width: 15px; height: 15px; }
@media (min-width: 720px) {
    .mk-footer__top { grid-template-columns: 1fr auto; }
    .mk-footer__links { grid-column: 1 / -1; grid-row: 2; }
    .mk-footer__contact { justify-self: end; }
    .mk-footer__bottom > nav { margin-left: auto; }
    .mk-footer--minimal .mk-lang--footer { margin-left: 8px; }
}
@media (min-width: 1280px) {
    .mk-footer__top { grid-template-columns: auto minmax(0,1fr) auto; gap: 28px; }
    .mk-footer__links { grid-column: auto; grid-row: auto; }
    .mk-footer__links ul { justify-content: center; gap: 0 18px; }
}
@media (max-width: 719px) {
    .mk-footer__top { gap: 4px; }
    .mk-footer__links ul { gap: 0 18px; }
    .mk-footer__bottom { gap: 4px 12px; }
    .mk-footer__copyright { flex-basis: 100%; padding-top: 6px; }
    .mk-footer--minimal .mk-footer__legal { gap: 0 14px; }
}

/* Monthly comparison; the full annual charge remains explicit. */
.mk-plan__billing { margin-top: 24px; }
.mk-plan__billing .mk-plan__price { margin-top: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.mk-plan__amount { font-size: clamp(2.75rem, 2.1rem + 1.8vw, 3.5rem); font-weight: 500; letter-spacing: -.05em; line-height: 1.1; }
.mk-plan__period { font-size: 1rem; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.mk-plan__annual { margin-top: 10px; font-size: .875rem; color: var(--slate); }
.mk-plan__billing-note { margin-top: 4px; font-size: .75rem; line-height: 1.5; color: var(--muted); }

/* Final refinement: retain Midnight footer, rounded controls, quiet close. */
.mk-body .mk-button { border-radius: 999px; }
.mk-band:not(.mk-band--photo) { padding: 52px 0 36px; }
.mk-band:not(.mk-band--photo) .mk-band__inner { grid-template-columns: 1fr; gap: 0; justify-items: center; text-align: center; }
.mk-band:not(.mk-band--photo) .mk-band__text { margin-inline: auto; }
.mk-band:not(.mk-band--photo) .mk-actions { margin-top: 22px; justify-content: center; }
.mk-footer--minimal { padding-top: 18px; }
.mk-back-top { position: fixed; z-index: 45; right: max(20px,env(safe-area-inset-right)); bottom: max(20px,env(safe-area-inset-bottom)); display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 1px solid rgba(247,244,238,.25); background: var(--midnight); color: var(--ivory); box-shadow: 0 4px 14px rgba(11,31,42,.14); cursor: pointer; }
.mk-back-top[hidden] { display: none; }
.mk-back-top:hover { background: var(--slate); }
.mk-back-top .mk-icon { width: 19px; height: 19px; transform: rotate(-90deg); }
.mk-back-top:focus-visible { box-shadow: var(--focus); }
@media (max-width:719px) {
    .mk-band:not(.mk-band--photo) { padding: 40px 0 28px; }
    .mk-footer--minimal .mk-footer__bottom { padding-right: 52px; }
    .mk-back-top { right: max(14px,env(safe-area-inset-right)); bottom: max(14px,env(safe-area-inset-bottom)); width: 44px; height: 44px; }
}

/* SCANwelcome brand footer: structured columns, discreet company and legal data. */
.mk-footer--brand { background: var(--midnight); color: rgba(247,244,238,.75); border-top: 1px solid rgba(247,244,238,.12); padding: 40px 0 12px; }
.mk-footer__directory { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; padding-bottom: 30px; }
.mk-footer__story { grid-column: 1 / -1; max-width: 270px; }
.mk-footer__story .mk-footer__identity img { width: 164px; }
.mk-footer__story > p { margin-top: 12px; font-size: .8125rem; line-height: 1.7; }
.mk-footer__story .mk-footer__signature { font-family: var(--font-display); color: var(--champagne); font-size: 1.125rem; margin-top: 10px; }
.mk-footer__heading { margin: 6px 0 8px; font-family: var(--font-ui); font-size: .8125rem; line-height: 1.5; font-weight: 600; color: var(--ivory); }
.mk-footer__directory-links a, .mk-footer__operator-mail { display: inline-flex; align-items: center; min-height: 44px; font-size: .8125rem; line-height: 1.5; }
.mk-footer--brand .mk-footer__directory-links a { color: rgba(247,244,238,.77); }
.mk-footer__help-note { font-size: .75rem; line-height: 1.7; margin-top: 8px; max-width: 21em; }
.mk-footer__company-name { font-size: .8125rem; line-height: 1.7; color: var(--ivory); font-weight: 500; }
.mk-footer__company-address { font-style: normal; font-size: .75rem; line-height: 1.8; margin-top: 8px; }
.mk-footer__company-ids { margin: 12px 0 0; font-size: .6875rem; line-height: 1.7; }
.mk-footer__company-ids > div { display: flex; flex-wrap: wrap; gap: 0 6px; }
.mk-footer__company-ids dt, .mk-footer__company-ids dd { margin: 0; }
.mk-footer__company-ids dd { color: rgba(247,244,238,.88); }
.mk-footer__operator-mail { overflow-wrap: anywhere; color: var(--ivory); }
.mk-footer--brand .mk-footer__bottom { border-color: rgba(247,244,238,.14); padding-top: 10px; gap: 0 20px; }
.mk-footer--brand .mk-footer__copyright { font-size: .75rem; }
.mk-footer--brand .mk-footer__legal { gap: 0 14px; }
.mk-footer--brand .mk-footer__legal li { display: inline-flex; align-items: center; }
.mk-footer--brand .mk-footer__legal li:not(:last-child)::after { content: none; }
.mk-footer--brand .mk-footer__legal a, .mk-footer--brand .mk-footer__consent { font-size: .75rem; padding-inline: 0; color: rgba(247,244,238,.8); }
.mk-footer--brand .mk-lang__toggle { border: 0; font-size: .75rem; font-weight: 500; padding-inline: 4px; }
.mk-footer--brand .mk-lang__toggle .mk-icon { width: 15px; height: 15px; }
@media (min-width: 720px) {
    .mk-footer__directory { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 28px; }
    .mk-footer__story { grid-column: 1 / -1; }
}
@media (min-width: 1080px) {
    .mk-footer__directory { grid-template-columns: minmax(0,1.45fr) repeat(3,minmax(0,1fr)) minmax(0,1.45fr); gap: 28px; }
    .mk-footer__story { grid-column: auto; padding-right: 8px; }
}
@media (max-width: 1279px) { .mk-footer--brand .mk-footer__bottom { padding-right: 56px; } }
@media (max-width: 719px) { .mk-footer--brand .mk-footer__bottom { gap: 4px 12px; } }

/* Footer polish: same Midnight identity, more precise spacing and hierarchy. */
.mk-footer--brand {
    padding: 64px 0 18px;
    border-top-color: rgba(255,255,255,.09);
    color: #A9B5BB;
}
.mk-footer--brand .mk-footer__directory {
    grid-template-columns: minmax(0,1fr);
    gap: 32px 36px;
    padding-bottom: 40px;
    align-items: start;
}
.mk-footer--brand .mk-footer__story { max-width: 260px; padding: 0; }
.mk-footer--brand .mk-footer__story > p {
    font-size: .84375rem;
    line-height: 1.75;
    margin-top: 16px;
    color: #A9B5BB;
}
.mk-footer--brand .mk-footer__story .mk-footer__signature {
    font-family: var(--font-display);
    color: var(--champagne);
    font-size: 1.0625rem;
    margin-top: 14px;
    line-height: 1.5;
}
.mk-footer--brand .mk-footer__heading {
    margin: 10px 0 16px;
    color: #FFF;
    font-size: .8125rem;
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: .025em;
}
.mk-footer--brand .mk-footer__directory-links a,
.mk-footer--brand .mk-footer__operator-mail {
    min-height: 44px;
    font-size: .84375rem;
    line-height: 1.55;
    color: #A9B5BB;
    transition: color .2s ease;
    text-decoration: none;
}
.mk-footer--brand a:hover,
.mk-footer--brand .mk-footer__consent:hover { color: #FFF; text-decoration: none; }
.mk-footer--brand .mk-footer__company-name {
    color: #E3E8EB;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.7;
}
.mk-footer--brand .mk-footer__company-address {
    margin-top: 10px;
    font-size: .75rem;
    line-height: 1.8;
    color: #A9B5BB;
}
.mk-footer--brand .mk-footer__company-ids { margin-top: 14px; font-size: .71875rem; line-height: 1.9; }
.mk-footer--brand .mk-footer__company-ids dd { color: #BDC7CC; font-variant-numeric: tabular-nums; }
.mk-footer--brand .mk-footer__operator-mail { margin-top: 10px; font-size: .8125rem; color: #DCE3E6; }
.mk-footer--brand .mk-footer__bottom {
    padding-top: 16px;
    padding-right: 0;
    border-color: rgba(255,255,255,.1);
    gap: 8px 24px;
}
.mk-footer--brand .mk-footer__copyright,
.mk-footer--brand .mk-footer__legal a,
.mk-footer--brand .mk-footer__consent {
    color: #A9B5BB;
    font-size: .71875rem;
    line-height: 1.6;
}
.mk-footer--brand .mk-footer__legal { gap: 0 20px; }
.mk-footer--brand .mk-lang__toggle {
    min-height: 40px;
    padding: 0 13px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    color: #DCE3E6;
    gap: 8px;
    font-size: .75rem;
    transition: border-color .2s ease, color .2s ease;
}
.mk-footer--brand .mk-lang__toggle:hover { border-color: rgba(255,255,255,.32); color: #FFF; }
.mk-footer--brand .mk-lang--footer { position: relative; }
.mk-footer--brand .mk-lang--footer .mk-lang__list {
    position: absolute;
    top: auto;
    bottom: 100%;
    left: 0;
    right: auto;
    margin: 0 0 10px !important;
    min-width: 220px;
    max-width: calc(100vw - 40px);
    max-height: min(380px,65vh);
    overflow-y: auto;
    z-index: 60;
    background: #102A36;
    border-color: rgba(255,255,255,.14);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0,0,0,.2);
}
.mk-footer--brand .mk-lang__list a { min-height: 44px; border-radius: 8px; }
.mk-footer--brand .mk-lang__list a[aria-current="true"] { background: rgba(255,255,255,.07); color: #FFF; }
.mk-footer--brand :focus-visible { outline: 2px solid var(--champagne); outline-offset: 4px; box-shadow: none; }
@media (min-width: 480px) {
    .mk-footer--brand .mk-footer__directory { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (min-width: 1080px) {
    .mk-footer--brand .mk-footer__directory { grid-template-columns: minmax(0,1.5fr) minmax(0,.9fr) minmax(0,1.05fr) minmax(0,1fr) minmax(0,1.55fr); column-gap: 40px; padding-bottom: 44px; }
    .mk-footer--brand .mk-footer__story { grid-column: auto; }
    .mk-footer--brand .mk-lang--footer .mk-lang__list { left: auto; right: 0; }
}
@media (hover: hover) and (pointer: fine) {
    .mk-footer--brand .mk-footer__directory-links a { min-height: 36px; }
}
@media (max-width: 719px) {
    .mk-footer--brand { padding-top: 40px; }
    .mk-footer--brand .mk-footer__bottom { padding-right: 48px; }
    .mk-footer--brand .mk-footer__copyright { flex-basis: 100%; }
    .mk-footer--brand .mk-footer__bottom > nav { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .mk-footer--brand a, .mk-footer--brand .mk-lang__toggle { transition: none; }
}

/* Phone footer: compact navigation without restricting browser zoom. */
@media (min-width: 360px) and (max-width: 719px) {
    .mk-footer--brand .mk-footer__directory {
        grid-template-columns: repeat(2,minmax(0,1fr));
        column-gap: 24px;
    }
}
@media (max-width: 719px) {
    .mk-footer--brand { padding-top: 32px; }
    .mk-footer--brand .mk-footer__directory { row-gap: 24px; padding-bottom: 28px; }
    .mk-footer--brand .mk-footer__directory > * { min-width: 0; }
    .mk-footer--brand .mk-footer__story { grid-column: 1 / -1; max-width: 30ch; }
    .mk-footer--brand .mk-footer__story > p { margin-top: 10px; font-size: .8125rem; line-height: 1.65; }
    .mk-footer--brand .mk-footer__story .mk-footer__signature { margin-top: 10px; font-size: 1.0625rem; }
    .mk-footer--brand .mk-footer__heading { margin: 0 0 8px; }
    .mk-footer--brand .mk-footer__company-name { font-size: .75rem; }
    .mk-footer--brand .mk-footer__company-address { font-size: .71875rem; line-height: 1.7; }
    .mk-footer--brand .mk-footer__company-ids > div { display: block; }
    .mk-footer--brand .mk-footer__company-ids dt,
    .mk-footer--brand .mk-footer__company-ids dd { display: block; }
    .mk-footer--brand .mk-footer__company-ids { font-size: .6875rem; line-height: 1.7; }
    .mk-footer--brand .mk-footer__company-ids > div + div { margin-top: 6px; }
    .mk-footer--brand .mk-footer__operator-mail { font-size: .75rem; overflow-wrap: anywhere; }
    .mk-footer--brand .mk-footer__bottom { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; }
    .mk-footer--brand .mk-footer__bottom > nav { min-width: 0; }
    .mk-footer--brand .mk-footer__legal { flex-wrap: wrap; gap: 0 16px; }
    .mk-footer--brand .mk-lang--footer { margin-left: 0; justify-self: start; width: fit-content; max-width: 100%; }
    .mk-footer--brand .mk-lang--footer .mk-lang__list { left: 0; right: auto; min-width: min(220px,calc(100vw - 40px)); }
    .mk-body .mk-hero__grid > *,
    .mk-body .mk-page-head__grid > *,
    .mk-body .mk-split > *,
    .mk-body .mk-experience > *,
    .mk-body .mk-appearance > *,
    .mk-body .mk-plans > *,
    .mk-body .mk-cards > * { min-width: 0; }
}