/* Public landing page. Builds on tokens.css and site.css. */

/* The footer sits at the bottom of the window even on short pages such as 404 and 500 (PO-32). */
.mk { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--surface); }
.mk-main { flex: 1 0 auto; }
.mk-container { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--space-4); }
@media (min-width: 960px) { .mk-container { padding-inline: var(--space-10); } }
.mk-page { padding-block: var(--space-8); }

/* Eyebrows in sentence case, as written (R8 content): no capitals or wide tracking. */
.mk-eyebrow { display: inline-block; font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--weight-bold); color: var(--brand); }
.mk-lede { font-size: var(--text-lg); line-height: var(--leading-xl); color: var(--ink-muted); }
.mk-accent { color: var(--brand); }

/* Header */

.mk-header { position: sticky; top: 0; z-index: var(--z-header); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.mk-header-inner { display: flex; align-items: center; gap: var(--space-6); min-height: 68px; }
.mk-logo img { display: block; height: 28px; width: auto; } /* R13-J4: 28px in every bar */
.mk-nav { display: none; gap: var(--space-6); margin-left: var(--space-4); }
.mk-nav a, .mk-signin { color: var(--ink); text-decoration: none; font-weight: var(--weight-semibold); font-size: var(--text-md); }
.mk-nav a:hover, .mk-signin:hover { color: var(--brand); }
.mk-header-actions { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; }
@media (min-width: 960px) { .mk-nav { display: flex; } }
@media (max-width: 599px) { .mk-header-actions .btn { padding: 0 var(--space-3); } }

/* Phone and tablet menu (under 960px, the desktop breakpoint, R9-J12): a disclosure below the header, with 44px targets. */
.mk-menu-button {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; min-width: 44px; padding: 0 var(--space-3);
  border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink);
  font: var(--weight-semibold) var(--text-md)/var(--leading-md) var(--font-sans); cursor: pointer;
}
.mk-menu-button[aria-expanded="true"] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-strong); }
.mk-menu { border-top: 1px solid var(--line); background: var(--surface-raised); }
.mk-menu[hidden] { display: none; }
.mk-menu ul { display: flex; flex-direction: column; margin: 0; padding: var(--space-2) 0; list-style: none; }
.mk-menu a { display: flex; align-items: center; min-height: 48px; color: var(--ink); text-decoration: none; font-weight: var(--weight-semibold); font-size: var(--text-lg); }
.mk-menu li + li { border-top: 1px solid var(--line); }
.mk-menu a:hover { color: var(--brand); }
@media (min-width: 960px) { .mk-menu-button, .mk-menu { display: none; } }
@media (max-width: 599px) { .mk-signin { display: none; } .mk-header-inner { gap: var(--space-2); } /* The word stays for screen readers (the button needs a name), it just isn't shown. */ .mk-menu-button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }

/* Hero */

.mk-hero { padding: var(--space-12) 0 var(--space-8); overflow: hidden; background: linear-gradient(180deg, var(--brand-tint) 0%, var(--surface) 100%); }
.mk-hero-grid { display: grid; gap: var(--space-12); align-items: center; }
.mk-hero-copy { display: flex; flex-direction: column; gap: var(--space-6); }
/* Home redesign: the status pill above the hero heading ("Open now in Queensland"), with a small --good dot. */
.mk-open-pill {
  display: inline-flex; align-self: flex-start; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface-raised); color: var(--ink); font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--weight-semibold);
}
.mk-open-pill i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
.mk-hero h1 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-display); line-height: 1.05; letter-spacing: -.02em; }
.mk-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.mk-assurances { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; color: var(--ink-muted); font-size: var(--text-md); }
.mk-assurances li::before { content: "✓"; margin-right: var(--space-1-5); color: var(--good); font-weight: var(--weight-bold); }
@media (min-width: 960px) {
  .mk-hero { padding: 80px 0 56px; }
  .mk-hero-grid { grid-template-columns: 1.1fr 1fr; }
}

.mk-hero-visual { position: relative; padding: var(--space-6) var(--space-3) var(--space-10); }
.mk-hero-visual::before {
  content: ""; position: absolute; inset: 0 -10% 0 10%; z-index: 0; border-radius: var(--radius-xl);
  background: radial-gradient(circle at 30% 30%, var(--brand-soft), transparent 70%);
}
.mk-device {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-3); max-width: 420px; margin-inline: auto;
  padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface-raised); box-shadow: var(--shadow-hero);
}
.mk-device-head { display: flex; align-items: center; gap: var(--space-2); }
.mk-device-title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg); }
.mk-stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.mk-stat-row > div, .mk-event { display: flex; flex-direction: column; padding: var(--space-3); border-radius: var(--radius-lg); background: var(--surface); }
.mk-stat-row strong { font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--leading-xl); }
.mk-event { flex-direction: row; align-items: flex-start; gap: var(--space-3); }
.mk-event > div { display: flex; flex-direction: column; }
.mk-event strong { font-size: var(--text-md); }
.mk-dot { flex: none; width: 10px; height: 10px; margin-top: var(--space-1-5); border-radius: 50%; }
.mk-dot-good { background: var(--good); } .mk-dot-key { background: var(--key); } .mk-dot-brand { background: var(--brand); }
.mk-float {
  position: absolute; z-index: 2; display: flex; flex-direction: column; padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg);
  background: var(--surface-raised); border: 1px solid var(--line); box-shadow: var(--shadow-raised); font-size: var(--text-md);
}
.mk-float-a { top: 4px; right: 0; }
.mk-float-b { bottom: 0; left: 0; }
@media (max-width: 599px) { .mk-float { display: none; } }

/* States strip */

.mk-states { border-block: 1px solid var(--line); background: var(--surface-raised); scroll-margin-top: 68px; }
.mk-states-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3) var(--space-6); padding-block: var(--space-4); }
.mk-states-live { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-3); margin: 0; font-weight: var(--weight-semibold); }
.mk-state-list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.mk-state { padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--brand-soft); color: var(--brand-strong); font-weight: var(--weight-bold); font-size: var(--text-md); }
.mk-states-later { margin: 0; color: var(--ink-muted); font-size: var(--text-md); text-align: center; }

