/* Landing page (hub/public/index.html). Every rule is scoped to
   body.marketing, so the other pages that load site.css are not affected.
   Colours, type and spacing come from /assets/tokens.css. The product mock-ups
   are plain HTML and CSS (captioned "Sample data"). No gradients, glow,
   glass effects or emoji; one accent colour. */

.marketing { background: var(--c-surface); }
.marketing [id] { scroll-margin-top: calc(var(--site-header-h) + var(--sp-4)); }

/* ── Shared section type ──────────────────────────────────────────────── */
.marketing .mk-section { padding: var(--sp-24) 0; }
.marketing .mk-section-head { max-width: 760px; }
.marketing .mk-eyebrow {
  margin: 0 0 var(--sp-3);
  color: var(--c-brand-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}
.marketing .mk-h2 {
  margin: 0;
  color: var(--c-text);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.marketing .mk-lead { max-width: 62ch; margin: var(--sp-4) 0 0; color: var(--c-text-2); font-size: var(--fs-xl); }
.marketing .mk-num { text-align: right; font-variant-numeric: tabular-nums; }
.marketing .mk-caption { margin: var(--sp-3) 0 0; color: var(--c-text-2); font-size: var(--fs-sm); }
@media (min-width: 1024px) {
  .marketing .mk-h2 { font-size: var(--fs-5xl); }
}
@media (max-width: 767px) {
  .marketing .mk-section { padding: var(--sp-16) 0; }
  .marketing .mk-lead { font-size: var(--fs-lg); }
}
@media (max-width: 480px) {
  .marketing .mk-h2 { font-size: var(--fs-3xl); }
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.marketing .mk-hero { padding: var(--sp-20) 0 var(--sp-12); }
.marketing .mk-hero-copy { max-width: 840px; }
.marketing .mk-hero-title {
  margin: 0;
  color: var(--c-text);
  font-size: var(--fs-5xl);
  font-weight: var(--fw-bold);
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.marketing .mk-hero-lead { max-width: 64ch; margin: var(--sp-6) 0 0; color: var(--c-text-2); font-size: var(--fs-xl); }
.marketing .mk-hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }
.marketing .mk-assurance {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  margin-top: var(--sp-6);
  color: var(--c-text-2);
  font-size: var(--fs-md);
}
@media (min-width: 768px) {
  .marketing .mk-hero-title { font-size: var(--fs-6xl); }
}
@media (min-width: 1200px) {
  .marketing .mk-hero-title { font-size: var(--fs-7xl); }
  .marketing .mk-hero-lead { font-size: var(--fs-2xl); }
}
@media (max-width: 767px) {
  .marketing .mk-hero { padding: var(--sp-12) 0 var(--sp-10); }
  .marketing .mk-hero-lead { font-size: var(--fs-lg); }
}
@media (max-width: 480px) {
  .marketing .mk-hero-cta .btn { flex: 1 1 100%; }
}

/* ── Product preview (HTML mock of the workspace) ─────────────────────── */
.marketing .mk-preview { position: relative; padding: 0 0 var(--sp-12); }
.marketing .mk-preview::before {
  content: "";
  position: absolute;
  inset: 120px 0 0;
  border-top: 1px solid var(--c-border);
  background: var(--c-canvas);
}
.marketing .mk-preview .wrap { position: relative; }
.marketing .mk-shot { margin: 0; }
.marketing .mk-app {
  overflow: hidden;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  background: var(--c-surface);
  box-shadow: var(--sh-xl);
  color: var(--c-text);
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.marketing .mk-app-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: 52px;
  padding: 0 var(--sp-4);
  border-bottom: 1px solid var(--c-border);
}
.marketing .mk-store { display: inline-flex; flex: none; align-items: center; gap: var(--sp-2); font-weight: var(--fw-semibold); white-space: nowrap; }
.marketing .mk-store-mark { display: block; width: 20px; height: 20px; }
.marketing .mk-store .ic { color: var(--c-text-3); }
.marketing .mk-search {
  display: inline-flex;
  flex: 0 1 280px;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  height: 32px;
  padding: 0 var(--sp-3);
  overflow: hidden;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  color: var(--c-text-3);
  white-space: nowrap;
}
.marketing .mk-connected { margin-left: auto; }
.marketing .mk-app-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); }
.marketing .mk-side {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-4) var(--sp-3);
  border-right: 1px solid var(--c-border);
  background: var(--c-surface-2);
}
.marketing .mk-side-label { margin: var(--sp-3) var(--sp-2) var(--sp-1); color: var(--c-text-3); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.marketing .mk-side-label:first-child { margin-top: 0; }
.marketing .mk-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px var(--sp-2);
  border-radius: var(--r-sm);
  color: var(--c-text-2);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.marketing .mk-nav .ic { color: var(--c-text-3); }
.marketing .mk-nav.is-active { background: var(--c-brand-soft); color: var(--c-brand-text); }
.marketing .mk-nav.is-active .ic { color: var(--c-brand-text); }
.marketing .mk-nav-bottom { margin-top: auto; }
.marketing .mk-main { min-width: 0; padding: var(--sp-5) var(--sp-6) var(--sp-6); }
.marketing .mk-main-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.marketing .mk-main-title { display: grid; gap: 2px; min-width: 0; }
.marketing .mk-page-title { font-size: var(--fs-xl); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.marketing .mk-page-sub { color: var(--c-text-2); }
.marketing .mk-button {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 32px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--c-brand);
  border-radius: var(--r-sm);
  background: var(--c-brand);
  color: var(--c-on-brand);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.marketing .mk-button-secondary { border-color: var(--c-border-strong); background: var(--c-surface); color: var(--c-text); }
.marketing .mk-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); margin: var(--sp-5) 0; }
.marketing .mk-kpi { display: grid; gap: var(--sp-1); min-width: 0; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--r-md); }
.marketing .mk-kpi-label { overflow: hidden; color: var(--c-text-2); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.marketing .mk-kpi-value { font-size: var(--fs-3xl); font-weight: var(--fw-semibold); line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.marketing .mk-table { width: 100%; border-collapse: collapse; }
.marketing .mk-table th {
  height: 36px;
  padding: 0 var(--sp-3);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface-2);
  color: var(--c-text-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-align: left;
  white-space: nowrap;
}
.marketing .mk-table th.mk-num { text-align: right; }
.marketing .mk-table td {
  height: 52px;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-border);
  vertical-align: middle;
  white-space: nowrap;
}
.marketing .mk-table tbody tr:last-child td { border-bottom: 0; }
/* The product column takes the space that is left and truncates. */
.marketing .mk-table td:first-child { width: 100%; max-width: 0; }
.marketing .mk-product { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.marketing .mk-thumb {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--c-surface-3);
  color: var(--c-text-3);
}
.marketing .mk-product-text { display: grid; min-width: 0; }
.marketing .mk-product-text > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marketing .mk-product-name { font-weight: var(--fw-medium); }
.marketing .mk-product-sku { color: var(--c-text-3); font-family: var(--font-mono); font-size: var(--fs-xs); }
.marketing .mk-was { display: block; color: var(--c-text-3); font-size: var(--fs-xs); text-decoration: line-through; }
@media (max-width: 900px) {
  .marketing .mk-app-body { grid-template-columns: minmax(0, 1fr); }
  .marketing .mk-side { display: none; }
  .marketing .mk-main { padding: var(--sp-4); }
}
@media (max-width: 767px) {
  .marketing .mk-preview::before { inset: 64px 0 0; }
}
@media (max-width: 720px) {
  .marketing .mk-search { display: none; }
  .marketing .mk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marketing .mk-table .mk-c-source, .marketing .mk-table .mk-c-margin { display: none; }
}
/* Phones: the table becomes a list of rows (name, then price and status). */
@media (max-width: 600px) {
  .marketing .mk-table, .marketing .mk-table tbody { display: block; }
  .marketing .mk-table thead, .marketing .mk-table .mk-c-cost { display: none; }
  .marketing .mk-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--c-border);
  }
  .marketing .mk-table tbody tr:last-child { border-bottom: 0; }
  .marketing .mk-table td { display: block; height: auto; padding: 0; border: 0; }
  .marketing .mk-table td:first-child { flex: 1 1 100%; width: auto; max-width: none; min-width: 0; }
  .marketing .mk-table td:last-child { margin-left: auto; }
  .marketing .mk-table td.mk-num { text-align: left; }
  .marketing .mk-was { display: inline; margin-left: var(--sp-2); }
}
@media (max-width: 480px) {
  .marketing .mk-main-head .mk-button { display: none; }
  .marketing .mk-kpi { padding: var(--sp-3); }
  .marketing .mk-kpi-value { font-size: var(--fs-2xl); }
  .marketing .mk-app-bar { padding: 0 var(--sp-3); }
}

