/* ============================================================================
   Milkdromeda — milkdromeda.ai
   Brand tokens mirror milkdromeda_ui `MilkdromedaColors` (light) and
   `MidnightColors` (dark), via the milkdromeda-design system.
   THE SIGNATURE BORDER: 8px top-left/bottom-right, 24px top-right/bottom-left.
   Never replace it with a symmetric radius — the lopsided corner is the brand.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800&family=Raleway:wght@400;500;600;700;800&display=swap');

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --mlk-primary: #C58D4B;
  --mlk-primary-dark: #635544;
  --mlk-primary-2: #B07D43;
  --mlk-primary-3: #E3A156;
  --mlk-accent: #E8C59E;
  --mlk-logo-accent: #29537B;

  --mlk-light3: #FFEAD1;
  --mlk-light2: #F5D0A6;
  --mlk-splash: rgba(197, 141, 75, .2);

  --mlk-success: #008552;
  --mlk-info: #4E9BDE;
  --mlk-alternate: #8B74E6;

  --mlk-dark1: #111111;
  --mlk-coal2: #191919;
  --mlk-grey1: #808386;
  --mlk-background: #FFFBF7;

  /* Semantic */
  --text-strong: var(--mlk-dark1);
  --text-body: #4A4642;
  --text-muted: var(--mlk-primary-dark);
  --text-subtle: var(--mlk-grey1);
  --text-on-brand: #FFFFFF;
  /* Ink for text sitting on a ground that is a FIXED colour rather than a
     themed surface: the white pill inside the CTA panel, the pressed state
     of a primary button. --mlk-primary-dark cannot be used there because it
     flips to #E0BB88 in Midnight, which is 1.81:1 on white. Same failure the
     --brand-gradient / --brand-gradient-text split exists to prevent. This
     token is deliberately absent from both dark blocks: it must not flip. */
  --brand-ink: #635544;

  --surface: #FFFFFF;
  --surface-sunken: var(--mlk-background);
  --surface-tint: var(--mlk-light3);
  --surface-deep: #16130F;

  --border: #F0E8DC;
  --border-strong: var(--mlk-light2);

  --link: var(--mlk-primary-2);
  --link-hover: var(--mlk-primary-dark);

  --button-bg: var(--mlk-primary-2);
  --button-fg: #FFFFFF;

  --brand-gradient: linear-gradient(120deg, #635544 0%, #B07D43 35%, #C58D4B 60%, #E3A156 82%, #E8C59E 100%);
  /* Text-fill variant of the brand gradient. Kept separate from
     --brand-gradient because that one also paints the CTA panel, which carries
     white labels: lightening it for Midnight would wreck that contrast. */
  --brand-gradient-text: var(--brand-gradient);
  --background-mesh: linear-gradient(135deg, #FFEAD1 0%, #FFFFFF 50%, #F5D0A6 100%);

  /* Type */
  --font-display: 'Nunito', system-ui, -apple-system, sans-serif;
  --font-text: 'Raleway', system-ui, -apple-system, sans-serif;

  --ls-title: 1.2px;
  --ls-label: 1.1px;
  --ls-wide: 1.5px;

  /* Shape — 8-point grid */
  --radius-signature: 8px 24px 8px 24px;
  --radius-signature-lg: 12px 36px 12px 36px;
  --radius-normal: 12px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .10);
  --shadow-card: 0 4px 14px rgba(0, 0, 0, .16);
  --shadow-lg: 0 14px 30px -14px rgba(0, 0, 0, .35);
  --shadow-float: 0 30px 60px -30px rgba(17, 17, 17, .5);

  --content-max: 1120px;
  --content-standard: 720px;
}