/* Sections */

.mk-section { padding: var(--space-16) 0; }
.mk-section-alt { background: var(--surface-raised); border-block: 1px solid var(--line); }
.mk-section-head { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); max-width: 720px; margin: 0 auto var(--space-10); text-align: center; }
/* R9-J14: section headings on the type scale: 28/34 on phones and tablets, 40/44 from 960px (not a 4vw size at 1.15). */
.mk-section-head h2 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-2xl); line-height: var(--leading-2xl); letter-spacing: var(--display-tracking); }
@media (min-width: 960px) { .mk-section-head h2 { font-size: var(--text-3xl); line-height: var(--leading-3xl); } }
.mk-section-head.mk-left { align-items: flex-start; text-align: left; margin: 0; }
@media (min-width: 960px) { .mk-section { padding: var(--space-24) 0; } }
/* The final call to action follows the FAQ without a double section gap (PO-31). */
.mk-section.mk-section-final { padding-top: 0; }
/* Phones: section intros and the states strip read left-aligned, like the text around them (PO-31). */
@media (max-width: 599px) {
  .mk-section-head { align-items: flex-start; text-align: left; }
  .mk-states-inner, .mk-states-live, .mk-state-list { justify-content: flex-start; }
  .mk-states-later { text-align: left; }
}

.mk-features { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@media (min-width: 600px) { .mk-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Whole rows at desktop widths, never an empty slot: 4 across for 8 features, 3 across for 9 (Index.cshtml picks). */
@media (min-width: 960px) {
  .mk-features-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mk-features-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.mk-feature { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); }
.mk-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--brand-soft); color: var(--brand-strong); }


/* Savings calculator */

.mk-savings { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 960px) { .mk-savings { grid-template-columns: 1fr 1fr; gap: var(--space-16); } }
.mk-calc { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6); }
.mk-range { display: flex; align-items: center; gap: var(--space-4); }
.mk-range input { flex: 1; accent-color: var(--brand); }
.mk-range output { min-width: 72px; text-align: right; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-xl); }
.mk-calc-result { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-2); }
.mk-calc-result > div { display: flex; flex-direction: column; padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface); }
.mk-calc-result strong { font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--leading-xl); }
.mk-calc-save { background: var(--brand-soft) !important; color: var(--brand-strong); }

/* Pricing */

.mk-billing { display: inline-flex; padding: var(--space-1); border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--line); }
.mk-billing button { min-height: 40px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-pill); background: none; color: var(--ink-muted); font: var(--weight-semibold) var(--text-md)/var(--leading-md) var(--font-sans); cursor: pointer; }
.mk-billing button[aria-checked="true"] { background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-raised); }
.mk-save-tag { margin-left: var(--space-1-5); padding: 1px var(--space-2); border-radius: var(--radius-pill); background: var(--key); color: var(--on-key); font-size: var(--text-xs); }

.mk-plans { display: grid; gap: var(--space-4); align-items: stretch; }
@media (min-width: 960px) { .mk-plans { grid-template-columns: repeat(3, 1fr); } }
/* Fewer plans (e.g. listing plans hidden): keep cards at their three-column width, centred. */
.mk-plans-1 { max-width: 400px; margin-inline: auto; }
@media (min-width: 960px) {
    .mk-plans-1 { grid-template-columns: 1fr; }
    .mk-plans-2 { grid-template-columns: repeat(2, 1fr); max-width: 800px; margin-inline: auto; }
}
.mk-plan { position: relative; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); }
.mk-plan-featured { border: 2px solid var(--brand); background: var(--surface-raised); box-shadow: var(--shadow-hero); }
.mk-plan-badge { position: absolute; top: -12px; left: 24px; }
.mk-plan-for { min-height: 48px; }
.mk-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); min-height: 80px; }
.mk-price-main { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-price); line-height: 1; }
.mk-price-unit { color: var(--ink-muted); }
.mk-price-extra { flex-basis: 100%; font-size: var(--text-md); color: var(--ink-muted); }
/* The reserved height only lines prices up across cards side by side; stacked on phones it's just a gap. */
@media (max-width: 599px) { .mk-price { min-height: 0; } }
.mk-plan-list { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--text-md); }
.mk-plan-list li { display: flex; gap: var(--space-2); }
.mk-plan-list li::before { content: "✓"; flex: none; color: var(--brand); font-weight: var(--weight-bold); }

.mk-plans-note { margin: var(--space-6) 0 0; text-align: center; }
.mk-offer { display: flex; flex-direction: column; gap: var(--space-1-5); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface-raised); font-size: var(--text-md); }
.mk-code { align-self: flex-start; margin-top: var(--space-1); padding: var(--space-0-5) var(--space-2); border-radius: var(--radius-sm); background: var(--key); color: var(--on-key); font-size: var(--text-sm); }

/* FAQ */

.mk-faq-grid { display: grid; gap: var(--space-8); }
@media (min-width: 960px) { .mk-faq-grid { grid-template-columns: 1fr 2fr; gap: var(--space-16); } }
.mk-faq { display: flex; flex-direction: column; }
.mk-faq details { border-top: 1px solid var(--line); padding: var(--space-4) 0; }
.mk-faq details:last-child { border-bottom: 1px solid var(--line); }
.mk-faq summary { display: flex; justify-content: space-between; gap: var(--space-4); cursor: pointer; list-style: none; font-weight: var(--weight-semibold); font-size: var(--text-lg); }
.mk-faq summary::-webkit-details-marker { display: none; }
.mk-faq summary::after { content: "+"; color: var(--brand); font-size: var(--text-xl); line-height: 1; }
.mk-faq details[open] summary::after { content: "–"; }
.mk-faq details p { margin-top: var(--space-2); max-width: 44.5em; }

/* Final call to action and footer */

