/* ==========================================================================
   MangoStudy Design System — mango.css
   Stripe-craft, Mango-soul. The single source of truth for tokens + components.
   Consumed by styleguide.html (the handbook) and, over time, every page.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

/* ---------- Tokens ---------- */
:root{
  /* ink / surface */
  --ink:#0A2540;
  --ink-2:#425466;
  --ink-3:#697386;
  --paper:#FFFFFF;
  --paper-2:#FBFAF8;   /* warm off-white surface */
  --line:#E3E8EE;      /* hairline */
  --line-2:#EEF1F5;

  /* brand */
  --mango:#EA580C;
  --mango-bright:#F97316;
  --mango-tint:#FFF4E8;
  --mint:#0E9F6E;
  --mint-tint:#E7F7F0;
  --violet:#7C3AED;

  /* signature */
  --sunrise:linear-gradient(110deg,#FFC36B 0%,#F97316 38%,#FB6F92 70%,#7C3AED 100%);

  /* type */
  --font-display:'Bricolage Grotesque',Georgia,serif;
  --font-body:'Hanken Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* scale (1.25 minor third, fluid) */
  --step--1:clamp(.83rem,.8rem + .15vw,.9rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.06rem);
  --step-1:clamp(1.2rem,1.1rem + .4vw,1.35rem);
  --step-2:clamp(1.5rem,1.3rem + .8vw,1.85rem);
  --step-3:clamp(1.95rem,1.6rem + 1.6vw,2.6rem);
  --step-4:clamp(2.5rem,1.9rem + 2.8vw,3.8rem);

  /* radius / shadow */
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(10,37,64,.05),0 1px 3px rgba(10,37,64,.06);
  --sh-2:0 4px 12px rgba(10,37,64,.06),0 12px 28px rgba(10,37,64,.07);
  --sh-3:0 18px 50px rgba(10,37,64,.12);
  --sh-mango:0 10px 28px rgba(234,88,12,.28);

  /* spacing rhythm */
  --gap:clamp(20px,2vw,28px);
}

/* ---------- Reset / base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font-body);font-size:var(--step-0);
  line-height:1.6;color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2.5px solid var(--mango);outline-offset:2px;border-radius:4px}

/* ---------- Layout ---------- */
.mg-container{max-width:1120px;margin:0 auto;padding:0 24px}
.mg-container--narrow{max-width:760px}
.mg-stack > * + *{margin-top:var(--gap)}

/* ---------- Typography ---------- */
.mg-display,.mg-h1,.mg-h2,.mg-h3,.mg-h4{font-family:var(--font-display);font-weight:700;line-height:1.08;letter-spacing:-.02em;margin:0;color:var(--ink)}
.mg-h1{font-size:var(--step-4);font-weight:800;letter-spacing:-.03em}
.mg-h2{font-size:var(--step-3)}
.mg-h3{font-size:var(--step-2)}
.mg-h4{font-size:var(--step-1)}
.mg-lead{font-size:var(--step-1);line-height:1.5;color:var(--ink-2);font-weight:400}
.mg-body{font-size:var(--step-0);color:var(--ink-2)}
.mg-small{font-size:var(--step--1);color:var(--ink-3)}
.mg-muted{color:var(--ink-2)}

/* signature gradient text — use once per view */
.mg-gradient-text{
  background:var(--sunrise);-webkit-background-clip:text;background-clip:text;
  color:transparent;
}

/* eyebrow — small brand-color label, clean sans (Stripe-style) */
.mg-eyebrow{
  font-family:var(--font-body);font-size:.95rem;font-weight:600;
  letter-spacing:0;color:var(--mango);display:inline-block;
}

/* ---------- Data / stats (mono numerals = the signature) ---------- */
.mg-stat{display:flex;flex-direction:column;gap:4px}
.mg-stat__num{font-family:var(--font-mono);font-weight:700;font-size:var(--step-3);color:var(--ink);line-height:1;letter-spacing:-.02em}
.mg-stat__num .u{color:var(--mango)}
.mg-stat__label{font-size:var(--step--1);color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em}
.mg-statbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:32px;align-items:start}

