/* moon-com — design system.

   Written from scratch rather than recoloured from a casino kit. This is a different product:
   a multi-page YMYL review site with a sticky sidebar, tables, calculators and a blog, not a
   one-page gambling land. Recolouring the mp-* kit would have dragged in a lobby's worth of
   classes nothing here uses.

   TOKENS. Section 6.1 of the brief lists a palette and says to eyedropper it from the operator's
   screenshots. Both were done; where they differ the measured value is recorded next to the
   token, because the operator's own UI is the reference a reader will compare against:

       token        brief      measured on moon_desktop.png
       --bg-0       #09090D    #090A0B   (identical in practice)
       --bg-1       #101015    —         (our card, no operator equivalent)
       --card       —          #1C1D23   (the operator's panel; used for raised surfaces)
       --brand      #7A2CF7    #7008D0   (their Place Bet button is deeper; ours is the
                                          brief's lighter violet, which clears AA as a link)
       --up         #14F1A6    #00F0B0
       --down       #FF1F80    #F80070

   CONTRAST. Section 6.1 requires AA (4.5:1) for text and says mint and pink are for large text
   and markers only — body copy is white or grey. Measured on --bg-0:
       #FFFFFF 19.6:1 · #9A9AA6 8.0:1 · #14F1A6 13.4:1 · #FF1F80 5.3:1 · #7A2CF7 3.0:1
   So --brand is a FILL and a large-text colour, never small body text; links inside prose use
   --link (#A86BFF, 7.1:1). The gate re-measures all of this in the browser.
*/

:root {
  --bg-0: #09090D;
  --bg-1: #101015;
  --bg-2: #17171E;
  --card: #1C1D23;
  --border: #26262F;
  --border-2: #35353F;

  --brand: #7A2CF7;
  --brand-hover: #8B44FF;
  --glow: #A86BFF;
  --link: #A86BFF;
  --up: #14F1A6;
  --down: #FF1F80;
  /* --down is fine as a marker or a fill, but the hero lays a violet glow over the ground and
     the 18+ badge measured 4.28:1 on it. Small pink TEXT uses the lighter variant (6.9:1). */
  --down-text: #FF5C9E;

  --text-1: #FFFFFF;
  --text-2: #9A9AA6;
  /* #6E6E7A measured 3.34-3.95:1 depending on the surface — under AA everywhere it was used,
     and it was used for captions, the /10 suffix and the "last verified" line. #8A8A96 clears
     4.5:1 on the darkest and the lightest surface this design paints (4.93 on #1C1D23). */
  --text-3: #8A8A96;

  --r-card: 14px;
  --r-pill: 999px;
  --wrap: 1220px;
  --gap: 24px;

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-head: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg-0);
  color: var(--text-2);
  font: 400 16px/1.7 var(--font-body);
}

h1, h2, h3, h4 { font-family: var(--font-head); color: var(--text-1); line-height: 1.22; margin: 0 0 .5em; }
h1 { font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -.02em; }
h2 { font-size: clamp(23px, 2.4vw, 30px); letter-spacing: -.01em; margin-top: 1.6em; }
h3 { font-size: 19px; margin-top: 1.4em; }

