/* Mukhdaa — the dark redesign. Serves every page: /, /pricing and /legal.

   Extracted from the "Mukhdaa Site.dc.html" and "Mukhdaa Pricing.dc.html"
   Claude Design exports. Those inline every declaration on every element and
   render through the Claude Design runtime (<x-dc>, <sc-for>, <sc-if>, {{ }}
   interpolation and a DCLogic component class); none of that survives here.
   The palette, type scale, spacing and motion are the design's, unchanged.

   /legal keeps the markup and every word of the text it already had; only
   its chrome and palette moved here. site.css and site.js are retired.

   One selector genuinely collides across pages: /legal wraps its header in
   <div class="mk-pad mk-hero"> while / uses <section class="mk-hero">, so the
   legal rules are written as .mk-pad.mk-hero to stay off the homepage. */

:root {
  --bg: #08080A;
  --bg-2: #0B0B0E;
  --card: #101014;
  --card-2: #16161C;

  --ink: #F5F2ED;
  --ink-rgb: 245, 242, 237;
  --dim: rgba(245, 242, 237, .66);
  --dim-2: rgba(245, 242, 237, .58);
  --dim-3: rgba(245, 242, 237, .8);

  --line: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .09);

  /* ── the brand red, at two values ──────────────────────────────────────
     ONE hue (8.8°), two lightnesses. This is the fix for the drift the owner
     spotted: the mark was #C0402A, the app shipped coral #FF8452 (hue 17.3)
     and this file shipped #FF5A32 (hue 11.7) — three different reds reading as
     three different brands.

     --brand-red is the logo/print value. It is 4.95:1 on the kit's paper
     #FBF8F3 (passes AA text) but only 3.82:1 on our #08080A, which FAILS AA
     for body text — so it must never be typeset on these dark pages. It is
     here because the cover plate below is a graphic, not text, and because
     naming it keeps the site and the app quoting the same number.

     --ac is that same 8.8° hue lifted in lightness until it clears AA on
     black: 6.17:1 on --bg. Raising lightness at a fixed hue is the ordinary
     brand-plus-dark-tint move, and it is what makes the mark and the UI read
     as one red instead of two.

     --ac2/--ac3 are NOT hand-picked. They are the output of the design's own
     companions(hex) — the HSL walk that rotates +0.055/+0.105 turn and lifts
     lightness +0.10/+0.26 — run on the new --ac and baked in so the gradients
     survive with script off. Re-run that function if --ac ever moves; do not
     nudge these by eye, or the gradient stops being derived from the accent.
     (Sanity check on the port: the same function fed the old #FF5A32 returns
     the old #FFB665/#FBF0BB exactly, which is how we know it is the one the
     design used.) */
  --brand-red: #C0402A;
  --ac: #FF5133;
  --ac2: #FFAF66;
  --ac3: #FBEDBC;

  /* Accent pulled toward --ink for small text that sits on the accent's own
     tinted backgrounds. Replaces a hardcoded #FFB49B, which was a tint of the
     OLD accent and sat at hue 15.0 — visibly a different red next to the mark.
     Mixed from tokens so it can never drift off --ac again. */
  --ac-soft: color-mix(in srgb, var(--ac) 45%, var(--ink));

  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: Archivo, system-ui, sans-serif;

  --nav-h: 70px;
  --pad: 32px;
  --max: 1240px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

.mk-root {
  position: relative;
  overflow-x: hidden;
}

/* Link and hover were hardcoded #FF7A56/#FF9A7E — tints of the old #FF5A32,
   sitting at hue 12.8 and 13.0 against the mark's 8.8. Mixed off --ac instead:
   same two steps of lightness, hue now inherited, and contrast on --bg stays
   where it was (7.2:1 and 9.3:1, both clear of AA). */
a {
  color: color-mix(in srgb, var(--ac) 82%, var(--ink));
  text-decoration: none;
}

a:hover {
  color: color-mix(in srgb, var(--ac) 58%, var(--ink));
}

::selection {
  background: var(--ac);
  color: #08080A;
}

button {
  font-family: inherit;
  cursor: pointer;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.05em;
  margin: 0;
}

.ms {
  font-family: 'Material Symbols Rounded';
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  display: inline-block;
}

/* Devanagari has no glyphs in Bricolage or Archivo, so the Hindi sample lyric
   would fall back to whatever the OS offers. Name a face that actually covers
   the script. */
.mk-dev {
  font-family: 'Noto Sans Devanagari', var(--font-body);
}

