/* ============================================================
   ShopRouteBoard marketing — WOW V2.

   The production stylesheet for the public site, built from the
   approved concept-wow-v2 direction: graphite ground, ivory
   counter-surface, Schibsted Grotesk display, IBM Plex Mono for
   operational labels, and the same eight priority colours the
   product uses so the marketing site and the app agree.

   Dark by default. The ivory sections are a deliberate contrast
   beat, not a light theme.
   ============================================================ */

.mk {
  --graphite: #0C0E10;
  --panel: #14171A;
  --panel2: #1B2025;
  --line: #23282D;
  --line2: #2A3036;
  --white: #F2EDE4;
  --bright: #C6CCD2;
  --silver: #9AA0A6;
  /* Lifted from #5C636B, which measured 3.2:1 on the graphite ground and so
     failed the 4.5:1 floor everywhere it carried real text — eyebrows, form
     labels and hints, footer, the simulated-data disclosures. #767D85 is
     4.6:1 on the same ground and keeps the same recessive role. */
  --faint: #767D85;

  --ivory: #F3F0E9;
  --ivory-line: #DBD6CB;
  --ink: #16181A;
  --ink-soft: #4A4E53;

  /* Brand accent from the ShopRouteBoard route emblem (electric blue + cyan).
     --accent is the bright blue for text/icons/borders on the dark ground;
     --accent-deep is the solid blue for filled buttons (white text, WCAG-safe);
     --accent-cy is the cyan highlight. --amber is kept ONLY for semantic
     caution/urgent/hot states, never as the brand accent. */
  --accent: #2BA0FF;
  --accent-deep: #0C6FD6;
  --accent-cy: #35CFF0;
  --amber: #F5A623;
  --blue: #4EA1FF;
  --green: #29C46A;
  --red: #E8433A;

  --disp: 'Schibsted Grotesk', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;

  --tap: 44px;
  --wrap: 1180px;

  margin: 0;
  background: var(--graphite);
  color: var(--white);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.mk *, .mk *::before, .mk *::after { box-sizing: border-box; }
.mk img { max-width: 100%; height: auto; display: block; }
.mk a { color: inherit; }
.mk :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 3px; }

.mk-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ---------- skip link ---------- */
.mk-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--blue); color: #06131F; padding: 12px 20px;
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .1em;
}
.mk-skip:focus { left: 16px; top: 12px; }

/* ---------- header: HUD ⇄ NAV ----------
   One header, two states. On the homepage it opens as the camera HUD of the
   simulated shop day and transforms into site navigation once the story hands
   off; every other page simply starts in the navigation state. Same component,
   so the pages cannot drift apart. */
.mk-hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  border-bottom: 1px solid transparent;
  transition: background .5s, border-color .5s;
}
.mk-hdr-in {
  display: flex; align-items: center; gap: 20px; min-height: 64px;
  max-width: var(--wrap); margin: 0 auto; padding: 0 24px; position: relative;
}
.mk-brand {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  font-family: var(--disp); font-weight: 800; font-size: 14px; letter-spacing: 0.16em;
}
.mk-brand svg { width: 22px; height: 22px; stroke: var(--accent); flex: 0 0 auto; }

/* Telemetry: only ever rendered on the cinematic homepage. */
.mk-telemetry {
  display: flex; align-items: center; gap: 18px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--silver);
  transition: opacity .4s, transform .4s;
}
.mk-rec { display: inline-flex; align-items: center; gap: 7px; color: var(--white); }
.mk-rec i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--red); font-style: normal;
  animation: mk-blink 1.4s steps(1) infinite;
}
@keyframes mk-blink { 50% { opacity: .15; } }
.mk-cam { color: var(--faint); white-space: nowrap; }

.mk-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.mk-nav a {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--silver); text-decoration: none; padding: 10px 13px; border-radius: 7px;
  min-height: var(--tap); display: inline-flex; align-items: center;
  transition: color .15s, background .15s;
}
.mk-nav a:hover { color: var(--white); background: var(--panel); }
.mk-nav a.on { color: var(--white); background: var(--panel2); }
.mk-navtoggle { display: none; }

/* Navigation state — the resting state for every page except the homepage
   opening, where JS promotes the HUD into it. */
