/* ============================================================================
   InsuranceMonster - clientSite (customer portal)

   Ported from the ShieldKnot client portal, restyled onto the InsuranceMonster
   design system. Tokens mirror rootSite/css/site.css so the portal reads as the
   same product as the marketing site (Nunito, soft green, rounded, friendly).

   ShieldKnot's --sk-* custom properties are deliberately renamed to --im-*, and
   its Tailwind dump is not carried over - this file is the whole stylesheet.
   All styling lives here; no inline style attributes (project rule).

   Structure: 1) Tokens  2) Base  3) Components  4) Auth  5) App shell  6) Responsive
   ============================================================================ */

/* 1) TOKENS ---------------------------------------------------------------- */
:root {
	/* Brand green (from the logo + app icon) */
	--im-brand-700: #4a8a22;
	--im-brand-600: #5ea32e;
	--im-brand-500: #7cc242;
	--im-brand-300: #a6d977;
	--im-brand-100: #e2f2cf;
	--im-brand-50:  #f0f8e6;

	/* Ink / navy (from the wordmark) */
	--im-ink:      #17233a;
	--im-ink-soft: #2b3a52;

	/* Neutrals */
	--im-n-0:   #ffffff;
	--im-n-50:  #f5f8f3;
	--im-n-100: #eef2ea;

	/* Semantic */
	--im-text:        #17233a;
	--im-text-muted:  #5c6a76;
	--im-bg:          #ffffff;
	--im-bg-tint:     #f4f8f0;
	--im-border:      #e7ede1;
	--im-border-strong: #d7e0cd;
	--im-btn-ink:     #14261a;

	--im-danger-bg: #fdecea; --im-danger-line: #f5c2bd; --im-danger-ink: #a12a1c;
	--im-ok-bg:     #eaf7e4; --im-ok-line:     #c3e6b4; --im-ok-ink:     #2f6b1c;

	/* Radius / shadow / spacing / type */
	--im-r-sm: 10px; --im-r-md: 16px; --im-r-lg: 24px; --im-r-pill: 999px;
	--im-shadow-sm: 0 1px 2px rgba(20,40,20,.05), 0 3px 10px rgba(20,40,20,.05);
	--im-shadow-md: 0 12px 34px rgba(20,40,20,.09);
	--im-s2: 8px; --im-s3: 12px; --im-s4: 16px; --im-s5: 24px; --im-s6: 32px; --im-s7: 48px;
	--im-font: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--im-fs-sm: 0.92rem;
	--im-fs-xs: 0.8rem;
	--im-maxw: 1180px;
}

/* 2) BASE ------------------------------------------------------------------ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--im-font);
	font-weight: 600;
	color: var(--im-text);
	background: var(--im-bg);
	line-height: 1.6;
}
h1, h2, h3 { font-weight: 900; line-height: 1.15; margin: 0 0 var(--im-s3); color: var(--im-ink); letter-spacing: -0.01em; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 var(--im-s3); }
a { color: var(--im-brand-700); }
img { max-width: 100%; height: auto; display: block; }
.im-muted { color: var(--im-text-muted); }
.im-wrap { width: 100%; max-width: var(--im-maxw); margin: 0 auto; padding: 0 var(--im-s5); }
.im-skip { position: absolute; left: -9999px; }
.im-skip:focus { left: var(--im-s4); top: var(--im-s4); z-index: 100; background: var(--im-n-0); padding: var(--im-s3); border-radius: var(--im-r-sm); }

/* 3) COMPONENTS ------------------------------------------------------------ */
.im-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-family: inherit; font-weight: 800; font-size: 1rem; line-height: 1;
	padding: 14px 26px; border-radius: var(--im-r-pill); border: 2px solid transparent;
	background: var(--im-brand-500); color: var(--im-btn-ink);
	text-decoration: none; cursor: pointer;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.im-btn:hover { background: var(--im-brand-600); }
.im-btn:disabled { opacity: .6; cursor: default; }
.im-btn-block { width: 100%; }
.im-btn-ghost { background: transparent; color: var(--im-ink); border-color: var(--im-border-strong); }
.im-btn-ghost:hover { background: transparent; border-color: var(--im-brand-500); color: var(--im-brand-700); }
.im-btn-sm { padding: 9px 16px; font-size: var(--im-fs-sm); }

