/* ============================================================
   lifesettlementgrp.com SHARED 2.0 STYLESHEET
   Loaded on every page by the LSG Common plugin
   (includes/styles.php).  Everything is scoped under .sg except
   the :root design tokens, so it never touches the theme, the
   header (.lsgh) or the footer (.lsgf).

   Holds: design tokens, the .sg base reset, eyebrow labels,
   check circles and the pill buttons.  Page-specific layout
   stays in each page's own <style> block.

   Fonts come from Elementor Custom Fonts (never Google Fonts):
   "Playfair Display VariableFont", "Playfair Display Italic",
   "Inter Tight", "Inter Tight Italic".  Add all four under
   Elementor > Site Settings > Global Fonts so they load on
   every page.
   ============================================================ */
:root{
  /* Homepage Plan palette */
  --light-blue:#6099B9;      /* logo, progress bars, light accents */
  --steel:#2C5577;           /* primary buttons, check marks */
  --steel-accent:#3A6E96;    /* italic headline words, eyebrows, gradient panels */
  --near-black:#111A24;      /* headlines */
  --gray:#4B5563;            /* body copy */
  --pale-blue:#EAF1F6;       /* check circles, progress track */
  --light-gray:#F3F6F9;      /* section backgrounds, hero gradient */
  --divider:#E4E9EF;         /* dividers, card borders */
  --deep-steel:#1F3F5C;      /* footer background */

  /* aliases used by the rules below */
  --brand-900:var(--deep-steel);
  --brand-800:var(--steel);
  --brand-700:var(--steel-accent);
  --brand-600:var(--steel-accent);
  --brand-400:var(--light-blue);
  --brand-100:var(--pale-blue);
  --brand-50:var(--light-gray);
  --ink-900:var(--near-black);
  --ink-700:var(--gray);
  --ink-500:var(--gray);
  --ink-400:#8a96a1;
  --ink-200:#dde3e8;
  --ink-100:var(--divider);
  --bg:#ffffff;
  --bg-soft:var(--light-gray);
  --radius:14px;
  --radius-lg:22px;
  --radius-xl:28px;
  --shadow:0 10px 30px -12px rgba(46,91,124,.18), 0 2px 6px rgba(46,91,124,.06);
  --shadow-lg:0 30px 60px -20px rgba(46,91,124,.25);
  --container:1200px;
  --container-narrow:880px;   /* reading width, used by .container.is-narrow */
  /* Vertical spacing for page bands (owner-approved: tighter than the homepage).
     Pages use var(--space-intro-top / --space-intro-bottom / --space-section). */
  --space-intro-top:44px;
  --space-intro-bottom:36px;
  --space-section:44px;
  --gutter:96px;              /* side padding inside .container (content = 1200 - 2 x 96 = 1008px); steps down on tablet and phone, see below */
  --font-display:"Playfair Display VariableFont", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-heading:"Playfair Display VariableFont", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:"Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-italic:"Playfair Display Italic", Georgia, "Times New Roman", serif;
  --font-body-italic:"Inter Tight Italic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (max-width:960px){
  :root{--space-intro-top:32px;--space-intro-bottom:28px;--space-section:32px;--gutter:40px}
}
@media (max-width:640px){
  :root{--gutter:24px}
}
/* ===== BASE ===== */
.sg,.sg *,.sg *::before,.sg *::after{box-sizing:border-box}
.sg{font-family:var(--font-body);color:var(--ink-900);line-height:1.6;-webkit-font-smoothing:antialiased}
.sg a{color:inherit;text-decoration:none}
.sg img{max-width:100%;height:auto;display:block}
/* The site theme sets li{margin-bottom:.5em} and ul/ol padding globally */
.sg ul,.sg ol{margin:0;padding:0;list-style:none}
.sg li{margin:0}
.sg dl{margin:0;padding:0}
.sg dd{margin:0}
.sg h1,.sg h2{font-family:var(--font-heading);font-weight:500;letter-spacing:-0.02em;color:var(--ink-900);line-height:1.1;margin:0}
.sg h3{font-family:var(--font-display);font-weight:500;letter-spacing:-0.01em;color:var(--ink-900);line-height:1.25;margin:0}
.sg h1 em,.sg h2 em{font-family:var(--font-italic);font-style:italic;font-synthesis:none;color:var(--brand-700);font-weight:500}
.sg p{margin:0;color:var(--ink-700)}
.sg .container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
/* Narrow reading column: add is-narrow to a .container for an 880px column (plus the side padding, --gutter), centered.
   Use it per band (<div class="container is-narrow">) or on every band of a page for the narrow look. */
.sg .container.is-narrow{max-width:calc(var(--container-narrow) + var(--gutter) * 2)}
.sg :focus-visible{outline:3px solid var(--brand-400);outline-offset:3px;border-radius:6px}

/* Eyebrow: short line + letter-spaced text */
.sg .eyebrow-line{display:inline-flex;align-items:center;gap:14px;font-size:.8rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--brand-700)}
.sg .eyebrow-line::before{content:"";flex-shrink:0;width:26px;height:2px;background:var(--brand-700)}
@media (max-width:480px){.sg .eyebrow-line{gap:12px;font-size:.75rem;letter-spacing:.16em}}