/* ── Works with (plain names, not logos) ──────────────────────────────── */
.marketing .mk-works { position: relative; padding: var(--sp-4) 0 var(--sp-16); border-bottom: 1px solid var(--c-border); background: var(--c-canvas); }
.marketing .mk-works-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-12); }
.marketing .mk-works-title { margin: 0; color: var(--c-text-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.marketing .mk-works-list { display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-12); margin: 0; padding: 0; list-style: none; }
.marketing .mk-works-list li { display: grid; gap: 2px; }
.marketing .mk-wordmark { color: var(--c-text-2); font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: 1.1; letter-spacing: -0.02em; }
.marketing .mk-works-role { color: var(--c-text-2); font-size: var(--fs-xs); }
@media (max-width: 560px) {
  .marketing .mk-works-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-6); width: 100%; }
  .marketing .mk-works { padding-bottom: var(--sp-12); }
}

/* ── Workflow: five steps, joined by hairlines ────────────────────────── */
.marketing .mk-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-6);
  margin: var(--sp-12) 0 0;
  padding: 0;
  list-style: none;
}
.marketing .mk-flow-step { position: relative; display: grid; align-content: start; gap: var(--sp-4); }
.marketing .mk-flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 22px;
  right: -12px;
  left: 56px;
  height: 1px;
  background: var(--c-border-strong);
}
.marketing .mk-flow-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--sh-xs);
  color: var(--c-brand-text);
}
.marketing .mk-flow-num { display: block; color: var(--c-text-3); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.marketing .mk-flow-step h3 { margin: 2px 0 var(--sp-2); font-size: var(--fs-xl); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.marketing .mk-flow-step p { margin: 0; color: var(--c-text-2); font-size: var(--fs-md); }
@media (max-width: 1023px) {
  .marketing .mk-flow { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 560px; }
  .marketing .mk-flow-step { grid-template-columns: 44px minmax(0, 1fr); gap: var(--sp-4); padding-bottom: var(--sp-6); }
  .marketing .mk-flow-step:last-child { padding-bottom: 0; }
  .marketing .mk-flow-step:not(:last-child)::after { top: 52px; right: auto; bottom: 8px; left: 22px; width: 1px; height: auto; }
}

/* ── Feature rows (text and a small sample, alternating sides) ────────── */
.marketing .mk-features { display: grid; gap: var(--sp-24); margin-top: var(--sp-24); }
.marketing .mk-feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sp-16); align-items: center; }
.marketing .mk-feature:nth-child(even) .mk-feature-text { order: 2; }
.marketing .mk-feature-text h3 {
  margin: 0;
  color: var(--c-text);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.marketing .mk-feature-text > p:not(.mk-eyebrow) { margin: var(--sp-4) 0 0; color: var(--c-text-2); }
.marketing .mk-feature-text .check-list { margin-top: var(--sp-6); color: var(--c-text); font-size: var(--fs-md); }
.marketing .mk-feature-visual {
  min-width: 0;
  margin: 0;
  padding: var(--sp-8);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  background: var(--c-canvas);
}
.marketing .mk-feature-visual .mk-caption { max-width: 480px; margin: var(--sp-3) auto 0; }
.marketing .mk-vignette {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--sh-lg);
  color: var(--c-text);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
@media (max-width: 900px) {
  .marketing .mk-features { gap: var(--sp-16); margin-top: var(--sp-16); }
  .marketing .mk-feature { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .marketing .mk-feature:nth-child(even) .mk-feature-text { order: 0; }
}
@media (max-width: 480px) {
  .marketing .mk-feature-text h3 { font-size: var(--fs-2xl); }
  .marketing .mk-feature-visual, .marketing .mk-vignette { padding: var(--sp-4); }
}

/* Parts used inside the samples */
.marketing .mk-v-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.marketing .mk-v-title { min-width: 0; overflow: hidden; font-size: var(--fs-md); font-weight: var(--fw-semibold); text-overflow: ellipsis; white-space: nowrap; }
.marketing .mk-v-muted { color: var(--c-text-3); font-weight: var(--fw-regular); white-space: nowrap; }
.marketing .mk-v-label { color: var(--c-text-2); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.marketing .mk-v-source {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-border);
}
.marketing .mk-v-field { display: grid; gap: 6px; margin-bottom: var(--sp-4); }
.marketing .mk-v-field-head { display: flex; justify-content: space-between; gap: var(--sp-3); }
.marketing .mk-v-input { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface); }
.marketing .mk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.marketing .mk-chip {
  padding: 3px var(--sp-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  background: var(--c-surface-2);
  color: var(--c-text-2);
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.marketing .mk-v-checks { display: grid; gap: var(--sp-2); margin: 0; padding: var(--sp-3) 0 0; border-top: 1px solid var(--c-border); list-style: none; }
.marketing .mk-v-checks li { display: flex; align-items: center; gap: var(--sp-2); }
.marketing .mk-v-checks .ic { color: var(--c-success); }
.marketing .mk-v-ok { margin-left: auto; color: var(--c-success); font-weight: var(--fw-semibold); white-space: nowrap; }
.marketing .mk-v-breakdown { display: grid; margin: 0 0 var(--sp-3); }
.marketing .mk-v-breakdown div { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-border); }
.marketing .mk-v-breakdown dt { color: var(--c-text-2); }
.marketing .mk-v-breakdown dd { margin: 0; font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; white-space: nowrap; }
.marketing .mk-v-breakdown .mk-v-total { border-bottom: 0; font-size: var(--fs-lg); }
.marketing .mk-v-breakdown .mk-v-total dt { color: var(--c-text); font-weight: var(--fw-semibold); }
.marketing .mk-v-breakdown .mk-v-total dd { font-weight: var(--fw-bold); }
.marketing .mk-v-alert { display: flex; align-items: flex-start; gap: var(--sp-2); margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); }
.marketing .mk-v-alert .ic { margin-top: 1px; }
.marketing .mk-v-alert b { font-weight: var(--fw-semibold); }
.marketing .mk-v-alert-danger { background: var(--c-danger-soft); }
.marketing .mk-v-alert-danger .ic { color: var(--c-danger); }
.marketing .mk-v-alert-warning { background: var(--c-warning-soft); }
.marketing .mk-v-alert-warning .ic { color: var(--c-warning); }
.marketing .mk-orders { display: grid; margin: 0; padding: 0; list-style: none; }
.marketing .mk-order { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--c-border); }
.marketing .mk-order:first-child { padding-top: 0; border-top: 0; }
.marketing .mk-order:last-child { padding-bottom: 0; }
.marketing .mk-order-text { display: grid; gap: 2px; min-width: 0; }
.marketing .mk-order-id { color: var(--c-text-3); font-family: var(--font-mono); font-size: var(--fs-xs); }
.marketing .mk-order-item { overflow: hidden; font-weight: var(--fw-medium); text-overflow: ellipsis; white-space: nowrap; }
.marketing .mk-order-sub { color: var(--c-text-2); font-size: var(--fs-xs); }
.marketing .mk-msg { padding: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-2); }
.marketing .mk-msg + .mk-msg { margin-top: var(--sp-3); }
.marketing .mk-msg p { margin: var(--sp-1) 0 0; }
.marketing .mk-msg-from { color: var(--c-text-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.marketing .mk-msg-draft { border-color: var(--c-brand); background: var(--c-surface); box-shadow: inset 3px 0 0 var(--c-brand); }
.marketing .mk-msg-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.marketing .mk-msg-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-3); }
.marketing .mk-v-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--c-border); }
.marketing .mk-v-row .ic { color: var(--c-text-2); }
.marketing .mk-v-row .badge { margin-left: auto; }
.marketing .mk-v-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.marketing .mk-v-table th {
  padding: 0 var(--sp-2) var(--sp-2);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-align: left;
}
.marketing .mk-v-table th.mk-num { text-align: right; }
.marketing .mk-v-table td { padding: var(--sp-2); border-bottom: 1px solid var(--c-border); }
.marketing .mk-v-table tbody tr:last-child td { border-bottom: 0; }
.marketing .mk-v-table tr.is-highlight td { border-bottom-color: transparent; background: var(--c-brand-soft); font-weight: var(--fw-semibold); }
.marketing .mk-v-table tr.is-highlight td:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.marketing .mk-v-table tr.is-highlight td:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.marketing .mk-v-note { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0 0; color: var(--c-text-2); font-size: var(--fs-xs); }
.marketing .mk-v-swatch { flex: none; width: 12px; height: 12px; border: 1px solid var(--c-brand); border-radius: 3px; background: var(--c-brand-soft); }
@media (max-width: 420px) {
  .marketing .mk-order { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .marketing .mk-order-item { white-space: normal; }
}

/* ── Safety band on the ink colour ────────────────────────────────────── */
/* The ink colour is the same in both themes, so the text on it uses fixed
   light colours (the dark-theme text and brand values of tokens.css). */
.marketing .mk-safety {
  padding: var(--sp-24) 0;
  border-block: 1px solid rgba(255, 255, 255, .08);
  background: var(--c-ink);
  color: #FFFFFF;
}
.marketing .mk-safety-inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--sp-16); }
.marketing .mk-safety .mk-eyebrow { color: #79B9FF; }
.marketing .mk-safety .mk-h2 { color: #FFFFFF; }
.marketing .mk-safety .mk-lead { color: #AAB4C3; }
.marketing .mk-safety-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-10); margin: 0; padding: 0; list-style: none; }
.marketing .mk-safety-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-6) 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.marketing .mk-safety-list .ic { margin-top: 2px; color: #79B9FF; }
.marketing .mk-safety-list h3 { margin: 0 0 var(--sp-1); color: #FFFFFF; font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.marketing .mk-safety-list p { margin: 0; color: #AAB4C3; font-size: var(--fs-md); }
@media (max-width: 1023px) {
  .marketing .mk-safety-inner { grid-template-columns: minmax(0, 1fr); gap: var(--sp-10); }
}
@media (max-width: 640px) {
  .marketing .mk-safety { padding: var(--sp-16) 0; }
  .marketing .mk-safety-list { grid-template-columns: minmax(0, 1fr); }
}

/* ── Pricing ──────────────────────────────────────────────────────────── */
.marketing .mk-pricing-section { border-bottom: 1px solid var(--c-border); background: var(--c-canvas); }
.marketing .mk-plans { margin-top: var(--sp-12); }
.marketing .mk-plans .plan-card { padding: var(--sp-8); }
.marketing .mk-includes {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--sp-8) var(--sp-12);
  margin-top: var(--sp-4);
  padding: var(--sp-8);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.marketing .mk-includes-head h3 { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.marketing .mk-includes-head p { margin: var(--sp-3) 0 0; color: var(--c-text-2); font-size: var(--fs-md); }
.marketing .mk-includes-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-8); align-content: start; font-size: var(--fs-md); }
@media (max-width: 900px) {
  .marketing .mk-plans { max-width: none; }
  .marketing .mk-includes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .marketing .mk-includes-list { grid-template-columns: minmax(0, 1fr); }
  .marketing .mk-includes, .marketing .mk-plans .plan-card { padding: var(--sp-6); }
}

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.marketing .mk-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--sp-16); align-items: start; }
.marketing .mk-faq-head { position: sticky; top: calc(var(--site-header-h) + var(--sp-8)); }
.marketing .mk-faq-list { border-top: 1px solid var(--c-border); }
.marketing .mk-faq-item { border-bottom: 1px solid var(--c-border); }
.marketing .mk-faq-item > summary {
  position: relative;
  padding: var(--sp-5) var(--sp-10) var(--sp-5) 0;
  color: var(--c-text);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  list-style: none;
  cursor: pointer;
}
.marketing .mk-faq-item > summary::-webkit-details-marker { display: none; }
.marketing .mk-faq-item > summary:hover { color: var(--c-brand-text); }
/* Plus sign drawn with two bars; the vertical one turns flat when open. */
.marketing .mk-faq-item > summary::before,
.marketing .mk-faq-item > summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--sp-2);
  width: 12px;
  height: 1.5px;
  margin-top: -0.75px;
  border-radius: 1px;
  background: var(--c-text-2);
  transition: transform .2s ease;
}
.marketing .mk-faq-item > summary::after { transform: rotate(90deg); }
.marketing .mk-faq-item[open] > summary::after { transform: rotate(0deg); }
.marketing .mk-faq-answer { padding: 0 var(--sp-10) var(--sp-6) 0; color: var(--c-text-2); }
.marketing .mk-faq-answer p { margin: 0; }
@media (max-width: 1023px) {
  .marketing .mk-faq { grid-template-columns: minmax(0, 1fr); gap: var(--sp-10); }
  .marketing .mk-faq-head { position: static; }
}
@media (max-width: 480px) {
  .marketing .mk-faq-answer { padding-right: 0; }
}

/* ── Final call to action ─────────────────────────────────────────────── */
.marketing .mk-cta { padding: 0 0 var(--sp-24); }
.marketing .mk-cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  padding: var(--sp-12);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  background: var(--c-brand-soft);
}
.marketing .mk-cta-copy { max-width: 600px; }
.marketing .mk-cta-copy p { margin: var(--sp-3) 0 0; color: var(--c-text-2); font-size: var(--fs-lg); }
.marketing .mk-cta-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
@media (max-width: 767px) {
  .marketing .mk-cta { padding-bottom: var(--sp-16); }
  .marketing .mk-cta-inner { padding: var(--sp-8) var(--sp-6); }
}
@media (max-width: 480px) {
  .marketing .mk-cta-actions { width: 100%; }
  .marketing .mk-cta-actions .btn { flex: 1 1 100%; }
}

/* ── High contrast ────────────────────────────────────────────────────── */
@media (forced-colors: active) {
  .marketing .mk-faq-item > summary::before,
  .marketing .mk-faq-item > summary::after { forced-color-adjust: none; background: CanvasText; }
  .marketing .mk-app, .marketing .mk-vignette, .marketing .mk-feature-visual { border: 1px solid CanvasText; }
}