.im-field { margin-bottom: var(--im-s4); }
.im-label { display: block; font-weight: 800; font-size: var(--im-fs-sm); margin-bottom: 6px; color: var(--im-ink); }
.im-input {
	width: 100%; font-family: inherit; font-size: 1rem; font-weight: 600;
	padding: 13px 15px; border: 1px solid var(--im-border-strong); border-radius: var(--im-r-sm);
	background: var(--im-n-0); color: var(--im-text);
}
.im-input:focus { outline: 2px solid var(--im-brand-500); outline-offset: 1px; border-color: var(--im-brand-500); }

/* Inline form/status message. Empty by default, colour added by JS. */
.im-msg { min-height: 22px; font-size: var(--im-fs-sm); font-weight: 700; margin-bottom: var(--im-s3); }
.im-msg-error { color: var(--im-danger-ink); background: var(--im-danger-bg); border: 1px solid var(--im-danger-line); border-radius: var(--im-r-sm); padding: 9px 12px; }
.im-msg-ok { color: var(--im-ok-ink); background: var(--im-ok-bg); border: 1px solid var(--im-ok-line); border-radius: var(--im-r-sm); padding: 9px 12px; }

.im-card { background: var(--im-n-0); border: 1px solid var(--im-border); border-radius: var(--im-r-lg); padding: var(--im-s6); box-shadow: var(--im-shadow-sm); }
.im-badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--im-fs-xs); font-weight: 800; padding: 5px 11px; border-radius: var(--im-r-pill); background: var(--im-brand-100); color: var(--im-brand-700); }

/* 4) AUTH (login / activate / reset) --------------------------------------- */
/* Two-panel: brand story on the left, form on the right. Mirrors the ShieldKnot
   login layout, restyled on IM tokens. */
.im-auth { background: var(--im-bg-tint); }
/* The auth pages sit UNDER the shared header now, so the split must be a viewport
   minus that 74px header - at a flat 100vh the page would always overflow by exactly
   the header's height and scroll for no reason. */
.im-login-wrap { display: grid; grid-template-columns: 1.05fr .95fr; min-height: calc(100vh - 74px); }

/* Both panels stay full-bleed (the gradient has to reach the window edge), but the
   CONTENT inside each is a centred column. Previously the brand column was pinned to
   the left edge of its panel, so on a wide monitor it sat marooned in the corner with
   a vast empty gap beside it. The panel is ~1900px on a 3700px screen; the content is
   420px. Centre it, and cap the panel's own content box so the two columns stay near
   each other rather than drifting to opposite ends of the glass. */
.im-login-brand {
	background: linear-gradient(180deg, var(--im-brand-50), var(--im-bg-tint));
	padding: var(--im-s7); display: flex; flex-direction: column; justify-content: center;
	align-items: flex-end;   /* pull the column toward the form panel, not the far edge */
	border-right: 1px solid var(--im-border);
}
.im-login-brand-inner { width: 100%; max-width: 420px; }
.im-login-art { width: 200px; margin: var(--im-s6) 0 0 auto; }
.im-login-tag { font-size: 1.2rem; font-weight: 800; color: var(--im-ink); max-width: 34ch; margin-bottom: var(--im-s6); }
.im-login-features { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--im-s4); }
.im-login-features li { display: flex; align-items: center; gap: var(--im-s3); font-size: var(--im-fs-sm); font-weight: 700; }
.im-ico { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--im-brand-100); color: var(--im-brand-700); }
.im-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Mirrors the brand panel's flex-end: the card leans toward the divider so the two
   columns meet near the middle of the window instead of hugging opposite edges. */
.im-login-form { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: var(--im-s7) var(--im-s5); }
.im-login-card { width: 100%; max-width: 400px; background: var(--im-n-0); border: 1px solid var(--im-border); border-radius: var(--im-r-lg); padding: var(--im-s6); box-shadow: var(--im-shadow-md); }
.im-login-card-head { margin-bottom: var(--im-s5); }
.im-login-card-head h1 { margin-bottom: 4px; }
.im-login-card-head p { margin: 0; font-size: var(--im-fs-sm); }
.im-login-links { margin: var(--im-s4) 0 0; text-align: center; font-size: var(--im-fs-sm); }
.im-login-links a { font-weight: 800; text-decoration: none; }
.im-login-links a:hover { text-decoration: underline; }
/* Match the card's width so it stays centred UNDER the card now that the panel is
   flex-start rather than centre - otherwise it shrink-wraps and sits off to the left. */
.im-login-foot { margin-top: var(--im-s5); font-size: var(--im-fs-xs); text-align: center; width: 100%; max-width: 400px; }