/* Midnight — the Milkdromeda dark theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mlk-primary-dark: #E0BB88;
    --mlk-light3: #322121;
    --mlk-light2: #170015;
    --mlk-background: #232323;

    --text-strong: #EEEEEE;
    --text-body: #D8D4D0;
    --text-muted: #E0BB88;
    --text-subtle: #8E8E8E;

    --surface: #1E1E1E;
    --surface-sunken: #232323;
    --surface-tint: #322121;
    --surface-deep: #141414;

    --border: #3A322B;
    --border-strong: #443A31;

    --link: #E3A156;
    --link-hover: #E8C59E;

    --background-mesh: linear-gradient(135deg, #322121 0%, #1E1E1E 50%, #170015 100%);
    --brand-gradient-text: linear-gradient(120deg, #B07D43 0%, #C58D4B 28%, #E3A156 62%, #E8C59E 100%);
    --shadow-card: 0 4px 14px rgba(0, 0, 0, .5);
    --shadow-lg: 0 14px 30px -14px rgba(0, 0, 0, .7);
  }
}

:root[data-theme="dark"] {
  --mlk-primary-dark: #E0BB88;
  --mlk-light3: #322121;
  --mlk-light2: #170015;
  --mlk-background: #232323;

  --text-strong: #EEEEEE;
  --text-body: #D8D4D0;
  --text-muted: #E0BB88;
  --text-subtle: #8E8E8E;

  --surface: #1E1E1E;
  --surface-sunken: #232323;
  --surface-tint: #322121;
  --surface-deep: #141414;

  --border: #3A322B;
  --border-strong: #443A31;

  --link: #E3A156;
  --link-hover: #E8C59E;

  --background-mesh: linear-gradient(135deg, #322121 0%, #1E1E1E 50%, #170015 100%);
  --brand-gradient-text: linear-gradient(120deg, #B07D43 0%, #C58D4B 28%, #E3A156 62%, #E8C59E 100%);
  --shadow-card: 0 4px 14px rgba(0, 0, 0, .5);
  --shadow-lg: 0 14px 30px -14px rgba(0, 0, 0, .7);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--surface-sunken);
  color: var(--text-body);
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: .2px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }

:focus-visible {
  outline: 2px solid var(--mlk-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* Grid and flex children default to min-width:auto, so a child that cannot
   wrap — the .term code block — sets the track's floor and pushes the whole
   page sideways on a phone. min-width:0 lets the track shrink so the child's
   own overflow-x:auto does the scrolling instead of the document. */
.hero__grid > *,
.feature > *,
.grid > *,
.plans > *,
.platforms > *,
.band > *,
.footer__grid > * {
  min-width: 0;
}

.section { padding: 96px 0; }
.section--tight { padding: 64px 0; }
.section--tint { background: var(--surface-tint); }
.section--surface { background: var(--surface); }

.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 16px;
}

h1, h2, h3 { color: var(--text-strong); margin: 0; }

h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.6px;
}

h3 {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: var(--ls-title);
  line-height: 1.4;
}

.lede {
  max-width: var(--content-standard);
  font-size: 18px;
  line-height: 1.8;
  color: var(--text-body);
  margin: 20px 0 0;
}

.section-head { margin-bottom: 48px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 96px;
  padding: 14px 27px;
  border: 0;
  border-radius: var(--radius-signature);
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: var(--ls-label);
  cursor: pointer;
  transition: border-radius .22s ease, background .18s ease, color .18s ease,
              transform .18s ease, box-shadow .18s ease;
}

.btn--primary {
  background: var(--button-bg);
  color: var(--button-fg);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--mlk-primary);
  color: var(--button-fg);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}
.btn--primary:active { border-radius: var(--radius-pill); background: var(--brand-ink); transform: none; }

.btn--ghost {
  background: transparent;
  color: var(--text-muted);
  box-shadow: inset 0 0 0 1.5px var(--border-strong);
}
.btn--ghost:hover { color: var(--text-strong); box-shadow: inset 0 0 0 1.5px var(--mlk-primary); }
.btn--ghost:active { border-radius: var(--radius-pill); }

.btn--on-dark {
  background: rgba(255, 255, 255, .10);
  color: #FFFFFF;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28);
}
.btn--on-dark:hover { background: rgba(255, 255, 255, .18); color: #FFFFFF; }
.btn--on-dark:active { border-radius: var(--radius-pill); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--surface-sunken) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background .2s ease;
}
.header.is-stuck { border-bottom-color: var(--border); }

.header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 72px;
}

.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
/* The banner lockup is a dark PNG with no light variant, so Midnight flips it
   to solid white rather than shipping a second asset. */
