/**
 * DiviMint Menu product page.
 *
 * Loaded only on the page-divimint-menu.php template. Everything here reuses
 * the theme tokens from style.css; nothing redefines them.
 */

/* ── hero + before/after ─────────────────────── */
.mnu-hero h1{max-width:15ch}

.mnu-ba{margin-top:56px;background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--elev);overflow:hidden;user-select:none}
.mnu-ba-chrome{display:flex;align-items:center;gap:7px;padding:13px 17px;
  background:var(--mist);border-bottom:1px solid var(--border-soft)}
.mnu-ba-chrome b{width:9px;height:9px;border-radius:50%;background:var(--border)}
.mnu-ba-chrome span{font-family:var(--m);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);margin-left:8px}
.mnu-ba-stage{position:relative;height:330px;background:var(--card)}
.mnu-pane{position:absolute;inset:0;padding:22px 24px}
.mnu-mininav{display:flex;gap:22px;align-items:center;font-weight:600;font-size:13px;
  color:var(--muted);padding-bottom:14px}
.mnu-mininav u{text-decoration:none;position:relative}
.mnu-brandmark{width:26px;height:26px;border-radius:8px;background:var(--ink);margin-right:auto}

.mnu-before .mnu-dd-old{margin:2px 0 0 84px;width:200px;background:var(--card);
  border-top:3px solid #2ea3f2;box-shadow:0 2px 10px rgba(10,15,28,.12)}
.mnu-before .mnu-dd-old a{display:block;font-size:12.5px;color:var(--muted);
  padding:7px 20px;border-bottom:1px solid var(--border-soft)}
.mnu-mob-old{margin-top:16px;border:1px solid var(--border);border-radius:10px;
  padding:12px 14px;font-size:12px;color:var(--muted)}
.mnu-mob-old b{display:block;font-weight:600;color:var(--text);padding:5px 0;
  border-bottom:1px solid var(--border-soft)}
.mnu-mob-old i{display:block;font-style:normal;padding:5px 0 5px 14px;
  border-bottom:1px solid var(--border-soft)}

.mnu-after{background:var(--paper)}
.mnu-after .mnu-mininav u.on::after{content:"";position:absolute;left:0;right:0;
  bottom:-7px;height:2.5px;border-radius:2px;background:var(--mint)}
.mnu-after .mnu-dd{margin:8px 0 0 84px;width:230px;background:var(--card);
  border-radius:12px;box-shadow:var(--elev);padding:10px}
.mnu-after .mnu-dd a{display:flex;justify-content:space-between;align-items:center;
  font-size:12.5px;color:var(--text);padding:9px 12px;border-radius:8px}
.mnu-after .mnu-dd a:hover{background:color-mix(in srgb,var(--mint) 10%,transparent)}
.mnu-after .mnu-dd svg,.mnu-mob-row svg{width:10px;height:10px;fill:none;
  stroke:var(--mint-deep);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mnu-mob{margin-top:14px;border-radius:12px;background:var(--card);
  box-shadow:0 1px 2px rgba(10,15,28,.05);border:1px solid var(--border-soft);
  padding:8px;font-size:12px}
.mnu-mob-row{display:flex;justify-content:space-between;align-items:center;
  padding:9px 12px;font-weight:600;color:var(--text);border-radius:8px}
.mnu-mob-row.is-quiet{color:var(--faint);font-weight:500}
.mnu-mob-sub{padding:4px 0 4px 22px;color:var(--muted)}

.mnu-tag{position:absolute;bottom:14px;left:24px;font-family:var(--m);font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border-radius:var(--r-full)}
.mnu-tag-before{background:var(--mist);color:var(--muted);border:1px solid var(--border)}
.mnu-tag-after{background:color-mix(in srgb,var(--mint) 12%,transparent);
  color:var(--mint-deep);border:1px solid color-mix(in srgb,var(--mint) 30%,transparent)}

.mnu-ba-clip{position:absolute;inset:0;overflow:hidden}
.mnu-ba-divider{position:absolute;top:0;bottom:0;width:3px;background:var(--mint);
  cursor:ew-resize;z-index:5}
.mnu-ba-divider i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:38px;height:38px;border-radius:50%;background:var(--mint);
  display:grid;place-items:center;box-shadow:0 4px 16px color-mix(in srgb,var(--mint) 50%,transparent)}
.mnu-ba-divider svg{width:16px;height:16px;fill:none;stroke:var(--ink);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* ── pain strip ──────────────────────────────── */
.mnu-pain{padding:64px 0}
.mnu-pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mnu-pain-card{background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:24px 24px 26px}
.mnu-pain-q{font-weight:600;font-size:16px;letter-spacing:-.01em;margin-bottom:9px}
.mnu-pain-q::before{content:"\201C";color:var(--mint)}
.mnu-pain-q::after{content:"\201D";color:var(--mint)}
.mnu-pain-a{color:var(--muted);font-size:14px}

/* ── demo ────────────────────────────────────── */
.mnu-panel{display:grid;grid-template-columns:1.15fr .85fr;border:1px solid var(--border);
  border-radius:22px;overflow:hidden;box-shadow:var(--elev)}
.mnu-admin{background:var(--mist);padding:30px 32px;border-right:1px solid var(--border)}
.mnu-tabs{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap}
.mnu-tabs button{font-family:var(--f);font-weight:600;font-size:13.5px;
  border:1px solid var(--border);background:var(--card);color:var(--muted);
  border-radius:var(--r-full);padding:10px 18px;cursor:pointer;transition:all .15s}
.mnu-tabs button.on{background:var(--ink);border-color:var(--ink);color:var(--on-dark)}
.mnu-ctl{background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:6px 18px;box-shadow:0 1px 2px rgba(10,15,28,.05)}
.mnu-ctl-row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:15px 0;border-bottom:1px solid var(--border-soft)}
.mnu-ctl-row:last-child{border-bottom:0}
.mnu-ctl-lbl{font-weight:600;font-size:14px}
.mnu-ctl-hint{font-size:12px;color:var(--faint);margin-top:2px}
.mnu-sw{position:relative;width:52px;height:28px;border-radius:var(--r-full);
  background:var(--mint);flex:0 0 auto}
.mnu-sw::after{content:"";position:absolute;top:3px;right:3px;width:22px;height:22px;
  border-radius:50%;background:var(--card);box-shadow:0 1px 3px rgba(10,15,28,.25)}
.mnu-seg{display:inline-flex;background:var(--mist);border:1px solid var(--border);
  border-radius:10px;padding:3px;gap:2px}
.mnu-seg b{font-weight:600;font-size:12px;padding:6px 12px;border-radius:7px;
  color:var(--faint);cursor:pointer}
.mnu-seg b.on{background:var(--card);color:var(--mint-deep);
  box-shadow:0 1px 2px rgba(10,15,28,.08)}
.mnu-pxv{font-family:var(--m);font-size:12.5px;background:var(--card);
  border:1px solid var(--border);border-radius:9px;padding:8px 13px}
.mnu-hamset{display:flex;gap:9px}
.mnu-hamset button{width:44px;height:44px;border-radius:11px;border:1px solid var(--border);
  background:var(--card);cursor:pointer;display:grid;place-items:center;transition:all .15s}
.mnu-hamset button.on{border-color:var(--mint);
  background:color-mix(in srgb,var(--mint) 10%,transparent)}
.mnu-hb{position:relative;width:18px;height:13px;display:block}
.mnu-hb i{position:absolute;left:0;width:18px;height:2px;border-radius:2px;background:var(--text)}
.mnu-hamset button.on .mnu-hb i{background:var(--mint-deep)}
.mnu-hb i:nth-child(1){top:0}.mnu-hb i:nth-child(2){top:5.5px}.mnu-hb i:nth-child(3){top:11px}
.mnu-hb-sq i:nth-child(2){width:11px}
.mnu-hb-cp i:nth-child(2){display:none}
.mnu-hb-cp i:nth-child(1){top:2.5px}.mnu-hb-cp i:nth-child(3){top:8.5px}

.mnu-phone-side{background:var(--ink);position:relative;display:grid;place-items:center;
  padding:44px 20px;overflow:hidden}
.mnu-phone-side::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(70% 120% at 90% 0,color-mix(in srgb,var(--mint) 16%,transparent),transparent 60%)}
.mnu-phone{position:relative;width:250px;height:470px;border-radius:34px;
  background:var(--ink-raised);padding:10px;box-shadow:0 30px 60px rgba(0,0,0,.5);
  border:1px solid var(--border-on-dark)}