.mk-pad {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.mk-spacer {
  flex: 1;
}

.mk-grad {
  background: linear-gradient(105deg, var(--ac), var(--ac2) 58%, var(--ac3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ══ chrome ═══════════════════════════════════════════════════════════════ */

.mk-grain {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: .22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

.mk-prog-rail {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 920;
  background: rgba(255, 255, 255, .06);
}

.mk-prog {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--ac), var(--ac2));
  box-shadow: 0 0 12px var(--ac);
}

.mk-nav {
  position: sticky;
  top: 0;
  z-index: 800;
  /* The mobile menu panel hangs off this bar, so it needs to be the
     positioning context — sticky already establishes one, named here so it is
     not "simplified" away. */
  background: rgba(8, 8, 10, .72);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}

.mk-nav-in {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 38px;
}

/* THE LOGO IS ALWAYS --brand-red ON A DARK GROUND.
   It is a LOGOTYPE, and WCAG 1.4.3 exempts logotypes from the contrast
   minimum outright, so the 3.82:1 that keeps --brand-red out of body copy
   does not apply here. This used to inherit --ink, which made the site's
   wordmark cream while the app's was --ac orange and the emails' was a
   letterspaced caps run — four logos for one brand. The kit states the rule
   as three grounds, and these are the only three values a logo may take:
     dark ground      -> --brand-red
     brand-red ground -> #FBF8F3 (paper)
     light ground     -> #17130F (ink)  */
.mk-brand {
  display: inline-flex;
  align-items: center;
  color: var(--brand-red);
  flex: none;
}

/* ── THE WORDMARK ──────────────────────────────────────────────────────────
   Ported verbatim from the brand kit ("Mukhdaa Logos", 06b Down the sizes).
   It is NOT a font run: there is no letter d in the wordmark. The d is a
   drawn note — an angled bowl plus an upright stem — and the M carries a
   second note-head hung off its lower left. Setting the string "Mukhdaa" in
   Bricolage Grotesque and calling it done looks close and is wrong.

   Everything is expressed in em against .mk-wm's font-size, so one size knob
   scales the whole lockup: change --wm-size, never the ratios.

   The rule sits above the lettering and the lettering is indented a quarter
   em under it, which is the space the M's note-head hangs into. The kit's own
   note on 06b: the M's head closes into the stem before the d's does. That is
   expected below ~14px and must not be "fixed" by nudging these numbers. */
.mk-wm {
  --wm-size: 26px;
  display: inline-block;
  /* The logo OWNS its colour; it never inherits one.
     This read `currentColor`, and the three places the wordmark appears each
     picked up whatever their container happened to set: the nav lockup is an
     <a>, so it took the link mix (a peachy #FB9581); the footer took a 75%
     dim; only the final CTA, which sets its own colour, was right. Three
     wordmarks, three reds, on one page.
     Overridable per instance by setting --wm-ink (the icon tile passes the
     paper value) — but the DEFAULT is the brand red, and inheritance is not
     part of the contract. */
  --wm-ink: var(--brand-red);
  color: var(--wm-ink);
  font-size: var(--wm-size);
  line-height: .9;
}

.mk-wm-rule {
  display: block;
  height: .1136em;   /* 5/44 at the kit's 44px reference */
  background: currentColor;
}

.mk-wm-gap {
  display: block;
  height: .159em;    /* 7/44 */
}

.mk-wm-word {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: .9;
  white-space: nowrap;
  margin-left: .25em;
}

/* The M and its hung note-head. */
.mk-wm-m {
  position: relative;
  display: inline-block;
  line-height: .9;
}

.mk-wm-m::after {
  content: "";
  position: absolute;
  left: -.25em;
  top: .62em;
  width: .44em;
  height: .32em;
  border-radius: 50%;
  background: currentColor;
  transform: rotate(-20deg);
}

/* The drawn "d": one advance containing a bowl and a stem. */
.mk-wm-d {
  display: inline-block;
  position: relative;
  width: .60em;
  height: .80em;
  vertical-align: baseline;
  margin: 0 .05em 0 .02em;
}

.mk-wm-d::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: .56em;
  height: .40em;
  border-radius: 50%;
  background: currentColor;
  transform: rotate(-20deg);
}

.mk-wm-d::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: .165em;
  height: .80em;
  border-radius: .02em .02em 0 0;
  background: currentColor;
}

.mk-navlinks {
  display: flex;
  align-items: center;
  gap: 30px;
}

.mk-navlinks a {
  font-size: 11.5px;
  letter-spacing: .14em;
  font-weight: 600;
  color: var(--dim);
}

.mk-navlinks a:hover {
  color: var(--ink);
}

.mk-navlinks a.is-current {
  color: var(--ac);
}

/* The mobile nav toggle. Hidden above 860px, where .mk-navlinks is a row.
   A real <button> with aria-expanded, not a styled div: the state has to reach
   a screen reader, and Space/Enter have to work without being re-implemented. */
.mk-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-left: 10px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  flex: none;
}

.mk-menu-btn .ms {
  font-size: 22px;
}

.mk-menu-btn:hover {
  background: rgba(255, 255, 255, .05);
}

.mk-cta {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 20px;
  border-radius: 100px;
  background: var(--ac);
  color: #0A0A0C;
  font-size: 11.5px;
  letter-spacing: .13em;
  font-weight: 700;
  white-space: nowrap;
  flex: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 8px 28px -8px var(--ac);
}

.mk-cta:hover {
  color: #0A0A0C;
}

/* ══ shared pieces ════════════════════════════════════════════════════════ */

.mk-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 58px;
  padding: 0 28px;
  border-radius: 100px;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}

.mk-btn .ms {
  font-size: 20px;
}

.mk-btn-fill {
  background: var(--ac);
  color: #0A0A0C;
  box-shadow: 0 14px 40px -12px var(--ac);
}

.mk-btn-fill:hover {
  color: #0A0A0C;
  filter: brightness(1.06);
}

.mk-btn-line {
  border: 1px solid rgba(255, 255, 255, .17);
  background: rgba(255, 255, 255, .04);
  color: var(--ink);
  font-weight: 600;
  padding: 0 26px;
}

.mk-btn-line:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, .08);
}

.mk-h2 {
  font-size: clamp(32px, 4.6vw, 62px);
  line-height: .94;
}

.mk-h2-w {
  max-width: 640px;
}

.mk-lede {
  font-size: 20px;
  line-height: 1.55;
  color: var(--dim);
  text-wrap: pretty;
  margin: 0;
}

.mk-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
}

/* ══ hero ═════════════════════════════════════════════════════════════════ */

.mk-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.mk-hero-glow {
  position: absolute;
  top: -26%;
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  height: 135%;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--ac) 26%, transparent), transparent 62%);
  filter: blur(72px);
  animation: mkDrift 20s ease-in-out infinite;
  pointer-events: none;
}

