/*
Theme Name:     MakeAI
Theme URI:      https://make-ai.example
Template:       kadence
Author:         Knowhalim
Author URI:     https://knowhalim.example
Description:    "Kopitiam ink on rice paper" — a warm newsprint/workshop-manual child theme for Kadence, built for Make AI: the build library for Southeast Asian back-office work. No gradients (except the two sanctioned textures + chilli glow), no border-radius, hard-offset shadows only.
Version:        1.0.0
License:        GNU General Public License v3.0 (or later)
License URI:    https://www.gnu.org/licenses/gpl-3.0.html
Text Domain:    makeai
*/

/* ============================================================
   MAKE AI — DESIGN SYSTEM
   Source of truth: design.md + homepage.html.
   Rules encoded here (violations are bugs):
   - No border-radius anywhere.
   - Hard-offset shadows only, never blurred.
   - Max 2 background colours per screen: --paper + --ink.
   - --pandan is EVIDENCE ONLY (verified/measured facts) — never decorative.
   - --ember only on ink backgrounds (chilli fails contrast on ink).
   - --chilli = exactly 1 primary action per screen.
   - Body text >= 15px. Content max-width 1240px, gutter 28px.
   - Section rhythm 72-80px. Grid + gap layouts, never margin-spaced siblings.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Colour tokens — copied verbatim from design.md §Color tokens */
  --mk-ink:        #14120E;              /* primary text, inverted sections */
  --mk-ink-fg:     #F1ECE1;              /* text on ink */
  --mk-paper:      #F1ECE1;              /* page background */
  --mk-paper-fg:   #14120E;
  --mk-chilli:     #D33C14;              /* primary accent — 1 action / screen */
  --mk-chilli-hover:#A82E0D;             /* OKLCH-derived darker chilli for hover */
  --mk-chilli-fg:  #FFFFFF;
  --mk-pandan:     #1F5D4C;              /* EVIDENCE ONLY — verified/measured facts */
  --mk-pandan-fg:  #F1ECE1;
  --mk-ember:      #F0793B;              /* accent ON INK only */
  --mk-bone:       #FDFBF6;              /* card/table surface, half-step off paper */
  --mk-white:      #FFFFFF;

  --mk-rule:       rgba(20,18,14,.16);   /* borders */
  --mk-rule-soft:  rgba(20,18,14,.10);
  --mk-ink-60:     rgba(20,18,14,.60);   /* secondary text on paper */
  --mk-ink-45:     rgba(20,18,14,.45);   /* tertiary/meta text on paper */
  --mk-rule-onink: rgba(241,236,225,.20);/* borders on ink */
  --mk-rule-onink-strong: rgba(241,236,225,.35);/* stronger border on ink — inputs (matches homepage.html) */
  --mk-ink-fg-55:  rgba(241,236,225,.55);/* secondary text on ink */
  /* Ink-60 flattened solid, for contexts that can't take an alpha (e.g. Kadence
     option colours). #6C6962 = rgba(20,18,14,.6) composited over paper #F1ECE1.
     Passes AA as 15px text on bone/paper. Named "Ink 60 on paper". */
  --mk-ink-60-solid: #6C6962;
  /* Chilli reads AA on bone (4.59:1) but FAILS on paper (4.03:1). For chilli
     text links / kickers sitting on a PAPER surface, use this sanctioned darker
     derivation (same value as --mk-chilli-hover) so they pass AA. */
  --mk-chilli-on-paper: #A82E0D;

  /* Type stacks */
  --mk-font-sans: Archivo, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mk-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --mk-font-serif: "Instrument Serif", Georgia, serif;

  /* Layout */
  --mk-maxw: 1240px;
  --mk-gutter: 28px;
  --mk-rhythm: 80px;         /* section rhythm 72-80px */
  --mk-rhythm-sm: 72px;

  /* Textures / shadows */
  --mk-shadow: 10px 10px 0 var(--mk-chilli);      /* hard offset, never blurred */
  --mk-shadow-sm: 8px 8px 0 var(--mk-chilli);
  --mk-dotgrid: radial-gradient(rgba(20,18,14,.07) 1px, transparent 1px);
  --mk-glow: radial-gradient(900px 500px at 88% -8%, rgba(211,60,20,.09), transparent 70%);
  --mk-hatch: repeating-linear-gradient(45deg, var(--mk-ink) 0 2px, transparent 2px 9px);
}