.mk-final {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-12) var(--space-8); border-radius: var(--radius-xl);
  background: var(--brand-deep); color: var(--on-brand-deep);
}
.mk-final h2 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-2xl); line-height: var(--leading-2xl); }
@media (min-width: 960px) { .mk-final h2 { font-size: var(--text-3xl); line-height: var(--leading-3xl); } }
.mk-final p { font-size: var(--text-lg); opacity: .9; max-width: 38.5em; }
.mk-final-link { color: var(--on-brand-deep); font-weight: var(--weight-semibold); }
.mk-final-link:hover { color: var(--on-brand-deep); opacity: .85; }
@media (min-width: 960px) { .mk-final { padding: var(--space-16); } }

/* Dark mode: the footer is darker than the page, with a hairline edge so it doesn't merge into it (PO-33). */
.mk-footer { padding: var(--space-12) 0; background: var(--footer-bg); color: var(--footer-ink); border-top: 1px solid var(--footer-edge); }
.mk-footer-inner { display: grid; gap: var(--space-6); }
.mk-footer-tag { font-size: var(--text-md); }
.mk-footer-brand { display: flex; flex-direction: column; gap: var(--space-2); }
.mk-footer-logo { align-self: flex-start; }
.mk-footer-links { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.mk-footer-links a { color: var(--footer-link); text-decoration: none; font-weight: var(--weight-semibold); font-size: var(--text-md); }
.mk-footer-links a:hover { text-decoration: underline; color: var(--footer-link); }
.mk-footer-fine { font-size: var(--text-sm); line-height: var(--leading-md); opacity: .75; max-width: 51em; }
@media (min-width: 960px) { .mk-footer-inner { grid-template-columns: 1fr auto; } .mk-footer-fine { grid-column: 1 / -1; } }

/* Product illustrations: HTML mock-ups of Leasii's screens, built from the design tokens. */

.mk-shots { display: grid; gap: var(--space-6); align-items: start; }
/* Wide screens: dashboard and ledger stacked on the left, the phone beside them, so no column is left half empty. */
@media (min-width: 960px) {
  .mk-shots { grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); grid-template-areas: "dashboard phone" "ledger phone"; align-items: start; }
  .mk-shot-dashboard { grid-area: dashboard; }
  .mk-shot-ledger { grid-area: ledger; }
  .mk-shot-phone { grid-area: phone; align-self: center; }
}
.mk-shot { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.mk-shot figcaption { color: var(--ink-muted); font-size: var(--text-md); text-align: center; }
.mk-mock { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-raised); overflow: hidden; font-size: var(--text-md); }
.mk-mock-title { font-family: var(--font-display); font-size: var(--text-lg); }
.mk-mock-bar { display: flex; gap: var(--space-1-5); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); background: var(--surface-raised); }
.mk-mock-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.mk-mock-app { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .mk-mock-app { grid-template-columns: 170px minmax(0, 1fr); } }
.mk-mock-side { display: none; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-2); border-right: 1px solid var(--line); background: var(--surface-raised); }
@media (min-width: 600px) { .mk-mock-side { display: flex; } }
.mk-mock-nav { padding: var(--space-1-5) var(--space-2); border-radius: var(--radius-sm); color: var(--ink-muted); font-weight: var(--weight-semibold); }
.mk-mock-nav.is-current { background: var(--brand-soft); color: var(--brand-strong); }
.mk-mock-main { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.mk-mock-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.mk-mock-tiles > div { display: flex; flex-direction: column; padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); }
.mk-mock-tiles span { color: var(--ink-muted); font-size: var(--text-xs); }
.mk-mock-tiles strong { font-family: var(--font-display); font-size: var(--text-lg); }
.mk-mock-sub { font-size: var(--text-md); }
.mk-mock-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.mk-mock-list li { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; border-top: 1px solid var(--line); }
.mk-mock-list li .mk-dot { margin-top: 0; }
.mk-mock-list li span:nth-child(2) { flex: 1; min-width: 0; }
.mk-mock-list b { color: var(--brand); font-weight: var(--weight-semibold); }
.mk-mock-panel { padding: var(--space-4); background: var(--surface-raised); }
.mk-mock-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: 10px; }
.mk-mock-ledger { width: 100%; border-collapse: collapse; }
.mk-mock-ledger td { padding: var(--space-2) var(--space-1); border-top: 1px solid var(--line); }
.mk-mock-ledger td:first-child { color: var(--ink-muted); white-space: nowrap; }
.mk-mock-ledger td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mk-mock-ledger tfoot td { border-top: 2px solid var(--line-strong); font-weight: var(--weight-bold); }
.mk-mock-phone { max-width: 300px; margin-inline: auto; padding: 0; border: 10px solid var(--ink); border-radius: var(--radius-xl); background: var(--surface); }