.mk-hero-mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .024) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(115% 85% at 50% 25%, #000 18%, transparent 70%);
  -webkit-mask-image: radial-gradient(115% 85% at 50% 25%, #000 18%, transparent 70%);
}

.mk-hero-in {
  position: relative;
  max-width: 1000px;
  padding-top: 118px;
  padding-bottom: 104px;
  text-align: center;
}

.mk-hero-in h1 {
  margin: 0 0 26px;
  font-size: clamp(50px, 8vw, 116px);
  line-height: .88;
}

.mk-hero-in .mk-lede {
  margin: 0 auto 40px;
  max-width: 540px;
}

.mk-hero-cta {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  scroll-margin-top: 100px;
}

.mk-hero-note {
  margin: 22px 0 0;
  font-size: 11px;
  letter-spacing: .16em;
  font-weight: 600;
  color: rgba(var(--ink-rgb), .4);
}

.mk-stats {
  display: flex;
  gap: 44px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 52px;
}

.mk-stat b {
  display: block;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}

.mk-stat span {
  display: block;
  font-size: 11.5px;
  letter-spacing: .13em;
  color: var(--dim);
  margin-top: 5px;
}

/* ══ the line ═════════════════════════════════════════════════════════════ */

.mk-line {
  position: relative;
  overflow: hidden;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}

.mk-line-glow {
  position: absolute;
  top: -30%;
  left: -6%;
  width: 56%;
  height: 170%;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--ac) 15%, transparent), transparent 64%);
  filter: blur(76px);
  animation: mkDrift 24s ease-in-out infinite;
  pointer-events: none;
}

.mk-line-in {
  position: relative;
  padding-top: 92px;
  padding-bottom: 92px;
}

.mk-line-in>div {
  max-width: 900px;
}

.mk-kicker {
  font-size: 11.5px;
  letter-spacing: .18em;
  font-weight: 700;
  margin: 0 0 22px;
  color: var(--dim-2);
}

.mk-kicker-ac {
  color: var(--ac);
}

.mk-line-in h2 {
  margin: 0 0 24px;
  font-size: clamp(44px, 6.6vw, 96px);
  line-height: .86;
}

.mk-lede-l {
  max-width: 560px;
  color: rgba(var(--ink-rgb), .68);
}

/* ══ songs ════════════════════════════════════════════════════════════════ */

.mk-songs {
  border-bottom: 1px solid var(--line);
  scroll-margin-top: var(--nav-h);
  padding: 100px 0;
}

.mk-songs .mk-h2 {
  margin-bottom: 44px;
}

.mk-song-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.mk-song {
  border-radius: 22px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line-2);
  display: flex;
  flex-direction: column;
  transition: border-color .3s ease, box-shadow .3s ease;
}

.mk-song.is-on {
  border-color: color-mix(in srgb, var(--ac) 45%, transparent);
  box-shadow: 0 24px 70px -34px var(--ac);
}

/* 4:5, not the 5:4 this shipped with.
   The plate holds a 9:16 reel under object-fit: cover, and cover keeps only
   `content-aspect / plate-aspect` of the frame: at 5:4 that was 0.5625/1.25 =
   45%, so 55% of every render was cropped away. On the gym photo it took the
   hands on the bar AND the feet, leaving a torso — the photo's whole subject
   gone. 4:5 shows 70% and keeps a full-height standing figure intact.
   9:16 would show 100%, but the missing 30% is the reel's own blurred
   letterbox padding rather than picture, and a 9:16 plate makes the card 669px
   tall against 470px here — a much worse page for no more subject. */
.mk-song-art {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  border: none;
  padding: 0;
  background-color: var(--card-2);
  text-align: left;
}

/* The design pulled three random stock-service photographs in here. Random
   photographs of strangers are not shipping on a page about photo consent, so
   these are brand-gradient plates until real cover art from the three sample
   songs exists. TODO(launch): swap for the real covers. */
/* Card A was three hardcoded near-misses of the brand red: #FF8A4C at hue 20.8
   (orange, not red), #C0341B at 9.1 and #2A0F0A at 9.4 — close enough to look
   like a mistake rather than a choice. Same three stops, same positions, now
   token-derived: the accent's warm companion, the actual brand red, and that
   brand red sunk into the page background for the shadow. A cover plate is a
   graphic, so --brand-red is legitimate here even though it must never be
   typeset on this background.
   Cards B and C are deliberately NOT touched — see the note below. */
.mk-art-a {
  background-image: radial-gradient(120% 100% at 22% 18%,
      var(--ac2) 0%,
      var(--brand-red) 42%,
      color-mix(in srgb, var(--brand-red) 26%, var(--bg)) 100%);
}

/* B is indigo (hue 233) and C is teal (168). Those are not accent drift — they
   are the monsoon and the 2 a.m. rooftop, three distinguishable plates for
   three songs. Pulling them onto the brand hue would make the row one colour
   and lose the point, so they keep their own hues until real cover art lands. */

.mk-art-b {
  background-image: radial-gradient(120% 100% at 78% 20%, #6E7BE0 0%, #2E2C6B 46%, #100E24 100%);
}

.mk-art-c {
  background-image: radial-gradient(120% 100% at 30% 80%, #2E9C86 0%, #1B4C55 48%, #0B1518 100%);
}

.mk-song-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 8, 10, .92), rgba(8, 8, 10, .04) 62%);
}

.mk-song-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--ac);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 34px -8px var(--ac);
  transition: transform .2s ease;
}

.mk-song-art:hover .mk-song-play {
  transform: translate(-50%, -50%) scale(1.06);
}

/* The real render, filling the plate. The reel is 9:16 and the plate is 5:4, so
   object-fit: cover crops the sides rather than letterboxing — the subject is
   centred in a vertical reel, which is the half that survives the crop.

   It sits UNDER .mk-song-scrim and .mk-song-play (both later siblings), so the
   play glyph stays legible over whatever frame is showing. Before playback the
   poster frame is whatever preload="metadata" resolved, and the gradient plate
   shows through until then — which is why .mk-art-a keeps its background. */