/* 5) APP SHELL (logged-in portal) ------------------------------------------ */
.im-header { background: var(--im-n-0); border-bottom: 1px solid var(--im-border); position: sticky; top: 0; z-index: 40; }
.im-header .im-wrap { display: flex; align-items: center; gap: var(--im-s5); height: 74px; }
.im-header-brand img { height: 46px; width: auto; }
.im-nav { margin-left: auto; }
.im-nav ul { list-style: none; display: flex; align-items: center; gap: var(--im-s5); margin: 0; padding: 0; }
.im-nav a { text-decoration: none; color: var(--im-ink); font-weight: 700; font-size: var(--im-fs-sm); }
.im-nav a:hover, .im-nav a[aria-current="page"] { color: var(--im-brand-700); }
/* Logged-out visitors get one obvious action, so Log in reads as a control rather
   than another nav word sitting next to Marketplace. */
.im-nav-cta { padding: 8px 16px; border-radius: var(--im-r-pill); border: 2px solid var(--im-border-strong); }
.im-nav-cta:hover { border-color: var(--im-brand-500); }

.im-main { padding: var(--im-s6) 0 var(--im-s7); background: var(--im-bg-tint); min-height: calc(100vh - 74px); }
.im-page-head { margin-bottom: var(--im-s5); }
.im-page-head h1 { margin-bottom: 4px; }
.im-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--im-s5); }
.im-dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--im-s2) var(--im-s5); font-size: var(--im-fs-sm); }
.im-dl dt { font-weight: 800; color: var(--im-text-muted); }
.im-dl dd { margin: 0; font-weight: 700; }

.im-footer { background: var(--im-n-0); border-top: 1px solid var(--im-border); padding: var(--im-s5) 0; font-size: var(--im-fs-xs); color: var(--im-text-muted); }

/* 5b) PORTAL (overview / policy) -------------------------------------------
   Replaces the ShieldKnot Bootstrap grid + FontAwesome + inline-width markup.
   NOTE: this section must stay ABOVE section 6, and any mobile override for it
   belongs in the responsive block below - not here, or it is dead code. */

/* Page layout: sidebar + main column on desktop, stacked on mobile. */
.im-portal-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--im-s5); align-items: start; }
.im-col-stack { display: grid; gap: var(--im-s5); align-content: start; }

/* Card furniture */
.im-card-title { font-size: 1.05rem; margin: 0 0 var(--im-s4); }
.im-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--im-s3); margin-bottom: var(--im-s4); }
.im-card-head .im-card-title { margin: 0; }
.im-card-link { font-size: var(--im-fs-sm); font-weight: 800; text-decoration: none; color: var(--im-brand-700); white-space: nowrap; }
.im-card-link:hover { text-decoration: underline; }

/* Profile block */
.im-profile { text-align: center; padding-bottom: var(--im-s4); border-bottom: 1px solid var(--im-border); margin-bottom: var(--im-s4); }
.im-avatar {
	width: 72px; height: 72px; margin: 0 auto var(--im-s3); border-radius: 50%;
	display: grid; place-items: center; background: var(--im-brand-100);
	color: var(--im-brand-700); font-weight: 900; font-size: 1.5rem; letter-spacing: .02em;
}
.im-profile-name { font-size: 1.15rem; margin: 0 0 2px; }
.im-profile-email { margin: 0; font-size: var(--im-fs-sm); word-break: break-word; }

/* Label / value pairs */
.im-detail-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--im-s4); }
.im-detail-list li { display: flex; align-items: flex-start; gap: var(--im-s3); }
.im-detail-label { margin: 0 0 2px; font-size: var(--im-fs-xs); font-weight: 800; color: var(--im-text-muted); }
.im-detail-value { margin: 0; font-size: var(--im-fs-sm); font-weight: 700; overflow-wrap: anywhere; }

/* Quick actions */
.im-action-list { display: grid; gap: var(--im-s3); }
.im-action {
	display: flex; align-items: center; gap: var(--im-s3);
	padding: var(--im-s3); border: 1px solid var(--im-border); border-radius: var(--im-r-md);
	text-decoration: none; color: var(--im-ink); font-weight: 700; font-size: var(--im-fs-sm);
	transition: border-color .18s ease, background .18s ease;
}
.im-action:hover { border-color: var(--im-brand-500); background: var(--im-brand-50); }