.mk-hdr.site-mode {
  background: rgba(12, 14, 16, .78);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.mk-hdr.site-mode .mk-telemetry { opacity: 0; transform: translateY(8px); pointer-events: none; }
.mk-hdr .mk-brand, .mk-hdr .mk-nav, .mk-hdr .mk-hdr-cta {
  transition: opacity .4s, transform .4s;
}
/* Before the handoff the HUD shows telemetry in place of navigation. */
.mk-hdr.hud-mode .mk-brand { opacity: 0; transform: translateY(-6px); pointer-events: none; }
.mk-hdr.hud-mode .mk-nav { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.mk-hdr.hud-mode .mk-navtoggle { opacity: 0; pointer-events: none; }
.mk-hdr:not(.hud-mode) .mk-telemetry { display: none; }

/* Ivory passages invert the fixed header so it stays legible over them. */
body.mk-light .mk-hdr.site-mode {
  background: rgba(243, 240, 233, .82); border-bottom-color: var(--ivory-line);
}
body.mk-light .mk-hdr.site-mode .mk-brand { color: var(--ink); }
body.mk-light .mk-hdr.site-mode .mk-nav a { color: var(--ink-soft); }
body.mk-light .mk-hdr.site-mode .mk-nav a:hover { color: var(--ink); background: rgba(22,24,26,.06); }
body.mk-light .mk-hdr.site-mode .mk-nav a.on { color: var(--ink); background: rgba(22,24,26,.09); }
body.mk-light .mk-hdr.site-mode .mk-btn { border-color: var(--ink); color: var(--ink); }
body.mk-light .mk-hdr.site-mode .mk-btn:hover { background: var(--ink); color: var(--ivory); }
body.mk-light .mk-hdr.site-mode .mk-navtoggle { border-color: var(--ivory-line); color: var(--ink); }

/* The fixed header needs the page to start below it. The cinematic homepage
   opts out: its first frame is meant to sit under the HUD. */
body.mk { padding-top: 64px; }
body.mk-cine { padding-top: 0; }

/* ---------- buttons ---------- */
.mk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  padding: 13px 22px; min-height: var(--tap); border-radius: 8px;
  border: 1px solid var(--line2); color: var(--white); background: transparent;
  transition: border-color .15s, color .15s, background .15s, transform .1s;
}
.mk-btn:hover { border-color: var(--accent); color: var(--accent); }
.mk-btn:active { transform: scale(.985); }
.mk-btn.primary { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.mk-btn.primary:hover { filter: brightness(1.08); color: #fff; }
.mk-btn.lg { font-size: 13px; padding: 16px 28px; }
.mk-btn.on-ivory { border-color: var(--ivory-line); color: var(--ink); }
.mk-btn.on-ivory:hover { border-color: var(--ink); color: var(--ink); }

/* ---------- sections ---------- */
.mk-sec { padding: 96px 0; }
.mk-sec.tight { padding: 64px 0; }
.mk-sec.ivory { background: var(--ivory); color: var(--ink); }
.mk-sec.ivory .mk-eyebrow { color: #8A8578; }
.mk-sec.ivory .mk-lead, .mk-sec.ivory p { color: var(--ink-soft); }
.mk-sec.panel { background: var(--panel); }

.mk-eyebrow {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--faint); margin: 0 0 18px;
}
.mk-h1 {
  font-family: var(--disp); font-weight: 800; letter-spacing: -0.025em; line-height: 0.94;
  font-size: clamp(44px, 8vw, 92px); margin: 0;
}
.mk-h2 {
  font-family: var(--disp); font-weight: 800; letter-spacing: -0.02em; line-height: 1.02;
  font-size: clamp(30px, 4.4vw, 50px); margin: 0 0 18px;
}
.mk-h3 {
  font-family: var(--disp); font-weight: 700; letter-spacing: -0.01em;
  font-size: 20px; margin: 0 0 8px;
}
.mk-lead { font-size: clamp(16px, 1.5vw, 19px); color: var(--bright); max-width: 62ch; margin: 0 0 28px; }
.mk-sec.ivory .mk-h1, .mk-sec.ivory .mk-h2, .mk-sec.ivory .mk-h3 { color: var(--ink); }

/* ---------- hero ---------- */
.mk-hero { padding: clamp(72px, 11vw, 132px) 0 84px; position: relative; overflow: hidden; }
.mk-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 70% at 78% 8%, rgba(245, 166, 35, 0.10), transparent 62%);
}
.mk-hero-in { position: relative; z-index: 1; }
.mk-hero .mk-h1 span { display: block; }
.mk-hero .mk-h1 .dim { color: var(--silver); }
.mk-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.mk-hero-note {
  margin-top: 20px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--faint);
}

/* ---------- page hero ----------
   The interior-page counterpart to the homepage's opening frame: same
   display voice and same operational readout, without the cinematic
   machinery. One component, so the pages cannot drift apart. */