.mk-song-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}

.mk-song-play .ms {
  font-size: 34px;
  color: #0A0A0C;
}

.mk-song-art:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: -4px;
}

.mk-song-art.is-loading .mk-song-play .ms {
  animation: mkSpin .9s linear infinite;
}

/* No sample file yet: the button stops pretending to be a button and says so
   rather than doing nothing when tapped. */
.mk-song-art.is-pending {
  cursor: default;
}

.mk-song-art.is-pending .mk-song-play {
  background: rgba(255, 255, 255, .1);
  box-shadow: none;
}

.mk-song-art.is-pending .mk-song-play .ms {
  color: rgba(var(--ink-rgb), .5);
}

.mk-song-art.is-pending:hover .mk-song-play {
  transform: translate(-50%, -50%);
}

.mk-song-pending {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  margin: 0;
  text-align: center;
  font-size: 10.5px;
  letter-spacing: .16em;
  font-weight: 600;
  color: rgba(var(--ink-rgb), .55);
}

.mk-wave {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 36px;
}

.mk-wave i {
  flex: 1;
  border-radius: 1px;
  background: var(--ac);
  opacity: .3;
  transition: opacity .12s linear;
}

.mk-song-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.mk-song-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.mk-song-head h3 {
  font-size: 22px;
  letter-spacing: -.03em;
}

.mk-song-time {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--dim);
  white-space: nowrap;
}

.mk-song-meta {
  font-size: 11.5px;
  letter-spacing: .13em;
  color: var(--dim);
  margin: 6px 0 14px;
}

.mk-song-rail {
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
  margin-bottom: 16px;
}

.mk-song-fill {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ac), var(--ac2));
}

.mk-song-lyric {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--dim-3);
  font-style: italic;
  flex: 1;
  transition: opacity .2s ease;
}

/* The English rendering of a non-English sung line. Quieter and smaller than
   the lyric it translates — it is a reading aid, not a second lyric — and it
   shares .mk-song-lyric's fade timing because setLyric moves both on one
   timer. Absent on English cards, so the rule simply never matches there. */
.mk-song-gloss {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--dim-2);
  transition: opacity .2s ease;
}

.mk-song-gloss.is-swap {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .mk-song-gloss {
    transition: none;
  }
}


/* The lyric line swaps as the song plays. Only the opacity is animated — the
   line height is not, because the lines are different lengths and animating
   the box would jog the card's footer on every change.

   min-height reserves two lines so a one-line lyric ("Golden Hour Glow") and a
   two-line one ("...the waves are soft and slow") do not resize the card as
   they alternate. Without it the whole grid row twitches every three seconds.
   2 lines × 1.6 line-height × 15.5px = 49.6px. */
.mk-song-lyric.is-timed {
  min-height: 49.6px;
}

.mk-song-lyric.is-swap {
  opacity: 0;
}

.mk-song-lyric.mk-dev {
  font-style: normal;
}

.mk-songs-note {
  margin: 28px 0 0;
  font-size: 12.5px;
  letter-spacing: .04em;
  color: rgba(var(--ink-rgb), .45);
}

/* ══ features ═════════════════════════════════════════════════════════════ */

.mk-features {
  border-bottom: 1px solid var(--line);
  scroll-margin-top: var(--nav-h);
  padding: 100px 0;
}

.mk-features .mk-h2 {
  margin-bottom: 44px;
}

.mk-feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: 22px;
  overflow: hidden;
}

.mk-feat {
  background: #0A0A0C;
  padding: 32px 28px;
}

.mk-feat .ms {
  font-size: 26px;
  color: var(--ac);
}

.mk-feat b {
  display: block;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 18px 0 8px;
}

.mk-feat p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--dim-2);
}

/* ══ pricing teaser ═══════════════════════════════════════════════════════ */

.mk-price {
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

.mk-price-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 150%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--ac) 16%, transparent), transparent 62%);
  filter: blur(60px);
  pointer-events: none;
}

.mk-price-in {
  position: relative;
  padding-top: 100px;
  padding-bottom: 100px;
}

.mk-price-lede {
  margin: 18px 0 30px;
  font-size: 17px;
  line-height: 1.62;
  color: var(--dim-2);
  max-width: 440px;
}

.mk-price .mk-btn {
  height: 54px;
  padding: 0 26px;
  font-size: 15.5px;
}

.mk-price-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mk-price-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--line-2);
}

.mk-price-row.is-pro {
  background: linear-gradient(120deg, color-mix(in srgb, var(--ac) 16%, transparent), color-mix(in srgb, var(--ac2) 8%, transparent));
  border-color: color-mix(in srgb, var(--ac) 40%, transparent);
}

.mk-price-amt {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.03em;
  min-width: 96px;
}

.mk-price-row.is-pro .mk-price-amt {
  color: var(--ac);
}

.mk-price-row b {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
}

.mk-price-row span {
  display: block;
  font-size: 13.5px;
  color: var(--dim-2);
  margin-top: 2px;
}

.mk-price-row.is-pro span {
  color: var(--dim);
}

/* ══ faq ══════════════════════════════════════════════════════════════════ */

.mk-faq {
  border-bottom: 1px solid var(--line);
  scroll-margin-top: var(--nav-h);
  padding: 100px 0;
}

.mk-faq-two {
  grid-template-columns: .8fr 1.2fr;
  align-items: start;
}

.mk-faq-title {
  position: sticky;
  top: calc(var(--nav-h) + 40px);
}

.mk-faq-list {
  display: flex;
  flex-direction: column;
}

.mk-faq-item {
  border-top: 1px solid var(--line-2);
  padding: 24px 0;
}

.mk-faq-item b {
  display: block;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-bottom: 10px;
}

.mk-faq-item p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(var(--ink-rgb), .6);
}