/* Policy identity row */
.im-policy-id { display: flex; align-items: center; gap: var(--im-s3); margin-bottom: var(--im-s5); }
.im-policy-id-text { flex: 1 1 auto; min-width: 0; }
.im-policy-id-text h2, .im-policy-id-text h3 { font-size: 1.1rem; margin: 0 0 2px; overflow-wrap: anywhere; }
.im-policy-id-text p { margin: 0; font-size: var(--im-fs-sm); }
.im-ico-lg { width: 48px; height: 48px; }
.im-ico-lg svg { width: 25px; height: 25px; }

/* Stat rows */
.im-stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--im-s4); }
.im-stat-row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.im-stat-value { margin: 0; font-size: 1.25rem; font-weight: 900; color: var(--im-ink); }

/* Payment progress. The fill width comes from --im-pct, set per-request on the
   element (a server-computed value cannot be a class). */
.im-progress-head { display: flex; justify-content: space-between; font-size: var(--im-fs-sm); font-weight: 800; margin: var(--im-s5) 0 6px; }
.im-progress { height: 10px; border-radius: var(--im-r-pill); background: var(--im-n-100); overflow: hidden; }
.im-progress-fill { width: var(--im-pct, 0%); height: 100%; border-radius: inherit; background: var(--im-brand-500); }
.im-pay-note { margin: var(--im-s4) 0 0; font-size: var(--im-fs-sm); font-weight: 700; background: var(--im-brand-50); border: 1px solid var(--im-border); border-radius: var(--im-r-md); padding: var(--im-s3); }

/* Badge variants */
.im-badge-danger { background: var(--im-danger-bg); color: var(--im-danger-ink); }
.im-badge-warn { background: #fdf3e2; color: #8a5a12; }
.im-badge svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.im-text-ok { color: var(--im-ok-ink); }

/* Tables. Wide content scrolls inside its own container so the page body never
   scrolls sideways on a phone. */
.im-table-scroll { overflow-x: auto; }
.im-table { width: 100%; border-collapse: collapse; font-size: var(--im-fs-sm); }
.im-table th, .im-table td { text-align: left; padding: var(--im-s3); border-bottom: 1px solid var(--im-border); white-space: nowrap; }
.im-table th { font-weight: 800; color: var(--im-text-muted); font-size: var(--im-fs-xs); }
.im-table tbody tr:last-child td { border-bottom: 0; }
.im-table .im-num { text-align: right; }

.im-empty-note { display: flex; align-items: center; gap: var(--im-s3); margin: var(--im-s4) 0 0; font-size: var(--im-fs-sm); font-weight: 700; color: var(--im-text-muted); }

.im-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* 5c) MARKETPLACE ----------------------------------------------------------
   Config-driven product grid + generic quote wizard. Everything here is product
   agnostic - no cyber/pet/travel specific rules. Same section-order rule as 5b:
   mobile overrides go in section 6, not here. */

/* Hero */
.im-mk-hero { display: flex; align-items: center; justify-content: space-between; gap: var(--im-s5); margin-bottom: var(--im-s5); background: linear-gradient(180deg, var(--im-brand-50), var(--im-n-0)); }
.im-mk-hero-text h1 { margin: 0 0 6px; }
.im-mk-hero-text p { margin: 0; max-width: 62ch; }
.im-mk-eyebrow { margin: 0 0 4px; font-size: var(--im-fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--im-text-muted); }

/* Product grid */
.im-mk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--im-s5); }
.im-mk-card { display: flex; flex-direction: column; }
.im-mk-card-head { display: flex; align-items: center; gap: var(--im-s3); margin-bottom: var(--im-s3); }
.im-mk-card-head h2 { font-size: 1.1rem; margin: 0; }
.im-mk-blurb { font-size: var(--im-fs-sm); margin: 0 0 var(--im-s4); }
.im-mk-bullets { list-style: none; margin: 0 0 var(--im-s4); padding: 0; display: grid; gap: var(--im-s2); }
.im-mk-bullets li { display: flex; align-items: center; gap: var(--im-s2); font-size: var(--im-fs-sm); font-weight: 600; }
.im-mk-bullets svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--im-brand-600); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.im-mk-price { margin: auto 0 var(--im-s4); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.im-mk-price-label { font-size: var(--im-fs-sm); font-weight: 700; color: var(--im-text-muted); }
.im-mk-price-value { font-size: 1.6rem; font-weight: 900; color: var(--im-ink); }
.im-mk-price-unit { font-size: var(--im-fs-sm); color: var(--im-text-muted); font-weight: 700; }

/* Wizard shell */
.im-mk-wrap { max-width: 900px; }
.im-mk-back { margin: 0 0 var(--im-s4); font-size: var(--im-fs-sm); }
.im-mk-back a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 700; color: var(--im-text-muted); }
.im-mk-back a:hover { color: var(--im-brand-700); }
.im-mk-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.im-mk-title-card { display: flex; align-items: center; gap: var(--im-s4); margin-bottom: var(--im-s4); }
.im-mk-title-card h1 { margin: 0 0 4px; font-size: 1.5rem; }
.im-mk-title-card p { margin: 0; font-size: var(--im-fs-sm); }

