/* Values are marketing/brand_manual/brand.json v1.3; test/build.test.mjs
   fails if any hex here stops matching it. */
@font-face { font-family: "Fredoka"; font-weight: 600; font-display: swap; src: url("/fonts/Fredoka-600.ttf") format("truetype"); }
@font-face { font-family: "Nunito Sans"; font-weight: 400; font-display: swap; src: url("/fonts/NunitoSans-400.ttf") format("truetype"); }
@font-face { font-family: "Nunito Sans"; font-weight: 700; font-display: swap; src: url("/fonts/NunitoSans-700.ttf") format("truetype"); }
@font-face { font-family: "Nunito Sans"; font-weight: 800; font-display: swap; src: url("/fonts/NunitoSans-800.ttf") format("truetype"); }

:root {
  --moonmilk: #F7E9E0;
  --midnight: #22375A;
  --poppy: #E65E35;
  --poppy-text: #BC3C15;
  --marigold: #F2BC33;
  --muted: #5C6B80;
  --white: #FFFFFF;
  --display: "Fredoka", system-ui, sans-serif;
  --body: "Nunito Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--moonmilk);
  color: var(--midnight);
  font: 400 17px/1.6 var(--body);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--poppy-text); font-weight: 700; }

h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(36px, 6vw, 60px); letter-spacing: -0.03em; }
h2 { font-size: clamp(28px, 4.5vw, 44px); letter-spacing: -0.025em; }
h3 { font-size: 24px; letter-spacing: -0.02em; }

.mk-wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.mk-header { max-width: 1120px; margin: 0 auto; padding: 20px 16px; }
.mk-logo { display: inline-block; }

.mk-hero { padding: 24px 0 64px; }
.mk-hero__grid { display: grid; gap: 40px; align-items: center; }
.mk-hero__img { border-radius: 24px; }
.mk-lede { font-size: clamp(19px, 2.2vw, 22px); line-height: 1.5; max-width: 40ch; }
.mk-launch { font-weight: 700; max-width: 44ch; }

.mk-button {
  display: inline-block;
  margin-top: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--poppy);
  color: var(--white);
  font: 800 19px/1.2 var(--body);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.mk-button:hover, .mk-button:focus-visible { background: var(--poppy-text); }

.mk-section { padding: 64px 0; }
.mk-section--panel { background: var(--white); }
.mk-intro { max-width: 60ch; }
.mk-eyebrow { font-weight: 800; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.mk-muted { color: var(--muted); }

.mk-steps, .mk-features { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 24px; }
.mk-steps { counter-reset: step; }
.mk-steps li { counter-increment: step; }
.mk-steps li h3::before { content: counter(step) ". "; color: var(--poppy-text); }
.mk-steps p, .mk-features p { margin: 0; }

.mk-product { display: grid; gap: 40px; align-items: center; }
.mk-product img { border-radius: 16px; max-width: 420px; }
.mk-price { font: 600 32px/1.2 var(--display); letter-spacing: -0.02em; margin: 16px 0 4px; }

.mk-prose { max-width: 66ch; }
.mk-prose h2 { font-size: 28px; margin-top: 1.5em; }
.mk-prose h3 { font-size: 21px; margin-top: 1.25em; }
.mk-prose ul { padding-left: 1.25em; }

.mk-footer { background: var(--midnight); color: var(--moonmilk); padding: 48px 0; }
.mk-footer a { color: var(--marigold); }
.mk-footer__links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 16px 0; }
.mk-footer__small { font-size: 14px; opacity: .8; }

@media (min-width: 800px) {
  .mk-hero__grid, .mk-product { grid-template-columns: 1fr 1fr; }
  .mk-steps { grid-template-columns: repeat(2, 1fr); }
  .mk-features { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (min-width: 1040px) {
  .mk-steps { grid-template-columns: repeat(5, 1fr); }
}