/* ---------- 2. GLOBAL RESET / KILL KADENCE ROUNDING & GLOW ---------- */

/* Border-box reset. The child stylesheet must be self-sufficient: the static
   previews load it standalone (no Kadence reset), and on production we must not
   silently depend on Kadence's own box-sizing. Without this, .mk-wrap's
   padding-inline is added ON TOP of its max-width, blowing the content column to
   1296px on desktop and pushing content past a 390px viewport on mobile. */
*, *::before, *::after { box-sizing: border-box; }

/* Page background: dot grid + chilli radial glow (the two sanctioned textures) */
body,
body.wp-singular,
.site {
  background-color: var(--mk-paper);
  color: var(--mk-paper-fg);
  font-family: var(--mk-font-sans);
  -webkit-font-smoothing: antialiased;
}
body {
  background-image: var(--mk-dotgrid), var(--mk-glow);
  background-size: 23px 23px, 100% 100%;
  background-attachment: scroll, scroll;   /* was scroll, fixed — fixed causes iOS repaint jank */
}

/* Squared corners everywhere — kill Kadence border-radius on
   buttons, inputs, cards, images, badges. */
.button,
button,
input,
select,
textarea,
.wp-block-button__link,
.kb-button,
.kt-blocks-info-box-link-wrap,
.entry-content .wp-block-image img,
.kadence-card,
.mk-card,
.mk-btn,
.mk-chip,
.wp-block-search__button,
.widget input {
  border-radius: 0 !important;
}

/* Hard-offset shadows only. Neutralise any blurred Kadence box-shadow. */
.mk-shadow,
.mk-card--shadow {
  box-shadow: var(--mk-shadow);
}

a { color: var(--mk-ink); text-decoration: none; }
a:hover { color: var(--mk-chilli); }

/* ---------- 3. TYPOGRAPHY ---------- */
h1,h2,h3,h4,h5,h6,
.entry-title {
  font-family: var(--mk-font-sans);
  font-weight: 800;
  letter-spacing: -0.035em;   /* tight tracking at display sizes */
  text-wrap: balance;
}
p, li { text-wrap: pretty; }
body { font-size: 17px; line-height: 1.6; }   /* body >= 15px */

.mk-display {
  font: 800 clamp(44px, 6.4vw, 84px)/0.93 var(--mk-font-sans);
  letter-spacing: -0.042em;
  margin: 0 0 24px;
}
.mk-h2 {
  font: 800 clamp(28px, 3.4vw, 42px)/1.02 var(--mk-font-sans);
  letter-spacing: -0.035em;
  margin: 0;
}

