/* InsurEco artifact kit · landing.
 *
 * For the editorial page: a product or program page, a launch page, or a
 * HypeSite (a public site made from portal artifact pages). Layers on
 * tokens.css and iec-ui.css, like every kit:
 *
 *   <link rel="stylesheet" href="https://brand.insureco.io/tokens.css">
 *   <link rel="stylesheet" href="https://brand.insureco.io/iec-ui.css">
 *   <link rel="stylesheet" href="https://brand.insureco.io/kits/landing.css">
 *
 * Boldness lives in one place. The hero carries the page's one serif phrase
 * and the only gradient (the 3px rule under it); every band after it is
 * quiet: hairlines, muted copy, one filled button per view. No hex in this
 * file: every value is a token, so data-theme and data-brand restyle it.
 *
 *   <div class="iec-landing">
 *     <nav class="iec-landing-nav"> ... </nav>
 *     <header class="iec-band iec-hero"> <div class="iec-band__inner iec-hero__grid"> ... </div> </header>
 *     <section class="iec-band"> <div class="iec-band__inner"> .iec-section-head, .iec-features ... </div> </section>
 *     <section class="iec-band iec-band--wash"> <div class="iec-band__inner iec-cta"> ... </div> </section>
 *     <footer class="iec-landing-footer"> ... </footer>
 *   </div>
 */

/* ── Page ────────────────────────────────────────────────────────────── */
html { background: var(--bg); color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
*, *::before, *::after { box-sizing: border-box; }

.iec-landing { overflow-x: clip; }
.iec-landing h1, .iec-landing h2, .iec-landing h3 { font-family: var(--font-sans); color: var(--text); text-wrap: balance; }
.iec-landing p { margin: 0 0 var(--space-4); }
.iec-landing a { color: var(--brand-accent-ink); text-underline-offset: 3px; }
.iec-landing a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.iec-landing img, .iec-landing svg { max-width: 100%; }
.iec-landing .iec-serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; }

/* Buttons: iec-btn from iec-ui.css. Inside a landing page the primary is the
 * brand's own fill, so a HypeSite on data-brand="policypay" gets its colour.
 * For InsurEco that is navy, the same as everywhere else. */
.iec-landing .iec-btn { text-decoration: none; }
.iec-landing .iec-btn--primary { background: var(--brand-accent); border-color: var(--brand-accent); color: var(--on-brand-accent); }
.iec-landing .iec-btn--primary:hover { background: var(--brand-accent); border-color: var(--brand-accent-ink); color: var(--on-brand-accent); box-shadow: 0 0 0 3px var(--brand-wash); }
.iec-btn--lg { min-height: 44px; padding: var(--space-3) var(--space-6); font-size: 13px; justify-content: center; }

/* ── Bands: full-bleed rows, each with a centred inner column ────────── */
.iec-band { padding-block: clamp(var(--space-16), 9vw, var(--space-24)); }
.iec-band--raised { background: var(--bg-raised); border-block: 1px solid var(--border); }
.iec-band--wash { background: var(--brand-wash); border-block: 1px solid var(--border); }
.iec-band--tight { padding-block: var(--space-8); border-bottom: 1px solid var(--border); }
.iec-band__inner {
  width: 100%; max-width: calc(1200px + 2 * clamp(var(--space-4), 4vw, var(--space-10)));
  margin-inline: auto; padding-inline: clamp(var(--space-4), 4vw, var(--space-10));
}

/* ── Nav: the mark, a few links, one button ──────────────────────────── */
.iec-landing-nav { border-bottom: 1px solid var(--border); }
.iec-landing-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 64px; }
.iec-landing-nav__mark { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--text); text-decoration: none; font-weight: 500; font-size: 17px; }
.iec-landing .iec-landing-nav__mark { color: var(--text); }
.iec-landing-nav__mark img { height: 28px; width: auto; display: block; }
/* One logo per theme. Scoped under .iec-landing so the swap outranks
   `.iec-landing-nav__mark img { display: block }` (0,1,1); the unscoped pair
   keeps the classes working outside the kit's root. */
.iec-logo--on-light { display: none; }
[data-theme="light"] .iec-logo--on-light { display: block; }
[data-theme="light"] .iec-logo--on-dark { display: none; }
.iec-landing .iec-logo--on-light { display: none; }
[data-theme="light"] .iec-landing .iec-logo--on-light { display: block; }
[data-theme="light"] .iec-landing .iec-logo--on-dark { display: none; }
.iec-landing-nav__links { display: flex; align-items: center; gap: var(--space-6); margin: 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: 12px; letter-spacing: .03em; }
.iec-landing .iec-landing-nav__links a { color: var(--text-muted); text-decoration: none; }
.iec-landing .iec-landing-nav__links a:hover { color: var(--text); }
@media (max-width: 720px) { .iec-landing-nav__links li:not(:last-child) { display: none; } }

/* ── Hero: sized to its content, never the viewport ──────────────────── */
.iec-hero { position: relative; padding-block: clamp(var(--space-16), 10vw, 128px) clamp(var(--space-10), 8vw, var(--space-24)); }
/* The page's only gradient: a 3px rule under the hero, edge to edge. */
.iec-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--brand-gradient); }
.iec-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); align-items: center; }
.iec-hero__text { min-width: 0; }
.iec-hero h1 {
  margin: var(--space-4) 0 var(--space-6); font-weight: 300; line-height: 1.06; letter-spacing: -.015em;
  font-size: clamp(38px, 4.4vw + 16px, 76px); max-width: 16ch;
}
.iec-hero__lede { font-size: clamp(17px, .5vw + 15px, 20px); line-height: 1.6; color: var(--text-muted); max-width: 54ch; }
.iec-landing .iec-hero__lede { margin-bottom: var(--space-8); }
.iec-hero__actions, .iec-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.iec-hero__note { margin-top: var(--space-4); font-family: var(--font-mono); font-size: 12px; letter-spacing: .03em; color: var(--text-muted); }
.iec-hero__visual { min-width: 0; }
.iec-hero__visual .iec-diagram { margin: 0; }
@media (min-width: 960px) {
  .iec-hero__grid:has(.iec-hero__visual) { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--space-16); }
}