/* Inline text link */
.sg .text-link{color:var(--brand-700);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.sg .text-link:hover{color:var(--brand-900)}

/* Check circle used in lists */
.sg .check{flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:var(--brand-100);display:grid;place-items:center}
.sg .check svg{width:12px;height:12px;color:var(--steel)}

/* Buttons (same as the landing page) */
.sg .btn{position:relative;z-index:0;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 26px;border:1px solid transparent;border-radius:999px;font-family:var(--font-body);font-weight:600;font-size:1rem;line-height:1;white-space:nowrap;cursor:pointer;transition:color .25s ease,transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.sg .btn::before{content:"";position:absolute;top:0;bottom:0;left:0;width:0%;background:#000;border-radius:999px;z-index:-1;pointer-events:none;transition:width .4s ease}
.sg .btn-light{background-color:#fff;color:var(--brand-800);box-shadow:var(--shadow)}
.sg .btn-outline-light{background-color:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.sg .btn-primary{background-color:var(--steel);color:#fff;box-shadow:var(--shadow)}
.sg .btn-ghost{background-color:#fff;color:var(--ink-900);border-color:var(--ink-200)}
.sg .btn:hover,.sg .btn:focus-visible{color:#fff;border-color:#000;transform:translateX(6px);box-shadow:var(--shadow-lg)}
.sg .btn:hover::before,.sg .btn:focus-visible::before{width:100%}
.sg .btn[disabled]{opacity:.7;cursor:wait;transform:none}
.sg .btn svg{width:16px;height:16px}
@media (prefers-reduced-motion:reduce){.sg .btn,.sg .btn::before{transition:none}.sg .btn:hover{transform:none}}

/* ===== PAGE BANDS (add these classes to a <section>) =====
   <section class="sg-intro">               page title band (gradient + bottom divider)
   <section class="sg-section">             white content band
   <section class="sg-section is-tint">     light-gray content band with top/bottom dividers
   <section class="sg-cta"> + .sg-cta-panel closing call-to-action panel
   Spacing comes from --space-intro-top / --space-intro-bottom / --space-section above.
   Put .container inside each band. Use inside a .sg wrapper like everything else. */
.sg .sg-intro{padding:var(--space-intro-top) 0 var(--space-intro-bottom);background:radial-gradient(1000px 420px at 85% -10%,rgba(46,91,124,.10),transparent 60%),linear-gradient(135deg,var(--brand-50) 0%,#fff 55%);border-bottom:1px solid var(--ink-100)}
.sg .sg-intro h1{font-size:clamp(2.6rem,5.2vw,4.2rem);margin:22px 0 20px}
.sg .sg-intro-sub{max-width:720px;font-size:1.15rem;line-height:1.7;color:var(--ink-500)}

.sg .sg-section{padding:var(--space-section) 0;background:#fff}
.sg .sg-section.is-tint{background:var(--bg-soft);border-top:1px solid var(--ink-100);border-bottom:1px solid var(--ink-100)}

.sg .sg-cta{padding:12px 0 var(--space-section);background:#fff}
.sg .sg-cta-panel{padding:64px 56px;border-radius:var(--radius-xl);background:linear-gradient(135deg,var(--brand-600) 0%,var(--brand-800) 100%);box-shadow:var(--shadow-lg);text-align:center}
.sg .sg-cta-panel .eyebrow-line{color:#fff;opacity:.85}
.sg .sg-cta-panel .eyebrow-line::before{background:#fff}
.sg .sg-cta-panel h2{color:#fff;font-size:clamp(1.9rem,3.4vw,2.7rem);margin:18px 0 16px}
.sg .sg-cta-panel h2 em{color:#fff}
.sg .sg-cta-panel p{max-width:680px;margin:0 auto;font-size:1.08rem;line-height:1.75;color:rgba(255,255,255,.88)}
.sg .sg-cta-panel p a{color:#fff;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.sg .sg-cta-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:32px}
@media (max-width:640px){.sg .sg-cta-panel{padding:44px 24px;border-radius:var(--radius-lg)}}

/* ===== IMAGES =====
   <img class="sg-img" ...>   plain infographic / photo: full width of the container (max 1024px), square corners, soft shadow.
   <div class="sg-img-box" id="..."><img ...></div>   same look, with a shimmer skeleton until the image loads
   (the page script adds .is-loaded / .is-failed).  Set the image's proportions with --img-ratio, e.g.
   .sg #myBanner{--img-ratio:1198/624}.  Space below the image is 40px unless it is the last item in its parent. */
.sg .sg-img{display:block;width:100%;max-width:800px;height:auto;margin:0 auto 40px;box-shadow:var(--shadow-lg)}
.sg .sg-img:last-child{margin-bottom:0}
.sg .sg-img-box{position:relative;width:100%;max-width:1024px;aspect-ratio:var(--img-ratio,1198/624);margin:0 auto 40px;overflow:hidden;background:linear-gradient(90deg,#E3E9EF 25%,#F4F7FA 37%,#E3E9EF 63%);background-size:400% 100%;animation:sg-shimmer 1.4s ease infinite;box-shadow:var(--shadow-lg)}
.sg .sg-img-box img{position:absolute;inset:0;width:100%;height:100%;margin:0;border-radius:0;box-shadow:none;object-fit:contain;opacity:0;transition:opacity .45s ease}
.sg .sg-img-box.is-loaded{animation:none;background:var(--brand-50)}
.sg .sg-img-box.is-loaded img{opacity:1}
.sg .sg-img-box.is-failed{animation:none}
@keyframes sg-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
@media (max-width:640px){.sg .sg-img,.sg .sg-img-box{margin-bottom:28px}.sg .sg-img:last-child{margin-bottom:0}}
@media (prefers-reduced-motion:reduce){.sg .sg-img-box{animation:none}.sg .sg-img-box img{transition:none}}