/*
 * Legacy Lights page (legacywealthadvisor.org/legacylights).
 * Built from the Legacy Lights design; the Legacy Wealth design tokens are
 * scoped to .ll-page so the site's own header and footer keep their styles.
 * Colors that follow the "Background color" page setting are the --ll-*
 * properties, set on .ll-page by legacy-lights.js.
 */

/* ---- Design tokens (Legacy Wealth design system) ---- */
.ll-page{
  /* ---- Brand primitives (Brand Book p.10) ---- */
  --lw-sapphire:#185ebc;   /* Sapphire Blue: headlines, logos, buttons, key CTAs */
  --lw-havelock:#609ae9;   /* Havelock Blue: brightest point of the brand gradient */
  --lw-white:#ffffff;      /* Clean space, contrast, modern presentation */
  --lw-grey-darkest:#2e2e2e; /* Body text, long-form readability */
  /* ---- Blue ramp (derived from Sapphire/Havelock; do not introduce other hues) ---- */
  --blue-950:#0a2d5e;
  --blue-900:#0d3a78;
  --blue-800:#14509f;
  --blue-700:#185ebc;
  --blue-600:#2e78d6;
  --blue-500:#609ae9;
  --blue-400:#8ab6f0;
  --blue-300:#a3c6f3;
  --blue-200:#c6ddf8;
  --blue-100:#dce9fa;
  --blue-50:#f2f7fd;
  /* ---- Neutral ramp (anchored on Darkest Grey) ---- */
  --grey-900:#2e2e2e;
  --grey-800:#464646;
  --grey-700:#5e5e5e;
  --grey-600:#7a7a7a;
  --grey-500:#9a9a9a;
  --grey-400:#bdbdbd;
  --grey-300:#d8d8d8;
  --grey-200:#e8e8e8;
  --grey-100:#f2f2f2;
  --grey-50:#f8f8f8;
  /* ---- Gradient (the only approved gradient: Sapphire darkest → Havelock brightest) ---- */
  --gradient-brand:linear-gradient(135deg,#185ebc 0%,#609ae9 100%); /* @kind color */
  --gradient-brand-deep:linear-gradient(135deg,#0d3a78 0%,#185ebc 60%,#3d84dd 100%); /* @kind color */
  --gradient-brand-soft:linear-gradient(160deg,#f2f7fd 0%,#dce9fa 100%); /* @kind color */
  /* Legibility scrim for text over photography */
  --gradient-scrim:linear-gradient(180deg,rgba(13,58,120,0) 0%,rgba(13,58,120,.55) 55%,rgba(13,58,120,.82) 100%); /* @kind color */
  --gradient-scrim-left:linear-gradient(90deg,rgba(13,58,120,.86) 0%,rgba(13,58,120,.45) 55%,rgba(13,58,120,0) 100%); /* @kind color */
  /* ---- Semantic: text ---- */
  --text-body:var(--grey-900);
  --text-heading:var(--grey-900);
  --text-heading-brand:var(--lw-sapphire);
  --text-muted:var(--grey-600);
  --text-subtle:var(--grey-500);
  --text-inverse:var(--lw-white);
  --text-inverse-muted:rgba(255,255,255,.76);
  --text-link:var(--lw-sapphire);
  --text-link-hover:var(--blue-900);
  /* ---- Semantic: surfaces ---- */
  --surface-page:var(--lw-white);
  --surface-alt:var(--grey-50);
  --surface-tint:var(--blue-50);
  --surface-card:var(--lw-white);
  --surface-inverse:var(--blue-900);
  --surface-brand:var(--lw-sapphire);
  --surface-overlay:rgba(13,58,120,.55);
  --surface-glass:rgba(255,255,255,.08);
  /* ---- Semantic: lines ---- */
  --border-subtle:var(--grey-200);
  --border-default:var(--grey-300);
  --border-strong:var(--grey-900);
  --border-brand:var(--lw-sapphire);
  --border-inverse:rgba(255,255,255,.28);
  --focus-ring:var(--blue-500);
  /* ---- Semantic: interactive ---- */
  --action-primary:var(--lw-sapphire);
  --action-primary-hover:var(--blue-800);
  --action-primary-active:var(--blue-900);
  --action-secondary:var(--grey-900);
  --action-disabled:var(--grey-300);
  --action-on-primary:var(--lw-white);
  /* ---- Status (INTENTIONAL ADDITION: not defined in the Brand Book; see readme) ---- */
  --status-info:var(--lw-sapphire);
  --status-success:#1f7a4d;
  --status-warning:#b87a10;
  --status-error:#a32020;
  --status-info-bg:var(--blue-50);
  --status-success-bg:#eaf5ef;
  --status-warning-bg:#fbf3e2;
  --status-error-bg:#f8ecec;
}
  .ll-page{
  /* Families */
  --font-display:"Legitima",Georgia,"Times New Roman",serif;
  --font-sans:"Poppins",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* Semantic families */
  --font-headline:var(--font-display);
  --font-body:var(--font-sans);
  --font-ui:var(--font-sans);
  --font-eyebrow:var(--font-sans);
  /* Weights (Brand Book: black / bold / regular / light) */
  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-black:900;
  /* Size scale */
  --text-2xs:11px;
  --text-xs:12px;
  --text-sm:14px;
  --text-base:16px;
  --text-md:18px;
  --text-lg:20px;
  --text-xl:24px;
  --text-2xl:30px;
  --text-3xl:36px;
  --text-4xl:48px;
  --text-5xl:60px;
  --text-6xl:72px;
  --text-7xl:96px;
  /* Line heights */
  --leading-tight:1.05;
  --leading-snug:1.18;
  --leading-heading:1.24;
  --leading-normal:1.5;
  --leading-relaxed:1.7;
  /* Tracking */
  --tracking-tighter:-0.02em;
  --tracking-tight:-0.01em;
  --tracking-normal:0;
  --tracking-wide:0.04em;
  --tracking-wider:0.09em;
  --tracking-widest:0.18em;
  /* Composed roles */
  --type-display:var(--weight-regular) var(--text-6xl)/var(--leading-tight) var(--font-display);
  --type-h1:var(--weight-regular) var(--text-5xl)/var(--leading-snug) var(--font-display);
  --type-h2:var(--weight-regular) var(--text-4xl)/var(--leading-heading) var(--font-display);
  --type-h3:var(--weight-semibold) var(--text-xl)/var(--leading-heading) var(--font-sans);
  --type-h4:var(--weight-semibold) var(--text-md)/var(--leading-heading) var(--font-sans);
  --type-lead:var(--weight-light) var(--text-lg)/var(--leading-relaxed) var(--font-sans);
  --type-body:var(--weight-regular) var(--text-base)/var(--leading-relaxed) var(--font-sans);
  --type-small:var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-sans);
  --type-caption:var(--weight-regular) var(--text-xs)/var(--leading-normal) var(--font-sans);
  --type-button:var(--weight-semibold) var(--text-sm)/1 var(--font-sans);
  --type-nav:var(--weight-medium) var(--text-sm)/1 var(--font-sans);
  --type-eyebrow:var(--weight-semibold) var(--text-xs)/1.2 var(--font-sans);
  --type-legal:var(--weight-light) var(--text-2xs)/1.6 var(--font-sans);
  /* Logotype / plaque lettering: serif caps, generously spaced */
  --type-logotype:var(--weight-regular) var(--text-3xl)/0.98 var(--font-display);
}
  .ll-page{
  --space-0:0;
  --space-1:2px;
  --space-2:4px;
  --space-3:8px;
  --space-4:12px;
  --space-5:16px;
  --space-6:20px;
  --space-7:24px;
  --space-8:32px;
  --space-9:40px;
  --space-10:48px;
  --space-11:64px;
  --space-12:80px;
  --space-13:96px;
  --space-14:128px;
  /* Semantic rhythm */
  --gap-inline:var(--space-3);
  --gap-stack:var(--space-5);
  --gap-card:var(--space-7);
  --gap-grid:var(--space-8);
  --pad-control:var(--space-4);
  --pad-card:var(--space-8);
  --pad-section:var(--space-13);
  --pad-section-tight:var(--space-12);
  /* Layout */
  --container-max:1240px;
  --container-narrow:760px;
  --container-wide:1440px;
  --gutter:var(--space-7);
  --gutter-lg:var(--space-9);
  --nav-height:84px;
  --logo-clearspace:var(--space-7); /* min clearspace = 1/4 of the square's side */
}
  /* The square is the brand's foundational shape (Brand Book p.9: "Why the square?").
   Radii stay small and deliberate: nothing on the Legacy brand should read as a pill
   except a genuinely circular control (avatar, carousel arrow, dot). */
.ll-page{
  --radius-none:0;
  --radius-xs:2px;
  --radius-sm:4px;
  --radius-md:6px;
  --radius-lg:10px;
  --radius-xl:14px;
  --radius-full:9999px;
  --radius-button:var(--radius-sm);
  --radius-input:var(--radius-sm);
  --radius-card:var(--radius-md);
  --radius-media:var(--radius-sm);
  --radius-modal:var(--radius-lg);
  --radius-mark:var(--radius-none); /* the logo square is never rounded */
}
  .ll-page{
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(46,46,46,.06);
  --shadow-sm:0 1px 3px rgba(46,46,46,.08),0 1px 2px rgba(46,46,46,.04);
  --shadow-md:0 4px 14px rgba(46,46,46,.09);
  --shadow-lg:0 12px 32px rgba(46,46,46,.12);
  --shadow-xl:0 24px 60px rgba(13,58,120,.18);
  --shadow-brand:0 10px 28px rgba(24,94,188,.24);
  --shadow-inset-hairline:inset 0 0 0 1px rgba(46,46,46,.08);
  --shadow-focus:0 0 0 3px rgba(96,154,233,.45);
  --shadow-card:var(--shadow-sm);
  --shadow-card-hover:var(--shadow-md);
  --shadow-nav:0 1px 0 rgba(46,46,46,.08);
  --shadow-modal:var(--shadow-xl);
  --blur-glass:blur(14px); /* @kind other */
  --blur-scrim:blur(3px); /* @kind other */
}
  .ll-page{
  --duration-instant:90ms; /* @kind other */
  --duration-fast:160ms; /* @kind other */
  --duration-base:240ms; /* @kind other */
  --duration-slow:420ms; /* @kind other */
  --duration-slower:700ms; /* @kind other */
  /* Composed, unhurried easing: no bounce, no overshoot. */
  --ease-standard:cubic-bezier(.4,0,.2,1); /* @kind other */
  --ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
  --ease-in:cubic-bezier(.4,0,1,1); /* @kind other */
  --transition-control:all var(--duration-fast) var(--ease-standard); /* @kind other */
  --transition-surface:all var(--duration-base) var(--ease-out); /* @kind other */
  --transition-reveal:opacity var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out); /* @kind other */
}

/* ---- Page theme (Pine until the script applies the chosen background) ---- */
.ll-page{
  --ll-bg:#2a5a43; --ll-ink:#143224; --ll-fg:#ffffff; --ll-muted:rgba(255,255,255,.82);
  --ll-accent:#f6d58a; --ll-card:rgba(0,0,0,.22); --ll-card-border:rgba(255,255,255,.14); --ll-logo-filter:none;
  /* The can and hand start out of view; the script animates these. */
  --ll-canLift:translateY(0); --ll-canX:0%; --ll-canTransition:none;
  --ll-handFlip:-1; --ll-handTransform:translate(calc(-50vw - 700px),-30px); --ll-handTransition:none; --ll-fingDur:700ms;
  --ll-wristR:-6; --ll-tp:55; --ll-td:-8;
  --ll-f0m:6; --ll-f0p:10; --ll-f0d:4; --ll-f1m:8; --ll-f1p:12; --ll-f1d:5;
  --ll-f2m:10; --ll-f2p:14; --ll-f2d:6; --ll-f3m:12; --ll-f3p:16; --ll-f3d:7;
  --ll-canH:400px;
  display:block; overflow-x:clip;
  font:var(--type-body); color:var(--text-body); background:var(--surface-page);
  -webkit-font-smoothing:antialiased; text-wrap:pretty;
}
@media (max-width:640px){
  .ll-page{ --text-4xl:36px; --pad-section:var(--space-12); --gutter:var(--space-5); }
}

/* ---- Base elements inside the page (the site stylesheet styles these globally) ---- */
.ll-page *, .ll-page *::before, .ll-page *::after{box-sizing:border-box}
.ll-page section{margin:0}
.ll-page h1, .ll-page h2, .ll-page h3, .ll-page h4{letter-spacing:normal;text-transform:none}
.ll-page em{font-style:italic}
.ll-page a{color:#a32020;text-decoration:none}
.ll-page a:hover{color:#7a1616}
.ll-page a:focus-visible, .ll-page button:focus-visible{outline:2px solid var(--focus-ring, #609ae9);outline-offset:2px}
.ll-page img{max-width:100%}
.ll-page svg text{font-family:var(--font-sans)}

/* ---- Buttons (the design system's Button) ---- */
.ll-page .ll-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-3);
  font:var(--type-button); text-transform:uppercase; letter-spacing:var(--tracking-wide); text-decoration:none;
  cursor:pointer; border-radius:var(--radius-button); transition:var(--transition-control); white-space:nowrap;
  padding:13px 26px; font-size:var(--text-sm); width:auto; margin:0;
}
.ll-page .ll-btn--sm{padding:8px 16px;font-size:var(--text-xs)}
.ll-page .ll-btn--block{width:100%}
.ll-page .ll-btn:active{transform:translateY(1px)}
.ll-page .ll-btn__trail{font-size:1.05em;line-height:1}
.ll-page .ll-btn--primary{background:var(--action-primary);color:var(--action-on-primary);border:1px solid var(--action-primary)}
.ll-page .ll-btn--primary:hover{background:var(--action-primary-hover);border-color:var(--action-primary-hover);color:var(--action-on-primary)}
.ll-page .ll-btn--secondary{background:transparent;color:var(--action-secondary);border:1px solid var(--border-default)}
.ll-page .ll-btn--secondary:hover{background:var(--grey-900);color:var(--lw-white);border-color:var(--grey-900)}
/* On the dark backgrounds the livestream buttons are outlined in white; on the light ones they match secondary/primary. */
.ll-page .ll-btn--out{background:transparent;color:var(--lw-white);border:1px solid var(--border-inverse)}
.ll-page .ll-btn--out:hover{background:rgba(255,255,255,.12);border-color:var(--lw-white);color:var(--lw-white)}
.ll-page .ll-btn--fill{background:var(--lw-white);color:var(--lw-sapphire);border:1px solid var(--lw-white)}
.ll-page .ll-btn--fill:hover{background:var(--blue-50);border-color:var(--blue-50);color:var(--lw-sapphire)}
.ll-page[data-ll-tone="light"] .ll-btn--out{color:var(--action-secondary);border-color:var(--border-default)}
.ll-page[data-ll-tone="light"] .ll-btn--out:hover{background:var(--grey-900);color:var(--lw-white);border-color:var(--grey-900)}
.ll-page[data-ll-tone="light"] .ll-btn--fill{background:var(--action-primary);color:var(--action-on-primary);border-color:var(--action-primary)}
.ll-page[data-ll-tone="light"] .ll-btn--fill:hover{background:var(--action-primary-hover);border-color:var(--action-primary-hover)}

/* ---- Photo spots: a placeholder until a photo is added (Cyndi: "add this photo to this card") ---- */
.ll-page .ll-photo{position:absolute;inset:0;border-radius:6px;overflow:hidden;background:linear-gradient(135deg,#1f6b43,#0f3323)}
.ll-page .ll-photo--fill{border-radius:0}
.ll-page .ll-photo:not(:has(img))::after{
  content:attr(data-placeholder); position:absolute; inset:0; display:grid; place-items:center; padding:16px; text-align:center;
  font:500 13px/1.4 var(--font-sans); color:rgba(255,255,255,.55); letter-spacing:.02em;
}
.ll-page .ll-photo--fill:not(:has(img))::after{place-items:start center;padding-top:24%}
.ll-page .ll-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ---- Effects ---- */
.ll-page [data-ll="sleigh"]{position:fixed;left:0;top:0;z-index:40;pointer-events:none;transform-origin:0 0;will-change:transform;visibility:hidden}
@keyframes lwTwinkle{0%,100%{opacity:1}50%{opacity:.28}}
@keyframes lwSnow{from{transform:translateY(-20px)}to{transform:translateY(1600px)}}
@keyframes lwPulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes lwStar{0%,100%{opacity:.25}50%{opacity:.6}}
@keyframes lwBulbSlow{0%,70%,100%{opacity:1}82%{opacity:.45}}
@keyframes lwBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.ll-page *{animation:none!important}}

/* ---- "What to bring" can: on desktop each step's description sits beside the
   can (alternating sides, shown while the hand is away); on phones it is on the
   can label, which is taller. The label copy is the one to edit. ---- */
.ll-page .ll-side{
  position:absolute; top:66px; bottom:62px; width:min(320px,calc(50vw - 154px - var(--gutter)));
  display:flex; flex-direction:column; justify-content:center; gap:10px; pointer-events:none;
  opacity:0; filter:blur(6px);
  transition:opacity 520ms cubic-bezier(.16,1,.3,1),filter 520ms cubic-bezier(.16,1,.3,1),transform 520ms cubic-bezier(.16,1,.3,1);
}
.ll-page .ll-side--L{right:calc(100% + 44px); align-items:flex-end; text-align:right; transform:translateX(-14px)}
.ll-page .ll-side--R{left:calc(100% + 44px); align-items:flex-start; text-align:left; transform:translateX(14px)}
.ll-page .ll-side.is-on{opacity:1; filter:blur(0); transform:translateX(0)}
.ll-page .ll-side__t{font:400 clamp(18px,1.9vw,23px)/1.5 var(--font-sans); color:var(--text-heading); text-wrap:pretty}
.ll-page .ll-side__note{font:400 16px/1.5 var(--font-sans); color:var(--text-body)}
.ll-page .ll-side__note:empty{display:none}
.ll-page .ll-can-desc{display:none}
@media (max-width:859px){
  .ll-page{--ll-canH:500px}
  .ll-page .ll-side{display:none}
  .ll-page .ll-can-desc{display:flex; flex-direction:column; gap:6px}
}
@media (prefers-reduced-motion:reduce){.ll-page .ll-side{transition:none}}