/* Keelvy — Marketing layer
   Web pages only: landing, pricing, legal, transactional email.
   NEVER loaded into the app bundle — the app has its own density.
   Link this file alongside styles.css on a marketing page.

   What changes out here, and why:
   · The chroma budget inverts. In the app the accent is ~8% of the field
     because you look at it eight hours a day. A landing page gets forty
     seconds, so blue may be 25–30% of the field and a whole section may
     be a blue plate — on-brand, because the badge already is one.
   · Type goes up (--text-hero / --text-display) and the italic budget
     loosens: the hero plus each section opener, not twice per screen.
   · Density inverts: --space-24/32/40 section rhythm, not 46px rows.
   · Radii go up: --radius-xl / --radius-2xl, unused in the app.

   The one discipline that makes "brighter" safe: the product screenshots
   are the argument. If the page chrome gets louder than the screenshots,
   the screenshots start to look dull and the page defeats itself.
   Bright frame, calm screenshots, let the contrast do the work.
   ------------------------------------------------------------------ */

/* ── Shell ───────────────────────────────────────────────────────── */
.mk { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: var(--text-body-web); line-height: var(--leading-body-web) }
.mk-wrap { max-width: 1120px; margin: 0 auto; padding: 0 40px }
.mk-section { padding: var(--space-24) 0 }
.mk-section--tight { padding: var(--space-16) 0 }
.mk-section--wide { padding: var(--space-32) 0 }

/* A full-bleed accent plate. The single strongest move available, and the
   app never does it — there, blue is never a background. */
.mk-section--accent { background: var(--accent); color: var(--accent-fg) }
.mk-section--accent .mk-eyebrow { color: var(--accent-fg); opacity: .65 }
.mk-section--accent .mk-lead { color: var(--accent-fg); opacity: .85 }
.mk-section--ink { background: var(--ink); color: var(--ivory) }
.mk-section--ink .mk-eyebrow { color: var(--live-bright) }
.mk-section--ink .mk-lead { color: var(--ivory); opacity: .8 }

/* ── Type ────────────────────────────────────────────────────────── */
.mk-eyebrow { font-family: var(--mono); font-size: var(--text-eyebrow-web); font-weight: 500; letter-spacing: var(--tracking-eyebrow-web); text-transform: uppercase; color: var(--accent-text); margin: 0 0 var(--space-4) }
.mk-hero { font-family: var(--display); font-style: italic; font-weight: var(--display-weight); font-size: var(--text-hero); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 var(--space-5); text-wrap: balance }
.mk-display { font-family: var(--display); font-style: italic; font-weight: var(--display-weight); font-size: var(--text-display); line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 var(--space-4); text-wrap: balance }
.mk-lead { font-size: var(--text-lead); line-height: var(--leading-lead); color: var(--ink-2); max-width: 52ch; margin: 0 0 var(--space-6) }
.mk-body { font-size: var(--text-body-web); line-height: var(--leading-body-web); color: var(--ink-2); max-width: 62ch; margin: 0 }
/* Every real number on a marketing page is mono. It is a large part of why
   the product looks precise. */
.mk-num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; color: var(--ink) }

/* ── Actions — taller than the app's 32px, same geometry ─────────── */
.mk-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap }
.mk-btn { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 22px; border-radius: var(--radius); font-family: var(--sans); font-size: 15px; font-weight: 500; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .08s ease-out, box-shadow .08s ease-out, background .12s, border-color .12s }
.mk-btn--primary { background: var(--ink); color: var(--ivory); border-color: var(--ink); box-shadow: var(--stamp-shadow) }
/* The colour must be restated on :hover. `a:hover { color: var(--accent-hover) }`
   in base.css is (0,1,1) and beats `.mk-btn--primary` at (0,1,0), so without
   this the label turns accent-blue on the ink plate and stops being readable. */
.mk-btn--primary:hover, .mk-btn--primary:focus-visible { color: var(--ivory); background: var(--ink); transform: translate(-1px, -1px); box-shadow: var(--stamp-shadow-hover) }
.mk-btn--primary:active { color: var(--ivory); transform: translate(1px, 1px); box-shadow: var(--stamp-shadow-active) }
.mk-btn--ghost { background: transparent; color: var(--ink-2); border-color: var(--hairline-3) }
.mk-btn--ghost:hover, .mk-btn--ghost:focus-visible { color: var(--ink); border-color: var(--ink-3); background: var(--paper-2) }
/* On an accent or ink plate the plate IS the colour, so the CTA inverts. */
.mk-section--accent .mk-btn--primary, .mk-section--ink .mk-btn--primary { background: var(--ivory); color: var(--ink); border-color: var(--ivory); box-shadow: 3px 3px 0 0 rgba(11,11,12,.28) }
.mk-section--accent .mk-btn--primary:hover, .mk-section--ink .mk-btn--primary:hover,
.mk-section--accent .mk-btn--primary:focus-visible, .mk-section--ink .mk-btn--primary:focus-visible { background: var(--ivory); color: var(--ink) }
.mk-section--accent .mk-btn--ghost, .mk-section--ink .mk-btn--ghost { color: var(--ivory); border-color: rgba(244,240,232,.4) }
.mk-section--accent .mk-btn--ghost:hover, .mk-section--ink .mk-btn--ghost:hover,
.mk-section--accent .mk-btn--ghost:focus-visible, .mk-section--ink .mk-btn--ghost:focus-visible { background: rgba(244,240,232,.1); color: var(--ivory); border-color: var(--ivory) }
.mk-note { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); letter-spacing: .01em }

