/* Mirrors scss/_colors.scss ($maincolor #f34500, $maincolor-dark #b92100, $blue #0b3a49,
   $secondcolor #4f4f4f, $thirdcolor #909090, $fourthcolor #ccc) and scss/_fonts.scss
   (NeueHelvetica font stack) since this file is enqueued standalone, outside screen.scss. */
.ml-artifact-engine{
	max-width:100%;width:100%;
	font-family:"NeueHelvetica55Roman",Helvetica,Arial,Helmet,Freesans,sans-serif;
	background:#fff;
	box-sizing:border-box;
	margin:0 0 1.5rem;
}
.ml-artifact-engine *{box-sizing:border-box;}
.ml-artifact-engine .ml-engine-progress{
	display:flex;gap:6px;margin-bottom:1.5rem;
}
.ml-artifact-engine .ml-ep{
	height:4px;flex:1;border-radius:2px;background:#ccc;
}
.ml-artifact-engine .ml-ep.ml-done{
	background:linear-gradient(to right,#b92100,#f34500);
}
.ml-artifact-engine .ml-ep.ml-active{
	background:#909090;
}
.ml-artifact-engine .ml-engine-label{
	font-family:"NeueHelvetica75Bold",Helvetica,Arial,Helmet,Freesans,sans-serif;
	font-size:11px;letter-spacing:.08em;text-transform:uppercase;
	color:#909090;margin-bottom:.25rem;
}
.ml-artifact-engine .ml-engine-title{
	font-family:"NeueHelvetica75Bold",Helvetica,Arial,Helmet,Freesans,sans-serif;
	font-size:22px;color:#0b3a49;margin-bottom:.35rem;line-height:1.25;
}
.ml-artifact-engine .ml-engine-sub{
	font-family:"NeueHelvetica55Roman",Helvetica,Arial,Helmet,Freesans,sans-serif;
	font-size:16px;color:#4f4f4f;margin-bottom:0;line-height:1.4;
}
@media (max-width:600px){
	.ml-artifact-engine .ml-engine-title{font-size:19px;}
	.ml-artifact-engine .ml-engine-progress{margin-bottom:1rem;}
}

/* ============================================================
   GF form layout/markup fixes, scoped to whichever form carries our
   engine banner (via :has, not a form ID -- IDs differ per environment).
   The current Gravity Forms version's front-end markup has drifted from
   what scss/_forms.scss was written for; see below for each mismatch.
   ============================================================ */

.gform_wrapper.gravity-theme:has(.ml-artifact-engine, .ml-engine-results){
	margin:0 auto 1.5rem;
	padding:2.5rem 2rem;
	box-sizing:border-box;
}

/* GF wraps each field's <li> in a bare <fieldset> (no class) as its grid-row
   grouping container. That fieldset carries no width/grid-column rule of its
   own, so as a grid item it collapses to a single narrow auto-column instead
   of spanning full width -- the "squeezed to the left" text wrap. The actual
   .gfield already has the correct grid-column:span 12 rule (from GF's own
   basic.min.css); display:contents removes the inert wrapper from layout so
   that rule can take effect. */
.gform_wrapper.gravity-theme:has(.ml-artifact-engine, .ml-engine-results) .gform_fields > fieldset:not(.gfield){
	display:contents;
}

/* Current GF choice markup (.gchoice / .gfield-choice-input /
   .gform-field-label--type-inline) isn't targeted anywhere in _forms.scss,
   which was written for the older li-based .gfield_radio markup -- so the
   radio input and its label render disconnected instead of side by side. */
.gform_wrapper.gravity-theme:has(.ml-artifact-engine, .ml-engine-results) .gfield_radio,
.gform_wrapper.gravity-theme:has(.ml-artifact-engine, .ml-engine-results) .gfield_checkbox{
	margin:0;
}
.gform_wrapper.gravity-theme:has(.ml-artifact-engine, .ml-engine-results) .gchoice{
	display:flex;
	align-items:flex-start;
	gap:10px;
	padding:.75rem 1rem;
	border:1px solid #e5e5e2;
	border-radius:8px;
	margin-bottom:.5rem;
	background:#fff;
	transition:border-color .15s,background .15s;
}
.gform_wrapper.gravity-theme:has(.ml-artifact-engine, .ml-engine-results) .gchoice:hover{
	border-color:#ccc;
	background:#fafaf8;
}
.gform_wrapper.gravity-theme:has(.ml-artifact-engine, .ml-engine-results) .gchoice:has(input:checked){
	border-color:#f34500;
	background:#fdeee8;
}
.gform_wrapper.gravity-theme:has(.ml-artifact-engine, .ml-engine-results) .gfield-choice-input{
	/* Centers the 13px radio against the label's 24px first line specifically
	   (not the whole, possibly-multi-line, label block): (24 - 13) / 2 = 5.5px. */
	margin-top:5.5px;
	flex-shrink:0;
	width:auto;
	height:auto;
	accent-color:#f34500;
}
.gform_wrapper.gravity-theme:has(.ml-artifact-engine, .ml-engine-results) .gform-field-label--type-inline{
	font-family:"NeueHelvetica55Roman",Helvetica,Arial,Helmet,Freesans,sans-serif;
	font-size:16px;
	line-height:1.5;
	color:#1a1a1a;
}
.gform_wrapper.gravity-theme:has(.ml-artifact-engine, .ml-engine-results) .gform_required_legend{
	display:none;
}

/* The site's global `h2{position:relative}` rule gives the validation-error h2
   its own positioning context, which hijacks the GF error icon's
   `position:absolute` (meant to resolve against the outer, also-relative
   .gform_validation_errors container, which reserves 48px of left padding for
   it). The icon ends up 12px into the h2's own box -- which already starts at
   that 48px gutter -- landing on top of the text instead of beside it. */
.gform_wrapper.gravity-theme:has(.ml-artifact-engine, .ml-engine-results) .gform_validation_errors > h2{
	position:static;
}
.gform_wrapper.gravity-theme:has(.ml-artifact-engine, .ml-engine-results) legend.gfield_label{
	font-family:"NeueHelvetica75Bold",Helvetica,Arial,Helmet,Freesans,sans-serif;
	font-size:18px;
	color:#1a1a1a;
	margin-bottom:.75rem;
	line-height:1.4;
}

/* GF renders Next/Previous/Submit as <input type="button">/<input type="submit">.
   The site's global button style (.button::after gradient) relies on generated
   content, which the CSS spec never renders on replaced elements like <input> --
   so these buttons were painting with a transparent background (white text on
   white page = invisible). Give them a direct background instead of the ::after
   trick, matching the gradient used elsewhere on .button::after. */
.gform_wrapper.gravity-theme:has(.ml-artifact-engine, .ml-engine-results) .gform_page_footer{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:1rem;
	margin-top:1.5rem;
	padding-top:0;
	border:none;
}
.gform_wrapper.gravity-theme:has(.ml-artifact-engine, .ml-engine-results) .ml-engine-progress-text{
	font-family:"NeueHelvetica55Roman",Helvetica,Arial,Helmet,Freesans,sans-serif;
	font-size:13px;
	color:#909090;
	white-space:nowrap;
}
.gform_wrapper.gravity-theme:has(.ml-artifact-engine, .ml-engine-results) .ml-engine-nav-buttons{
	display:flex;
	align-items:center;
	gap:.75rem;
	margin-left:auto;
}

/* _forms.scss's bare `input{width:100%;height:64px;padding:...!important}` rule
   (meant for floating-label text inputs) has no [type] exclusions, so it also
   matches these <input type="button">/<input type="submit"> elements -- hence
   the full-width stretch and the off-center label (that rule's padding is
   asymmetric, top-heavy, to make room for a floating label). Overriding with
   !important to win against that rule's own !importants.
   appearance:none also matters here: these inputs keep native OS button chrome
   (appearance:button, from the normalize reset), which in some browsers keeps
   its own internal padding/baseline for the value text regardless of our CSS --
   removing it lets padding/line-height/text-align fully control centering.
   (display/align-items/justify-content don't apply here -- an <input>'s value
   text isn't a real flex child -- centering is done via padding + line-height
   + text-align instead.)

   Sizing/type/padding/corners here match the site's actual submit-button style
   (see e.g. the Contact page's Submit button: NeueHelvetica75Bold 18px, square
   corners, 16px 20px 10px padding). That button is a real <button> element, so
   its rollover comes from the site's global `.button::after` pseudo-element: a
   300%-wide hard-stopped gradient (0-40% dark red, 60-100% orange) sitting in
   an overflow:hidden box, positioned so only a dark-red slice shows at rest;
   hovering slides it via `left` to show an orange slice instead. It reads as a
   solid color at rest with a color swap on hover, NOT a visible gradient.
   ::after doesn't render on <input> at all (confirmed elsewhere in this file),
   so the slide trick itself isn't available here -- but the same rest/hover
   colors and transition are reproduced directly with a background-color swap,
   which looks the same without needing the underlying wipe mechanism. */
.gform_wrapper.gravity-theme:has(.ml-artifact-engine, .ml-engine-results) input.gform_button,
.gform_wrapper.gravity-theme:has(.ml-artifact-engine, .ml-engine-results) input.gform_next_button,
.gform_wrapper.gravity-theme:has(.ml-artifact-engine, .ml-engine-results) input.gform_previous_button{
	font-family:"NeueHelvetica75Bold",Helvetica,Arial,Helmet,Freesans,sans-serif;
	font-size:18px;
	line-height:1.2 !important;
	border:none;
	border-radius:0;
	cursor:pointer;
	appearance:none;
	-webkit-appearance:none;
	width:auto !important;
	height:auto !important;
	margin:0 !important;
	padding:16px 20px 10px !important;
	text-align:center;
	vertical-align:middle;
	transition:background-color .45s ease-in-out,border-color .45s ease-in-out,color .45s ease-in-out;
}
.gform_wrapper.gravity-theme:has(.ml-artifact-engine, .ml-engine-results) input.gform_button,
.gform_wrapper.gravity-theme:has(.ml-artifact-engine, .ml-engine-results) input.gform_next_button{
	background-color:#b92100;
	color:#fff;
}
.gform_wrapper.gravity-theme:has(.ml-artifact-engine, .ml-engine-results) input.gform_button:hover,
.gform_wrapper.gravity-theme:has(.ml-artifact-engine, .ml-engine-results) input.gform_next_button:hover{
	background-color:#f34500;
}
.gform_wrapper.gravity-theme:has(.ml-artifact-engine, .ml-engine-results) input.gform_previous_button{
	background:transparent;
	border:2px solid #ccc;
	color:#1a1a1a;
}

/* ============================================================
   [ml_engine_results] -- grade + per-engine breakdown, rendered by
   ml-engine.js from the (un-submitted) answers on pages 1-15. Grade-band
   and per-engine bar colors (blue/amber/green) are semantic weak-to-strong
   indicators carried over from the reference mockup, not brand chrome, so
   they're left as-is rather than reskinned to brand orange/navy.
   ============================================================ */
.ml-engine-results{
	font-family:"NeueHelvetica55Roman",Helvetica,Arial,Helmet,Freesans,sans-serif;
}
.ml-score-big{
	text-align:center;
	padding:2rem 1.5rem;
	border:1px solid #e5e5e2;
	border-radius:12px;
	margin-bottom:1.5rem;
	background:#f9f9f7;
}
.ml-grade-badge{
	box-sizing:border-box;
	width:56px;
	height:56px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	color:#fff;
	font-family:"NeueHelvetica75Bold",Helvetica,Arial,Helmet,Freesans,sans-serif;
	font-size:24px;
	line-height:1;
	/* flex align-items:center centers the line box, but this font's glyph sits
	   visually above that box's geometric center (ascent/descent asymmetry) --
	   nudge down to compensate rather than fight the font metrics. */
	padding-top:5px;
	margin:0 auto .75rem;
}
.ml-score-num{
	font-family:"NeueHelvetica75Bold",Helvetica,Arial,Helmet,Freesans,sans-serif;
	font-size:36px;
	color:#1a1a1a;
}
.ml-score-denom{
	font-size:16px;
	color:#909090;
}
.ml-score-eyebrow{
	font-size:11px;
	font-family:"NeueHelvetica75Bold",Helvetica,Arial,Helmet,Freesans,sans-serif;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:#909090;
	margin-top:.75rem;
}
.ml-diagnosis{
	font-family:"NeueHelvetica75Bold",Helvetica,Arial,Helmet,Freesans,sans-serif;
	font-size:19px;
	margin-top:.35rem;
	color:#0b3a49;
	line-height:1.4;
}
.ml-score-desc{
	font-size:14px;
	color:#4f4f4f;
	margin-top:.75rem;
	line-height:1.6;
	max-width:440px;
	margin-left:auto;
	margin-right:auto;
}
.ml-gap-callout{
	padding:1.25rem 1.5rem;
	border:1px solid #e5e5e2;
	border-radius:12px;
	margin-bottom:1.5rem;
	background:#fff;
}
.ml-gap-eyebrow{
	font-size:11px;
	font-family:"NeueHelvetica75Bold",Helvetica,Arial,Helmet,Freesans,sans-serif;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:#909090;
	margin-bottom:.35rem;
}
.ml-gap-title{
	font-family:"NeueHelvetica75Bold",Helvetica,Arial,Helmet,Freesans,sans-serif;
	font-size:16px;
	color:#0b3a49;
	margin-bottom:.5rem;
}
.ml-gap-text{
	font-size:14px;
	color:#4f4f4f;
	line-height:1.6;
}
.ml-section-head{
	font-family:"NeueHelvetica75Bold",Helvetica,Arial,Helmet,Freesans,sans-serif;
	font-size:16px;
	color:#1a1a1a;
	margin-bottom:1rem;
}
.ml-engine-results-list{
	margin-bottom:1.5rem;
}
.ml-er-row{
	padding:1rem 1.25rem;
	border:1px solid #e5e5e2;
	border-radius:12px;
	margin-bottom:.75rem;
	background:#fff;
}
.ml-er-top{
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-bottom:.5rem;
}
.ml-er-name{
	font-family:"NeueHelvetica75Bold",Helvetica,Arial,Helmet,Freesans,sans-serif;
	font-size:15px;
	color:#1a1a1a;
}
.ml-er-score{
	font-family:"NeueHelvetica75Bold",Helvetica,Arial,Helmet,Freesans,sans-serif;
	font-size:14px;
	color:#909090;
}
.ml-er-bar-bg{
	height:6px;
	border-radius:3px;
	background:#e5e5e2;
	margin-bottom:.75rem;
}
.ml-er-bar{
	height:6px;
	border-radius:3px;
}
.ml-er-text{
	font-size:13px;
	color:#4f4f4f;
	line-height:1.6;
}
.ml-cta-block{
	padding:1.5rem;
	border:1px solid #e5e5e2;
	border-radius:12px;
	background:#f9f9f7;
}
.ml-cta-block p{
	font-size:14px;
	color:#4f4f4f;
	margin-bottom:0;
	line-height:1.6;
}
.ml-cta-block strong{
	color:#1a1a1a;
	font-family:"NeueHelvetica75Bold",Helvetica,Arial,Helmet,Freesans,sans-serif;
}