/* Mono-label utility — uppercase, +0.08–0.14em tracking */
.mk-mono {
  font-family: var(--mk-font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
  line-height: 1;
}
.mk-mono--tight  { letter-spacing: 0.08em; }
.mk-mono--wide   { letter-spacing: 0.14em; }
/* Kickers always sit on the PAPER page background, where #D33C14 fails AA
   (4.03:1). Use the sanctioned darker derivation so mono kickers pass. */
.mk-mono--chilli { color: var(--mk-chilli-on-paper); }
.mk-mono--ember  { color: var(--mk-ember); }     /* ink backgrounds only */
.mk-mono--muted  { opacity: .6; }   /* was .5 — small mono meta failed AA on paper */

/* Instrument Serif italic accent word (e.g. "build") */
.mk-serif {
  font-family: var(--mk-font-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.005em;
}
/* The rotated chilli "build" word from the hero */
.mk-word-build {
  display: inline-block;
  background: var(--mk-chilli);
  color: var(--mk-bone);
  font-family: var(--mk-font-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.005em;
  padding: 0 .16em .06em;
  transform: rotate(-1.4deg);
}

/* ---------- 4. LAYOUT PRIMITIVES ---------- */
.mk-wrap {
  max-width: var(--mk-maxw);
  margin-inline: auto;
  padding-inline: var(--mk-gutter);
}
.mk-section { padding-top: var(--mk-rhythm); }   /* section rhythm */
.mk-section--first { padding-top: 76px; }

/* Full-bleed ink band that still respects the inner wrap */
.mk-band-ink {
  background: var(--mk-ink);
  color: var(--mk-ink-fg);
}

/* Diagonal hatch divider (dividers + empty states only) */
.mk-hatch {
  height: 14px;
  background: var(--mk-hatch);
  opacity: .5;
}

/* ---------- 5. COMPONENTS ---------- */

/* 5.1 Buttons — chilli = primary (1 per screen), ink = secondary CTA, outline = tertiary */
[hidden] { display: none !important; } /* .mk-btn's inline-flex would otherwise beat the UA [hidden] rule */

.mk-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 600 15px/1 var(--mk-font-sans);
  padding: 16px 22px;
  border: 1px solid transparent;
  background: transparent;      /* kill the UA gray button face on real <button> */
  color: var(--mk-ink);
  -webkit-appearance: none;
          appearance: none;     /* strip native control chrome */
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.mk-btn--primary { background: var(--mk-chilli); color: var(--mk-chilli-fg); border-color: transparent; }
.mk-btn--primary:hover { background: var(--mk-chilli-hover); color: var(--mk-chilli-fg); }
.mk-btn--ink { background: var(--mk-ink); color: var(--mk-ink-fg); font-size: 13px; padding: 11px 16px; border-color: transparent; }
.mk-btn--ink:hover { background: var(--mk-chilli); color: var(--mk-chilli-fg); }
.mk-btn--outline { background: transparent; border-color: var(--mk-ink); color: var(--mk-ink); }
.mk-btn--outline:hover { background: var(--mk-ink); color: var(--mk-ink-fg); }

/* 5.2 Nav bar — ink background, mono uppercase label, chilli active-tab pill.
   (Header chrome is Kadence's builder; these classes are for pattern-embedded navs.) */
.mk-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font: 500 14px/1 var(--mk-font-sans);
}
.mk-nav a.is-active,
.mk-nav-pill {                     /* chilli active-tab pill */
  background: var(--mk-chilli);
  color: var(--mk-chilli-fg);
  padding: 8px 12px;
}

/* 5.3 Badge strip (FREE / NO LOGIN / NO CERTIFICATE) */
.mk-badges { display: inline-flex; align-items: center; gap: 0; }
.mk-badge {
  font: 500 10px/1 var(--mk-font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 8px 11px;
}
.mk-badge--ink    { background: var(--mk-ink);    color: var(--mk-ink-fg); }
.mk-badge--pandan { background: var(--mk-pandan); color: var(--mk-pandan-fg); }  /* evidence: "no login" is a checked fact */
.mk-badge--chilli { background: var(--mk-chilli); color: var(--mk-chilli-fg); }

/* 5.4 Verified stamp — ink pill with ember label */
.mk-verified {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  background: var(--mk-ink);
  color: var(--mk-ink-fg);
  padding: 6px 12px;
}
.mk-verified .mk-verified__label {
  font: 500 10px/1 var(--mk-font-mono);
  letter-spacing: .12em;
  color: var(--mk-ember);
}
/* Rotated pandan corner stamp — "re-tested this month" (a verified fact) */
.mk-stamp {
  position: absolute;
  top: -22px; left: -26px;
  z-index: 2;
  background: var(--mk-pandan);
  color: var(--mk-pandan-fg);
  transform: rotate(-7deg);
  padding: 9px 12px;
  border: 1px solid var(--mk-ink);
  font: 500 10px/1.3 var(--mk-font-mono);
  letter-spacing: .1em;
  text-align: center;
}

/* 5.5 Build-of-the-week card — bone surface, chilli hard shadow, 1.1° rotation */
.mk-card {
  position: relative;
  border: 1px solid var(--mk-ink);
  background: var(--mk-bone);
}
.mk-card--pinned {
  box-shadow: var(--mk-shadow);
  transform: rotate(1.1deg);           /* max 1 rotation per screen */
}
.mk-card__bar {                        /* MK-code header bar */
  background: var(--mk-ink);
  color: var(--mk-ink-fg);
  padding: 11px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mk-card__bar .mk-code { font: 500 10px/1 var(--mk-font-mono); letter-spacing: .12em; }
.mk-card__bar .mk-verify { font: 500 10px/1 var(--mk-font-mono); letter-spacing: .12em; color: var(--mk-ember); }
.mk-card__body { padding: 24px 22px; }
.mk-card__kicker {
  font: 500 10px/1 var(--mk-font-mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--mk-chilli); margin-bottom: 12px;
}
.mk-card__title {
  font: 700 25px/1.18 var(--mk-font-sans);
  letter-spacing: -0.028em; margin-bottom: 14px;
}
.mk-card__foot {
  border-top: 1px solid var(--mk-rule);
  padding-top: 14px;
  display: flex; justify-content: space-between; align-items: center;
}

/* 5.6 Spec grid — 4-up hairline-divided stat cells */
.mk-spec {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--mk-rule);
}
.mk-spec--4 { grid-template-columns: repeat(4, 1fr); }
.mk-spec__cell { background: var(--mk-bone); padding: 12px 0 12px 12px; }
.mk-spec__label {
  font: 500 9px/1 var(--mk-font-mono);
  letter-spacing: .1em; text-transform: uppercase;
  opacity: .55; margin-bottom: 5px;   /* was .45 — small mono label failed AA */
}
.mk-spec__value { font: 600 15px/1.2 var(--mk-font-sans); }

/* 5.7 Marquee band (ink) — animation matches homepage.html mk-marq */
.mk-marquee {
  background: var(--mk-ink);
  color: var(--mk-ink-fg);
  overflow: hidden;
  padding: 16px 0;
}
.mk-marquee__track {
  display: flex;
  width: max-content;
  animation: mk-marq 34s linear infinite;
}
.mk-marquee__item {
  font: 500 12px/1 var(--mk-font-mono);
  letter-spacing: .1em; text-transform: uppercase;
  padding: 0 22px; white-space: nowrap; opacity: .8;
}
@keyframes mk-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .mk-marquee__track { animation: none; flex-wrap: wrap; }
}

/* 5.8 Comparison table — "An AI course / Make AI" */
.mk-compare { border: 1px solid var(--mk-rule); background: var(--mk-bone); }
.mk-compare__head { display: flex; background: var(--mk-ink); color: var(--mk-ink-fg); }
.mk-compare__head span {
  flex: 1; padding: 12px 18px;
  font: 500 10px/1 var(--mk-font-mono);
  letter-spacing: .12em; text-transform: uppercase;
}
.mk-compare__head .is-them { opacity: .6; }
.mk-compare__head .is-us   { color: var(--mk-ember); border-left: 1px solid var(--mk-rule-onink); }  /* highlight Make AI col */
.mk-compare__row { display: flex; border-top: 1px solid var(--mk-rule-soft); }
.mk-compare__row span { flex: 1; padding: 15px 18px; font: 400 15px/1.4 var(--mk-font-sans); }
.mk-compare__row .is-them { color: var(--mk-ink-60-solid); }   /* was opacity:.55 (4.09:1, failed AA) — solid Ink-60 passes */
.mk-compare__row .is-us   { font-weight: 600; border-left: 1px solid var(--mk-rule-soft); }

/* 5.9 Stats band — full-bleed ink, 4-up huge numerals (54-62px), ember label */
.mk-stats { padding: 44px 44px 40px; }
.mk-stats__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--mk-rule-onink);
}
.mk-stats__cell { background: var(--mk-ink); padding: 6px 20px 0 0; }
.mk-stats__num {
  font: 800 clamp(38px, 5vw, 62px)/0.9 var(--mk-font-sans);
  letter-spacing: -0.05em; font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}
