/* NoodleBomb Monthly Ramen Box page (v2, 2026-10-17). Hand-drawn "ramen ritual" direction:
   warm paper, ink line art, editorial serif. Scoped to body.mbx-page / main.mbx. */
@font-face{font-family:'DM Sans';src:url('/fonts/dm/dm-sans-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('/fonts/dm/dm-sans-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('/fonts/dm/dm-sans-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('/fonts/dm/dm-sans-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'DM Serif Display';src:url('/fonts/dm/dm-serif-display-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Serif Display';src:url('/fonts/dm/dm-serif-display-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}

body.mbx-page{
  --mb-paper:#f5efdf;--mb-paper-2:#efe4cc;--mb-card:#faf5e8;--mb-ink:#30372c;--mb-red:#a83d2b;--mb-red-2:#8f3122;
  --mb-ochre:#e7bb6b;--mb-wash:#f0d9a6;--mb-olive:#6f7a4b;--mb-line:#cfc5ab;--mb-muted:#5f6150;
  --mb-serif:'DM Serif Display',Georgia,'Times New Roman',serif;--mb-sans:'DM Sans',Arial,Helvetica,sans-serif;
  margin:0;background-color:var(--mb-paper);color:var(--mb-ink);
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%237d7055' opacity='.09' filter='url(%23n)' d='M0 0H180V180H0z'/%3E%3C/svg%3E");
}
main.mbx{display:block;font:400 17px/1.6 var(--mb-sans);color:var(--mb-ink);overflow:clip}
main.mbx *,main.mbx *::before,main.mbx *::after{box-sizing:border-box}
/* Low-specificity defaults: beat page-shared.css element rules (p{color:var(--ink-60);margin:0 0 18px} is for dark pages)
   while every .mbx-* class rule below still wins. */
:where(main.mbx) p{margin:0;color:inherit;font-size:inherit;line-height:inherit;letter-spacing:normal}
:where(main.mbx) h1,:where(main.mbx) h2,:where(main.mbx) h3{margin:0}
:where(main.mbx) a{color:inherit}
main.mbx a:focus-visible,main.mbx button:focus-visible,main.mbx summary:focus-visible{outline:2px solid var(--mb-red);outline-offset:4px;border-radius:6px}
.mbx-wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.mbx-kicker{display:flex;align-items:center;gap:14px;margin:0 0 22px;font:700 11px/1 var(--mb-sans);letter-spacing:.24em;text-transform:uppercase;color:var(--mb-ink)}
.mbx-kicker::before{content:'';width:30px;height:1.5px;background:var(--mb-red)}
.mbx-h2{font:400 clamp(38px,5vw,64px)/1.02 var(--mb-serif);letter-spacing:-.025em;color:var(--mb-ink)}
.mbx-h2 em{font-style:italic;color:var(--mb-red)}
.mbx-lede{max-width:560px;margin-top:18px;font-size:clamp(16px,1.6vw,19px);line-height:1.6;color:var(--mb-muted)}
.mbx-sec{padding:clamp(72px,9vw,128px) 0}

/* Buttons */
.mbx-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 28px;border-radius:999px;border:1.5px solid var(--mb-ink);
  font:700 15px/1 var(--mb-sans);letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease}
.mbx-btn svg{width:18px;height:18px;flex:0 0 auto}
.mbx-btn-red{background:var(--mb-red);border-color:var(--mb-red);color:#fff8ec;box-shadow:4px 4px 0 var(--mb-ochre)}
.mbx-btn-red:hover{background:var(--mb-red-2);transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--mb-ochre)}
.mbx-btn-ink{background:var(--mb-ink);color:#f5efdf;box-shadow:4px 4px 0 var(--mb-ochre)}
.mbx-btn-ink:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--mb-ochre)}
.mbx-btn-line{background:transparent;color:var(--mb-ink)}
.mbx-btn-line:hover{background:var(--mb-ink);color:#f5efdf}
.mbx-btn-red,.mbx-btn-ink{color:#fff8ec}

/* Hero */
.mbx-hero{position:relative;padding:clamp(40px,6vw,88px) 0 clamp(40px,5vw,72px)}
.mbx-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:clamp(24px,4vw,64px)}
.mbx-hero h1{font:400 clamp(48px,6.4vw,100px)/.98 var(--mb-serif);letter-spacing:-.035em;color:var(--mb-ink)}
.mbx-hero h1 span{display:block}
.mbx-hero h1 em{font-style:italic;color:var(--mb-red)}
.mbx-underline{display:block;width:250px;max-width:70%;height:22px;margin:14px 0 6px}
.mbx-underline path{fill:none;stroke:var(--mb-red);stroke-width:1.6;stroke-linecap:round}
.mbx-hero .mbx-lede{margin-top:14px}
.mbx-price-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px 28px;margin-top:34px}
.mbx-price small{display:block;margin-bottom:6px;font:700 11px/1 var(--mb-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--mb-muted)}
.mbx-price strong{font:400 clamp(40px,4.4vw,56px)/1 var(--mb-serif);letter-spacing:-.02em}
.mbx-price span{font-size:15px;color:var(--mb-muted)}
.mbx-hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.mbx-hero-meta{margin-top:18px;font-size:14px;color:var(--mb-muted)}
.mbx-art{position:relative;margin:0}
.mbx-art svg{display:block;width:100%;height:auto;max-height:640px}
.mbx-art-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:6px}
.mbx-art-note{font-size:12px;color:var(--mb-muted)}
.mbx-art-ctrl{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--mb-line);border-radius:999px;background:var(--mb-card);
  font:600 13px/1 var(--mb-sans);color:var(--mb-ink);cursor:pointer}
.mbx-art-ctrl svg{width:14px;height:14px}
.mbx-art-ctrl[hidden]{display:none}
.mbx-script{position:absolute;right:4%;bottom:56px;font:italic 400 clamp(20px,2vw,28px)/1 var(--mb-serif);color:var(--mb-olive);transform:rotate(-4deg);pointer-events:none}

/* Trust strip */
.mbx-strip{border-top:1.5px solid var(--mb-ink);border-bottom:1.5px solid var(--mb-ink);background:var(--mb-wash)}
.mbx-strip ul{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 40px;margin:0;padding:18px clamp(20px,4vw,48px);list-style:none;
  font:700 12px/1.3 var(--mb-sans);letter-spacing:.18em;text-transform:uppercase;text-align:center}
.mbx-strip li{display:flex;align-items:center;gap:12px}
.mbx-strip svg{width:20px;height:20px;flex:0 0 auto}

/* What's inside */
.mbx-inside-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);align-items:end;gap:24px 48px;margin-bottom:clamp(36px,5vw,56px)}
.mbx-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.mbx-card{position:relative;display:flex;flex-direction:column;padding:16px 16px 24px;border:1.5px solid var(--mb-ink);border-radius:20px;background:var(--mb-card);box-shadow:6px 6px 0 var(--mb-paper-2)}
.mbx-card-art{position:relative;display:grid;place-items:center;aspect-ratio:13/10;margin-bottom:18px;border-radius:14px;background:var(--mb-paper-2);overflow:hidden}
.mbx-card-art svg{width:100%;height:100%}
.mbx-card-art img{position:absolute;left:0;top:6%;width:100%;height:88%;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(48,55,44,.18))}
.mbx-card h3{font:400 26px/1.1 var(--mb-serif);letter-spacing:-.01em;padding:0 6px}
.mbx-card p{margin-top:10px;padding:0 6px;font-size:15px;line-height:1.55;color:var(--mb-muted)}
.mbx-chip{position:absolute;top:28px;right:28px;padding:6px 10px;border:1.5px solid var(--mb-ink);border-radius:999px;background:var(--mb-ochre);font:700 10px/1 var(--mb-sans);letter-spacing:.18em;text-transform:uppercase}
.mbx-fineprint{margin-top:22px;font-size:13px;color:var(--mb-muted)}