.mnu-scr{position:relative;width:100%;height:100%;border-radius:26px;
  background:var(--card);overflow:hidden}
.mnu-p-head{display:flex;align-items:center;justify-content:space-between;
  padding:16px 16px 12px;border-bottom:1px solid var(--border-soft)}
.mnu-p-logo{width:22px;height:22px;border-radius:7px;background:var(--ink)}

.mnu-pham{position:relative;width:26px;height:19px;cursor:pointer;--d:.34s}
.mnu-pham i{position:absolute;left:0;width:26px;height:2.6px;border-radius:2px;
  background:var(--text);
  transition:translate var(--d) cubic-bezier(.4,0,.2,1),rotate var(--d) cubic-bezier(.4,0,.2,1),
    opacity .2s,scale var(--d) cubic-bezier(.4,0,.2,1)}
.mnu-pham i:nth-child(1){top:0}.mnu-pham i:nth-child(2){top:8.2px}.mnu-pham i:nth-child(3){top:16.4px}
.mnu-pham.x i:nth-child(1){translate:0 8.2px;rotate:45deg}
.mnu-pham.x i:nth-child(2){opacity:0;scale:.2 1}
.mnu-pham.x i:nth-child(3){translate:0 -8.2px;rotate:-45deg}
.mnu-pham.spin{transition:rotate var(--d) cubic-bezier(.4,0,.2,1)}
.mnu-pham.spin.x{rotate:180deg}
.mnu-pham.arrow.x i:nth-child(2){opacity:1;scale:1 1}
.mnu-pham.arrow i{transform-origin:left center}
.mnu-pham.arrow.x i:nth-child(1){translate:1px 8.2px;rotate:-42deg;scale:.6 1}
.mnu-pham.arrow.x i:nth-child(3){translate:1px -8.2px;rotate:42deg;scale:.6 1}