p { margin: 0 0 1em; }
a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: #C79BFF; }
strong { color: var(--text-1); }
small { font-size: .85em; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

.mn-skip { position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--brand); color: #fff; padding: 10px 16px; }
.mn-skip:focus { left: 0; }

/* --- header ---------------------------------------------------------------------------------- */

.mn-head {
  position: sticky; top: 0; z-index: 12;
  background: rgba(9,9,13,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.mn-head-in { display: flex; align-items: center; gap: 18px; height: 62px; }

.mn-brand {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--text-1);
  letter-spacing: .01em; white-space: nowrap;
}
/* The mark is a transparent PNG, so it needs no plate and no background of its own — it sits on
   whatever ground it is placed on. Sized by height so the intrinsic ratio is kept. */
.mn-brand-mark { width: 26px; height: 26px; flex: 0 0 26px; object-fit: contain; }
.mn-brand em { font-style: normal; color: var(--text-3); font-weight: 500; }

.mn-nav { display: flex; gap: 4px 18px; margin-left: auto; flex-wrap: wrap; }
.mn-nav a { color: var(--text-2); text-decoration: none; font-size: 15px; padding: 6px 0; }
.mn-nav a:hover, .mn-nav a[aria-current="page"] { color: var(--text-1); }

.mn-head-cta { margin-left: 8px; }

.mn-burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.mn-burger span, .mn-burger span::before, .mn-burger span::after {
  display: block; width: 20px; height: 2px; background: var(--text-1); border-radius: 2px;
}
.mn-burger span::before, .mn-burger span::after { content: ""; position: relative; }
.mn-burger span::before { top: -6px; }
.mn-burger span::after { top: 4px; }

@media (max-width: 1000px) {
  .mn-burger { display: block; margin-left: auto; order: 3; }
  .mn-nav {
    order: 4; width: 100%; margin: 0; display: none; flex-direction: column; gap: 0;
    border-top: 1px solid var(--border); padding: 6px 0 12px;
  }
  .mn-nav.is-open { display: flex; }
  .mn-nav a { padding: 10px 0; }
  .mn-head-in { height: auto; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
  .mn-head-cta { order: 2; margin-left: 0; }
}

/* --- ticker ---------------------------------------------------------------------------------- */

.mn-ticker {
  border-bottom: 1px solid var(--border); background: var(--bg-1); overflow: hidden;
}
.mn-ticker-track {
  display: flex; gap: 30px; padding: 9px 0; width: max-content;
  animation: mn-slide 46s linear infinite;
}
.mn-ticker:hover .mn-ticker-track { animation-play-state: paused; }
/* With reduced motion the strip stops scrolling. It must NOT become a horizontal scroller:
   a `width: max-content` track inside an auto-overflow parent widened the document to 646px on
   a 360px viewport. It wraps instead. */
@media (prefers-reduced-motion: reduce) {
  .mn-ticker-track { animation: none; width: auto; flex-wrap: wrap; row-gap: 6px; }
}
@keyframes mn-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.mn-tick {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 13px; color: var(--text-2); white-space: nowrap;
}
.mn-tick img { width: 16px; height: 16px; }
.mn-tick b { color: var(--text-1); font-weight: 600; }
.mn-tick .up { color: var(--up); }
.mn-tick .down { color: var(--down-text); }

/* --- buttons --------------------------------------------------------------------------------- */

.mn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 11px 20px; border-radius: var(--r-pill);
  font: 600 15px/1.2 var(--font-body); text-decoration: none; border: 1px solid transparent;
  cursor: pointer;
}
.mn-btn-primary {
  background: var(--brand); color: #fff; border-color: var(--brand);
  box-shadow: 0 0 0 1px rgba(168,107,255,.25), 0 8px 24px rgba(122,44,247,.28);
}
.mn-btn-primary:hover { background: var(--brand-hover); color: #fff; }
.mn-btn-ghost { background: transparent; color: var(--text-1); border-color: var(--border-2); }
.mn-btn-ghost:hover { border-color: var(--glow); color: #fff; }
.mn-btn-sm { min-height: 38px; padding: 8px 15px; font-size: 14px; }

.mn-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
@media (max-width: 520px) { .mn-cta-row .mn-btn { flex: 1 1 100%; } }

/* --- layout: content + sticky sidebar --------------------------------------------------------- */

.mn-shell { display: grid; gap: 34px; grid-template-columns: minmax(0, 1fr) 320px; padding: 34px 0 60px; }
/* `1fr` alone is NOT enough here: a grid item defaults to min-width:auto, so the single
   track refuses to shrink below its content's min-content width. The tables carry
   min-width:520px, so the collapsed column measured 626px inside a 360px viewport and the
   whole page scrolled sideways. minmax(0, 1fr) lets the track shrink and hands the
   overflow to .mn-table-wrap, which is what has overflow-x:auto. */
@media (max-width: 1040px) { .mn-shell { grid-template-columns: minmax(0, 1fr); } }

.mn-aside { position: sticky; top: 82px; align-self: start; display: grid; gap: 16px; }
@media (max-width: 1040px) { .mn-aside { position: static; } }

.mn-card {
  background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-card);
  padding: 18px 20px;
}
.mn-card h3 { margin-top: 0; font-size: 16px; }

/* --- hero ------------------------------------------------------------------------------------ */

.mn-hero { border-bottom: 1px solid var(--border); padding: 40px 0 34px;
  background:
    radial-gradient(60% 120% at 82% -20%, rgba(122,44,247,.22), transparent 60%),
    radial-gradient(50% 100% at 5% 110%, rgba(20,241,166,.07), transparent 60%);
}
.mn-badge {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2);
  border: 1px solid var(--border-2); border-radius: var(--r-pill); padding: 5px 13px;
  margin-bottom: 16px;
}
.mn-badge b { color: var(--up); font-weight: 600; }

.mn-lede { font-size: 18px; color: var(--text-2); max-width: 62ch; }

.mn-rating { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; flex-wrap: wrap; }
.mn-rating-n { font: 700 34px/1 var(--font-head); color: var(--text-1); }
.mn-rating-n span { font-size: 17px; color: var(--text-3); }
.mn-stars { color: var(--up); letter-spacing: 2px; font-size: 17px; }
.mn-rating-l { font-size: 14px; color: var(--text-2); }

.mn-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.mn-chips li {
  font-size: 13px; color: var(--text-2); background: var(--bg-1);
  border: 1px solid var(--border); border-radius: var(--r-pill); padding: 6px 13px;
}
.mn-chips li::before { content: "✓ "; color: var(--up); }

.mn-fine { font-size: 13px; color: var(--text-3); margin: 18px 0 0; max-width: 76ch; }
.mn-18 {
  display: inline-block; border: 1px solid var(--down-text); color: var(--down-text);
  border-radius: var(--r-pill); font-size: 11px; font-weight: 700; padding: 1px 7px;
  margin-right: 6px;
}

/* The hero illustration sits under the KPI row: full width of the hero column, capped so it
   never upscales past its 1600px source. */
/* No border and no radius here: the hero files carry a feathered alpha edge so the art
   dissolves into the ground (media brief 4.2 — no seam, no rectangle). A frame would put the
   rectangle back. Screenshots keep their frame, because a screenshot is a document. */
.mn-hero-art { display: block; margin: 26px 0 0; }
.mn-hero-art img { display: block; width: 100%; max-width: 1600px; height: auto; }

/* --- KPI row ---------------------------------------------------------------------------------- */

.mn-kpis {
  list-style: none; padding: 0; margin: 26px 0 0;
  display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 760px) { .mn-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mn-kpis li {
  background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-card);
  padding: 14px 16px;
}
.mn-kpi-n { display: block; font: 700 24px/1.1 var(--font-mono); color: var(--text-1); }
.mn-kpis a { color: var(--text-2); font-size: 13px; text-decoration: none; }
.mn-kpis a:hover { color: var(--link); text-decoration: underline; }

/* --- sections --------------------------------------------------------------------------------- */

.mn-sect { padding: 6px 0; }
.mn-prose { max-width: 74ch; }
.mn-note {
  font-size: 14px; color: var(--text-2); border-left: 3px solid var(--border-2);
  padding-left: 14px; margin: 16px 0 0; max-width: 74ch;
}

/* --- steps ------------------------------------------------------------------------------------ */

.mn-steps { list-style: none; counter-reset: s; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
.mn-steps > li {
  counter-increment: s; display: grid; grid-template-columns: 34px 1fr; gap: 14px;
  background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-card);
  padding: 16px 18px;
}
.mn-steps > li::before {
  content: counter(s); display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(122,44,247,.16); border: 1px solid var(--brand);
  color: var(--text-1); font: 700 15px/1 var(--font-mono);
}
.mn-steps p { margin: 0; }
.mn-steps b { color: var(--text-1); }

/* --- feature grid ----------------------------------------------------------------------------- */

.mn-features {
  list-style: none; padding: 0; margin: 18px 0 0;
  display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) { .mn-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mn-features { grid-template-columns: 1fr; } }
.mn-features li {
  background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-card);
  border-top: 2px solid var(--brand); padding: 16px 18px;
}
.mn-feature-k { display: block; color: var(--text-1); font-weight: 600; margin-bottom: 4px; }
.mn-features p { margin: 0; font-size: 14px; }

/* --- tables ----------------------------------------------------------------------------------- */

.mn-table-wrap { overflow-x: auto; margin: 18px 0 0; border: 1px solid var(--border);
  border-radius: var(--r-card); }
.mn-table { width: 100%; border-collapse: collapse; min-width: 520px; font-size: 15px; }
.mn-table caption { text-align: left; padding: 14px 16px 0; color: var(--text-2); font-size: 14px; }
.mn-table th, .mn-table td { text-align: left; padding: 12px 16px; border-top: 1px solid var(--border); }
.mn-table thead th { color: var(--text-1); font-weight: 600; border-top: 0; background: var(--bg-2); }
.mn-table tbody tr:nth-child(even) { background: rgba(255,255,255,.015); }
.mn-table th[scope="row"] { color: var(--text-1); font-weight: 500; }
.mn-table .num { font-family: var(--font-mono); }
.mn-asset { display: inline-flex; align-items: center; gap: 8px; }
.mn-asset img { width: 18px; height: 18px; }

/* --- pros / cons ------------------------------------------------------------------------------ */

.mn-pc { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin: 18px 0 0; }
@media (max-width: 700px) { .mn-pc { grid-template-columns: 1fr; } }
.mn-pc > div { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-card); padding: 16px 18px; }
.mn-pc h3 { margin: 0 0 10px; font-size: 16px; }
.mn-pc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 15px; }
.mn-pc-yes h3 { color: var(--up); }
.mn-pc-no h3 { color: var(--down-text); }
.mn-pc-yes li::before { content: "+ "; color: var(--up); font-weight: 700; }
.mn-pc-no li::before { content: "− "; color: var(--down-text); font-weight: 700; }