/* The inspection-on-a-phone illustration: mirrors the real room screen (Views/Inspections/Room.cshtml). */
.mk-phone-screen { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) var(--space-3) var(--space-4); font-size: var(--text-sm); }
.mk-phone-status { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--ink); }
.mk-phone-notch { width: 72px; height: 18px; border-radius: 0 0 var(--radius-md) var(--radius-md); background: var(--ink); margin-top: -8px; }
.mk-phone-battery { width: 20px; height: 10px; border: 1.5px solid var(--ink); border-radius: var(--radius-xs); box-shadow: inset -6px 0 0 var(--surface), inset 0 0 0 2px var(--ink); }
.mk-phone-top { display: flex; align-items: center; gap: var(--space-2); }
.mk-phone-back { font-size: var(--text-lg); line-height: 1; color: var(--brand); }
.mk-phone-step { flex: 1; min-width: 0; overflow: hidden; color: var(--ink-muted); font-size: var(--text-xs); white-space: nowrap; text-overflow: ellipsis; }
.mk-phone-roomline { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.mk-phone-count { color: var(--ink-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); white-space: nowrap; }
.mk-phone-saved { padding: var(--space-0-5) var(--space-2); border-radius: var(--radius-pill); background: var(--brand-soft); color: var(--brand-strong); font-size: var(--text-xs); font-weight: var(--weight-bold); white-space: nowrap; }
.mk-phone-progress { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-1); }
.mk-phone-progress span { height: 4px; border-radius: var(--radius-xs); background: var(--line); }
.mk-phone-progress .is-done { background: var(--brand); }
.mk-phone-progress .is-current { background: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.mk-phone-room { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.2; }
.mk-phone-allfine { display: flex; align-items: center; justify-content: center; min-height: 34px; border: 1.5px solid var(--brand); border-radius: var(--radius-md); color: var(--brand-strong); font-weight: var(--weight-bold); }
.mk-phone-item { display: flex; flex-direction: column; gap: var(--space-1-5); padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); }
.mk-phone-item.is-flagged { border-color: var(--warning); box-shadow: inset 3px 0 0 var(--warning); }
.mk-phone-item-name { font-weight: var(--weight-bold); }
.mk-phone-chips { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
.mk-chip { padding: var(--space-0-5) var(--space-2); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.mk-chip.is-yes { background: var(--brand-soft); color: var(--brand-strong); }
/* Accessibility: owner. The warning-soft fill keeps the warning ink at 5:1 or better in both themes (WCAG 1.4.3; the 16% mix was 4.47:1). */
.mk-chip.is-no { background: var(--warning-soft); color: var(--warning); }
.mk-phone-note { color: var(--ink-muted); font-size: var(--text-xs); font-style: italic; }
.mk-phone-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-1-5); }
.mk-photo { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; }
.mk-photo svg { width: 85%; height: 85%; fill: var(--surface); opacity: .9; }
.mk-photo-tap { background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 55%, var(--surface)), var(--brand-strong)); }
.mk-photo-sink { background: linear-gradient(160deg, color-mix(in srgb, var(--ink-muted) 50%, var(--surface)), var(--ink-muted)); }
.mk-photo-add { border: 1.5px dashed var(--line-strong); color: var(--ink-muted); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.mk-phone-next { display: flex; align-items: center; justify-content: center; gap: var(--space-1-5); min-height: 42px; margin-top: var(--space-0-5); border-radius: var(--radius-md); background: var(--brand); color: var(--on-brand); font-weight: var(--weight-bold); }
.mk-phone-next span { font-size: var(--text-lg); line-height: 1; }

/* Testimonials (shown only once real ones are configured). */

.mk-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); }
.mk-quote { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.mk-quote blockquote { margin: 0; font-size: var(--text-lg); line-height: var(--leading-lg); }
.mk-quote figcaption { display: flex; flex-direction: column; }

/* ==== Round 3: Public site ==== */

/* Privacy, Terms and Accessibility signed out (UX A1): a 68ch reading column under the website header, and from 1024px
   the numbered contents list as a sticky column on the left. Signed in too: they always use the website layout (CON-B6). */
.mk .legal-doc { max-width: calc(43.5em + 2 * var(--space-4)); margin-inline: auto; padding: var(--space-8) var(--space-4) var(--space-16); }
.mk .legal-doc > * { max-width: 43.5em; }
.mk .legal-doc [id] { scroll-margin-top: calc(68px + var(--space-4)); }
.mk .legal-doc > nav[aria-label="Contents"] { padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); }
.mk .legal-doc > nav[aria-label="Contents"] h2 { margin-top: 0; font-size: var(--text-lg); line-height: var(--leading-lg); }
.mk .legal-doc > nav[aria-label="Contents"] ol { margin: var(--space-2) 0 0; font-size: var(--text-md); line-height: var(--leading-md); }
.mk .legal-doc > nav[aria-label="Contents"] li + li { margin-top: var(--space-1); }
@media (min-width: 960px) {
  .mk .legal-doc:has(> nav[aria-label="Contents"]) {
    display: grid; grid-template-columns: 15rem minmax(0, 43.5em); column-gap: var(--space-12); row-gap: 0; align-items: start;
    max-width: calc(15rem + 43.5em + var(--space-12) + 2 * var(--space-10)); padding-inline: var(--space-10);
  }
  .mk .legal-doc:has(> nav[aria-label="Contents"]) > * { grid-column: 2; }
  .mk .legal-doc:has(> nav[aria-label="Contents"]) > * + * { margin-top: var(--space-6); }
  /* The contents span every row of the text column, so they stay in view while the policy scrolls past. */
  .mk .legal-doc > nav[aria-label="Contents"] {
    grid-column: 1; grid-row: 1 / span 80; position: sticky; top: calc(68px + var(--space-6));
    max-height: calc(100vh - 68px - var(--space-12)); overflow-y: auto; margin-top: 0;
  }
}

/* Landing page on phones (UX A17): features as compact rows in one panel, and a slim sticky call to action once the
   hero has scrolled away (marketing.js). */
.mk-sticky-cta { display: none; }
@media (max-width: 599px) {
  .mk-features { gap: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); overflow: hidden; }
  .mk-feature { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-0-5) var(--space-3); padding: var(--space-4); border: 0; border-radius: 0; background: none; }
  .mk-feature + .mk-feature { border-top: 1px solid var(--line); }
  .mk-feature .mk-icon { grid-row: 1 / span 2; width: 32px; height: 32px; border-radius: var(--radius-sm); }
  .mk-feature .mk-icon svg { width: 20px; height: 20px; }
  .mk-feature h3 { font-size: var(--text-base); line-height: var(--leading-base); }
  .mk-feature p { font-size: var(--text-md); line-height: var(--leading-md); }


  .mk-sticky-cta:not([hidden]) {
    position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line); background: var(--surface-raised); box-shadow: var(--shadow-raised);
  }
  .mk-sticky-cta .btn { flex: 1; }
  /* Room under the last of the page so the bar never covers it. */
  .mk.mk-has-sticky-cta { padding-bottom: var(--space-16); }
}

