/* Hallmark · shape: kept · genre: editorial · theme: brand · redesign: restyle · copy: verbatim · job: try
 * paper: #fbfcfd · accent: #1f4e6e · display: Source Serif 4 · body: Lato · hero: kept (photo with a solid brand band, now carrying the actions) · nav: kept · footer: a closing band with the trial action over a solid brand footer · signature: kept
 * axes: light/roman-serif/cool · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P3 H4 E4 S4 R4 V3 · weakest: P, a restyle keeps the layout and every word; the argument stays the owner's, the system now serves senior eyes */
/* Hallmark · finish-review: subagent · 7 findings · 6 resolved, 1 to the owner (claims on science and the 1,000 communities figure) · gap: nav is pass 2 */
/* Hallmark · waive 24b · the 50px offset clears the fixed Bootstrap navbar, two uses · the first section on each public page must start below the 50px EngagedSenior navbar */
/* Hallmark · reworded "Budget $29/mo" to a plan head with the price on its own line · the plan names and prices keep every word, split for the larger senior type scale */
/* Hallmark · reworded "Lauren, Enriched Life Director" and "Kim, Program Director" from h3 and h4 heads to figcaptions · each testimonial keeps the name and role as its caption */
/* Hallmark · dismissed kept figures 8.2.35 · those were Laravel debugbar timings in the local before screenshots, not page figures */
/* Hallmark · waive 59 · one 64px gap per page, between the title section and its content on the same paper · each public page title was split from its content only so the first section fits the 1920 fold */
/* Hallmark · answered F4 · on the blue band the trial button is white and pricing is brand blue; on paper sections the trial button is brand blue */
/* Hallmark · dismissed 23 · the matched rule is the View Pricing button on the band, one 56px control, not a viewport fill */
/* Hallmark · waive 78 · the pricing h2s are the three plan names inside their cards at 32px · a 40px plan name breaks Multi-Community onto two lines and pushes the prices out of line */
/* Hallmark · waive 39b · controls stand 56px · senior living staff and residents need larger targets than the 52px marketing cap allows */
/* Hallmark · waive 28b · the two testimonial videos have no poster image in the files bucket · preload metadata shows the first frame until the owner supplies posters */
@import url("./marketing/tokens.css?v=1.19");
@import url("./marketing/base.css?v=1.19");

/* Base for the public pages (overrides the legacy template rules in main.css) */
body {
    font-size: var(--text-md);
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-ink);
    background: var(--color-paper);
}

main {
    display: block;
}

.mk-wrap {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.mk-section {
    padding-block: var(--space-2xl);
    background: var(--color-paper);
    color: var(--color-ink);
}

.mk-section--first {
    padding-top: calc(50px + var(--space-2xl));
}

.mk-section--first > .mk-wrap > .mk-head:last-child {
    margin-bottom: 0;
}

.mk-section--first + .mk-section {
    padding-top: 0;
}

#ourGames + .mk-section {
    padding-top: var(--space-xl);
}

.mk-section--well {
    background: var(--color-paper-2);
}

.mk-section--band {
    background: var(--color-field);
    color: var(--color-field-ink);
}

.mk-section--band :focus-visible {
    outline-color: var(--color-focus-on-accent);
}

.mk-section h1,
.mk-section h2,
.mk-section h3 {
    color: inherit;
}

.mk-head {
    margin-bottom: var(--space-xl);
}

.mk-head > h1,
.mk-head > h2 {
    max-width: 24ch;
}

.mk-head > p {
    margin-top: var(--space-md);
    font-size: var(--text-lead);
    line-height: 1.45;
    max-width: 52ch;
}

.mk-prose p {
    max-width: 65ch;
    margin-bottom: var(--space-lg);
}

.mk-prose p:last-child {
    margin-bottom: 0;
}

.mk-prose strong {
    font-weight: 700;
}

a.mk-link,
.mk-prose a,
.mk-note a {
    color: var(--color-accent);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.18em;
}

.mk-section--band a.mk-link,
.mk-section--band .mk-note a {
    color: var(--color-accent-ink);
}