/* --- promo box -------------------------------------------------------------------------------- */

.mn-promo {
  margin: 18px 0 0; padding: 20px; border-radius: var(--r-card);
  background: linear-gradient(140deg, rgba(122,44,247,.16), rgba(9,9,13,0) 70%), var(--bg-1);
  border: 1px solid var(--brand);
}
.mn-promo-code {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 10px;
}
.mn-promo-code code {
  font: 700 22px/1 var(--font-mono); color: var(--text-1); letter-spacing: .06em;
  background: var(--bg-2); border: 1px dashed var(--border-2); border-radius: 8px; padding: 10px 16px;
}
.mn-promo p { margin: 0 0 6px; font-size: 15px; }
.mn-promo-when { font-size: 13px; color: var(--text-3); }

/* --- verdict bars ----------------------------------------------------------------------------- */

.mn-scores { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 14px; }
.mn-score-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mn-score-h b { color: var(--text-1); font-weight: 600; }
.mn-score-h span { font-family: var(--font-mono); color: var(--up); }
.mn-bar { margin-top: 6px; height: 7px; border-radius: var(--r-pill); overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--border); }
.mn-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--glow)); }
.mn-score-why { margin: 6px 0 0; font-size: 14px; color: var(--text-2); }

/* --- screenshots ------------------------------------------------------------------------------ */

