/* ============================================================
   VEONA — Marketing kit (rich, reusable page sections)
   Built on tokens.css. Prefix .mk-. Loaded globally by Base.astro
   so every marketing page composes feature-dense layouts that all
   look identical. Use these instead of one-off styles.
   ============================================================ */

/* ---------- Product hero (split: copy + visual) ---------- */
.mk-hero { padding: var(--s-16) 0 var(--s-12); }
.mk-hero .container { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--s-12); align-items: center; }
.mk-hero h1 { font-size: var(--t-h1); margin: var(--s-3) 0; }
.mk-hero .lead { font-size: var(--t-lead); color: var(--ink-500); margin-bottom: var(--s-6); max-width: 36ch; }
.mk-hero .hero-cta { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.mk-hero-meta { display: flex; gap: var(--s-8); margin-top: var(--s-8); flex-wrap: wrap; }
.mk-hero-meta b { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); }
.mk-hero-meta span { font-size: var(--t-sm); color: var(--slate); }
@media (max-width: 900px){ .mk-hero .container { grid-template-columns: 1fr; gap: var(--s-8); } }

/* ---------- App/browser screenshot frame ---------- */
.mk-shot { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-3); background: #fff; }
.mk-shot-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--cloud); border-bottom: 1px solid var(--line); }
.mk-shot-bar .dot { width: 10px; height: 10px; border-radius: 50%; }
.mk-shot-bar .grow { flex: 1; }
.mk-shot-bar .url { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--slate); background: #fff; border: 1px solid var(--line); padding: 4px 10px; border-radius: var(--r-pill); }
.mk-shot-body { padding: var(--s-5); display: grid; gap: var(--s-3); }
.mk-shot-row { display: flex; gap: var(--s-3); }
.mk-tile { flex: 1; border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4); background: #fff; }
.mk-tile .k { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .04em; color: var(--slate); }
.mk-tile .v { font-family: var(--font-display); font-weight: 700; color: var(--ink); margin-top: 2px; }

/* ---------- Stat strip ---------- */
.mk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); }
.mk-stats .s b { display: block; font-family: var(--font-display); font-size: 2rem; color: var(--teal); letter-spacing: -.02em; }
.mk-stats .s span { font-size: var(--t-sm); color: var(--slate); }
@media (max-width: 760px){ .mk-stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Feature rows (alternating copy / visual) ---------- */
.mk-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12); align-items: center; padding: var(--s-10) 0; border-top: 1px solid var(--line-soft); }
.mk-row:first-child { border-top: 0; }
.mk-row.reverse .mk-row-media { order: -1; }
.mk-row h3 { font-size: var(--t-h3); margin-bottom: var(--s-3); }
.mk-row p { color: var(--ink-500); margin-bottom: var(--s-4); }
@media (max-width: 860px){ .mk-row { grid-template-columns: 1fr; gap: var(--s-6); } .mk-row.reverse .mk-row-media { order: 0; } }

/* ---------- Feature card grid ---------- */
.mk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.mk-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.mk-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.mk-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); }
.mk-card .ic { width: 38px; height: 38px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--teal-050); color: var(--teal); margin-bottom: var(--s-3); }
.mk-card h4 { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); margin-bottom: 6px; }
.mk-card p { font-size: var(--t-sm); color: var(--slate); line-height: 1.55; }
@media (max-width: 860px){ .mk-grid, .mk-grid.cols-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .mk-grid, .mk-grid.cols-2, .mk-grid.cols-4 { grid-template-columns: 1fr; } }

/* ---------- Checklist ---------- */
.mk-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-6); }
.mk-list div { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-sm); color: var(--ink-700); }
.mk-list .tick { color: var(--green); flex: none; margin-top: 2px; }
@media (max-width: 640px){ .mk-list { grid-template-columns: 1fr; } }

/* ---------- Workflow steps ---------- */
.mk-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); counter-reset: step; }
.mk-steps .step { position: relative; padding-top: var(--s-8); }
.mk-steps .step::before { counter-increment: step; content: counter(step); position: absolute; top: 0; left: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--teal); color: #fff; font-family: var(--font-display); font-weight: 700; display: grid; place-items: center; }
.mk-steps .step h4 { font-family: var(--font-display); margin-bottom: 4px; }
.mk-steps .step p { font-size: var(--t-sm); color: var(--slate); }
@media (max-width: 760px){ .mk-steps { grid-template-columns: 1fr 1fr; } }

/* ---------- Pillars ---------- */
.mk-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-8); }
.mk-pillars h4 { font-family: var(--font-display); font-size: 1.1rem; margin-bottom: 6px; }
.mk-pillars p { color: var(--slate); font-size: var(--t-sm); }
@media (max-width: 760px){ .mk-pillars { grid-template-columns: 1fr; } }

/* ---------- Quote / testimonial ---------- */
.mk-quote { max-width: 820px; margin: 0 auto; text-align: center; }
.mk-quote p { font-family: var(--font-display); font-size: var(--t-h3); color: var(--ink); line-height: 1.4; }
.mk-quote .who { margin-top: var(--s-4); color: var(--slate); font-size: var(--t-sm); }

/* ---------- FAQ ---------- */
.mk-faq { max-width: 820px; margin: 0 auto; }
.mk-faq details { border-bottom: 1px solid var(--line); padding: var(--s-4) 0; }
.mk-faq summary { font-family: var(--font-display); font-weight: 600; color: var(--ink); cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.mk-faq summary::after { content: "+"; color: var(--teal); font-size: 1.4rem; line-height: 1; }
.mk-faq details[open] summary::after { content: "\2212"; }
.mk-faq p { color: var(--ink-500); margin-top: var(--s-3); }

/* ---------- Related modules ---------- */
.mk-related { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.mk-related a { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 8px 16px; font-size: var(--t-sm); font-weight: 600; color: var(--ink-700); background: #fff; }
.mk-related a:hover { border-color: var(--teal); color: var(--teal); }

/* ---------- Anchor offset (so #anchors clear the sticky nav) ---------- */
:target { scroll-margin-top: 88px; }