/* Pricing with one plan (UX A18): "Free to set up" beside the plan, the launch offer on the plan card, other offers as notes. */
.mk-plans-split { max-width: 880px; margin-inline: auto; }
@media (min-width: 600px) { .mk-plans-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mk-plan-ribbon {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin: 0;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: color-mix(in srgb, var(--key) 22%, var(--surface-raised)); font-size: var(--text-md);
}
.mk-plan-ribbon .mk-code, .mk-offer-notes .mk-code { align-self: auto; margin-top: 0; }
.mk-offer-notes { display: flex; flex-direction: column; gap: var(--space-3); max-width: 880px; margin: var(--space-8) auto 0; padding: 0; list-style: none; font-size: var(--text-md); }
.mk-offer-notes li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); }

/* ==== Round 4: one offer, waitlist, shorter page on phones, About ==== */

/* The offer's small print under the hero buttons, and the code in it. */
.mk-offer-line { margin: calc(-1 * var(--space-3)) 0 0; color: var(--ink-muted); font-size: var(--text-md); line-height: var(--leading-md); }

/* Phones: a compact product card on the first screen; the full card shows from 600px. */
.mk-peek { display: none; }
@media (max-width: 599px) {
  .mk-hero { padding: var(--space-6) 0 var(--space-10); }
  .mk-hero-copy { gap: var(--space-4); }
  .mk-hero .mk-eyebrow { font-size: var(--text-sm); line-height: var(--leading-sm); }
  .mk-hero h1 { font-size: clamp(var(--text-2xl), 9vw, var(--text-3xl)); line-height: 1.08; }
  .mk-hero .mk-lede { font-size: var(--text-base); line-height: var(--leading-base); }
  .mk-hero-visual { display: none; }
  /* One main button; "See pricing" becomes a quiet link under it. */
  .mk-hero .mk-cta-row { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .mk-hero .mk-cta-row .btn-primary { width: 100%; }
  /* "See pricing": highlighted in the brand's soft green, clearly second to the main button. */
  .mk-hero .mk-cta-row .btn-secondary { width: 100%; border: 1px solid transparent; background: var(--brand-soft); color: var(--brand-strong); }
  .mk-hero .mk-cta-row .btn-secondary:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-strong); }
  .mk-offer-line { margin: 0; text-align: center; text-wrap: balance; font-size: var(--text-sm); line-height: var(--leading-sm); }
  /* The product card. */
  .mk-peek {
    display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); padding: var(--space-4);
    border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-raised);
  }
  .mk-peek-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--line); }
  .mk-peek-head strong { font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--leading-lg); }
  .mk-peek-row { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-md); line-height: var(--leading-md); }
  .mk-peek-row .mk-dot { margin-top: 0; }
  .mk-peek-row b { margin-left: auto; font-variant-numeric: tabular-nums; }
  /* Assurances on one quiet line; the records-in-Australia line is in the trust strip further down. */
  .mk-assurances { gap: var(--space-1) var(--space-4); font-size: var(--text-sm); line-height: var(--leading-sm); }
  /* States strip: short and calm; the waitlist form folds behind a button. */
  .mk-states-later { font-size: var(--text-sm); text-align: center; }
  .mk-states-inner, .mk-states-live, .mk-state-list { justify-content: center; }
  .mk-waitlist { align-items: center; }
}
.mk-waitlist-fold { width: 100%; max-width: 640px; }
.mk-waitlist-fold > summary { list-style: none; }
.mk-waitlist-fold > summary::-webkit-details-marker { display: none; }
@media (min-width: 600px) { .mk-waitlist-fold > summary { display: none; } }
@media (max-width: 599px) {
  .mk-waitlist-fold > summary { width: 100%; }
  .mk-waitlist-fold[open] > summary { display: none; }
  .mk-waitlist-fold .mk-waitlist-form legend { font-size: var(--text-md); }
}

/* States strip: what's open, and "Tell me when my state opens". */
.mk-waitlist { display: flex; flex: 1 1 100%; flex-direction: column; align-items: center; gap: var(--space-2); min-width: 0; }
.mk-waitlist-form { width: 100%; max-width: 640px; }
.mk-waitlist-form fieldset { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.mk-waitlist-form legend { padding: 0; margin-bottom: var(--space-2); font-weight: var(--weight-bold); font-size: var(--text-base); line-height: var(--leading-base); }
.mk-waitlist-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); align-items: end; }
@media (min-width: 600px) { .mk-waitlist-fields { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) auto; } }
.mk-waitlist-done { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--good-soft); color: var(--ink); font-weight: var(--weight-semibold); }
.mk-waitlist-error { margin: 0; color: var(--critical); font-size: var(--text-md); line-height: var(--leading-md); font-weight: var(--weight-semibold); }
@media (max-width: 599px) { .mk-waitlist { align-items: stretch; } }

/* The calculator straight after the hero, led by its default as a plain estimate. */
.mk-section.mk-section-tight { padding-block: var(--space-12); }
.mk-stat { font-size: var(--text-lg); line-height: var(--leading-lg); }
.mk-stat strong { font-family: var(--font-display); color: var(--brand-strong); }

/* Phones: every illustration, one at a time; see "A look inside: swipeable on phones" below. */
@media (max-width: 599px) {
  .mk-section { padding: var(--space-12) 0; }
  .mk-section-head { margin-bottom: var(--space-6); }
}

/* Owner checks as three steps with their times, then the trust points as a slim strip. */
.mk-checks { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); max-width: 960px; margin: 0 auto; padding: 0; list-style: none; }
@media (min-width: 600px) { .mk-checks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mk-checks li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.mk-checks .mk-icon { flex: none; width: 40px; height: 40px; }
.mk-checks h3 { font-size: var(--text-base); line-height: var(--leading-base); }
.mk-checks p { margin: 0; font-size: var(--text-md); line-height: var(--leading-md); }
.mk-proof-strip { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3) var(--space-6); max-width: 960px; margin: var(--space-8) auto 0; padding: 0; list-style: none; font-size: var(--text-md); line-height: var(--leading-md); }
@media (min-width: 600px) { .mk-proof-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .mk-proof-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mk-proof-strip li { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--ink-muted); }
.mk-proof-strip svg { flex: none; color: var(--brand); }
.mk-proof-strip strong { color: var(--ink); }
.mk-proof-note { max-width: 960px; margin: var(--space-4) auto 0; text-align: center; }
@media (max-width: 599px) { .mk-proof-note { text-align: left; } }

