/*
    ============================================================
    TWO VOICES, DELIBERATELY
    ------------------------------------------------------------
    The page is Concept 06, Royal Heritage: a warm off-white ground
    carrying a faint plus-pattern, deep indigo ink, a single gold
    accent, Cormorant, hairline borders and square corners. Quiet,
    old, and printed.

    Two things speak in Concept 07, Gen-Z Acid, instead — the hero
    copy and the Cosmic Signature form. Space Grotesk, oversized
    uppercase, acid lime, a hard black outline and a 12px offset
    shadow. Everything acid is tagged --acid- so the split stays
    legible: if a rule reaches for an --acid token it belongs to
    one of those two, and nowhere else on the page.
    ============================================================
  */
  #mm-ad-mmad {
    /* p1 / p2 stay wired to the theme-editor colour settings. */
    --mm-ad-p1: #1e1b4b;
    --mm-ad-p2: #b45309;

    /* Royal Heritage */
    --mm-ad-ink: var(--mm-ad-p1, #1e1b4b);
    --mm-ad-gold: var(--mm-ad-p2, #b45309);
    --mm-ad-gold-lt: #fbbf24;
    --mm-ad-paper: #fdfbf7;
    --mm-ad-card: #ffffff;
    --mm-ad-line: #e5e7eb;
    --mm-ad-muted: #4b5563;
    --mm-ad-soft: #faf7f0;
    --mm-ad-wa: #4f8a63;

    /* Gen-Z Acid — hero copy and the form only */
    --mm-ad-acid-ink: #000000;
    --mm-ad-acid-lime: #ccff00;
    --mm-ad-acid-field: #f3f4f6;
    /*
      Concept 07 submits on #6366f1, which carries white text at 4.1:1 —
      under the 4.5:1 floor for a label this size. One step darker holds
      the same hue and clears it at 6.4:1.
    */
    --mm-ad-acid-indigo: #4f46e5;

    --mm-ad-serif: 'Cormorant', Georgia, 'Times New Roman', serif;
    --mm-ad-acid-face: 'Space Grotesk', 'Jost', -apple-system, sans-serif;

    background: var(--mm-ad-paper);
    color: var(--mm-ad-ink);
    font-family: var(--mm-ad-serif);
  }

  #mm-ad-mmad .mm-ad__inner {
    max-width: 1080px;
    margin-inline: auto;
    padding-inline: 20px;
  }

  /* ---------- LINE ICONS ---------- */
  /*
    These replaced the emoji. An emoji is a glyph with its own side bearings
    and baseline, so it never sat in the middle of its circle — and it sat
    differently on every platform, because each ships a different emoji font.
    A stroked 24-box in a grid cell has no metrics to fight: place-items:center
    puts it dead centre, on every device.

    Colour comes from currentColor, so an icon takes whatever the surface it
    sits on has set, and there is no per-icon colour to keep in sync.
  */
  #mm-ad-mmad .mm-ad-ico {
    display: block;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
  }

  /* ---------- HERO ---------- */
  /*
    The gradient banner is gone. What replaces it is Concept 06's own
    ground: off-white, the plus-pattern at 3% ink, and a pair of
    drawn corner brackets — the frame of a printed certificate.
  */
  #mm-ad-mmad .mm-ad__hero {
    position: relative;
    overflow: hidden;
    background-color: var(--mm-ad-paper);
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%231e1b4b' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    color: var(--mm-ad-ink);
    padding-block: clamp(44px, 9vw, 84px);
    text-align: left;
    border-bottom: 1px solid var(--mm-ad-line);
  }
  /* Corner brackets — drawn, not imported, so they cost nothing. */
  #mm-ad-mmad .mm-ad__hero::before,
  #mm-ad-mmad .mm-ad__hero::after {
    content: "";
    position: absolute;
    width: 88px;
    height: 88px;
    pointer-events: none;
  }
  #mm-ad-mmad .mm-ad__hero::before {
    top: 26px; left: 26px;
    border-top: 2px solid rgba(30, 27, 75, .2);
    border-left: 2px solid rgba(30, 27, 75, .2);
  }
  #mm-ad-mmad .mm-ad__hero::after {
    bottom: 26px; right: 26px;
    border-bottom: 2px solid rgba(30, 27, 75, .2);
    border-right: 2px solid rgba(30, 27, 75, .2);
  }
  @media screen and (max-width: 749px) {
    /* Too little room beside a full-width column for a bracket to read
       as a frame rather than as a stray rule. */
    #mm-ad-mmad .mm-ad__hero::before,
    #mm-ad-mmad .mm-ad__hero::after { display: none; }
  }
  #mm-ad-mmad .mm-ad__hero-grid {
    display: grid;
    gap: clamp(22px, 3vw, 34px);
    align-items: start;
    position: relative;
    z-index: 1;
  }

  /* ---------- HERO COPY — ACID ---------- */
  #mm-ad-mmad .mm-ad__hero-copy {
    font-family: var(--mm-ad-acid-face);
    color: var(--mm-ad-acid-ink);
  }
  #mm-ad-mmad .mm-ad__kicker {
    display: inline-block;
    margin: 0 0 20px;
    padding: 9px 18px;
    border-radius: 999px;
    background: var(--mm-ad-acid-lime);
    color: var(--mm-ad-acid-ink);
    transform: rotate(-2deg);
    font-family: var(--mm-ad-acid-face);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: 1;
  }
  #mm-ad-mmad .mm-ad__title {
    margin: 0;
    max-width: 14ch;
    font-family: var(--mm-ad-acid-face);
    /*
      Concept 07 sets this at text-9xl for three one-word lines. This
      headline is seven words, and at that size it ran to five lines and
      pushed everything else off a laptop screen — so the ceiling is the
      largest that keeps it to four.
    */
    font-size: clamp(38px, 6.6vw, 68px);
    line-height: .88;
    font-weight: 700;
    letter-spacing: -.045em;
    text-transform: uppercase;
    /* "30-MINUTE" is the longest word and comes within 5px of the tablet
       column. A last resort so a longer heading can never spill sideways. */
    overflow-wrap: break-word;
    color: var(--mm-ad-acid-ink);
  }
  #mm-ad-mmad .mm-ad__sub {
    margin: 22px 0 0;
    max-width: 44ch;
    font-family: var(--mm-ad-acid-face);
    font-size: clamp(15px, 2.2vw, 18px);
    line-height: 1.5;
    font-weight: 500;
    color: var(--mm-ad-muted);
  }
  #mm-ad-mmad .mm-ad__cta-note {
    margin: 14px 0 0;
    font-family: var(--mm-ad-acid-face);
    font-size: 13px;
    font-weight: 600;
    color: var(--mm-ad-muted);
  }
  #mm-ad-mmad .mm-ad__birth-note {
    margin: 18px 0 0;
    max-width: 52ch;
    font-family: var(--mm-ad-acid-face);
    font-size: 13px;
    line-height: 1.55;
    font-weight: 400;
    color: var(--mm-ad-muted);
  }
  #mm-ad-mmad .mm-ad__birth-note p { margin: 0; }
  #mm-ad-mmad .mm-ad__birth-note a {
    color: var(--mm-ad-ink);
    text-underline-offset: 3px;
  }

  /* ---------- BUTTONS — ROYAL ---------- */
  /*
    Square, unrounded, one solid and one outlined. Concept 06 puts its
    weight in the shadow under the solid button rather than in a
    colour, which is what keeps the pair looking printed.
  */
  #mm-ad-mmad .mm-ad__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 30px;
  }
  @media screen and (min-width: 600px) {
    #mm-ad-mmad .mm-ad__actions {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: center;
      gap: 14px;
    }
  }

  #mm-ad-mmad .mm-ad__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    min-height: 54px;
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid var(--mm-ad-ink);
    border-radius: 0;
    background: var(--mm-ad-ink);
    color: #ffffff;
    font-family: var(--mm-ad-acid-face);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .02em;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(30, 27, 75, .18);
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
  }
  #mm-ad-mmad .mm-ad__cta:hover {
    background: #312e81;
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(30, 27, 75, .24);
  }
  #mm-ad-mmad .mm-ad__cta:focus-visible {
    outline: 2px solid var(--mm-ad-gold);
    outline-offset: 3px;
  }
  @media screen and (max-width: 599px) {
    #mm-ad-mmad .mm-ad__cta { width: 100%; }
  }

  /*
    WhatsApp's own spec — background #4f8a63 with a DARK label, not the
    white-on-green lookalike — is quoted verbatim and stays. Only the
    50px pill is squared off to match the pair it stands in.
  */
  #mm-ad-mmad .mm-ad__cta--wa {
    background: var(--mm-ad-wa);
    color: #1c1917;
    border: 1px solid #d6cec2;
    box-shadow: none;
    transition: opacity ease-in-out .25s;
  }
  #mm-ad-mmad .mm-ad__cta--wa:hover {
    background: var(--mm-ad-wa);
    opacity: .78;
    transform: none;
    box-shadow: none;
  }
  #mm-ad-mmad .mm-ad__cta svg {
    width: 22px;
    height: 22px;
    fill: #ffffff;
    flex: none;
  }
  /* Must stay AFTER the base svg rule — equal specificity, source order
     decides, and declared earlier the mark repaints white on green. */
  #mm-ad-mmad .mm-ad__cta--wa svg { fill: #1c1917; }
  /*
    The WhatsApp mark is a filled brand asset and must keep `fill`; the line
    icons must not have one. This has to out-specify `.mm-ad__cta svg` above
    (1,2,0 beats 1,1,1) or the calendar icon renders as a solid blob.
  */
  #mm-ad-mmad .mm-ad__cta .mm-ad-ico {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
  }
  #mm-ad-mmad .mm-ad__cta--solid {
    background: var(--mm-ad-wa);
    color: #ffffff;
  }
  #mm-ad-mmad .mm-ad__cta--solid svg { fill: #ffffff; }

  /* ---------- ZODIAC CLOCKWORK — ROYAL ---------- */
  /*
    The wheel was drawn in white for a dark banner. On this ground every
    one of those strokes would have been invisible, so the whole
    instrument is restated in the concept's two metals: indigo for the
    structure, gold for the signs. The panel it sits in is the same
    white card as everything else, with the gold rule along its top.
  */
  /*
    No panel. The instrument sits straight on the page — a card around it put a
    hard white edge through the middle of a cream page and made the wheel read
    as a picture of an orrery rather than as one. What replaces the box is a
    radial wash of the accent that has no edge at all: it fades to nothing well
    inside its own bounds, so there is nothing to see a seam against.
  */
  #mm-ad-mmad .mm-ad__art {
    justify-self: center;
    position: relative;
    width: min(88vw, 400px);
    max-width: 100%;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  #mm-ad-mmad .mm-ad__art::before {
    content: "";
    position: absolute;
    /*
      inset:0, not a negative inset. Bleeding the wash outside the box made
      scrollWidth 456 against a 400 clientWidth at every breakpoint — invisible,
      since the hero clips, but a real overflow all the same. It does not need
      to bleed: an unsized radial-gradient measures to the farthest corner, so
      at 78% it is already transparent well past the outer rim.
    */
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
      rgba(251, 191, 36, .15) 0%,
      rgba(180, 83, 9, .07) 45%,
      rgba(180, 83, 9, 0) 78%);
    pointer-events: none;
  }
  #mm-ad-mmad .mm-ad__clock {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    overflow: visible;
  }

  #mm-ad-mmad .mm-ad__rim,
  #mm-ad-mmad .mm-ad__orbit {
    fill: none;
    stroke: var(--mm-ad-ink);
    stroke-opacity: .3;
    stroke-width: 1.2;
  }
  #mm-ad-mmad .mm-ad__rim--dashed { stroke-dasharray: 2 5; stroke-opacity: .42; }
  #mm-ad-mmad .mm-ad__orbit { stroke-dasharray: 4 6; stroke-opacity: .2; }
  #mm-ad-mmad .mm-ad__spoke {
    stroke: var(--mm-ad-ink);
    stroke-opacity: .14;
    stroke-width: .75;
  }

  #mm-ad-mmad .mm-ad__glyph {
    fill: var(--mm-ad-gold);
    fill-opacity: .85;
    font-size: 20px;
    font-weight: 400;
    transition: fill-opacity .2s ease, font-size .2s ease;
  }
  #mm-ad-mmad .mm-ad__glyph--on { fill-opacity: 1; font-size: 26px; }

  #mm-ad-mmad .mm-ad__graha,
  #mm-ad-mmad .mm-ad__moon {
    cursor: pointer;
    outline: none;
    transition: filter .2s ease;
  }
  /* A white glow is invisible on a white panel — the halo is gold here. */
  #mm-ad-mmad .mm-ad__graha:hover,
  #mm-ad-mmad .mm-ad__graha:focus-visible,
  #mm-ad-mmad .mm-ad__moon:hover,
  #mm-ad-mmad .mm-ad__moon:focus-visible {
    filter: drop-shadow(0 0 9px rgba(180, 83, 9, .85));
  }
  #mm-ad-mmad .mm-ad__graha--on,
  #mm-ad-mmad .mm-ad__moon--on {
    filter: drop-shadow(0 0 11px rgba(180, 83, 9, .95));
  }

  #mm-ad-mmad .mm-ad__spark {
    fill: var(--mm-ad-gold);
    animation: mm-ad-twinkle 3.2s ease-in-out infinite;
  }
  #mm-ad-mmad .mm-ad__spark--b { animation-delay: -1.1s; }
  #mm-ad-mmad .mm-ad__spark--c { animation-delay: -2.2s; }

  /* Spin engine — every ring shares one keyframe, differing only in duration */
  #mm-ad-mmad .mm-ad__spin {
    transform-origin: 240px 240px;
    animation: mm-ad-spin linear infinite;
    animation-play-state: var(--mm-ad-play, running);
    /*
      Promotes each ring to its own compositor layer, so the spin is a matrix
      on an already-painted layer every frame instead of a re-render of the
      SVG. This is what lets it run on a phone at all, and what takes the
      stutter out of it on a desktop with a busy main thread.
    */
    will-change: transform;
    backface-visibility: hidden;
  }
  #mm-ad-mmad .mm-ad__spin--wheel { animation-duration: 120s; animation-direction: reverse; }
  /*
    No duration here on purpose. Each ring carries its own inline
    animation-duration + animation-direction from the grahas table above — a
    blanket value here previously masked a broken inline style and left all four
    rings locked in step at 40s.
  */
  #mm-ad-mmad .mm-ad__graha-ring { animation-timing-function: linear; }

  /* Pointing at any body freezes the whole orrery so it can be read. */
  #mm-ad-mmad.mm-ad--focused { --mm-ad-play: paused; }

  /*
    Mobile used to freeze the whole orrery, because SVG transform animation was
    main-thread work. With the rings promoted to their own layers above, the
    rotation is compositor work and can stay on — which is the point of having
    it. The sparks do NOT come back: they animate fill-opacity, which is a
    repaint every frame and cannot be composited away, so they stay lit and
    still. Tapping any body still pauses everything, as before.
  */
  @media (max-width: 749px) {
    #mm-ad-mmad .mm-ad__spark { animation: none; fill-opacity: .6; }
  }

  /* ---------- HOVER TARGETS ---------- */
  /*
    Critical: SVG paths default to fill:black. Without this rule the 12 wedges
    render as solid black and bury the entire wheel.
  */
  #mm-ad-mmad .mm-ad__sector {
    fill: transparent;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: fill .25s ease;
  }
  #mm-ad-mmad .mm-ad__sector:hover,
  #mm-ad-mmad .mm-ad__sector:focus-visible {
    fill: rgba(30, 27, 75, .05);
  }
  #mm-ad-mmad .mm-ad__sector:focus-visible {
    stroke: var(--mm-ad-gold);
    stroke-opacity: .6;
    stroke-width: 1;
  }

  /* ---------- DETAILS CARD — ROYAL ---------- */
  #mm-ad-mmad .mm-ad__card {
    position: relative;
    margin-top: 18px;
    padding: 22px;
    background: var(--mm-ad-card);
    border: 1px solid var(--mm-ad-line);
    box-shadow: 0 18px 40px rgba(30, 27, 75, .08);
    color: var(--mm-ad-ink);
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*
      Reserve the TALLEST body's height so neither the first reveal nor moving
      between bodies reflows the hero. Measured at both breakpoints; the longest
      copy costs one extra line. +8px slack for font fallback.
    */
    min-height: 312px;
  }
  #mm-ad-mmad .mm-ad__card-hint {
    margin: 0;
    text-align: center;
    font-family: var(--mm-ad-acid-face);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--mm-ad-gold);
  }
  #mm-ad-mmad .mm-ad__card-hint--tap { display: none; }
  @media (hover: none) {
    #mm-ad-mmad .mm-ad__card-hint--hover { display: none; }
    #mm-ad-mmad .mm-ad__card-hint--tap { display: inline; }
  }

  #mm-ad-mmad .mm-ad__card-head {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  #mm-ad-mmad .mm-ad__card-glyph {
    flex: none;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 1px solid var(--mm-ad-gold);
    border-radius: 50%;
    color: var(--mm-ad-gold);
    font-size: 26px;
    line-height: 1;
  }
  #mm-ad-mmad .mm-ad__card-head strong {
    display: block;
    font-family: var(--mm-ad-serif);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.15;
  }
  #mm-ad-mmad .mm-ad__card-head em {
    display: block;
    margin-top: 2px;
    font-family: var(--mm-ad-acid-face);
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mm-ad-gold);
  }
  #mm-ad-mmad .mm-ad__card-meta {
    margin: 18px 0 0;
    display: flex;
    gap: 24px;
  }
  #mm-ad-mmad .mm-ad__card-meta dt {
    font-family: var(--mm-ad-acid-face);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #9ca3af;
  }
  #mm-ad-mmad .mm-ad__card-meta dd {
    margin: 4px 0 0;
    font-size: 17px;
    font-weight: 600;
  }
  #mm-ad-mmad .mm-ad__card-text {
    margin: 14px 0 0;
    font-size: 17px;
    line-height: 1.55;
    font-weight: 400;
    color: var(--mm-ad-muted);
  }
  #mm-ad-mmad .mm-ad__card-tags {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
  }
  #mm-ad-mmad .mm-ad__card-tag {
    padding: 5px 12px;
    border: 1px solid var(--mm-ad-line);
    border-radius: 999px;
    background: var(--mm-ad-soft);
    font-family: var(--mm-ad-acid-face);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mm-ad-muted);
  }

  @keyframes mm-ad-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
  @keyframes mm-ad-twinkle {
    0%, 100% { fill-opacity: .25; }
    50%      { fill-opacity: 1; }
  }

  /* ---------- HEADINGS — ROYAL ---------- */
  #mm-ad-mmad .mm-ad__h2 {
    margin: clamp(48px, 7vw, 76px) 0 8px;
    font-family: var(--mm-ad-serif);
    font-size: clamp(30px, 4.6vw, 46px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: 0;
    color: var(--mm-ad-ink);
    text-align: center;
  }
  /* The gold rule from the concept's card, reused as a heading mark. */
  #mm-ad-mmad .mm-ad__h2::after {
    content: "";
    display: block;
    width: 76px;
    height: 2px;
    margin: 16px auto 24px;
    background: linear-gradient(to right, var(--mm-ad-gold), var(--mm-ad-gold-lt), var(--mm-ad-gold));
  }

  /* ---------- SHARED LISTS — ROYAL ---------- */
  #mm-ad-mmad .mm-ad__channels,
  #mm-ad-mmad .mm-ad__pillars,
  #mm-ad-mmad .mm-ad__steps,
  #mm-ad-mmad .mm-ad__astros,
  #mm-ad-mmad .mm-ad__trust {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 16px;
  }

  #mm-ad-mmad .mm-ad__channel,
  #mm-ad-mmad .mm-ad__pillar,
  #mm-ad-mmad .mm-ad__step,
  #mm-ad-mmad .mm-ad__astro,
  #mm-ad-mmad .mm-ad__trust-item {
    background: var(--mm-ad-card);
    border: 1px solid var(--mm-ad-line);
    border-radius: 0;
    padding: 24px;
    box-shadow: 0 10px 28px rgba(30, 27, 75, .05);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  }
  #mm-ad-mmad .mm-ad__channel:hover,
  #mm-ad-mmad .mm-ad__pillar:hover,
  #mm-ad-mmad .mm-ad__step:hover,
  #mm-ad-mmad .mm-ad__astro:hover {
    border-color: var(--mm-ad-gold);
    box-shadow: 0 16px 36px rgba(30, 27, 75, .1);
    transform: translateY(-2px);
  }

  #mm-ad-mmad .mm-ad__channel strong,
  #mm-ad-mmad .mm-ad__pillar strong,
  #mm-ad-mmad .mm-ad__step strong,
  #mm-ad-mmad .mm-ad__trust-item strong {
    display: block;
    font-family: var(--mm-ad-serif);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--mm-ad-ink);
    margin-bottom: 6px;
  }
  /*
    Cormorant is a display serif and runs light — body copy is set a
    step larger and a shade heavier than a sans would need, or it goes
    spidery at these sizes.
  */
  /*
    Every one of these is scoped away from the icon tile it shares a parent
    with. `.mm-ad__pillar span` used to be bare, and at (1,1,1) it beat
    `.mm-ad__pillar-ico` at (1,1,0) — so the tile was forced back to
    display:block and its place-items:center never applied. That, not the
    emoji, is why the icons sat high and left in their circles. It was also
    overriding .mm-ad__pillar-native, which is why the Hindi label had dropped
    to its own line by accident rather than by decision.
  */
  #mm-ad-mmad .mm-ad__channel span:not(.mm-ad__channel-ico),
  #mm-ad-mmad .mm-ad__pillar-txt > span,
  #mm-ad-mmad .mm-ad__step-txt span:not(.mm-ad__step-n),
  #mm-ad-mmad .mm-ad__trust-item span {
    display: block;
    font-size: 17px;
    line-height: 1.5;
    font-weight: 400;
    color: var(--mm-ad-muted);
  }

  /* ---------- CHANNELS ---------- */
  #mm-ad-mmad .mm-ad__channel {
    display: flex;
    align-items: flex-start;
    gap: 16px;
  }
  #mm-ad-mmad .mm-ad__channel-ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border: 1px solid var(--mm-ad-gold);
    border-radius: 50%;
    background: var(--mm-ad-soft);
    color: var(--mm-ad-gold);
    line-height: 1;
  }
  #mm-ad-mmad .mm-ad__channel-ico--brand svg {
    width: 24px;
    height: 24px;
    fill: var(--mm-ad-wa);
  }

  /* ---------- PILLARS ---------- */
  #mm-ad-mmad .mm-ad__lede {
    margin: 0 auto 28px;
    max-width: 60ch;
    text-align: center;
    font-size: 19px;
    line-height: 1.55;
    font-weight: 400;
    color: var(--mm-ad-muted);
  }
  #mm-ad-mmad .mm-ad__pillar {
    display: flex;
    align-items: flex-start;
    gap: 16px;
  }
  #mm-ad-mmad .mm-ad__pillar-ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border: 1px solid var(--mm-ad-gold);
    border-radius: 50%;
    background: var(--mm-ad-soft);
    color: var(--mm-ad-gold);
    line-height: 1;
  }
  #mm-ad-mmad .mm-ad__pillar-txt { min-width: 0; }
  /*
    Its own line, on purpose now. Devanagari set beside a Cormorant title at
    the same baseline crowds both, and the two scripts have different
    x-heights — stacked, the Hindi reads as the subtitle it actually is.
  */
  #mm-ad-mmad .mm-ad__pillar-native {
    display: block;
    margin: 3px 0 0;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--mm-ad-gold);
  }
  #mm-ad-mmad .mm-ad__pillars-note {
    margin: 26px auto 0;
    max-width: 62ch;
    padding-top: 20px;
    border-top: 1px solid var(--mm-ad-line);
    text-align: center;
    font-size: 17px;
    line-height: 1.55;
    font-style: italic;
    color: var(--mm-ad-muted);
  }

  /* ---------- STEPS ---------- */
  #mm-ad-mmad .mm-ad__step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
  }
  #mm-ad-mmad .mm-ad__step-n {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--mm-ad-ink);
    color: var(--mm-ad-paper);
    font-family: var(--mm-ad-serif);
    font-size: 22px;
    font-weight: 600;
  }

  /* ---------- ASTROLOGERS ---------- */
  #mm-ad-mmad .mm-ad__astro {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  #mm-ad-mmad .mm-ad__astro-head {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  #mm-ad-mmad .mm-ad__astro-img {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: 1px solid var(--mm-ad-gold);
    object-fit: cover;
    flex: none;
    background: var(--mm-ad-soft);
  }
  #mm-ad-mmad .mm-ad__astro-img--empty {
    display: grid;
    place-items: center;
    background: var(--mm-ad-ink);
    color: var(--mm-ad-paper);
    font-family: var(--mm-ad-serif);
    font-size: 30px;
    font-weight: 600;
    text-transform: uppercase;
  }
  #mm-ad-mmad .mm-ad__astro-id strong {
    display: block;
    font-family: var(--mm-ad-serif);
    font-size: 24px;
    font-weight: 600;
    color: var(--mm-ad-ink);
  }
  #mm-ad-mmad .mm-ad__astro-exp {
    display: block;
    margin-top: 3px;
    font-family: var(--mm-ad-acid-face);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mm-ad-gold);
  }
  #mm-ad-mmad .mm-ad__astro-meta {
    margin: 0;
    display: grid;
    gap: 8px;
  }
  #mm-ad-mmad .mm-ad__astro-meta > div {
    display: flex;
    gap: 10px;
    align-items: baseline;
  }
  #mm-ad-mmad .mm-ad__astro-meta dt {
    flex: none;
    font-family: var(--mm-ad-acid-face);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #9ca3af;
  }
  #mm-ad-mmad .mm-ad__astro-meta dd {
    margin: 0;
    font-size: 17px;
    line-height: 1.45;
    color: var(--mm-ad-ink);
  }
  #mm-ad-mmad .mm-ad__astro-bio {
    margin: 0;
    font-size: 17px;
    line-height: 1.55;
    color: var(--mm-ad-muted);
  }
  #mm-ad-mmad .mm-ad__astro-book {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    padding: 13px 24px;
    min-height: 46px;
    border: 1px solid var(--mm-ad-ink);
    border-radius: 0;
    color: var(--mm-ad-ink);
    background: transparent;
    font-family: var(--mm-ad-acid-face);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
  }
  #mm-ad-mmad .mm-ad__astro-book:hover {
    background: var(--mm-ad-ink);
    color: #ffffff;
  }

  /* ---------- TRUST ---------- */
  #mm-ad-mmad .mm-ad__trust {
    margin-top: clamp(48px, 7vw, 76px);
  }
  #mm-ad-mmad .mm-ad__trust-item {
    position: relative;
    text-align: center;
    padding-top: 28px;
  }
  /* The gold rule marks the three promises, the way it marks the card. */
  #mm-ad-mmad .mm-ad__trust-item::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(to right, var(--mm-ad-gold), var(--mm-ad-gold-lt), var(--mm-ad-gold));
  }

  /* ---------- CALENDLY INLINE ---------- */
  #mm-ad-mmad .mm-ad__book {
    margin-top: clamp(48px, 7vw, 76px);
  }
  #mm-ad-mmad .mm-ad__calendly {
    border: 1px solid var(--mm-ad-line);
    overflow: hidden;
    background: var(--mm-ad-card);
    box-shadow: 0 18px 40px rgba(30, 27, 75, .08);
    /*
      Calendly's own snippet hardcodes 700px, which clips the picker on a phone —
      their date + time steps stack vertically below ~768px. Reserve taller on
      mobile so the widget never scrolls inside its own box.
    */
    height: 1000px;
  }
  @media screen and (min-width: 768px) {
    #mm-ad-mmad .mm-ad__calendly { height: 700px; }
  }
  #mm-ad-mmad .mm-ad__book-fallback {
    margin: 14px 0 0;
    text-align: center;
    font-size: 16px;
    color: var(--mm-ad-muted);
  }
  #mm-ad-mmad .mm-ad__book-fallback a {
    color: var(--mm-ad-gold);
    text-underline-offset: 3px;
  }

  /* ---------- CLOSE ---------- */
  /*
    The one dark band. Indigo, gold-ruled along the top, and centred —
    the colophon at the end of a printed page.
  */
  #mm-ad-mmad .mm-ad__close {
    position: relative;
    margin-top: clamp(48px, 7vw, 76px);
    padding: clamp(36px, 6vw, 60px) 24px;
    border-radius: 0;
    background: var(--mm-ad-ink);
    text-align: center;
    color: #ffffff;
  }
  #mm-ad-mmad .mm-ad__close::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(to right, var(--mm-ad-gold), var(--mm-ad-gold-lt), var(--mm-ad-gold));
  }
  /*
    Sits on the indigo band, so the link is gold rather than the page's indigo
    on white - which would be all but invisible here. Underlined rather than
    button-shaped, to stay subordinate to the free CTA above it.
  */
  #mm-ad-mmad .mm-ad__close-paid {
    margin: 18px 0 0;
    font-size: .84rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .78);
  }
  #mm-ad-mmad .mm-ad__close-paid a {
    color: var(--mm-ad-gold-lt);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  #mm-ad-mmad .mm-ad__close-paid a:hover { color: #ffffff; }
  #mm-ad-mmad .mm-ad__close-h {
    margin: 0;
    font-family: var(--mm-ad-serif);
    font-size: clamp(30px, 5vw, 48px);
    line-height: 1.1;
    font-weight: 500;
    font-style: italic;
    color: #ffffff;
  }
  #mm-ad-mmad .mm-ad__close .mm-ad__actions { justify-content: center; }
  /* Inside the indigo band an indigo button would disappear, so the
     solid one inverts to paper-on-indigo. */
  #mm-ad-mmad .mm-ad__close .mm-ad__cta {
    background: var(--mm-ad-paper);
    color: var(--mm-ad-ink);
    border-color: var(--mm-ad-paper);
    box-shadow: none;
  }
  #mm-ad-mmad .mm-ad__close .mm-ad__cta:hover {
    background: #ffffff;
    color: var(--mm-ad-ink);
  }
  #mm-ad-mmad .mm-ad__close .mm-ad__cta--wa {
    background: var(--mm-ad-wa);
    color: #1c1917;
    border-color: #d6cec2;
  }
  #mm-ad-mmad .mm-ad__close .mm-ad__cta--wa:hover { background: var(--mm-ad-wa); }
  #mm-ad-mmad .mm-ad__contact { margin-top: 22px; }
  #mm-ad-mmad .mm-ad__contact p {
    margin: 0;
    font-size: 17px;
    color: #c7c5dd;
  }
  #mm-ad-mmad .mm-ad__contact a { color: var(--mm-ad-gold-lt); }

  #mm-ad-mmad .mm-ad__disclaimer {
    margin: 32px auto clamp(36px, 6vw, 60px);
    max-width: 72ch;
    text-align: center;
  }
  #mm-ad-mmad .mm-ad__disclaimer p {
    margin: 0;
    font-family: var(--mm-ad-acid-face);
    font-size: 12px;
    line-height: 1.65;
    color: #9ca3af;
  }

  /* ---------- DESKTOP GRIDS ---------- */
  @media screen and (min-width: 750px) {
    #mm-ad-mmad .mm-ad__channels,
    #mm-ad-mmad .mm-ad__trust { grid-template-columns: repeat(3, 1fr); }
    #mm-ad-mmad .mm-ad__pillars { grid-template-columns: repeat(3, 1fr); }
    #mm-ad-mmad .mm-ad__steps,
    #mm-ad-mmad .mm-ad__astros { grid-template-columns: repeat(3, 1fr); }
    #mm-ad-mmad .mm-ad__step { flex-direction: column; }
  }

  /*
    Copy | wheel | card, all three in one view. Previously the card was nested
    under the wheel and `align-items:center` left ~367px of dead space beside
    the copy — the hero came to 858px, taller than a 800px laptop screen, so the
    card fell below the fold. Top-aligning and giving the card its own column
    brings the hero back to roughly the height of its tallest element.
  */
  @media screen and (min-width: 1000px) {
    /*
      Two columns, not three. The form belongs beside the CTAs inside the
      banner, and a third column left it ~336px wide — too narrow to be
      anything but cramped. Copy + form stack down the left, wheel + card down
      the right, which keeps the mandala and the zodiac box in one view and
      fills the dead space the old layout left under the copy.
    */
    /*
      Two equal columns, reading across then down:
        row 1   headline + CTAs  |  the form
        row 2   the orrery       |  the sign it is describing

      Equal, not 1fr/340px as before: the form moved out of the left column and
      into the right one, and 340px is far too narrow for eight fields. The
      pairing in row 2 is the point of the arrangement — the wheel now sits
      directly beside the card that reads out whatever is being pointed at,
      so the two halves of that interaction are next to each other.
    */
    #mm-ad-mmad .mm-ad__hero-grid--art {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      column-gap: clamp(28px, 4vw, 52px);
      row-gap: clamp(28px, 4vw, 48px);
      text-align: left;
    }
    #mm-ad-mmad .mm-ad__hero-grid--art .mm-ad__hero-copy { grid-column: 1; grid-row: 1; }
    #mm-ad-mmad .mm-ad__hero-grid--art .mm-ad__form      { grid-column: 2; grid-row: 1; }
    #mm-ad-mmad .mm-ad__hero-grid--art .mm-ad__art       { grid-column: 1; grid-row: 2; }
    #mm-ad-mmad .mm-ad__hero-grid--art .mm-ad__card      { grid-column: 2; grid-row: 2; }
    /* Both halves of row 2 line up on their centres rather than their tops. */
    #mm-ad-mmad .mm-ad__hero-grid--art .mm-ad__art,
    #mm-ad-mmad .mm-ad__hero-grid--art .mm-ad__card { align-self: center; }

    #mm-ad-mmad .mm-ad__hero-grid { text-align: left; }
    #mm-ad-mmad .mm-ad__title,
    #mm-ad-mmad .mm-ad__sub { margin-inline: 0; }
    /*
      The headline shares its row with the form now, so it is sized against a
      ~500px column instead of the old ~650px one. "CONSULTATION" is the
      constraint: at the page-wide ceiling it was wider than the column.
    */
    #mm-ad-mmad .mm-ad__title { font-size: clamp(40px, 4.8vw, 54px); }
    #mm-ad-mmad .mm-ad__actions { justify-content: flex-start; }
    #mm-ad-mmad .mm-ad__art { width: min(100%, 400px); justify-self: center; }
    #mm-ad-mmad .mm-ad__form { margin-top: 0; }
    #mm-ad-mmad .mm-ad__card {
      margin-top: 0;              /* it is a column now, not stacked below */
      /*
        Reserves the space the card needs once a sign is hovered. Dropping this
        collapsed it to 54px, which both unbalanced the columns and would have
        made the hero jump on first hover.
      */
      min-height: 258px;
    }
  }

  /*
    ---------- WIDE SCREENS ----------
    The page body is 1080px, which is right for reading paragraphs and wrong
    for this hero: on a 1900px screen it left ~410px of dead margin down each
    side and squeezed the form into two columns, which is what made it tall
    enough to run past the fold.

    So the hero — and only the hero — gets its own wider measure. The columns
    are deliberately uneven: the form needs more width than the headline does,
    because width is what buys it a third column and a third column is what
    makes it short. The two halves then come out at roughly the same height.

    Consequence worth knowing: the hero now starts further left than the bands
    below it, which stay at 1080px. That is the asked-for effect, not a bug.
  */
  @media screen and (min-width: 1200px) {
    #mm-ad-mmad .mm-ad__hero .mm-ad__inner { max-width: 1400px; }
    #mm-ad-mmad .mm-ad__hero-grid--art {
      grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    }
    #mm-ad-mmad .mm-ad__title { font-size: clamp(48px, 4.4vw, 64px); }
    /* A little less air above, so the form's last row clears the fold. */
    #mm-ad-mmad .mm-ad__hero { padding-block: 56px 80px; }
  }

  /* Tablet: copy beside the wheel; form and card take a full row each. */
  @media screen and (min-width: 750px) and (max-width: 999px) {
    #mm-ad-mmad .mm-ad__hero-grid {
      grid-template-columns: 1fr 1fr;
      text-align: left;
    }
    #mm-ad-mmad .mm-ad__title,
    #mm-ad-mmad .mm-ad__sub { margin-inline: 0; }
    #mm-ad-mmad .mm-ad__actions { justify-content: flex-start; }
    /*
      Same reading order as the desktop layout, but the two wide things get a
      full row each — a tablet column is too narrow to set a headline beside a
      form, and too narrow for a three-column form if it is halved. Only the
      wheel and its card pair up, which is the arrangement that matters.
    */
    #mm-ad-mmad .mm-ad__hero-grid--art .mm-ad__hero-copy { grid-column: 1 / -1; grid-row: 1; }
    #mm-ad-mmad .mm-ad__hero-grid--art .mm-ad__form      { grid-column: 1 / -1; grid-row: 2; }
    #mm-ad-mmad .mm-ad__hero-grid--art .mm-ad__art       { grid-column: 1; grid-row: 3; }
    #mm-ad-mmad .mm-ad__hero-grid--art .mm-ad__card      { grid-column: 2; grid-row: 3; align-self: center; }
    #mm-ad-mmad .mm-ad__card { min-height: 258px; }
  }

  /* ============================================================
     COSMIC SIGNATURE FORM — GEN-Z ACID
     The second of the two things asked to break from the page:
     white, a 4px black outline, a 12px hard offset and a tilt that
     straightens under the pointer. Everything inside it is Space
     Grotesk; nothing inside it is gold.
     ============================================================ */
  #mm-ad-mmad .mm-ad__form {
    background: #ffffff;
    border: 4px solid var(--mm-ad-acid-ink);
    border-radius: 24px;
    box-shadow: 12px 12px 0 0 var(--mm-ad-acid-ink);
    padding: 24px;
    margin-top: 30px;
    text-align: left;
    color: var(--mm-ad-acid-ink);
    font-family: var(--mm-ad-acid-face);
    transition: transform .3s ease;
  }
  #mm-ad-mmad .mm-ad__form-head {
    display: flex; gap: 10px; align-items: baseline;
    margin-bottom: 22px;
  }
  /* Acid, so no gold here — the icon takes the form's own black. */
  #mm-ad-mmad .mm-ad__form-ico {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    line-height: 1;
    color: var(--mm-ad-acid-ink);
  }
  #mm-ad-mmad .mm-ad__form-ico .mm-ad-ico { width: 24px; height: 24px; stroke-width: 1.7; }
  #mm-ad-mmad .mm-ad__form-title {
    display: inline-block;
    margin: 0 0 10px;
    padding-bottom: 12px;
    border-bottom: 4px solid var(--mm-ad-acid-ink);
    font-family: var(--mm-ad-acid-face);
    font-size: 1.6rem;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--mm-ad-acid-ink);
  }
  #mm-ad-mmad .mm-ad__form-sub {
    margin: 0; font-size: .85rem; line-height: 1.5;
    font-weight: 400; color: #4b5563;
  }
  #mm-ad-mmad .mm-ad__form-body { display: grid; gap: 16px; }
  #mm-ad-mmad .mm-ad__field { display: grid; gap: 8px; min-width: 0; }
  #mm-ad-mmad .mm-ad__field > label,
  #mm-ad-mmad .mm-ad__field-label {
    font-family: var(--mm-ad-acid-face);
    font-size: .75rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--mm-ad-acid-ink);
  }
  #mm-ad-mmad .mm-ad__field em {
    font-style: normal; font-weight: 400; text-transform: none;
    letter-spacing: 0; color: #6b7280; margin-left: 5px;
  }
  /* :not([type="radio"]) is load-bearing — the radios are absolutely positioned
     and width:100% would resolve them against the viewport, not the row, giving
     three viewport-wide invisible inputs and a sideways-scrolling page. */
  #mm-ad-mmad .mm-ad__field input:not([type="radio"]),
  #mm-ad-mmad .mm-ad__field select {
    /* 16px min — anything smaller makes iOS Safari zoom on focus. */
    font-size: 16px;
    font-family: var(--mm-ad-acid-face);
    font-weight: 600;
    width: 100%;
    padding: 12px 18px;
    border: 2px solid var(--mm-ad-acid-ink);
    border-radius: 12px;
    background: var(--mm-ad-acid-field);
    color: var(--mm-ad-acid-ink);
    -webkit-appearance: none; appearance: none;
    min-height: 48px;             /* iOS renders bare date/time inputs collapsed */
    transition: background-color .15s ease;
  }
  #mm-ad-mmad .mm-ad__field input::placeholder { color: #9ca3af; font-weight: 400; }
  #mm-ad-mmad .mm-ad__field input[type="date"]::-webkit-calendar-picker-indicator,
  #mm-ad-mmad .mm-ad__field input[type="time"]::-webkit-calendar-picker-indicator {
    opacity: .8; cursor: pointer;
  }
  /*
    A date input will not shrink below the width of "dd/mm/yyyy" plus its
    picker button — measured at 186px with the padding below. In a three-column
    form that is wider than the column, and it spilled ~23px over its
    neighbour. Trimming the side padding on these two brings the intrinsic
    minimum under the column width; the text fields keep the roomier padding.
  */
  #mm-ad-mmad .mm-ad__field input[type="date"],
  #mm-ad-mmad .mm-ad__field input[type="time"] {
    padding-inline: 10px;
  }
  #mm-ad-mmad .mm-ad__field select option { color: #000000; background: #ffffff; }
  #mm-ad-mmad .mm-ad__field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23000000' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 11px;
    padding-right: 40px;
  }
  /* The concept's whole focus state: the field fills with acid lime. */
  #mm-ad-mmad .mm-ad__field input:focus,
  #mm-ad-mmad .mm-ad__field select:focus {
    background-color: var(--mm-ad-acid-lime);
    border-color: var(--mm-ad-acid-ink);
    box-shadow: none;
    outline: none;
  }
  #mm-ad-mmad .mm-ad__field input:focus-visible,
  #mm-ad-mmad .mm-ad__field select:focus-visible {
    outline: 3px solid var(--mm-ad-acid-indigo);
    outline-offset: 2px;
  }
  #mm-ad-mmad .mm-ad__field input[aria-invalid="true"] {
    border-color: var(--mm-ad-acid-ink);
    background-color: #ffe4e6;
  }

  #mm-ad-mmad .mm-ad__radios { display: flex; flex-wrap: wrap; gap: 8px; }
  /* Contains the absolutely-positioned input below. */
  #mm-ad-mmad .mm-ad__radio { position: relative; display: inline-flex; }
  #mm-ad-mmad .mm-ad__radio input {
    position: absolute; opacity: 0; pointer-events: none;
    width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0;
    inset: auto auto 0 0;
  }
  #mm-ad-mmad .mm-ad__radio label {
    display: inline-block; cursor: pointer;
    padding: 9px 18px; border-radius: 999px;
    border: 2px solid var(--mm-ad-acid-ink);
    font-family: var(--mm-ad-acid-face);
    font-size: .82rem; font-weight: 600; color: var(--mm-ad-acid-ink);
    background: var(--mm-ad-acid-field);
    transition: background .15s;
  }
  #mm-ad-mmad .mm-ad__radio input:checked + label {
    background: var(--mm-ad-acid-lime);
    color: var(--mm-ad-acid-ink);
    font-weight: 700;
  }
  #mm-ad-mmad .mm-ad__radio input:focus-visible + label {
    outline: 3px solid var(--mm-ad-acid-indigo); outline-offset: 2px;
  }

  #mm-ad-mmad .mm-ad__form-btn {
    font-family: var(--mm-ad-acid-face);
    font-size: 1.05rem; font-weight: 700;
    cursor: pointer;
    border: 2px solid var(--mm-ad-acid-ink);
    border-radius: 12px;
    padding: 14px 26px; min-height: 52px;
    background: var(--mm-ad-acid-indigo); color: #ffffff;
    box-shadow: 4px 4px 0 0 var(--mm-ad-acid-ink);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  /* The concept's press: the button walks into its own shadow. */
  #mm-ad-mmad .mm-ad__form-btn:hover {
    transform: translate(2px, 2px);
    box-shadow: 0 0 0 0 var(--mm-ad-acid-ink);
  }
  #mm-ad-mmad .mm-ad__form-btn:focus-visible {
    outline: 3px solid var(--mm-ad-acid-indigo); outline-offset: 3px;
  }
  #mm-ad-mmad .mm-ad__form-err {
    margin: 0;
    padding: 12px 16px;
    border: 2px solid var(--mm-ad-acid-ink);
    border-radius: 12px;
    background: #ffe4e6;
    color: var(--mm-ad-acid-ink);
    font-family: var(--mm-ad-acid-face);
    font-size: .85rem; font-weight: 600; line-height: 1.45;
  }
  /*
    Same shape as the error, lime instead of rose. Only ever rendered by Liquid
    on a posted_successfully? reload, and only visible when the script could not
    reach storage to show the done panel — so it never competes with it.
  */
  #mm-ad-mmad .mm-ad__form-ok {
    margin: 0;
    padding: 12px 16px;
    border: 2px solid var(--mm-ad-acid-ink);
    border-radius: 12px;
    background: var(--mm-ad-acid-lime);
    color: var(--mm-ad-acid-ink);
    font-family: var(--mm-ad-acid-face);
    font-size: .85rem; font-weight: 600; line-height: 1.45;
  }
  /*
    The Turnstile iframe has its own intrinsic width and would otherwise sit in
    one grid cell and overflow it. Spanning the row keeps it inside the card at
    every column count.
  */
  #mm-ad-mmad .mm-ad__turnstile { grid-column: 1 / -1; min-width: 0; }
  #mm-ad-mmad .mm-ad__turnstile iframe { max-width: 100%; }

  /* Same furniture as the done panel, in the gold half of the palette so it
     reads as information rather than as an error or a success. */
  #mm-ad-mmad .mm-ad__form-used {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 18px;
    border: 2px solid var(--mm-ad-acid-ink);
    border-radius: 16px;
    background: #fef3c7;
    font-family: var(--mm-ad-acid-face);
    font-size: .88rem; line-height: 1.5; font-weight: 500;
  }
  #mm-ad-mmad .mm-ad__form-used p { margin: 0 0 10px; }
  #mm-ad-mmad .mm-ad__form-paid {
    display: inline-block;
    margin: 0 10px 4px 0;
    padding: 10px 18px;
    border: 2px solid var(--mm-ad-acid-ink);
    border-radius: 10px;
    background: var(--mm-ad-acid-indigo);
    color: #ffffff;
    font-weight: 700; text-decoration: none;
  }
  #mm-ad-mmad .mm-ad__form-done {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 18px;
    border: 2px solid var(--mm-ad-acid-ink);
    border-radius: 16px;
    background: var(--mm-ad-acid-lime);
    font-family: var(--mm-ad-acid-face);
    font-size: .88rem; line-height: 1.5; font-weight: 500;
    color: var(--mm-ad-acid-ink);
  }
  #mm-ad-mmad .mm-ad__form-done strong {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -.01em;
  }
  #mm-ad-mmad .mm-ad__form-edit {
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; font-weight: 700; color: var(--mm-ad-acid-ink);
    text-decoration: underline; text-underline-offset: 2px;
  }
  /* [hidden] loses to the display rules above — restore it. */
  #mm-ad-mmad [hidden] { display: none !important; }

  /*
    Two-up only where the form is actually wide enough — the form's width is not
    the viewport's. Below 750px it is a ~335px phone column and must stay
    single-file; from 750px it is either a full-width tablet row (~795px) or the
    hero's left column (~650px), both of which pair comfortably. A 600px
    breakpoint would have paired fields inside a 335px column; leaving it at
    1000px left 753px-wide inputs stretched across the tablet row.
  */
  @media screen and (min-width: 750px) {
    /*
      Three columns, and it has to be three. Eight fields (name, phone, email +
      five birth details) in two columns is four rows plus a button — the form
      passes 500px and drags the hero back over 1000px, which is what made it
      ugly the first time. Three columns packs the same eight into three rows.

      No nth-child placement here: the fields auto-flow, so adding or reordering
      a field cannot silently land it in the wrong cell. Only the two non-field
      children are placed, and they are matched by class, not position.
    */
    #mm-ad-mmad .mm-ad__form { padding: 30px; }
    #mm-ad-mmad .mm-ad__form-body { grid-template-columns: repeat(3, 1fr); }
    /*
      Eleven fields + the button = twelve cells = exactly four rows (it was
      three until preferred date, time and language were added). The button
      takes the twelfth itself (order:99 puts it last in the flow), which is why
      no field may be widened — giving one two cells pushes the button onto a
      fifth row and makes the hero taller again.
      The error and the success note are display:none / absent until they fire,
      so neither occupies a cell.
    */
    #mm-ad-mmad .mm-ad__form-err { grid-column: 1 / -1; order: 98; }
    /* order:-1 keeps the reading order the DOM order — it is the first child. */
    #mm-ad-mmad .mm-ad__form-ok  { grid-column: 1 / -1; order: -1; }
    #mm-ad-mmad .mm-ad__form-btn  { order: 99; align-self: end; }
  }

  /*
    Two columns for the whole desktop range, not three. From 1000px the form no
    longer spans the hero's full left column — it occupies half the grid beside
    the headline, around 500px, which is ~208px per column at two and only
    ~133px at three. The date field alone will not go below ~166px, so three
    would overflow at every desktop width. Eight fields plus the button make
    five rows here, which is close to the height of the headline column beside
    it, so the two halves of row 1 come out level.
  */
  @media screen and (min-width: 1000px) {
    #mm-ad-mmad .mm-ad__form-body { grid-template-columns: repeat(2, 1fr); }
  }

  /*
    Three columns again once the form is genuinely wide enough for them, which
    is what makes it short enough to clear the fold. The date field will not go
    below ~166px: at 1200px three columns would be 160px and overflow, at 1360
    they are ~187px and fit.

    This MUST stay after the two-column rule above. Same specificity, so source
    order decides — declared before it, the wider rule matched and then lost,
    and the form silently stayed at two columns on a 1900px screen.
  */
  @media screen and (min-width: 1360px) {
    #mm-ad-mmad .mm-ad__form-body { grid-template-columns: repeat(3, 1fr); }
  }

  /*
    The tilt is desktop-only. On a phone the card is the full column
    width, where a rotation reads as a rendering fault rather than a
    decision — and it would push past the 20px gutter. It straightens
    whenever the visitor is actually using it, exactly as in the concept.
  */
  @media screen and (min-width: 1000px) {
    #mm-ad-mmad .mm-ad__form { transform: rotate(1deg); }
    #mm-ad-mmad .mm-ad__form:hover,
    #mm-ad-mmad .mm-ad__form:focus-within { transform: rotate(0deg); }
  }

  @media (prefers-reduced-motion: reduce) {
    #mm-ad-mmad .mm-ad__form,
    #mm-ad-mmad .mm-ad__form-btn,
    #mm-ad-mmad .mm-ad__cta,
    #mm-ad-mmad .mm-ad__channel,
    #mm-ad-mmad .mm-ad__pillar,
    #mm-ad-mmad .mm-ad__step,
    #mm-ad-mmad .mm-ad__astro { transition: none; }
    #mm-ad-mmad .mm-ad__form-btn:hover,
    #mm-ad-mmad .mm-ad__cta:hover,
    #mm-ad-mmad .mm-ad__channel:hover,
    #mm-ad-mmad .mm-ad__pillar:hover,
    #mm-ad-mmad .mm-ad__step:hover,
    #mm-ad-mmad .mm-ad__astro:hover { transform: none; }
    #mm-ad-mmad .mm-ad__kicker { transform: none; }
    /* The wheel is decorative — stop it entirely rather than slow it down. */
    #mm-ad-mmad .mm-ad__spin,
    #mm-ad-mmad .mm-ad__spark { animation: none; }
    #mm-ad-mmad .mm-ad__spark { fill-opacity: .7; }
  }