/* GENERATED - copied by build.js from E:/downloads/mge-quote-pages/mge-quote-pages.css. Do not edit here. */
/* ══════════════════════════════════════════════════════════════════════════════
   MGE CUSTOM PRINTS — QUOTE PAGE STYLESHEET
   Shared by both quote pages (Instant Print Quote, Instant Embroidery Quote).

   WHERE THIS GOES
   Paste once into the store's Custom CSS:
     mgecustomprints.secure-decoration.com/manage_site/custom_css
   Then each page's Html widget only needs its markup + script.
   (Alternative: wrap this in a STYLE element at the top of each page's Html
   widget instead. Works either way — just don't do both.)

   !! DO NOT write a literal closing style tag anywhere in this file, not even
   inside a comment. If this stylesheet is pasted into a STYLE element, the
   browser ends that element at the first closing tag it sees — including one
   inside a CSS comment — and every rule after it is silently dropped. That
   exact bug was here until 5 Sep 2026 and it broke the whole sheet.

   ── THE ONE RULE THAT MATTERS ─────────────────────────────────────────────
   EVERY selector is scoped under .mgeq. There is not one bare element, `body`,
   `html` or `*` selector in this file, and none may ever be added.

   Page content on a DecoNetwork store is injected into the ONE shared Advanced
   Custom Layout, so any CSS here applies to the real site. A rule like
   `h1 { font-size: 40px }` would restyle every heading on every page of the
   store, including checkout. Scope or don't ship.

   ── PALETTE ───────────────────────────────────────────────────────────────
   Read off the live www.mgecustomprints.com homepage on 3 Sep 2026 with
   getComputedStyle — measured, not guessed, and not from a brand doc.

     ink        #000613   buttons, headings, primary dark   (rgb 0,6,19)
     navy       #091B39   button hover, secondary heading
     body       #1C1B1B   body copy                          (most-used text colour)
     muted      #43474E   labels, secondary copy
     accent     #FCD400   the site's yellow                  (35 uses on the homepage)
     accent-ink #6E5C00   the only text colour used ON that yellow
     tint       #F1F3FF   panel fill
     tint2      #F9F9FF   input / soft fill
     tint3      #E9EDFF   hover, callout fill
     line       #D8E2FF   hairline borders

   ── TYPE ──────────────────────────────────────────────────────────────────
     Plus Jakarta Sans  headings (h1 is 800 on the live site)
     Nunito Sans        body copy (the site's body font)
     Montserrat         section headings, uppercase 700
     Inter              small UI, labels, tabular numbers

   The store already loads these. The pages also carry a Google Fonts <link> so
   they render correctly if the layout ever stops loading one — duplicate font
   requests are de-duplicated by the browser, so that is harmless.
   ══════════════════════════════════════════════════════════════════════════ */

.mgeq{
  --ink:#000613; --navy:#091B39; --body:#1C1B1B; --muted:#43474E;
  --acc:#FCD400; --acc-ink:#6E5C00;
  --tint:#F1F3FF; --tint2:#F9F9FF; --tint3:#E9EDFF; --line:#D8E2FF;
  --white:#FFFFFF;
  font-family:"Nunito Sans",helvetica,sans-serif;
  color:var(--body); font-size:16px; line-height:1.55;
}
.mgeq *{box-sizing:border-box}

/* ── headings and intro ─────────────────────────────────────────────────── */
.mgeq h1,.mgeq h2,.mgeq h3{margin:0; font-family:"Plus Jakarta Sans",system-ui,sans-serif}
.mgeq h1{font-size:clamp(26px,4.4vw,40px); font-weight:800; color:var(--ink);
  line-height:1.08; letter-spacing:-.01em}
.mgeq .lede{color:var(--muted); max-width:60ch; margin:10px 0 0; font-size:16.5px}
.mgeq .eyebrow{font-family:Montserrat,sans-serif; font-weight:700; text-transform:uppercase;
  font-size:11.5px; letter-spacing:.13em; color:var(--muted); margin:0 0 9px}

/* ── two-column shell: form on the left, sticky price on the right ─────── */
.mgeq .cols{display:grid; grid-template-columns:1fr; gap:20px; margin-top:26px}
@media(min-width:920px){ .mgeq .cols{grid-template-columns:1fr 350px; align-items:start} }

.mgeq .card{background:var(--white); border:1px solid var(--line); border-radius:10px;
  padding:20px}
.mgeq .card + .card{margin-top:16px}
.mgeq .step{display:flex; gap:10px; align-items:center; margin:0 0 14px}
.mgeq .step b{font-family:Inter,system-ui,sans-serif; font-size:11.5px; font-weight:700;
  color:var(--white); background:var(--ink); border-radius:4px; padding:3px 8px;
  letter-spacing:.04em}