/* FAQ: the most asked here, the rest on /home/faq. */
.mk-faq-more { margin: var(--space-4) 0 0; font-weight: var(--weight-semibold); }

/* Final call to action: the offer's small print. */
.mk-final .mk-final-fine { font-size: var(--text-md); line-height: var(--leading-md); opacity: .85; }

/* Pages of their own on the website: FAQ and About. */
.mk-section.mk-section-page { padding-top: var(--space-12); }
.mk-page-title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(var(--text-2xl), 5vw, var(--text-3xl)); line-height: 1.15; letter-spacing: var(--display-tracking); }
.mk-about-narrow { max-width: calc(43.5em + 2 * var(--space-10)); }
/* R13-J7: one page head for every website page below the home page (_MarketingPageHead): crumbs, eyebrow, title, lede,
   then the page's extras, on the page background with the same spacing everywhere. */
.mk-page-head { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-12) 0 var(--space-8); max-width: 46em; }
.mk-page-head .breadcrumbs { margin: 0; }
.mk-page-head > .mk-eyebrow { align-self: flex-start; }
/* Pages that already pad their top (FAQ's section, a legal document's article) don't add the head's top padding again. */
.mk-section-page .mk-page-head { padding-top: 0; }
.mk .legal-doc > .mk-page-head { padding-top: var(--space-4); padding-bottom: 0; }
.mk-page > .mk-page-head { padding-top: var(--space-4); padding-bottom: 0; }
.mk-about-body { display: flex; flex-direction: column; gap: var(--space-10); padding-block: var(--space-12); }
.mk-about-body section { display: flex; flex-direction: column; gap: var(--space-3); }
.mk-about-body h2 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-2xl); line-height: var(--leading-2xl); }
.mk-about-body p { margin: 0; max-width: 43.5em; }
.mk-about-list { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding-left: var(--space-5); }
.mk-about-details { display: grid; gap: var(--space-2); margin: 0; }
.mk-about-details > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-0-5); }
@media (min-width: 600px) { .mk-about-details > div { grid-template-columns: 12rem minmax(0, 1fr); gap: var(--space-4); } }
.mk-about-details dt { font-weight: var(--weight-semibold); }
.mk-about-details dd { margin: 0; }
.mk-about [id] { scroll-margin-top: calc(68px + var(--space-4)); }

