/* =================================================================
   Vibha — Cloud Desktop  ·  mockup styles (the 6 in-window UIs)
   ================================================================= */

.mk {
  font-family: var(--font-ui);
  display: flex; flex-direction: column; gap: 11px;
  padding: 16px;
  background: linear-gradient(180deg, #FBF8F2, #F3EEE5);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* shared scaffolding */
.mk-pane {
  background: #fff;
  border: 1px solid var(--border-warm);
  border-radius: 10px;
  padding: 12px;
}
.mk-pane-h {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: 9px;
}
.mk-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.mk-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mk-3070 { grid-template-columns: 30% 1fr; }
.mk-2575 { grid-template-columns: 27% 1fr; }
.mk-7030 { grid-template-columns: 1fr 36%; }
.mk-mono { font-family: var(--font-mono); font-size: 11px; color: var(--ink); margin: 3px 0; }
.mk-dim { color: var(--fg-2); }
.mk-ext {
  font-size: 9.5px; font-weight: 600; color: #3D5230;
  border: 1px solid var(--sage); border-radius: 4px;
  padding: 1px 5px; white-space: nowrap;
}
.mk-caveat {
  font-family: var(--font-script);
  font-size: 19px; font-weight: 600;
  color: var(--ink-blue);
  transform: rotate(-1.2deg);
  margin-top: 2px;
}

/* ---------- 01 Brand Mirror ---------- */
.mk-brand .mk-card { border: 1px solid var(--border-warm); border-radius: 8px; padding: 8px; margin-bottom: 7px; }
.mk-brand .mk-card:last-child { margin-bottom: 0; }
.mk-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.mk-card-name { font-size: 12px; font-weight: 600; color: var(--ink); }
.mk-swatches { display: flex; gap: 0; border-radius: 4px; overflow: hidden; height: 16px; }
.mk-swatches span { flex: 1; }
.mk-tok-circles { display: flex; gap: 7px; margin-bottom: 10px; }
.mk-tok-circles span { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); }
.mk-scale { display: flex; align-items: flex-end; gap: 5px; margin: 9px 0; }
.mk-scale span {
  font-family: var(--font-mono); font-size: 8px; color: var(--fg-2);
  background: #F0ECDF; border-radius: 3px; padding: 4px 5px;
}
.mk-scale span:nth-child(1) { padding-bottom: 4px; }
.mk-scale span:nth-child(4) { padding-bottom: 9px; }
.mk-scale span:nth-child(5) { padding-bottom: 13px; }
.mk-scale span:nth-child(6) { padding-bottom: 17px; }
.mk-preview-page {
  position: relative;
  background: #F3ECE0; border-radius: 8px; padding: 12px;
  height: 100%; min-height: 150px;
}
.mk-badge--warm {
  position: absolute; top: 8px; right: 8px;
  font-size: 8.5px; font-weight: 600; color: #fff;
  background: #8A7A5C; border-radius: 4px; padding: 2px 6px;
}
.mk-pp-h { font-family: var(--font-title); font-size: 24px; font-weight: 600; line-height: 1; color: #5B5043; margin: 16px 0 10px; }
.mk-pp-line { height: 5px; background: #C9C2B0; border-radius: 3px; margin: 5px 0; }
.mk-pp-line.short { width: 60%; }
.mk-pp-btn { display: inline-block; margin-top: 10px; font-size: 11px; color: #5B5043; border: 1px solid #8A7A5C; border-radius: 5px; padding: 4px 9px; }
.mk-prompt {
  display: flex; align-items: center; gap: 10px;
  background: #2D2320; border-radius: 8px; padding: 10px 10px 10px 14px;
}
.mk-prompt code { flex: 1; font-family: var(--font-mono); font-size: 11px; color: #F5E7D6; line-height: 1.4; }
.mk-copy { flex: none; background: var(--apple-yellow); color: #3A2E00; border: 0; border-radius: 6px; font-family: var(--font-ui); font-size: 11px; font-weight: 600; padding: 6px 11px; cursor: pointer; }

/* ---------- 02 Sales OS ---------- */
.mk-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.mk-node { font-size: 11px; font-weight: 600; color: var(--ink); background: #fff; border: 1px solid var(--border-warm); border-radius: 7px; padding: 7px 10px; }
.mk-node.on { border-color: var(--berry); color: var(--berry); box-shadow: 0 0 0 2px rgba(168,23,74,0.1); }
.mk-arrow { color: var(--fg-2); font-size: 13px; }
.mk-row { display: grid; grid-template-columns: 1.3fr 1.2fr auto; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; border-bottom: 1px solid #F0ECE3; }
.mk-row:last-child { border-bottom: 0; }
.mk-row.on { background: rgba(250,184,0,0.15); }
.mk-row-c { font-size: 12px; font-weight: 600; color: var(--ink); }
.mk-row-p { font-size: 11px; color: var(--fg-2); }
.mk-fit { font-size: 10px; font-weight: 700; color: #3D5230; border: 1px solid var(--sage); border-radius: 4px; padding: 2px 6px; }
.mk-bant-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; margin-bottom: 10px; }
.mk-bant { display: flex; flex-direction: column; gap: 3px; }
.mk-bant span { font-size: 9.5px; font-weight: 600; color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.04em; }
.mk-bar { height: 6px; background: #EFEAE0; border-radius: 3px; overflow: hidden; }
.mk-bar i { display: block; height: 100%; background: var(--berry); border-radius: 3px; }
.mk-reasons p { font-size: 11px; color: var(--ink); margin: 2px 0; }
.mk-email { background: #F8F4EC; border-radius: 6px; padding: 8px 10px; margin: 8px 0; }
.mk-email p { font-size: 11px; color: var(--ink); margin: 2px 0; }
.mk-email .fade { color: #B6AC9E; }

/* ---------- 03 Screen Magic ---------- */
.mk-film { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 0 4px; }
.mk-film-scene { display: flex; flex-direction: column; align-items: center; }
.mk-phone { position: relative; width: 78px; height: 138px; border-radius: 15px; background: #2D2320; padding: 6px; box-shadow: 0 8px 18px rgba(45,35,32,0.28); }
.mk-phone-cam { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 22px; height: 4px; border-radius: 3px; background: #0c0a09; z-index: 2; }
.mk-phone-screen { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 10px; font-size: 34px; background: linear-gradient(160deg, #F8EEDF, #E7D4BD); box-shadow: inset 0 0 14px rgba(255,255,255,0.4); }
.mk-hand { font-size: 44px; line-height: 1; margin-top: -22px; filter: drop-shadow(0 5px 7px rgba(45,35,32,0.22)); }
.mk-film-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; width: 100%; }
.mk-film-notes li { display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 11.5px; color: var(--ink); }
.mk-film-notes li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--berry); flex: none; }
.mk-setup-row { grid-template-columns: 0.82fr 1fr; align-items: stretch; }
.mk-result-pane { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mk-result-frame { position: relative; width: 152px; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #221b18; padding: 5px;
  box-shadow: 0 10px 22px rgba(45,35,32,0.3); }
.mk-result-fallback { position: absolute; inset: 5px; border-radius: 13px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; background: linear-gradient(160deg, #F8EEDF, #E7D4BD); }
.mk-rf-emoji { font-size: 34px; }
.mk-rf-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: #9A8C78; }
.mk-result-vid { position: absolute; inset: 5px; object-fit: cover; border-radius: 13px; display: block; background: #000; }
.mk-result-frame.failed .mk-result-vid { display: none; }
.mk-result-cap { font-family: var(--font-script); font-size: 18px; color: var(--fg-2); margin: 10px 0 0; text-align: center; }
.mk-ctrls-wide { grid-template-columns: 1fr 1fr; column-gap: 30px; row-gap: 9px; }
.mk-ctrls { display: grid; gap: 7px; }
.mk-ctrl { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--fg-2); }
.mk-ctrl b { color: var(--ink); font-weight: 600; }
.mk-slider { width: 100px; height: 5px; background: #EFEAE0; border-radius: 3px; position: relative; }
.mk-slider i { position: absolute; top: -3px; width: 11px; height: 11px; border-radius: 50%; background: var(--berry); }
.mk-toggles { display: flex; gap: 5px; }
.mk-toggles b { font-size: 10px; padding: 2px 7px; border-radius: 4px; background: #EFEAE0; color: var(--fg-2); }
.mk-toggles b.on { background: var(--berry); color: #fff; }
.mk-grid10 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.mk-pcard { display: flex; flex-direction: column; gap: 3px; background: #F8F4EC; border: 1px solid var(--border-warm); border-radius: 7px; padding: 8px; }
.mk-pemoji { font-size: 17px; }
.mk-pname { font-size: 11px; font-weight: 600; color: var(--ink); }
.mk-pprompt { font-size: 9px; color: var(--fg-2); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mk-pbadge { font-family: var(--font-mono); font-size: 8.5px; color: var(--fg-2); }
.mk-audio { display: grid; gap: 6px; }
.mk-track { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 9px; }
.mk-tname { font-family: var(--font-mono); font-size: 10px; color: var(--fg-2); }
.mk-tlane { position: relative; height: 12px; background: #F0ECE3; border-radius: 4px; }
.mk-tlane i { position: absolute; top: 2px; height: 8px; border-radius: 3px; opacity: 0.85; }

/* ---------- 04 Sound Sight (dark) ---------- */
.mk-sound { background: #16131F; border-color: #2A2540; }
.mk-sound .mk-pane-h { color: #8E86B8; }
.mk-sound-top { display: flex; align-items: center; gap: 10px; padding: 4px 2px 2px; }
.mk-sdot { width: 16px; height: 16px; border-radius: 5px; background: #2A2540; box-shadow: inset 0 0 0 1px #443C66; }
.mk-sdot.play { background: #E8B23A; }
.mk-playing { margin-left: auto; font-size: 11px; color: #B6AEDC; font-family: var(--font-mono); }
.mk-sound-body { display: grid; grid-template-columns: 90px 1fr; gap: 14px; align-items: center; padding: 10px 0; }
.mk-freq { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; align-items: end; height: 120px; }
.mk-fband { display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; }
.mk-fbar { width: 12px; height: 100%; background: #221E33; border-radius: 5px; display: flex; align-items: flex-end; overflow: hidden; }
.mk-fbar i { display: block; width: 100%; background: linear-gradient(180deg, #E8B23A, #7C5CFF, #2BC0E4); border-radius: 5px; animation: eq 1.1s ease-in-out infinite alternate; }
@keyframes eq { from { height: 22%; } to { height: 92%; } }
.mk-fband span { font-size: 7.5px; font-weight: 700; letter-spacing: 0.03em; color: #6E66A0; }
.mk-canvas { position: relative; height: 150px; display: flex; align-items: center; justify-content: center; }
.mk-ring { position: absolute; border-radius: 50%; border: 2px solid; }
.mk-ring.r1 { width: 140px; height: 140px; border-color: rgba(124,92,255,0.55); animation: spin 9s linear infinite; }
.mk-ring.r2 { width: 100px; height: 100px; border-color: rgba(43,192,228,0.6); border-style: dashed; animation: spin 6s linear infinite reverse; }
.mk-ring.r3 { width: 64px; height: 64px; border-color: rgba(232,178,58,0.7); animation: pulse 2.4s ease-in-out infinite; }
.mk-core { width: 90px; height: 90px; border-radius: 50%; background: conic-gradient(from 0deg, #7C5CFF, #2BC0E4, #E8B23A, #A8174A, #7C5CFF); filter: blur(2px); animation: spin 12s linear infinite, pulse 2.4s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { transform: scale(0.92); opacity: 0.85; } 50% { transform: scale(1.06); opacity: 1; } }
.mk-modes { display: flex; gap: 8px; }
.mk-mode { font-size: 11px; font-weight: 500; color: #8E86B8; padding: 4px 2px; }
.mk-mode.on { color: #F2EFFA; border-bottom: 2px solid var(--apple-yellow); }

/* ---------- 05 Job OS ---------- */
.mk-jrow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 8px; border-radius: 7px; margin-bottom: 3px; }
.mk-jrow.on { background: #1A2B5E; }
.mk-jrow.on .mk-jc { color: #F5F0E8; }
.mk-jrow.on .mk-jr, .mk-jrow.on .mk-jf { color: #C9D2EC; }
.mk-jdot { width: 8px; height: 8px; border-radius: 50%; grid-row: span 2; }
.mk-jc { font-size: 12px; font-weight: 600; color: var(--ink); }
.mk-jr { font-size: 10px; color: var(--fg-2); grid-column: 2; }
.mk-jf { font-size: 11px; font-weight: 700; color: var(--ink); }
.mk-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.mk-stat { font-size: 10.5px; color: var(--fg-2); background: #F4EFE6; border-radius: 5px; padding: 4px 8px; }
.mk-stat b { color: var(--ink); font-weight: 700; }
.mk-jhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.mk-jtitle { font-family: var(--font-title); font-size: 26px; font-weight: 600; color: var(--ink); line-height: 1; }
.mk-jrole { font-size: 12px; color: var(--fg-2); margin-top: 5px; }
.mk-pill { font-size: 10px; border: 1px solid var(--border-warm); border-radius: 5px; padding: 1px 6px; color: var(--ink); }
.mk-ring-fit { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: conic-gradient(var(--apple-yellow) 87%, #EFEAE0 0); flex: none; }
.mk-ring-fit span { width: 42px; height: 42px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--ink); }
.mk-jcols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.mk-jcols h5 { font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-2); margin: 0 0 6px; }
.mk-jcols p { font-size: 11px; color: var(--ink); margin: 2px 0; line-height: 1.35; }
.mk-hook { font-weight: 600; }
.mk-jbtns { display: flex; gap: 9px; margin-bottom: 10px; }
.mk-jbtn { font-family: var(--font-ui); font-size: 12px; font-weight: 600; border-radius: 7px; padding: 8px 14px; border: 1px solid transparent; cursor: pointer; }
.mk-jbtn.primary { background: var(--apple-yellow); color: #3A2E00; }
.mk-jbtn.ghost { background: transparent; border-color: var(--border-warm); color: var(--ink); }

/* ---------- 06 Money Brain ---------- */
.mk-tabs { display: flex; flex-wrap: wrap; gap: 5px; }
.mk-tab { font-size: 11px; font-weight: 500; color: var(--fg-2); padding: 5px 10px; border-radius: 6px; background: #fff; border: 1px solid var(--border-warm); }
.mk-tab.on { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.mk-compare { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.mk-scn { background: #F8F4EC; border-radius: 9px; padding: 14px; text-align: center; }
.mk-scn-h { display: block; font-size: 11px; font-weight: 600; color: var(--fg-2); }
.mk-scn-num { display: block; font-family: var(--font-title); font-size: 30px; font-weight: 600; color: var(--berry); margin: 4px 0; line-height: 1; }
.mk-scn-cap { display: block; font-size: 10px; color: var(--fg-2); }
.mk-vs { font-family: var(--font-title); font-style: italic; font-size: 15px; color: var(--fg-2); }
.mk-verdict { margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--ink); text-align: center; }
.mk-check { color: var(--apple-yellow); }
.mk-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mk-thumb { background: #F8F4EC; border-radius: 8px; padding: 9px; display: flex; flex-direction: column; gap: 5px; }
.mk-thumb > span { font-size: 9.5px; font-weight: 600; color: var(--fg-2); }
.mk-thumb i { font-size: 8.5px; color: var(--fg-2); font-style: normal; }
.mk-pie { width: 34px; height: 34px; border-radius: 50%; background: conic-gradient(#A8174A 0 23%, #C9C2B0 0); }
.mk-sankey { display: flex; align-items: center; gap: 3px; height: 28px; }
.mk-sankey b { flex: 1; background: #6B8856; border-radius: 2px; }
.mk-sankey b:nth-child(1) { height: 90%; } .mk-sankey b:nth-child(2) { height: 55%; background: #FAB800; } .mk-sankey b:nth-child(3) { height: 30%; background: #C97B6B; }
.mk-slabs { display: flex; gap: 5px; height: 28px; align-items: flex-end; }
.mk-slabs b { flex: 1; font-size: 7px; color: #fff; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 2px; border-radius: 3px; }
.mk-slabs b:nth-child(1) { height: 100%; background: #5E6AD2; } .mk-slabs b:nth-child(2) { height: 70%; background: #6B8856; }
.mk-line { width: 100%; height: 30px; }
.mk-line polyline { fill: none; stroke: #6B8856; stroke-width: 2.5; vector-effect: non-scaling-stroke; }

/* ---------- interactive states ---------- */
.mk-row, .mk-jrow, .mk-tab { cursor: pointer; }
.mk-row:hover:not(.on) { background: rgba(0,0,0,0.04); }
.mk-jrow:hover:not(.on) { background: rgba(0,0,0,0.04); }
.mk-tab:hover:not(.on) { border-color: var(--fg-2); }
.mk-money-panel.swap, .feed-list.sorted { animation: mk-swap 0.34s var(--ease); }
@keyframes mk-swap { from { opacity: 0.35; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* sales brief */
.mk-brief-body { min-height: 150px; }
.mk-brief-name { font-family: var(--font-title); font-size: 21px; font-weight: 600; color: var(--ink); margin-bottom: 10px; display: flex; align-items: center; gap: 9px; }
.mk-brief-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.mk-run { background: var(--berry); color: #fff; border: 0; border-radius: 7px; padding: 8px 13px; font-family: var(--font-ui); font-size: 12px; font-weight: 600; cursor: pointer; }
.mk-run:hover { background: #8E0F3E; }

/* job run state */
.mk-runapp.running { opacity: 0.75; }

/* money interactive panels */
.mk-leak, .mk-budget { display: flex; flex-direction: column; gap: 9px; }
.mk-leak-row { display: grid; grid-template-columns: 100px 1fr 42px; align-items: center; gap: 10px; font-size: 13px; color: var(--ink); }
.mk-leak-row .mk-bar i { background: var(--sage); }
.mk-leak-row.flag { color: var(--berry); font-weight: 600; }
.mk-leak-row.flag .mk-bar i { background: var(--berry); }
.mk-leak-row b { text-align: right; font-variant-numeric: tabular-nums; }
.mk-leak-note { font-size: 12.5px; color: var(--berry); margin-top: 4px; }
.mk-budget-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink); }
.mk-budget-row.total { font-weight: 700; border-top: 1px solid var(--border-warm); padding-top: 9px; margin-top: 3px; }
.mk-budget-alloc { display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 10px; font-size: 12px; color: var(--fg-2); }
.mk-tax { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mk-tax-col { background: #F8F4EC; border-radius: 9px; padding: 14px; text-align: center; }
.mk-tax-col.win { outline: 2px solid var(--apple-yellow); }
.mk-tax-h { font-size: 11px; font-weight: 600; color: var(--fg-2); display: block; }
.mk-tax-num { font-family: var(--font-title); font-size: 26px; font-weight: 600; color: var(--berry); display: block; margin: 4px 0; }
.mk-wealth .mk-wline { width: 100%; height: 80px; }
.mk-wline polyline { fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.mk-wline .nom { stroke: #6B8856; } .mk-wline .real { stroke: #C97B6B; stroke-dasharray: 3 3; }
.mk-wealth-legend { display: flex; gap: 16px; align-items: center; font-size: 12px; color: var(--fg-2); margin-top: 8px; }
.mk-wealth-legend i { display: inline-block; width: 14px; height: 3px; vertical-align: middle; margin-right: 4px; }
.mk-wealth-legend i.nom { background: #6B8856; } .mk-wealth-legend i.real { background: #C97B6B; }
.mk-wealth-legend b { margin-left: auto; color: var(--ink); }

/* ---------- Feed Intel (dark extension panel) ---------- */
.blurred { filter: blur(5px); user-select: none; pointer-events: none; }
.feed-head-r { display: flex; align-items: center; gap: 8px; }
.feed-jump { background: rgba(250,184,0,0.18); border: 1px solid rgba(250,184,0,0.6); color: #FAD46A; border-radius: 999px; padding: 6px 13px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: var(--font-ui); white-space: nowrap; animation: feedjump-pulse 2.2s ease-in-out infinite; }
.feed-jump:hover { background: rgba(250,184,0,0.3); }
@keyframes feedjump-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(250,184,0,0); } 50% { box-shadow: 0 0 0 4px rgba(250,184,0,0.2); } }
.mk-feed { background: #0C0913; border-bottom-color: #241B33; padding: 18px; display: block; }
.feed-panel {
  width: 432px; max-width: 100%; margin: 0 auto;
  font-family: var(--font-ui); color: #E7E1F0;
  background: linear-gradient(180deg, #2A1340 0%, #150D24 26%, #0C0913 100%);
  border: 1px solid #2A2140; border-radius: 14px; padding: 16px;
  box-shadow: 0 18px 44px rgba(0,0,0,0.45);
}
.feed-head { display: flex; align-items: center; justify-content: space-between; }
.feed-title { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.feed-bolt { color: #FAB800; }
.feed-arrow { width: 32px; height: 32px; border-radius: 50%; background: #241A36; border: 1px solid #3A2F50; color: #E7E1F0; display: inline-flex; align-items: center; justify-content: center; }
.feed-handle { color: #E879C7; font-weight: 700; margin-top: 12px; }
.feed-sub { color: #9A8FB0; font-size: 12.5px; margin: 3px 0 14px; }
.feed-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fstat { background: #16101F; border: 1px solid #2A2140; border-radius: 12px; padding: 12px 14px; }
.fstat span { display: block; color: #9A8FB0; font-size: 12px; }
.fstat b { font-size: 22px; font-weight: 700; }
.feed-track { color: #8A7FA0; font-size: 12px; margin: 13px 0; }
.feed-divider { height: 1px; background: linear-gradient(90deg, #6E3A9E, #E0573A); margin-bottom: 14px; }
.feed-controls { display: flex; gap: 10px; align-items: flex-end; }
.feed-sort-btn { background: linear-gradient(90deg, #FF6A3D, #E0457E, #8B3D9E); color: #fff; border: 0; border-radius: 999px; padding: 13px 20px; font-weight: 600; font-size: 14px; cursor: pointer; }
.feed-sort-btn:active { transform: translateY(1px); }
.feed-field { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: #9A8FB0; }
.feed-field select { background: #16101F; color: #E7E1F0; border: 1px solid #2A2140; border-radius: 10px; padding: 9px 10px; font-family: var(--font-ui); font-size: 13px; }
.feed-settings { margin-top: 12px; }
.feed-settings-toggle { width: 100%; text-align: left; background: #16101F; border: 1px solid #2A2140; border-radius: 12px; padding: 13px 14px; color: #E7E1F0; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); }
.feed-settings-toggle i { font-style: normal; font-weight: 400; color: #8A7FA0; font-size: 12px; }
.feed-settings-toggle .chev { margin-left: auto; transition: transform 200ms var(--ease); }
.feed-settings-body { display: none; padding: 6px 2px 2px; }
.feed-settings.open .feed-settings-body { display: block; }
.feed-settings.open .chev { transform: rotate(180deg); }
.fs-label { display: block; font-size: 11px; color: #9A8FB0; margin: 12px 0 4px; }
.fs-input { background: #16101F; border: 1px solid #2A2140; border-radius: 8px; padding: 10px; font-size: 12px; color: #CFC6E0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fs-input.mono { font-family: var(--font-mono); }
.fs-check { display: flex; justify-content: space-between; align-items: center; background: #16101F; border: 1px solid #2A2140; border-radius: 8px; padding: 12px; margin-top: 12px; color: #CFC6E0; font-size: 13px; }
.fs-check i { width: 18px; height: 18px; border: 1px solid #4A3F66; border-radius: 4px; }
.fs-btns { display: flex; gap: 8px; margin-top: 12px; }
.fs-btns button { background: #221A33; border: 1px solid #3A2F50; color: #E7E1F0; border-radius: 8px; padding: 9px 13px; font-size: 13px; cursor: pointer; font-family: var(--font-ui); }
.fs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.feed-list { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.reel { background: #120D1B; border: 1px solid #241B33; border-radius: 12px; padding: 12px; }
.reel-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.reel-rank { color: #FF8A3D; font-weight: 700; font-size: 15px; }
.reel-tag { background: #1E1730; color: #9A8FB0; border-radius: 999px; padding: 3px 11px; font-size: 11px; }
.reel-row { display: grid; grid-template-columns: 66px 1fr; gap: 12px; }
.reel-thumb { position: relative; height: 88px; border-radius: 8px; overflow: hidden; }
.reel-thumb-cap { position: absolute; top: 0; left: 0; right: 0; font-size: 7px; color: #fff; padding: 3px 4px; line-height: 1.15; background: rgba(0,0,0,0.35); }
.reel-play { position: absolute; left: 50%; top: 54%; transform: translate(-50%,-50%); color: #fff; font-size: 13px; opacity: 0.9; }
.reel-id { font-weight: 700; font-size: 14px; }
.reel-caption { color: #B8AECF; font-size: 12px; margin: 4px 0 9px; line-height: 1.4; }
.reel-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.reel-chips span { background: #1A1428; color: #B8AECF; border-radius: 999px; padding: 4px 9px; font-size: 11px; }
.reel-watch { margin-top: 11px; background: #3A2A1A; color: #FF9D4D; border: 0; border-radius: 999px; padding: 9px 17px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--font-ui); }

/* ---------- About ---------- */
.about-writeup { padding: 32px 40px 38px; }
.about-bio .wu-text { margin: 0 0 14px; max-width: 60ch; }
.about-born-lead { margin: 2px 0 12px !important; }
.about-born { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 11px; max-width: 60ch; }
.about-born-item { display: flex; gap: 12px; align-items: baseline; font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--ink); }
.about-born-arrow { color: var(--berry); font-weight: 600; flex: none; }
.about-born-note { font-family: var(--font-script); font-size: 18px; color: var(--fg-2); margin-left: 9px; display: inline-block; transform: rotate(-2.5deg); }
.about-signoff { margin: 0 0 12px; }
.about-signoff--lead { font-family: var(--font-title); font-size: 19px; font-style: italic; color: var(--ink); margin-top: 6px; }
.about-signoff--script { font-family: var(--font-script); font-style: normal; font-size: 29px; line-height: 1.1; color: var(--ink); transform: rotate(-1.5deg); transform-origin: left; margin: 8px 0 16px; }
.about-roles { margin: 8px 0 22px; }
.about-links { display: flex; gap: 16px; flex-wrap: wrap; }
.about-link { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--berry); text-decoration: none; }
.about-link:hover { text-decoration: underline; }

/* ---------- Sales step views ---------- */
.mk-sales-body.swap { animation: mk-swap 0.3s var(--ease); }
.mk-frow { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid #F0ECE3; font-size: 13px; }
.mk-frow:last-child { border-bottom: 0; }
.mk-frow span { color: var(--fg-2); }
.mk-frow b { color: var(--ink); font-weight: 600; }
.mk-more { font-size: 12px; color: var(--fg-2); padding: 9px 2px 2px; }
.mk-msg-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.mk-msg-tabs b { font-size: 11px; padding: 4px 11px; border-radius: 6px; background: #EFEAE0; color: var(--fg-2); cursor: pointer; }
.mk-msg-tabs b.on { background: var(--berry); color: #fff; }
.mk-email p strong { color: var(--ink); }
.mk-seq { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.mk-seq-card { background: #F8F4EC; border: 1px solid var(--border-warm); border-radius: 9px; padding: 10px 8px; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.mk-seq-card.on { border-color: var(--berry); box-shadow: 0 0 0 2px rgba(168,23,74,0.1); }
.mk-seq-day { font-family: var(--font-mono); font-size: 10px; color: var(--berry); font-weight: 600; }
.mk-seq-type { font-size: 12px; font-weight: 600; color: var(--ink); }

/* ---------- Sound Sight modes ---------- */
.mk-mode { cursor: pointer; }
.mk-mode:hover:not(.on) { color: #C8C0E8; }
.mk-canvas.swap { animation: mk-swap 0.34s var(--ease); }
.mk-particles { position: absolute; inset: 0; }
.mk-particle { position: absolute; width: 8px; height: 8px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 8px currentColor; animation: mk-pp 1.5s ease-in-out infinite alternate; }
@keyframes mk-pp { from { transform: translate(-50%, -50%) scale(0.5); opacity: 0.45; } to { transform: translate(-50%, -50%) scale(1.35); opacity: 1; } }
.mk-fluid { position: absolute; inset: 0; filter: blur(9px); }
.mk-fluid .fb { position: absolute; width: 72px; height: 72px; border-radius: 50%; mix-blend-mode: screen; animation: mk-fluidmove 6s ease-in-out infinite alternate; }
.mk-fluid .f1 { background: #7C5CFF; left: 34%; top: 42%; }
.mk-fluid .f2 { background: #2BC0E4; left: 56%; top: 56%; animation-delay: -2s; }
.mk-fluid .f3 { background: #E8B23A; left: 50%; top: 34%; animation-delay: -4s; }
@keyframes mk-fluidmove { from { transform: translate(-14px, -10px) scale(0.9); } to { transform: translate(16px, 12px) scale(1.18); } }

/* ---------- Mobile: stack the mockup grids ---------- */
@media (max-width: 640px) {
  .mk { padding: 12px; }
  .mk-2col, .mk-3col, .mk-3070, .mk-2575, .mk-7030 { grid-template-columns: 1fr; }
  .mk-compare { grid-template-columns: 1fr; }
  .mk-tax { grid-template-columns: 1fr; }
  .mk-jcols { grid-template-columns: 1fr; gap: 8px; }
  .mk-grid10 { grid-template-columns: repeat(2, 1fr); }
  .mk-seq { grid-template-columns: repeat(2, 1fr); }
  .feed-panel { width: 100%; padding: 14px; }
  .mk-ctrls-wide { grid-template-columns: 1fr; }
  .feed-controls { flex-wrap: wrap; }
  .mk-track { grid-template-columns: 108px 1fr; }
}

/* =================================================================
   Marketing AI suite — tab switcher + 3 mockups + email gate
   ================================================================= */

/* ---------- suite tab bar ---------- */
.suite-tabbar {
  position: sticky; top: 0; z-index: 6;
  background: linear-gradient(180deg, #FBF8F2 70%, rgba(251,248,242,0.92));
  border-bottom: 1px solid var(--border-warm);
  padding: 13px 16px 12px;
}
.suite-tabs { display: flex; gap: 7px; flex-wrap: wrap; }
.suite-tab {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  color: var(--fg-2);
  background: #fff; border: 1px solid var(--border-warm);
  border-radius: 9px; padding: 8px 14px; cursor: pointer;
  transition: color 200ms var(--ease), border-color 200ms var(--ease), background 200ms var(--ease), box-shadow 200ms var(--ease);
}
.suite-tab:hover { border-color: var(--fg-2); color: var(--ink); }
.suite-tab.on {
  color: #fff; background: var(--berry); border-color: var(--berry);
  box-shadow: 0 4px 12px rgba(168,23,74,0.22);
}
.suite-tab-emoji { font-size: 14px; line-height: 1; filter: saturate(1.05); }
.suite-tab.on .suite-tab-emoji { filter: none; }
.suite-lead {
  font-family: var(--font-script); font-size: 18px; color: var(--ink-blue);
  margin: 9px 2px 0; transform: rotate(-0.6deg);
}
.suite-panel { display: none; }
.suite-panel.on { display: block; }
.suite-panel.enter { animation: suite-fade 0.34s var(--ease) both; }
@keyframes suite-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- shared mini-pieces ---------- */
.gtm-delta, .seo-delta { font-family: var(--font-mono); font-size: 10px; font-weight: 600; }
.gtm-delta.up, .seo-delta.up { color: #3D7A4A; }
.gtm-delta.down, .seo-delta.down { color: #B5462F; }
.seo-delta.flat { color: var(--fg-2); }

/* ---------- 07 GTM Command Center ---------- */
.mk-gtm .gtm-bar { display: flex; align-items: center; justify-content: space-between; }
.gtm-brand { font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 7px; }
.gtm-diamond { color: var(--berry); font-size: 11px; }
.gtm-live { font-family: var(--font-mono); font-size: 10px; color: var(--fg-2); display: inline-flex; align-items: center; gap: 6px; }
.gtm-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 0 rgba(107,136,86,0.5); animation: gtm-pulse 2.2s ease-in-out infinite; }
@keyframes gtm-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(107,136,86,0.45); } 50% { box-shadow: 0 0 0 4px rgba(107,136,86,0); } }
.gtm-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.gtm-kpi { background: #fff; border: 1px solid var(--border-warm); border-radius: 10px; padding: 11px 12px; display: flex; flex-direction: column; gap: 3px; }
.gtm-kpi-l { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-2); }
.gtm-kpi-v { font-family: var(--font-title); font-size: 27px; font-weight: 600; color: var(--ink); line-height: 1; }
.gtm-funnel { display: flex; flex-direction: column; gap: 8px; }
.gtm-frow { display: grid; grid-template-columns: 78px 1fr 34px; align-items: center; gap: 9px; }
.gtm-fstage { font-size: 11px; font-weight: 600; color: var(--fg-2); }
.gtm-fbar { height: 16px; background: #F0ECE3; border-radius: 5px; overflow: hidden; }
.gtm-fbar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--berry), #C9436E); }
.gtm-frow:nth-child(1) .gtm-fbar i { opacity: 1; }
.gtm-frow:nth-child(2) .gtm-fbar i { opacity: 0.86; }
.gtm-frow:nth-child(3) .gtm-fbar i { opacity: 0.72; }
.gtm-frow:nth-child(4) .gtm-fbar i { opacity: 0.58; }
.gtm-frow:nth-child(5) .gtm-fbar i { opacity: 0.44; }
.gtm-fnum { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--ink); text-align: right; }
.gtm-channels { display: flex; flex-direction: column; gap: 10px; }
.gtm-ch { display: grid; grid-template-columns: 9px 74px 1fr 56px; align-items: center; gap: 8px; }
.gtm-ch-dot { width: 9px; height: 9px; border-radius: 50%; }
.gtm-ch-name { font-size: 11.5px; font-weight: 600; color: var(--ink); }
.gtm-ch-bar { height: 7px; background: #F0ECE3; border-radius: 4px; overflow: hidden; }
.gtm-ch-bar i { display: block; height: 100%; border-radius: 4px; }
.gtm-ch-n { font-family: var(--font-mono); font-size: 10px; color: var(--fg-2); text-align: right; }
.gtm-cal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.gtm-cal-day { display: flex; flex-direction: column; gap: 6px; }
.gtm-cal-d { font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-2); }
.gtm-cal-chip { font-size: 10px; font-weight: 600; color: var(--ink); background: color-mix(in srgb, var(--c) 12%, #fff); border-left: 2px solid var(--c); border-radius: 4px; padding: 6px 7px; line-height: 1.2; min-height: 38px; }
.gtm-signals { display: flex; flex-direction: column; gap: 9px; }
.gtm-sig { display: flex; align-items: baseline; gap: 9px; font-size: 11.5px; color: var(--ink); line-height: 1.35; }
.gtm-sig-t b { font-weight: 700; }
.gtm-sig-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; transform: translateY(-1px); }
.gtm-sig-dot.berry { background: var(--berry); } .gtm-sig-dot.sage { background: var(--sage); } .gtm-sig-dot.blue { background: #5E6AD2; }
.gtm-delta.flat { color: var(--fg-2); }
.gtm-sig-ago { margin-left: auto; font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-2); flex: none; }

/* ---- GTM sub-tab nav ---- */
.gtm-nav { position: relative; display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 2px; }
.gtm-navtab {
  position: relative; z-index: 1; cursor: pointer;
  background: #FFFDFA; border: 1px solid var(--border-warm);
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--fg-2);
  padding: 8px 14px; border-radius: var(--r-pill, 999px); line-height: 1;
  box-shadow: 0 1px 1.5px rgba(45,35,32,0.04);
  transition: color 180ms var(--ease), background 180ms var(--ease), border-color 180ms var(--ease), box-shadow 180ms var(--ease), transform 120ms var(--ease);
}
.gtm-navtab:hover:not(.on) { color: var(--ink); border-color: color-mix(in srgb, var(--berry) 38%, var(--border-warm)); box-shadow: 0 2px 7px rgba(168,23,74,0.09); }
.gtm-navtab:active { transform: translateY(1px); }
.gtm-navtab.on { color: #fff; background: var(--berry); border-color: var(--berry); box-shadow: 0 2px 8px rgba(168,23,74,0.22); }
.gtm-nav-ink { display: none; }
.gtm-view { display: none; flex-direction: column; gap: 11px; }
.gtm-view.on { display: flex; }
.gtm-view.swap { animation: mk-swap 0.34s var(--ease); }

/* ---- Dashboard: needs-you-today ---- */
.gtm-todays { display: flex; flex-direction: column; gap: 7px; }
.gtm-today { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 8px; border: 1px solid var(--border-warm); background: #FFFDFA; cursor: pointer; transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease); }
.gtm-today:hover { border-color: color-mix(in srgb, var(--berry) 45%, #fff); box-shadow: 0 2px 8px rgba(168,23,74,0.08); }
.gtm-today-fit { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--berry); background: color-mix(in srgb, var(--berry) 10%, #fff); border-radius: 6px; text-align: center; padding: 5px 0; }
.gtm-today-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gtm-today-t b { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.gtm-today-t span { font-size: 10.5px; color: var(--fg-2); line-height: 1.3; }
.gtm-today-go { font-size: 10.5px; font-weight: 600; color: var(--berry); white-space: nowrap; opacity: 0; transition: opacity 160ms var(--ease); }
.gtm-today:hover .gtm-today-go { opacity: 1; }

/* ---- Competitive intel ---- */
.gtm-comp { grid-template-columns: 0.92fr 1.08fr; }
.gtm-comp-rows { display: flex; flex-direction: column; gap: 4px; }
.gtm-comp-row { display: grid; grid-template-columns: 84px 1fr 34px 34px; align-items: center; gap: 8px; padding: 8px 9px; border-radius: 8px; cursor: pointer; transition: background 160ms var(--ease), box-shadow 160ms var(--ease); }
.gtm-comp-row:hover:not(.on) { background: rgba(0,0,0,0.035); }
.gtm-comp-row.on { background: color-mix(in srgb, var(--berry) 8%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--berry) 32%, #fff); }
.gtm-comp-name { font-size: 12px; font-weight: 600; color: var(--ink); }
.gtm-comp-row.on .gtm-comp-name { color: var(--berry); }
.gtm-comp-bar { height: 7px; background: #F0ECE3; border-radius: 4px; overflow: hidden; }
.gtm-comp-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--berry), #C9436E); }
.gtm-comp-sov { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--ink); text-align: right; }
.gtm-comp-foot { margin-top: 10px; font-size: 10px; color: var(--fg-2); font-style: italic; }
.gtm-comp-detail.swap { animation: mk-swap 0.3s var(--ease); }
.gtm-comp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.gtm-comp-title { font-family: var(--font-title); font-size: 21px; font-weight: 600; color: var(--ink); line-height: 1; }
.gtm-comp-pos { font-size: 11px; color: var(--fg-2); line-height: 1.4; margin-top: 6px; max-width: 90%; }
.gtm-threat { flex: none; font-size: 9.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; border: 1px solid; white-space: nowrap; }
.gtm-threat.berry { color: var(--berry); border-color: var(--berry); }
.gtm-threat.warm { color: #A66318; border-color: #D9A35E; }
.gtm-threat.sage { color: #3D5230; border-color: var(--sage); }
.gtm-moves { display: flex; flex-direction: column; gap: 9px; }
.gtm-move { display: grid; grid-template-columns: 44px 64px 1fr; align-items: baseline; gap: 9px; }
.gtm-move-date { font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-2); }
.gtm-move-type { font-size: 9px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; padding: 2px 0; border-radius: 4px; }
.gtm-move-type.launch { color: var(--berry); background: color-mix(in srgb, var(--berry) 11%, #fff); }
.gtm-move-type.content { color: #3D5230; background: color-mix(in srgb, var(--sage) 16%, #fff); }
.gtm-move-type.pricing { color: #A66318; background: #FBF0DC; }
.gtm-move-type.hiring { color: #46568F; background: #ECEFFA; }
.gtm-move-txt { font-size: 11px; color: var(--ink); line-height: 1.4; }

/* ---- LinkedIn drafts ---- */
.gtm-draft-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.gtm-chip { background: none; border: 1px solid var(--border-warm); border-radius: var(--r-pill, 999px); cursor: pointer; font-family: var(--font-ui); font-size: 11px; font-weight: 600; color: var(--fg-2); padding: 5px 12px; transition: all 160ms var(--ease); }
.gtm-chip:hover:not(.on) { border-color: var(--fg-2); color: var(--ink); }
.gtm-chip.on { color: #fff; background: var(--berry); border-color: var(--berry); }
.gtm-draft-list { display: flex; flex-direction: column; gap: 5px; }
.gtm-draft-row { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 9px; padding: 9px; border-radius: 8px; cursor: pointer; transition: background 160ms var(--ease), box-shadow 160ms var(--ease); }
.gtm-draft-row:hover:not(.on) { background: rgba(0,0,0,0.035); }
.gtm-draft-row.on { background: color-mix(in srgb, var(--berry) 8%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--berry) 32%, #fff); }
.gtm-draft-title { font-size: 12px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gtm-draft-when { font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-2); white-space: nowrap; }
.gtm-draft-status { font-size: 8.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; padding: 3px 0; border-radius: 5px; }
.gtm-draft-status.idea { color: var(--fg-2); background: #EFEAE0; }
.gtm-draft-status.drafting { color: #A66318; background: #FBF0DC; }
.gtm-draft-status.scheduled { color: #46568F; background: #ECEFFA; }
.gtm-draft-status.posted { color: #3D5230; background: color-mix(in srgb, var(--sage) 16%, #fff); }
.gtm-draft-detail.swap { animation: mk-swap 0.3s var(--ease); }
.gtm-draft-dhead { display: flex; align-items: center; justify-content: space-between; }
.gtm-draft-dwhen { font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-2); }
.gtm-draft-hook { font-family: var(--font-title); font-style: italic; font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.3; margin: 11px 0 9px; }
.gtm-draft-body { font-size: 11.5px; color: var(--ink); line-height: 1.5; }
.gtm-draft-body p { margin: 0 0 7px; }
.gtm-draft-body p:last-child { margin-bottom: 0; }
.gtm-draft-meta { display: flex; gap: 16px; margin: 11px 0; padding-top: 10px; border-top: 1px solid #F0ECE3; font-size: 10.5px; color: var(--fg-2); }
.gtm-draft-meta b { font-family: var(--font-mono); color: var(--ink); }
.gtm-send { font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; color: #fff; background: var(--berry); border: 0; border-radius: 7px; padding: 8px 14px; cursor: pointer; transition: background 160ms var(--ease), transform 120ms var(--ease); }
.gtm-send:hover { background: #8E0F3E; }
.gtm-send:active { transform: translateY(1px); }
.gtm-send.done { background: var(--sage); pointer-events: none; }
.gtm-draft-empty { font-size: 11.5px; color: var(--fg-2); font-style: italic; padding: 18px 4px; text-align: center; }

/* ---- Typefully ---- */
.gtm-tf { grid-template-columns: 0.86fr 1.14fr; }
.gtm-tf-connhead { display: flex; align-items: center; gap: 10px; }
.gtm-tf-logo { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(150deg, #46568F, #5E6AD2); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; flex: none; }
.gtm-tf-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.gtm-tf-status-row { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.gtm-tf-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 0 rgba(107,136,86,0.5); animation: gtm-pulse 2.2s ease-in-out infinite; }
.gtm-tf-status { font-family: var(--font-mono); font-size: 10px; color: #3D5230; }
.gtm-tf-conn.off .gtm-tf-dot { background: #C0594A; animation: none; }
.gtm-tf-conn.off .gtm-tf-status { color: #B5462F; }
.gtm-tf-btn { width: 100%; margin-top: 12px; font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; color: var(--ink); background: none; border: 1px solid var(--border-warm); border-radius: 7px; padding: 8px 0; cursor: pointer; transition: all 160ms var(--ease); }
.gtm-tf-btn:hover { border-color: var(--fg-2); }
.gtm-tf-conn.off .gtm-tf-btn { color: #fff; background: var(--berry); border-color: var(--berry); }
.gtm-tf-conn.off .gtm-tf-btn:hover { background: #8E0F3E; }
.gtm-tf-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 13px 0; }
.gtm-tf-stat { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border: 1px solid var(--border-warm); border-radius: 8px; background: #FFFDFA; }
.gtm-tf-stat span { font-size: 9px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--fg-2); }
.gtm-tf-stat b { font-family: var(--font-title); font-size: 19px; font-weight: 600; color: var(--ink); line-height: 1; }
.gtm-tf-conn.off .gtm-tf-stats { opacity: 0.4; }
.gtm-tf-sync { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; font-family: var(--font-ui); font-size: 11px; font-weight: 600; color: var(--fg-2); background: #F4F0E8; border: 0; border-radius: 7px; padding: 8px 0; cursor: pointer; transition: background 160ms var(--ease); }
.gtm-tf-sync:hover { background: #ECE7DC; }
.gtm-tf-sync-ic { font-size: 13px; line-height: 1; display: inline-block; }
.gtm-tf-sync.spinning .gtm-tf-sync-ic { animation: gtm-spin 0.8s linear infinite; }
@keyframes gtm-spin { to { transform: rotate(360deg); } }
.gtm-q { display: flex; flex-direction: column; gap: 5px; }
.gtm-q-row { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 7px; border-bottom: 1px solid #F0ECE3; }
.gtm-q-time { font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--berry); }
.gtm-q-post { font-size: 11.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gtm-q-tag { font-size: 8.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 7px; border-radius: 5px; }
.gtm-q-tag.ready { color: #3D5230; background: color-mix(in srgb, var(--sage) 16%, #fff); }
.gtm-q-tag.draft { color: #A66318; background: #FBF0DC; }

/* ---- SEO pulse ---- */
.gtm-seo-toggle { display: inline-flex; gap: 0; background: #EFEAE0; border-radius: 8px; padding: 3px; align-self: flex-start; }
.gtm-seo-toggle button { font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; color: var(--fg-2); background: none; border: 0; border-radius: 6px; padding: 6px 14px; cursor: pointer; transition: all 160ms var(--ease); }
.gtm-seo-toggle button.on { color: var(--berry); background: #fff; box-shadow: 0 1px 3px rgba(45,35,32,0.08); }
.gtm-seo-pane { display: none; }
.gtm-seo-pane.on { display: block; }
.gtm-seo-pane.swap { animation: mk-swap 0.34s var(--ease); }
.gtm-seo-qs { display: flex; flex-direction: column; gap: 2px; }
.gtm-seo-q { display: grid; grid-template-columns: 1fr 34px 34px; align-items: center; gap: 9px; padding: 8px 4px; border-bottom: 1px solid #F0ECE3; }
.gtm-seo-q:last-child { border-bottom: 0; }
.gtm-seo-q-text { font-size: 11.5px; color: var(--ink); }
.gtm-seo-q-pos { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--ink); text-align: right; }
.gtm-seo-engs { display: flex; flex-direction: column; gap: 11px; }
.gtm-seo-eng { display: grid; grid-template-columns: 9px 74px 1fr 30px; align-items: center; gap: 9px; }
.gtm-seo-eng-dot { width: 9px; height: 9px; border-radius: 50%; }
.gtm-seo-eng-n { font-size: 11.5px; font-weight: 600; color: var(--ink); }
.gtm-seo-eng-bar { height: 7px; background: #F0ECE3; border-radius: 4px; overflow: hidden; }
.gtm-seo-eng-bar i { display: block; height: 100%; border-radius: 4px; }
.gtm-seo-eng-c { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--ink); text-align: right; }
.gtm-seo-note { font-size: 10.5px; color: var(--fg-2); font-style: italic; }
.gtm-seo-note b { color: var(--berry); font-style: normal; font-weight: 600; }

@media (max-width: 640px) {
  .gtm-comp, .gtm-tf, .gtm-mid, .gtm-bot { grid-template-columns: 1fr; }
  .gtm-navtab { font-size: 11.5px; padding: 6px 9px 10px; }
}

/* ---------- 08 Remotion Studio ---------- */
.mk-remotion .rm-editor { display: grid; grid-template-columns: 0.8fr 1.5fr 1.2fr; gap: 10px; }
.rm-side, .rm-code { background: #fff; border: 1px solid var(--border-warm); border-radius: 10px; padding: 12px; }
.rm-comps { display: flex; flex-direction: column; gap: 5px; }
.rm-comp { display: grid; grid-template-columns: 12px 1fr; align-items: center; gap: 7px; padding: 7px 8px; border-radius: 7px; cursor: pointer; transition: background 160ms var(--ease); }
.rm-comp:hover:not(.on) { background: rgba(0,0,0,0.04); }
.rm-comp.on { background: color-mix(in srgb, var(--berry) 9%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--berry) 35%, #fff); }
.rm-comp-play { font-size: 9px; color: var(--fg-2); }
.rm-comp.on .rm-comp-play { color: var(--berry); }
.rm-comp-name { font-size: 11.5px; font-weight: 600; color: var(--ink); }
.rm-comp.on .rm-comp-name { color: var(--berry); }
.rm-comp-dim { grid-column: 2; font-family: var(--font-mono); font-size: 8.5px; color: var(--fg-2); }
.rm-stage { display: flex; flex-direction: column; gap: 8px; }
.rm-canvas { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #100a16; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(45,35,32,0.28); }
.rm-frame { position: relative; height: 100%; max-width: 100%; aspect-ratio: var(--ar, 16 / 9); border-radius: 10px; overflow: hidden; background: #160F1E; box-shadow: 0 6px 18px rgba(0,0,0,0.34); transition: aspect-ratio 360ms var(--ease); }

/* scenes */
.rm-scene { position: absolute; inset: 0; display: none; }
.rm-scene.on { display: block; }
.rm-scene .ra { opacity: 0; will-change: transform, opacity; }
.rm-bg { position: absolute; inset: 0; }
.rm-bg-hero { background: radial-gradient(120% 120% at 30% 18%, #3A2B40, #160F1E 70%); }
.rm-bg-feat { background: linear-gradient(150deg, #241B30, #15101F); }
.rm-bg-test { background: radial-gradient(120% 120% at 50% 22%, #3A2533, #15101C 72%); }
.rm-bg-reel { background: linear-gradient(165deg, #4A1330, #160C18); }
.rm-bg-outro { background: radial-gradient(130% 130% at 50% 42%, #2A2140, #120C1A 72%); }
.rm-glow { position: absolute; width: 120%; height: 62%; top: -8%; left: -10%; background: radial-gradient(circle, rgba(168,23,74,0.45), transparent 60%); filter: blur(10px); }
.rm-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 6%; }

/* hero scene */
.rm-product { width: 52px; height: 52px; border-radius: 13px; background: linear-gradient(150deg, #F5E7D6, #E7B7C6); display: flex; align-items: center; justify-content: center; font-size: 25px; color: #7A2D48; box-shadow: 0 8px 18px rgba(0,0,0,0.32); }
.rm-title { font-family: var(--font-title); font-size: 23px; font-weight: 600; color: #FBF3EA; line-height: 1; }
.rm-title b { color: var(--pink); font-weight: 700; }
.rm-sub { font-family: var(--font-script); font-size: 15px; color: rgba(251,243,234,0.82); }

/* feature scene */
.rm-feat { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 9px; padding: 8% 9%; justify-content: center; }
.rm-feat-h { font-family: var(--font-title); font-size: 17px; font-weight: 600; color: #FBF3EA; }
.rm-feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rm-feat-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 9px; padding: 9px 10px; display: flex; flex-direction: column; gap: 6px; }
.rm-feat-ic { font-size: 15px; color: var(--pink); }
.rm-feat-card i { display: block; height: 4px; border-radius: 2px; background: rgba(251,243,234,0.5); }
.rm-feat-card i.s { width: 60%; background: rgba(251,243,234,0.26); }

/* testimonial scene */
.rm-test { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; padding: 11%; text-align: center; }
.rm-test-stars { display: flex; gap: 4px; color: var(--apple-yellow); font-size: 16px; }
.rm-test-stars span { display: inline-block; }
.rm-test-quote { font-family: var(--font-title); font-style: italic; font-size: 17px; line-height: 1.32; color: #FBF3EA; max-width: 86%; }
.rm-test-who { display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 11px; color: rgba(251,243,234,0.78); }
.rm-test-av { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(140deg, #E7B7C6, #A8174A); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; }

/* reel scene */
.rm-reel { position: absolute; inset: 0; }
.rm-reel-w { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-title); font-weight: 700; font-size: 32px; letter-spacing: -0.01em; color: #FBF3EA; }
.rm-reel-w.c { font-size: 21px; font-weight: 600; }
.rm-reel-w.c b { color: var(--pink); }
.rm-reel-cap { position: absolute; left: 0; right: 0; bottom: 8%; text-align: center; font-family: var(--font-ui); font-size: 11px; color: rgba(251,243,234,0.7); }

/* outro scene */
.rm-outro-mark { font-size: 32px; color: var(--pink); line-height: 1; }
.rm-outro-word { font-family: var(--font-title); font-size: 24px; font-weight: 600; color: #FBF3EA; line-height: 1; }
.rm-outro-cta { font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: #160F1E; background: var(--pink); padding: 6px 14px; border-radius: 999px; }

.rm-res { position: absolute; bottom: 7px; right: 9px; z-index: 3; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.05em; color: rgba(251,243,234,0.55); }

/* transport */
.rm-playbar { display: flex; align-items: center; gap: 9px; }
.rm-play { width: 24px; height: 24px; border-radius: 50%; background: var(--berry); color: #fff; border: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; line-height: 1; cursor: pointer; flex: none; transition: background 160ms var(--ease); }
.rm-play:hover { background: #8E0F3E; }
.rm-scrub { flex: 1; height: 5px; background: #E7DFD4; border-radius: 3px; position: relative; }
.rm-scrub i { position: absolute; left: 0; top: 0; height: 100%; width: 4%; background: var(--berry); border-radius: 3px; }
.rm-time { font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-2); min-width: 78px; text-align: right; }
.rm-code-body { display: flex; flex-direction: column; gap: 3px; background: #211A2E; border-radius: 8px; padding: 11px 12px; margin-top: 2px; }
.rm-code-line { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.5; color: #C9BEDC; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.rm-code-line:nth-child(1), .rm-code-line:nth-child(6) { color: #E8A6C2; }
.rm-code-line:nth-child(2), .rm-code-line:nth-child(4) { color: #9FD0A8; }
.rm-timeline { position: relative; background: #fff; border: 1px solid var(--border-warm); border-radius: 10px; padding: 10px 12px; }
.rm-tracks { display: flex; flex-direction: column; gap: 6px; }
.rm-track { display: grid; grid-template-columns: 78px 1fr; align-items: center; gap: 10px; }
.rm-track-n { font-family: var(--font-mono); font-size: 10px; color: var(--fg-2); }
.rm-track-lane { position: relative; height: 13px; background: #F2EEE5; border-radius: 4px; }
.rm-track-lane i { position: absolute; top: 2px; height: 9px; border-radius: 3px; opacity: 0.9; transition: left 360ms var(--ease), width 360ms var(--ease); }
.rm-playhead { position: absolute; top: 8px; bottom: 8px; left: 8%; width: 2px; background: var(--berry); }
.rm-playhead::before { content: ''; position: absolute; top: -3px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--berry); }

/* ---------- 09 SEO + GEO Tracker ---------- */
.seo-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.seo-kpi { background: #fff; border: 1px solid var(--border-warm); border-radius: 10px; padding: 11px 12px; display: flex; flex-direction: column; gap: 3px; }
.seo-kpi-l { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-2); }
.seo-kpi-v { font-family: var(--font-title); font-size: 27px; font-weight: 600; color: var(--ink); line-height: 1; }
.seo-queries { display: flex; flex-direction: column; gap: 2px; }
.seo-q { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid #F0ECE3; }
.seo-q:last-child { border-bottom: 0; }
.seo-q-text { font-size: 12px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seo-q-pos { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--ink); }
.seo-engines { display: flex; flex-direction: column; gap: 11px; }
.seo-eng { display: grid; grid-template-columns: 9px 78px 1fr 22px; align-items: center; gap: 9px; }
.seo-eng-dot { width: 9px; height: 9px; border-radius: 50%; }
.seo-eng-n { font-size: 12px; font-weight: 600; color: var(--ink); }
.seo-eng-bar { height: 8px; background: #F0ECE3; border-radius: 4px; overflow: hidden; }
.seo-eng-bar i { display: block; height: 100%; border-radius: 4px; }
.seo-eng-c { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--ink); text-align: right; }
.seo-trend-pane { display: flex; flex-direction: column; gap: 8px; }
.seo-trend-head { display: flex; align-items: center; justify-content: space-between; }
.seo-legend { display: flex; gap: 14px; font-size: 10.5px; color: var(--fg-2); }
.seo-legend span { display: inline-flex; align-items: center; gap: 5px; }
.seo-legend i { width: 13px; height: 3px; border-radius: 2px; }
.seo-legend i.g { background: var(--sage); } .seo-legend i.a { background: var(--berry); }
.seo-chart { position: relative; width: 100%; height: 128px; margin-top: 2px; }
.seo-trend { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.seo-grid { stroke: #EFEAE0; stroke-width: 1; vector-effect: non-scaling-stroke; }
.seo-trend polyline { fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.seo-trend .g { stroke: var(--sage); }
.seo-trend .a { stroke: var(--berry); }
.seo-area { stroke: none; }
.seo-area.g { fill: url(#seoFillG); }
.seo-area.a { fill: url(#seoFillA); }
.seo-dot { position: absolute; right: 2px; width: 9px; height: 9px; border-radius: 50%; transform: translateY(-50%); box-shadow: 0 0 0 3px #fff; opacity: 0; transition: opacity 260ms var(--ease); }
.seo-dot.g { background: var(--sage); } .seo-dot.a { background: var(--berry); }
.seo-end { position: absolute; right: 16px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; line-height: 1; padding: 2px 5px; border-radius: 5px; background: #fff; box-shadow: 0 1px 3px rgba(45,35,32,0.08); transform: translateY(-50%); white-space: nowrap; opacity: 0; transition: opacity 260ms var(--ease); }
.seo-end.g { color: #3D5230; } .seo-end.a { color: var(--berry); }
.seo-chart.shown .seo-dot, .seo-chart.shown .seo-end { opacity: 1; }
.seo-weeks { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 9px; color: var(--fg-2); letter-spacing: 0.04em; margin-top: 2px; }

/* ---------- email-capture gate ---------- */
.gate-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(45,35,32,0.42);
  opacity: 0; visibility: hidden;
  transition: opacity 240ms var(--ease), visibility 240ms var(--ease);
}
.gate-overlay.show { opacity: 1; visibility: visible; }
.gate-card {
  position: relative; width: 420px; max-width: 100%;
  background: #fff; border: 1px solid var(--border-warm); border-radius: 16px;
  padding: 30px 30px 24px;
  box-shadow: 0 24px 60px rgba(45,35,32,0.28);
  transform: translateY(10px) scale(0.98);
  transition: transform 280ms var(--ease);
  font-family: var(--font-ui);
}
.gate-overlay.show .gate-card { transform: none; }
.gate-x { position: absolute; top: 14px; right: 16px; width: 28px; height: 28px; border: 0; background: transparent; color: var(--fg-2); font-size: 22px; line-height: 1; cursor: pointer; border-radius: 7px; }
.gate-x:hover { background: rgba(45,35,32,0.06); color: var(--ink); }
.gate-eyebrow { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--berry); margin: 0 0 8px; }
.gate-title { font-family: var(--font-title); font-size: 28px; font-weight: 600; color: var(--ink); margin: 0; line-height: 1.05; }
.gate-guide, .gate-guide-2 { color: var(--berry); }
.gate-divider { width: 48px; height: 3px; background: var(--berry); border: 0; margin: 14px 0 16px; }
.gate-sub { font-family: var(--font-body); font-size: 14.5px; line-height: 1.5; color: var(--ink); margin: 0 0 18px; }
.gate-form { display: flex; flex-direction: column; gap: 10px; }
.gate-email {
  height: 46px; border: 1px solid var(--border-warm); border-radius: 9px;
  padding: 0 14px; font-family: var(--font-ui); font-size: 15px; color: var(--ink);
  background: #FBF8F2; outline: none; transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
  user-select: text;
}
.gate-email:focus { border-color: var(--berry); box-shadow: 0 0 0 3px rgba(168,23,74,0.12); background: #fff; }
.gate-email.err { border-color: #B5462F; box-shadow: 0 0 0 3px rgba(181,70,47,0.12); }
.gate-submit { width: 100%; justify-content: center; height: 46px; }
.gate-fine { font-family: var(--font-body); font-size: 12px; color: var(--fg-2); margin: 12px 0 0; text-align: center; }
.gate-success-view { display: none; text-align: center; padding: 6px 0 2px; }
.gate-overlay.sent .gate-form-view { display: none; }
.gate-overlay.sent .gate-success-view { display: block; }
.gate-check { width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, var(--sage) 16%, #fff); color: var(--sage); display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 4px auto 16px; }
.gate-success-view .gate-title { margin-bottom: 12px; }
.gate-spark { color: var(--apple-yellow); }
.gate-success-view .gate-sub { margin-bottom: 20px; }
.gate-done { margin: 0 auto; }

/* ---------- suite + mockups responsive ---------- */
@media (prefers-reduced-motion: reduce) {
  .gtm-live i, .rm-glow, .rm-product, .rm-scrub i, .rm-playhead, .suite-panel.enter { animation: none !important; }
}
@media (max-width: 640px) {
  .suite-tabbar { padding: 11px 12px; }
  .suite-tab { font-size: 12px; padding: 7px 11px; }
  .gtm-kpis, .seo-kpis { grid-template-columns: repeat(2, 1fr); }
  .mk-remotion .rm-editor { grid-template-columns: 1fr; }
  .rm-canvas { aspect-ratio: 16 / 10; }
  .gtm-cal { grid-template-columns: repeat(2, 1fr); }
  .gate-card { padding: 24px 20px 20px; }
  .gate-title { font-size: 24px; }
}