/* Stepper */
.im-mk-stepper-card { margin-bottom: var(--im-s4); padding: var(--im-s4) var(--im-s5); }
/* Steps size to their own label; the CONNECTORS absorb all the leftover space.
   They each grow equally, so every connector comes out the same length and the
   last label lands flush with the right edge - whatever the labels say and
   however many steps a product's config produces.

   The previous rule put flex:1 1 0 on the step instead, which forced every step
   into an equal-width column: labels got pinned to the 25/50/75/100% marks, so
   unequal label widths left connectors of three different lengths, and step 1
   (which has no connector) just trailed dead space after its label. Four steps
   showed it badly; three nearly hid it. Do not reintroduce a width on the step. */
.im-mk-stepper { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.im-mk-step { display: flex; align-items: center; min-width: 0; }
.im-mk-step + .im-mk-step::before { content: ""; flex: 1 1 auto; min-width: 16px; height: 2px; border-radius: 2px; background: var(--im-border); margin: 0 var(--im-s3); }
/* The line up to where they have reached reads as progress, like the dots. */
.im-mk-step.is-done::before, .im-mk-step.is-current::before { background: var(--im-brand-300); }
.im-mk-step-num { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--im-n-100); color: var(--im-text-muted); font-weight: 900; font-size: var(--im-fs-sm); }
.im-mk-step-label { margin-left: var(--im-s2); font-size: var(--im-fs-xs); font-weight: 800; color: var(--im-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.im-mk-step.is-current .im-mk-step-num { background: var(--im-ink); color: var(--im-n-0); }
.im-mk-step.is-current .im-mk-step-label { color: var(--im-ink); }
.im-mk-step.is-done .im-mk-step-num { background: var(--im-brand-500); color: var(--im-btn-ink); }

/* Questions */
.im-mk-panel { margin-bottom: var(--im-s5); }
.im-mk-q { margin-bottom: var(--im-s5); }
.im-mk-q[hidden] { display: none; }
.im-mk-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--im-s3); }
.im-mk-choice { position: relative; display: block; cursor: pointer; }
.im-mk-choice-input { position: absolute; opacity: 0; width: 0; height: 0; }
.im-mk-choice-body { position: relative; display: block; height: 100%; padding: var(--im-s3) var(--im-s4); border: 1px solid var(--im-border-strong); border-radius: var(--im-r-md); background: var(--im-n-0); transition: border-color .15s ease, background .15s ease; }
.im-mk-choice:hover .im-mk-choice-body { border-color: var(--im-brand-500); }
.im-mk-choice-input:checked + .im-mk-choice-body { border-color: var(--im-brand-600); background: var(--im-brand-50); box-shadow: inset 0 0 0 1px var(--im-brand-600); }
/* Keyboard focus must be visible: the real radio is off-screen. */
.im-mk-choice-input:focus-visible + .im-mk-choice-body { outline: 2px solid var(--im-brand-600); outline-offset: 2px; }
.im-mk-choice-title { display: flex; align-items: center; gap: var(--im-s2); font-weight: 800; }
.im-mk-choice-sub { display: block; margin-top: 2px; font-size: var(--im-fs-xs); color: var(--im-text-muted); font-weight: 600; }
.im-mk-choice-ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.im-mk-number { max-width: 140px; }
.im-mk-date { max-width: 220px; }

/* Option badge ("Best value") - absolute so it never reflows the card body. */
.im-mk-choice-badge { position: absolute; top: -9px; right: var(--im-s3); padding: 2px 8px; border-radius: var(--im-r-pill); background: var(--im-brand-500); color: var(--im-btn-ink); font-size: 0.68rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }

/* Per-option detail rows: the limits spelled out, so picking a plan is a real
   comparison rather than a choice between two opaque names. */
