/* ==========================================================================
   SOAR OS — Site Framework v1.0
   Mattress Mart 2.0 · Butte, MT
   --------------------------------------------------------------------------
   PORTING TO A NEW CLIENT: change only the :root / [data-mode] blocks below.
   Everything after "SECTION 3" is structural and brand-agnostic.
   ========================================================================== */

/* ---------- SECTION 1 · Design tokens ---------------------------------- */
:root{
  --mm-copper:#B87333;      /* Butte copper — primary action */
  --mm-copper-lt:#D4954E;
  --mm-patina:#4A7C6F;      /* oxidised copper — savings, positive */
  --mm-patina-d:#2E5249;

  --mm-disp:'Bricolage Grotesque',system-ui,sans-serif;
  --mm-sans:'Inter',system-ui,-apple-system,sans-serif;
  --mm-mono:'IBM Plex Mono',ui-monospace,monospace;

  /* fluid type — mirrors Divi 5 Number Variables, kept here for custom blocks */
  --mm-h1:clamp(3.4rem,9vw,8rem);
  --mm-h2:clamp(2.4rem,5.5vw,4.4rem);
  --mm-h3:clamp(1.3rem,2.2vw,1.75rem);
  --mm-sec:clamp(5rem,10vw,9rem);
  --mm-gut:28px;
  --mm-wrap:1240px;
}

/* ---------- SECTION 2 · Comfort Mode (Sit / Sleep) --------------------- */
html[data-mode="day"]{
  --mm-bg:#F1EBE1; --mm-bg2:#E6DED0; --mm-fg:#14120E;
  --mm-fg2:#4A4438; --mm-line:#D6CBB8; --mm-card:#FBF8F2;
}
html[data-mode="night"]{
  --mm-bg:#0F1216; --mm-bg2:#161B21; --mm-fg:#EFE9DE;
  --mm-fg2:#A8A093; --mm-line:#262E37; --mm-card:#151A20;
}
html{transition:none}
body{
  background:var(--mm-bg); color:var(--mm-fg);
  transition:background .55s ease,color .55s ease;
}
/* Divi surfaces that must follow the mode */
.et_pb_section, .et_pb_row, .et_pb_module,
.et_pb_text, .et_pb_blurb, .et_pb_toggle{
  transition:background-color .55s ease,color .55s ease,border-color .55s ease;
}
.mm-surface{background:var(--mm-bg)!important;color:var(--mm-fg)!important}
.mm-surface-2{background:var(--mm-bg2)!important;color:var(--mm-fg)!important}
.mm-invert{background:var(--mm-fg)!important;color:var(--mm-bg)!important}
.mm-invert h1,.mm-invert h2,.mm-invert h3{color:var(--mm-bg)!important}
.mm-bordered{border:1px solid var(--mm-line)}

@media (prefers-reduced-motion:reduce){
  body,.et_pb_section,.et_pb_row,.et_pb_module{transition:none!important}
  .mm-marquee__track{animation:none!important}
  .mm-reveal{opacity:1!important;transform:none!important}
}

