/* Apex20 public pages (/ and /privacy) — #134.
   DELIBERATELY self-contained: does NOT import or extend style.css. style.css is 1,000+ lines
   of member-app chrome; coupling the public brand surface to it means every chrome tweak risks
   the marketing page and vice-versa. The ~30 duplicated tokens below are the (cheap) price.
   Accent red here is Apex Red #E1131E — the logo's own red, because these pages sit directly
   under the lockup. ⚠️ SUPERSEDED 2026-07-18 (#126c SHIPPED): the app chrome was retuned from
   #c8102e to #E1131E, so the whole product is now ONE red. The old "two coexisting reds is
   settled, do not unify" note here was the pre-#126c decision — it is no longer true. Do NOT
   revert chrome to #c8102e on the strength of a stale comment. */

:root{
  --ink:#16181d; --muted:#6b7280; --line:#e6e8ec; --bg:#f4f5f7; --card:#ffffff;
  --mk-red:#E1131E; --mk-red-d:#c00f19;
  --mk-dark:radial-gradient(1100px 620px at 28% -10%,#3a0b13,#16181d);  /* login-hero family:
      marketing -> /login must feel continuous */
}

*{box-sizing:border-box}
body.mk{margin:0;background:var(--card);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;line-height:1.55}
body.mk img{max-width:100%}
.mk-wrap{max-width:1080px;margin:0 auto;padding:0 22px}

/* ---- buttons ---- */
.mk-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:12px 24px;border-radius:10px;background:var(--mk-red);color:#fff;font-weight:700;
  font-size:15px;text-decoration:none;border:1px solid var(--mk-red)}
