/*
  Melli Life quiz skin = the website (Greg Reid, 2026-10-05, msg 52518 — supersedes the 9/15 Montserrat + Carlito call).
  Loaded AFTER assess.css, only under /assess. Skin only: no quiz class is renamed, no markup changed.

  1. @font-face block below is copied VERBATIM from the captured site CSS (elementor-pro custom fonts inline
     sheet in content/home.json). Note the site's own mapping: 600 = Neuvetica-Bold, 700 = Neuvetica-Heavy.
  2. The quiz sheet is Tailwind v4 — every colour/font utility reads a CSS variable, so the variables are
     redefined to the site's MEASURED values (computed styles on the live preview, 2026-10-05):
       primary button  #224B28, hover #0E0E0E, 4px radius, Neuvetica 600, .6px tracking
       heading green   #1D4D29     kit green #417B4A     sage #6A835E / footer card #6A825E
       gold            #CEB351     page cream #FFFEF9    home sand #F6EEDB
       text            #222222 / #382D2D / #5F5E5A       footer shell #323232
  3. Also fixes a pre-existing bug: html{font-family:var(--font-body)} referenced --font-carlito, defined only on
     a wrapper class, so the root value was invalid and every quiz rendered in Times.
*/
@font-face {
	font-family: 'Neuvetica';
	font-style: normal;
	font-weight: 100;
	font-display: auto;
	src: url('/assets/fonts/Neuvetica-Thin.woff') format('woff');
}
@font-face {
	font-family: 'Neuvetica';
	font-style: italic;
	font-weight: 100;
	font-display: auto;
	src: url('/assets/fonts/Neuvetica-ThinItalic.woff') format('woff');
}
@font-face {
	font-family: 'Neuvetica';
	font-style: normal;
	font-weight: 200;
	font-display: auto;
	src: url('/assets/fonts/Neuvetica-ExtraLight.woff') format('woff');
}
@font-face {
	font-family: 'Neuvetica';
	font-style: italic;
	font-weight: 200;
	font-display: auto;
	src: url('/assets/fonts/Neuvetica-ExtraLightItalic.woff') format('woff');
}
@font-face {
	font-family: 'Neuvetica';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('/assets/fonts/Neuvetica-Light.woff') format('woff');
}
@font-face {
	font-family: 'Neuvetica';
	font-style: italic;
	font-weight: 300;
	font-display: auto;
	src: url('/assets/fonts/Neuvetica-LightItalic.woff') format('woff');
}
@font-face {
	font-family: 'Neuvetica';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('/assets/fonts/Neuvetica-Regular.woff') format('woff');
}
@font-face {
	font-family: 'Neuvetica';
	font-style: italic;
	font-weight: normal;
	font-display: auto;
	src: url('/assets/fonts/Neuvetica-Italic.woff') format('woff');
}
@font-face {
	font-family: 'Neuvetica';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('/assets/fonts/Neuvetica-Medium.woff') format('woff');
}
@font-face {
	font-family: 'Neuvetica';
	font-style: italic;
	font-weight: 500;
	font-display: auto;
	src: url('/assets/fonts/Neuvetica-MediumItalic.woff') format('woff');
}
@font-face {
	font-family: 'Neuvetica';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('/assets/fonts/Neuvetica-Bold.woff') format('woff');
}
@font-face {
	font-family: 'Neuvetica';
	font-style: italic;
	font-weight: 600;
	font-display: auto;
	src: url('/assets/fonts/Neuvetica-BoldItalic.woff') format('woff');
}
@font-face {
	font-family: 'Neuvetica';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('/assets/fonts/Neuvetica-Heavy.woff') format('woff');
}
@font-face {
	font-family: 'Neuvetica';
	font-style: italic;
	font-weight: 700;
	font-display: auto;
	src: url('/assets/fonts/Neuvetica-HeavyItalic.woff') format('woff');
}