/* ── Screenshot frame — the density is the argument ──────────────
   A real screenshot of dense, real data. Never an abstract illustration. */
.mk-shot { border: 1px solid var(--hairline-3); border-radius: var(--radius-xl); background: var(--paper-2); overflow: hidden; box-shadow: var(--shadow-md) }
.mk-shot--slot { display: grid; place-items: center; min-height: 200px; background: repeating-linear-gradient(45deg, var(--paper-2) 0 6px, var(--paper-3) 6px 12px) }
.mk-shot--slot span { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); text-align: center; line-height: 1.7 }

/* ── Blocks ──────────────────────────────────────────────────────── */
.mk-grid { display: grid; gap: var(--space-6) }
.mk-grid--2 { grid-template-columns: repeat(2, 1fr) }
.mk-grid--3 { grid-template-columns: repeat(3, 1fr) }
.mk-grid--split { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-12) }
.mk-card { background: var(--paper-2); border: 1px solid var(--hairline); border-radius: var(--radius-xl); padding: var(--space-6) }
.mk-card h3 { font-family: var(--sans); font-weight: 600; font-size: 17px; color: var(--ink); margin: 0 0 var(--space-2) }
.mk-card p { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin: 0 }

/* The chain: materials → specification → production order → stock movement
   → cost per product. Keelvy's sharpest differentiator. */
.mk-chain { display: flex; align-items: stretch; gap: 0; border: 1px solid var(--hairline-3); border-radius: var(--radius-lg); overflow: hidden; background: var(--paper-2) }
.mk-chain-step { flex: 1; padding: var(--space-4); border-right: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 5px }
.mk-chain-step:last-child { border-right: none; background: var(--accent-08) }
.mk-chain-step .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3) }
.mk-chain-step .v { font-size: 14px; font-weight: 500; color: var(--ink) }

/* ── Pricing — Business is the visual default ────────────────────── */
.mk-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); align-items: start }
.mk-tier { background: var(--paper-2); border: 1px solid var(--hairline-3); border-radius: var(--radius-xl); padding: var(--space-6) }
.mk-tier--featured { border-color: var(--accent); border-width: 2px; box-shadow: var(--shadow-md); position: relative }
.mk-tier--quiet { background: transparent; border-style: dashed }
.mk-tier-name { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--space-3) }
.mk-tier--featured .mk-tier-name { color: var(--accent-text) }
.mk-tier-price { font-family: var(--mono); font-size: 34px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1; margin-bottom: 4px }
.mk-tier-per { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-bottom: var(--space-4) }
.mk-tier-promise { font-size: 14px; line-height: 1.5; color: var(--ink-2); margin: 0 0 var(--space-4) }
.mk-tier-caps { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hairline); padding-top: var(--space-3) }
.mk-tier-caps li { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; color: var(--ink-2) }
.mk-tier-caps b { color: var(--ink); font-weight: 500 }

/* ── Footer ──────────────────────────────────────────────────────── */
.mk-footer { background: var(--ink); color: var(--ivory); padding: var(--space-12) 0 var(--space-8) }
.mk-footer a { color: rgba(244,240,232,.7); text-decoration: none; font-size: 14px }
.mk-footer a:hover { color: var(--ivory) }

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mk-btn, .mk-btn--primary:hover, .mk-btn--primary:active { transition: none; transform: none }
}

/* ── Responsive — 1440 / 768 / 375. Design for Ukrainian, then check
   English: Ukrainian runs 10–15% longer and breaks anything sized to
   English word lengths. ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .mk-wrap { padding: 0 24px }
  .mk-section { padding: var(--space-16) 0 }
  .mk-grid--3, .mk-grid--2, .mk-grid--split, .mk-tiers { grid-template-columns: 1fr }
  .mk-chain { flex-direction: column }
  .mk-chain-step { border-right: none; border-bottom: 1px solid var(--hairline) }
}