.mn-shot { margin: 20px 0 0; }
.mn-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--border);
  border-radius: var(--r-card); }
.mn-shot figcaption { margin-top: 8px; font-size: 13px; color: var(--text-3); }
.mn-shot-phone { max-width: 320px; }

/* --- faq -------------------------------------------------------------------------------------- */

.mn-faq { display: grid; gap: 10px; margin: 18px 0 0; }
.mn-faq details {
  background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-card);
  padding: 14px 18px;
}
.mn-faq summary { cursor: pointer; color: var(--text-1); font-weight: 600; list-style: none; }
.mn-faq summary::-webkit-details-marker { display: none; }
.mn-faq summary::after { content: "+"; float: right; color: var(--glow); font-weight: 700; }
.mn-faq details[open] summary::after { content: "−"; }
.mn-faq p { margin: 10px 0 0; }

/* --- author box ------------------------------------------------------------------------------- */

.mn-author { display: grid; gap: 14px; grid-template-columns: 56px 1fr; margin: 26px 0 0;
  background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-card); padding: 18px; }
.mn-author-av { width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--border-2); background: var(--bg-2); }
.mn-author p { margin: 0 0 4px; font-size: 14px; }
.mn-author-n { color: var(--text-1); font-weight: 600; }

/* --- blog cards ------------------------------------------------------------------------------- */