/* ══ ai disclosure ════════════════════════════════════════════════════════ */

.mk-ai {
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}

.mk-ai-in {
  padding-top: 56px;
  padding-bottom: 56px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.mk-ai-icon {
  font-size: 24px;
  color: var(--ac);
  flex: none;
}

.mk-ai p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(var(--ink-rgb), .6);
  max-width: 760px;
  flex: 1;
  min-width: 280px;
}

/* ══ final cta ════════════════════════════════════════════════════════════ */

.mk-final {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.mk-final-glow {
  position: absolute;
  bottom: -60%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 150%;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--ac) 24%, transparent), transparent 60%);
  filter: blur(70px);
  animation: mkDrift 21s ease-in-out infinite;
  pointer-events: none;
}

.mk-final-in {
  position: relative;
  padding-top: 118px;
  padding-bottom: 118px;
  text-align: center;
}

/* The wordmark is inline-block and sized in em, so it must be shrink-wrapped
   before it is centred — width:auto on a block would stretch the rule across
   the whole section. Colour comes from --brand-red like every other logo
   surface; see the .mk-brand note. */
.mk-final-mark {
  display: block;
  width: fit-content;
  margin: 0 auto 30px;
}

.mk-final-in h2 {
  margin: 0 0 20px;
  font-size: clamp(38px, 6vw, 86px);
  line-height: .92;
}

.mk-final-in>p {
  margin: 0 auto 38px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--dim-2);
  max-width: 480px;
}

/* ══ footer ═══════════════════════════════════════════════════════════════ */

.mk-foot {
  padding-top: 52px;
  padding-bottom: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}

.mk-foot-brand {
  color: rgba(var(--ink-rgb), .75);
  gap: 13px;
}

.mk-foot-brand span {
  font-size: 13px;
}

.mk-foot-links {
  display: flex;
  gap: 24px;
  font-size: 14.5px;
  flex-wrap: wrap;
}

.mk-foot-links a {
  color: var(--dim);
}

.mk-foot-links a:hover {
  color: var(--ink);
}

.mk-foot-copy {
  font-size: 13px;
  color: rgba(var(--ink-rgb), .62);
}

/* ══ /pricing ═════════════════════════════════════════════════════════════ */

.mk-phead {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.mk-phead-glow {
  position: absolute;
  top: -40%;
  left: 50%;
  width: 80%;
  height: 150%;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--ac) 22%, transparent), transparent 62%);
  filter: blur(70px);
  animation: mkDriftC 22s ease-in-out infinite;
  pointer-events: none;
}

.mk-phead-in {
  position: relative;
  padding-top: 78px;
  padding-bottom: 60px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 56px;
  align-items: end;
}

.mk-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 31px;
  padding: 0 13px;
  border-radius: 100px;
  border: 1px solid color-mix(in srgb, var(--ac) 35%, transparent);
  background: color-mix(in srgb, var(--ac) 9%, transparent);
  margin-bottom: 26px;
  font-size: 10.5px;
  letter-spacing: .17em;
  font-weight: 700;
  color: var(--ac-soft);
}

.mk-phead-in h1 {
  margin: 0;
  font-size: clamp(44px, 6.6vw, 88px);
  line-height: .9;
}

.mk-phead-lede {
  margin: 0 0 24px;
  font-size: 17px;
  line-height: 1.62;
  color: var(--dim-2);
}

.mk-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* Segmented pill. Real <button>s in a role=group, so keyboard and screen
   readers come free — the design used div+onClick, which neither reaches. */
.mk-seg {
  display: inline-flex;
  padding: 4px;
  border-radius: 100px;
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, .1);
}

.mk-seg button {
  height: 40px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: 100px;
  background: transparent;
  color: var(--dim-2);
  font-size: 12.5px;
  letter-spacing: .08em;
  font-weight: 700;
  transition: background .2s ease, color .2s ease;
}

.mk-seg button[aria-pressed="true"] {
  background: var(--ac);
  color: #0A0A0C;
}

.mk-seg button:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 2px;
}

.mk-seg-cur button {
  padding: 0 18px;
}

.mk-plans {
  padding-top: 56px;
}

.mk-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.mk-plan {
  position: relative;
  padding: 34px 30px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--line-2);
  display: flex;
  flex-direction: column;
}

.mk-plan.is-hero {
  background: linear-gradient(150deg, color-mix(in srgb, var(--ac) 18%, transparent), color-mix(in srgb, var(--ac2) 6%, transparent) 62%, rgba(255, 255, 255, .02));
  border-color: color-mix(in srgb, var(--ac) 45%, transparent);
  box-shadow: 0 24px 70px -30px color-mix(in srgb, var(--ac) 60%, transparent);
}

.mk-plan-tag {
  position: absolute;
  top: 26px;
  right: 26px;
  padding: 5px 10px;
  border-radius: 100px;
  background: var(--ac);
  color: #0A0A0C;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.mk-plan-eyebrow {
  font-size: 10.5px;
  letter-spacing: .18em;
  font-weight: 700;
  color: rgba(var(--ink-rgb), .45);
  margin: 0 0 20px;
}

.mk-plan.is-hero .mk-plan-eyebrow {
  color: var(--ac-soft);
}

.mk-plan-price {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 14px;
}

.mk-plan-amt {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.4vw, 58px);
  line-height: .88;
  letter-spacing: -.045em;
  font-weight: 800;
}

.mk-plan-per {
  font-size: 14px;
  color: rgba(var(--ink-rgb), .5);
}

.mk-plan.is-hero .mk-plan-per {
  color: rgba(var(--ink-rgb), .55);
}

.mk-plan-blurb {
  margin: 0 0 26px;
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(var(--ink-rgb), .52);
}

.mk-plan.is-hero .mk-plan-blurb {
  color: rgba(var(--ink-rgb), .68);
}