.mgeq .step h2{font-family:Montserrat,sans-serif; font-weight:700; text-transform:uppercase;
  font-size:13.5px; letter-spacing:.06em; color:var(--ink)}

/* ── form controls ─────────────────────────────────────────────────────── */
.mgeq label{display:block; font-family:Inter,system-ui,sans-serif; font-size:12.5px;
  font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
  margin:0 0 7px}
.mgeq select,
.mgeq input[type=number],
.mgeq input[type=text]{width:100%; padding:11px 12px;
  font-family:"Nunito Sans",helvetica,sans-serif; font-size:15px; color:var(--body);
  background:var(--white); border:1px solid var(--line); border-radius:6px}
.mgeq select:focus-visible,
.mgeq input:focus-visible,
.mgeq button:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.mgeq .row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:560px){ .mgeq .row{grid-template-columns:1fr} }
.mgeq .inline{display:flex; gap:9px; align-items:flex-start; margin-top:13px;
  font-family:"Nunito Sans",helvetica,sans-serif; font-size:14.5px; font-weight:400;
  text-transform:none; letter-spacing:0; color:var(--body); cursor:pointer}
.mgeq .inline input[type=checkbox]{width:auto; margin:3px 0 0; accent-color:var(--ink); flex:none}
.mgeq .inline span small{display:block; font-size:12.5px; color:var(--muted); margin-top:3px}

/* ── the colour-count answer chips (print page) ─────────────────────────── */
.mgeq .declare{display:flex; flex-wrap:wrap; gap:8px}
.mgeq .declare button{font-family:"Plus Jakarta Sans",system-ui,sans-serif; font-size:16px;
  font-weight:700; cursor:pointer; min-width:56px; padding:13px 16px; border-radius:6px;
  background:var(--tint2); border:1.5px solid var(--line); color:var(--ink);
  transition:background .12s, border-color .12s}
.mgeq .declare button.wide{font-size:14px}
.mgeq .declare button:hover{background:var(--tint3)}
.mgeq .declare button[aria-pressed=true]{background:var(--acc); border-color:var(--acc);
  color:var(--acc-ink)}

/* ── artwork uploader (embroidery page only) ────────────────────────────── */
.mgeq .modes{display:inline-flex; gap:3px; padding:3px; margin-bottom:14px;
  background:var(--tint2); border:1px solid var(--line); border-radius:7px}