.im-mk-choice-details { display: block; margin-top: var(--im-s3); padding-top: var(--im-s3); border-top: 1px dashed var(--im-border-strong); }
.im-mk-choice-detail { display: flex; align-items: baseline; justify-content: space-between; gap: var(--im-s2); font-size: var(--im-fs-xs); line-height: 1.9; }
.im-mk-detail-k { color: var(--im-text-muted); font-weight: 600; }
.im-mk-detail-v { font-weight: 800; color: var(--im-ink); white-space: nowrap; }

/* Question helpers */
.im-mk-optional { font-weight: 700; font-size: var(--im-fs-xs); color: var(--im-text-muted); }
.im-mk-help { margin: 6px 0 0; font-size: var(--im-fs-xs); color: var(--im-text-muted); font-weight: 600; }
.im-mk-step-intro { margin: -4px 0 var(--im-s5); font-size: var(--im-fs-sm); max-width: 68ch; }

/* Toggle */
.im-mk-toggle { display: flex; align-items: center; gap: var(--im-s3); cursor: pointer; }
.im-mk-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.im-mk-toggle-track { position: relative; width: 44px; height: 24px; flex: none; border-radius: var(--im-r-pill); background: var(--im-n-100); border: 1px solid var(--im-border-strong); transition: background .15s ease, border-color .15s ease; }
.im-mk-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--im-n-0); box-shadow: var(--im-shadow-sm); transition: transform .15s ease; }
.im-mk-toggle input:checked + .im-mk-toggle-track { background: var(--im-brand-500); border-color: var(--im-brand-600); }
.im-mk-toggle input:checked + .im-mk-toggle-track .im-mk-toggle-thumb { transform: translateX(20px); }
.im-mk-toggle input:focus-visible + .im-mk-toggle-track { outline: 2px solid var(--im-brand-600); outline-offset: 2px; }
.im-mk-toggle-label { font-weight: 700; font-size: var(--im-fs-sm); }

/* Applicant fields */
.im-mk-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--im-s4); }
.im-mk-fields[hidden] { display: none; }
.im-mk-span2 { grid-column: 1 / -1; }

/* Known applicant: what we already hold on the customer's policy, shown back as a
   summary instead of an empty form they have to retype. */
.im-mk-known { padding: var(--im-s4) var(--im-s5); border: 1px solid var(--im-border); border-radius: var(--im-r-md); background: var(--im-bg-tint); }
.im-mk-known[hidden] { display: none; }
.im-mk-known-note { display: flex; align-items: center; gap: var(--im-s2); margin: 0 0 var(--im-s3); font-size: var(--im-fs-sm); font-weight: 800; color: var(--im-ink); }
.im-mk-known-note svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--im-brand-600); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.im-mk-known-list { margin: 0 0 var(--im-s4); }

.im-mk-actions { display: flex; justify-content: flex-end; gap: var(--im-s3); margin-top: var(--im-s5); }
.im-mk-actions svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Quote result --------------------------------------------------------------
   Built from the carrier's pricing block. The cadence line under the headline
   is load-bearing, not decoration: "$23.00" means one monthly installment on a
   monthly quote and the whole term on an annual one, and nothing else on the
   page distinguishes them. */
.im-mk-quote-hero { padding: var(--im-s5); margin-bottom: var(--im-s4); border-radius: var(--im-r-md); background: linear-gradient(180deg, var(--im-brand-50), var(--im-n-0)); border: 1px solid var(--im-border); text-align: center; }
.im-mk-quote-amount { margin: 0; display: flex; align-items: baseline; justify-content: center; gap: 8px; flex-wrap: wrap; }
.im-mk-quote-value { font-size: 3rem; line-height: 1.05; font-weight: 900; color: var(--im-ink); letter-spacing: -.02em; }
.im-mk-quote-unit { font-size: var(--im-fs-sm); font-weight: 800; color: var(--im-text-muted); }
.im-mk-quote-cadence { margin: var(--im-s2) 0 0; font-size: var(--im-fs-sm); font-weight: 700; color: var(--im-text-muted); }

/* Coverage limits */
.im-mk-limits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--im-s3); margin-bottom: var(--im-s4); }
.im-mk-limit { padding: var(--im-s3) var(--im-s4); border: 1px solid var(--im-border); border-radius: var(--im-r-sm); background: var(--im-bg-tint); text-align: center; }
.im-mk-limit-k { display: block; font-size: var(--im-fs-xs); font-weight: 700; color: var(--im-text-muted); }
.im-mk-limit-v { display: block; margin-top: 2px; font-size: 1.15rem; font-weight: 900; color: var(--im-ink); }