:root{
  --font-display:"Neuvetica",sans-serif;
  --font-body:"Neuvetica",sans-serif;
  --font-sans:"Neuvetica",sans-serif;
  --default-font-family:"Neuvetica",sans-serif;
  --tracking-tight:0em;

  --color-hunter-900:#132a17;
  --color-hunter-800:#1a3a1f;
  --color-hunter-700:#224b28;
  --color-hunter-600:#1d4d29;
  --color-hunter-500:#417b4a;
  --color-hunter-400:#6a835e;
  --color-hunter-300:#a3b597;
  --color-hunter-200:#c9d4c0;
  --color-hunter-100:#e3e9dd;
  --color-hunter-50:#f1f2f1;

  --color-gold-600:#a88f35;
  --color-gold-500:#ceb351;
  --color-gold-400:#ceb34e;
  --color-gold-300:#dcc985;
  --color-gold-100:#f1e9db;

  --color-tan-300:#ddd3bc;
  --color-tan-200:#ece4cf;
  --color-tan-100:#f6eedb;
  --color-tan-50:#fffef9;
  --color-cream:#ffffff;

  --color-charcoal-900:#222222;
  --color-charcoal-800:#2b2a2a;
  --color-charcoal-700:#382d2d;
  --color-charcoal-600:#4a4946;
  --color-charcoal-500:#5f5e5a;
  --color-charcoal-400:#7e7d78;
  --color-charcoal-300:#a9a8a3;
}
html,body{font-family:"Neuvetica",sans-serif}
.mskin{font-family:"Neuvetica",sans-serif;color:var(--color-charcoal-900)}
.mskin :is(input,select,textarea,button){font-family:inherit}