/* ── Proof strip: short facts or logos, wrapping on phones ───────────── */
.iec-proof { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6) var(--space-10); margin: 0; padding: 0; list-style: none; }
.iec-proof__item { display: grid; gap: var(--space-1); min-width: 0; }
.iec-proof__value { font-weight: 300; font-size: clamp(22px, 1.2vw + 16px, 28px); line-height: 1.15; color: var(--text); font-variant-numeric: tabular-nums; }
.iec-proof__label { font-family: var(--font-mono); font-size: 11.2px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.iec-proof__logo { display: block; height: 28px; width: auto; opacity: .8; }
@media (max-width: 560px) { .iec-proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Section head: eyebrow, h2, one intro paragraph ──────────────────── */
.iec-section-head { max-width: 720px; margin-bottom: clamp(var(--space-8), 5vw, var(--space-16)); }
.iec-section-head--center { margin-inline: auto; text-align: center; }
.iec-section-head h2 { margin: var(--space-3) 0 var(--space-4); font-weight: 300; line-height: 1.15; letter-spacing: -.01em; font-size: clamp(28px, 2vw + 18px, 46px); }
.iec-section-head p { font-size: 17px; color: var(--text-muted); }
.iec-landing .iec-section-head > :last-child { margin-bottom: 0; }

/* ── Features: a grid of hairline-topped items, not boxed cards ──────── */
.iec-features { display: grid; gap: var(--space-10) var(--space-8); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin: 0; padding: 0; list-style: none; }
.iec-feature { display: grid; gap: var(--space-3); align-content: start; padding-top: var(--space-6); border-top: 1px solid var(--border-strong); min-width: 0; }
.iec-feature__icon { display: flex; margin-bottom: var(--space-2); color: var(--brand-accent-ink); }
.iec-feature__icon .iec-el { width: 56px; height: 56px; }
.iec-feature__icon svg { width: 32px; height: 32px; }
.iec-feature__title { margin: 0; font-size: 19px; font-weight: 500; line-height: 1.3; }
.iec-feature__body { color: var(--text-muted); font-size: 15.2px; }
.iec-landing .iec-feature__body { margin: 0; }

/* ── Feature row: text beside a visual, alternating with --flip ──────── */
.iec-feature-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.iec-feature-row + .iec-feature-row { margin-top: clamp(var(--space-16), 9vw, var(--space-24)); }
.iec-feature-row__text { min-width: 0; max-width: 540px; }
.iec-feature-row__text h3 { margin: var(--space-3) 0 var(--space-4); font-weight: 300; font-size: clamp(26px, 1.4vw + 18px, 36px); line-height: 1.2; }
.iec-feature-row__text p { color: var(--text-muted); }
.iec-feature-row__text ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-2); color: var(--text-muted); }
.iec-feature-row__text li::marker { color: var(--brand-accent-ink); }
.iec-feature-row__visual { min-width: 0; }
.iec-feature-row__visual > * { margin: 0; }
@media (min-width: 900px) {
  .iec-feature-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); }
  .iec-feature-row--flip .iec-feature-row__text { order: 2; }
}

/* ── Quote: set in light sans, because the hero owns the serif ───────── */
.iec-landing .iec-pullquote { max-width: 880px; margin: 0 auto; }
.iec-landing .iec-pullquote blockquote { font-family: var(--font-sans); font-style: normal; font-weight: 300; font-size: clamp(22px, 1.6vw + 16px, 34px); line-height: 1.35; }

/* ── FAQ: iec-faq / iec-details from iec-ui.css, held to a measure ───── */
.iec-landing .iec-faq { max-width: 820px; margin-bottom: 0; }
.iec-landing .iec-details > summary { font-size: 17px; font-weight: 500; min-height: 44px; }

/* ── CTA: the closing ask ────────────────────────────────────────────── */
.iec-cta { display: grid; justify-items: center; text-align: center; }
.iec-cta h2 { margin: var(--space-3) 0 var(--space-4); font-weight: 300; line-height: 1.15; font-size: clamp(30px, 2.4vw + 18px, 52px); max-width: 20ch; }
.iec-cta p { font-size: 17px; color: var(--text-muted); max-width: 52ch; }
.iec-landing .iec-cta p { margin-bottom: var(--space-8); }
.iec-cta__actions { justify-content: center; }

/* ── Footer: small, muted, mono ──────────────────────────────────────── */
.iec-landing-footer { border-top: 1px solid var(--border); padding-block: var(--space-8); font-family: var(--font-mono); font-size: 12px; letter-spacing: .03em; color: var(--text-muted); }
.iec-landing-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-8); }
.iec-landing-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: 0; padding: 0; list-style: none; }
.iec-landing .iec-landing-footer a { color: var(--text-muted); text-decoration: none; }
.iec-landing .iec-landing-footer a:hover { color: var(--text); }
.iec-landing-footer__legal { margin: 0; color: var(--text-muted); }

/* ── Motion: a small rise on load, from a visible resting state ──────── */
@keyframes iec-landing-rise { from { transform: translateY(12px); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .iec-hero__text, .iec-hero__visual { animation: iec-landing-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .iec-hero__visual { animation-delay: .08s; }
}

@media print {
  .iec-hero::after { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .iec-landing-nav__links, .iec-hero__actions, .iec-cta__actions { display: none; }
}