.mnu-pmenu{padding:8px 10px}
.mnu-it{border-bottom:1px solid var(--border-soft)}
.mnu-it:last-child{border-bottom:0}
.mnu-top{display:flex;align-items:center;justify-content:space-between;padding:13px 10px;
  font-weight:600;font-size:13.5px;cursor:pointer;border-radius:9px}
.mnu-top:hover{background:color-mix(in srgb,var(--mint) 9%,transparent)}
.mnu-car{width:11px;height:11px;fill:none;stroke:var(--mint-deep);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .28s}
.mnu-it.open .mnu-car{transform:rotate(180deg)}
.mnu-kids{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s ease}
.mnu-it.open .mnu-kids{grid-template-rows:1fr}
.mnu-kids>div{overflow:hidden}
.mnu-kids a{display:block;font-size:12.5px;color:var(--muted);padding:8px 10px 8px 24px}
.mnu-kids a:hover{color:var(--mint-deep)}

.mnu-pslide{position:absolute;inset:0;pointer-events:none}
.mnu-dim{position:absolute;inset:0;background:rgba(10,15,28,.45);opacity:0;transition:opacity .34s}
.mnu-sheet{position:absolute;top:0;bottom:0;right:0;width:78%;background:var(--card);
  box-shadow:-16px 0 40px rgba(0,0,0,.25);transform:translateX(102%);
  transition:transform .34s cubic-bezier(.4,0,.2,1);padding:52px 18px 18px}
.mnu-pslide.open{pointer-events:auto}
.mnu-pslide.open .mnu-dim{opacity:1}
.mnu-pslide.open .mnu-sheet{transform:none}
.mnu-pslide.from-left .mnu-sheet{right:auto;left:0;transform:translateX(-102%);
  box-shadow:16px 0 40px rgba(0,0,0,.25)}
.mnu-pslide.from-left.open .mnu-sheet{transform:none}
.mnu-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:9px;
  border:0;background:color-mix(in srgb,var(--mint) 12%,transparent);color:var(--mint-deep);
  display:grid;place-items:center;cursor:pointer}
.mnu-pslide.from-left .mnu-close{right:auto;left:14px}
.mnu-close svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round}
.mnu-sheet a{display:block;font-weight:600;font-size:14px;color:var(--text);
  padding:11px 8px;border-bottom:1px solid var(--border-soft)}
.mnu-note{position:relative;margin-top:20px;text-align:center;font-size:13px;color:var(--on-dark-faint)}

/* ── band proofs ─────────────────────────────── */
.mnu-band-in{max-width:none}
.mnu-proofs{display:grid;gap:0;margin-top:14px}
.mnu-proof{display:grid;grid-template-columns:170px 1fr;gap:26px;padding:22px 0;
  border-bottom:1px solid var(--border-on-dark);align-items:baseline}
.mnu-proof:last-child{border-bottom:0;padding-bottom:0}
.mnu-proof-k{font-family:var(--m);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mint)}
.mnu-proof p{color:var(--on-dark-muted);font-size:15px;max-width:none}

/* ── compare ─────────────────────────────────── */
.mnu-compare-scroll{overflow-x:auto}
.mnu-table{width:100%;min-width:560px;border-collapse:separate;border-spacing:0;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.mnu-table th,.mnu-table td{padding:15px 20px;text-align:center;font-size:14.5px;
  border-bottom:1px solid var(--border-soft)}
.mnu-table thead th{font-weight:600;font-size:14px;background:var(--mist)}
.mnu-table td:first-child,.mnu-table th:first-child{text-align:left;font-weight:600}
.mnu-table tr:last-child td{border-bottom:0}
.mnu-table th.mnu-hl{background:var(--ink);color:var(--on-dark)}
.mnu-table td.mnu-hl{background:color-mix(in srgb,var(--mint) 9%,transparent)}
.mnu-yes{color:var(--mint-deep);font-weight:700}
.mnu-mid{color:var(--faint)}
.mnu-no{color:color-mix(in srgb,var(--text) 22%,transparent)}

/* ── pricing / cta extras ────────────────────── */
.mnu-price{max-width:440px;margin:0 auto}
.mnu-price .plan .btn{margin-top:auto}
.mnu-assure{margin-top:18px;font-size:13px;color:var(--faint)}
.mnu-trademark{margin:26px auto 0;font-size:11.5px;color:var(--faint);max-width:64ch}

/* ── responsive ──────────────────────────────── */
@media(max-width:900px){
  .mnu-panel{grid-template-columns:1fr}
  .mnu-admin{border-right:0;border-bottom:1px solid var(--border)}
  .mnu-proof{grid-template-columns:1fr;gap:8px}
}
@media(max-width:640px){
  .mnu-pain-grid{grid-template-columns:1fr}
  .mnu-ba-stage{height:300px}
}