/* Money, broken out. The billing fee gets its own line on purpose. */
.im-mk-lines { border: 1px solid var(--im-border); border-radius: var(--im-r-md); padding: var(--im-s2) var(--im-s4); margin-bottom: var(--im-s4); }
.im-mk-line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--im-s4); padding: 10px 0; border-bottom: 1px solid var(--im-border); font-size: var(--im-fs-sm); }
.im-mk-line:last-child { border-bottom: 0; }
.im-mk-line-k { color: var(--im-text-muted); font-weight: 600; }
.im-mk-line-v { font-weight: 800; color: var(--im-ink); white-space: nowrap; }
.im-mk-line-sum .im-mk-line-k, .im-mk-line-sum .im-mk-line-v { font-weight: 900; color: var(--im-ink); }
.im-mk-line-total { border-top: 2px solid var(--im-border-strong); margin-top: 2px; }
.im-mk-line-total .im-mk-line-k { color: var(--im-ink); font-weight: 900; }
.im-mk-line-total .im-mk-line-v { font-size: 1.1rem; color: var(--im-brand-700); }

.im-mk-quote-meta { margin-bottom: var(--im-s4); }

/* 5d) COMING SOON ----------------------------------------------------------
   The build-phase gate (Application.cfc -> checkComingSoon). Delete with the gate. */
.im-soon { min-height: 100vh; display: grid; place-items: center; padding: var(--im-s5); }
.im-soon-card {
	width: 100%; max-width: 560px; text-align: center;
	background: var(--im-n-0); border: 1px solid var(--im-border);
	border-radius: var(--im-r-lg); padding: var(--im-s7) var(--im-s6);
	box-shadow: var(--im-shadow-md);
}
.im-soon-logo { max-width: 280px; margin: 0 auto var(--im-s5); }
.im-soon-card h1 { margin-bottom: var(--im-s3); }
.im-soon-card p { margin: 0 auto var(--im-s4); max-width: 46ch; }
.im-soon-art { width: 190px; margin: var(--im-s4) auto; }
.im-soon-cta { font-weight: 800; color: var(--im-ink); }
.im-soon-foot { margin-top: var(--im-s5); font-size: var(--im-fs-xs); }

/* 5e) CHECKOUT -------------------------------------------------------------
   The marketplace payment step. Product-agnostic like 5c, and subject to the
   same section-order rule: mobile overrides for these classes go in section 6,
   NOT here, or they are overridden by the desktop rules below them.

   Stripe renders the card fields inside its own iframe, which this stylesheet
   cannot reach - that form is themed from the same tokens by the `appearance`
   object in js/marketplace.js. Change a colour here and change it there. */
.im-pay-testmode {
	display: flex; align-items: flex-start; gap: var(--im-s3);
	background: var(--im-brand-50); border: 1px dashed var(--im-brand-300);
	border-radius: var(--im-r-md); padding: var(--im-s3) var(--im-s4);
	margin-bottom: var(--im-s4); font-size: var(--im-fs-sm);
}
.im-pay-testmode svg { width: 20px; height: 20px; flex: 0 0 auto; stroke: var(--im-brand-700); }

.im-pay-due {
	background: var(--im-bg-tint); border: 1px solid var(--im-border);
	border-radius: var(--im-r-md); padding: var(--im-s4);
	margin-bottom: var(--im-s4);
}
.im-pay-due-amount { display: flex; align-items: baseline; justify-content: space-between; gap: var(--im-s4); }
.im-pay-due-label { font-weight: 800; color: var(--im-text-muted); }
.im-pay-due-value { font-size: 2rem; font-weight: 900; color: var(--im-brand-700); line-height: 1.1; }
.im-pay-due-note { margin: var(--im-s3) 0 0; font-size: var(--im-fs-sm); color: var(--im-text-muted); }
.im-pay-due-quote { margin: var(--im-s2) 0 0; font-size: var(--im-fs-xs); color: var(--im-text-muted); font-weight: 700; }

/* Stripe sizes its own iframe; the min-height stops the panel collapsing and
   then jumping by 300px the moment the element finishes mounting. */
.im-pay-element { min-height: 240px; margin-bottom: var(--im-s3); }

.im-pay-secure {
	display: flex; align-items: flex-start; gap: var(--im-s2);
	margin: 0 0 var(--im-s4); font-size: var(--im-fs-xs); color: var(--im-text-muted);
}
.im-pay-secure svg { width: 18px; height: 18px; flex: 0 0 auto; stroke: var(--im-text-muted); }