.mk-phero {
  position: relative; overflow: hidden;
  padding: clamp(64px, 11vw, 118px) 0 clamp(48px, 7vw, 78px);
  border-bottom: 1px solid var(--line);
}
.mk-phero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(115% 78% at 82% 4%, rgba(245, 166, 35, .09), transparent 60%);
}
.mk-phero-in { position: relative; z-index: 1; }
.mk-phero .kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 20px;
}
.mk-phero h1 {
  font-family: var(--disp); font-weight: 800; letter-spacing: -0.03em; line-height: .96;
  font-size: clamp(38px, 6.4vw, 86px); margin: 0; text-transform: uppercase;
}
.mk-phero h1 .dim { color: var(--silver); }
.mk-phero .lead {
  font-size: clamp(16px, 1.5vw, 19px); color: var(--bright); max-width: 60ch; margin: 26px 0 0;
}
.mk-phero .mk-hero-cta { margin-top: 30px; }
/* Operational readout: the HUD's telemetry, carried onto interior pages. */
.mk-readout {
  margin-top: 40px; display: inline-flex; flex-wrap: wrap; gap: 0;
  border: 1px solid var(--line); border-radius: 8px; background: rgba(20, 23, 26, .6);
  font-family: var(--mono); overflow: hidden;
}
.mk-readout span {
  padding: 11px 18px; font-size: 11px; letter-spacing: .16em; color: var(--silver);
  border-right: 1px solid var(--line);
}
.mk-readout span:last-child { border-right: 0; }
.mk-readout b { color: var(--white); font-weight: 600; }
.mk-readout .on { color: var(--green); }