/* ==== How it works: three step cards joined by a line (across on desktop, down the side on phones) ==== */
.mk-how { position: relative; display: grid; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.mk-how-step { position: relative; padding-left: var(--space-12); }
.mk-how-num {
  position: absolute; top: 0; left: 0; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--brand); color: var(--on-brand); font-family: var(--font-display); font-weight: var(--display-weight); box-shadow: 0 0 0 6px var(--surface);
}
/* The joining line: from below one number to the next card. */
.mk-how-step:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 46px; bottom: calc(-1 * var(--space-6)); border-left: 2px dashed var(--line-strong); }
.mk-how-card {
  display: flex; flex-direction: column; gap: var(--space-2); height: 100%; padding: var(--space-5);
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-raised);
}
.mk-how-card h3 { font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--leading-xl); }
.mk-how-tag { align-self: flex-start; padding: var(--space-0-5) var(--space-2); border-radius: var(--radius-pill); background: var(--brand-soft); color: var(--brand-strong); font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--weight-semibold); }
.mk-how-mock { display: flex; flex-direction: column; gap: var(--space-1-5); margin-top: auto; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); font-size: var(--text-sm); line-height: var(--leading-sm); }
.mk-how-mock p { margin: 0; }
.mk-how-mock-title { font-weight: var(--weight-semibold); color: var(--ink); }
.mk-how-row { display: flex; align-items: center; gap: var(--space-2); color: var(--ink); }
.mk-how-tick { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--good-soft); color: var(--good); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.mk-how-dot { flex: none; width: 8px; height: 8px; margin-inline: var(--space-1); border-radius: 50%; background: var(--brand); }
.mk-how-dot-warn { background: var(--key); }
.mk-how-when { margin-left: auto; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.mk-how-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3) var(--space-6); margin-top: var(--space-10); }
.mk-how-link { font-weight: var(--weight-semibold); }
@media (min-width: 960px) {
  .mk-how { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
  .mk-how-step { display: flex; flex-direction: column; gap: var(--space-4); padding-left: 0; }
  .mk-how-num { position: static; }
  /* Across instead of down: from the number to the next step's number. */
  .mk-how-step:not(:last-child)::after { left: 52px; right: calc(-1 * var(--space-8) + 6px); top: 19px; bottom: auto; border-left: 0; border-top: 2px dashed var(--line-strong); }
  .mk-how-card { flex: 1; }
}
@media (max-width: 599px) {
  .mk-how-cta { justify-content: flex-start; }
}

/* ==== Phones: calmer sections below the first screen ==== */
@media (max-width: 599px) {
  /* Calculator: agent and Leasii side by side, then what you keep across the full width. */
  .mk-calc-result { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-calc-result .mk-calc-save { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  /* Owner checks: one card with three rows instead of three separate cards. */
  .mk-checks { gap: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
  .mk-checks li { border: 0; border-radius: 0; background: none; padding: var(--space-3) var(--space-4); }
  .mk-checks li + li { border-top: 1px solid var(--line); }
  .mk-checks .mk-icon { width: 36px; height: 36px; }
  /* Pricing: the plan people choose comes first; free set-up follows. */
  .mk-plans-split .mk-plan-free { order: 2; }
}

/* ==== Accessibility: shared ==== */

/* A2 (2.4.11): on phones, a link or field the browser scrolls to stays clear of the "Get started free" bar. */
@media (max-width: 599px) {
  html:has(body.mk-has-sticky-cta) { scroll-padding-bottom: var(--space-24); }
}
/* B4 (1.4.10): on a short screen (a phone on its side, or high zoom) the header scrolls away with the page and the call to
   action bar isn't shown (the page has its own Get started links), so they don't fill the screen. */
@media (max-height: 500px) {
  .mk-header { position: static; }
  .mk-sticky-cta:not([hidden]) { display: none; }
  .mk.mk-has-sticky-cta { padding-bottom: 0; }
  html:has(.mk-header) { scroll-padding-block: 0; }
  .mk .legal-doc [id] { scroll-margin-top: 0; }
}

/* ==== Consistency: shell ==== */
/* CON-B5: the legal pages, Accessibility, the versions lists and the website's error pages read like About: the green
   eyebrow, the display title (.mk-page-title) and section heads at the display weight, in one centred 68ch column. */
/* R9-J14: a document's section headings (legal pages) at the same 22/28 semibold as the help and FAQ articles' h2s. */
.mk .legal-doc h2 { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-xl); line-height: var(--leading-xl); letter-spacing: var(--display-tracking); }
.mk .error-page { max-width: calc(43.5em + 2 * var(--space-4)); margin-inline: auto; padding: var(--space-12) var(--space-4) var(--space-16); }
.mk .error-page .mk-page-title { overflow-wrap: anywhere; }
/* CON-B9: the header's sign-up button doesn't fit beside the logo and Menu on the narrowest phones; there it is the
   last item of the Menu instead (it's in the Menu at every phone width, after "Sign in"). */
@media (max-width: 379px) { .mk-header-signup { display: none; } }

/* ==== Tiles: one height ==== */
/* Feature, step, plan, offer, check and proof tiles: one height per grid from 600px, so each row reads as an even block. */
:is(.mk-features, .mk-plans, .mk-quotes, .mk-checks, .mk-proof-strip, .mk-calc-result) { align-items: stretch; }
@media (min-width: 600px) {
  :is(.mk-features, .mk-quotes, .mk-checks, .mk-proof-strip, .mk-calc-result) { grid-auto-rows: 1fr; }
}
:is(.mk-checks, .mk-proof-strip) > li { height: 100%; }

/* ==== Review fixes: batch 8 content ==== */
/* States strip on phones: "Tell me when my state opens" stands out from the strip (brand soft green, with a bell). */
.mk-waitlist-toggle { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); }
.mk-waitlist-toggle svg { flex: none; }
@media (max-width: 599px) {
  .mk-waitlist-fold > summary.mk-waitlist-toggle { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-strong); font-weight: var(--weight-bold); }
  .mk-waitlist-fold > summary.mk-waitlist-toggle:hover { border-color: var(--brand-strong); background: var(--brand-soft); color: var(--brand-strong); }
}

/* A look inside: swipeable on phones. Each screen is a card that snaps into place; the dots show which one is in view
   and jump to the others (marketing.js). From 600px all three show at once and the dots are hidden. */
.mk-shots-dots { display: none; }
@media (max-width: 599px) {
  .mk-shots {
    position: relative; display: flex; gap: var(--space-8); align-items: stretch; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--space-4); scrollbar-width: none;
    margin-inline: calc(-1 * var(--space-4)); padding: var(--space-2) var(--space-4) var(--space-4);
  }
  .mk-shots::-webkit-scrollbar { display: none; }
  .mk-shots:focus-visible { outline: 2px solid var(--brand); outline-offset: calc(-1 * var(--space-1)); }
  /* Exactly one card in view: each is the full content column, and the gap is wider than the side padding, so no
     neighbour peeks in (final batch content-2). */
  .mk-shot { flex: 0 0 100%; min-width: 0; align-items: center; justify-content: flex-start; scroll-snap-align: center; scroll-snap-stop: always; }
  /* The caption names each card above it, so the names line up across the row whatever each screen's height. */
  .mk-shot figcaption { order: -1; align-self: stretch; font-weight: var(--weight-semibold); color: var(--ink); text-align: center; }
  .mk-shots-dots:not([hidden]) { display: flex; justify-content: center; gap: var(--space-1); }
  .mk-shots-dots button { display: grid; place-items: center; width: var(--space-6); height: var(--space-6); padding: 0; border: 0; border-radius: var(--radius-pill); background: none; cursor: pointer; }
  .mk-shots-dots button::before { content: ""; width: var(--space-2); height: var(--space-2); border-radius: var(--radius-pill); background: var(--line-strong); transition: width var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard); }
  .mk-shots-dots button[aria-current="true"]::before { width: var(--space-5); background: var(--brand); }
  .mk-shots-dots button:focus-visible { outline: 2px solid var(--brand); outline-offset: 0; }
}
@media (max-width: 599px) and (prefers-reduced-motion: reduce) {
  .mk-shots-dots button::before { transition: none; }
}

/* ==== Review fixes: batch 6 public ==== */
/* R8-A18: one call to action at a time on phones. While the sticky sign-up bar is showing (marketing.js sets
   mk-has-sticky-cta), the header's sign-up button steps aside; it comes back when the bar hides. */
@media (max-width: 599px) {
  .mk-has-sticky-cta .mk-header-signup { display: none; }
}
/* R8-A22: the featured plan's saving, under its price. */
.mk-price-saving { flex-basis: 100%; font-size: var(--text-md); line-height: var(--leading-md); font-weight: var(--weight-semibold); color: var(--brand-strong); }
/* R8-A16: the FAQ in groups, with a row of links to each group. */
.mk-faq-group-title { margin: 0 0 var(--space-2); font-size: var(--text-xl); line-height: var(--leading-xl); }
.mk-faq-jump ul { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; align-items: center; }
.mk-faq-group, .mk-faq details { scroll-margin-top: var(--space-24); }

/* ==== Review fixes: final batch content-2 ==== */
/* A look inside on phones (up to 599px): exactly one screen in view, each a phone screen in the same frame and height.
   The dashboard and ledger have phone layouts (mk-phone-only) beside their desktop windows (mk-wide-only); from 600px the
   desktop windows and the inspection phone show as before. */
