/* Margarita Email Designer landing page (EN + ES). Site tokens from DESIGN.md. */
.mg{--olive:#37402C;--olive-d:#2A3122;--ink:#1C1D18;--terra:#BF5A2E;--terra-d:#A44A23;--alab:#F4F0E6;--bone:#EBE5D6;--sand:#D8D0BD;--muted:#5b5d52}
.mg h2,.mg h3{text-wrap:balance}
.mg p{text-wrap:pretty}
.mg-wrap{max-width:1160px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.mg-section{padding:clamp(64px,9vw,120px) 0}
.mg-section--flush{padding-bottom:0}
.mg-section--top0{padding-top:0}
.mg-section--bone{background:var(--bone)}
.mg-kicker{display:inline-block;font:600 12px/1.2 "Plus Jakarta Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--terra);margin-bottom:14px}
.mg-h2{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:clamp(30px,4.4vw,52px);line-height:1.06;letter-spacing:-.01em;color:var(--ink);margin:0 0 16px;max-width:20ch}
.mg-h2--tight{margin-bottom:0}
.mg-h2--sm{font-size:clamp(26px,3vw,36px)}
.mg-lede{font-size:clamp(17px,1.6vw,19px);line-height:1.6;color:var(--muted);max-width:60ch;margin:0}
.mg-lede--gap{margin-top:14px}
.mg-muted{margin:0;color:var(--muted);line-height:1.6}
.mg-small{margin:14px 0 0;font-size:13px;color:var(--muted)}
.mg-gap{margin-top:16px}
.mg-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.mg-btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;background:var(--terra);color:#fff;font:700 15px/1 "Plus Jakarta Sans",sans-serif;text-decoration:none;transition:background .2s,transform .2s}
.mg-btn:hover{background:var(--terra-d);transform:translateY(-1px);color:#fff}
.mg-btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.mg-btn--ghost:hover{background:var(--ink);color:var(--alab)}
.mg-btn--onhero{color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.mg-btn:focus-visible,.mg-chip:focus-visible,.mg-toggle button:focus-visible,.mg-card:focus-visible{outline:3px solid var(--terra);outline-offset:3px}
.mg-stage{position:relative;padding:clamp(48px,7vw,88px) 0 24px;overflow:hidden;background:radial-gradient(60% 50% at 70% 40%,rgba(191,90,46,.13),transparent 70%),radial-gradient(50% 60% at 15% 70%,rgba(55,64,44,.12),transparent 70%)}
.mg-stage__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,64px);align-items:center}
.mg-inputs{display:flex;flex-direction:column;gap:14px}
.mg-input{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--sand);border-radius:16px;padding:14px 16px;box-shadow:0 10px 30px -18px rgba(28,29,24,.35);animation:mg-float 7s ease-in-out infinite}
.mg-input:nth-child(2){animation-delay:-2.3s;margin-left:clamp(0px,3vw,36px)}
.mg-input:nth-child(3){animation-delay:-4.6s}
.mg-input__icon{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--bone);color:var(--olive)}
.mg-input__t{font:700 14px/1.3 "Plus Jakarta Sans",sans-serif;color:var(--ink)}
.mg-input__s{font:500 13px/1.4 "Plus Jakarta Sans",sans-serif;color:var(--muted)}
.mg-swatches{display:flex;gap:6px;margin-top:6px}
.mg-swatches i{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.mg-arrow{display:flex;align-items:center;gap:10px;margin:18px 0 0 4px;font:600 13px/1.3 "Plus Jakarta Sans",sans-serif;color:var(--olive)}
.mg-arrow svg{flex:none}
.mg-arrow path:first-child{stroke-dasharray:6 6;animation:mg-dash 1.2s linear infinite}
.mg-fan{position:relative;height:clamp(440px,52vw,600px)}
.mg-phone{position:absolute;top:50%;left:50%;width:clamp(180px,20vw,250px);aspect-ratio:9/19;border-radius:34px;background:#111;padding:9px;box-shadow:0 40px 80px -30px rgba(28,29,24,.55);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.mg-phone__screen{width:100%;height:100%;border-radius:26px;overflow:hidden;background:#fff;position:relative}
.mg-phone__screen img{width:100%;display:block}
.mg-phone--a{transform:translate(-118%,-48%) rotate(-9deg)}
.mg-phone--b{transform:translate(-50%,-54%);z-index:2}
.mg-phone--c{transform:translate(18%,-48%) rotate(9deg)}
.mg-fan:hover .mg-phone--a{transform:translate(-128%,-50%) rotate(-12deg)}
.mg-fan:hover .mg-phone--c{transform:translate(28%,-50%) rotate(12deg)}
.mg-phone--b .mg-phone__screen img{animation:mg-scroll 22s ease-in-out infinite alternate}
.mg-badge{position:absolute;z-index:3;background:#fff;border-radius:999px;padding:9px 14px;font:700 12px/1 "Plus Jakarta Sans",sans-serif;color:var(--ink);box-shadow:0 12px 30px -14px rgba(28,29,24,.45);display:flex;gap:8px;align-items:center;white-space:nowrap;animation:mg-float 6s ease-in-out infinite}
.mg-badge b{color:#2f7a3a}
.mg-badge--1{top:10%;right:2%}
.mg-badge--2{bottom:10%;left:4%;animation-delay:-3s}
.mg-marquee{overflow:hidden;padding:28px 0;border-block:1px solid var(--sand);background:var(--bone);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mg-marquee__track{display:flex;gap:18px;width:max-content;animation:mg-marquee 70s linear infinite}
.mg-marquee img{width:150px;height:240px;object-fit:cover;object-position:top;border-radius:14px;box-shadow:0 10px 24px -16px rgba(28,29,24,.5)}
.mg-marquee:hover .mg-marquee__track{animation-play-state:paused}
.mg-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:40px}
.mg-stat{background:#fff;border:1px solid var(--sand);border-radius:18px;padding:22px 18px}
.mg-stat__n{font-family:Fraunces,Georgia,serif;font-size:clamp(34px,4vw,48px);line-height:1;color:var(--olive);font-variant-numeric:tabular-nums}
.mg-stat__l{margin-top:8px;font:600 13px/1.35 "Plus Jakarta Sans",sans-serif;color:var(--muted)}
.mg-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px;counter-reset:s}
.mg-step{background:#fff;border:1px solid var(--sand);border-radius:20px;padding:26px 24px 24px}
.mg-step::before{counter-increment:s;content:"0" counter(s);font-family:Fraunces,Georgia,serif;font-size:15px;color:var(--terra)}
.mg-step h3{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:23px;line-height:1.2;margin:10px 0 8px;color:var(--ink)}
.mg-step p{margin:0;color:var(--muted);font-size:16px;line-height:1.55}
.mg-switch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,5vw,64px);align-items:start}
.mg-chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}
.mg-chip{min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--sand);background:#fff;color:var(--ink);font:600 14px/1 "Plus Jakarta Sans",sans-serif;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.mg-chip:hover{border-color:var(--olive)}
.mg-chip[aria-pressed="true"]{background:var(--olive);border-color:var(--olive);color:var(--alab)}
.mg-mood{font-family:Fraunces,Georgia,serif;font-style:italic;font-size:20px;line-height:1.4;color:var(--olive);min-height:2.8em;margin:0}
.mg-browser{border-radius:18px;background:#fff;border:1px solid var(--sand);box-shadow:0 30px 70px -40px rgba(28,29,24,.55);overflow:hidden}
.mg-browser__bar{display:flex;gap:6px;padding:12px 14px;background:var(--bone);border-bottom:1px solid var(--sand)}
.mg-browser__bar i{width:10px;height:10px;border-radius:50%;background:var(--sand)}
.mg-browser__view{position:relative;height:clamp(420px,52vw,640px);overflow:hidden;background:#f6f3ec}
.mg-browser__view img{position:absolute;top:0;left:0;width:100%;height:auto;transition:opacity .45s ease}
.mg-browser__view img.is-out{opacity:0}
.mg-gal-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px}
.mg-toggle{display:inline-flex;border:1.5px solid var(--sand);border-radius:999px;padding:4px;background:#fff}
.mg-toggle button{min-height:40px;padding:0 16px;border:0;border-radius:999px;background:transparent;font:600 14px/1 "Plus Jakarta Sans",sans-serif;color:var(--muted);cursor:pointer}
.mg-toggle button[aria-pressed="true"]{background:var(--ink);color:var(--alab)}
.mg-rail{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:34px 4px 26px;margin-top:8px;scrollbar-width:thin}
.mg-card{flex:none;width:250px;scroll-snap-align:start;border-radius:34px}
.mg-card .mg-phone{position:relative;top:auto;left:auto;transform:none;width:100%}
.mg-card .mg-phone__screen img{transition:transform 6s ease-in-out}
.mg-card:hover .mg-phone__screen img,.mg-card:focus .mg-phone__screen img{transform:translateY(calc(-100% + 470px))}
.mg-card__t{margin:14px 2px 0;font:700 15px/1.3 "Plus Jakarta Sans",sans-serif;color:var(--ink)}
.mg-card__s{margin:2px 2px 0;font:500 13px/1.4 "Plus Jakarta Sans",sans-serif;color:var(--muted)}
.mg-occ{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.mg-occ__card{background:#fff;border:1px solid var(--sand);border-radius:20px;overflow:hidden;display:flex;flex-direction:column}
.mg-occ__img{height:280px;overflow:hidden;background:var(--bone)}
.mg-occ__img img{width:100%;display:block;transition:transform 5s ease-in-out}
.mg-occ__card:hover .mg-occ__img img{transform:translateY(-35%)}
.mg-occ__b{padding:18px 20px 20px}
.mg-occ__b h3{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:21px;margin:0 0 6px;color:var(--ink)}
.mg-occ__b p{margin:0;color:var(--muted);font-size:15px;line-height:1.5}
.mg-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.mg-pills span{padding:8px 14px;border-radius:999px;background:#fff;font:600 13px/1 "Plus Jakarta Sans",sans-serif;color:var(--olive);white-space:nowrap}
.mg-pop{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.mg-pop figure{margin:0;background:#fff;border:1px solid var(--sand);border-radius:20px;overflow:hidden}
.mg-pop img{width:100%;display:block;aspect-ratio:3/2;object-fit:cover;object-position:top center}
.mg-pop figcaption{padding:14px 18px 18px;font:600 14px/1.4 "Plus Jakarta Sans",sans-serif;color:var(--ink)}
.mg-pop figcaption span{display:block;font-weight:500;color:var(--muted)}
.mg-dark{background:var(--olive);color:var(--alab)}
.mg-dark .mg-h2{color:var(--alab)}
.mg-dark .mg-lede{color:#d9d5c6}
.mg-dark .mg-kicker{color:#E8A47F}
.mg-checks{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px}
.mg-check{border:1px solid rgba(244,240,230,.2);border-radius:18px;padding:20px}
.mg-check::before{content:"";display:block;width:26px;height:26px;border-radius:50%;background:#E8A47F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12 4 4 8-9' fill='none' stroke='%2337402C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.mg-check h3{font:700 15px/1.35 "Plus Jakarta Sans",sans-serif;margin:12px 0 6px;color:var(--alab)}
.mg-check p{margin:0;font-size:14px;line-height:1.5;color:#d9d5c6}
.mg-get{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:start}
.mg-getcard{background:#fff;border:1px solid var(--sand);border-radius:24px;padding:clamp(24px,4vw,40px);box-shadow:0 30px 70px -45px rgba(28,29,24,.6)}
.mg-getcard h3{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:28px;line-height:1.15;margin:0 0 8px;color:var(--ink)}
.mg-getcard .nl-form{margin-top:18px}
.mg-getcard code,.mg-install code{background:var(--bone);padding:1px 6px;border-radius:6px;font-size:.92em;overflow-wrap:anywhere}
.mg-install{margin:0;padding-left:1.25rem;display:flex;flex-direction:column;gap:12px;color:var(--ink);font-size:16px;line-height:1.55}
.mg-faq details{border-bottom:1px solid var(--sand);padding:18px 0}
.mg-faq summary{cursor:pointer;font:700 17px/1.4 "Plus Jakarta Sans",sans-serif;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:16px;min-height:44px;align-items:center}
.mg-faq summary::-webkit-details-marker{display:none}
.mg-faq summary::after{content:"+";flex:none;font-family:Fraunces,Georgia,serif;font-size:26px;color:var(--terra)}
.mg-faq details[open] summary::after{content:"\2212"}
.mg-faq p{margin:8px 0 0;color:var(--muted);line-height:1.6;max-width:70ch}
.mg-credits{font-size:13px;color:var(--muted);line-height:1.6;margin-top:36px}
@keyframes mg-float{50%{translate:0 -8px}}
@keyframes mg-dash{to{stroke-dashoffset:-24}}
@keyframes mg-scroll{0%,12%{transform:translateY(0)}88%,100%{transform:translateY(calc(-100% + 470px))}}
@keyframes mg-marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mg *{animation:none!important;transition:none!important}}
@media (max-width:980px){.mg-stage__grid,.mg-switch,.mg-get{grid-template-columns:1fr}.mg-stats{grid-template-columns:repeat(3,1fr)}.mg-checks{grid-template-columns:repeat(2,1fr)}.mg-occ,.mg-pop{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.mg-steps,.mg-occ,.mg-pop,.mg-checks{grid-template-columns:1fr}.mg-stats{grid-template-columns:repeat(2,1fr)}.mg-fan{height:430px}.mg-phone{width:160px}.mg-phone--a,.mg-fan:hover .mg-phone--a{transform:translate(-100%,-48%) rotate(-8deg)}.mg-phone--c,.mg-fan:hover .mg-phone--c{transform:translate(0%,-48%) rotate(8deg)}.mg-badge--1{right:0;top:4%}.mg-badge--2{left:0;bottom:4%}.mg-input:nth-child(2){margin-left:0}.mg-card{width:220px}}

/* Email inspector: a desktop mail app mockup with live emails */
.mg{--ease-out:cubic-bezier(.23,1,.32,1)}
.mg-insp-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,4vw,56px);align-items:end;margin-bottom:32px}
.mg-mail{border-radius:18px;background:#fbfaf6;border:1px solid var(--sand);box-shadow:0 40px 90px -50px rgba(55,64,44,.55),0 2px 0 rgba(255,255,255,.6) inset;overflow:hidden}
.mg-mail__bar{display:flex;align-items:center;gap:14px;padding:12px 16px;background:linear-gradient(#f3efe6,#ece7dc);border-bottom:1px solid var(--sand)}
.mg-mail__dots{display:flex;gap:7px;flex:none}
.mg-mail__dots i{width:11px;height:11px;border-radius:50%;background:#d9cfbf}
.mg-mail__dots i:first-child{background:#e2836b}.mg-mail__dots i:nth-child(2){background:#e8bf6a}.mg-mail__dots i:nth-child(3){background:#9cbf7d}
.mg-mail__title{font:600 13px/1 "Plus Jakarta Sans",sans-serif;color:var(--muted);margin-right:auto}
.mg-seg{display:inline-flex;padding:3px;border-radius:10px;background:rgba(55,64,44,.08)}
.mg-seg button{min-height:34px;padding:0 12px;border:0;border-radius:8px;background:transparent;font:600 13px/1 "Plus Jakarta Sans",sans-serif;color:var(--muted);cursor:pointer;transition:background-color 180ms var(--ease-out),color 180ms var(--ease-out),transform 120ms var(--ease-out)}
.mg-seg button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(55,64,44,.18)}
.mg-seg button:active,.mg-row:active,.mg-vchip:active,.mg-open:active{transform:scale(.97)}
.mg-open{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border-radius:8px;font:600 13px/1 "Plus Jakarta Sans",sans-serif;color:var(--olive);text-decoration:none;transition:background-color 180ms var(--ease-out),transform 120ms var(--ease-out)}
.mg-mail__body{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);height:min(78vh,820px);min-height:620px}
.mg-mail__list{overflow-y:auto;border-right:1px solid var(--sand);background:#f7f4ec;padding:8px}
.mg-mail__group{font:700 11px/1 "Plus Jakarta Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:16px 10px 8px}
.mg-row{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;width:100%;text-align:left;padding:12px 10px;border:0;border-radius:12px;background:transparent;cursor:pointer;position:relative;transition:background-color 180ms var(--ease-out),transform 120ms var(--ease-out)}
.mg-row[aria-selected="true"]{background:#fff;box-shadow:0 8px 24px -16px rgba(55,64,44,.45)}
.mg-row[aria-selected="true"]::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--terra)}
.mg-av{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font:700 14px/1 Fraunces,Georgia,serif;color:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.mg-row__from{display:flex;justify-content:space-between;gap:8px;font:700 13px/1.3 "Plus Jakarta Sans",sans-serif;color:var(--ink)}
.mg-row__from span{font-weight:600;color:var(--muted);font-size:11px;white-space:nowrap}
.mg-row__sub{font:600 13px/1.35 "Plus Jakarta Sans",sans-serif;color:var(--ink);margin-top:2px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.mg-row__pre{font:500 12px/1.4 "Plus Jakarta Sans",sans-serif;color:var(--muted);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mg-mail__view{display:grid;grid-template-rows:auto minmax(0,1fr);min-width:0;background:#fff}
.mg-msg{padding:20px 24px 14px;border-bottom:1px solid var(--bone)}
.mg-msg__sub{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:clamp(19px,1.8vw,24px);line-height:1.25;color:var(--ink);margin:0}
.mg-msg__meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px;font:500 13px/1.4 "Plus Jakarta Sans",sans-serif;color:var(--muted)}
.mg-msg__meta b{color:var(--ink);font-weight:700}
.mg-vchips{display:flex;gap:6px;margin-top:14px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.mg-vchip{flex:none;min-height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--sand);background:#fff;font:600 12px/1 "Plus Jakarta Sans",sans-serif;color:var(--ink);cursor:pointer;transition:background-color 180ms var(--ease-out),border-color 180ms var(--ease-out),color 180ms var(--ease-out),transform 120ms var(--ease-out)}
.mg-vchip[aria-pressed="true"]{background:var(--olive);border-color:var(--olive);color:var(--alab)}
.mg-vchip small{opacity:.7;margin-left:6px;font-weight:600}
.mg-stagebox{position:relative;overflow:auto;background:#efebe2;background-image:radial-gradient(rgba(55,64,44,.07) 1px,transparent 1px);background-size:18px 18px;padding:28px 20px 40px}
.mg-frame{position:relative;margin:0 auto;width:640px;max-width:100%;border-radius:10px;background:#fff;box-shadow:0 24px 60px -34px rgba(55,64,44,.55);overflow:hidden}
.mg-frame iframe{display:block;width:100%;height:900px;border:0;background:#fff;opacity:1;transition:opacity 200ms var(--ease-out)}
.mg-frame.is-loading iframe{opacity:0}
.mg-frame.is-phone{width:395px;padding:12px;border-radius:44px;background:#1b1c18;box-shadow:0 30px 70px -30px rgba(28,29,24,.6)}
.mg-frame.is-phone iframe{width:371px;height:740px;border-radius:32px}
.mg-skel{position:absolute;inset:0;padding:28px;display:none;flex-direction:column;gap:14px;background:#fff}
.mg-frame.is-loading .mg-skel{display:flex}
.mg-skel i{display:block;border-radius:8px;background:linear-gradient(90deg,#efebe2 25%,#f8f6f1 50%,#efebe2 75%);background-size:200% 100%;animation:mg-shimmer 1.2s linear infinite}
.mg-skel i:nth-child(1){height:22px;width:40%;margin:0 auto}.mg-skel i:nth-child(2){height:260px}.mg-skel i:nth-child(3){height:30px;width:70%;margin:0 auto}.mg-skel i:nth-child(4){height:14px;width:80%;margin:0 auto}.mg-skel i:nth-child(5){height:48px;width:40%;margin:10px auto 0;border-radius:999px}
@keyframes mg-shimmer{to{background-position:-200% 0}}
@media (hover:hover) and (pointer:fine){.mg-row:hover{background:rgba(255,255,255,.7)}.mg-vchip:hover{border-color:var(--olive)}.mg-open:hover{background:rgba(55,64,44,.08)}}
.mg-row:focus-visible,.mg-vchip:focus-visible,.mg-seg button:focus-visible,.mg-open:focus-visible{outline:3px solid var(--terra);outline-offset:2px}
@media (max-width:900px){
  .mg-insp-head{grid-template-columns:1fr}
  .mg-mail__body{grid-template-columns:1fr;height:auto;min-height:0}
  .mg-mail__list{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;border-right:0;border-bottom:1px solid var(--sand);padding:10px}
  .mg-mail__group{display:none}
  .mg-row{flex:none;width:240px;background:#fff}
  .mg-stagebox{height:78vh;padding:16px 10px 28px}
  .mg-mail__title{display:none}
}
@media (max-width:520px){.mg-mail__bar{flex-wrap:wrap;gap:8px}.mg-open{display:none}.mg-frame.is-phone{width:100%;padding:8px;border-radius:30px}.mg-frame.is-phone iframe{width:100%;border-radius:24px}}

/* QA round 1 fixes */
.mg-msg,.mg-stagebox{min-width:0}
.mg-btn--onhero{color:rgba(244,240,230,.92);background:rgba(20,22,18,.55);box-shadow:inset 0 0 0 1.5px rgba(244,240,230,.35)}
.mg-btn--onhero:hover{background:var(--alab);color:var(--olive)}
.mg-btn{transition:background-color 180ms var(--ease-out),color 180ms var(--ease-out),transform 120ms var(--ease-out)}
.mg-btn:active{transform:scale(.97)}
.mg-ctas{margin-top:32px}
.mg-kicker,.mg-gap a{color:var(--terra-d)}
.mg-dark .mg-kicker{color:#E8A47F}
.mg-getcard .nl-fields{display:flex;flex-direction:column;gap:10px}
.mg-getcard .nl-fields input[type=email]{background:var(--alab);border:1.5px solid var(--sand);color:var(--ink);flex:none;width:100%;min-height:52px;border-radius:12px;padding:0 16px;font-size:16px}
.mg-getcard .nl-fields input::placeholder{color:var(--muted)}
.mg-getcard .nl-fields input:focus{border-color:var(--terra);outline:none}
.mg-getcard .btn{width:100%;justify-content:space-between}
.mg-card{width:232px}
.mg-card .mg-phone{box-shadow:0 16px 28px -22px rgba(28,29,24,.45)}
.mg-rail{padding-bottom:40px}
.mg-toggle button{min-height:44px}
.mg-phone__screen{container-type:size}
@keyframes mg-scroll{0%,12%{transform:translateY(0)}88%,100%{transform:translateY(calc(-100% + 100cqh))}}
.mg-card:hover .mg-phone__screen img,.mg-card:focus .mg-phone__screen img{transform:translateY(calc(-100% + 100cqh))}
.mg-occ__img{position:relative}
.mg-occ__img::after{content:"";position:absolute;inset:auto 0 0;height:56px;background:linear-gradient(transparent,#fff);pointer-events:none}
.mg-badge--1{top:4%}
@media (max-width:640px){.mg-stat:last-child{grid-column:span 2}}

/* Scrolling: the email iframe never takes the wheel (Safari traps wheel events over iframes).
   The stage box scrolls on desktop; the phone screen scrolls in phone view. */
.mg-frame iframe{pointer-events:none}
.mg-screen{position:relative}
.mg-frame.is-phone .mg-screen{height:740px;overflow-y:auto;border-radius:32px;overscroll-behavior:auto;scrollbar-width:none}
.mg-frame.is-phone .mg-screen::-webkit-scrollbar{display:none}
.mg-frame.is-phone iframe{height:auto;border-radius:0}
@media (max-width:520px){.mg-frame.is-phone .mg-screen{height:640px;border-radius:24px}}
/* The window's single row must be bounded, or the message pane grows to the email's full height
   and the stage box never scrolls. Mobile stacks list and viewer in two auto rows. */
.mg-mail__body{grid-template-rows:minmax(0,1fr)}
.mg-mail__view,.mg-mail__list{min-height:0}
@media (max-width:900px){.mg-mail__body{grid-template-rows:auto auto}}

/* QA round 2 */
.mg-mail__list{position:relative}
.mg-stagebox:focus-visible,.mg-screen:focus-visible{outline:3px solid var(--terra);outline-offset:-3px}
.mg-vchips{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);padding-right:28px}
.mg-getcard .btn{background:var(--terra-d)}
.mg-stagebox{container-type:size}
.mg-frame.is-phone .mg-screen{height:min(740px,calc(100cqh - 92px))}
.mg-mail__bar{flex-wrap:wrap;row-gap:8px}
@media (max-width:900px){
  .mg-seg button,.mg-vchip,.mg-open{min-height:44px}
  .mg-mail__list{scroll-snap-type:x mandatory}
  .mg-row{scroll-snap-align:start}
  .mg-row[aria-selected="true"]{box-shadow:inset 0 0 0 1.5px var(--olive),0 8px 24px -16px rgba(55,64,44,.45)}
}
@media (max-width:520px){
  .mg-seg:has([data-device]){display:none}
  .mg-open{display:inline-flex;margin-left:auto;padding:0 10px}
}

/* QA round 3 */
@media (max-width:980px){.mg-get{grid-template-columns:minmax(0,1fr)}}
.mg-vchips{position:relative}
.mg-ctas{gap:24px}
.mg-getcard .nl-fields{gap:16px}
@media (max-width:640px){.mg-stats,.mg-steps,.mg-occ,.mg-pop,.mg-checks{gap:24px}}
.mg-frame.is-phone.is-dark{box-shadow:0 0 0 1px rgba(255,255,255,.12),0 30px 70px -30px rgba(28,29,24,.6)}
.mg-install code.mg-path{display:block;width:fit-content;max-width:100%;margin-top:8px}