.mn-posts { list-style: none; padding: 0; margin: 18px 0 0;
  display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .mn-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mn-posts { grid-template-columns: 1fr; } }
.mn-posts li { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-card); }
.mn-posts a { display: block; padding: 16px 18px; text-decoration: none; color: var(--text-1);
  font-weight: 600; font-size: 15px; }
.mn-posts a:hover { color: var(--link); }
.mn-post-cat { display: block; font: 500 12px/1 var(--font-body); color: var(--glow);
  text-transform: uppercase; letter-spacing: .09em; margin-bottom: 8px; }

/* --- sidebar bits ----------------------------------------------------------------------------- */

.mn-facts { list-style: none; padding: 0; margin: 0; font-size: 14px; display: grid; gap: 8px; }
.mn-facts li { display: grid; grid-template-columns: 1fr auto; gap: 10px;
  border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.mn-facts li:last-child { border-bottom: 0; padding-bottom: 0; }
.mn-facts b { color: var(--text-1); font-weight: 500; text-align: right; }

.mn-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; font-size: 14px; }
.mn-links a { color: var(--text-2); text-decoration: none; }
.mn-links a:hover { color: var(--link); text-decoration: underline; }

/* --- sticky mobile CTA ------------------------------------------------------------------------ */

.mn-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 14; display: none;
  background: rgba(16,16,21,.96); backdrop-filter: blur(10px);
  border-top: 1px solid var(--border); padding: 9px 14px;
}
.mn-sticky-in { display: flex; align-items: center; gap: 12px; max-width: 640px; margin: 0 auto; }
.mn-sticky span { font-size: 13px; color: var(--text-2); }
.mn-sticky .mn-btn { margin-left: auto; }
@media (max-width: 1040px) { .mn-sticky { display: block; } body { padding-bottom: 66px; } }

/* A topic that has no page yet: still readable, no longer a dead link. */
.mn-soon { color: var(--text-3); border-bottom: 1px dotted var(--border-2); cursor: default; }

/* --- breadcrumbs ------------------------------------------------------------------------------ */

.mn-crumbs { font-size: 13px; color: var(--text-3); padding-top: 16px; }
.mn-crumbs a { color: var(--text-2); text-decoration: none; }
.mn-crumbs a:hover { color: var(--link); text-decoration: underline; }

/* --- footer ----------------------------------------------------------------------------------- */

.mn-foot { border-top: 1px solid var(--border); background: var(--bg-1); padding: 40px 0 46px;
  font-size: 14px; }
.mn-foot-top { display: grid; gap: 26px; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
@media (max-width: 900px) { .mn-foot-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mn-foot-top { grid-template-columns: 1fr; } }
.mn-foot h4 { font-size: 14px; margin: 0 0 10px; }
.mn-foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.mn-foot a { color: var(--text-2); text-decoration: none; }
.mn-foot a:hover { color: var(--link); text-decoration: underline; }
.mn-foot-legal { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border);
  color: var(--text-3); font-size: 13px; }
.mn-foot-legal p { max-width: 100ch; }
.mn-langs { display: flex; gap: 8px; margin-top: 12px; }
.mn-langs a, .mn-langs span { border: 1px solid var(--border-2); border-radius: var(--r-pill);
  padding: 3px 11px; font-size: 13px; }
