/* Life Insurance landing page — local unpublished build.
   Reuses shared style.css tokens/typography/header/footer. Palette:
   navy #141D2E, ivory #F6F3ED, stone #EAE6DD, sage text #526459, brass #B09568, rule #D9D5CB.
   Desktop 1440 content 1280 (page margins 88), mobile 390 gutters 24. Page-scoped
   (.life-insurance) so no other route is affected. Subtle 1px rules; no chunky
   shadows or rounded SaaS cards. */

.life-insurance{background:var(--ivory);--li-sage:#526459;--li-rule:#d9d5cb}

/* ---- layout container: 24 mobile / 48 tablet / 88 desktop, content capped at 1280 ---- */
.life-insurance .li-section{padding-block:clamp(52px,6.5vw,88px);padding-inline:24px}
.life-insurance .li-inner{width:100%;max-width:1280px;margin-inline:auto}
@media(min-width:768px){.life-insurance .li-section{padding-inline:48px}}
@media(min-width:1200px){.life-insurance .li-section{padding-inline:88px}}

/* ---- shared type within the page ---- */
.life-insurance .eyebrow{margin-bottom:16px;font-weight:600}
.life-insurance .li-h2{font-size:clamp(39px,3.8vw,54px);line-height:1.1;margin:0 0 22px}
.life-insurance .li-intro{font-size:17px;line-height:1.55;max-width:850px;margin:0 0 20px}
.life-insurance .li-deck{font-size:clamp(17px,1.35vw,19px);line-height:1.55;color:var(--navy)}
.life-insurance .li-rule{border:0;border-top:1px solid var(--li-rule);margin:22px 0}
.life-insurance .li-subhead{font-size:clamp(20px,1.7vw,24px);line-height:1.2;margin:0 0 8px}
.life-insurance .text-link{font-size:13.5px;font-weight:600}
.life-insurance .li-quiet-links{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:20px}
.life-insurance .li-quiet-links .text-link{font-size:13.5px;font-weight:600}

/* ---- 01 hero: ivory split, copy left 46% / image right 54%, gap up to 48 ---- */
.life-insurance .li-hero{background:var(--ivory);padding-block:clamp(40px,5.5vw,80px)}
.life-insurance .li-hero-grid{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:clamp(32px,4vw,48px);align-items:start}
.life-insurance .li-hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px;min-width:0}
.life-insurance .li-hero-copy>*{margin:0}
.life-insurance .li-hero h1{font-size:clamp(48px,5.3vw,76px);line-height:1.08;margin:0;max-width:16ch}
.life-insurance .li-hero .li-deck{max-width:48ch}
.life-insurance .li-hero-copy .button{max-width:100%;text-align:left}
.life-insurance .li-hero-figure{margin:0;min-width:0}
.life-insurance .li-hero-figure img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center;background:var(--stone)}

/* ---- 02 needs: stone, five aligned linked rows (number 44 / title 300 / body flex) ---- */
.life-insurance .li-needs{background:var(--stone)}
.life-insurance .li-need-rows{border-top:1px solid var(--li-rule);margin-top:26px}
.life-insurance .li-need-row{display:grid;grid-template-columns:44px 300px minmax(0,1fr) auto;gap:24px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--li-rule);color:var(--navy);text-decoration:none;transition:background .2s}
.life-insurance .li-need-row:hover,.life-insurance .li-need-row:focus-visible{background:rgba(20,29,46,.035)}
.life-insurance .li-need-row:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.life-insurance .li-need-num{font-size:12px;letter-spacing:.08em;color:var(--li-sage)}
.life-insurance .li-need-title{font-family:'Libre Caslon Display',Georgia,serif;font-size:clamp(22px,2vw,28px);line-height:1.2}
.life-insurance .li-need-body{font-size:16px;line-height:1.55;color:var(--ink)}
.life-insurance .li-need-arrow{color:var(--brass);font-size:18px;line-height:1}