.brand img { height: 30px; width: auto; filter: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand img { filter: brightness(0) invert(1); }
}
:root[data-theme="dark"] .brand img { filter: brightness(0) invert(1); }

.brand__tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-tint);
  white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
/* :not(.btn) matters — the CTA is an anchor inside .nav, and a bare `.nav a`
   rule outranks `.btn--primary` on specificity, repainting its white label in
   the nav-link colour. */
.nav a:not(.btn) {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--text-body);
}
.nav a:not(.btn):hover { color: var(--mlk-primary-2); }

.header .btn { padding: 10px 22px; font-size: 14px; }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--text-strong);
}
.nav-toggle svg { width: 24px; height: 24px; }

@media (max-width: 900px) {
  .nav { display: none; }
  .nav-toggle { display: block; }
  .nav.is-open {
    display: flex;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 24px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-card);
  }
  .nav.is-open a { padding: 14px 0; border-bottom: 1px solid var(--border); }
  .nav.is-open .btn { margin-top: 16px; }
  .brand__tag { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 88px 0 96px;
  background: var(--background-mesh);
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--border);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 64px;
  align-items: center;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(38px, 5.6vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.6px;
}

.hero h1 .accent {
  background: var(--brand-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p.lede { font-size: 19px; }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 28px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.hero__meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero__meta span::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: var(--radius-pill);
  background: var(--mlk-primary);
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .hero { padding: 56px 0 64px; }
}

/* ---------- App mock ---------- */
.mock {
  border-radius: var(--radius-signature-lg);
  background: var(--surface);
  box-shadow: var(--shadow-float);
  border: 1px solid var(--border);
  overflow: hidden;
  font-size: 13px;
  line-height: 1.5;
}

.mock__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: var(--surface-tint);
  border-bottom: 1px solid var(--border);
}
.mock__dot { width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--border-strong); }
.mock__title {
  margin-left: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.mock__body { display: grid; grid-template-columns: 148px 1fr; min-height: 320px; }

.mock__rail {
  padding: 16px 12px;
  background: var(--surface-sunken);
  border-right: 1px solid var(--border);
}
.mock__rail-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-subtle);
  margin: 0 0 10px 8px;
}
.mock__rail-item {
  padding: 7px 8px;
  border-radius: 8px 16px 8px 16px;
  color: var(--text-body);
  font-weight: 600;
  font-size: 12.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.mock__rail-item.is-active { background: var(--surface-tint); color: var(--text-muted); }
.mock__badge {
  background: var(--mlk-primary-2);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
}

.mock__main { padding: 16px; display: flex; flex-direction: column; gap: 10px; }

.mock__msg { display: flex; gap: 10px; align-items: flex-start; }
.mock__avatar {
  width: 26px; height: 26px; flex: 0 0 26px;
  border-radius: 6px 14px 6px 14px;
  background: var(--brand-gradient);
}
.mock__msg b { color: var(--text-strong); font-size: 12.5px; font-weight: 700; letter-spacing: .3px; }
.mock__msg p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-body); }

.mock__ticket {
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: var(--radius-signature);
  border: 1px solid var(--border-strong);
  background: var(--surface-tint);
}
.mock__ticket-key {
  font-size: 9px; font-weight: 700; letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--text-muted);
}
.mock__ticket-title { font-size: 12.5px; font-weight: 700; color: var(--text-strong); }

.mock__chips { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.chip {
  font-size: 9.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text-muted);
  border: 1px solid var(--border-strong);
}

/* ---------- Cards ---------- */
.grid { display: grid; gap: 24px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 900px) {
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-signature);
  box-shadow: var(--shadow-card);
  padding: 28px 24px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.card h3 { margin-bottom: 10px; }
.card p { margin: 0; font-size: 15px; line-height: 1.7; }

.card__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 8px 20px 8px 20px;
  background: var(--surface-tint);
  color: var(--text-muted);
  margin-bottom: 18px;
}
.card__icon svg { width: 24px; height: 24px; }

.card__icon--sm { width: 38px; height: 38px; margin-bottom: 0; }
.card__icon--sm svg { width: 21px; height: 21px; }