/* How it works */
.mbx-how{background:var(--mb-paper-2);border-top:1.5px solid var(--mb-line);border-bottom:1.5px solid var(--mb-line)}
.mbx-steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:clamp(40px,5vw,60px) 0 0;padding:0;list-style:none;counter-reset:mbx}
.mbx-steps::before{content:'';position:absolute;top:44px;left:8%;right:8%;border-top:2px dashed var(--mb-line)}
.mbx-step{position:relative;text-align:center}
.mbx-step-icon{position:relative;display:grid;place-items:center;width:88px;height:88px;margin:0 auto 20px;border:1.5px solid var(--mb-ink);border-radius:50%;background:var(--mb-card)}
.mbx-step-icon svg{width:52px;height:52px}
.mbx-step-num{display:block;margin-bottom:8px;font:700 11px/1 var(--mb-sans);letter-spacing:.22em;color:var(--mb-red)}
.mbx-step h3{font:400 24px/1.15 var(--mb-serif)}
.mbx-step p{max-width:240px;margin:8px auto 0;font-size:15px;line-height:1.55;color:var(--mb-muted)}

/* Plans */
.mbx-plans-head{text-align:center}
.mbx-plans-head .mbx-kicker{justify-content:center}
.mbx-plans-head .mbx-lede{margin-left:auto;margin-right:auto}
.mbx-plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:980px;margin:clamp(40px,5vw,56px) auto 0}
.mbx-plan{position:relative;display:flex;flex-direction:column;padding:clamp(28px,3vw,40px);border:1.5px solid var(--mb-ink);border-radius:24px;background:var(--mb-card);box-shadow:8px 8px 0 var(--mb-paper-2)}
.mbx-plan-premium{background:var(--mb-ink);color:#f5efdf;box-shadow:8px 8px 0 var(--mb-ochre)}
.mbx-plan-tag{position:absolute;top:-14px;left:clamp(28px,3vw,40px);padding:7px 12px;border:1.5px solid var(--mb-ink);border-radius:999px;background:var(--mb-ochre);color:var(--mb-ink);font:700 10px/1 var(--mb-sans);letter-spacing:.2em;text-transform:uppercase}
.mbx-plan h3{font:700 12px/1 var(--mb-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--mb-red)}
.mbx-plan-premium h3{color:var(--mb-ochre)}
.mbx-plan-price{display:flex;align-items:baseline;gap:8px;margin-top:16px}
.mbx-plan-price strong{font:400 clamp(52px,5.4vw,72px)/1 var(--mb-serif);letter-spacing:-.03em}
.mbx-plan-price span{font-size:16px;opacity:.75}
.mbx-plan-desc{margin-top:14px;font-size:16px;line-height:1.55;opacity:.85}
.mbx-plan ul{display:grid;gap:12px;margin:24px 0 30px;padding:0;list-style:none}
.mbx-plan li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.4}
.mbx-plan li svg{width:20px;height:20px;flex:0 0 auto;margin-top:1px}
.mbx-plan .mbx-btn{margin-top:auto;width:100%}
.mbx-plan-premium .mbx-btn-red{box-shadow:4px 4px 0 var(--mb-ochre)}
.mbx-plan-meta{margin-top:26px;text-align:center;font-size:14px;color:var(--mb-muted)}
.mbx-plan-meta svg{width:14px;height:14px;vertical-align:-2px;margin-right:6px}
.mbx-ship-note{margin-top:8px;text-align:center;font-size:13px;color:var(--mb-muted)}
.mbx-ship-note[hidden]{display:none}