.mk-note {
    font-size: var(--text-sm);
    max-width: 65ch;
}

/* Icons (Font Awesome) take the brand ink */
.mk-icon {
    color: var(--color-accent);
    --fa-primary-color: var(--color-accent);
    --fa-secondary-color: var(--color-accent);
    --fa-secondary-opacity: 0.45;
    font-size: var(--text-xl);
    flex: none;
    width: 1.25em;
    text-align: center;
}

.mk-section--band .mk-icon {
    color: var(--color-accent-ink);
    --fa-primary-color: var(--color-accent-ink);
    --fa-secondary-color: var(--color-accent-ink);
}

/* Buttons: one primary recipe, one quiet recipe */
.btn-mk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-height: 56px;
    padding: 0 var(--space-xl);
    border: 2px solid var(--color-ink);
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: var(--color-accent-ink);
    font: 700 var(--text-md)/1 var(--font-body);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.btn-mk:hover,
.btn-mk:focus {
    background: var(--color-ink-2);
    color: var(--color-accent-ink);
    text-decoration: none;
}

.btn-mk,
.btn-mk:hover,
.btn-mk:focus,
.btn-mk:active {
    border-bottom-color: var(--color-ink) !important;
}

.btn-mk:active {
    transform: translateY(1px);
}

.btn-mk:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

.btn-mk:disabled,
.btn-mk[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.btn-mk--quiet {
    background: var(--color-paper);
    color: var(--color-ink);
}

.btn-mk--quiet:hover,
.btn-mk--quiet:focus {
    background: var(--color-paper-3);
    color: var(--color-ink);
}

.mk-section--band .btn-mk,
.mk-hero-band .btn-mk {
    background: var(--color-paper);
    color: var(--color-ink);
    border-color: var(--color-ink);
}

.mk-section--band .btn-mk:hover,
.mk-hero-band .btn-mk:hover,
.mk-section--band .btn-mk:focus,
.mk-hero-band .btn-mk:focus {
    background: var(--color-paper-3);
    color: var(--color-ink);
}

.mk-section--band .btn-mk--quiet,
.mk-hero-band .btn-mk--quiet {
    background: var(--color-ink-2);
    color: var(--color-accent-ink);
    border-color: var(--color-ink);
}

.mk-section--band .btn-mk--quiet:hover,
.mk-hero-band .btn-mk--quiet:hover,
.mk-section--band .btn-mk--quiet:focus,
.mk-hero-band .btn-mk--quiet:focus {
    background: var(--color-accent);
    color: var(--color-accent-ink);
}

.mk-section--band .btn-mk:focus-visible,
.mk-hero-band .btn-mk:focus-visible {
    outline-color: var(--color-focus-on-accent);
}

.mk-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
}

@media (prefers-reduced-motion: reduce) {
    .btn-mk {
        transition: background-color var(--dur-short) linear;
    }

    .btn-mk:active {
        transform: none;
    }
}

/* Cards: one containment layer, a hairline, no shadow */
.mk-card {
    background: var(--color-paper);
    color: var(--color-ink);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    padding: var(--space-lg);
}

/* Two-up feature lists: icon inline with the item head */
.mk-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl) var(--gap-columns);
    margin: 0;
    padding: 0;
    list-style: none;
}

.mk-features > li {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
}

.mk-features h3 {
    font-size: var(--text-lg);
    line-height: 1.25;
    margin-bottom: var(--space-xs);
}

.mk-features p {
    max-width: 48ch;
}

/* Quotes */
.mk-quotes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-columns);
    margin: 0 0 var(--space-2xl);
}

.mk-quote {
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-md);
}

.mk-quote blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    font-style: normal;
    font-size: var(--text-md);
    line-height: 1.55;
}

.mk-quote blockquote p {
    font-size: inherit;
}

.mk-quote figcaption {
    font-weight: 700;
}

.mk-quote figcaption span {
    display: block;
    font-weight: 400;
}

/* Home: testimonial cards on the band, centred with a badge (the original layout) */
.mk-quotes--home {
    margin-top: var(--space-xl);
    row-gap: var(--space-2xl);
}