.mk-plan-rows {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.mk-plan-rows li {
  padding: 11px 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 15px;
}

.mk-plan.is-hero .mk-plan-rows li {
  border-top-color: rgba(255, 255, 255, .14);
}

.mk-plan-rows li.is-muted {
  color: rgba(var(--ink-rgb), .42);
}

.mk-plan-spacer {
  flex: 1;
}

.mk-plan-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .04);
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 600;
}

.mk-plan-cta:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, .08);
}

.mk-plan-cta.is-fill {
  border-color: var(--ac);
  background: var(--ac);
  color: #0A0A0C;
  font-weight: 700;
  box-shadow: 0 12px 34px -10px var(--ac);
}

.mk-plan-cta.is-fill:hover {
  color: #0A0A0C;
  filter: brightness(1.06);
}

.mk-foot-note {
  margin: 20px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), .42);
  max-width: 760px;
}

/* ── comparison ───────────────────────────────────────────────────────────
   The design drew this as a bare CSS grid. It is tabular data, so it is a
   real <table> here — grid layout, table semantics, and it can be read. */
.mk-cmp-wrap {
  margin-top: 80px;
}

.mk-cmp-wrap h2 {
  margin: 0 0 26px;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: .98;
  letter-spacing: -.04em;
}

.mk-cmp-box {
  border-radius: 20px;
  border: 1px solid var(--line-2);
  overflow: hidden;
  background: var(--card);
}

.mk-cmp {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  text-align: left;
}

.mk-cmp thead th {
  padding: 16px 22px;
  background: rgba(255, 255, 255, .03);
  font-size: 10.5px;
  letter-spacing: .16em;
  font-weight: 700;
  color: rgba(var(--ink-rgb), .5);
}

.mk-cmp thead th.is-accent {
  color: var(--ac);
}

.mk-cmp tbody th,
.mk-cmp tbody td {
  padding: 15px 22px;
  border-top: 1px solid var(--line);
  font-weight: 400;
}

.mk-cmp tbody th {
  color: var(--ink);
}

.mk-cmp tbody td {
  color: rgba(var(--ink-rgb), .55);
}

.mk-cmp tbody td.is-prem {
  color: var(--ink);
  font-weight: 600;
}

/* Four columns at a fixed ratio, matching the design. Percentages rather than
   fr so the table keeps its shape inside the scroller below 720px. */
.mk-cmp th:first-child,
.mk-cmp td:first-child {
  width: 34%;
}

.mk-cmp th:not(:first-child),
.mk-cmp td:not(:first-child) {
  width: 22%;
}

.mk-pfaq {
  padding-top: 88px;
}

.mk-pfaq h2 {
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: .98;
  letter-spacing: -.04em;
}

.mk-cta-band {
  position: relative;
  overflow: hidden;
  margin-top: 96px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.mk-cta-in {
  position: relative;
  padding-top: 100px;
  padding-bottom: 100px;
  text-align: center;
}

.mk-cta-in h2 {
  margin: 0 0 18px;
  font-size: clamp(34px, 5.4vw, 74px);
  line-height: .92;
}

.mk-cta-in p {
  margin: 0 auto 34px;
  font-size: 17.5px;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), .55);
  max-width: 440px;
}

.mk-cta-in .mk-btn {
  height: 56px;
}

.mk-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ══ motion ═══════════════════════════════════════════════════════════════ */

@keyframes mkDrift {
  0% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(4%, -3%) scale(1.12);
  }

  100% {
    transform: translate(0, 0) scale(1);
  }
}

@keyframes mkSpin {
  to {
    transform: rotate(360deg);
  }
}

/* The hero glow is centred with translateX(-50%); mkDrift's transform would
   otherwise drop that and slam it to the right. Wrapper-free fix: the drifting
   layers each re-state their own centring inside the keyframes they use, so
   only the two that need it get a bespoke pass. */
.mk-hero-glow,
.mk-final-glow {
  animation-name: mkDriftC;
}

@keyframes mkDriftC {
  0% {
    transform: translate(-50%, 0) scale(1);
  }

  50% {
    transform: translate(-46%, -3%) scale(1.12);
  }

  100% {
    transform: translate(-50%, 0) scale(1);
  }
}

/* ══ responsive ═══════════════════════════════════════════════════════════ */