/* ---- 03a/03b editorials: ivory home (photo left / copy right), navy family (copy left / photo right) ---- */
.life-insurance .li-editorial{background:var(--ivory);padding-block:clamp(52px,6vw,88px)}
.life-insurance .li-editorial-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4.5vw,64px);align-items:start}
.life-insurance .li-editorial-figure{margin:0;min-width:0}
.life-insurance .li-editorial-figure img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center;background:var(--stone)}
.life-insurance .li-editorial-copy{min-width:0}
.life-insurance .li-editorial-copy .li-h2{margin:0 0 18px}
.life-insurance .li-lead{font-size:17px;line-height:1.55;margin:0}
.life-insurance .li-editorial-copy p{font-size:16px;line-height:1.55;margin:0}

/* navy family editorial: ivory text on navy, softened rules, photo echoed on navy */
.life-insurance .li-family-editorial{background:var(--navy);color:var(--ivory)}
.life-insurance .li-family-editorial .li-rule{border-top-color:rgba(217,213,203,.34)}
.life-insurance .li-family-editorial .li-subhead{color:var(--ivory)}
.life-insurance .li-family-editorial .li-lead,.life-insurance .li-family-editorial .li-editorial-copy p{color:#e8e5dd}
.life-insurance .li-family-editorial .text-link{color:var(--ivory)}

/* ---- 04 coverage: ivory, two equal stone panels ---- */
.life-insurance .li-coverage{background:var(--ivory)}
.life-insurance .li-coverage-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,28px);margin-top:26px}
.life-insurance .li-coverage-panel{background:var(--stone);border-top:2px solid var(--brass);padding:clamp(26px,3vw,44px)}
.life-insurance .li-coverage-panel h3{font-size:clamp(26px,2.4vw,34px);line-height:1.1;margin:0 0 14px}
.life-insurance .li-coverage-panel p{font-size:16px;line-height:1.6;margin:0 0 16px;color:var(--ink)}
.life-insurance .li-note{font-size:14px;line-height:1.7;margin:24px 0 0;color:var(--ink)}
.life-insurance .li-note .text-link{font-size:13.5px}

/* ---- 05 steps: stone, three aligned steps ---- */
.life-insurance .li-steps{background:var(--stone)}
.life-insurance .li-steps-list{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,45px)}
.life-insurance .li-steps-list li{border-top:1px solid var(--li-rule);padding-top:22px}
.life-insurance .li-step-num{font-size:12px;letter-spacing:.1em;color:var(--li-sage)}
.life-insurance .li-steps-list h3{font-size:clamp(22px,1.9vw,28px);line-height:1.15;margin:12px 0 10px}
.life-insurance .li-steps-list p{font-size:16px;line-height:1.55;margin:0;color:var(--ink)}

