/* styles.css — LIFE180 Interactive Pyramid. Direction B · Luminous Ascent. */

:root{
  --cyan:#1FC9E5; --green:#24CE62; --navy:#141415; --navy2:#0F0F10; --ink:#0A0A0B;
  --paper:#f4f4f5;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--ink); color:#fff;
  font-family:'Open Sans',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
button{ font-family:inherit; cursor:pointer; }

/* ---------- shared type ---------- */
.l180-eyebrow{ font-family:'Montserrat',sans-serif; font-weight:800; letter-spacing:.32em;
  font-size:11px; text-transform:uppercase; color:rgba(255,255,255,.7); }
.l180-h1{ font-family:'Montserrat',sans-serif; font-weight:900; font-size:clamp(30px,4.4vw,52px);
  line-height:1.12; padding:.05em 0 .1em; letter-spacing:-.01em;
  background:linear-gradient(92deg,var(--cyan) 8%,#5ed8e8 42%,var(--green));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 18px color-mix(in oklch, var(--cyan) 24%, transparent)); }
.l180-sub{ color:rgba(255,255,255,.82); font-size:15px; line-height:1.55; }

/* ---------- top bar ---------- */
.l180-topbar{ position:fixed; top:0; left:0; right:0; z-index:60; height:62px;
  display:flex; align-items:center; justify-content:space-between; padding:0 26px;
  background:linear-gradient(180deg,rgba(5,8,13,.82),rgba(5,8,13,0)); backdrop-filter:blur(6px);
  pointer-events:none; }
.l180-topbar > *{ pointer-events:auto; }
.l180-brandmark{ display:flex; align-items:center; gap:12px; }
.l180-logo{ height:30px; width:auto; display:block; filter:drop-shadow(0 1px 6px rgba(0,0,0,.4)); }
.l180-brandmark span.tag{ font-family:'Open Sans',sans-serif; font-weight:400; font-size:11px;
  color:rgba(255,255,255,.6); letter-spacing:.16em; text-transform:uppercase; padding-left:12px;
  border-left:1px solid rgba(255,255,255,.26); }

.l180-topbar-maps{ display:flex; align-items:center; gap:6px; }
.l180-maplink{ font-family:'Montserrat',sans-serif; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(255,255,255,.55); text-decoration:none; padding:6px 12px;
  border:1px solid rgba(255,255,255,.14); border-radius:20px; transition:all .2s; }
.l180-maplink:hover{ color:rgba(255,255,255,.9); border-color:rgba(255,255,255,.3); }

.l180-toggles{ display:flex; align-items:center; gap:10px; }
.l180-modetoggle,.l180-lenstoggle{ display:flex; align-items:center; gap:0; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.2); border-radius:30px; padding:4px; }
.l180-modetoggle button,.l180-lenstoggle button{ border:none; background:transparent; color:rgba(255,255,255,.76);
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:11.5px; letter-spacing:.04em;
  padding:7px 16px; border-radius:24px; transition:all .3s ease; }
.l180-modetoggle button.on,.l180-lenstoggle button.on{ color:#0a0a0b; background:linear-gradient(92deg,var(--cyan),var(--green));
  box-shadow:0 0 18px rgba(31,201,229,.35); }

/* ---------- pyramid explore ---------- */
.l180-explore{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.26);
  color:#fff; font-family:'Montserrat',sans-serif; font-weight:700; font-size:13px;
  padding:12px 22px; border-radius:30px; transition:all .3s ease; }
.l180-explore:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.58); transform:translateY(-1px); }
.l180-scrolldot{ width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.66);
  animation:l180bob 1.5s ease-in-out infinite; }
@keyframes l180bob{ 0%,100%{ transform:translateY(0); opacity:.4;} 50%{ transform:translateY(6px); opacity:1;} }

/* ---------- pyramid build-up entrance (laying the floor, bottom -> top) ---------- */
.l180-tierband{ animation:l180tierrise .75s cubic-bezier(.22,1,.36,1) both; }
@keyframes l180tierrise{ from{opacity:0; transform:translateY(42px) scale(.95);} to{opacity:1; transform:none;} }
.l180-hero-enter{ animation:l180herorise .85s cubic-bezier(.22,1,.36,1) both; }
@keyframes l180herorise{ from{opacity:0; transform:translateY(-14px);} to{opacity:1; transform:none;} }
.l180-explore-enter{ animation:l180expfade .7s ease .72s both; }
@keyframes l180expfade{ from{opacity:0;} to{opacity:1;} }

/* ---------- agent-mode signals on the pyramid ---------- */
.l180-agentflag{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--cyan); background:rgba(31,201,229,.14); border:1px solid rgba(31,201,229,.45);
  padding:4px 9px; border-radius:20px; }
.l180-agentnugget{ max-width:448px; margin:16px auto 0; background:rgba(31,201,229,.08);
  border:1px solid rgba(31,201,229,.3); border-radius:12px; padding:11px 17px; text-align:center;
  animation:l180stepin .4s cubic-bezier(.22,1,.36,1); }
.l180-agentnugget-h{ display:block; font-family:'Montserrat',sans-serif; font-weight:800; font-size:9px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); margin-bottom:5px; }
.l180-agentnugget p{ margin:0; font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.84); }

/* ---------- diagonal ascent rails ---------- */
.l180-railsvg{ animation:l180expfade .6s ease .55s both; }
.l180-railsvg circle[style]{ transition:r .3s cubic-bezier(.22,1,.36,1); }

/* ---------- modal ---------- */
.l180-backdrop{ position:fixed; inset:0; z-index:100; background:rgba(3,6,11,.74);
  backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center;
  padding:40px 24px; animation:l180fade .32s ease; }