/* Headings: the site sets display type at 600 (Neuvetica-Bold) with slight positive tracking. */
.mskin :is(h1,h2,h3){font-weight:600;letter-spacing:.01em}
.mskin h1.text-charcoal-900{color:#1d4d29}
.mskin .font-bold{font-weight:600}

/* Buttons = the site's button: 4px radius, 600 weight, .6px tracking, near-black hover. */
.mskin :is(a,button):is([class*="bg-hunter-7"],[class*="bg-gold-4"],[class*="font-display"][class*="border-tan"],[class*="font-display"][class*="bg-tan-200"]):not(.text-left),
.mskin :is(a,button) > span[class*="bg-hunter-7"]{border-radius:4px!important;font-weight:600;letter-spacing:.6px}
.mskin :is(a,button)[class*="bg-hunter-7"]:not(:disabled):hover,
.mskin .group:hover span[class*="bg-hunter-7"]{background-color:#0e0e0e!important}

/* ---- Site header (same treatment as the clone pages: translucent bar, real white logo, white nav) ---- */
.msk-head{position:relative;z-index:40;padding:12px 50px 0}
/* The blur lives on ::before, NOT on the bar: backdrop-filter makes an element the containing block for its
   position:fixed descendants, which trapped the phone drawer inside the 64px bar (the same bug the site's own
   hamburger had). isolation:isolate gives the z-index:-1 layer a stacking context without that side effect. */
.msk-bar{position:relative;isolation:isolate;display:flex;align-items:center;gap:20px;min-height:71px;padding:0 20px 0 26px}
.msk-bar::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:3.4px;background:rgba(0,0,0,.4);-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px)}
.msk-logo{display:block;flex:none;line-height:0}
.msk-logo img{width:93px;height:auto}
.msk-nav{display:flex;align-items:center;gap:clamp(10px,1.6vw,26px);margin:0 auto;padding:0;list-style:none}
.msk-nav > li{position:relative}
.msk-nav a,.msk-nav button{font:500 clamp(13px,1.06vw,16px)/1.6 "Neuvetica",sans-serif;color:#fff;text-decoration:none;white-space:nowrap;background:none;border:0;padding:6px 0;cursor:pointer}
.msk-nav a:hover{color:#f1e9db}
.msk-caret{display:inline-block;margin-left:6px;width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.msk-sub{position:absolute;left:-24px;top:100%;min-width:240px;margin:0;padding:12px 0;list-style:none;background:#fff;border-radius:4px;box-shadow:0 18px 40px rgba(0,0,0,.14);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s,visibility .2s}
.msk-nav > li:hover > .msk-sub,.msk-nav > li:focus-within > .msk-sub{opacity:1;visibility:visible;transform:none}
.msk-sub a{display:block;padding:10px 24px;color:#1c1c1c;font-size:16px}
.msk-sub a:hover{color:#224b28;background:#f6eedb}
.msk-right{display:flex;align-items:center;gap:12px;flex:none}
.msk-portals{display:flex;flex-direction:column;gap:4px}
.msk-portals a{font:600 12px/1.2 "Neuvetica",sans-serif;letter-spacing:.6px;padding:6px 12px;border-radius:4px;text-align:center;text-decoration:none;white-space:nowrap}
.msk-portals a:first-child{background:#fff;color:#1e1b1b}
.msk-portals a:last-child{color:#fff;box-shadow:inset 0 0 0 1.2px rgba(255,255,255,.85)}
.msk-cta{font:600 14px/1.3 "Neuvetica",sans-serif;letter-spacing:.6px;color:#fff;background:#224b28;border-radius:4px;padding:15px 12px;text-decoration:none;white-space:nowrap;transition:background-color .2s}
.msk-cta:hover{background:#0e0e0e}
.msk-menu{display:none}
@media (max-width:1180px){
  .msk-head{padding:10px 12px 0}
  .msk-bar{min-height:64px;padding:0 14px;gap:12px}
  .msk-nav,.msk-cta{display:none}
  .msk-menu{display:block;order:-1}
  .msk-logo{margin:0 auto}
  .msk-logo img{width:80px}
  .msk-portals a{padding:5px 9px;font-size:11px;border-radius:999px;background:rgba(255,254,247,.14)!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
}
.msk-menu > summary{list-style:none;cursor:pointer;width:40px;height:40px;display:flex;flex-direction:column;justify-content:center;gap:7px}
.msk-menu > summary::-webkit-details-marker{display:none}
.msk-menu > summary span{display:block;height:2px;width:30px;background:#fff;border-radius:2px}
.msk-menu > summary span:nth-child(2){width:22px}
.msk-menu[open] > summary{position:fixed;top:14px;right:14px;z-index:60;width:44px;height:44px;border-radius:999px;background:rgba(255,255,255,.16);align-items:center;gap:0}
.msk-menu[open] > summary span{position:absolute;width:20px}
.msk-menu[open] > summary span:nth-child(1){transform:rotate(45deg)}
.msk-menu[open] > summary span:nth-child(2){transform:rotate(-45deg)}
.msk-menu[open] > summary span:nth-child(3){display:none}
.msk-drawer{position:fixed;inset:0;z-index:55;overflow-y:auto;background:#1f3d2b;padding:72px 24px 32px}
.msk-drawer a{display:block;color:#fff;text-decoration:none;font:400 24px/1.25 "Neuvetica",sans-serif;padding:9px 0}
.msk-drawer .msk-drawer-sub a{font-size:18px;opacity:.88;padding:6px 0 6px 16px}
.msk-drawer .msk-drawer-label{color:#fff;font:400 24px/1.25 "Neuvetica",sans-serif;padding:9px 0}
.msk-drawer .msk-cta{display:inline-block;margin-top:24px;font-size:15px;padding:14px 22px}
html:has(.msk-menu[open]){overflow:hidden}

/* ---- Site footer (dark shell + sage card, white logo, Neuvetica links) ---- */
.msk-foot{background:#fffef9;padding:40px 0 0}
.msk-foot-shell{background:#323232;border-radius:10px 10px 0 0;padding:40px 37px 24px}
.msk-foot-card{background:#6a825e;border-radius:10px;padding:40px clamp(20px,4vw,40px);display:flex;flex-wrap:wrap;gap:32px 64px;justify-content:space-between;align-items:flex-start}
.msk-foot-card img{width:clamp(160px,22vw,260px);height:auto}
.msk-foot-links{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.msk-foot-links h4{margin:0 0 6px;font:500 13px/1.2 "Neuvetica",sans-serif;letter-spacing:2px;text-transform:uppercase;color:#fff;opacity:.85}
.msk-foot-links a{font:500 18px/1.2 "Neuvetica",sans-serif;color:#fff;text-decoration:none}
.msk-foot-links a:hover{text-decoration:underline}
.msk-foot-rail{display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between;color:rgba(255,255,255,.72);font:400 13px/1.5 "Neuvetica",sans-serif;padding:18px 4px 0}
@media (max-width:640px){.msk-foot{padding-top:24px}.msk-foot-shell{padding:16px 12px 20px}.msk-foot-card{padding:28px 20px;gap:24px}}

/* border-hunter-200 is used 14× in the quiz markup but was never compiled into assess.css, so those borders fell
   back to currentColor (near-black) — e.g. the results gate card. Defined here with the site sage tint. */
.mskin .border-hunter-200{border-color:var(--color-hunter-200)}

/* =====================================================================================================
   READABILITY PASS — Greg Reid 2026-10-07: "the subheaders and support copy is faint … more readable size and
   heavier … walk through the entire universe of those quizzes".
   ROOT CAUSE (measured on the preview, computed styles): no Light face was ever served (loaded faces = 400/500/600),
   but Neuvetica's own Regular (400) is a thin cut, and the quiz markup set copy at 11–15.5px in mid-grey
   (#5f5e5a 6.4:1, #7e7d78 4.1:1) with gold eyebrows (#a88f35 3.1:1) and tone-coloured text (3.3–3.7:1).
   SCALE (all /assess screens, scoped to <main> so the site header/footer are untouched):
     support/body/results copy 17px Medium 500, ink #222, line-height 1.6
     card titles/subheads 20px 600 · card blurbs 16px 500 · question 23px 600 · options 17px 500, min 44px tall
     eyebrows/chips 14px 600 uppercase in button green #224b28 · helper/progress text 16px #4a4946 ·
     small print/disclaimers 14px 500 #4a4946 (8.9:1)
   Specificity: .mskin main + an attribute/class = (0,2,1+) beats Tailwind utilities (0,1,0) and their sm: variants.
   ===================================================================================================== */
.mskin main{font-weight:500;color:#222}

/* colour: greys → ink, light greys → dark grey, gold labels → site button green */
.mskin main :is(.text-charcoal-500,.text-charcoal-600,.text-charcoal-700){color:#222}
.mskin main :is(.text-charcoal-300,.text-charcoal-400){color:#4a4946}
.mskin main .text-gold-600{color:#224b28}
.mskin main :is(.opacity-70):not([class*="blur-"]){opacity:1}

/* body copy: every paragraph / list item / label, and any element sized 13–16.5px → 17px */
.mskin main :is(p,li,label,dd,td),
.mskin main :is([class*="text-[13"],[class*="text-[14"],[class*="text-[15"],[class*="text-[16"],.text-sm,.text-base){font-size:17px}
.mskin main :is(p,li){line-height:1.6}
.mskin main p:is([class*="text-[17"]){font-size:18px}
.mskin main input:not([type="checkbox"]):not([type="radio"]),.mskin main select,.mskin main textarea{font-size:17px}

/* card titles / subheads (bold, 14.5–16.5px, not a fixed-size icon box) → 20px 600 */
.mskin main :is(h2,h3,h4,div,span):is(.font-bold,.font-semibold):is([class*="text-[14"],[class*="text-[15"],[class*="text-[16"]):not([class*="h-"]):not([class*="rounded-full"]):not(button *):not(a *){font-size:20px;font-weight:600;line-height:1.3}
/* landing info-card blurbs (the three cards under the CTA) → 16px */
.mskin main .grid > div > div[class~="text-[13px]"][class~="leading-snug"]{font-size:16px;line-height:1.5}

/* question text = the fieldset legend → 23px 600 (22px on phones) */
.mskin main fieldset > legend[class]{font-size:23px;font-weight:600;line-height:1.3;color:#1d4d29;
  /* float takes the legend off the fieldset's top border: at 23px a wrapped question otherwise has the border
     line drawn through its middle line. It now sits inside the card, above the options. */
  float:left;width:100%;padding:0 0 14px}
.mskin main fieldset > legend[class] + *{clear:both}
@media (max-width:640px){.mskin main fieldset > legend[class]{font-size:22px}}

/* answer options → 17px Medium, 44px minimum tap height */
.mskin main button.text-left{font-size:17px;min-height:48px;line-height:1.35}
.mskin main button.text-left:not(.font-semibold){font-weight:500}

/* buttons / CTAs / links styled as buttons → 17px (Back + secondary buttons included) */
.mskin main :is(button,a):is([class*="text-[13"],[class*="text-[14"],[class*="text-[15"]){font-size:17px}
.mskin main :is(button,a)[class*="rounded-full"][class*="text-[12"]{font-size:15px}

/* eyebrows / progress labels / chips (uppercase, tracked) → 14px 600 */
.mskin main .uppercase:is([class*="text-[10"],[class*="text-[11"],[class*="text-[12"]){font-size:14px;font-weight:600}
.mskin main .uppercase:is(.text-gold-600,.text-charcoal-400,.text-charcoal-500){color:#224b28}

/* small print: disclaimers, footnotes, "% complete", sub-labels (10–12.5px, not uppercase) → 14px dark grey */
/* helpers + sub-labels (spans/divs: "% complete", "Select an answer to continue", "out of", counts) → 16px */
.mskin main :is([class*="text-[10"],[class*="text-[11"],[class*="text-[12"]):not(.uppercase):not([class*="h-5"]):not([class*="leading-none"]){font-size:16px;line-height:1.5}
/* disclaimers / footnotes (paragraphs) → 14px */
.mskin main p:is([class*="text-[10"],[class*="text-[11"],[class*="text-[12"]){font-size:14px;line-height:1.55}
.mskin main :is([class*="text-[11"],[class*="text-[12"]):not(.uppercase):is(.text-charcoal-400,.text-charcoal-500){color:#4a4946}
/* form validation message: same rust tone deepened (#a04a24 5.6:1 → #7f3a1c ≥8:1), 16px */
.mskin main [class*="text-[#a04a24]"]{font-size:16px;font-weight:500;color:#7f3a1c}
/* text on the dark green panels keeps its light colour, gets the same size floor */
.mskin main :is(.text-tan-200,.text-tan-100,[class*="text-tan-200/"],[class*="text-tan-300/"]):is([class*="text-[11"],[class*="text-[12"],[class*="text-[13"]){font-size:15px}
.mskin main p:is(.text-tan-200,.text-tan-100,[class*="text-tan-200/"],[class*="text-tan-300/"]){font-size:17px}
.mskin main [class*="text-tan-300/"],.mskin main [class*="text-tan-200/"]{color:var(--color-tan-200)}

/* Footer social row (Greg, 2026-10-11) — same look as the clone footer's Elementor social icons:
   24px white glyphs, 0.8em padding, circular hover fill. */
.msk-foot-brand{display:flex;flex-direction:column;gap:12px}
.msk-social{display:flex;flex-wrap:wrap;gap:7px;margin-left:-.8em}
.msk-social a{display:inline-flex;font-size:24px;padding:.8em;border-radius:50%;color:#fff;transition:background-color .3s}
.msk-social a:hover{background-color:rgba(255,255,255,.14)}
.msk-social svg{width:1em;height:1em;fill:#fff}
@media (max-width:767px){.msk-social a{padding:.5em}.msk-social{margin-left:-.5em}}