/* ---- 06 FAQ: ivory, narrow centered column (max 850) ---- */
.life-insurance .li-faq{background:var(--ivory)}
.life-insurance .li-faq-inner{max-width:850px;margin-inline:auto}
.life-insurance .li-faq-list{margin-top:8px}
.life-insurance .li-faq-item{border-top:1px solid #c9c4b8}
.life-insurance .li-faq-item:last-child{border-bottom:1px solid #c9c4b8}
.life-insurance .li-faq-item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:22px 0;font-family:'Libre Caslon Display',Georgia,serif;font-size:clamp(22px,2vw,28px);line-height:1.25}
.life-insurance .li-faq-item summary::-webkit-details-marker{display:none}
.life-insurance .li-faq-item summary:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.life-insurance .li-plus{font-family:'Libre Franklin',Arial,sans-serif;font-size:22px;line-height:1;color:var(--li-sage);transition:transform .2s}
.life-insurance .li-faq-item[open] .li-plus{transform:rotate(45deg)}
.life-insurance .li-faq-item p{font-size:16px;line-height:1.7;max-width:760px;margin:0 0 24px;padding-right:24px}
.life-insurance .li-faq-item p a{text-decoration:underline;text-underline-offset:3px}

/* ---- 07 closing CTA: stone ---- */
.life-insurance .li-close{background:var(--stone);padding-block:clamp(56px,6.5vw,88px)}
.life-insurance .li-close-title{font-size:clamp(39px,4vw,54px);line-height:1.08;margin:0 0 22px;max-width:20ch}
.life-insurance .li-close-lead{font-size:17px;line-height:1.55;max-width:750px;margin:0 0 28px}
.life-insurance .li-actions{display:flex;flex-wrap:wrap;align-items:center;gap:24px}
.life-insurance .li-actions .button{max-width:100%;text-align:left}
.life-insurance .li-fine{font-size:12px;line-height:1.8;color:var(--ink);margin-top:26px}

/* ---- footer: existing WHITE reversed CLG mark (same asset as the other footers) ---- */
.life-insurance footer .footer-brand{display:block;width:52px;margin-bottom:22px}
.life-insurance footer .footer-brand img{width:100%;height:auto;object-fit:contain}

/* ---- responsive: stack the splits before the desktop layout gets cramped.
   Both editorials put the photograph FIRST on narrow screens (per Figma). ---- */
@media(max-width:900px){
  .life-insurance .li-hero-grid{grid-template-columns:1fr;gap:28px;align-items:start}
  .life-insurance .li-hero h1{max-width:none}
  .life-insurance .li-editorial-grid{grid-template-columns:1fr;gap:30px}
  .life-insurance .li-editorial-grid .li-editorial-figure{order:-1}
}
@media(max-width:760px){
  .life-insurance .li-section{padding-block:52px}
  .life-insurance .li-hero{padding-block:40px}
  .life-insurance .li-hero h1{font-size:clamp(48px,11.5vw,48px)}
  .life-insurance .li-h2{font-size:39px}
  .life-insurance .li-hero-figure img,.life-insurance .li-editorial-figure img{aspect-ratio:3/2}
  .life-insurance .li-need-row{grid-template-columns:28px minmax(0,1fr);gap:6px 14px;padding:20px 0;align-items:start}
  .life-insurance .li-need-num{grid-column:1;grid-row:1}
  .life-insurance .li-need-title{grid-column:2;grid-row:1}
  .life-insurance .li-need-body{grid-column:2;grid-row:2}
  .life-insurance .li-need-arrow{display:none}
  .life-insurance .li-coverage-grid{grid-template-columns:1fr;gap:16px}
  .life-insurance .li-steps-list{grid-template-columns:1fr;gap:20px}
  .life-insurance .li-actions{flex-direction:column;align-items:stretch}
  .life-insurance .li-actions .button{justify-content:space-between}
}

/* ---- shared header mobile menu (same pattern as the other CLG pages, scoped here).
   Desktop keeps the inline horizontal nav; at <=760px the nav folds into a native
   details/summary Menu control (keyboard-operable; Escape/focus handled in
   life-insurance.js). ---- */
.life-insurance .cta-mini{display:none}
.life-insurance .menu-drawer{display:none}
@media(max-width:760px){
  .life-insurance .menu-drawer{display:block;position:relative;margin-left:auto}
  .life-insurance .menu-summary{display:flex;align-items:center;min-height:44px;padding:0 13px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#141d2e;background:rgba(246,243,237,.6);border:1px solid rgba(20,29,46,.35);border-radius:3px;cursor:pointer;list-style:none}
  .life-insurance .menu-summary::-webkit-details-marker{display:none}
  .life-insurance .menu-summary::after{content:"\25be";margin-left:8px;font-size:9px}
  .life-insurance .menu-drawer[open] .menu-summary::after{content:"\25b4"}
  .life-insurance .menu-drawer[open] .menu-summary{background:#f6f3ed}
  .life-insurance .menu-panel{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;z-index:60;background:#f6f3ed;border:1px solid #d9d5cb;box-shadow:0 18px 40px rgba(20,29,46,.18)}
  .life-insurance .menu-panel nav{display:flex!important;flex-direction:column;gap:0}
  .life-insurance .menu-panel a{display:flex;align-items:center;min-height:48px;padding:0 20px;font-size:12px;color:#141d2e;text-decoration:none;border-bottom:1px solid #e5e0d6}
  .life-insurance .menu-panel a:last-child{border-bottom:0;font-weight:600}
  .life-insurance .menu-panel a:hover,.life-insurance .menu-panel a:focus-visible{background:#eae6dd}
}
/* Narrow phones: shorten the Blueprint CTA so brand, CTA and Menu never collide. */
@media(max-width:420px){
  .life-insurance .cta-full{display:none}
  .life-insurance .cta-mini{display:inline}
}
@media(max-width:355px){
  .life-insurance .menu-summary{padding-inline:11px}
}