@keyframes l180fade{ from{opacity:0;} to{opacity:1;} }
.l180-backdrop.closing{ animation:l180fadeout .26s ease forwards; }
@keyframes l180fadeout{ from{opacity:1;} to{opacity:0;} }
.l180-sheet{ position:relative; width:min(960px,100%); max-height:88vh; overflow:hidden;
  background:linear-gradient(180deg,#19191b,#0F0F10); border:1px solid rgba(255,255,255,.16);
  border-radius:22px; box-shadow:0 40px 120px rgba(0,0,0,.6); animation:l180rise .46s cubic-bezier(.22,1,.36,1); }
@keyframes l180rise{ from{opacity:0; transform:translateY(32px) scale(.975);} to{opacity:1; transform:none;} }
.l180-backdrop.closing .l180-sheet{ animation:l180sink .26s cubic-bezier(.4,0,1,1) forwards; }
@keyframes l180sink{ from{opacity:1; transform:none;} to{opacity:0; transform:translateY(22px) scale(.975);} }
.l180-sheet-inner{ position:relative; padding:40px 44px 34px; overflow-y:auto; max-height:88vh; }

/* compact layout — 5-card tiers (the routing tier) fit on one screen, no scroll */
.l180-sheet--compact{ width:min(1040px,100%); max-height:94vh; }
.l180-sheet--compact .l180-sheet-inner{ padding:22px 40px 22px; max-height:94vh; }
.l180-sheet--compact .l180-tierimg-band{ height:96px; margin:-22px -40px 16px; }
.l180-sheet--compact .l180-modal-title{ font-size:30px; margin:6px 0 2px; }
.l180-sheet--compact .l180-tagline-q{ font-size:16px; margin:8px 0 2px; }
.l180-sheet--compact .l180-intro{ font-size:12.5px; line-height:1.45; margin:4px 0 0; }
.l180-sheet--compact .l180-streams{ margin-top:16px; gap:12px; }
.l180-sheet--compact .l180-streamcard{ padding:14px 14px; gap:8px; }
.l180-sheet--compact .l180-streamone{ font-size:12px; line-height:1.4; }
.l180-sheet--compact .l180-depth{ padding-top:8px; }
.l180-sheet--compact .l180-depth p{ font-size:11px; line-height:1.4; }
.l180-sheet--compact .l180-streamcta{ padding:9px 14px; font-size:12px; }
.l180-sheet--compact .l180-servicechips{ margin-top:14px; padding-top:12px; }
.l180-sheet--compact .l180-sheet-foot{ margin-top:14px; }

/* ---------- tier duotone image band ---------- */
.l180-tierimg-band{ position:relative; margin:-40px -44px 26px; height:176px; overflow:hidden; background:#0F0F10; }
.l180-tierimg-band image-slot{ width:100%; height:100%; display:block; }
.l180-tierimg-tint{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(140deg, #141415, color-mix(in oklch, var(--hue) 85%, #141415));
  mix-blend-mode:color; opacity:.5; }
.l180-tierimg-fade{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, color-mix(in oklch,var(--hue) 20%, transparent) 0%, transparent 36%, rgba(10,10,11,.6) 78%, #0F0F10 100%); }
.l180-modaltop{ position:absolute; top:16px; left:50%; transform:translateX(-50%); z-index:5;
  display:flex; align-items:center; justify-content:center; gap:10px; max-width:calc(100% - 32px); }
.l180-close{ flex:0 0 auto; width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); color:#fff; font-size:14px; cursor:pointer; }
.l180-close:hover{ background:rgba(255,255,255,.24); }
.l180-navbtn{ display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 14px; border-radius:18px;
  background:rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.24); color:#fff; cursor:pointer;
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:11px; letter-spacing:.03em;
  white-space:nowrap; backdrop-filter:blur(4px); transition:all .2s ease; }
.l180-navbtn:hover{ background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.45); }
.l180-navbtn .arr{ font-size:13px; line-height:1; opacity:.8; }

.l180-modal-title{ font-family:'Montserrat',sans-serif; font-weight:900; font-size:38px; margin:8px 0 2px; }
.l180-positioning{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:14px; color:rgba(255,255,255,.78); }
.l180-tagline-q{ font-family:Georgia,'Times New Roman',serif; font-style:italic; font-size:19px;
  color:#fff; margin:14px 0 4px; }
.l180-intro{ color:rgba(255,255,255,.76); font-size:13.5px; line-height:1.55; max-width:640px; margin:6px 0 0; }

.l180-streams{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:26px; }
/* 5-stream balanced layout: 3 top row, 2 centered bottom row */
.l180-streams--5{ grid-template-columns:repeat(6,1fr); }
.l180-streams--5 .l180-streamcard{ grid-column:span 2; }
.l180-streams--5 .l180-streamcard:nth-child(4){ grid-column:2 / span 2; }
.l180-streams--5 .l180-streamcard:nth-child(5){ grid-column:4 / span 2; }
/* 2-stream layout (e.g. Tier 2 in website mode) — centered pair */
.l180-streams--2{ grid-template-columns:repeat(2,1fr); max-width:620px; margin-left:auto; margin-right:auto; }
/* 4-stream layout (e.g. Tier 2 in agent mode) — balanced 2×2 */
.l180-streams--4{ grid-template-columns:repeat(2,1fr); max-width:760px; margin-left:auto; margin-right:auto; }
.l180-agentonly-tag{ margin-left:auto; flex:0 0 auto; align-self:flex-start; font-family:'Montserrat',sans-serif;
  font-weight:700; font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:color-mix(in oklch,var(--hue) 75%,#fff);
  border:1px solid color-mix(in oklch,var(--hue) 50%,transparent); border-radius:20px; padding:3px 8px;
  background:color-mix(in oklch,var(--hue) 14%,transparent); white-space:nowrap; }
.l180-streamcard{ background:
    radial-gradient(130% 90% at 50% -10%, color-mix(in oklch, var(--hue) 30%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in oklch, var(--hue) 12%, #171719), color-mix(in oklch, var(--hue) 6%, #121214));
  border:1px solid color-mix(in oklch, var(--hue) 34%, transparent);
  border-radius:16px; padding:20px 18px; display:flex; flex-direction:column; gap:11px;
  box-shadow:0 12px 34px rgba(0,0,0,.42), inset 0 1px 0 color-mix(in oklch, var(--hue) 30%, transparent);
  transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease; }
.l180-streamcard:hover{ border-color:color-mix(in oklch, var(--hue) 70%, transparent);
  transform:translateY(-3px); box-shadow:0 18px 50px rgba(0,0,0,.5), 0 0 0 1px color-mix(in oklch,var(--hue) 45%,transparent), 0 0 40px color-mix(in oklch,var(--hue) 22%,transparent); }
.l180-streamcard-top{ display:flex; align-items:center; gap:10px; }
.l180-streamnum{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; border:1px solid;
  display:flex; align-items:center; justify-content:center; font-family:'Montserrat',sans-serif;
  font-weight:800; font-size:12px; }
.l180-streamname{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:16px; margin:0; line-height:1.1; color:#fff; }
.l180-streamone{ font-size:13px; color:rgba(255,255,255,.82); line-height:1.45; margin:0; }
.l180-depth{ border-top:1px solid color-mix(in oklch, var(--hue) 22%, rgba(255,255,255,.12)); padding-top:10px; }
.l180-depth p{ font-size:11.5px; color:rgba(255,255,255,.66); line-height:1.45; margin:4px 0 0; }
.l180-depthlabel{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:color-mix(in oklch, var(--hue) 60%, #cfcfd6); }
.l180-depth-agent{ border-top-color:color-mix(in oklch, var(--hue) 40%, transparent); }
.l180-depthlabel-agent{ color:color-mix(in oklch, var(--hue) 75%, #fff); }
.l180-depth-agent p{ color:color-mix(in oklch, var(--hue) 30%, rgba(255,255,255,.7)); }
.l180-streamcta{ margin-top:auto; background:color-mix(in oklch,var(--hue) 14%, transparent); border:1.5px solid color-mix(in oklch,var(--hue) 60%,transparent);
  color:color-mix(in oklch,var(--hue) 80%,#fff); font-family:'Montserrat',sans-serif; font-weight:800; font-size:12.5px; padding:11px 14px;
  border-radius:10px; display:flex; align-items:center; justify-content:center; gap:7px; transition:all .25s ease; }
.l180-streamcta:hover{ background:color-mix(in oklch,var(--hue) 90%,white 10%); border-color:transparent; color:#0a0a0b; }
.l180-streamcta .arr{ transition:transform .25s ease; }
.l180-streamcta:hover .arr{ transform:translateX(3px); }
/* secondary (ghost) card CTA — e.g. "View Example" alongside a primary button */
.l180-streamcta--ghost{ margin-top:8px; background:transparent;
  border:1px solid color-mix(in oklch,var(--hue) 38%,rgba(255,255,255,.18));
  color:color-mix(in oklch,var(--hue) 60%,#fff); font-size:11.5px; padding:9px 14px; }
.l180-streamcta--ghost:hover{ background:color-mix(in oklch,var(--hue) 16%,transparent);
  border-color:color-mix(in oklch,var(--hue) 60%,transparent); color:#fff; }
/* card bullet list (e.g. the six jobs of money) */
.l180-streambullets{ list-style:none; margin:2px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 8px; }
.l180-streambullets li{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:10.5px; letter-spacing:.03em;
  color:color-mix(in oklch,var(--hue) 72%,#fff); background:color-mix(in oklch,var(--hue) 14%,transparent);
  border:1px solid color-mix(in oklch,var(--hue) 34%,transparent); border-radius:20px; padding:4px 10px; }

/* ---------- educational / example pop-up (layers over the tier modal) ---------- */
.l180-backdrop--edu{ z-index:130; background:rgba(3,6,11,.82); }
.l180-sheet--edu{ width:min(640px,100%); }
/* wide variant — the screenshot IS the example, so let it dominate.
   Tuned to fit one page (no scroll): capped image + two-column body. */
.l180-sheet--eduwide{ width:min(1240px,96vw); max-height:94vh; }
.l180-sheet--eduwide .l180-sheet-inner{ max-height:94vh; padding:16px 34px 10px; }
.l180-sheet--eduwide .l180-edu-title{ font-size:22px; margin:4px 0 0; }
.l180-sheet--eduwide .l180-edu-lead{ margin:7px 0 0; }
.l180-sheet--eduwide .l180-edu-shot{ margin:11px auto 13px; width:fit-content; max-width:100%; }
.l180-sheet--eduwide .l180-edu-shot img{ max-height:28vh; width:auto; max-width:100%; }
/* assumptions (left) + takeaways (right) side by side */
.l180-sheet--eduwide .l180-edu-cols{ display:grid; grid-template-columns:.82fr 1.18fr; gap:22px;
  align-items:start; }
.l180-sheet--eduwide .l180-edu-assume{ margin:0; padding:14px 16px; }
.l180-sheet--eduwide .l180-edu-assume-grid{ grid-template-columns:repeat(3,1fr); gap:8px; }
.l180-sheet--eduwide .l180-edu-stat{ padding:7px 10px; }
.l180-sheet--eduwide .l180-edu-stat-v{ font-size:16px; }
.l180-sheet--eduwide .l180-edu-assume-note{ margin-top:8px; font-size:11.5px; }
.l180-sheet--eduwide .l180-edu-rates{ margin-top:9px; padding-top:9px; }
.l180-sheet--eduwide .l180-edu-rate{ padding:5px 0; }
.l180-sheet--eduwide .l180-edu-bullets{ margin:0; gap:9px; align-content:start; }
.l180-sheet--eduwide .l180-edu-bullet{ font-size:13px; line-height:1.45; }
.l180-sheet--eduwide .l180-edu-close{ display:none; }
/* centered, enlarged CTA with a quiet "Back" beneath it */
.l180-sheet--eduwide .l180-edu-foot{ margin-top:11px; flex-direction:column; align-items:center; gap:6px; }
.l180-sheet--eduwide .l180-edu-foot .l180-bigcta{ font-size:17px; padding:17px 54px; }
.l180-sheet--eduwide .l180-edu-foot .l180-ghostbtn{ border:none; padding:2px 10px; font-size:12px;
  color:rgba(255,255,255,.5); }
.l180-sheet--eduwide .l180-edu-foot .l180-ghostbtn:hover{ color:rgba(255,255,255,.82); }
.l180-edu-title{ font-family:'Montserrat',sans-serif; font-weight:900; font-size:30px; line-height:1.1;
  margin:8px 0 12px; color:#fff; }
.l180-edu-lead{ font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.86); margin:0 0 20px; }
.l180-edu-shot{ margin:0 0 24px; border:1px solid rgba(255,255,255,.12); border-radius:14px;
  overflow:hidden; background:#0a0a0d; }
.l180-edu-shot img{ display:block; width:100%; height:auto; }
.l180-edu-shot figcaption{ font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.6);
  padding:11px 16px 13px; border-top:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02); }
/* assumptions block — inputs behind the run + reference market rates */
.l180-edu-assume{ margin:0 0 24px; padding:20px 22px; border:1px solid rgba(255,255,255,.09);
  border-radius:14px; background:rgba(255,255,255,.02); }
.l180-edu-assume-head{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; margin:0 0 14px; }
.l180-edu-assume-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.l180-edu-stat{ display:flex; flex-direction:column; gap:3px; padding:11px 13px; border-radius:10px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); }
.l180-edu-stat-l{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:10.5px;
  letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.l180-edu-stat-v{ font-family:'Montserrat',sans-serif; font-weight:900; font-size:18px; line-height:1.1; }
.l180-edu-assume-note{ font-size:12.5px; line-height:1.55; color:rgba(255,255,255,.6); margin:14px 0 0; }
.l180-edu-rates{ margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.08); }
.l180-edu-rate{ display:grid; grid-template-columns:1fr 84px 84px; align-items:center; gap:8px;
  padding:7px 0; border-top:1px solid rgba(255,255,255,.05); font-size:13px; }
.l180-edu-rate--head{ border-top:0; padding-top:0; }
.l180-edu-rate--head .l180-edu-rate-l{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; }
.l180-edu-rate--head .l180-edu-rate-now, .l180-edu-rate--head .l180-edu-rate-avg{
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:9.5px; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(255,255,255,.45); }
.l180-edu-rate-l{ color:rgba(255,255,255,.82); min-width:0; }
.l180-edu-rate-now{ text-align:right; font-family:'Montserrat',sans-serif; font-weight:800; color:#fff; }
.l180-edu-rate-avg{ text-align:right; font-family:'Montserrat',sans-serif; font-weight:700; color:#FBBF24; }

/* purpose bullets under the screenshot */
.l180-edu-bullets{ list-style:none; margin:0 0 22px; padding:0; display:grid; gap:12px; }
.l180-edu-bullet{ display:flex; gap:12px; align-items:flex-start; font-size:14px; line-height:1.55;
  color:rgba(255,255,255,.86); }
.l180-edu-bullet-dot{ flex:0 0 auto; width:8px; height:8px; border-radius:50%; margin-top:7px; }

/* side-by-side pro/con — fixed account vs. whole life */
.l180-edu-vs{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.l180-edu-vs-col{ border:1px solid rgba(255,255,255,.1);
  border-radius:14px; padding:16px 20px; background:rgba(255,255,255,.02); }
.l180-edu-vs-col--pro{ background:rgba(255,255,255,.035); }
.l180-edu-vs-head{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:15px;
  color:rgba(255,255,255,.82); margin-bottom:13px; padding-bottom:11px;
  border-bottom:1px solid rgba(255,255,255,.1); }
.l180-edu-vs-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.l180-edu-vs-col li{ display:flex; gap:11px; align-items:flex-start; font-size:14px; line-height:1.5;
  color:rgba(255,255,255,.86); }
.l180-edu-vs-mark{ flex:0 0 auto; font-size:13px; font-weight:900; line-height:1.45; }
.l180-edu-vs-mark--x{ color:#ef6a6a; }

/* fine-print disclaimer at the very bottom */
.l180-edu-disclaimer{ margin:12px auto 0; max-width:760px; font-size:10px; line-height:1.5;
  color:rgba(255,255,255,.4); text-align:center; }
.l180-sheet--eduwide .l180-edu-disclaimer{ margin-top:9px; }
.l180-edu-contrast{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 22px; }
.l180-edu-contrast-col{ border-radius:14px; padding:14px 16px; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03); }
.l180-edu-contrast-col--found{ border-color:color-mix(in oklch,var(--hue) 45%,transparent);
  background:color-mix(in oklch,var(--hue) 10%,rgba(255,255,255,.02)); }
.l180-edu-contrast-tag{ display:block; font-family:'Montserrat',sans-serif; font-weight:700; font-size:9px;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:6px; }
.l180-edu-contrast-col--found .l180-edu-contrast-tag{ color:color-mix(in oklch,var(--hue) 75%,#fff); }
.l180-edu-contrast-col p{ font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.82); margin:0; }
.l180-edu-items{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:14px; }
.l180-edu-item{ display:flex; gap:12px; }
.l180-edu-item-dot{ flex:0 0 auto; width:9px; height:9px; border-radius:50%; margin-top:6px; }
.l180-edu-item strong{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:14px; color:#fff; }
.l180-edu-item p{ font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.72); margin:3px 0 0; }
.l180-edu-steps{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:0; }
.l180-edu-step{ display:flex; gap:14px; padding-bottom:16px; position:relative; }
.l180-edu-step:not(:last-child)::before{ content:""; position:absolute; left:13px; top:28px; bottom:0;
  width:2px; background:color-mix(in oklch,var(--hue) 30%,transparent); }
.l180-edu-step-num{ flex:0 0 auto; width:28px; height:28px; border-radius:50%; border:1px solid; color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:'Montserrat',sans-serif; font-weight:800;
  font-size:13px; position:relative; z-index:1; }
.l180-edu-step strong{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:14px; color:#fff; }
.l180-edu-step p{ font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.74); margin:3px 0 0; }
.l180-edu-close{ font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.9); margin:0 0 22px;
  padding:14px 16px; border-radius:12px; background:color-mix(in oklch,var(--hue) 9%,rgba(255,255,255,.02));
  border-left:3px solid color-mix(in oklch,var(--hue) 60%,transparent); }
.l180-edu-foot{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }

/* ---------- modal intro-video slot ---------- */
.l180-videoframe{ position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover; background:#000; }
.l180-videoplaceholder{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; background:linear-gradient(180deg,#161618,#0f0f10); }
.l180-videoplaceholder::before{ content:""; position:absolute; inset:14px;
  border:1.5px dashed rgba(255,255,255,.16); border-radius:12px; pointer-events:none; }
.l180-videoplaceholder-icon{ display:flex; align-items:center; justify-content:center; width:46px; height:46px;
  border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22);
  color:#fff; font-size:15px; padding-left:3px; }
.l180-videoplaceholder-lbl{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:13px;
  letter-spacing:.04em; color:rgba(255,255,255,.85); }
.l180-videoplaceholder-sub{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.42); }
.l180-sheet-foot{ margin-top:22px; text-align:center; font-size:11.5px; color:rgba(255,255,255,.58); }

/* ---------- embedded interactive page (iframe overlay) ---------- */
.l180-embed{ position:fixed; inset:0; z-index:95; background:var(--ink,#0A0A0B);
  animation:l180fade .3s ease; }
.l180-embed-frame{ position:absolute; inset:0; width:100%; height:100%; border:0; background:#0A0A0B; }
.l180-embed-close{ position:fixed; top:18px; left:18px; z-index:2; display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.26); color:#fff; cursor:pointer;
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:12.5px; letter-spacing:.04em;
  padding:9px 16px; border-radius:24px; backdrop-filter:blur(6px); transition:all .2s ease; }
.l180-embed-close:hover{ background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.45); }
.l180-embed-close .arr{ transition:transform .2s ease; }
.l180-embed-close:hover .arr{ transform:translateX(-3px); }

/* ---------- funnel ---------- */
.l180-funnel{ position:fixed; inset:0; z-index:90; display:flex; flex-direction:column; }
.l180-funnel-top{ display:flex; align-items:center; justify-content:space-between; padding:18px 26px; }
.l180-back{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.9);
  font-family:'Montserrat',sans-serif; font-weight:600; font-size:12px; padding:8px 14px; border-radius:8px; transition:all .25s; }
.l180-back:hover{ background:rgba(255,255,255,.2); color:#fff; }
.l180-progress{ display:flex; align-items:center; gap:6px; }
.l180-progdot{ height:8px; border-radius:5px; transition:all .4s cubic-bezier(.22,1,.36,1); }
.l180-stagelabel{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:12px; color:rgba(255,255,255,.76);
  letter-spacing:.04em; }
.l180-funnel-body{ flex:1; display:flex; align-items:center; justify-content:center; padding:24px; overflow-y:auto; }
.l180-fstep{ width:100%; max-width:620px; animation:l180stepin .5s cubic-bezier(.22,1,.36,1); }
@keyframes l180stepin{ from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:none;} }
.l180-fbig{ font-family:'Montserrat',sans-serif; font-weight:900; font-size:38px; line-height:1.08; margin:10px 0 14px; }
.l180-flead{ font-size:16px; line-height:1.6; color:rgba(255,255,255,.92); margin:0 0 14px; }
.l180-fnote{ font-size:13px; color:rgba(255,255,255,.66); line-height:1.5; }
.l180-funnel-nav{ display:flex; align-items:center; justify-content:space-between; padding:18px 26px 26px; }
.l180-ghostbtn{ background:transparent; border:1px solid rgba(255,255,255,.26); color:rgba(255,255,255,.88);
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:13px; padding:12px 22px; border-radius:30px; transition:all .25s; }
.l180-ghostbtn:hover{ border-color:rgba(255,255,255,.58); color:#fff; }
.l180-solidbtn,.l180-bigcta{ background:linear-gradient(92deg, color-mix(in oklch,var(--hue) 88%,white 12%), var(--hue));
  border:none; color:#0a0a0b; font-family:'Montserrat',sans-serif; font-weight:800; font-size:13.5px;
  padding:13px 26px; border-radius:30px; box-shadow:0 8px 30px color-mix(in oklch,var(--hue) 40%,transparent); transition:all .25s; }
.l180-bigcta{ font-size:15px; padding:16px 34px; }
.l180-solidbtn:hover,.l180-bigcta:hover{ transform:translateY(-2px); box-shadow:0 12px 40px color-mix(in oklch,var(--hue) 55%,transparent); }
.l180-agentchip{ display:inline-block; font-family:'Montserrat',sans-serif; font-weight:700; font-size:11px;
  letter-spacing:.04em; color:var(--cyan); background:rgba(31,201,229,.1); border:1px solid rgba(31,201,229,.3);
  padding:7px 14px; border-radius:20px; margin-top:14px; }

/* funnel exercise */
.l180-sliders{ display:flex; flex-direction:column; gap:24px; margin-top:18px; }
.l180-sliderrow label{ display:block; font-size:14px; color:rgba(255,255,255,.94); margin-bottom:10px; font-weight:600; }
.l180-sliderrow input[type=range]{ width:100%; }
.l180-sliderends{ display:flex; justify-content:space-between; font-size:11px; color:rgba(255,255,255,.62); margin-top:5px; }
.l180-resultcard{ border:1px solid; border-radius:18px; padding:28px; text-align:center; background:rgba(255,255,255,.03); margin:8px 0 16px; }
.l180-resultscore{ font-family:'Montserrat',sans-serif; font-weight:900; font-size:64px; line-height:1; }
.l180-resultscore span{ font-size:22px; color:rgba(255,255,255,.62); }
.l180-resultarch{ font-size:18px; margin:8px 0; } .l180-resultarch strong{ font-weight:800; }
.l180-resultcard p{ font-size:14px; color:rgba(255,255,255,.84); margin:6px 0 0; }
.l180-pdfteaser{ display:flex; align-items:center; gap:14px; border:1px dashed color-mix(in oklch,var(--hue) 45%,transparent);
  border-radius:14px; padding:16px; margin-top:18px; background:rgba(255,255,255,.02); }
.l180-pdficon{ flex:0 0 auto; width:44px; height:54px; border-radius:6px; background:color-mix(in oklch,var(--hue) 24%,var(--navy));
  display:flex; align-items:center; justify-content:center; font-family:'Montserrat',sans-serif; font-weight:800; font-size:12px; color:var(--hue); }
.l180-pdfteaser strong{ display:block; font-family:'Montserrat',sans-serif; font-size:15px; }
.l180-pdfteaser span{ font-size:12.5px; color:rgba(255,255,255,.7); }

/* ---------- DNA ---------- */
.l180-dnaopts{ display:flex; flex-direction:column; gap:10px; }
.l180-dnaopt{ display:flex; align-items:center; gap:14px; text-align:left; padding:16px 18px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.2); border-radius:13px;
  color:#fff; font-size:15px; transition:all .25s ease; }
.l180-dnaopt:hover{ border-color:color-mix(in oklch,var(--hue) 55%,transparent); background:rgba(255,255,255,.07); transform:translateX(3px); }
.l180-dnaopt.sel{ border-color:var(--hue); background:color-mix(in oklch,var(--hue) 14%,transparent); }
.l180-dnaopt-dot{ flex:0 0 auto; width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,.42); transition:all .25s; }
.l180-dnaopt.sel .l180-dnaopt-dot{ border-color:var(--hue); background:var(--hue); box-shadow:0 0 12px var(--hue); }
.l180-dnablend{ font-size:15px; color:rgba(255,255,255,.8); margin-top:4px; }
.l180-dnabars{ display:flex; flex-direction:column; gap:9px; max-width:420px; margin:26px auto; }
.l180-dnabar{ display:flex; align-items:center; gap:12px; }
.l180-dnabar-name{ flex:0 0 96px; text-align:right; font-family:'Montserrat',sans-serif; font-weight:700; font-size:12px; color:rgba(255,255,255,.84); }
.l180-dnabar-track{ flex:1; height:9px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden; }
.l180-dnabar-fill{ height:100%; border-radius:6px; transition:width .8s cubic-bezier(.22,1,.36,1);
  transform-origin:left center; animation:l180growbar .95s cubic-bezier(.22,1,.36,1) both; }
@keyframes l180growbar{ from{transform:scaleX(0);} to{transform:scaleX(1);} }
.l180-dnabars .l180-dnabar:nth-child(1) .l180-dnabar-fill{ animation-delay:.04s; }
.l180-dnabars .l180-dnabar:nth-child(2) .l180-dnabar-fill{ animation-delay:.12s; }
.l180-dnabars .l180-dnabar:nth-child(3) .l180-dnabar-fill{ animation-delay:.2s; }
.l180-dnabars .l180-dnabar:nth-child(4) .l180-dnabar-fill{ animation-delay:.28s; }
.l180-dnabars .l180-dnabar:nth-child(5) .l180-dnabar-fill{ animation-delay:.36s; }
.l180-dnabars .l180-dnabar:nth-child(6) .l180-dnabar-fill{ animation-delay:.44s; }
.l180-dnameta{ display:flex; justify-content:center; gap:40px; margin:18px 0; }
.l180-dnameta-item{ display:flex; flex-direction:column; gap:3px; }
.l180-dnameta-item span{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.58); font-family:'Montserrat',sans-serif; font-weight:700; }
.l180-dnameta-item strong{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:18px; }
.l180-pathnote{ border:1px solid; border-radius:14px; padding:18px 22px; font-size:14px; line-height:1.55;
  color:rgba(255,255,255,.92); max-width:560px; margin:0 auto 24px; background:rgba(255,255,255,.03); }

/* ---------- sub-pyramid · "The Monument" ---------- */
.l180-mon-wrap{ max-width:1080px; margin:0 auto; padding:14px 26px 70px; }

/* hero */
.l180-mon-hero{ text-align:center; margin:14px 0 30px; }
.l180-mon-eyebrow{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:11px;
  letter-spacing:.34em; text-transform:uppercase; }
.l180-mon-title{ font-family:'Montserrat',sans-serif; font-weight:900; font-size:52px; line-height:1.02;
  margin:12px 0 8px; color:#fff; letter-spacing:-.01em;
  text-shadow:0 2px 30px rgba(0,0,0,.5); }
.l180-mon-tag{ font-family:'Open Sans',sans-serif; font-style:italic; font-size:17px; line-height:1.5;
  color:rgba(255,255,255,.86); max-width:600px; margin:0 auto; }
.l180-mon-entry{ display:inline-flex; align-items:center; gap:12px; border:1px solid; border-radius:14px;
  padding:12px 20px; font-size:13.5px; line-height:1.55; color:rgba(255,255,255,.92); text-align:left;
  background:rgba(255,255,255,.035); margin-top:20px; max-width:760px; backdrop-filter:blur(4px); }
.l180-mon-entry strong{ color:#fff; font-weight:800; }
.l180-mon-entry-dot{ flex:0 0 auto; width:9px; height:9px; border-radius:50%; }

/* interactive build: pyramid navigator + detail panel */
.l180-mon-build{ display:flex; align-items:stretch; gap:34px; margin:0 auto; position:relative; overflow:hidden; }

/* --- pyramid navigator (left) --- */
.l180-mon-nav{ flex:0 0 auto; width:46%; max-width:560px; display:flex; flex-direction:column;
  justify-content:center; align-items:stretch; }

.l180-mon-stack{ display:flex; flex-direction:column; align-items:center; gap:7px; min-width:0; }
.l180-mon-cap{ display:flex; justify-content:center; margin-bottom:1px;
  animation:l180capdrop .6s cubic-bezier(.34,1.4,.5,1) both; }
.l180-mon-cap-tri{ width:0; height:0; border-left:15px solid transparent; border-right:15px solid transparent;
  border-bottom:24px solid #F87171;
  filter:drop-shadow(0 0 14px #DC2626) drop-shadow(0 0 26px rgba(220,38,38,.55)); }
@keyframes l180capdrop{ from{opacity:0; transform:translateY(-36px) scale(.6);} to{opacity:1; transform:none;} }

.l180-mon-bandwrap{ position:relative; display:flex; justify-content:center;
  animation:l180monrise .6s cubic-bezier(.22,1,.36,1) both; }
@keyframes l180monrise{ from{opacity:0; transform:translateY(26px) scale(.96);} to{opacity:1; transform:none;} }
.l180-mon-band{ width:100%; height:64px; border:1px solid; cursor:pointer; position:relative;
  display:flex; align-items:center; justify-content:center; padding:0 30px;
  transition:transform .3s cubic-bezier(.34,1.3,.5,1), box-shadow .35s ease, background .35s ease, border-color .35s ease;
  transform-origin:center; }
.l180-mon-band.on{ transform:scale(1.035); z-index:2; }
.l180-mon-band-name{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:13.5px; color:#fff;
  text-align:center; line-height:1.12; max-width:100%; text-shadow:0 1px 10px rgba(0,0,0,.5);
  pointer-events:none; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.l180-mon-band.entry{ animation:l180entryglow 2.6s ease-in-out infinite; }
@keyframes l180entryglow{ 0%,100%{ filter:brightness(1);} 50%{ filter:brightness(1.14);} }
.l180-mon-navhint{ display:none; }

/* connector beam — active band reaches right, behind the detail panel */
.l180-mon-beam{ position:absolute; left:100%; top:50%; transform:translateY(-50%);
  height:44px; width:340px; z-index:1; border-radius:0 7px 7px 0; pointer-events:none;
  animation:l180beam .5s cubic-bezier(.22,1,.36,1) both; }
@keyframes l180beam{
  from{ opacity:.2; clip-path:inset(0 100% 0 0); -webkit-clip-path:inset(0 100% 0 0); }
  to{ opacity:1; clip-path:inset(0 0 0 0); -webkit-clip-path:inset(0 0 0 0); } }

/* --- detail panel (right) --- */
.l180-mon-panel{ flex:1; min-width:0; border:1px solid; border-radius:18px; overflow:hidden;
  background:linear-gradient(180deg, rgba(17,17,21,.74), rgba(12,12,16,.7));
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  position:relative; z-index:2; padding-bottom:20px;
  display:flex; flex-direction:column; animation:l180panelin .4s cubic-bezier(.22,1,.36,1) both; }
@keyframes l180panelin{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;} }
.l180-mon-panel-bar{ height:4px; width:100%; }
.l180-mon-panel-head{ display:flex; align-items:center; gap:14px; padding:20px 24px 0; }
.l180-mon-panel-elev{ flex:0 0 auto; width:42px; height:42px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Montserrat',sans-serif; font-weight:900; font-size:19px; color:#0a0a0b; }
.l180-mon-panel-titles{ flex:1; min-width:0; }
.l180-mon-panel-kicker{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.l180-mon-panel-risk{ margin-left:4px; }
.l180-mon-panel-name{ font-family:'Montserrat',sans-serif; font-weight:900; font-size:23px; color:#fff;
  margin:3px 0 0; line-height:1.1; }
.l180-mon-tagpill{ font-family:'Montserrat',sans-serif; font-weight:900; font-size:9px;
  letter-spacing:.2em; padding:4px 11px; border:1px solid; border-radius:20px; flex:0 0 auto; }
.l180-mon-panel-note{ font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.72); padding:14px 24px 0; margin:0; }

/* risk plot — each option pinned to its place on the conservative->aggressive scale */
.l180-mon-plot{ padding:16px 24px 6px; }
.l180-mon-plot-head{ display:grid; grid-template-columns:minmax(0,1.3fr) 1fr; gap:16px; margin-bottom:2px; }
.l180-mon-plot-scale{ display:flex; justify-content:space-between; padding:0 4px;
  font-family:'Montserrat',sans-serif; font-weight:800; font-size:9.5px; letter-spacing:.08em;
  text-transform:uppercase; }
.l180-mon-row{ display:grid; grid-template-columns:minmax(0,1.3fr) 1fr; gap:16px; align-items:center;
  padding:8px 0; border-top:1px solid rgba(255,255,255,.06); }
.l180-mon-row-lbl{ display:flex; align-items:center; gap:9px; min-width:0;
  font-family:'Open Sans',sans-serif; font-size:13px; font-weight:600; color:rgba(255,255,255,.85); }
.l180-mon-row-ldot{ flex:0 0 auto; width:8px; height:8px; border-radius:50%; }
.l180-mon-row-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.l180-mon-row-track{ position:relative; height:22px; }
.l180-mon-row-track::before{ content:""; position:absolute; left:8px; right:8px; top:50%;
  height:5px; transform:translateY(-50%); border-radius:5px;
  background:linear-gradient(90deg,#1FC9E5,#24CE62,#FBBF24,#F97316,#DC2626); opacity:.34; }
.l180-mon-row-marker{ position:absolute; top:50%; transform:translate(-50%,-50%); border-radius:50%;
  border:2px solid #0b0b0d; transition:left .35s cubic-bezier(.22,1,.36,1); }
.l180-mon-row.rec{ background:rgba(255,255,255,.03); border-radius:10px; }
.l180-mon-row.rec .l180-mon-row-name{ color:#fff; font-weight:800; }
.l180-mon-row.rec .l180-mon-row-marker{ animation:l180monpulse 2.4s ease-in-out infinite; }
.l180-mon-stone-badge{ font-family:'Montserrat',sans-serif; font-weight:900; font-size:8px;
  letter-spacing:.08em; color:#0a0a0b; padding:2px 7px; border-radius:20px; flex:0 0 auto; }
@keyframes l180monpulse{ 0%,100%{ filter:brightness(1);} 50%{ filter:brightness(1.25);} }
.l180-mon-panel-hint{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:11.5px;
  letter-spacing:.03em; padding:8px 24px 20px; }

/* the philosophy — load-bearing principles */
.l180-mon-foot{ margin-top:54px; padding-top:38px; position:relative; }
.l180-mon-foot::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(560px,72%); height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent); }
.l180-mon-foot-head{ max-width:620px; margin:0 auto; text-align:center; }
.l180-mon-foot-title{ font-family:'Montserrat',sans-serif; font-weight:900; font-size:25px;
  line-height:1.15; color:#fff; margin:8px 0 0; }
.l180-mon-foot-lead{ font-family:'Open Sans',sans-serif; font-size:14px; line-height:1.65;
  color:rgba(255,255,255,.66); margin:12px auto 0; max-width:540px; }

.l180-mon-pillars{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px;
  margin-top:30px; }
.l180-mon-pillar{ position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.09);
  border-radius:14px; padding:20px 20px 20px; background:rgba(255,255,255,.025);
  transition:transform .22s cubic-bezier(.22,1,.36,1), border-color .22s, background .22s; }
.l180-mon-pillar::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--accent), color-mix(in oklch, var(--accent) 20%, transparent)); }
.l180-mon-pillar:hover{ transform:translateY(-3px);
  border-color:color-mix(in oklch, var(--accent) 45%, transparent);
  background:color-mix(in oklch, var(--accent) 6%, rgba(255,255,255,.025)); }
.l180-mon-pillar-n{ display:block; font-family:'Montserrat',sans-serif; font-weight:900; font-size:26px;
  line-height:1; letter-spacing:.02em; color:var(--accent); opacity:.85; margin-bottom:12px; }
.l180-mon-pillar-t{ margin:0 0 6px; font-family:'Montserrat',sans-serif; font-weight:800; font-size:14.5px;
  line-height:1.25; color:#fff; }
.l180-mon-pillar-txt{ margin:0; font-family:'Open Sans',sans-serif; font-size:12.5px; line-height:1.55;
  color:rgba(255,255,255,.66); }

/* ---------- lens ---------- */
.l180-lensgrid{ display:flex; flex-direction:column; gap:10px; max-width:520px; margin:8px auto 0; }
.l180-lenscard{ border:1px solid; border-radius:12px; padding:14px 18px; font-size:14px; text-align:left;
  color:rgba(255,255,255,.94); background:rgba(255,255,255,.03); }

/* ---------- funnel engine ---------- */
.l180-journey{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 22px; margin:6px auto 22px; max-width:540px; opacity:.5; }
.l180-journey-step{ display:flex; align-items:center; gap:8px; font-size:11.5px; color:rgba(255,255,255,.84);
  font-family:'Montserrat',sans-serif; font-weight:600; }
.l180-journey-dot{ width:20px; height:20px; border-radius:50%; border:1px solid; display:flex; align-items:center;
  justify-content:center; font-size:10px; font-weight:800; }
.l180-timepill{ display:inline-block; font-family:'Montserrat',sans-serif; font-weight:700; font-size:12px;
  color:rgba(255,255,255,.84); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.22);
  padding:8px 16px; border-radius:22px; }
.l180-framegrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:20px 0 4px; }
.l180-framecard{ position:relative; border:1px solid; border-radius:14px; padding:16px 16px 16px 18px;
  background:rgba(255,255,255,.03); display:flex; flex-direction:column; gap:4px; }
.l180-framedot{ position:absolute; top:18px; right:16px; width:10px; height:10px; border-radius:50%; }
.l180-framecard strong{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:16px; }
.l180-framedesc{ font-size:12.5px; color:rgba(255,255,255,.76); line-height:1.45; }
.l180-exrow{ display:flex; align-items:center; justify-content:space-between; }
.l180-whybtn{ background:transparent; border:1px solid rgba(255,255,255,.26); color:rgba(255,255,255,.76);
  font-size:11px; font-family:'Montserrat',sans-serif; font-weight:600; padding:5px 11px; border-radius:18px; transition:all .2s; }
.l180-whybtn:hover{ color:#fff; border-color:rgba(255,255,255,.58); }
.l180-whybox{ margin:10px 0 0; font-size:12.5px; color:rgba(255,255,255,.8); line-height:1.5;
  background:rgba(255,255,255,.04); border-left:2px solid rgba(255,255,255,.36); padding:10px 14px; border-radius:0 8px 8px 0; }
.l180-ratescale{ display:flex; flex-direction:column; gap:8px; margin-top:18px; }
.l180-ratebtn{ display:flex; align-items:center; gap:13px; text-align:left; padding:13px 18px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.2); border-radius:12px; color:#fff;
  font-size:14.5px; transition:all .22s ease; }
.l180-ratebtn:hover{ border-color:color-mix(in oklch,var(--hue) 55%,transparent); background:rgba(255,255,255,.07); transform:translateX(3px); }
.l180-ratebtn.sel{ border-color:var(--hue); background:color-mix(in oklch,var(--hue) 14%,transparent); }
.l180-ratedot{ flex:0 0 auto; width:13px; height:13px; border-radius:50%; border:2px solid rgba(255,255,255,.42); transition:all .22s; }
.l180-ratebtn.sel .l180-ratedot{ border-color:var(--hue); background:var(--hue); box-shadow:0 0 12px var(--hue); }
.l180-ratelab{ font-family:'Montserrat',sans-serif; font-weight:600; }
.l180-flagbtn{ margin-top:18px; background:transparent; border:1px dashed rgba(31,201,229,.4); color:var(--cyan);
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:11.5px; padding:8px 14px; border-radius:20px; transition:all .2s; }
.l180-flagbtn.on{ background:rgba(31,201,229,.12); border-style:solid; }
.l180-dnabar-val{ flex:0 0 30px; text-align:left; font-family:'Montserrat',sans-serif; font-weight:800; font-size:13px; }
.l180-dnabar-track{ position:relative; }
.l180-bench{ position:absolute; top:-2px; bottom:-2px; width:2px; background:rgba(255,255,255,.7); border-radius:2px; }
.l180-bench-key{ display:flex; align-items:center; justify-content:center; gap:7px; font-size:11px; color:rgba(255,255,255,.62); margin:-6px 0 4px; }
.l180-bench-mark{ display:inline-block; width:2px; height:12px; background:rgba(255,255,255,.7); }
.l180-observe{ text-align:left; max-width:520px; margin:14px auto 0; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
.l180-observe li{ position:relative; padding-left:22px; font-size:14px; color:rgba(255,255,255,.92); line-height:1.5; }
.l180-observe li:before{ content:""; position:absolute; left:4px; top:8px; width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.66); }
.l180-emailrow{ display:flex; gap:8px; margin-top:8px; }
.l180-emailrow input{ flex:1; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.26); border-radius:9px;
  padding:9px 12px; color:#fff; font-size:13px; font-family:'Open Sans',sans-serif; }
.l180-emailrow input::placeholder{ color:rgba(255,255,255,.58); }
.l180-emailrow button{ background:linear-gradient(92deg,color-mix(in oklch,var(--hue) 88%,white 12%),var(--hue));
  border:none; color:#0a0a0b; font-family:'Montserrat',sans-serif; font-weight:800; font-size:12.5px; padding:9px 16px; border-radius:9px; transition:all .2s; }
.l180-emailrow button:disabled{ opacity:.4; cursor:not-allowed; }
.l180-implications{ display:flex; flex-direction:column; gap:10px; margin:16px 0; }
.l180-impcard{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.16); border-radius:12px;
  padding:14px 16px; font-size:14px; color:rgba(255,255,255,.94); line-height:1.5; }
.l180-impcard span{ font-weight:800; margin-right:6px; }
.l180-bridge{ border:1px solid; border-radius:14px; padding:16px 20px; background:rgba(255,255,255,.03); margin-top:8px; }
.l180-bridge p{ font-family:Georgia,serif; font-style:italic; font-size:16px; color:#fff; margin:6px 0 0; line-height:1.5; }
.l180-ctastack{ display:flex; flex-direction:column; gap:12px; align-items:center; margin-top:22px; }
.l180-ctawide{ width:100%; max-width:420px; }
.l180-textcta{ background:transparent; border:none; color:rgba(255,255,255,.7); font-size:13px; text-decoration:underline;
  text-underline-offset:3px; font-family:'Montserrat',sans-serif; font-weight:600; }
.l180-textcta:hover{ color:#fff; }
.l180-funnel-agentbar{ padding:0 26px; }
.l180-agentpanel{ max-width:760px; margin:0 auto; background:rgba(31,201,229,.07); border:1px solid rgba(31,201,229,.28);
  border-radius:12px; padding:12px 16px; }
.l180-agentpanel-h{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cyan); margin-bottom:4px; }
.l180-agentpanel p{ font-size:13px; color:rgba(255,255,255,.9); margin:0; line-height:1.45; }

/* ---------- DNA framing + path ---------- */
.l180-dnatypes{ display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.l180-dnatype{ display:flex; align-items:flex-start; gap:14px; border:1px solid; border-radius:14px;
  padding:14px 16px; background:rgba(255,255,255,.03); position:relative; }
.l180-dnatype-dot{ flex:0 0 auto; width:12px; height:12px; border-radius:50%; margin-top:5px; box-shadow:0 0 12px currentColor; }
.l180-dnatype strong{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:16px; }
.l180-dnatype-dom{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(255,255,255,.62); margin-left:10px; }
.l180-dnatype p{ font-size:13px; color:rgba(255,255,255,.82); margin:4px 0 0; line-height:1.45; }
.l180-pathpreview{ border:1px solid; border-radius:16px; padding:20px 24px; background:rgba(255,255,255,.03);
  max-width:480px; margin:6px auto 0; }
.l180-pathpreview-top{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:15px; }

/* ---------- Type B tool (Cash Flow Audit) ---------- */
.l180-toolinputs{ display:flex; flex-direction:column; gap:13px; margin-top:16px; }
.l180-toolrow label{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:rgba(255,255,255,.94); margin-bottom:5px; }
.l180-toolrow-income label{ color:#fff; font-size:14.5px; font-family:'Montserrat',sans-serif; font-weight:700; }
.l180-workingtag{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:8.5px; letter-spacing:.1em; text-transform:uppercase;
  color:#24CE62; border:1px solid rgba(36,206,98,.4); border-radius:12px; padding:2px 7px; }
.l180-toolfield{ display:flex; align-items:center; gap:14px; }
.l180-toolfield input[type=range]{ flex:1; }
.l180-toolval{ flex:0 0 76px; text-align:right; font-family:'Montserrat',sans-serif; font-weight:800; font-size:14px; color:rgba(255,255,255,.92); }
.l180-cfbar{ display:flex; height:18px; border-radius:9px; overflow:hidden; margin:22px 0 10px; background:rgba(255,255,255,.06); }
.l180-cfbar > div{ transition:width .25s ease; }
.l180-cflegend{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; font-size:12px; color:rgba(255,255,255,.84); }
.l180-cflegend span{ display:flex; align-items:center; gap:6px; }
.l180-cflegend i{ width:10px; height:10px; border-radius:3px; }
.l180-surplusline{ margin-top:16px; text-align:center; font-size:15px; color:rgba(255,255,255,.9); }
.l180-surplusline strong{ font-family:'Montserrat',sans-serif; font-weight:800; color:#24CE62; font-size:18px; }
.l180-surplusline.neg strong{ color:#DC2626; }
.l180-surplusline span{ font-size:12.5px; color:rgba(255,255,255,.66); }
.l180-cfstats{ display:flex; gap:14px; justify-content:center; margin:22px 0 8px; }
.l180-cfstat{ flex:1; max-width:170px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.16); border-radius:14px; padding:18px 12px; }
.l180-cfstat-num{ display:block; font-family:'Montserrat',sans-serif; font-weight:900; font-size:26px; line-height:1; }
.l180-cfstat-lab{ display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.66); margin-top:7px; font-family:'Montserrat',sans-serif; font-weight:700; }

/* ---------- Type C ranker (Vision & Values) ---------- */
.l180-rankcount{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:13px; }
.l180-ranklist{ display:flex; flex-direction:column; gap:8px; margin:16px 0; }
.l180-rankitem{ display:flex; align-items:center; gap:12px; border:1px solid; border-radius:12px; padding:11px 14px;
  background:rgba(255,255,255,.04); animation:l180fade .3s ease; }
.l180-rankpos{ flex:0 0 auto; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:'Montserrat',sans-serif; font-weight:800; font-size:12px; color:#0a0a0b; }
.l180-rankname{ flex:1; text-align:left; font-family:'Montserrat',sans-serif; font-weight:700; font-size:15px; }
.l180-rankctrls{ display:flex; gap:5px; }
.l180-rankctrls button{ width:30px; height:30px; border-radius:8px; border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.05); color:#fff; font-size:13px; transition:all .2s; }
.l180-rankctrls button:hover:not(:disabled){ background:rgba(255,255,255,.22); }
.l180-rankctrls button:disabled{ opacity:.28; cursor:not-allowed; }
.l180-rankx{ color:rgba(255,255,255,.7) !important; }
.l180-rankgrid{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-top:6px; }
.l180-rankchip{ display:flex; align-items:center; gap:8px; border:1px solid color-mix(in oklch,var(--c) 45%,transparent);
  background:color-mix(in oklch,var(--c) 8%,transparent); color:#fff; font-family:'Montserrat',sans-serif; font-weight:600;
  font-size:13.5px; padding:9px 15px; border-radius:24px; transition:all .2s; }
.l180-rankchip:hover{ background:color-mix(in oklch,var(--c) 22%,transparent); transform:translateY(-2px); }
.l180-rankchip i{ width:9px; height:9px; border-radius:50%; }
.l180-hierarchy{ display:flex; flex-direction:column; gap:7px; max-width:420px; margin:18px auto 0; }
.l180-hieritem{ display:flex; align-items:center; gap:12px; border-left:3px solid; border-radius:0 10px 10px 0;
  background:rgba(255,255,255,.04); padding:11px 14px; }
.l180-hierpos{ flex:0 0 auto; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:'Montserrat',sans-serif; font-weight:800; font-size:11px; color:#0a0a0b; }
.l180-hiername{ flex:1; text-align:left; font-family:'Montserrat',sans-serif; font-weight:700; font-size:15px; }
.l180-hiertheme{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:10px; letter-spacing:.1em; text-transform:uppercase; }

/* ---------- Type D reflection (Belief Inventory) ---------- */
.l180-beliefs{ display:flex; flex-direction:column; gap:8px; margin:16px 0; }
.l180-belief{ display:flex; align-items:center; gap:13px; text-align:left; padding:13px 16px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.2); border-radius:12px; color:#fff;
  font-size:15px; font-family:Georgia,serif; font-style:italic; transition:all .22s ease; }
.l180-belief:hover{ border-color:color-mix(in oklch,var(--hue) 50%,transparent); background:rgba(255,255,255,.07); }
.l180-belief.on{ border-color:var(--hue); background:color-mix(in oklch,var(--hue) 13%,transparent); }
.l180-belief-check{ flex:0 0 auto; width:18px; height:18px; border-radius:5px; border:2px solid rgba(255,255,255,.42); transition:all .2s; position:relative; }
.l180-belief.on .l180-belief-check{ border-color:var(--hue); background:var(--hue); }
.l180-belief.on .l180-belief-check:after{ content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; color:#0a0a0b; font-family:'Open Sans',sans-serif; font-style:normal; font-weight:800; }
.l180-reflectrow{ display:flex; align-items:center; justify-content:space-between; margin-top:6px; gap:12px; }
.l180-reflectrow label{ font-size:14px; font-weight:600; color:rgba(255,255,255,.94); }
.l180-aibtn{ flex:0 0 auto; background:rgba(255,255,255,.06); border:1px solid color-mix(in oklch,var(--hue) 40%,transparent);
  color:#fff; font-family:'Montserrat',sans-serif; font-weight:700; font-size:11.5px; padding:7px 13px; border-radius:18px; transition:all .2s; }
.l180-aibtn:hover:not(:disabled){ background:color-mix(in oklch,var(--hue) 18%,transparent); }
.l180-aibtn:disabled{ opacity:.5; cursor:wait; }
.l180-reflecttext{ width:100%; margin-top:10px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.24);
  border-radius:12px; padding:13px 15px; color:#fff; font-size:14px; font-family:'Open Sans',sans-serif; line-height:1.5; resize:vertical; }
.l180-reflecttext::placeholder{ color:rgba(255,255,255,.38); }

/* ---------- services lens (chips, note, footer) ---------- */
/* related-services chip strip inside the tier modal (process lens) +
   the "delivered in" row inside the service pop-up */
.l180-servicechips{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:22px;
  padding-top:16px; border-top:1px solid rgba(255,255,255,.1); }
.l180-servicechip{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:11px; letter-spacing:.02em;
  color:color-mix(in oklch,var(--hue) 72%,#fff); background:color-mix(in oklch,var(--hue) 12%,transparent);
  border:1px solid color-mix(in oklch,var(--hue) 38%,transparent); border-radius:20px; padding:6px 13px;
  transition:all .22s ease; }
button.l180-servicechip{ cursor:pointer; }
button.l180-servicechip:hover{ background:color-mix(in oklch,var(--hue) 80%,white 8%); border-color:transparent; color:#0a0a0b; }
/* "delivered through our X process" note under the services-lens card grid */
.l180-services-note{ margin:18px 0 0; text-align:center; font-family:'Open Sans',sans-serif; font-style:italic;
  font-size:12.5px; color:rgba(255,255,255,.6); }

/* standalone-services footer strip (Consulting, Rescue My IUL) — services lens only */
.l180-servicefooter{ position:relative; z-index:5; padding:40px 26px 64px; text-align:center;
  background:linear-gradient(180deg,#0f0f10,#0a0a0b); }
.l180-servicefooter-head{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:20px; }
.l180-servicefooter-cards{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; max-width:760px; margin:0 auto; }
.l180-servicefootcard{ flex:1 1 300px; max-width:360px; text-align:left; cursor:pointer;
  background:color-mix(in oklch,var(--hue) 7%,rgba(255,255,255,.025));
  border:1px solid color-mix(in oklch,var(--hue) 32%,rgba(255,255,255,.1)); border-radius:16px; padding:20px 22px;
  transition:all .25s ease; }
.l180-servicefootcard:hover{ transform:translateY(-2px);
  border-color:color-mix(in oklch,var(--hue) 60%,transparent);
  box-shadow:0 14px 40px color-mix(in oklch,var(--hue) 22%,transparent); }
.l180-servicefootcard h4{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:16px; color:#fff; margin:0 0 6px; }
.l180-servicefootcard p{ font-size:13px; line-height:1.5; color:rgba(255,255,255,.74); margin:0 0 14px; }
.l180-servicefootcard-cta{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:12px;
  color:color-mix(in oklch,var(--hue) 80%,#fff); display:inline-flex; align-items:center; gap:6px; }
.l180-servicefootcard-cta .arr{ transition:transform .25s ease; }
.l180-servicefootcard:hover .l180-servicefootcard-cta .arr{ transform:translateX(3px); }
.l180-reframes{ display:flex; flex-direction:column; gap:10px; max-width:520px; margin:16px auto 0; text-align:left; }
.l180-reframe{ border:1px solid rgba(255,255,255,.16); border-radius:13px; padding:14px 16px; background:rgba(255,255,255,.03); }
.l180-reframe-belief{ font-family:Georgia,serif; font-style:italic; font-size:15px; color:rgba(255,255,255,.84); }
.l180-reframe-arrow{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:9px; letter-spacing:.14em; text-transform:uppercase; margin:7px 0 4px; }
.l180-reframe-new{ font-size:13.5px; color:#fff; line-height:1.5; }
.l180-reflectback{ border-left:2px solid rgba(255,255,255,.36); padding:10px 16px; margin:16px auto 0; max-width:520px; text-align:left; }
.l180-reflectback p{ font-family:Georgia,serif; font-style:italic; font-size:15px; color:#fff; margin:5px 0 0; line-height:1.5; }

/* ---------- responsive ---------- */
@media (max-width:820px){
  .l180-streams, .l180-streams--2, .l180-streams--4{ grid-template-columns:1fr; }
  .l180-sheet{ position:fixed; bottom:0; left:0; right:0; width:100%; max-height:92vh; border-radius:22px 22px 0 0;
    animation:l180sheetup .42s cubic-bezier(.22,1,.36,1); }
  @keyframes l180sheetup{ from{transform:translateY(100%);} to{transform:none;} }
  .l180-backdrop.closing .l180-sheet{ animation:l180sheetdown .3s cubic-bezier(.4,0,1,1) forwards; }
  @keyframes l180sheetdown{ from{transform:none;} to{transform:translateY(100%);} }
  .l180-backdrop{ padding:0; align-items:flex-end; }
  .l180-sheet-inner{ padding:30px 22px 26px; }
  .l180-tierimg-band{ margin:-30px -22px 20px; height:140px; }
  .l180-modal-title{ font-size:30px; }
  .l180-navbtn-name{ display:none; }
  .l180-cell{ min-height:54px; }
  .l180-fbig{ font-size:30px; }
  .l180-framegrid{ grid-template-columns:1fr; }
  .l180-journey{ gap:10px 16px; }
  .l180-railsvg{ display:none; }
  .l180-edu-contrast{ grid-template-columns:1fr; }
  .l180-edu-title{ font-size:25px; }
  /* monument */
  .l180-mon-title{ font-size:34px; }
  .l180-mon-tag{ font-size:15px; }
  .l180-mon-entry{ border-radius:16px; }
  .l180-mon-build{ flex-direction:column; gap:22px; }
  .l180-mon-nav{ width:100%; max-width:560px; margin:0 auto; flex-wrap:wrap; }
  .l180-mon-panel{ position:static; width:100%; }
  .l180-mon-navhint{ display:block; text-align:center; font-size:11.5px; font-style:italic;
    color:rgba(255,255,255,.5); margin:14px 0 0; width:100%; }
  .l180-mon-band{ height:58px; }
  .l180-mon-band-name{ font-size:13px; }
  .l180-mon-panel-name{ font-size:20px; }
  /* stack label over its position track so names read fully */
  .l180-mon-plot-head{ grid-template-columns:1fr; }
  .l180-mon-plot-head > span:first-child{ display:none; }
  .l180-mon-row{ grid-template-columns:1fr; gap:5px; padding:10px 0; }
  .l180-mon-row-name{ white-space:normal; }
  .l180-mon-row-track{ height:18px; }
}

/* ---------- motion safety ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-delay:0s !important;
    animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}