/* Marketing studio (Figma page 04 · Marketing). Page-specific pieces only; tokens come from app.css. */
.mk-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.mk-actions-8 { gap: 8px; }
@media (min-width: 1200px) { .mk-split { grid-template-columns: minmax(0, 712fr) minmax(0, 400fr); } }

/* Text-style action in a card header (same look as .card-header .link, but a real button) */
.mk-link-btn { padding: 0; border: 0; background: none; cursor: pointer; }

/* Launch plan milestones */
.mk-plan, .mk-kit, .mk-ranks { list-style: none; margin: 0; padding: 0; }
.mk-plan { display: flex; flex-direction: column; gap: 14px; }
.mk-milestone { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.mk-milestone > div { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mk-date {
  flex: none; padding: 6px 8px; border-radius: 8px; background: var(--surface-high); color: var(--ink-soft);
  font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .88px; text-transform: uppercase; white-space: nowrap;
}

/* Social kit tiles */
.mk-kit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mk-kit > li { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mk-thumb { display: flex; align-items: center; justify-content: center; height: 120px; border-radius: 10px; background: var(--surface-high); }

.mk-metrics { gap: 28px; }

/* Keyword ranks */
.mk-ranks { display: flex; flex-direction: column; gap: 14px; }
.mk-ranks > li { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mk-down { color: var(--danger); }

.mk-ai { background: var(--surface-raised); }

/* Laptop / Chromebook frame uses 20px between sections */
@media (min-width: 1200px) and (max-width: 1399px) { .content { gap: 20px; } }
/* Tablet keeps the buttons beside the title, vertically centred */
@media (min-width: 768px) and (max-width: 1199px) { .page-header { align-items: center; flex-wrap: nowrap; } }
@media (max-width: 767px) {
  .page-header .h1 { font: 700 20px/28px Manrope, system-ui, sans-serif; letter-spacing: -0.1px; }
  .page-header .titles p { font-size: 13px; line-height: 18px; }
  .page-header .mk-actions { gap: 8px; align-self: flex-start; }
  .stat .value { font-size: 28px; line-height: 36px; }
  .split, .split > .stack { gap: 20px; }
  .mk-kit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-thumb { height: 96px; }
}