.mk-btn:hover{background:var(--mk-red-d);border-color:var(--mk-red-d)}
.mk-btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.55);color:#fff}
.mk-btn.ghost:hover{background:rgba(255,255,255,.10);border-color:#fff}

/* ---- hero (dark) ---- */
.mk-hero{background:var(--mk-dark);color:#fff;padding:64px 22px 68px;text-align:center}
.mk-hero-logo{width:300px;height:auto;display:block;margin:0 auto 30px}
.mk-hero h1{margin:0 auto 16px;font-size:42px;line-height:1.1;font-weight:800;
  letter-spacing:-.6px;max-width:16ch}
.mk-sub{margin:0 auto 30px;max-width:62ch;font-size:17px;line-height:1.6;color:#d7dae0}
.mk-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---- pillars ---- */
.mk-pillars{padding:64px 0 60px;background:var(--card)}
.mk-pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mk-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px 24px}
.mk-card h2{margin:0 0 10px;font-size:18px;font-weight:700;letter-spacing:-.2px}
.mk-card p{margin:0;color:var(--muted);font-size:15px}

/* ---- quote band (quiet grey strip) ---- */
.mk-quote{background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:52px 0}
.mk-quote p{margin:0 auto;max-width:56ch;text-align:center;font-size:23px;line-height:1.45;
  font-weight:600;letter-spacing:-.3px}

/* ---- pricing ---- */
.mk-pricing{padding:64px 0 60px}
.mk-h2{margin:0 0 6px;font-size:30px;font-weight:800;letter-spacing:-.5px;text-align:center}
.mk-h2-sub{margin:0 0 34px;text-align:center;color:var(--muted);font-size:16px}
.mk-price-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;
  max-width:760px;margin:0 auto}
.mk-price-card{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:28px 26px;display:flex;flex-direction:column}
.mk-price-card h3{margin:0 0 12px;font-size:17px;font-weight:700}
.mk-price{margin:0 0 16px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.mk-price-num{font-size:40px;font-weight:800;letter-spacing:-1px;color:var(--mk-red)}
.mk-price-unit{font-size:14px;color:var(--muted);font-weight:600}
.mk-price-card p{margin:0;color:var(--muted);font-size:15px}
/* The room+food carve-out lives in the card body at FULL SIZE on purpose — never a footnote,
   never smaller type. A dealer who finds it later stops trusting the whole page. */
.mk-price-total{margin-top:16px !important;padding-top:14px;border-top:1px solid var(--line);
  color:var(--ink) !important;font-weight:700;font-size:16px !important}

/* ---- contact band ---- */
.mk-contact{background:var(--bg);border-top:1px solid var(--line);padding:60px 0}
.mk-contact-cta{margin:22px 0 0;text-align:center;font-size:20px;font-weight:700}
.mk-contact-cta a{color:var(--mk-red);text-decoration:none}
.mk-contact-cta a:hover{color:var(--mk-red-d);text-decoration:underline}

/* ---- footer (dark) ---- */
.mk-foot{background:var(--mk-dark);color:#c7cbd3;padding:34px 0}
.mk-foot-in{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.mk-foot-brand{display:flex;flex-direction:column;gap:3px}
.mk-foot-brand strong{color:#fff;font-size:14px}
.mk-foot-brand span{font-size:12px;color:#9aa0ab;letter-spacing:.2px}
.mk-foot-links{display:flex;gap:20px;flex-wrap:wrap}
.mk-foot-links a{color:#c7cbd3;font-size:13px;text-decoration:none}
.mk-foot-links a:hover{color:#fff;text-decoration:underline}

/* ---- #167 About Apex20 / Why we're different / call band ---- */
.mk-about{padding:64px 0 8px}
.mk-about-logo{width:230px;height:auto;display:block;margin:0 auto 26px}
.mk-about-lead{max-width:64ch;margin:0 auto;color:var(--ink);font-size:17px;line-height:1.65}
.mk-about-lead p{margin:0 0 16px}
.mk-about-lead p:last-child{margin-bottom:0}
.mk-about-sig{max-width:64ch;margin:26px auto 0;padding-top:18px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.mk-about-sig-name{font-weight:700;font-size:15px}
.mk-about-sig-role{color:var(--muted);font-size:14px}
.mk-diff{padding:56px 0 64px}
.mk-diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mk-diff-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px 24px}
.mk-diff-card h3{margin:0 0 10px;font-size:17px;font-weight:700;letter-spacing:-.2px}
.mk-diff-card h3::before{content:"";display:block;width:34px;height:3px;border-radius:2px;
  background:var(--mk-red);margin-bottom:14px}
.mk-diff-card p{margin:0;color:var(--muted);font-size:15px}
.mk-diff-card p + p{margin-top:10px}
.mk-callband{background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:44px 0;text-align:center}
.mk-callband .mk-call-lead{margin:0 0 14px;font-size:19px;font-weight:600;letter-spacing:-.2px}
.mk-callband .mk-call-line{margin:0;font-size:20px;font-weight:700}
.mk-callband .mk-call-line a{color:var(--mk-red);text-decoration:none}
.mk-callband .mk-call-line a:hover{color:var(--mk-red-d);text-decoration:underline}
.mk-callband .mk-call-hours{margin:12px 0 0;color:var(--muted);font-size:14px}

/* ---- /privacy doc head (slim dark bar) ---- */
.mk-doc-head{background:var(--mk-dark);padding:18px 0}
.mk-doc-head-in{display:flex;justify-content:space-between;align-items:center;gap:16px}
.mk-doc-logo{width:150px;height:auto;display:block}
.mk-doc-signin{color:#fff;font-size:14px;font-weight:600;text-decoration:none}
.mk-doc-signin:hover{text-decoration:underline}

/* ---- /privacy document body (renders the policy .md) ---- */
.mk-doc{max-width:760px;margin:0 auto;padding:36px 22px 64px;font-size:15px;line-height:1.6}
.mk-doc h1{font-size:30px;line-height:1.2;font-weight:800;letter-spacing:-.5px;margin:0 0 18px}
.mk-doc h2{font-size:20px;font-weight:700;letter-spacing:-.2px;margin:38px 0 12px;
  padding-top:18px;border-top:1px solid var(--line)}
.mk-doc h3{font-size:16px;font-weight:700;margin:24px 0 8px}
.mk-doc p{margin:0 0 14px}
.mk-doc ul,.mk-doc ol{margin:0 0 14px;padding-left:22px}
.mk-doc li{margin-bottom:7px}
.mk-doc a{color:var(--mk-red)}
.mk-doc hr{border:0;border-top:1px solid var(--line);margin:30px 0}
.mk-doc strong{color:var(--ink)}
.mk-doc em{color:var(--muted)}
/* display:block + overflow-x is what keeps the s6 subprocessor table from breaking the 375px
   no-horizontal-scroll gate: the TABLE scrolls inside itself, the PAGE never scrolls sideways. */
.mk-doc table{border-collapse:collapse;display:block;overflow-x:auto;max-width:100%;
  margin:0 0 18px;font-size:14px}
.mk-doc th,.mk-doc td{border:1px solid var(--line);padding:9px 12px;text-align:left;
  vertical-align:top}
.mk-doc th{background:var(--bg);font-weight:700}

/* ---- responsive: single column, no horizontal scroll at 375px ---- */
@media (max-width:720px){
  .mk-hero{padding:40px 20px 44px}
  .mk-hero-logo{width:222px;margin-bottom:24px}
  .mk-hero h1{font-size:clamp(26px,7.4vw,34px);max-width:none}
  .mk-sub{font-size:16px}
  .mk-cta{flex-direction:column;align-items:stretch}
  .mk-pillars,.mk-pricing{padding:44px 0 40px}
  .mk-pillar-grid,.mk-price-grid{grid-template-columns:1fr;gap:16px}
  .mk-quote{padding:38px 0}
  .mk-quote p{font-size:19px}
  .mk-h2{font-size:25px}
  .mk-about{padding:44px 0 4px}
  .mk-about-lead{font-size:16px}
  .mk-diff{padding:38px 0 44px}
  .mk-diff-grid{grid-template-columns:1fr;gap:16px}
  .mk-callband{padding:34px 0}
  .mk-callband .mk-call-line{font-size:17px}
  .mk-contact{padding:44px 0}
  .mk-foot-in{flex-direction:column;align-items:flex-start}
  .mk-doc-head-in{gap:12px}
  .mk-doc-logo{width:130px}
  .mk-doc{padding:28px 20px 48px}
  .mk-doc h1{font-size:25px}
  .mk-doc h2{font-size:18px}
}