/* Bottle */
.mbx-bottle-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(32px,6vw,88px)}
.mbx-bottle-art{position:relative;display:grid;place-items:center;aspect-ratio:1/1;max-width:560px;width:100%;margin:0 auto}
.mbx-bottle-art::before{content:'';position:absolute;inset:6% 4% 8%;border-radius:47% 53% 44% 56%/52% 44% 56% 48%;background:var(--mb-wash);border:1.5px solid var(--mb-ink);transform:rotate(-6deg)}
.mbx-bottle-art img{position:relative;width:92%;height:auto;filter:drop-shadow(0 18px 18px rgba(48,55,44,.22))}
.mbx-bottle-copy .mbx-btn{margin-top:30px}
.mbx-bottle-list{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0;padding:0;list-style:none}
.mbx-bottle-list li{padding:9px 14px;border:1.5px solid var(--mb-ink);border-radius:999px;background:var(--mb-card);font:600 14px/1 var(--mb-sans)}

/* Gift */
.mbx-gift{padding:0 0 clamp(72px,9vw,128px)}
.mbx-gift-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(20px,4vw,48px);padding:clamp(28px,4vw,48px);border:1.5px solid var(--mb-ink);border-radius:28px;background:var(--mb-card);box-shadow:8px 8px 0 var(--mb-paper-2)}
.mbx-gift-card svg{width:clamp(96px,10vw,140px);height:auto}
.mbx-gift-card .mbx-h2{font-size:clamp(32px,3.6vw,46px)}
.mbx-gift-card p{margin-top:10px;color:var(--mb-muted)}