.mk-phone-only { display: none; }
@media (max-width: 599px) {
  .mk-wide-only { display: none; }
  .mk-phone-only { display: block; }
  /* One frame for all three: a phone that fits the viewport, never taller than 560px. Its screen clips like a real one. */
  .mk-shot .mk-mock-phone {
    display: flex; flex-direction: column; width: min(100%, 272px); max-width: none;
    height: clamp(460px, 70vh, 560px); box-shadow: var(--shadow-raised);
  }
  .mk-shot .mk-phone-screen { flex: 1; min-height: 0; overflow: hidden; gap: var(--space-1-5); padding: var(--space-2) var(--space-3) var(--space-3); }
  .mk-shot .mk-phone-screen > * { flex-shrink: 0; }
  /* What gives way in the phone frame: long lists clip, and an item the illustration can do without (the inspection's
     first, all-fine item) goes, so the flagged item and the next button always show. */
  .mk-shot .mk-phone-rows { flex-shrink: 1; min-height: 0; overflow: hidden; }
  .mk-shot .mk-phone-next, .mk-shot .mk-phone-tabbar { margin-top: auto; }
}
@media (max-width: 599px) {
  .mk-shot .mk-phone-item { gap: var(--space-1); padding: var(--space-2); }
}
@media (max-width: 599px) and (max-height: 760px) {
  .mk-shot .mk-phone-optional { display: none; }
  .mk-shot .mk-photo { aspect-ratio: 16 / 9; }
  .mk-shot .mk-phone-allfine { min-height: var(--space-6); }
}
/* Dashboard and ledger as phone screens: stacked tiles and compact two-line rows, from the same tokens as the app. */
.mk-phone-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1-5); }
.mk-phone-tiles > div { display: flex; flex-direction: column; padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); }
.mk-phone-tiles > div:first-child { grid-column: 1 / -1; }
.mk-phone-tiles span { color: var(--ink-muted); font-size: var(--text-xs); }
.mk-phone-tiles strong { font-family: var(--font-display); font-size: var(--text-lg); }
.mk-phone-rows { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.mk-phone-rows li { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; border-top: 1px solid var(--line); }
.mk-phone-rows li .mk-dot { margin-top: 0; }
.mk-phone-rows li > span:not(.mk-dot) { display: flex; flex: 1; flex-direction: column; min-width: 0; font-weight: var(--weight-semibold); }
.mk-phone-rows small { color: var(--ink-muted); font-size: var(--text-xs); font-weight: var(--weight-regular); }
.mk-phone-rows b { color: var(--brand); font-weight: var(--weight-semibold); white-space: nowrap; }
.mk-phone-ledger b { color: var(--ink); font-variant-numeric: tabular-nums; }
.mk-phone-ledger b.text-good { color: var(--good); }
.mk-phone-ledger .is-total { border-top: 2px solid var(--line-strong); font-weight: var(--weight-bold); }
.mk-phone-ledger .is-total b { font-weight: var(--weight-bold); }
.mk-phone-tabbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-1); padding-top: var(--space-2); border-top: 1px solid var(--line); color: var(--ink-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-align: center; }
.mk-phone-tabbar .is-current { color: var(--brand-strong); }

/* ==== List spacing ==== */
/* Lists in marketing and legal pages: room between items (see site.css "List spacing"). */
.mk :where(ul, ol):where(:not([class]):not([role])) > li + li { margin-top: var(--space-2); }

/* FAQ: "Copy link to this question" and its confirmation. */
.faq-link-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.faq-link-done { color: var(--brand-strong); font-weight: var(--weight-semibold); }
.faq-link-done:empty { display: none; }
.mk nav :where(ul, ol) > li + li, .mk-faq-jump li + li { margin-top: 0; }

/* FAQ question groups: one row of pills that wraps, each linking to its group. */
.mk-faq-jump a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-4);
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface-raised);
  color: var(--ink); font-size: var(--text-md); line-height: var(--leading-md); font-weight: var(--weight-semibold); text-decoration: none;
}
.mk-faq-jump a:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-strong); }
@media (max-width: 599px) { .mk-faq-jump ul { gap: var(--space-1-5); } .mk-faq-jump a { min-height: 36px; padding: 0 var(--space-3); font-size: var(--text-sm); } }

/* R9-G8: on wide screens the group pills sit in equal columns set by the column's width, not by the text, so the number of
   rows (and where the groups below start) doesn't change when Figtree replaces the fallback font (CLS 0.27 at 1280). */
@media (min-width: 960px) {
  .mk-faq-jump ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
  .mk-faq-jump a { justify-content: center; width: 100%; white-space: nowrap; }
}

/* R9-J14: one page-title style on the website. Every page heading in the website frame (Homes, Help, Verify as well as
   About, FAQ and the legal pages) uses the display weight and the type scale's line heights: 28/34 on phones, 40/44 from
   960px. The landing page's hero keeps its own size. */
:where(.mk-main) h1, .mk-page-title {
  font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-2xl); line-height: var(--leading-2xl);
  letter-spacing: var(--display-tracking);
}
@media (min-width: 960px) { :where(.mk-main) h1, .mk-page-title { font-size: var(--text-3xl); line-height: var(--leading-3xl); } }

/* R9-J17 and R9-G13: header, footer and FAQ links are 44px tap targets on touch screens. */
@media (pointer: coarse) {
  .mk-nav a, .mk-signin, .mk-footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .mk-faq summary { align-items: center; min-height: 44px; }
  /* R9-G13 (round 10): the logo, and the "A look inside" carousel dots, are 44px targets on touch screens too. */
  .mk-logo { display: inline-flex; align-items: center; min-height: 44px; }
  .mk-shots-dots button { width: 44px; height: 44px; }
  /* R9-G13 (round 11): the home page's "See pricing" and "I already have an account" links, the Monthly/Yearly toggle and
     the rent slider are 44px targets on touch screens. */
  .mk-how-link, .mk-final-link { display: inline-flex; align-items: center; min-height: 44px; }
  .mk-billing button { min-height: 44px; }
  .mk-range input[type="range"] { min-height: 44px; }
}