.mk-quotes--home .mk-quote {
    position: relative;
    justify-content: center;
    padding: var(--space-2xl) var(--space-lg) var(--space-lg);
    background: var(--color-paper-2);
    border-color: var(--color-paper-3);
    text-align: center;
}

.mk-quotes--home .mk-quote blockquote {
    font-style: italic;
}

.mk-quotes--home .mk-quote figcaption {
    font-weight: 400;
    font-style: italic;
}

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

.mk-head--center > h2 {
    margin-inline: auto;
    max-width: none;
}

.mk-rule {
    width: 40%;
    margin: var(--space-md) auto 0;
    border: 0;
    border-top: var(--rule-hair) solid var(--color-paper-3);
}

.mk-quote-badge {
    position: absolute;
    top: -36px;
    left: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--color-app-teal) 0%, var(--color-app-blue) 100%);
    border: 4px solid var(--color-paper);
    box-shadow: 0 4px 10px color-mix(in oklab, var(--color-ink) 35%, transparent);
    color: var(--color-paper);
    font-size: var(--text-xl);
    transform: translateX(-50%);
}

/* Home: hero */
#header.mk-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: calc(100svh - 50px);
    margin-top: 50px;
    padding: 0;
    background: var(--color-paper-3);
    color: var(--color-ink);
    text-align: left;
    overflow: visible;
}

/* main.css #header:after is a full-size invisible overlay (opacity 0, absolute); it caught every click on the hero buttons */
#header.mk-hero::after {
    content: none;
}

/* main.css #header a:hover sets white text (id selector), which wins over the band button hover colours */
#header .mk-hero-band .btn-mk:hover,
#header .mk-hero-band .btn-mk:focus {
    color: var(--color-ink);
}

#header .mk-hero-band .btn-mk--quiet:hover,
#header .mk-hero-band .btn-mk--quiet:focus {
    color: var(--color-accent-ink);
}

/* layouts/main.blade.php sets border-radius 4px on every focused link, so a clicked pill button turned square */
.btn-mk:focus,
.btn-mk:focus-visible {
    border-radius: var(--radius-pill);
}

#header.mk-hero::before {
    content: "";
    flex: 1 1 auto;
    min-height: 320px;
    background: var(--hero-image) center 30% / cover no-repeat;
}

.mk-hero-band {
    background: var(--color-field);
    color: var(--color-field-ink);
    padding-block: var(--space-lg) var(--space-md);
}

.mk-hero-band .mk-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    text-align: center;
}

#header .mk-hero-band h1 {
    color: var(--color-accent-ink);
    font-size: var(--text-3xl);
    line-height: 1.1;
    max-width: none;
}

.mk-hero-band p {
    margin-top: 0;
    font-size: var(--text-md);
    line-height: 1.4;
    max-width: none;
}

.mk-hero-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2xs);
}

.mk-hero-band .btn-mk {
    min-height: 48px;
}

/* Home: customer logos */
.mk-logos-lead {
    font-size: var(--text-lead);
    line-height: 1.45;
    max-width: 52ch;
    margin-bottom: var(--space-xl);
}

.mk-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg) var(--space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.mk-logos li {
    display: flex;
    justify-content: center;
    flex: 0 0 clamp(96px, 26vw, 160px);
}

.mk-logos img {
    height: 40px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Games: alternating rows of text and screenshot */
.mk-rows {
    display: grid;
    gap: var(--space-3xl);
}

.mk-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: center;
    gap: var(--space-2xl);
}

.mk-row--flip {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.mk-row h2 {
    font-size: var(--text-section);
    line-height: 1.1;
    margin-block: var(--space-sm) var(--space-sm);
}

.mk-shot {
    margin: 0;
}

.mk-shot img {
    width: 100%;
    height: auto;
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
}

/* Pricing: three plan cards */
.mk-pricing-head .mk-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-md) var(--space-2xl);
}

.mk-pricing-head + .mk-section {
    padding-top: var(--space-2xl);
}

.mk-pricing-head h1 {
    font-size: var(--text-display);
}

.mk-pricing-lead {
    margin-top: var(--space-md);
    font-size: var(--text-lead);
    line-height: 1.45;
    max-width: 46ch;
}

