:root {
  --m4k-ink: #24302b;
  --m4k-muted: #64716a;
  --m4k-sage: #6f8f7a;
  --m4k-sage-dark: #456653;
  --m4k-cream: #f7f5ef;
  --m4k-border: #e4e8e2;
  --m4k-white: #ffffff;
}

/* Base visual foundation; customize as the site is built. */
body {
  color: var(--m4k-ink);
}

a {
  text-underline-offset: 0.15em;
}

.m4k-container {
  width: min(1200px, calc(100% - 40px));
  margin-inline: auto;
}

.m4k-section {
  padding-block: clamp(36px, 5vw, 72px);
}

.m4k-section--cream {
  background: var(--m4k-cream);
}

.m4k-eyebrow {
  color: var(--m4k-sage-dark);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.m4k-button,
a.m4k-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.7rem 1.15rem;
  border: 1px solid var(--m4k-sage-dark);
  border-radius: 6px;
  background: var(--m4k-sage-dark);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 160ms ease, transform 160ms ease;
}

.m4k-button:hover,
a.m4k-button:hover {
  background: #354f40;
  color: #fff;
  transform: translateY(-1px);
}

.m4k-card {
  overflow: hidden;
  border: 1px solid var(--m4k-border);
  border-radius: 10px;
  background: var(--m4k-white);
}

.m4k-card__body {
  padding: 18px;
}

.m4k-muted {
  color: var(--m4k-muted);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}


