/* MV2 WHATIS PAGE START */
/* Long form product explainer at /what-is-monavie-active/.
   Roughly 9,000 words, so this is a READING layout first and a designed page
   second. Everything here serves legibility over decoration.

   Measure is capped near 68 characters. Long lines are the single biggest
   reason people abandon long pages, and this one is asking for real attention.

   The nineteen fruits are <details> elements. That is deliberate and is the
   opposite of the call made on the HOME page fruit grid, where a carousel was
   rejected. The difference: on the home page the POINT is seeing nineteen at
   once, and there is no task. Here every name stays visible in a scannable
   list and only the history collapses, so the count still reads while 4,700
   words stay out of the way until asked for. */

body.mv2 .mv-wi{
  font-family:var(--mv-font-body,'Open Sans',-apple-system,BlinkMacSystemFont,Arial,sans-serif);
  color:var(--mv-ink,#231F20);
  line-height:1.65;}

body.mv2 .mv-wi__col{
  max-width:1440px;
  margin-inline:auto;
  padding-inline:clamp(16px,4vw,24px);}

/* ---- sections ---- */
body.mv2 .mv-wi__sec{padding:clamp(44px,6vw,84px) 0;}
body.mv2 .mv-wi__sec--tint{background:#F7F5FA;}
body.mv2 .mv-wi__sec--dark{
  background:linear-gradient(150deg,#2A0A4E,#1B0733);
  color:#fff;}
body.mv2 .mv-wi__sec--dark h2{color:#fff;}
body.mv2 .mv-wi__sec--dark p{color:rgba(255,255,255,.88);}

/* ---- hero ---- */
body.mv2 .mv-wi__hero{
  background:linear-gradient(150deg,#2A0A4E,#3D1173 55%,#1B0733);
  color:#fff;
  padding:clamp(56px,8vw,104px) 0; width:calc(100% - 48px); max-width:1392px; margin-left:auto; margin-right:auto; border-radius:0 0 18px 18px; overflow:hidden;}
body.mv2 .mv-wi__eyebrow{
  font-family:var(--mv-font-display,'Barlow Condensed',Arial,sans-serif);
  text-transform:uppercase;letter-spacing:.14em;font-size:.875rem;
  color:#7CFC00;margin:0 0 12px;}
body.mv2 .mv-wi__title{
  font-family:var(--mv-font-display,'Barlow Condensed',Arial,sans-serif);
  font-size:clamp(38px,6vw,68px);line-height:1.02;font-weight:700;
  color:#fff;margin:0 0 20px;}
body.mv2 .mv-wi__lede{font-size:clamp(18px,2.1vw,22px);color:rgba(255,255,255,.94);margin:0 0 14px;}
body.mv2 .mv-wi__sub{color:rgba(255,255,255,.72);margin:0;}

/* ---- headings ---- */
body.mv2 .mv-wi h2{
  font-family:var(--mv-font-display,'Barlow Condensed',Arial,sans-serif);
  font-size:clamp(28px,3.4vw,40px);line-height:1.12;font-weight:700;
  margin:0 0 20px;}
body.mv2 .mv-wi__h3{
  font-family:var(--mv-font-display,'Barlow Condensed',Arial,sans-serif);
  font-size:clamp(20px,2.2vw,25px);font-weight:600;
  margin:34px 0 10px;}
body.mv2 .mv-wi p{margin:0 0 16px;}
body.mv2 .mv-wi__hint{
  font-size:.9375rem;color:var(--mv-ink-2,#4A4A50);font-style:italic;margin-bottom:20px;}

/* ---- the fruits ---- */
/* Two columns on wide screens so nineteen names read as a set rather than a
   long stack. Columns collapse before the text gets narrow enough to hurt. */
body.mv2 .mv-wi__fruits{
  border-top:1px solid var(--mv-line,#E2E2E6);}
body.mv2 .mv-wi__fruit{
  border-bottom:1px solid var(--mv-line,#E2E2E6);}
body.mv2 .mv-wi__fruit>summary{
  cursor:pointer;list-style:none;
  padding:14px 30px 14px 0;position:relative;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;}
body.mv2 .mv-wi__fruit>summary::-webkit-details-marker{display:none;}
body.mv2 .mv-wi__fname{
  font-family:var(--mv-font-display,'Barlow Condensed',Arial,sans-serif);
  font-size:1.25rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:#5E0F0A;}
body.mv2 .mv-wi__latin{
  font-size:.9375rem;color:var(--mv-ink-2,#4A4A50);font-style:italic;}
/* the marker: a plus that becomes a minus, drawn rather than typed so it
   cannot inherit a font that lacks the glyph */
body.mv2 .mv-wi__fruit>summary::after{
  content:"";position:absolute;right:4px;top:50%;
  width:13px;height:13px;margin-top:-6px;
  background:
    linear-gradient(var(--mv-purple,#8300E9),var(--mv-purple,#8300E9)) center/13px 1.5px no-repeat,
    linear-gradient(var(--mv-purple,#8300E9),var(--mv-purple,#8300E9)) center/1.5px 13px no-repeat;
  transition:transform .18s ease;}
body.mv2 .mv-wi__fruit[open]>summary::after{
  background:linear-gradient(var(--mv-purple,#8300E9),var(--mv-purple,#8300E9)) center/13px 1.5px no-repeat;}
body.mv2 .mv-wi__fruit>summary:hover .mv-wi__fname{color:var(--mv-purple,#8300E9);}
body.mv2 .mv-wi__fruit>summary:focus-visible{
  outline:2px solid var(--mv-purple,#8300E9);outline-offset:2px;}
body.mv2 .mv-wi__fbody{padding:2px 0 20px;}
body.mv2 .mv-wi__fbody p{font-size:1rem;}

/* a flagged tradition, visually separated so it cannot be mistaken for fact */
body.mv2 .mv-wi__tradition{
  border-left:3px solid #C9A227;
  background:#FDFAF0;
  padding:12px 16px;margin-top:18px;
  font-size:.9375rem;color:var(--mv-ink-2,#4A4A50);}
body.mv2 .mv-wi__tradition span{
  display:block;font-weight:700;color:#8A6D0B;
  text-transform:uppercase;letter-spacing:.07em;font-size:.75rem;margin-bottom:4px;}

/* ---- facts list ---- */
body.mv2 .mv-wi__facts{margin:0 0 18px;padding:0;}
body.mv2 .mv-wi__fact{
  display:grid;grid-template-columns:minmax(150px,34%) 1fr;gap:10px 20px;
  padding:11px 0;border-bottom:1px solid var(--mv-line,#E2E2E6);}
body.mv2 .mv-wi__fact dt{
  font-weight:700;color:var(--mv-ink,#231F20);margin:0;}
body.mv2 .mv-wi__fact dd{margin:0;color:var(--mv-ink-2,#4A4A50);}
body.mv2 .mv-wi__note{
  font-size:.9375rem;color:var(--mv-ink-2,#4A4A50);}

/* ---- faq ---- */
body.mv2 .mv-wi__faq{border-top:1px solid var(--mv-line,#E2E2E6);}
body.mv2 .mv-wi__q{border-bottom:1px solid var(--mv-line,#E2E2E6);}
body.mv2 .mv-wi__q>summary{
  cursor:pointer;list-style:none;padding:16px 30px 16px 0;position:relative;
  font-weight:600;}
body.mv2 .mv-wi__q>summary::-webkit-details-marker{display:none;}
body.mv2 .mv-wi__q>summary::after{
  content:"";position:absolute;right:4px;top:50%;
  width:13px;height:13px;margin-top:-6px;
  background:
    linear-gradient(var(--mv-purple,#8300E9),var(--mv-purple,#8300E9)) center/13px 1.5px no-repeat,
    linear-gradient(var(--mv-purple,#8300E9),var(--mv-purple,#8300E9)) center/1.5px 13px no-repeat;}
body.mv2 .mv-wi__q[open]>summary::after{
  background:linear-gradient(var(--mv-purple,#8300E9),var(--mv-purple,#8300E9)) center/13px 1.5px no-repeat;}
body.mv2 .mv-wi__q>summary:focus-visible{
  outline:2px solid var(--mv-purple,#8300E9);outline-offset:2px;}
body.mv2 .mv-wi__a{padding:0 0 18px;}
body.mv2 .mv-wi__a p{margin:0;color:var(--mv-ink-2,#4A4A50);}

/* ---- disclaimer ---- */
body.mv2 .mv-wi__disclaimer{
  font-size:.875rem;color:var(--mv-ink-2,#4A4A50);
  border-top:1px solid var(--mv-line,#E2E2E6);padding-top:16px;margin-top:20px;}

/* ---- one exit ---- */
body.mv2 .mv-wi__cta{
  padding:clamp(48px,6vw,80px) 0;text-align:center;}
body.mv2 .mv-wi__cta p{
  font-family:var(--mv-font-display,'Barlow Condensed',Arial,sans-serif);
  font-size:clamp(22px,3vw,30px);margin:0 0 20px;}
body.mv2 .mv-wi__btn{
  display:inline-block;background:var(--mv-purple,#8300E9);color:#fff;
  text-decoration:none;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:15px 34px;border-radius:999px;
  transition:transform .15s ease, box-shadow .15s ease;}
body.mv2 .mv-wi__btn:hover,
body.mv2 .mv-wi__btn:focus-visible{
  transform:translateY(-1px);box-shadow:0 6px 20px rgba(131,0,233,.32);
  color:#fff;}
body.mv2 .mv-wi__btn:focus-visible{outline:2px solid #C77DFF;outline-offset:3px;}

@media (prefers-reduced-motion: reduce){
  body.mv2 .mv-wi__btn,
  body.mv2 .mv-wi__fruit>summary::after{transition:none;}
  body.mv2 .mv-wi__btn:hover,
  body.mv2 .mv-wi__btn:focus-visible{transform:none;}
}

/* Phone: the fact rows stop being two columns before the value column gets
   too narrow to read. */
@media (max-width:600px){
  body.mv2 .mv-wi__fact{grid-template-columns:1fr;gap:2px;padding:12px 0;}
  body.mv2 .mv-wi__fact dt{font-size:.875rem;text-transform:uppercase;letter-spacing:.05em;}
}
/* MV2 WHATIS PAGE END */