/* DE and ES are scoped but not written. They render as inert chips rather than links, because a
   footer link to a locale that does not exist is a 404 on every page of the site. */
.mn-langs span { color: var(--text-3); border-style: dashed; cursor: default; }

/* --- 404 -------------------------------------------------------------------------------------- */

.mn-404 { padding: 80px 0; text-align: center; }
.mn-404 .wrap { max-width: 60ch; }

/* --- blocks added with the P03–P32 page set --------------------------------------------- */

/* Callout: a boxed aside for a short procedure or a warning that must not read as body copy. */
.mn-callout {
  margin: 18px 0 0; padding: 18px 20px; background: var(--bg-2);
  border: 1px solid var(--border); border-left: 3px solid var(--brand);
  border-radius: var(--r-card); color: var(--text-2);
}
.mn-callout h3 { margin: 0 0 10px; color: var(--text-1); font-family: var(--font-head); font-size: 17px; }
.mn-callout ol, .mn-callout ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.mn-callout p { margin: 12px 0 0; }

/* Inline code chip — used for the promo code, which readers copy by eye. */
.mn-code {
  font-family: var(--font-mono); font-size: .95em; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 6px; background: var(--bg-2);
  border: 1px solid var(--border-2); color: var(--text-1);
}

/* Card grid for the guides index. auto-fit keeps every breakpoint full — no orphan row. */
.mn-cards { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.mn-cards a {
  display: grid; gap: 6px; height: 100%; padding: 16px 18px; text-decoration: none;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card);
  color: var(--text-2); transition: border-color .15s, background .15s;
}
.mn-cards a:hover, .mn-cards a:focus-visible { border-color: var(--brand); background: var(--bg-2); }
.mn-cards b { color: var(--text-1); font-family: var(--font-head); font-size: 16px; }
.mn-cards span { font-size: 14px; line-height: 1.5; }

/* The FAQ page proper: same component, more air, because it IS the page rather than a footer. */
.mn-faq-lg details { padding: 16px 18px; }
.mn-faq-lg summary { font-size: 17px; }

/* Screenshot figure. */
.mn-figure { display: block; width: 100%; height: auto; margin: 18px 0 0;
  border: 1px solid var(--border); border-radius: var(--r-card); }

/* Liquidation calculator (P11). */
.mn-calc { margin: 18px 0 0; padding: 18px 20px; background: var(--bg-2);
  border: 1px solid var(--border-2); border-radius: var(--r-card); }
.mn-calc .row { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.mn-calc label { display: grid; gap: 6px; font-size: 14px; color: var(--text-2); }
.mn-calc input, .mn-calc select {
  font: inherit; font-family: var(--font-mono); padding: 10px 12px; color: var(--text-1);
  background: var(--bg-1); border: 1px solid var(--border-2); border-radius: 8px;
}
.mn-calc input:focus-visible, .mn-calc select:focus-visible { outline: 2px solid var(--glow); outline-offset: 1px; }
.mn-calc-out { margin: 16px 0 0; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.mn-calc-out { list-style: none; padding: 0; }
.mn-calc-out li { display: grid; gap: 4px; padding: 12px 14px; background: var(--bg-1);
  border: 1px solid var(--border); border-radius: 10px; }
.mn-calc-out span { font-size: 13px; color: var(--text-2); }
.mn-calc-out b { font-family: var(--font-mono); font-size: 19px; color: var(--text-1);
  font-weight: 500; }

/* Operator wordmark, labelled. It is Moon.com's mark, never ours — the header wordmark is the
   site's own and these two must never be confusable, hence the caption sitting beside it. */
.mn-opbrand { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 12px 16px; background: var(--bg-2);
  border: 1px solid var(--border); border-radius: var(--r-card); }
.mn-opbrand span { font-size: 13px; color: var(--text-3); max-width: 42ch; }
.mn-opmark { height: 24px; width: auto; display: block; }