/* Homepage styles */
.m4k-home { --m4k-blue:#1674b8; --m4k-orange:#ff941f; --m4k-green:#79c934; --m4k-gold:#efbd16; --m4k-gray:#737373; --m4k-ink:#172b36; --m4k-muted:#5d6970; --m4k-line:#e7ebed; }
.m4k-home * { box-sizing:border-box; }
.m4k-wrap { width:min(1200px, calc(100% - 40px)); margin-inline:auto; }
.m4k-home h1,.m4k-home h2,.m4k-home h3 { color:var(--m4k-ink); letter-spacing:-.025em; line-height:1.15; }
.m4k-home h1 { font-size:clamp(2.3rem, 4.6vw, 4.2rem); margin:0 0 18px; }
.m4k-home h2 { font-size:clamp(1.8rem, 3vw, 2.5rem); margin:0 0 10px; }
.m4k-home h3 { font-size:1.12rem; margin:0 0 10px; }
.m4k-home p { line-height:1.65; }
.m4k-eyebrow { color:#23784c; font-size:.78rem; font-weight:800; letter-spacing:.12em; margin:0 0 12px; text-transform:uppercase; }
.m4k-hero { background:linear-gradient(115deg,#fff 0%,#f7fbfd 60%,#f4faed 100%); overflow:hidden; padding:clamp(42px,6vw,82px) 0 44px; }
.m4k-hero__grid { align-items:center; display:grid; gap:clamp(30px,5vw,72px); grid-template-columns:1.04fr .96fr; }
.m4k-hero__intro { color:var(--m4k-muted); font-size:1.12rem; max-width:620px; margin:0 0 25px; }
.m4k-hero__actions { display:flex; flex-wrap:wrap; gap:12px; }
.m4k-btn,.m4k-home a.m4k-btn { align-items:center; border:1px solid transparent; border-radius:7px; display:inline-flex; font-size:.94rem; font-weight:750; gap:10px; justify-content:center; min-height:46px; padding:12px 19px; text-decoration:none; transition:transform .15s ease,filter .15s ease; }
.m4k-btn:hover { filter:brightness(.95); transform:translateY(-1px); }
.m4k-btn--primary { background:var(--m4k-green); color:#173a24!important; }
.m4k-btn--secondary { background:#fff; border-color:#d7e0e4!important; color:var(--m4k-ink)!important; }
.m4k-hero__visual { min-width:0; position:relative; }
.m4k-hero__image { aspect-ratio:1.08/1; background:#edf3e8; border-radius:24px 24px 90px 24px; overflow:hidden; }
.m4k-hero__photo { height:100%; object-fit:cover; width:100%; }
.m4k-hero__placeholder { align-items:center; color:#51665b; display:flex; flex-direction:column; height:100%; justify-content:center; min-height:290px; padding:25px; text-align:center; }
.m4k-placeholder-symbol { color:var(--m4k-orange); font-size:4rem; line-height:1; }
.m4k-hero__placeholder p { font-weight:700; margin:14px 0 4px; }
.m4k-hero__placeholder small { font-size:.78rem; }
.m4k-hero__floating-card { background:#fff; border:1px solid #e5eae4; border-radius:12px; bottom:20px; box-shadow:0 10px 30px #18332812; color:#33443b; font-size:.9rem; font-weight:700; left:-22px; padding:15px 18px; position:absolute; }
.m4k-dot { background:var(--m4k-green); border-radius:50%; display:inline-block; height:9px; margin-right:8px; width:9px; }
.m4k-trust-points { display:flex; flex-wrap:wrap; gap:22px; list-style:none; margin:30px 0 0; padding:0; }
.m4k-trust-points li { align-items:center; display:flex; gap:10px; }
.m4k-trust-icon { align-items:center; border:1.5px solid var(--m4k-blue); border-radius:50%; color:var(--m4k-blue); display:flex; flex:0 0 34px; font-size:1.1rem; height:34px; justify-content:center; }
.m4k-trust-points strong,.m4k-trust-points small { display:block; }
.m4k-trust-points strong { font-size:.82rem; }
.m4k-trust-points small { color:var(--m4k-muted); font-size:.75rem; margin-top:2px; }
.m4k-section { padding:clamp(42px,5vw,68px) 0; }
.m4k-section-heading { align-items:end; display:flex; gap:24px; justify-content:space-between; margin-bottom:25px; }
.m4k-section-heading p:not(.m4k-eyebrow) { color:var(--m4k-muted); margin:0; }
.m4k-text-link { color:#176e4c; font-size:.9rem; font-weight:750; text-decoration:none; white-space:nowrap; }
.m4k-text-link:hover { color:var(--m4k-blue); text-decoration:underline; }
.m4k-category-grid { display:grid; gap:16px; grid-template-columns:repeat(6,minmax(0,1fr)); }
.m4k-category-card { align-items:flex-start; background:#f8faf8; border:1px solid #edf0ec; border-radius:12px; color:var(--m4k-ink); display:flex; flex-direction:column; min-height:170px; padding:20px 18px 16px; text-decoration:none; transition:border-color .15s ease,transform .15s ease; }
.m4k-category-card:hover { border-color:#b8d9a5; transform:translateY(-3px); }
.m4k-category-card__icon { align-items:center; background:#e8f3df; border-radius:12px; color:#39784b; display:flex; font-size:1.65rem; height:48px; justify-content:center; margin-bottom:18px; width:48px; }
.m4k-category-card:nth-child(3n+2) .m4k-category-card__icon { background:#e7f2fb; color:var(--m4k-blue); }
.m4k-category-card:nth-child(3n) .m4k-category-card__icon { background:#fff0dc; color:#b56b0d; }
.m4k-category-card strong { font-size:.98rem; }
.m4k-category-card>span:not(.m4k-category-card__icon):not(.m4k-category-card__arrow) { color:var(--m4k-muted); font-size:.8rem; margin-top:5px; }
.m4k-category-card__arrow { color:var(--m4k-blue); font-size:1.1rem; margin-top:auto; padding-top:12px; }
.m4k-picks { background:#f3f8f0; }
.m4k-product-grid { display:grid; gap:18px; grid-template-columns:repeat(5,minmax(0,1fr)); }
.m4k-product-card { background:#fff; border:1px solid #e6ece4; border-radius:12px; display:flex; flex-direction:column; min-width:0; overflow:hidden; }
.m4k-product-card__image { align-items:center; background:#fff; display:flex; height:210px; justify-content:center; padding:16px; }
.m4k-product-card__image img { height:100%; object-fit:contain; width:100%; }
.m4k-product-card__body { display:flex; flex:1; flex-direction:column; padding:16px; }
.m4k-product-card h3 { font-size:1rem; }
.m4k-product-card h3 a,.m4k-guide-card h3 a { color:inherit; text-decoration:none; }
.m4k-product-card h3 a:hover,.m4k-guide-card h3 a:hover { color:var(--m4k-blue); }
.m4k-product-price { color:#1e7b4b; font-size:1.15rem; font-weight:800; margin:2px 0 14px; }
.m4k-btn--product { background:var(--m4k-blue); color:#fff!important; font-size:.84rem!important; margin-top:auto; min-height:42px; padding:10px 12px!important; width:100%; }
.m4k-disclosure { color:#69756e; font-size:.78rem; margin:18px 0 0; }
.m4k-guide-grid { display:grid; gap:20px; grid-template-columns:repeat(4,minmax(0,1fr)); }
.m4k-guide-card { border:1px solid var(--m4k-line); border-radius:12px; overflow:hidden; }
.m4k-guide-card__image { align-items:center; background:#f3f5f2; display:flex; height:180px; justify-content:center; overflow:hidden; }
.m4k-guide-card__image img { height:100%; object-fit:cover; width:100%; }
.m4k-guide-card__body { padding:18px; }
.m4k-guide-date { color:var(--m4k-gray); font-size:.75rem; margin:0 0 7px; }
.m4k-guide-card__body>p:not(.m4k-guide-date) { color:var(--m4k-muted); font-size:.88rem; margin:0 0 15px; }
.m4k-no-image { color:#718078; font-size:.85rem; }
.m4k-empty-state { background:#fff; border:1px dashed #b8c9bc; border-radius:12px; padding:28px; text-align:center; }
.m4k-empty-state p { color:var(--m4k-muted); margin-bottom:0; }
.m4k-why { background:linear-gradient(110deg,#fff 0%,#fffdf7 100%); }
.m4k-why__grid { align-items:center; display:grid; gap:60px; grid-template-columns:.8fr 1.2fr; }
.m4k-why__intro>p:last-child { color:var(--m4k-muted); }
.m4k-why__items { display:grid; gap:26px 30px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.m4k-why-item { display:flex; gap:13px; }
.m4k-why-item>span { align-items:center; background:#e9f4e2; border-radius:50%; color:#27774a; display:flex; flex:0 0 40px; font-size:1.15rem; height:40px; justify-content:center; }
.m4k-why-item:nth-child(2)>span { background:#e5f1fb; color:var(--m4k-blue); }
.m4k-why-item:nth-child(3)>span { background:#fff0dc; color:#b56b0d; }
.m4k-why-item h3 { font-size:1rem; margin:0 0 5px; }
.m4k-why-item p { color:var(--m4k-muted); font-size:.86rem; margin:0; }
@media (max-width: 1024px) {
 .m4k-category-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .m4k-product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .m4k-guide-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .m4k-hero__grid { gap:32px; }
 .m4k-trust-points { gap:14px; }
}
@media (max-width: 680px) {
 .m4k-wrap { width:min(100% - 28px,1200px); }
 .m4k-hero { padding-top:38px; }
 .m4k-hero__grid,.m4k-why__grid { grid-template-columns:1fr; }
 .m4k-hero__visual { margin:8px 0 0 10px; }
 .m4k-hero__image { aspect-ratio:1.15/1; }
 .m4k-hero__floating-card { bottom:12px; left:-10px; max-width:85%; }
 .m4k-trust-points { display:grid; grid-template-columns:1fr; }
 .m4k-section-heading { align-items:flex-start; flex-direction:column; gap:12px; }
 .m4k-category-grid { gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)); }
 .m4k-category-card { min-height:150px; padding:15px; }
 .m4k-product-grid { gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); }
 .m4k-product-card__image { height:155px; padding:10px; }
 .m4k-product-card__body { padding:12px; }
 .m4k-product-card h3 { font-size:.92rem; }
 .m4k-guide-grid { gap:14px; grid-template-columns:1fr; }
 .m4k-guide-card__image { height:200px; }
 .m4k-why__grid { gap:28px; }
 .m4k-why__items { gap:20px; grid-template-columns:1fr; }
}