.mk-stats__title { font: 600 15px/1.3 var(--mk-font-sans); margin-bottom: 6px; }
.mk-stats__meta  { font: 400 13px/1.45 var(--mk-font-sans); color: var(--mk-ink-fg-55); }

/* 5.10 Chips — bordered pill, hover inverts to ink */
.mk-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.mk-chip {
  border: 1px solid rgba(20,18,14,.24);
  background: var(--mk-bone);
  padding: 10px 14px;
  font: 500 14px/1 var(--mk-font-sans);
  transition: background-color .2s ease, color .2s ease;
}
.mk-chip:hover { background: var(--mk-ink); color: var(--mk-ink-fg); }

/* 5.11 Build step list — oversized mono index + optional dark system-prompt block */
.mk-steps { display: grid; gap: 1px; background: var(--mk-rule); border: 1px solid var(--mk-rule); }
.mk-step {
  background: var(--mk-bone);
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 20px;
  padding: 26px 24px;
}
.mk-step__idx {
  font: 700 40px/1 var(--mk-font-mono);
  letter-spacing: -0.05em; color: rgba(20,18,14,.14);
}
.mk-step__title { font: 700 20px/1.2 var(--mk-font-sans); letter-spacing: -0.025em; margin: 0 0 6px; }
.mk-step__meta { font: 500 11px/1 var(--mk-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mk-chilli); margin-bottom: 10px; }
.mk-step__body { font: 400 15px/1.5 var(--mk-font-sans); opacity: .72; margin: 0; }
/* Dark "system prompt" code block with ember label */
.mk-codeblock {
  background: var(--mk-ink);
  color: var(--mk-ink-fg);
  padding: 16px 18px;
  margin-top: 14px;
}
.mk-codeblock__label { font: 500 9px/1 var(--mk-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mk-ember); margin-bottom: 8px; }
.mk-codeblock pre, .mk-codeblock code {
  font: 400 13px/1.55 var(--mk-font-mono);
  color: var(--mk-ink-fg); white-space: pre-wrap; margin: 0;
}