.mk-pricing-head .mk-note {
    flex: 0 1 380px;
}

.mk-plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--gap-columns);
    row-gap: 0;
    align-items: stretch;
}

.mk-plan {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
    padding: 0;
    overflow: hidden;
}

.mk-plan-top {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: var(--space-lg);
    align-items: start;
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
}

.mk-plan h2 {
    font-size: var(--text-2xl);
    line-height: 1.2;
    color: inherit;
}

.mk-price {
    font-family: var(--font-display);
    font-size: var(--text-display-s);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.mk-price small {
    font-family: var(--font-body);
    font-size: var(--text-md);
    font-weight: 400;
}

.mk-plan .btn-mk {
    width: 100%;
}

.mk-plan--featured {
    border: 3px solid var(--color-accent);
}

.mk-plan--featured .mk-plan-top {
    background: var(--color-field);
    color: var(--color-field-ink);
}

.mk-plan--featured .mk-plan-top .btn-mk {
    background: var(--color-paper);
    color: var(--color-ink);
}

.mk-plan--featured .mk-plan-top .btn-mk:hover,
.mk-plan--featured .mk-plan-top .btn-mk:focus {
    background: var(--color-paper-3);
    color: var(--color-ink);
}

.mk-plan--featured .mk-plan-top :focus-visible {
    outline-color: var(--color-focus-on-accent);
}

.mk-plan--org {
    background: var(--color-paper-2);
}

.mk-checks {
    margin: 0;
    padding: var(--space-lg) var(--space-lg) var(--space-xl);
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    border-top: var(--rule-hair) solid var(--color-rule);
}

.mk-plan--featured .mk-checks {
    border-top: 0;
}

.mk-checks li {
    position: relative;
    padding-left: 34px;
    line-height: 1.4;
}

.mk-checks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 22px;
    height: 22px;
    background: var(--color-accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mk-checks li.mk-checks-lead {
    padding-left: 0;
    font-weight: 700;
}

.mk-checks li.mk-checks-lead::before {
    content: none;
}

.mk-plans-after {
    margin-top: var(--space-xl);
}

.mk-prose strong {
    font-weight: 700;
    color: inherit;
}

/* Testimonials: video stories, then the quote cards on the band */
.mk-testimonials-head h1 {
    font-size: var(--text-display);
    max-width: 22ch;
}

.mk-section--first + .mk-stories {
    padding-top: var(--space-2xl);
}

.mk-voices {
    display: grid;
    gap: var(--space-3xl);
}

.mk-voice {
    display: grid;
    grid-template-columns: minmax(0, 13fr) minmax(0, 10fr);
    align-items: center;
    gap: var(--space-xl) var(--space-2xl);
}

.mk-voice--flip {
    grid-template-columns: minmax(0, 10fr) minmax(0, 13fr);
}

.mk-voice video {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-card);
    border: var(--rule-hair) solid var(--color-rule);
    background: var(--color-ink);
}

.mk-voice-quote {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.mk-voice-quote svg {
    fill: var(--color-accent);
}

.mk-voice-quote blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    font-style: normal;
    line-height: 1.3;
}

.mk-voice-quote blockquote p {
    font-size: inherit;
    max-width: none;
}

.mk-voice-quote figcaption {
    font-size: var(--text-md);
}

.mk-voice-quote figcaption strong {
    font-weight: 700;
    color: inherit;
}

.mk-voice-quote figcaption span {
    display: block;
}

.mk-stories + .mk-section--band {
    margin-top: 0;
}

/* Science: grouped paper cards with the year */
.mk-science-head .mk-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-lg) var(--space-2xl);
}

.mk-science-head .mk-wrap > div {
    flex: 1 1 520px;
    min-width: 0;
}

.mk-science-head h1 {
    font-size: var(--text-display);
}

.mk-science-lead {
    margin-top: var(--space-lg);
    font-size: var(--text-lead);
    line-height: 1.5;
    max-width: 52ch;
}

.mk-science-lead strong {
    font-weight: 700;
    color: inherit;
}