/* ---------- SECTION 3 · Typography ------------------------------------- */
body{font-family:var(--mm-sans);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,.mm-disp{font-family:var(--mm-disp);font-weight:800;line-height:.94;letter-spacing:-.035em}
h1{font-size:var(--mm-h1)} h2{font-size:var(--mm-h2)} h3{font-size:var(--mm-h3);font-weight:600;letter-spacing:-.02em}
.mm-mono{font-family:var(--mm-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.mm-eyebrow{font-family:var(--mm-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mm-copper);display:block;margin-bottom:.8rem}
.mm-copper{color:var(--mm-copper)}
p{max-width:64ch}

/* ---------- SECTION 4 · Buttons ---------------------------------------- */
.mm-btn,
.et_pb_button.mm-btn{
  display:inline-flex;align-items:center;gap:.55rem;
  background:var(--mm-copper)!important;color:#fff!important;
  font-family:var(--mm-sans)!important;font-weight:600!important;font-size:.98rem!important;
  padding:1rem 1.9rem!important;border:0!important;border-radius:2px!important;
  text-decoration:none;transition:transform .2s,background .2s,box-shadow .2s;
}
.mm-btn:hover,.et_pb_button.mm-btn:hover{
  background:var(--mm-copper-lt)!important;
  transform:translate(-2px,-2px);
  box-shadow:4px 4px 0 var(--mm-fg);
}
.et_pb_button.mm-btn:after{display:none!important}   /* kill Divi's arrow */
.mm-btn--ghost,.et_pb_button.mm-btn--ghost{
  background:transparent!important;color:var(--mm-fg)!important;border:1.5px solid var(--mm-fg)!important;
}
.mm-btn--ghost:hover{background:var(--mm-fg)!important;color:var(--mm-bg)!important;box-shadow:none!important}

/* ---------- SECTION 5 · Mode switch ------------------------------------ */
.mm-switch{display:inline-flex;border:1px solid var(--mm-line);border-radius:100px;padding:3px;background:var(--mm-card);gap:2px}
.mm-switch button{
  font-family:var(--mm-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  border:0;cursor:pointer;padding:.5rem .85rem;border-radius:100px;background:transparent;color:var(--mm-fg2);transition:.25s;
}
.mm-switch button[aria-pressed="true"]{background:var(--mm-copper);color:#fff}

/* ---------- SECTION 6 · Hero ------------------------------------------- */
.mm-hero{position:relative;overflow:hidden}
.mm-hero .et_pb_background_overlay,
.mm-hero__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(8,10,13,.78) 0%,rgba(8,10,13,.52) 26%,rgba(8,10,13,.22) 50%,rgba(8,10,13,.06) 72%,rgba(8,10,13,0) 100%),
    linear-gradient(to top,rgba(8,10,13,.42) 0%,rgba(8,10,13,0) 38%);
}
.mm-hero h1{color:#fff!important;max-width:13ch;text-shadow:0 2px 28px rgba(6,8,11,.55),0 1px 3px rgba(6,8,11,.4)}
.mm-hero p{color:#E3DCD0!important;max-width:44ch;text-shadow:0 1px 16px rgba(6,8,11,.6)}
.mm-hero .mm-eyebrow{color:#CFC7B9;text-shadow:0 1px 12px rgba(6,8,11,.7)}
.mm-hero .mm-eyebrow b{color:var(--mm-copper-lt)}
@media(max-width:900px){
  .mm-hero .mm-hero__scrim,.mm-hero .et_pb_background_overlay{
    background:linear-gradient(to top,rgba(8,10,13,.9) 12%,rgba(8,10,13,.6) 48%,rgba(8,10,13,.35) 100%);
  }
}

/* ---------- SECTION 7 · Proof marquee ---------------------------------- */
.mm-marquee{border-top:1px solid var(--mm-line);border-bottom:1px solid var(--mm-line);overflow:hidden;padding:1.1rem 0}
.mm-marquee__track{display:flex;gap:3.5rem;white-space:nowrap;animation:mm-scroll 34s linear infinite;
  font-family:var(--mm-mono);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mm-fg2)}
.mm-marquee__track b{color:var(--mm-copper);font-weight:600}
.mm-marquee:hover .mm-marquee__track{animation-play-state:paused}
@keyframes mm-scroll{to{transform:translateX(-50%)}}

/* ---------- SECTION 8 · Route list ------------------------------------- */
.mm-route{list-style:none;margin:0;padding:0;border-top:1px solid var(--mm-line)}
.mm-route li a{
  display:grid;grid-template-columns:auto 1fr auto;gap:2rem;align-items:center;
  padding:2.1rem 0;border-bottom:1px solid var(--mm-line);text-decoration:none;color:inherit;transition:.25s;
}
.mm-route li a:hover{padding-left:1.4rem;background:linear-gradient(90deg,color-mix(in srgb,var(--mm-copper) 9%,transparent),transparent)}
.mm-route__n{font-family:var(--mm-mono);font-size:.72rem;color:var(--mm-copper);letter-spacing:.14em}
.mm-route__t{font-family:var(--mm-disp);font-size:clamp(1.5rem,3.4vw,2.5rem);font-weight:600;letter-spacing:-.03em;display:block}
.mm-route__s{font-family:var(--mm-sans);font-size:.98rem;color:var(--mm-fg2);font-weight:400;letter-spacing:0;display:block;margin-top:.35rem;max-width:52ch}
.mm-route__ar{font-size:1.5rem;color:var(--mm-copper);transition:transform .25s}
.mm-route li a:hover .mm-route__ar{transform:translateX(8px)}
@media(max-width:720px){.mm-route li a{grid-template-columns:1fr auto;gap:1rem}.mm-route__n{display:none}}

/* ---------- SECTION 9 · Position ladder --------------------------------- */
.mm-ladder{display:grid;grid-template-columns:1fr 380px;border:1px solid var(--mm-line);background:var(--mm-card)}
.mm-ladder__stage{position:relative;overflow:hidden;min-height:440px}
.mm-ladder__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
.mm-ladder__stage img.is-active{opacity:1}
.mm-ladder__count{position:absolute;left:1.4rem;top:1.4rem;z-index:2;background:var(--mm-copper);color:#fff;
  font-family:var(--mm-mono);font-size:.66rem;letter-spacing:.16em;padding:.45rem .8rem}
.mm-ladder__nav{display:flex;flex-direction:column;border-left:1px solid var(--mm-line)}
.mm-ladder__nav button{flex:1;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--mm-line);
  padding:1.5rem 1.6rem;cursor:pointer;font-family:var(--mm-sans);color:var(--mm-fg2);transition:.22s;position:relative}
.mm-ladder__nav button:last-child{border-bottom:0}
.mm-ladder__nav button:hover{background:color-mix(in srgb,var(--mm-copper) 7%,transparent)}
.mm-ladder__nav button[aria-selected="true"]{background:color-mix(in srgb,var(--mm-copper) 13%,transparent);color:var(--mm-fg)}
.mm-ladder__nav button[aria-selected="true"]::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--mm-copper)}
.mm-ladder__zone{font-family:var(--mm-mono);font-size:.6rem;letter-spacing:.14em;color:var(--mm-copper);display:block;margin-bottom:.5rem}
.mm-ladder__title{font-family:var(--mm-disp);font-size:1.25rem;font-weight:600;letter-spacing:-.02em;display:block;margin-bottom:.25rem}
.mm-ladder__sub{font-size:.88rem;line-height:1.5;display:block}
@media(max-width:1000px){
  .mm-ladder{grid-template-columns:1fr}
  .mm-ladder__nav{flex-direction:row;overflow-x:auto;border-left:0;border-top:1px solid var(--mm-line)}
  .mm-ladder__nav button{min-width:210px;border-bottom:0;border-right:1px solid var(--mm-line)}
}

/* ---------- SECTION 10 · Price proof ----------------------------------- */
.mm-proof{border:1px solid var(--mm-line)}
.mm-proof__row{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:1rem;padding:1.4rem 1.8rem;
  border-bottom:1px solid var(--mm-line);align-items:center}
.mm-proof__row:last-child{border-bottom:0}
.mm-proof__head{font-family:var(--mm-mono);font-size:.66rem;letter-spacing:.14em;color:var(--mm-fg2);background:var(--mm-bg2)}
.mm-proof__model{font-family:var(--mm-disp);font-size:1.2rem;font-weight:600;letter-spacing:-.02em}
.mm-proof__was{font-family:var(--mm-mono);color:var(--mm-fg2);text-decoration:line-through;font-size:.95rem}
.mm-proof__now{font-family:var(--mm-disp);font-size:1.7rem;font-weight:800;letter-spacing:-.03em}
.mm-proof__save{font-family:var(--mm-mono);font-size:.78rem;color:#fff;background:var(--mm-patina);padding:.3rem .6rem;display:inline-block}
@media(max-width:1000px){.mm-proof__row{grid-template-columns:1fr 1fr;gap:.6rem}.mm-proof__head{display:none}}

/* ---------- SECTION 11 · Spec list ------------------------------------- */
.mm-spec{list-style:none;margin:1.4rem 0;padding:0;font-family:var(--mm-mono);font-size:.72rem;letter-spacing:.1em;color:var(--mm-fg2)}
.mm-spec li{display:flex;justify-content:space-between;padding:.55rem 0;border-bottom:1px dotted var(--mm-line)}
.mm-spec b{color:var(--mm-fg);font-weight:600}

/* ---------- SECTION 12 · Divi module overrides -------------------------- */
/* Accordion / Toggle → FAQ */
.mm-faq .et_pb_toggle{background:transparent!important;border:0!important;border-bottom:1px solid var(--mm-line)!important;
  border-radius:0!important;padding:0!important;margin:0!important}
.mm-faq .et_pb_toggle_title{font-family:var(--mm-disp)!important;font-size:1.3rem!important;font-weight:600!important;
  letter-spacing:-.02em!important;color:var(--mm-fg)!important;padding:1.7rem 3rem 1.7rem 0!important}
.mm-faq .et_pb_toggle_title:before{color:var(--mm-copper)!important;font-size:1.6rem!important;right:.3rem!important;left:auto!important}
.mm-faq .et_pb_toggle_content{padding:0 0 1.6rem!important;color:var(--mm-fg2)!important}

/* Image modules — remove Divi's default inline gaps */
.mm-img img{display:block;width:100%;height:auto}
.mm-img--square img{aspect-ratio:1;object-fit:cover}
.mm-img--3x2 img{aspect-ratio:3/2;object-fit:cover}
.mm-img--16x10 img{aspect-ratio:16/10;object-fit:cover}
.mm-zoom img{transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.mm-zoom:hover img{transform:scale(1.05)}

/* Craft cards */
.mm-craft{border:1px solid var(--mm-line);background:var(--mm-card);overflow:hidden}
.mm-craft__cap{padding:1.2rem 1.3rem;border-top:1px solid var(--mm-line)}
.mm-craft__cap b{font-family:var(--mm-disp);font-size:1.1rem;font-weight:600;letter-spacing:-.02em;display:block;margin-bottom:.2rem}
.mm-craft__cap span{font-size:.9rem;color:var(--mm-fg2)}

/* ---------- SECTION 13 · Sticky mobile CTA ------------------------------ */
.mm-mbar{position:fixed;left:0;right:0;bottom:0;z-index:9000;display:none;gap:.5rem;padding:.6rem;
  background:color-mix(in srgb,var(--mm-bg) 96%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--mm-line)}
.mm-mbar .mm-btn{flex:1;justify-content:center;padding:.95rem!important}
@media(max-width:720px){.mm-mbar{display:flex}body{padding-bottom:72px}}

/* ---------- SECTION 14 · Scroll reveal ---------------------------------- */
.mm-reveal{opacity:0;transform:translateY(26px);
  transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1)}
.mm-reveal.is-in{opacity:1;transform:none}

/* ---------- SECTION 15 · Accessibility ---------------------------------- */
:where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--mm-copper);outline-offset:2px}
.mm-skip{position:absolute;left:-9999px}
.mm-skip:focus{left:1rem;top:1rem;z-index:9999;background:var(--mm-fg);color:var(--mm-bg);padding:.8rem 1.2rem}