/* 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-modetoggle{ 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{ 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{ 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; }

/* ---------- 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-close{ position:absolute; top:16px; right:18px; z-index:5; 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; }
.l180-close:hover{ background:rgba(255,255,255,.24); }
.l180-navgroup{ position:absolute; top:16px; right:62px; z-index:5; display:flex; gap:8px; }
.l180-navarrow{ 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:15px; }
.l180-navarrow:hover{ background:rgba(255,255,255,.24); }

.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; }
.l180-streamcard{ background:linear-gradient(180deg,#fafafa,#f0f0f1); border:1px solid rgba(18,18,20,.14);
  border-radius:16px; padding:20px 18px; display:flex; flex-direction:column; gap:11px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease; }
.l180-streamcard:hover{ border-color:color-mix(in oklch, var(--hue) 60%, transparent);
  transform:translateY(-3px); box-shadow:0 16px 44px rgba(0,0,0,.3), 0 0 0 1px color-mix(in oklch,var(--hue) 30%,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:#141415; }
.l180-streamone{ font-size:13px; color:#52525a; line-height:1.45; margin:0; }
.l180-depth{ border-top:1px solid rgba(18,18,20,.16); padding-top:10px; }
.l180-depth p{ font-size:11.5px; color:#6e6e76; 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:#8a8a92; }
.l180-depth-agent{ border-top-color:color-mix(in oklch, var(--hue) 35%, transparent); }
.l180-depthlabel-agent{ color:color-mix(in oklch, var(--hue) 70%, #141415); }
.l180-depth-agent p{ color:color-mix(in oklch, var(--hue) 45%, #52525a); }
.l180-streamcta{ margin-top:auto; background:transparent; border:1.5px solid color-mix(in oklch,var(--hue) 55%,#141415);
  color:color-mix(in oklch,var(--hue) 55%,#141415); 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) 88%,white 12%); border-color:transparent; color:#0a0a0b; }
.l180-streamcta .arr{ transition:transform .25s ease; }
.l180-streamcta:hover .arr{ transform:translateX(3px); }
.l180-sheet-foot{ margin-top:22px; text-align:center; font-size:11.5px; color:rgba(255,255,255,.58); }

/* ---------- 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 ---------- */
.l180-subwrap{ max-width:1180px; margin:0 auto; padding:30px 26px 60px; }
.l180-subhead{ text-align:center; margin-bottom:26px; }
.l180-subentry{ display:inline-block; border:1px solid; border-radius:12px; padding:12px 20px; font-size:13.5px;
  color:rgba(255,255,255,.92); background:rgba(255,255,255,.03); margin-top:10px; line-height:1.5; }
.l180-riskaxis{ display:flex; align-items:center; gap:14px; max-width:760px; margin:0 auto 22px;
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:11px; color:rgba(255,255,255,.7); letter-spacing:.04em; }
.l180-riskbar{ flex:1; height:8px; border-radius:5px;
  background:linear-gradient(90deg,#1FC9E5,#24CE62,#FBBF24,#F97316,#DC2626); }
.l180-sublevels{ display:flex; flex-direction:column; gap:14px; }
.l180-sublevel{ display:flex; flex-direction:column; align-items:center; gap:10px;
  animation:l180stepin .55s cubic-bezier(.22,1,.36,1) both; }
.l180-sublevels .l180-sublevel:nth-child(1){ animation-delay:.06s; }
.l180-sublevels .l180-sublevel:nth-child(2){ animation-delay:.15s; }
.l180-sublevels .l180-sublevel:nth-child(3){ animation-delay:.24s; }
.l180-sublevels .l180-sublevel:nth-child(4){ animation-delay:.33s; }
.l180-sublevels .l180-sublevel:nth-child(5){ animation-delay:.42s; }
.l180-sublevel-label{ display:flex; align-items:center; gap:12px; text-align:left; }
.l180-sublevel-num{ font-family:'Montserrat',sans-serif; font-weight:900; font-size:18px; }
.l180-sublevel-label strong{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:15px; display:block; }
.l180-sublevel-label em{ font-style:normal; font-size:12px; color:rgba(255,255,255,.66); }
.l180-cellrow{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap; }
.l180-cell{ position:relative; min-height:62px; border:1px solid; border-radius:11px; padding:10px 12px;
  display:flex; flex-direction:column; gap:6px; justify-content:center; transition:all .3s cubic-bezier(.22,1,.36,1); cursor:default; }
.l180-cell-dot{ width:9px; height:9px; border-radius:50%; }
.l180-cell-name{ font-size:12.5px; font-weight:600; line-height:1.25; color:#fff; }
.l180-cell-badge{ position:absolute; top:-9px; right:8px; font-family:'Montserrat',sans-serif; font-weight:800;
  font-size:8.5px; letter-spacing:.08em; color:#0a0a0b; padding:3px 8px; border-radius:20px; }
.l180-cell.rec{ animation:l180pulse 2.2s ease-in-out infinite; }
@keyframes l180pulse{ 0%,100%{ filter:brightness(1);} 50%{ filter:brightness(1.18);} }
.l180-subedu{ margin-top:42px; text-align:center; }
.l180-edugrid{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:14px; }
.l180-educard{ border:1px solid; border-radius:12px; padding:14px 20px; font-size:13px; color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.03); max-width:280px; }

/* ---------- 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); }
.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{ 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-cell{ min-height:54px; }
  .l180-fbig{ font-size:30px; }
  .l180-framegrid{ grid-template-columns:1fr; }
  .l180-journey{ gap:10px 16px; }
  .l180-railsvg{ display:none; }
}

/* ---------- 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; }
}