/* 5.12 Pitfall callout — chilli-bordered box, tinted chilli bg, "!" markers */
.mk-pitfall {
  border: 1px solid var(--mk-chilli);
  background: rgba(211,60,20,.06);
  padding: 22px 24px;
}
.mk-pitfall__label { font: 500 10px/1 var(--mk-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mk-chilli); margin-bottom: 12px; }
.mk-pitfall ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mk-pitfall li { position: relative; padding-left: 26px; font: 400 15px/1.5 var(--mk-font-sans); }
.mk-pitfall li::before {
  content: "!"; position: absolute; left: 0; top: 0;
  width: 18px; height: 18px; display: grid; place-items: center;
  background: var(--mk-chilli); color: var(--mk-chilli-fg);
  font: 700 12px/1 var(--mk-font-mono);
}

/* 5.13 Tool / case tables — bone surface, ink header, pandan pill for in-region/verified facts */
.mk-table { width: 100%; border-collapse: collapse; background: var(--mk-bone); border: 1px solid var(--mk-rule); }
.mk-table thead th {
  background: var(--mk-ink); color: var(--mk-ink-fg);
  text-align: left; padding: 12px 16px;
  font: 500 10px/1 var(--mk-font-mono); letter-spacing: .12em; text-transform: uppercase;
}
.mk-table td { padding: 14px 16px; border-top: 1px solid var(--mk-rule-soft); font: 400 15px/1.4 var(--mk-font-sans); }
.mk-pill-pandan {                        /* pandan pill = in-region / verified fact */
  display: inline-block; background: var(--mk-pandan); color: var(--mk-pandan-fg);
  padding: 3px 8px; font: 500 10px/1.2 var(--mk-font-mono); letter-spacing: .08em; text-transform: uppercase;
}