/* Card is instant, bank is not. Said once, above the fold of the form, so the
   choice is made with the timing known rather than discovered afterwards. */
.im-pay-timing { margin: 0 0 var(--im-s3); font-size: var(--im-fs-sm); color: var(--im-text-muted); }

.im-pay-done { text-align: center; padding: var(--im-s5) var(--im-s4); }
.im-pay-done-ico { margin: 0 auto var(--im-s4); }
.im-pay-done-ico svg { stroke: var(--im-brand-600); }
/* A submitted bank payment is not a completed one, so it does not get the green
   tick treatment - amber reads as "in progress" rather than "done". */
.im-pay-ico-pending { background: #fdf1dc; }
.im-pay-ico-pending svg { stroke: #a8700f; }
.im-pay-done-title { margin-bottom: var(--im-s3); }
.im-pay-done-body { margin: 0 auto var(--im-s3); max-width: 46ch; font-weight: 800; }
.im-pay-done-next { margin: 0 auto var(--im-s3); max-width: 52ch; font-size: var(--im-fs-sm); color: var(--im-text-muted); }
.im-pay-done-call { margin: 0 auto; max-width: 52ch; font-size: var(--im-fs-sm); color: var(--im-text-muted); }

/* 6) RESPONSIVE ------------------------------------------------------------ */
@media (max-width: 900px) {
	.im-login-wrap { grid-template-columns: 1fr; min-height: 0; }
	/* Single column now, so the lean-toward-the-divider alignment is meaningless -
	   centre both panels again or the content sticks to one edge. */
	.im-login-brand { border-right: 0; border-bottom: 1px solid var(--im-border); padding: var(--im-s6) var(--im-s5); align-items: center; }
	.im-login-features, .im-login-art { display: none; }
	.im-login-form { padding: var(--im-s6) var(--im-s5); align-items: center; }
	.im-grid { grid-template-columns: 1fr; }
	.im-header .im-wrap { height: auto; padding-top: var(--im-s3); padding-bottom: var(--im-s3); flex-wrap: wrap; gap: var(--im-s3); }
	.im-nav ul { gap: var(--im-s4); flex-wrap: wrap; }

	/* Portal (section 5b) */
	.im-portal-grid { grid-template-columns: 1fr; }
	.im-stat-row, .im-stat-row-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.im-card { padding: var(--im-s5); }
	.im-main { min-height: 0; }
	/* The status badge wraps under the policy number rather than crushing it. */
	.im-policy-id { flex-wrap: wrap; }

	/* Marketplace (section 5c) */
	.im-mk-grid { grid-template-columns: 1fr; }
	.im-mk-hero { flex-direction: column; align-items: flex-start; }
	.im-mk-fields { grid-template-columns: 1fr; }
	/* Drop the connector rules and the labels; the numbered dots still track progress
	   and a 4-step stepper cannot fit labels on a phone. */
	.im-mk-stepper { justify-content: flex-start; gap: var(--im-s2); }
	.im-mk-step { flex: 0 0 auto; }
	.im-mk-step + .im-mk-step::before { display: none; }
	.im-mk-step-label { display: none; }
	.im-mk-step.is-current .im-mk-step-label { display: inline; }
	.im-mk-title-card { flex-direction: column; align-items: flex-start; gap: var(--im-s3); }
	.im-mk-actions { flex-direction: column-reverse; }
	.im-mk-actions .im-btn { width: 100%; }
	.im-mk-quote-hero { padding: var(--im-s4); }
	.im-mk-quote-value { font-size: 2.4rem; }

	/* Checkout (section 5e) */
	/* Label above value: 'Due today' and '$26.00' side by side crushes both. */
	.im-pay-due-amount { flex-direction: column; align-items: flex-start; gap: 2px; }
	.im-pay-due-value { font-size: 1.8rem; }
	.im-pay-done { padding: var(--im-s4) 0; }

	/* Coming soon (section 5d) */
	.im-soon-card { padding: var(--im-s6) var(--im-s5); }
	.im-soon-logo { max-width: 220px; }
	.im-soon-art { width: 150px; }
}

@media (max-width: 520px) {
	.im-stat-row, .im-stat-row-4 { grid-template-columns: 1fr; }
	.im-mk-choices { grid-template-columns: 1fr; }
	/* Three limit tiles across a phone crushes "$100,000" onto two lines. */
	.im-mk-limits { grid-template-columns: 1fr; }
	.im-mk-date { max-width: 100%; }
}