/* mwi.css — consumer index page. v20260827b. Tokens from site.css. */

.mwi-page { max-width: 860px; margin: 0 auto; padding: 96px 24px 64px; }

.mwi-eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.mwi-headline { display: flex; align-items: baseline; gap: 26px; flex-wrap: wrap; }
.mwi-num { font-family: 'Cormorant Garamond', serif; font-size: 5rem; font-weight: 600; line-height: 0.9; color: var(--navy); font-variant-numeric: tabular-nums lining-nums; }
.mwi-verdict h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.mwi-verdict p { font-size: 0.98rem; line-height: 1.65; color: var(--ink); max-width: 56ch; }

.mwi-strip-wrap { margin: 2.4rem 0 2.8rem; }
.mwi-strip { position: relative; display: flex; height: 14px; border-radius: 7px; overflow: visible; }
.mwi-z { height: 100%; }
.mwi-z-cold { width: 12%; background: #D9A6A0; border-radius: 7px 0 0 7px; }
.mwi-z-norm { width: 76%; background: var(--light); }
.mwi-z-hot  { width: 12%; background: #E4C08F; border-radius: 0 7px 7px 0; }
.mwi-marker { position: absolute; top: -7px; width: 3px; height: 28px; background: var(--navy); border-radius: 2px; transform: translateX(-50%); }
.mwi-marker span { position: absolute; top: 32px; left: 50%; transform: translateX(-50%); font-size: 0.74rem; font-weight: 600; color: var(--navy); white-space: nowrap; }
.mwi-strip-labels { display: flex; margin-top: 40px; font-size: 0.8rem; line-height: 1.5; color: var(--mid); }
.mwi-strip-labels strong { color: var(--ink); font-weight: 600; }
.mwi-strip-labels .l { width: 12%; min-width: 90px; }
.mwi-strip-labels .c { width: 76%; text-align: center; padding: 0 12px; }
.mwi-strip-labels .r { width: 12%; min-width: 90px; text-align: right; }

.mwi-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 0 0 2.6rem; }
.mwi-card { background: var(--paper2, #F6F8F9); border: 1px solid var(--light); border-radius: 8px; padding: 18px 18px 16px; }
.mwi-card .k { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mid); }
.mwi-card .v { font-family: 'Cormorant Garamond', serif; font-size: 1.9rem; font-weight: 600; color: var(--navy); margin: 4px 0 6px; }
.mwi-card .d { font-size: 0.84rem; line-height: 1.55; color: var(--ink); }

.mwi-chart-block { margin: 0 0 2.4rem; }
.mwi-chart-block h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 600; color: var(--navy); margin-bottom: 4px; }
.mwi-sub { font-size: 0.86rem; color: var(--mid); margin-bottom: 10px; }
.mwi-chart { width: 100%; height: auto; display: block; }
.mwi-grid { stroke: var(--light); stroke-width: 1; }
.mwi-grid-norm { stroke: var(--mid); stroke-width: 1.4; stroke-dasharray: 2 4; }
.mwi-tick { font-family: 'Outfit', sans-serif; font-size: 12px; fill: var(--mid); }
.mwi-line { fill: none; stroke: var(--navy); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.mwi-dot { fill: var(--gold); }

.mwi-explain { border-top: 1px solid var(--light); padding-top: 2rem; margin-bottom: 2.4rem; }
.mwi-explain h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 600; color: var(--navy); margin-bottom: 10px; }
.mwi-explain p { font-size: 0.98rem; line-height: 1.7; color: var(--ink); margin-bottom: 12px; max-width: 66ch; }
.mwi-links a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.mwi-links a:hover { color: var(--gold); }

.mwi-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: var(--navy); border-radius: 10px; padding: 28px 30px; margin-bottom: 2rem; }
.mwi-cta h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 600; color: #fff; margin-bottom: 4px; }
.mwi-cta p { font-size: 0.92rem; color: rgba(255,255,255,0.82); max-width: 58ch; }
.mwi-cta-alt { margin-top: 8px; }
.mwi-cta-alt a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.mwi-cta-alt a:hover { color: var(--gold2, #D9A648); }

.mwi-notice { font-size: 0.74rem; line-height: 1.6; color: var(--mid); }

@media (max-width: 640px) {
  .mwi-page { padding: 84px 18px 48px; }
  .mwi-num { font-size: 3.6rem; }
  .mwi-strip-labels .l, .mwi-strip-labels .r { min-width: 70px; }
  .mwi-cta { padding: 22px 20px; }
}