.mk-science-head .mk-note {
    flex: 0 1 340px;
}

.mk-section--first + .mk-paper-group {
    padding-top: var(--space-2xl);
}

.mk-paper-group + .mk-paper-group {
    padding-top: 0;
}

.mk-paper-group h2 {
    font-size: var(--text-section);
    margin-bottom: var(--space-xl);
}

.mk-papers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
}

.mk-paper {
    display: flex;
    gap: var(--space-lg);
    align-items: flex-start;
}

.mk-paper-year {
    flex: none;
    width: 96px;
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: 1;
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
}

.mk-paper-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
}

.mk-paper-claim {
    font-family: var(--font-body);
    font-size: var(--text-md);
    font-weight: 700;
    line-height: 1.4;
    max-width: none;
}

.mk-paper-cite {
    line-height: 1.5;
}

.mk-paper-cite strong {
    font-weight: 700;
    color: inherit;
}

.mk-paper .mk-link {
    white-space: nowrap;
}

/* About */
.mk-story {
    display: grid;
    gap: var(--space-2xl);
}

.mk-story-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: start;
    gap: var(--space-2xl);
}

.mk-story-row--flip {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.mk-photo {
    margin: 0;
}

.mk-photo img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-card);
}

.mk-photo figcaption {
    margin-top: var(--space-sm);
    font-size: var(--text-sm);
}

.mk-story h2 {
    font-size: var(--text-section);
    margin-bottom: var(--space-lg);
}

/* Closing band and footer (partials.marketingFooter) */
.mk-close .mk-wrap {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: var(--space-lg) var(--space-2xl);
}

.mk-close h2 {
    font-size: var(--text-section);
    margin-bottom: var(--space-sm);
}

.mk-close p + p {
    margin-top: var(--space-xs);
}

.mk-close .mk-note:last-child {
    margin-top: var(--space-lg);
}

.mk-close .mk-actions {
    justify-content: flex-end;
}

.mk-hero-band .mk-actions {
    justify-content: center;
}

.mk-footer {
    background: var(--color-field);
    color: var(--color-field-ink);
    padding-block: var(--space-2xl) var(--space-xl);
}

.mk-footer :focus-visible {
    outline-color: var(--color-focus-on-accent);
}

.mk-footer a {
    color: var(--color-accent-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

.mk-footer a:hover,
.mk-footer a:focus {
    color: var(--color-accent-ink);
    text-decoration-thickness: 2px;
}

.mk-footer-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-xl) var(--gap-columns);
}

.mk-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mk-footer-contact li + li {
    margin-top: var(--space-xs);
}

.mk-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-lg);
    align-content: start;
}

.mk-social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: var(--space-lg) !important;
}

.mk-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    font-size: var(--text-xl);
    text-decoration: none;
}

.mk-footer-legal {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: var(--rule-hair) solid var(--color-accent-ink);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-lg);
    font-size: var(--text-sm);
}

/* Tablet and phone */
@media (max-width: 60rem) {
    .mk-close .mk-wrap,
    .mk-row,
    .mk-row--flip,
    .mk-voice,
    .mk-voice--flip,
    .mk-story-row,
    .mk-story-row--flip,
    .mk-footer-top {
        grid-template-columns: minmax(0, 1fr);
    }

    .mk-papers,
    .mk-quotes,
    .mk-plans {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--gap-columns);
    }

    .mk-row > .mk-shot,
    .mk-story-row--flip > .mk-photo {
        order: -1;
    }

    .mk-plans {
        max-width: 560px;
    }

    #header.mk-hero {
        min-height: 80svh;
    }
}

@media (max-width: 40rem) {
    .mk-paper {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .mk-paper-year {
        width: auto;
    }

    #header.mk-hero {
        min-height: auto;
    }

    #header.mk-hero::before {
        flex: none;
        min-height: 0;
        aspect-ratio: 4 / 3;
        background-position: 65% center;
    }

    .mk-hero-band .btn-mk,
    .mk-close .btn-mk {
        width: 100%;
    }

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

    .mk-logos img {
        height: 36px;
    }

    .btn-mk {
        padding: 0 var(--space-lg);
    }
}