@media (max-width: 1080px) {
  .mk-two {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .mk-phead-in {
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
  }

  .mk-plan-grid {
    grid-template-columns: 1fr;
  }

  .mk-faq-two {
    grid-template-columns: 1fr;
  }

  .mk-faq-title {
    position: static;
  }

  .mk-song-grid,
  .mk-feat-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 860px) {
  /* THE LINKS USED TO JUST VANISH HERE. `.mk-navlinks { display: none }` with
     nothing to replace it meant SONGS, USING THE APP, PRICES and FAQ were
     unreachable on every phone — four of the site's five destinations, gone,
     with no menu to open. Only GET THE APP survived.

     Now the same nav element becomes a drop-down panel under the bar, and the
     toggle beside the CTA opens it. One <nav> in the DOM at both sizes: a
     second copy for mobile would be two things to keep in step and two
     landmarks for a screen reader to announce. */
  .mk-menu-btn {
    display: inline-flex;
  }

  .mk-navlinks {
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--pad) 16px;
    /* SOLID, unlike the bar above it. The sticky bar is translucent on purpose
       — you want to sense the page moving under it — but this panel is text
       you are reading, and at .96 with a blur the hero headline still ghosted
       through between the rows. A menu has no reason to be see-through. */
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  }

  .mk-nav.is-menu-open .mk-navlinks {
    display: flex;
  }

  /* Full-width rows with a 48px target — the desktop rule sizes these for a
     pointer, and 11.5px text in a 30px gap is not a phone tap target. */
  .mk-navlinks a {
    display: flex;
    align-items: center;
    min-height: 48px;
    font-size: 13px;
    color: var(--dim-3);
    border-bottom: 1px solid var(--line);
  }

  .mk-navlinks a:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 720px) {
  :root {
    --pad: 20px;
    --nav-h: 62px;
  }

  .mk-song-grid,
  .mk-feat-grid {
    grid-template-columns: 1fr;
  }

  .mk-hero-in {
    padding-top: 76px;
    padding-bottom: 72px;
  }

  .mk-line-in,
  .mk-songs,
  .mk-features,
  .mk-faq {
    padding-top: 68px;
    padding-bottom: 68px;
  }

  .mk-price-in,
  .mk-final-in {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .mk-stats {
    gap: 26px;
  }

  .mk-nav-in {
    gap: 16px;
  }

  .mk-foot {
    justify-content: flex-start;
  }

  .mk-phead-in {
    padding-top: 52px;
    padding-bottom: 44px;
  }

  .mk-pfaq,
  .mk-cmp-wrap {
    padding-top: 60px;
  }

  .mk-cmp-wrap {
    margin-top: 60px;
  }

  .mk-cta-band {
    margin-top: 68px;
  }

  .mk-cta-in {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  /* At 360px the four columns are 316px against a ~520px table, so PREMIUM
     falls off with nothing to say so. Let it scroll inside its own box, and
     keep a sideways drag from turning into a page-history swipe. */
  .mk-cmp-box {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .mk-cmp {
    min-width: 520px;
  }

  .mk-plans {
    padding-top: 40px;
  }
}

/* At 380px the two hero buttons wrapped into a ragged two-line row with one
   full-width and one half. Below that they stack cleanly instead. */
@media (max-width: 420px) {
  .mk-hero-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .mk-btn {
    justify-content: center;
    height: 54px;
    padding: 0 20px;
    font-size: 15px;
  }

  .mk-cta {
    padding: 0 14px;
    letter-spacing: .1em;
  }

  .mk-brand span {
    font-size: 11px;
    letter-spacing: .22em;
    text-indent: .22em;
  }

  .mk-price-row {
    padding: 18px;
    gap: 14px;
  }

  .mk-price-amt {
    font-size: 26px;
    min-width: 76px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ══ /legal ═══════════════════════════════════════════════════════════════
   The legal page keeps the markup and every word it already had — only its
   chrome and palette moved to the dark design. These rules re-clothe the
   existing class names rather than renaming anything, so the legal text is
   never touched by a styling change. Adapted from the
   "Mukhdaa Legal.dc.html" export; its own copy is an older draft (it still
   describes the removed guest tier) and was deliberately NOT adopted. */

.mk-pad.mk-hero {
  padding-top: 72px;
  padding-bottom: 0;
}

.mk-pad.mk-hero h1 {
  margin: 0 0 12px;
  font-size: clamp(40px, 5.8vw, 72px);
  line-height: .92;
  letter-spacing: -.045em;
}

.mk-pad.mk-hero .mk-lede {
  margin: 0 0 8px;
  font-size: 17.5px;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), .55);
  max-width: 600px;
}

.mk-updated {
  margin: 0;
  font-size: 14px;
  color: rgba(var(--ink-rgb), .42);
}

.mk-callout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px;
  border: 1.5px solid var(--ac);
  background: color-mix(in srgb, var(--ac) 9%, transparent);
  border-radius: 10px;
  margin: 26px 0 0;
  max-width: 720px;
}

.mk-callout .ms {
  font-size: 20px;
  color: var(--ac);
  flex: none;
}

.mk-callout-title {
  font-size: 14.5px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--ac);
}

.mk-callout p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), .55);
}

.mk-legal {
  padding-top: 52px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 64px;
  align-items: start;
}

.mk-legal-nav {
  position: sticky;
  top: calc(var(--nav-h) + 34px);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mk-legal-nav a {
  padding: 10px 14px;
  font-size: 15px;
  color: rgba(var(--ink-rgb), .55);
  border-left: 2px solid transparent;
}

.mk-legal-nav a:hover {
  color: var(--ink);
}

.mk-legal-nav a.is-active {
  color: var(--ink);
  border-left-color: var(--ac);
}

.mk-inshort {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
}

.mk-inshort-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

.mk-inshort p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(var(--ink-rgb), .55);
}

.mk-legal-body {
  max-width: 720px;
  min-width: 0;
}

.mk-legal-body section {
  scroll-margin-top: calc(var(--nav-h) + 30px);
}

.mk-eyebrow {
  font-size: 12.5px;
  letter-spacing: .18em;
  color: var(--ac);
  font-weight: 600;
  margin-bottom: 12px;
}

.mk-legal-body h2 {
  margin: 0 0 16px;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.02;
  letter-spacing: -.035em;
}

.mk-legal-body p,
.mk-legal-body li {
  font-size: 16.5px;
  line-height: 1.75;
  color: rgba(var(--ink-rgb), .62);
}

.mk-legal-body p {
  margin: 0 0 14px;
}

.mk-legal-body ul,
.mk-legal-body ol {
  margin: 0 0 16px;
  padding-left: 20px;
}

.mk-legal-body li {
  margin-bottom: 6px;
}

.mk-strong {
  color: var(--ink);
  font-weight: 600;
}

.mk-sec {
  margin-top: 36px;
  scroll-margin-top: calc(var(--nav-h) + 30px);
}

.mk-sec-head {
  display: flex;
  gap: 12px;
  align-items: baseline;
}

.mk-sec-head h3 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.mk-num {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  color: var(--ac);
  flex: none;
  width: 22px;
}

.mk-sec-body {
  padding-left: 34px;
  padding-top: 10px;
}

.mk-sec-body> :last-child {
  margin-bottom: 0;
}