/* ---------- Illustrated glyphs ---------- */
/* The same artwork family as milkdromeda-website's assets/icons/glyphs/. There
   a flutter_svg ColorMapper rewrites two sentinel colours; here inline SVG
   inherits `color`, so currentColor does the same job for free — line work at
   full strength, secondary masses at 30%. Keep the two in step: 24px viewBox,
   stroke-width 1.8, round caps and joins, no background (the slot draws it). */
.glyph .soft {
  fill: currentColor;
  fill-opacity: .3;
  stroke: none;
}

/* ---------- Feature rows ---------- */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 56px 0;
  border-top: 1px solid var(--border);
}
.feature:first-of-type { border-top: 0; }
.feature--flip .feature__art { order: -1; }

.feature h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.3px;
}
.feature p { margin: 14px 0 0; font-size: 16px; }

.feature__list { margin: 20px 0 0; padding: 0; list-style: none; }
.feature__list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.65;
}
.feature__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 8px; height: 8px;
  border-radius: 2px 6px 2px 6px;
  background: var(--mlk-primary);
}

.feature__art {
  border-radius: var(--radius-signature-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  padding: 24px;
  min-height: 240px;
}

@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; gap: 32px; padding: 40px 0; }
  .feature--flip .feature__art { order: 0; }
}

/* Kanban art */
.kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
/* Three tracks have an intrinsic minimum of 320px of content box. Measured on
   the pre-fix build, .kanban gets (viewport - 98)px, so the tracks only fit at
   a viewport of 418px or wider; below that they spill, and because body carries
   overflow-x:hidden the third column is CLIPPED rather than scrollable, so it
   cannot be reached at all. The spill is absorbed by the card's padding until
   about 400px and reaches the document edge by 360px.
   640px is chosen to clear that 418px floor with room, and because tracks near
   the floor are too narrow to hold a word like "notification" anyway.
   min-width:0 is the wrong tool here: it lets the tracks shrink past their
   intrinsic width and moves the overflow inside each card instead of removing
   it. Re-measure with document.querySelector('.kanban').scrollWidth vs
   .clientWidth, not documentElement.scrollWidth, which reports the page's
   overflow and not this element's need. */
@media (max-width: 640px) { .kanban { grid-template-columns: 1fr; } }
.kanban__col-title {
  font-size: 9px; font-weight: 700; letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--text-subtle); margin: 0 0 8px 2px;
}
.kanban__card {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: 6px 16px 6px 16px;
  padding: 10px;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-body);
  line-height: 1.45;
}
.kanban__meta { margin-top: 7px; display: flex; gap: 5px; align-items: center; }
.kanban__pip { width: 16px; height: 16px; border-radius: 4px 8px 4px 8px; background: var(--brand-gradient); }
.kanban__tag {
  font-size: 8.5px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase;
  color: var(--text-muted); background: var(--surface-tint);
  padding: 2px 7px; border-radius: var(--radius-pill);
}