/* ---------- board strip (the product, shown honestly) ---------- */
.mk-board {
  margin-top: 56px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
}
.mk-board-bar {
  display: flex; align-items: center; gap: 10px; padding: 11px 16px;
  border-bottom: 1px solid var(--line); font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.12em; color: var(--faint);
}
.mk-board-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.mk-board-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px; padding: 16px;
}
.mk-bay { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.mk-bay-h {
  display: flex; justify-content: space-between; font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.12em; color: var(--silver); margin-bottom: 10px;
}
.mk-ro {
  background: var(--panel); border: 1px solid var(--line2); border-radius: 8px;
  padding: 9px 11px; margin-bottom: 8px;
}
.mk-ro:last-child { margin-bottom: 0; }
.mk-ro b { font-family: var(--mono); font-size: 14px; display: block; }
.mk-ro span {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; color: var(--faint);
  text-transform: uppercase;
}
.mk-ro .tag {
  display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 99px;
  font-size: 8.5px; border: 1px solid var(--line2); color: var(--silver);
}
.mk-ro.warn .tag { border-color: rgba(245, 166, 35, .55); color: var(--amber); }
.mk-ro.crit .tag { border-color: rgba(232, 67, 58, .55); color: var(--red); }

/* ---------- feature grid ---------- */
.mk-grid { display: grid; gap: 18px; }
.mk-grid.c2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.mk-grid.c3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.mk-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 26px;
}
.mk-sec.ivory .mk-card { background: #fff; border-color: var(--ivory-line); }
.mk-card svg { width: 22px; height: 22px; stroke: var(--accent); margin-bottom: 14px; }
.mk-card p { margin: 0; color: var(--silver); font-size: 14.5px; }
.mk-sec.ivory .mk-card p { color: var(--ink-soft); }

/* ---------- steps ---------- */
.mk-steps { counter-reset: s; display: grid; gap: 14px; }
.mk-step {
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start;
  padding: 22px 0; border-top: 1px solid var(--line);
}
.mk-sec.ivory .mk-step { border-color: var(--ivory-line); }
.mk-step::before {
  counter-increment: s; content: counter(s, decimal-leading-zero);
  font-family: var(--mono); font-size: 12px; color: var(--accent); padding-top: 4px;
}

/* ---------- pricing ---------- */
.mk-tiers { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.mk-tier {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 30px;
  display: flex; flex-direction: column;
}
.mk-tier.feature { border-color: var(--accent); }
.mk-tier .amt {
  font-family: var(--disp); font-weight: 800; font-size: 44px; letter-spacing: -0.02em;
  line-height: 1; margin: 10px 0 4px;
}
.mk-tier .per { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; color: var(--faint); }
.mk-tier ul { list-style: none; margin: 22px 0 26px; padding: 0; }
.mk-tier li {
  padding: 8px 0 8px 26px; position: relative; font-size: 14.5px; color: var(--bright);
  border-top: 1px solid var(--line);
}
.mk-tier li:first-child { border-top: 0; }
.mk-tier li::before {
  content: ""; position: absolute; left: 4px; top: 15px; width: 10px; height: 6px;
  border-left: 2px solid var(--green); border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}
.mk-tier .mk-btn { margin-top: auto; }

/* ---------- notice ---------- */
.mk-note {
  border: 1px solid var(--line2); border-left-width: 1px; border-radius: 12px;
  background: var(--panel); padding: 22px 24px;
}
.mk-note h3 { font-family: var(--disp); font-size: 17px; margin: 0 0 8px; }
.mk-note p { margin: 0; color: var(--silver); font-size: 14.5px; }
.mk-sec.ivory .mk-note { background: #fff; border-color: var(--ivory-line); }
.mk-sec.ivory .mk-note p { color: var(--ink-soft); }

/* ---------- forms ---------- */
.mk-form { display: grid; gap: 16px; }
.mk-frow { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
/* City / State / ZIP. Not three equal columns: the city name is the long one
   and a two-letter state next to a five-digit ZIP looks wrong at equal width.
   Collapses to stacked on a phone, where three across is unusable anyway. */
.mk-frow.c3 { grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 640px) { .mk-frow, .mk-frow.c3 { grid-template-columns: 1fr; } }
.mk-field label {
  display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 7px;
}
.mk-field input, .mk-field select, .mk-field textarea {
  width: 100%; background: var(--panel2); color: var(--white);
  border: 1px solid var(--line2); border-radius: 9px; padding: 12px 14px;
  font-family: inherit; font-size: 15px; min-height: var(--tap);
}
.mk-field textarea { min-height: 130px; resize: vertical; }
.mk-field input:focus, .mk-field select:focus, .mk-field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(78, 161, 255, .18);
}
.mk-field .hint { font-size: 12.5px; color: var(--faint); margin-top: 6px; }
.mk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.mk-alert { border-radius: 10px; padding: 14px 16px; margin-bottom: 22px; font-size: 14.5px; }
.mk-alert.ok { border: 1px solid rgba(41, 196, 106, .5); background: rgba(41, 196, 106, .08); }
.mk-alert.bad { border: 1px solid rgba(232, 67, 58, .5); background: rgba(232, 67, 58, .08); }

/* ---------- footer ---------- */
.mk-ftr { background: var(--panel); border-top: 1px solid var(--line); padding: 54px 0 34px; }
.mk-ftr-grid { display: flex; gap: 40px; flex-wrap: wrap; justify-content: space-between; }
/* The footer sits on --panel, a lighter ground than the page, where --faint
   drops to 4.3:1. Tinted up for this surface specifically. */
.mk-ftr h4 {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #8A9199; margin: 0 0 14px;
}
.mk-ftr ul { list-style: none; margin: 0; padding: 0; }
.mk-ftr li { margin-bottom: 2px; }
/* Footer links are list navigation, not prose, so they carry a real target
   rather than the 19px a bare text link would give. */
.mk-ftr a {
  color: var(--silver); text-decoration: none; font-size: 14px;
  display: inline-block; padding: 6px 0; min-height: 24px;
}
.mk-ftr a:hover { color: var(--white); }
.mk-brand { padding: 4px 0; }
.mk-ftr-base {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; color: #8A9199;
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .mk-sec { padding: 68px 0; }
  .mk-frow { grid-template-columns: 1fr; }
  .mk-hdr-in { padding: 0 16px; }
  .mk-telemetry { gap: 12px; font-size: 11px; }
  .mk-cam { display: none; }
  .mk-nav {
    position: fixed; inset: 64px 0 auto 0; flex-direction: column; align-items: stretch;
    gap: 0; background: var(--graphite); border-bottom: 1px solid var(--line);
    padding: 8px 16px 16px; display: none;
    max-height: calc(100vh - 64px); overflow-y: auto;
  }
  .mk-nav.open { display: flex; }
  .mk-nav a { width: 100%; }
  body.mk-light .mk-nav { background: var(--ivory); border-bottom-color: var(--ivory-line); }
  /* The toggle stays a real control even while the HUD hides the rest. */
  .mk-hdr.hud-mode .mk-navtoggle { opacity: 1; pointer-events: auto; }
  .mk-navtoggle {
    display: inline-flex; margin-left: auto; align-items: center; justify-content: center;
    width: var(--tap); height: var(--tap); border: 1px solid var(--line2); border-radius: 8px;
    background: rgba(12,14,16,.6); color: var(--white); cursor: pointer;
    transition: opacity .4s;
  }
  .mk-navtoggle svg { width: 20px; height: 20px; stroke: currentColor; }
  .mk-hdr-cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mk *, .mk *::before, .mk *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
@media print {
  .mk-hdr, .mk-navtoggle, .mk-hero-cta { display: none !important; }
  .mk, body.mk { background: #fff; color: #000; padding-top: 0; }
}

/* Pricing amounts. The number is the thing the eye should land on, so the
   cadence sits beside it at a smaller weight rather than running on as part of
   one sentence. */
.mk-price {
  margin: 14px 0 2px;
  font-size: 15px;
  line-height: 1.2;
}
.mk-price strong {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.mk-price span { opacity: 0.7; }
.mk-price-alt {
  margin: 0 0 4px;
  font-size: 13.5px;
  opacity: 0.62;
}