/* FAQ */
.mbx-faq{border-top:1.5px solid var(--mb-line)}
.mbx-faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,88px)}
.mbx-faq details{border-bottom:1.5px solid var(--mb-line)}
.mbx-faq details:first-child{border-top:1.5px solid var(--mb-line)}
.mbx-faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 2px;cursor:pointer;list-style:none;font:400 22px/1.25 var(--mb-serif)}
.mbx-faq summary::-webkit-details-marker{display:none}
.mbx-faq summary::after{content:'+';flex:0 0 auto;width:32px;height:32px;border:1.5px solid var(--mb-ink);border-radius:50%;display:grid;place-items:center;font:500 18px/1 var(--mb-sans);transition:transform .2s ease}
.mbx-faq details[open] summary::after{transform:rotate(45deg)}
.mbx-faq details p{padding:0 2px 24px;max-width:640px;color:var(--mb-muted)}
.mbx-faq details a{color:var(--mb-red)}

/* Final CTA */
.mbx-final{padding:clamp(72px,9vw,120px) 0;background:var(--mb-red);color:#fff8ec;text-align:center;border-top:1.5px solid var(--mb-ink)}
.mbx-final .mbx-h2{color:#fff8ec}
.mbx-final .mbx-h2 em{color:var(--mb-ochre)}
.mbx-final p{margin:16px auto 0;max-width:520px;opacity:.9}
.mbx-final-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:34px}
.mbx-final .mbx-btn-cream{background:#fff8ec;border-color:#fff8ec;color:var(--mb-ink);box-shadow:4px 4px 0 var(--mb-ink)}
.mbx-final .mbx-btn-cream:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--mb-ink)}
.mbx-final .mbx-btn-outline{background:transparent;border-color:#fff8ec;color:#fff8ec}
.mbx-final .mbx-btn-outline:hover{background:#fff8ec;color:var(--mb-red)}

/* Reveal on scroll (only when JS is running) */
.mbx-js .mbx-reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.mbx-js .mbx-reveal.is-in{opacity:1;transform:none}

@media (max-width:1100px){
  .mbx-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mbx-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px}
  .mbx-steps::before{display:none}
}
@media (max-width:860px){
  .mbx-hero-grid,.mbx-inside-head,.mbx-bottle-grid,.mbx-faq-grid{grid-template-columns:1fr}
  .mbx-art{max-width:560px;margin:0 auto;width:100%}
  .mbx-script{display:none}
  .mbx-plan-grid{grid-template-columns:1fr;gap:36px}
  .mbx-gift-card{grid-template-columns:1fr;text-align:center;justify-items:center}
}
@media (max-width:560px){
  main.mbx{font-size:16px}
  .mbx-hero h1{font-size:clamp(42px,12vw,56px);letter-spacing:-.03em}
  .mbx-hero-actions .mbx-btn{flex:1 1 100%}
  .mbx-price-row{gap:18px}
  .mbx-cards{grid-template-columns:1fr}
  .mbx-steps{grid-template-columns:1fr}
  .mbx-strip ul{flex-direction:column;align-items:center;gap:12px}
  .mbx-faq summary{font-size:20px}
  .mbx-final-actions .mbx-btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .mbx-js .mbx-reveal{opacity:1;transform:none;transition:none}
  .mbx-btn,.mbx-faq summary::after{transition:none}
}
@media print{.mbx-art-ctrl,.mbx-final{display:none}}