.mgeq .modes button{font-family:Inter,system-ui,sans-serif; font-size:12.5px; font-weight:700;
  cursor:pointer; padding:8px 14px; border:0; border-radius:5px; background:transparent;
  color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.mgeq .modes button[aria-pressed=true]{background:var(--white); color:var(--ink);
  box-shadow:0 1px 2px rgba(0,6,19,.12)}
.mgeq .drop{border:1.5px dashed var(--line); border-radius:8px; padding:24px 16px;
  text-align:center; cursor:pointer; background:var(--tint2); transition:border-color .12s}
.mgeq .drop:hover,.mgeq .drop.over{border-color:var(--ink); background:var(--tint3)}
.mgeq .drop p{margin:0; font-size:14px; color:var(--muted)}
.mgeq .drop b{display:block; color:var(--ink); font-size:15px; margin-bottom:3px}
.mgeq .preview{display:flex; gap:14px; align-items:flex-start; margin-top:14px}
.mgeq .preview canvas{width:88px; height:88px; border-radius:8px; border:1px solid var(--line);
  background:var(--white); flex:none}
.mgeq .readout{font-size:13.5px; line-height:1.55; flex:1}
.mgeq .readout .n{font-family:Inter,system-ui,sans-serif; font-size:18px; font-weight:700;
  color:var(--ink)}

/* size presets (embroidery page) */
.mgeq .choices{display:grid; grid-template-columns:1fr; gap:9px}
@media(min-width:560px){ .mgeq .choices{grid-template-columns:repeat(3,1fr)} }
.mgeq .choice{text-align:left; cursor:pointer; padding:12px; border-radius:8px;
  background:var(--tint2); border:1.5px solid var(--line); color:var(--body);
  font-family:"Nunito Sans",helvetica,sans-serif; transition:background .12s, border-color .12s}
.mgeq .choice:hover{background:var(--tint3)}
.mgeq .choice[aria-pressed=true]{background:var(--acc); border-color:var(--acc); color:var(--acc-ink)}
.mgeq .choice .t{display:block; font-weight:700; font-size:14px; line-height:1.25}
.mgeq .choice .s{display:block; font-family:Inter,system-ui,sans-serif; font-size:11px;
  color:var(--muted); margin-top:5px}
.mgeq .choice[aria-pressed=true] .s{color:var(--acc-ink)}

/* ── price panel ───────────────────────────────────────────────────────── */
.mgeq .pricebox{background:var(--tint); border:1px solid var(--line); border-radius:10px;
  padding:20px; position:sticky; top:18px}
.mgeq .pc-head{font-family:Inter,system-ui,sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin:0 0 5px}
.mgeq .chip{display:inline-block; font-family:Inter,system-ui,sans-serif; font-size:10.5px;
  font-weight:700; letter-spacing:.07em; text-transform:uppercase; padding:3px 8px;
  border-radius:4px; background:var(--ink); color:var(--white); margin-bottom:8px}
.mgeq .total{font-family:"Plus Jakarta Sans",system-ui,sans-serif; font-weight:800;
  font-size:clamp(38px,7vw,52px); line-height:1; color:var(--ink);
  font-variant-numeric:tabular-nums; margin:2px 0}
.mgeq .per{font-family:Inter,system-ui,sans-serif; font-size:13.5px; color:var(--muted)}
.mgeq .per b{color:var(--ink); font-weight:700}
.mgeq .brk{margin:15px 0 0; border-top:1px solid var(--line); padding-top:13px}
.mgeq .brk dl{display:grid; grid-template-columns:1fr auto; gap:7px 12px; margin:0;
  font-size:13.5px}
.mgeq .brk dt{color:var(--muted)}
.mgeq .brk dd{margin:0; font-family:Inter,system-ui,sans-serif;
  font-variant-numeric:tabular-nums; color:var(--ink)}
.mgeq .note{font-size:12.5px; color:var(--muted); margin:13px 0 0; line-height:1.5}
.mgeq .note b{color:var(--ink)}

/* explanation / warning callouts */
.mgeq .why{margin-top:14px; padding:12px 14px; border-radius:8px; font-size:13.5px;
  background:var(--tint3); border:1px solid var(--line); color:var(--body)}
.mgeq .why b{display:block; font-family:Montserrat,sans-serif; text-transform:uppercase;
  font-size:12px; letter-spacing:.05em; color:var(--ink); margin-bottom:4px}
.mgeq .why.warn{background:#FFF8DB; border-color:var(--acc)}
.mgeq .why a{color:var(--ink); font-weight:700}

/* ── quantity ladder ───────────────────────────────────────────────────── */
.mgeq .ladder{overflow-x:auto; margin-top:4px}
.mgeq .ladder table{border-collapse:collapse; width:100%; font-size:13px; min-width:330px}
.mgeq .ladder th,.mgeq .ladder td{padding:7px 6px; text-align:right;
  border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums}
.mgeq .ladder th{font-family:Inter,system-ui,sans-serif; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.mgeq .ladder td:first-child,.mgeq .ladder th:first-child{text-align:left}
.mgeq .ladder tr.here td{background:var(--acc); color:var(--acc-ink); font-weight:700}

/* ── buttons ───────────────────────────────────────────────────────────── */
.mgeq .cta{display:block; width:100%; margin-top:14px; padding:14px; text-align:center;
  font-family:Montserrat,sans-serif; font-weight:700; font-size:14px; text-transform:uppercase;
  letter-spacing:.05em; cursor:pointer; border:0; border-radius:4px; background:var(--ink);
  color:var(--white); text-decoration:none}
.mgeq .cta:hover{background:var(--navy); color:var(--white)}
.mgeq .cta.ghost{background:var(--acc); color:var(--acc-ink); margin-top:9px}
.mgeq .cta.ghost:hover{background:#E9C400; color:var(--acc-ink)}

.mgeq .foot{margin-top:26px; padding-top:16px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--muted); line-height:1.6}
.mgeq .foot a{color:var(--ink); font-weight:700}
.mgeq .hidden{display:none}

/* ══════════════════════════════════════════════════════════════════════════════
   LEARN SECTIONS — the article content that sits UNDER the calculator on both
   quote pages. Added 5 Sep 2026.

   Same rule as everything above: every selector is scoped under .mgeq. These
   pages are injected into the store's ONE shared Advanced Custom Layout, so an
   unscoped rule here would restyle the whole store including checkout.

   Uses only the tokens already declared on .mgeq — no new colours.
   ══════════════════════════════════════════════════════════════════════════ */

.mgeq .learn{margin-top:44px; padding-top:36px; border-top:2px solid var(--line)}
.mgeq .learn > .eyebrow{margin-bottom:6px}
.mgeq .learn > h2{font-size:clamp(21px,3vw,28px); font-weight:800; color:var(--ink);
  line-height:1.15; letter-spacing:-.01em; margin-bottom:8px}
.mgeq .learn > .lede{margin-bottom:22px}

/* jump links */
.mgeq .jump{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 34px}
.mgeq .jump a{display:inline-block; padding:8px 13px; border:1px solid var(--line);
  border-radius:999px; background:var(--tint2); color:var(--ink);
  font-family:Inter,system-ui,sans-serif; font-size:13px; font-weight:600;
  text-decoration:none; transition:background .15s,border-color .15s}
.mgeq .jump a:hover{background:var(--tint3); border-color:var(--ink)}

/* a section */
.mgeq .sec{padding:26px 0 4px; border-top:1px solid var(--line); scroll-margin-top:20px}
.mgeq .sec:first-of-type{border-top:0; padding-top:0}
.mgeq .sec h2{font-size:clamp(19px,2.5vw,24px); font-weight:800; color:var(--ink);
  line-height:1.2; margin-bottom:12px}
.mgeq .sec h3{font-size:16px; font-weight:700; color:var(--ink);
  font-family:Montserrat,system-ui,sans-serif; text-transform:uppercase;
  letter-spacing:.06em; margin:24px 0 8px}
.mgeq .sec p{margin:0 0 13px; max-width:66ch}
.mgeq .sec p:last-child{margin-bottom:0}
.mgeq .sec ul{margin:0 0 14px; padding-left:20px; max-width:66ch}
.mgeq .sec li{margin-bottom:7px}
.mgeq .sec li b{color:var(--ink)}
.mgeq .sec strong{color:var(--ink); font-weight:700}

/* comparison table */
.mgeq .cmp{overflow-x:auto; margin:6px 0 14px; border:1px solid var(--line); border-radius:10px}
.mgeq .cmp table{border-collapse:collapse; width:100%; min-width:430px;
  font-family:Inter,system-ui,sans-serif; font-size:14px; font-variant-numeric:tabular-nums}
.mgeq .cmp th,.mgeq .cmp td{padding:9px 13px; text-align:right;
  border-bottom:1px solid var(--line); white-space:nowrap}
.mgeq .cmp th{background:var(--tint); color:var(--ink); font-weight:700; font-size:12px;
  text-transform:uppercase; letter-spacing:.05em}
.mgeq .cmp td:first-child,.mgeq .cmp th:first-child{text-align:left}
.mgeq .cmp tr:last-child td{border-bottom:0}
.mgeq .cmp td.win{color:var(--ink); font-weight:700; background:var(--tint3)}

/* do / don't pair */
.mgeq .gb{display:grid; gap:12px; margin:6px 0 16px}
@media(min-width:640px){.mgeq .gb{grid-template-columns:1fr 1fr}}
.mgeq .gb div{padding:15px 17px; border:1px solid var(--line); border-radius:10px;
  background:var(--tint2)}
.mgeq .gb > div > b{display:block; font-family:Montserrat,system-ui,sans-serif; font-size:12px;
  text-transform:uppercase; letter-spacing:.07em; color:var(--ink); margin-bottom:8px}
.mgeq .gb li b{display:inline; font-family:inherit; font-size:inherit; font-weight:700;
  text-transform:none; letter-spacing:0; color:var(--ink); margin:0}
.mgeq .gb ul{margin:0; padding-left:18px}
.mgeq .gb li{margin-bottom:5px; font-size:15px}
.mgeq .gb .no{background:var(--white)}

/* callout */
.mgeq .callout{margin:14px 0; padding:15px 18px; border-left:4px solid var(--acc);
  background:var(--tint); border-radius:0 10px 10px 0; max-width:66ch}
.mgeq .callout b{color:var(--ink)}
.mgeq .callout p{margin:0}

/* turnaround rows */
.mgeq .tat{display:grid; gap:10px; margin:6px 0 14px}
@media(min-width:720px){.mgeq .tat{grid-template-columns:repeat(3,1fr)}}
.mgeq .tat div{padding:16px 18px; border:1px solid var(--line); border-radius:10px;
  background:var(--tint2)}
.mgeq .tat .k{display:block; font-family:Montserrat,system-ui,sans-serif; font-size:11px;
  text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:6px}
.mgeq .tat .v{display:block; font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  font-size:22px; font-weight:800; color:var(--ink); line-height:1.1; margin-bottom:6px}
.mgeq .tat p{margin:0; font-size:14px; color:var(--muted)}

/* back to the calculator */
.mgeq .backtop{display:inline-block; margin-top:6px;
  font-family:Inter,system-ui,sans-serif; font-size:14px; font-weight:600;
  color:var(--ink); text-decoration:none; border-bottom:2px solid var(--acc);
  padding-bottom:1px}
.mgeq .backtop:hover{border-bottom-color:var(--ink)}