/* 5.14 Path/lane cards */
.mk-lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mk-lane {
  border: 1px solid var(--mk-rule);
  background: var(--mk-bone);
  padding: 26px 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.mk-lane__idx { font: 700 40px/1 var(--mk-font-mono); letter-spacing: -0.05em; color: rgba(20,18,14,.14); }
.mk-lane__title { font: 700 21px/1.2 var(--mk-font-sans); letter-spacing: -0.025em; }
.mk-lane__body { font: 400 15px/1.5 var(--mk-font-sans); margin: 0; opacity: .68; flex: 1; }
.mk-lane__stats { display: flex; gap: 16px; border-top: 1px solid var(--mk-rule); padding-top: 13px; }

/* 5.15 Latest-builds card grid */
.mk-build-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--mk-rule); border: 1px solid var(--mk-rule);
}
.mk-build-cell {
  background: var(--mk-bone); padding: 20px 18px;
  display: flex; flex-direction: column; gap: 11px; min-height: 210px;
}
.mk-build-cell__meta { display: flex; justify-content: space-between; font: 500 10px/1 var(--mk-font-mono); letter-spacing: .1em; opacity: .5; }
.mk-build-cell__title { font: 600 17px/1.25 var(--mk-font-sans); letter-spacing: -0.02em; flex: 1; }
.mk-build-cell__tag { font: 500 11px/1 var(--mk-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mk-chilli); }

/* 5.16 Subscribe band (ink) */
.mk-subscribe { padding: 52px 48px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.mk-subscribe > * { min-width: 0; } /* grid items default to min-width:auto and inherit the form's intrinsic width */
.mk-subscribe form { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 12px; }
.mk-subscribe input[type=email] {
  flex: 1 1 140px; width: 0; min-width: 0; background: transparent;
  border: 1px solid var(--mk-rule-onink-strong); border-right: none;   /* was .20, too dim; ref uses .35 */
  color: var(--mk-ink-fg); font: 400 15px/1 var(--mk-font-sans);
  padding: 16px; outline: none;
}
.mk-subscribe button {
  background: var(--mk-chilli); color: var(--mk-chilli-fg); border: none;
  font: 600 15px/1 var(--mk-font-sans); padding: 16px 22px; cursor: pointer;
}

/* 5.17 Footer quiet line — the hidden /built-for-you route (dotted underline, low contrast, no icon) */
.mk-quiet-line {
  font: 400 13px/1 var(--mk-font-sans);
  opacity: .5;
  border-bottom: 1px dotted rgba(20,18,14,.4);
}

/* ---------- 6. RESPONSIVE (mobile-first adaptations) ---------- */
@media (max-width: 980px) {
  .mk-lanes { grid-template-columns: 1fr; }
  .mk-build-grid { grid-template-columns: repeat(2, 1fr); }
  .mk-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .mk-subscribe { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 760px) {
  :root { --mk-rhythm: 56px; }
  .mk-spec--4 { grid-template-columns: 1fr 1fr; }
  .mk-compare__head span, .mk-compare__row span { padding: 12px 14px; }
  .mk-step { grid-template-columns: 1fr; gap: 10px; }
  .mk-step__idx { font-size: 30px; }
  .mk-stats { padding: 28px 24px; }
  .mk-subscribe { padding: 32px 24px; }
}
@media (max-width: 560px) {
  .mk-build-grid { grid-template-columns: 1fr; }
  .mk-stats__grid { grid-template-columns: 1fr 1fr; }
  .mk-hero-grid { grid-template-columns: 1fr !important; }
  /* Forced <br>s in the hero display headline are for desktop line-shaping only;
     on narrow phones they push the huge display type past the viewport. Let it
     wrap naturally instead. */
  .mk-display br { display: none; }
}

/* Hero grid helper (2-col on desktop, stacks on mobile) */
.mk-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: start; }
.mk-two-grid  { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
@media (max-width: 900px) {
  .mk-hero-grid, .mk-two-grid { grid-template-columns: 1fr; gap: 36px; }
}