/* Connect art — terminal */
.term {
  background: var(--surface-deep);
  border-radius: var(--radius-normal);
  padding: 18px 20px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.85;
  color: #C9C2B8;
  overflow-x: auto;
}
.term .c-key { color: var(--mlk-primary-3); }
.term .c-str { color: #9DD5A6; }
.term .c-dim { color: #6F6862; }

/* ---------- Pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: start; }
@media (max-width: 820px) { .plans { grid-template-columns: 1fr; } }

.plan {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-signature-lg);
  box-shadow: var(--shadow-card);
  padding: 32px;
}
.plan--featured {
  border-color: var(--mlk-primary);
  box-shadow: var(--shadow-lg);
  position: relative;
}
.plan__flag {
  position: absolute;
  top: 20px; right: 24px;
  font-size: 9.5px; font-weight: 700; letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-on-brand);
  background: var(--mlk-primary-2);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}

.plan__name {
  font-size: 11px; font-weight: 700; letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--text-muted); margin: 0;
}
.plan__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 46px;
  line-height: 1.1;
  letter-spacing: -0.6px;
  color: var(--text-strong);
  margin: 12px 0 0;
}
.plan__price small { font-family: var(--font-text); font-size: 15px; font-weight: 600; color: var(--text-subtle); letter-spacing: .3px; }
.plan__note { margin: 8px 0 0; font-size: 13.5px; color: var(--text-subtle); }

.plan__list { list-style: none; margin: 24px 0 0; padding: 0; }
.plan__list li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--border);
  font-size: 14.5px;
  line-height: 1.55;
}
.plan__list li:first-child { border-top: 0; }
.plan__list svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 4px; color: var(--mlk-primary); }
.plan__list b { color: var(--text-strong); font-weight: 700; }

.plan .btn { width: 100%; margin-top: 28px; }

.pricing-fine {
  margin: 32px auto 0;
  max-width: var(--content-standard);
  text-align: center;
  font-size: 13px;
  color: var(--text-subtle);
  line-height: 1.7;
}

/* ---------- Platforms ---------- */
.platforms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 820px) { .platforms { grid-template-columns: 1fr; } }

.platform {
  border-radius: var(--radius-signature);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 26px 24px;
}
.platform__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.platform__head .status-pill { margin-bottom: 0; }

.platform h3 { font-size: 17px; margin-bottom: 6px; }
.platform p { margin: 0 0 18px; font-size: 14px; color: var(--text-subtle); }
.platform .btn { width: 100%; }

.status-pill {
  display: inline-block;
  font-size: 9.5px; font-weight: 700; letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: var(--surface-tint);
  color: var(--text-muted);
  margin-bottom: 14px;
}

/* ---------- Kwentee band ---------- */
.band {
  background: var(--surface-deep);
  color: #E6E0D8;
  border-radius: var(--radius-signature-lg);
  padding: 48px;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 40px;
  align-items: center;
}
.band h2 { color: #FFFFFF; }
.band p { color: rgba(255, 255, 255, .68); margin: 16px 0 0; }
.band .eyebrow { color: var(--mlk-primary-3); }
@media (max-width: 900px) { .band { grid-template-columns: 1fr; padding: 32px; } }

/* ---------- Final CTA ---------- */
.cta {
  border-radius: var(--radius-signature-lg);
  background: var(--brand-gradient);
  padding: 64px 48px;
  text-align: center;
  color: #FFFFFF;
  box-shadow: var(--shadow-lg);
}
.cta h2 { color: #FFFFFF; }
.cta p { color: rgba(255, 255, 255, .86); max-width: 560px; margin: 16px auto 0; }
.cta .btn-row { justify-content: center; }
.cta .btn--primary { background: #FFFFFF; color: var(--brand-ink); }
.cta .btn--primary:hover { background: #FFFFFF; color: var(--mlk-dark1); }
@media (max-width: 700px) { .cta { padding: 44px 24px; } }

/* ---------- Footer ---------- */
.footer {
  background: var(--surface-deep);
  color: rgba(255, 255, 255, .62);
  padding: 64px 0 32px;
  font-size: 14px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px;
}
@media (max-width: 820px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } }

.footer img { height: 28px; width: auto; filter: brightness(0) invert(1); }
.footer h3 {
  margin: 0 0 14px;
  font-size: 10px; font-weight: 700; letter-spacing: var(--ls-wide);
  /* These were <h4> until the heading levels were made to descend properly.
     There is no global h4 rule, so they used to inherit their line-height;
     as <h3> they would pick up 1.4 from the global h3 and lose 3.5px of box
     height each. Pinned to the value they have always computed to (17.5px on
     a 10px label) so the level change stays purely semantic. */
  line-height: 1.75;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 9px; }
.footer a { color: rgba(255, 255, 255, .72); font-size: 14px; }
.footer a:hover { color: var(--mlk-primary-3); }
.footer__blurb { margin: 18px 0 0; font-size: 14px; line-height: 1.7; max-width: 340px; color: rgba(255, 255, 255, .55); }

.footer__base {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .10);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .40);
}

/* ---------- Utilities ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  padding: 10px 18px;
  background: var(--surface);
  color: var(--text-strong);
  border-radius: var(--radius-signature);
  box-shadow: var(--shadow-card);
}
.skip-link:focus { left: 24px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}