/* See note 1 in the header comment — do not delete. */
  #shopify-section-mmmm_oracle_popu{ content-visibility:visible; contain-intrinsic-size:auto; }

  #mmeo-mmmm_oracle_popu{
    --mm-ink:#1f1b16; --mm-pink:#ff2e63; --mm-yellow:#ffd93d;
    --mm-paper:#ffffff; --mm-field:#f7f6f3; --mm-mute:#8a8177;
    position:fixed; inset:0; z-index:10050;
    display:flex; align-items:center; justify-content:center; padding:20px;
    background:rgba(8,8,10,.72);
    opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
    font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
  }
  @supports (backdrop-filter:blur(6px)){ #mmeo-mmmm_oracle_popu{ backdrop-filter:blur(6px); } }
  #mmeo-mmmm_oracle_popu[hidden]{ display:none !important; }
  #mmeo-mmmm_oracle_popu.is-open{ opacity:1; visibility:visible; }

  #mmeo-mmmm_oracle_popu .mmeo-card{
    position:relative; width:min(430px,100%); max-height:92vh;
    display:flex; flex-direction:column; overflow:hidden;
    background:var(--mm-paper); border:3px solid var(--mm-ink); border-radius:18px;
    box-shadow:10px 10px 0 var(--mm-ink);
    transform:scale(.82) translateY(20px);
    transition:transform .45s cubic-bezier(.34,1.56,.64,1);
  }
  #mmeo-mmmm_oracle_popu.is-open .mmeo-card{ transform:none; }

  #mmeo-mmmm_oracle_popu .mmeo-sticker{
    position:absolute; top:14px; left:-8px; z-index:6;
    background:var(--mm-pink); color:#fff; font-weight:900; font-size:.68rem;
    letter-spacing:2px; padding:8px 16px; transform:rotate(-4deg);
    border:2px solid var(--mm-ink);
  }
  #mmeo-mmmm_oracle_popu .mmeo-x{
    position:absolute; top:12px; right:12px; z-index:7; width:36px; height:36px;
    border-radius:10px; border:2px solid var(--mm-ink); cursor:pointer;
    background:var(--mm-ink); color:#fff; font-size:.95rem; line-height:1;
    display:flex; align-items:center; justify-content:center; transition:transform .2s;
  }
  #mmeo-mmmm_oracle_popu .mmeo-x:hover{ transform:rotate(90deg); }

  #mmeo-mmmm_oracle_popu .mmeo-art{ flex:none; background:var(--mm-field); }
  #mmeo-mmmm_oracle_popu .mmeo-art img{
    width:100%; height:150px; object-fit:cover; display:block;
    border-bottom:3px solid var(--mm-ink);
  }

  #mmeo-mmmm_oracle_popu .mmeo-body{ padding:15px 22px 18px; overflow-y:auto; text-align:center; }
  #mmeo-mmmm_oracle_popu .mmeo-eye{
    font-size:.62rem; font-weight:800; letter-spacing:2.5px; text-transform:uppercase;
    color:var(--mm-mute); margin:0 0 6px;
  }
  #mmeo-mmmm_oracle_popu .mmeo-title{
    font-size:1.35rem; font-weight:900; line-height:1.15; text-transform:uppercase;
    color:var(--mm-ink); margin:0;
  }
  #mmeo-mmmm_oracle_popu .mmeo-free{
    font-size:clamp(2.2rem,10vw,3rem); font-weight:900; line-height:1.05;
    color:var(--mm-pink); text-shadow:4px 4px 0 var(--mm-ink); margin:0 0 9px;
  }

  #mmeo-mmmm_oracle_popu .mmeo-form{
    display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:0; text-align:left;
  }
  #mmeo-mmmm_oracle_popu .mmeo-f{ grid-column:1/-1; min-width:0; }
  #mmeo-mmmm_oracle_popu .mmeo-f--half{ grid-column:auto; }
  #mmeo-mmmm_oracle_popu .mmeo-f label{
    display:block; font-size:.58rem; font-weight:800; letter-spacing:1.4px;
    text-transform:uppercase; color:var(--mm-ink); margin-bottom:4px;
  }
  #mmeo-mmmm_oracle_popu .mmeo-f input,
  #mmeo-mmmm_oracle_popu .mmeo-f select{
    width:100%; background:var(--mm-field); border:2px solid var(--mm-ink); border-radius:10px;
    padding:10px 11px; color:var(--mm-ink); font-family:inherit; font-size:.85rem;
    font-weight:600; outline:none; transition:box-shadow .15s, background .15s;
  }
  #mmeo-mmmm_oracle_popu .mmeo-f input:focus,
  #mmeo-mmmm_oracle_popu .mmeo-f select:focus{
    background:#fffbe8; box-shadow:3px 3px 0 var(--mm-ink);
  }
  #mmeo-mmmm_oracle_popu .mmeo-f input.is-bad,
  #mmeo-mmmm_oracle_popu .mmeo-f select.is-bad{ background:#ffe8ee; box-shadow:3px 3px 0 var(--mm-pink); }

  #mmeo-mmmm_oracle_popu .mmeo-cf{ grid-column:1/-1; display:flex; justify-content:center; margin-top:2px; }

  #mmeo-mmmm_oracle_popu .mmeo-btn{
    grid-column:1/-1; margin-top:4px; padding:14px;
    background:var(--mm-yellow); border:3px solid var(--mm-ink); border-radius:12px;
    color:var(--mm-ink); font-family:inherit; font-weight:900; font-size:.92rem;
    letter-spacing:2px; cursor:pointer; box-shadow:5px 5px 0 var(--mm-ink);
    transition:transform .15s, box-shadow .15s;
  }
  #mmeo-mmmm_oracle_popu .mmeo-btn:hover{ transform:translate(2px,2px); box-shadow:3px 3px 0 var(--mm-ink); }
  #mmeo-mmmm_oracle_popu .mmeo-btn[disabled]{ opacity:.55; cursor:default; transform:none; box-shadow:5px 5px 0 var(--mm-ink); }

  #mmeo-mmmm_oracle_popu .mmeo-err{
    grid-column:1/-1; margin:0; color:#c8102e; font-size:.72rem; font-weight:700;
    line-height:1.45; min-height:1em; text-align:center;
  }
  /* Sits under FREE now, OUTSIDE .mmeo-form - so no grid-column: it is no
     longer a child of that two-column grid and the property would be inert.
     The negative top margin tucks it against the FREE lockup, which carries
     a 9px bottom margin of its own. */
  #mmeo-mmmm_oracle_popu .mmeo-trust{
    margin:-4px 0 12px; text-align:center; color:var(--mm-ink);
    font-size:.63rem; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; line-height:1.6;
  }
  #mmeo-mmmm_oracle_popu .mmeo-note{
    grid-column:1/-1; margin:6px 0 0; text-align:center;
    color:var(--mm-mute); font-size:.7rem; line-height:1.5;
  }
  #mmeo-mmmm_oracle_popu .mmeo-no{
    grid-column:1/-1; margin-top:2px; background:none; border:none; color:var(--mm-mute);
    font-family:inherit; font-size:.72rem; font-weight:600; text-decoration:underline;
    text-underline-offset:3px; cursor:pointer; padding:4px;
  }
  #mmeo-mmmm_oracle_popu .mmeo-no:hover{ color:var(--mm-ink); }

  /* success */
  #mmeo-mmmm_oracle_popu .mmeo-done{
    position:absolute; inset:0; z-index:8; display:flex; flex-direction:column;
    align-items:center; justify-content:center; text-align:center; padding:32px 26px;
    background:var(--mm-paper);
    opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s ease;
  }
  #mmeo-mmmm_oracle_popu .mmeo-card.is-done .mmeo-done{ opacity:1; visibility:visible; }
  #mmeo-mmmm_oracle_popu .mmeo-ico{
    width:84px; height:84px; border-radius:50%; display:flex; align-items:center;
    justify-content:center; font-size:2.2rem; margin-bottom:18px;
    background:var(--mm-yellow); border:3px solid var(--mm-ink); box-shadow:5px 5px 0 var(--mm-ink);
  }
  #mmeo-mmmm_oracle_popu .mmeo-done h4{
    font-size:1.3rem; font-weight:900; text-transform:uppercase; color:var(--mm-ink); margin:0 0 8px;
  }
  #mmeo-mmmm_oracle_popu .mmeo-done p{
    max-width:330px; line-height:1.6; font-size:.85rem; color:var(--mm-mute); margin:0 0 20px;
  }
  #mmeo-mmmm_oracle_popu .mmeo-cta{
    display:inline-block; background:var(--mm-yellow); border:3px solid var(--mm-ink);
    border-radius:12px; box-shadow:5px 5px 0 var(--mm-ink); color:var(--mm-ink);
    padding:13px 26px; cursor:pointer; font-family:inherit; font-weight:900;
    font-size:.82rem; letter-spacing:1.5px; text-transform:uppercase; text-decoration:none;
    margin-bottom:14px;
  }
  #mmeo-mmmm_oracle_popu .mmeo-back{
    background:none; border:none; color:var(--mm-mute); font-family:inherit;
    font-size:.74rem; font-weight:600; text-decoration:underline; text-underline-offset:3px; cursor:pointer;
  }

  @media (max-width:520px){
    #mmeo-mmmm_oracle_popu{ padding:14px; }
    #mmeo-mmmm_oracle_popu .mmeo-card{ box-shadow:6px 6px 0 var(--mm-ink); }
    #mmeo-mmmm_oracle_popu .mmeo-art img{ height:140px; }
    #mmeo-mmmm_oracle_popu .mmeo-body{ padding:16px 16px 18px; }
  }
  @media (prefers-reduced-motion:reduce){
    #mmeo-mmmm_oracle_popu,
    #mmeo-mmmm_oracle_popu .mmeo-card,
    #mmeo-mmmm_oracle_popu .mmeo-done{ transition:none; }
    #mmeo-mmmm_oracle_popu .mmeo-card{ transform:none; }
  }

  /* 2026-09-19: the desktop two-section block that lived here was REVERTED at the
     owner's instruction - "reverse it to the original potrait mode". The popup is
     the single portrait card at every width again, exactly as ported. Do not
     reintroduce a min-width:750px layout here without him asking for it.
     (mm-oracle-art.jpg 660x1040 sits in uploads/2026/09/ unused from that attempt.) */

  /* ---- Type scale, 2026-09-19 ------------------------------------------
     Owner: "increase the text size without increasing the card width or height."
     The card stays 430px wide and no taller than it was (546px at 1280x820).

     WHY IT WAS TINY: this theme's root font-size resolves to 8.89px, and the
     ported CSS is in rem against a 16px root - .58rem labels landed at 5px,
     .85rem inputs at 7.6px. Everything below is px so the root cannot shrink it.

     THE HEIGHT IS PAID FOR, NOT ADDED: bigger glyphs cost ~67px, bought back
     from the form gap (9->6), body padding, label/section margins, input and
     button padding, and the art band (150->130). Keep that ledger balanced if
     you touch any number here. */
  #mmeo-mmmm_oracle_popu .mmeo-art img{ height:130px; }
  #mmeo-mmmm_oracle_popu .mmeo-body{ padding:12px 20px 12px; }
  #mmeo-mmmm_oracle_popu .mmeo-sticker{ font-size:11px; padding:7px 14px; }
  #mmeo-mmmm_oracle_popu .mmeo-x{ font-size:16px; }
  #mmeo-mmmm_oracle_popu .mmeo-eye{ font-size:11px; letter-spacing:2px; margin:0 0 4px; }
  #mmeo-mmmm_oracle_popu .mmeo-title{ font-size:19px; line-height:1.12; }
  #mmeo-mmmm_oracle_popu .mmeo-free{ font-size:30px; margin:0 0 4px; }
  #mmeo-mmmm_oracle_popu .mmeo-trust{ font-size:11px; letter-spacing:1px; margin:-2px 0 8px; line-height:1.4; }
  #mmeo-mmmm_oracle_popu .mmeo-form{ gap:6px; }
  #mmeo-mmmm_oracle_popu .mmeo-f label{ font-size:10px; letter-spacing:1.2px; margin-bottom:3px; }
  #mmeo-mmmm_oracle_popu .mmeo-f input,
  #mmeo-mmmm_oracle_popu .mmeo-f select{ font-size:15px; padding:8px 10px; }
  #mmeo-mmmm_oracle_popu .mmeo-cf{ margin-top:0; }
  #mmeo-mmmm_oracle_popu .mmeo-btn{ font-size:15px; letter-spacing:1.6px; padding:11px; margin-top:2px; }
  #mmeo-mmmm_oracle_popu .mmeo-err{ font-size:11px; line-height:1.3; }
  #mmeo-mmmm_oracle_popu .mmeo-note{ font-size:11px; line-height:1.4; margin:3px 0 0; }
  #mmeo-mmmm_oracle_popu .mmeo-no{ font-size:12px; padding:2px; margin-top:0; }
  #mmeo-mmmm_oracle_popu .mmeo-done h3{ font-size:19px; }
  #mmeo-mmmm_oracle_popu .mmeo-done p{ font-size:14px; }
  #mmeo-mmmm_oracle_popu .mmeo-done a{ font-size:13px; }

  /* ---- desktop bottom clearance, 2026-09-19 -----------------------------
     Owner: "in desktop shift the consult now button a little upper so that it
     doesn't touch the card border. dont touch the mobile."

     What he was actually seeing: with the Cloudflare Turnstile box rendered
     (~86px, it does NOT render in the Browser pane) the card needs ~649px. On a
     short browser window max-height:92vh caps it below that, the body clips, and
     the cut lands just under the button - so the button appears welded to the
     border and the note + "No thanks" line vanish.

     Fix is in two parts: a real gap under the last element at every height, and
     on short windows the art band gives its height to the form instead of the
     form being clipped. Both gated at min-width:750px - mobile is untouched. */
  @media (min-width:750px){
    #mmeo-mmmm_oracle_popu .mmeo-body{ padding-bottom:18px; }
    #mmeo-mmmm_oracle_popu .mmeo-btn{ margin-bottom:2px; }
  }
  @media (min-width:750px){
    #mmeo-mmmm_oracle_popu .mmeo-card{ max-height:96vh; }
    /* The art band takes whatever height is left over, never more than the 130px
       it wants. 500px = the body's own content with the Turnstile box rendered
       (483) + the card's 6px of border + an 11px cushion. Measured at 1280:
       vh 900 -> 130px band, card 619; vh 700 -> 130, card 619; vh 620 -> 95,
       card 584; vh 560 -> floor of 56, body scrolls the last 18px. Re-measure
       this constant if anything above the button changes height. */
    #mmeo-mmmm_oracle_popu .mmeo-art img{ height:clamp(56px,calc(96vh - 500px),130px); }
  }

  /* ---- more artwork, same card, 2026-09-20 -----------------------------
     Owner: "more of the image visible without changing the card's height and
     width... you may thin the cloudflare or may be re do the submit button."

     THE CARD IS UNCHANGED: 430x619 at 1280x820, exactly as before. The art band
     grows 130 -> 178px and every one of those 48px is taken back out of the form:
       Turnstile scaled to .78            15px   (it renders 300x65; 52px now)
       button padding 11 -> 9              4px
       error slot min-height 1em -> 0     11px   (it reflows when a real error shows)
       form row gap 6 -> 5                 7px   (7 gaps)
       body bottom padding 18 -> 12        6px
       note / no-thanks margins            3px
       trust bottom margin 8 -> 6          2px
     Change any of those and the 441 below has to move by the same amount, or the
     card height changes - which is the one thing he ruled out.
     435 = measured body content with the Turnstile rendered (429) + the card's 6px border. */
  @media (min-width:750px){
    #mmeo-mmmm_oracle_popu .mmeo-art img{ height:clamp(56px,calc(96vh - 435px),184px); }
    #mmeo-mmmm_oracle_popu .mmeo-body{ padding:12px 20px 12px; }
    #mmeo-mmmm_oracle_popu .mmeo-form{ gap:5px; }
    #mmeo-mmmm_oracle_popu .mmeo-trust{ margin:-2px 0 6px; }
    #mmeo-mmmm_oracle_popu .mmeo-cf{ height:52px; overflow:hidden; }
    #mmeo-mmmm_oracle_popu .mmeo-cf > *{ transform:scale(.78); transform-origin:top center; }
    #mmeo-mmmm_oracle_popu .mmeo-btn{ padding:9px; margin:0; }
    #mmeo-mmmm_oracle_popu .mmeo-err{ min-height:0; }
    #mmeo-mmmm_oracle_popu .mmeo-note{ margin:2px 0 0; }
    #mmeo-mmmm_oracle_popu .mmeo-no{ padding:0; }
  }