/* ---------- Buttons ---------- */
.mg-btn{
  --pad-y:13px;--pad-x:22px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-size:var(--step-0);font-weight:600;
  padding:var(--pad-y) var(--pad-x);border-radius:var(--r-md);border:1px solid transparent;
  cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,background .2s ease;
  white-space:nowrap;line-height:1;
}
.mg-btn:active{transform:translateY(1px)}
.mg-btn--primary{background:var(--mango);color:#fff;box-shadow:var(--sh-mango)}
.mg-btn--primary:hover{background:var(--mango-bright);box-shadow:0 14px 34px rgba(234,88,12,.34);transform:translateY(-1px)}
.mg-btn--secondary{background:var(--ink);color:#fff}
.mg-btn--secondary:hover{background:#16344f;transform:translateY(-1px)}
.mg-btn--ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.mg-btn--ghost:hover{border-color:var(--ink-3);box-shadow:var(--sh-1)}
.mg-btn--link{padding:0;background:none;color:var(--mango);font-weight:600;border-radius:0}
.mg-btn--link::after{content:"→";transition:transform .15s ease;display:inline-block}
.mg-btn--link:hover::after{transform:translateX(4px)}
.mg-btn--sm{--pad-y:9px;--pad-x:16px;font-size:var(--step--1)}
.mg-btn--lg{--pad-y:16px;--pad-x:30px;font-size:var(--step-1)}
.mg-btn[disabled],.mg-btn--disabled{opacity:.45;pointer-events:none;box-shadow:none}

/* ---------- Badges / pills ---------- */
.mg-badge{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;letter-spacing:.01em;padding:5px 12px;border-radius:var(--r-pill);font-family:var(--font-body)}
.mg-badge--mango{background:var(--mango-tint);color:var(--mango)}
.mg-badge--mint{background:var(--mint-tint);color:var(--mint)}
.mg-badge--violet{background:#F2EAFE;color:var(--violet)}
.mg-badge--ink{background:#EAEFF4;color:var(--ink)}
.mg-badge--solid{background:var(--sunrise);color:#fff}

/* discount code chip */
.mg-code{font-family:var(--font-mono);font-weight:700;background:#fff;border:1px dashed var(--mint);color:var(--mint);padding:3px 9px;border-radius:6px;letter-spacing:.04em}

/* ---------- Cards ---------- */
.mg-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--sh-1);transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease}
.mg-card--hover:hover{box-shadow:var(--sh-2);transform:translateY(-3px);border-color:var(--line-2)}
.mg-card__media{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/10;margin-bottom:18px;background:var(--paper-2)}
.mg-card__media img{width:100%;height:100%;object-fit:cover}
.mg-card__icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--mango-tint);color:var(--mango);margin-bottom:16px;font-size:20px}
.mg-card h3{font-family:var(--font-display);font-size:var(--step-1);margin:0 0 6px;color:var(--ink)}
.mg-card p{margin:0;color:var(--ink-2);font-size:var(--step-0)}

/* ---------- Feature grid ---------- */
.mg-grid{display:grid;gap:var(--gap)}
.mg-grid--3{grid-template-columns:1fr}
.mg-grid--2{grid-template-columns:1fr}
@media(min-width:720px){.mg-grid--2{grid-template-columns:1fr 1fr}}
@media(min-width:880px){.mg-grid--3{grid-template-columns:repeat(3,1fr)}}

/* ---------- Pricing ---------- */
.mg-price-grid{display:grid;gap:var(--gap);grid-template-columns:1fr}
@media(min-width:880px){.mg-price-grid{grid-template-columns:repeat(3,1fr)}}
.mg-price{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column}
.mg-price--featured{border-color:var(--mango);box-shadow:var(--sh-3)}
.mg-price--featured::before{content:"";position:absolute;inset:0;border-radius:var(--r-lg);padding:1.5px;background:var(--sunrise);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.mg-price__tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%)}
.mg-price__name{font-family:var(--font-display);font-size:var(--step-1);font-weight:600;margin:6px 0 0}
.mg-price__amount{font-family:var(--font-mono);font-size:var(--step-3);font-weight:700;letter-spacing:-.02em;margin:6px 0}
.mg-price__amount .per{font-family:var(--font-body);font-size:var(--step--1);font-weight:500;color:var(--ink-3)}
.mg-price__offer{background:var(--mint-tint);border:1px solid #B8E6D2;border-radius:var(--r-sm);padding:10px 12px;margin:4px 0 14px;font-size:var(--step--1)}
.mg-price__offer strong{color:var(--mint)}
.mg-list{list-style:none;padding:0;margin:8px 0 22px;display:flex;flex-direction:column;gap:11px;flex:1}
.mg-list li{display:flex;gap:10px;align-items:flex-start;font-size:var(--step--1);color:var(--ink-2)}
.mg-check{flex-shrink:0;width:19px;height:19px;border-radius:50%;background:var(--mint-tint);color:var(--mint);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;margin-top:1px}

/* ---------- Accordion ---------- */
.mg-accordion{border-top:1px solid var(--line)}
.mg-accordion details{border-bottom:1px solid var(--line)}
.mg-accordion summary{cursor:pointer;list-style:none;padding:20px 4px;font-family:var(--font-display);font-weight:600;font-size:var(--step-1);display:flex;justify-content:space-between;gap:16px;align-items:center;color:var(--ink)}
.mg-accordion summary::-webkit-details-marker{display:none}
.mg-accordion summary::after{content:"+";font-family:var(--font-mono);font-weight:500;color:var(--mango);font-size:1.4em;transition:transform .2s ease}
.mg-accordion details[open] summary::after{transform:rotate(45deg)}
.mg-accordion p{margin:0 4px 20px;color:var(--ink-2);max-width:62ch}

/* ---------- Testimonial ---------- */
.mg-quote{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px}
.mg-quote__stars{color:var(--mango);letter-spacing:2px;font-size:14px;margin-bottom:12px}
.mg-quote p{font-family:var(--font-display);font-size:var(--step-1);line-height:1.45;color:var(--ink);margin:0 0 18px;font-weight:500}
.mg-quote__who{display:flex;align-items:center;gap:12px}
.mg-quote__avatar{width:40px;height:40px;border-radius:50%;background:var(--sunrise);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-family:var(--font-mono);font-size:14px}
.mg-quote__name{font-weight:600;font-size:var(--step--1);color:var(--ink)}
.mg-quote__role{font-size:.78rem;color:var(--ink-3)}

/* ---------- Forms ---------- */
.mg-field{display:flex;flex-direction:column;gap:7px}
.mg-label{font-size:var(--step--1);font-weight:600;color:var(--ink)}
.mg-input{font-family:var(--font-body);font-size:var(--step-0);padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;color:var(--ink);transition:border-color .15s ease,box-shadow .15s ease;width:100%}
.mg-input::placeholder{color:var(--ink-3)}
.mg-input:focus{outline:none;border-color:var(--mango);box-shadow:0 0 0 3px rgba(234,88,12,.14)}

/* quiz answer options (A/B/C/D) — used in free-quiz handoff */
.mg-quiz{display:grid;gap:12px}
.mg-quiz__opt{display:flex;align-items:center;gap:14px;text-align:left;width:100%;padding:15px 18px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;cursor:pointer;font-family:var(--font-body);font-size:var(--step-0);color:var(--ink);transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}
.mg-quiz__opt:hover{border-color:var(--mango);box-shadow:var(--sh-1)}
.mg-quiz__opt.is-selected{border-color:var(--mango);background:var(--mango-tint)}
.mg-quiz__key{flex-shrink:0;width:30px;height:30px;border-radius:8px;background:var(--paper-2);border:1px solid var(--line);font-family:var(--font-mono);font-weight:700;display:flex;align-items:center;justify-content:center;color:var(--ink-2)}
.mg-quiz__opt:hover .mg-quiz__key,.mg-quiz__opt.is-selected .mg-quiz__key{background:var(--mango);color:#fff;border-color:var(--mango)}

/* ---------- Nav / banner / footer ---------- */
.mg-promo{display:block;text-align:center;background:var(--ink);color:#fff;padding:11px 20px;font-size:var(--step--1);font-weight:500}
.mg-promo b{color:#FFD9A8}
.mg-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}
.mg-nav__inner{display:flex;align-items:center;justify-content:space-between;height:66px}
.mg-nav__brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:var(--step-1)}
.mg-nav__logo{width:46px;height:28px;border-radius:0;background:linear-gradient(90deg,#FDBA74 0%,#F97316 35%,#9333EA 100%);-webkit-mask:url(../images/logo-gradient.png) left center/contain no-repeat;mask:url(../images/logo-gradient.png) left center/contain no-repeat}
.mg-nav__name{display:flex;flex-direction:column;line-height:1.15}
.mg-nav__tagline{font-family:var(--font-body);font-weight:600;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.mg-nav__links{display:none;gap:26px;align-items:center}
@media(min-width:820px){.mg-nav__links{display:flex}}
.mg-nav__links a{font-size:var(--step--1);font-weight:500;color:var(--ink-2)}
.mg-nav__links a:hover{color:var(--ink)}

.mg-footer{background:var(--ink);color:#C5D0DC;padding:56px 0 30px}
.mg-footer a{color:#C5D0DC;font-size:var(--step--1)}
.mg-footer a:hover{color:#fff}
.mg-footer h4{font-family:var(--font-display);color:#fff;font-size:var(--step--1);text-transform:uppercase;letter-spacing:.08em;margin:0 0 14px}
.mg-footer__cols{display:grid;gap:36px;grid-template-columns:1fr 1fr}
@media(min-width:820px){.mg-footer__cols{grid-template-columns:2fr 1fr 1fr 1fr}}
.mg-footer__col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}

/* ---------- Hero pattern ---------- */
.mg-hero{position:relative;overflow:hidden;background:var(--paper)}
.mg-hero__wash{position:absolute;inset:-40% -10% auto -10%;height:120%;background:var(--sunrise);filter:blur(90px);opacity:.16;z-index:0;transform:skewY(-6deg)}
.mg-hero__inner{position:relative;z-index:1;padding:clamp(48px,8vw,96px) 0}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}