/* Wide processor table: scroll inside its own box rather than pushing the
   page sideways, and keep a drag from becoming a history swipe. */
.mk-table-wrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  margin: 0 0 16px;
}

.mk-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.55;
  min-width: 560px;
  text-align: left;
}

.mk-table-wrap th {
  padding: 0 12px 9px 0;
  font-size: 11px;
  letter-spacing: .14em;
  font-weight: 600;
  color: rgba(var(--ink-rgb), .5);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.mk-table-wrap td {
  padding: 11px 12px 11px 0;
  border-bottom: 1px solid var(--line-2);
  color: rgba(var(--ink-rgb), .62);
  vertical-align: top;
}

.mk-card {
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  background: var(--card);
  margin: 0 0 16px;
}

.mk-card-label {
  font-size: 11px;
  letter-spacing: .14em;
  font-weight: 600;
  color: rgba(var(--ink-rgb), .5);
  margin-bottom: 10px;
}

.mk-card-link {
  font-size: 15px;
}

.mk-kv {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 5px 0;
  font-size: 15.5px;
}

.mk-k {
  flex: none;
  min-width: 92px;
  font-size: 13px;
  letter-spacing: .1em;
  color: rgba(var(--ink-rgb), .5);
}

.mk-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.mk-2col>* {
  min-width: 0;
}

.mk-rule {
  border: 0;
  border-top: 1px solid var(--line-2);
  margin: 56px 0;
}

.mk-contact {
  margin-bottom: 80px;
}

/* Unfilled placeholder in a draft clause — deliberately loud so it cannot be
   published by accident. */
.mk-todo-inline {
  background: color-mix(in srgb, var(--ac) 16%, transparent);
  border-bottom: 1px dashed var(--ac);
  color: var(--ac-soft);
  padding: 0 3px;
}

@media (max-width: 1080px) {
  .mk-legal {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .mk-legal>* {
    min-width: 0;
  }

  .mk-legal-nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .mk-legal-nav a {
    border-left: 0;
    border-bottom: 2px solid transparent;
    padding: 8px 12px;
  }

  .mk-legal-nav a.is-active {
    border-left-color: transparent;
    border-bottom-color: var(--ac);
  }

  .mk-inshort {
    flex-basis: 100%;
    margin-top: 8px;
  }

  .mk-2col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .mk-sec-body {
    padding-left: 0;
  }

  .mk-pad.mk-hero {
    padding-top: 48px;
  }

  .mk-legal {
    padding-top: 36px;
  }
}

/* ══ /how ═════════════════════════════════════════════════════════════════
   Adapted from "Mukhdaa How To.dc.html". The export alternated sides with
   inline order/grid-template values computed per item in JS; here it is one
   .is-flip modifier and the bands alternate with :is-alt. */

.mk-how-head {
  position: relative;
  max-width: 820px;
  padding-top: 96px;
  padding-bottom: 76px;
  text-align: center;
}

.mk-how-head h1 {
  margin: 0 0 22px;
  font-size: clamp(42px, 6.6vw, 90px);
  line-height: .9;
}

.mk-how-head p {
  margin: 0 auto;
  font-size: 19px;
  line-height: 1.6;
  color: var(--dim);
  max-width: 520px;
  text-wrap: pretty;
}

.mk-step-band {
  border-bottom: 1px solid var(--line);
}

.mk-step-band.is-alt {
  background: var(--bg-2);
}

.mk-step {
  max-width: 1100px;
  padding-top: 78px;
  padding-bottom: 78px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 64px;
  align-items: center;
}

.mk-step.is-flip {
  grid-template-columns: .95fr 1.05fr;
}

/* Source order stays text-then-image so the reading order and the tab order
   match the numbering; only the visual column flips. */
.mk-step.is-flip .mk-step-text {
  order: 2;
}

.mk-step.is-flip .mk-shot {
  order: 1;
}

.mk-step.is-solo {
  grid-template-columns: 1fr;
  max-width: 780px;
}

.mk-step-tag {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
}

.mk-step-num {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .08em;
  padding: 4px 10px;
  border-radius: 100px;
  background: color-mix(in srgb, var(--ac) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--ac) 38%, transparent);
  color: color-mix(in srgb, var(--ac) 62%, #FFF7F2);
}

.mk-step-kicker {
  font-size: 10.5px;
  letter-spacing: .2em;
  font-weight: 700;
  color: var(--dim);
}

.mk-step-text h2 {
  margin: 0 0 16px;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: .98;
  letter-spacing: -.04em;
}

.mk-step-body {
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 1.62;
  color: rgba(var(--ink-rgb), .62);
}

.mk-step-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line-2);
}

.mk-step-points li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  background: #0E0E12;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(var(--ink-rgb), .82);
}

.mk-step-points .ms {
  font-size: 18px;
  color: var(--ac);
  flex: none;
}

.mk-step-cta {
  margin-top: 22px;
  height: 50px;
  font-size: 15px;
}

.mk-shot {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 300px;
}

.mk-shot-glow {
  position: absolute;
  inset: -8% -14%;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--ac) 22%, transparent), transparent 66%);
  filter: blur(44px);
  pointer-events: none;
}

.mk-shot img {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 40px 90px -34px rgba(0, 0, 0, .9);
}

.mk-cta-band-flush {
  margin-top: 0;
  border-top: 0;
}

@media (max-width: 900px) {

  .mk-step,
  .mk-step.is-flip {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Stacked, the image belongs under its own text on every step. */
  .mk-step.is-flip .mk-step-text {
    order: 1;
  }

  .mk-step.is-flip .mk-shot {
    order: 2;
  }
}

@media (max-width: 720px) {
  .mk-how-head {
    padding-top: 60px;
    padding-bottom: 52px;
  }

  .mk-step {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .mk-shot {
    max-width: 260px;
  }
}