:root{
  --ink:#141412; --sub:#6C6C69; --mute:#9B9B97; --faint:#B0B0AB;
  --hair:#E9E9EC; --soft:#F1F1F4; --canvas:#F6F6F8; --card:#FFF; --ground:#FBFBFC;
  --violet:#5B5BD6; --vio-txt:#4A4AC2; --vio-bg:#F3F3FD; --vio-edge:#D6D6F6;
  --amb-txt:#9A5A00; --amb-bg:#FEF7EC; --amb-edge:#F6DFC0;
  --red-txt:#C4302A; --paid:#1F7A4D; --paid-bg:#F1FAF5; --paid-edge:#CFE9DC;
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --w:1480px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--card);color:var(--ink);font-family:var(--sans);font-size:16px;
     line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--w);margin:0 auto;padding:0 32px}

/* header */
header{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.88);
       border-bottom:1px solid transparent;transition:border-color .3s ease}
header.stuck{backdrop-filter:saturate(1.4) blur(14px);border-bottom-color:var(--hair)}
.nav{display:flex;align-items:center;gap:26px;height:66px}
.nav img.wm{height:21px;width:auto}
.nav a.lk{font-size:14.5px;color:var(--sub)}
.nav a.lk:hover{color:var(--ink)}
.nav a.lk.on{color:var(--ink);font-weight:520}
.nav .sp{margin-left:auto}
.btn{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:520;padding:11px 20px;
     border-radius:99px;border:1px solid transparent;background:var(--ink);color:#fff}
.btn:hover{opacity:.88}
.btn.gh{background:transparent;color:var(--ink);border-color:var(--hair)}
.btn.gh:hover{background:var(--canvas)}

/* type + section furniture */
.S{padding:104px 0 0}
/* --- page voice: display type on plain white, nothing else on that ground --- */
.say{max-width:1180px}
.say .eyeb{margin-bottom:22px}
/* --- product voice: a recessed plinth, with the mock as a white card on it --- */
.plinth{margin-top:48px;background:var(--canvas);border-radius:var(--r-xl);
        padding:clamp(20px,2.6vw,40px);position:relative}
.plinth.tint{background:var(--vio-bg)}
.plinth.flat{background:var(--soft)}
.mockLbl{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;
         letter-spacing:.09em;text-transform:uppercase;color:var(--mute);background:var(--card);
         border:1px solid var(--hair);border-radius:99px;padding:5px 12px;margin-bottom:16px}
.mockLbl i{width:5px;height:5px;border-radius:50%;background:var(--faint);flex:none;font-style:normal}
.mockLbl.on{color:var(--vio-txt);border-color:var(--vio-edge)}
.mockLbl.on i{background:var(--violet)}
.S.last{padding-bottom:96px}
.ground{background:var(--ground)}
.eyeb{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:560;letter-spacing:.02em;
      color:var(--mute);margin-bottom:20px}
.eyeb i{width:12px;height:12px;flex:none;font-style:normal;
  background:url(../img/lumina-emblem.png) center/contain no-repeat}
h2.sec{font-size:clamp(25px,2.55vw,36px);line-height:1.14;letter-spacing:-.026em;font-weight:560;
       margin:0 0 16px;max-width:50ch;text-wrap:balance}
h2.sec em{font-style:normal;color:var(--mute)}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px}
.head .more{font-size:14px;font-weight:520;color:var(--vio-txt);white-space:nowrap;padding-bottom:5px}
.head .more:hover{text-decoration:underline}
.lede{font-size:18.5px;line-height:1.5;color:var(--sub);max-width:56ch;margin:0}
.lede b{color:var(--ink);font-weight:560}
.surf{border:1px solid var(--hair);border-radius:var(--r-lg);background:var(--card);overflow:hidden}
.bar{display:flex;align-items:center;gap:11px;padding:12px 18px;border-bottom:1px solid var(--hair);
     background:var(--canvas);font-size:12.5px;color:var(--mute)}
.bar b{color:var(--ink);font-weight:600;letter-spacing:-.01em}
.bar .st{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--faint)}
.strip{display:flex;background:var(--ink);color:#fff}
.strip div{padding:11px 18px;font-size:11.5px;border-right:1px solid rgba(255,255,255,.14);flex:1}
.strip div:last-child{border-right:0}
.strip div b{font-weight:600;font-variant-numeric:tabular-nums}
.strip div span{color:rgba(255,255,255,.6);margin-left:6px}

/* hero — a real photograph of the product in use. The copy sits in the photo's own
   white space; type is sized in container units so it scales with the image and
   never drifts onto the laptop or the hair. */
.hero{padding:0}
.hStage{position:relative;container-type:inline-size}
.hTxt{position:absolute;top:0;left:43%;right:4%;z-index:2;padding-top:1.3cqw}
.hero .eyeb{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
  margin-bottom:1.1cqw}
.hLogo{display:block;height:clamp(19px,1.4cqw,29px);width:auto;margin-bottom:1.05cqw}
.h1{font-size:clamp(26px,2.7cqw,60px);line-height:1.05;letter-spacing:-.032em;font-weight:560;margin:0;max-width:none}
.h1 .gr{color:var(--mute)}
.sub{font-size:clamp(13px,1.12cqw,22px);line-height:1.5;color:var(--sub);max-width:58ch;margin:.9cqw 0 0}
.cta{display:flex;gap:16px;align-items:center;margin-top:1.2cqw}
.tlink{font-size:14.5px;font-weight:520;color:var(--vio-txt)}
.tlink:hover{text-decoration:underline}
.hImg{display:block;width:100%;height:auto}
.hero .certs{display:flex;align-items:center;justify-content:center;gap:clamp(22px,2.9vw,40px);flex-wrap:wrap;
  padding:30px 0 0;border-top:1px solid var(--hair)}
.certs img{width:auto;height:22px;max-width:150px;object-fit:contain;opacity:.8}
/* below 1280px the photo's white space is too small to hold the copy: stack it,
   crop off the photo's empty top, and fade the crop into the page rather than show a hard cut */
@media (max-width:1279px){
  .hTxt{position:static;padding:56px 32px 0;max-width:1040px}
  .h1{font-size:clamp(30px,5.2vw,46px)}
  .sub{font-size:17px;margin-top:16px}
  .cta{margin-top:24px;flex-wrap:wrap}
  .hImg{margin-top:8px;aspect-ratio:1.85;object-fit:cover;object-position:60% 100%;
        -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%);
        mask-image:linear-gradient(180deg,transparent 0,#000 24%)}
}
@media (max-width:640px){ .hTxt{padding:40px 22px 0} }

/* ---- two sources, one note ---- */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:40px;align-items:start}
.vsHd{padding-left:2px}
.vsT{font-size:clamp(20px,2.1vw,27px);line-height:1.15;letter-spacing:-.02em;font-weight:560;
     margin-top:4px}
.vsT.dim{color:var(--mute)}
.vsD{font-size:13.5px;color:var(--mute);margin-top:7px}
.nb{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-md);padding:18px 20px}
.nb.dead{color:var(--mute)}
.nb .lb{font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;
        color:var(--faint);margin:14px 0 4px}
.nb .lb:first-child{margin-top:0}
.nb p{margin:0;font-size:12.5px;line-height:1.6}
.nb.dead p{color:var(--mute)}
.nb.live p{color:var(--ink)}
.nb p .add{background:var(--vio-bg);box-shadow:0 0 0 1px var(--vio-edge);border-radius:2px;
           padding:0 3px;color:var(--vio-txt)}
.src{display:inline-flex;align-items:baseline;gap:5px;font-family:var(--mono);font-size:9px;
     letter-spacing:.04em;color:var(--vio-txt);background:var(--vio-bg);border:1px solid var(--vio-edge);
     border-radius:99px;padding:1px 7px;margin-left:5px;vertical-align:1px}
.codeRow{display:flex;flex-wrap:wrap;gap:6px;margin-top:15px}
.codeRow span{font-size:11px;font-weight:520;border:1px solid var(--hair);border-radius:99px;
              padding:3px 10px;background:var(--canvas);color:var(--sub)}
.codeRow span.hi{border-color:var(--vio-edge);background:var(--vio-bg);color:var(--vio-txt)}
.verdict{margin-top:16px;padding-top:14px;border-top:1px solid var(--hair);font-size:13px;
         color:var(--mute);line-height:1.5}
.verdict b{color:var(--amb-txt);font-weight:560}
.verdict.on b{color:var(--paid)}

/* ---- the chart story: Lens + specialty, told on the REAL chart ----
   Chapter text scrolls up through a band under the header; beneath it the live
   One Chart build sits in a fixed stage. Each chapter sets the chart's state
   (what has been filed, how Focus is ranked) and moves a camera over it, so the
   reader is always looking at the part that just changed. The last chapter
   pulls back to the whole chart and hands it over. */
.story{--hdr:66px;--band:172px;padding-top:0;padding-bottom:0}
.stWrap{position:relative}
.stStage{position:sticky;top:var(--hdr);height:calc(100vh - var(--hdr));z-index:2;pointer-events:none;
  display:flex;flex-direction:column}
.stBand{height:var(--band);flex:none;position:relative;overflow:hidden;transition:height .7s cubic-bezier(.2,.75,.25,1)}
.story.live .stBand{height:0}
.stChart{flex:1;min-height:0;position:relative;background:var(--ground);pointer-events:auto;padding-bottom:16px}
.stCh{position:relative;z-index:1;margin-top:calc(-1 * (100vh - var(--hdr)))}
.ch{min-height:58vh;padding-top:16px}
.ch:first-child{padding-top:24px}
.ch:last-child{min-height:calc(100vh - var(--hdr) - var(--band) + 25vh)}
.ch .eyeb{margin-bottom:8px}
.ch h2.sec{font-size:clamp(24px,2.3vw,32px);max-width:52ch}
.ch h2.sec,.ch h3{max-width:none;margin:0}
.ch h3{max-width:52ch;font-size:clamp(22px,2.1vw,29px);line-height:1.12;letter-spacing:-.026em;font-weight:560}
.ch h3 em{font-style:normal;color:var(--mute)}
.ch p{margin:8px 0 0;font-size:15.5px;line-height:1.5;color:var(--sub);max-width:78ch}
.ch p b{color:var(--ink);font-weight:560}
.ch .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--faint);margin-bottom:6px}
.stDots{position:absolute;right:0;top:calc(var(--band) - 18px);display:flex;gap:6px;pointer-events:none}
.stDots i{width:6px;height:6px;border-radius:50%;background:var(--hair);transition:background .3s ease}
.stDots i.on{background:var(--ink)}

/* above the chart: the four documents, then the specialty switch, then the live caption */
.stTop{height:54px;position:relative}
.stTray,.stSpec,.lvCap{position:absolute;inset:0;display:flex;align-items:center;gap:10px;
  transition:opacity .4s ease,transform .5s cubic-bezier(.2,.75,.25,1)}
.stSpec,.lvCap{opacity:0;transform:translateY(8px);pointer-events:none}
.story.spec .stTray,.story.live .stTray{opacity:0;transform:translateY(-8px);pointer-events:none}
.story.spec:not(.live) .stSpec{opacity:1;transform:none;pointer-events:auto}
.story.live .lvCap{opacity:1;transform:none}
.tDoc{flex:1;min-width:0;display:flex;align-items:center;gap:10px;height:44px;padding:0 12px 0 6px;background:var(--card);
  border:1px solid var(--hair);border-radius:var(--r-md);transition:border-color .35s ease}
.tDoc .th{width:44px;height:32px;border-radius:5px;background:var(--soft);overflow:hidden;position:relative;flex:none}
.tDoc .th>div{position:absolute;left:4px;top:4px;width:360px;transform:scale(.1);transform-origin:0 0}
.tDoc .th img{position:absolute;left:3px;top:5px;width:38px;border-radius:3px}
.tDoc b{font-size:12.5px;font-weight:560;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tDoc>span[data-w]{margin-left:auto;font-family:var(--mono);font-size:9.5px;color:var(--faint);white-space:nowrap}
.tDoc.done{border-color:var(--vio-edge)}
.tDoc.done>span[data-w]{color:var(--vio-txt)}
.stSpec .k{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-right:4px}
.stSpec button{font:inherit;font-size:13px;font-weight:520;color:var(--sub);background:var(--card);border:1px solid var(--hair);
  border-radius:99px;padding:7px 15px;cursor:pointer;transition:border-color .2s ease,color .2s ease}
.stSpec button[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);font-weight:560}
.stSpec button:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.lvCap{font-size:13px;color:var(--mute)}
.lvCap b{color:var(--ink);font-weight:600}
.lvCap i{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--faint)}

/* the camera: a window onto the 1440×900 build, panned and zoomed per chapter */
.stCam{position:absolute;left:0;right:0;top:54px;bottom:0;overflow:hidden}
/* One element moves: the "world" (browser chrome + 1440×900 chart) is panned and
   zoomed with a single composited transform, so chrome and chart can never drift
   apart mid-move. Sizes inside the world are in chart pixels. */
.stCam{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 36px),transparent);
          mask-image:linear-gradient(180deg,#000 calc(100% - 36px),transparent)}
.stWorld{position:absolute;left:0;top:0;width:1440px;height:952px;transform-origin:0 0;will-change:transform;
  border-radius:18px;overflow:hidden;background:var(--card);box-shadow:0 0 0 1px var(--hair);
  transition:transform 1.15s cubic-bezier(.65,0,.35,1)}
.sbBar{height:52px;display:flex;align-items:center;gap:18px;padding:0 20px;background:#ECECEF;border-bottom:1px solid var(--hair);
  transition:opacity .5s ease}
.story:not(.fitmode) .sbBar{opacity:0}
.sbL{display:flex;gap:8px;flex:none}.sbL i{width:12px;height:12px;border-radius:50%;background:#D4D4D9;display:block}
.sbTab{display:flex;align-items:center;gap:9px;font-size:15px;color:var(--ink);background:var(--card);border-radius:9px;
  padding:6px 16px;white-space:nowrap;flex:none}
.sbTab .fv{width:13px;height:13px;border-radius:50%;border:2.5px dotted var(--ink);display:block}
.sbUrl{flex:1;min-width:0;max-width:680px;margin:0 auto;height:30px;border-radius:99px;background:var(--card);border:1px solid var(--hair);
  display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--mono);font-size:13.5px;color:var(--mute);white-space:nowrap}
.sbUrl .lk{width:9px;height:10px;border:2px solid var(--faint);border-radius:2px;display:block}
.stWorld iframe{position:absolute;left:0;top:52px;width:1440px;height:900px;border:0;pointer-events:none;background:var(--card)}
.story.live .stWorld iframe{pointer-events:auto}
.stLoad{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);
  font-size:11px;color:var(--faint);transition:opacity .4s ease}
.story.ready .stLoad{opacity:0;pointer-events:none}

/* flat: short screens get the finished, clickable chart; phones get the story as text */
.story .stFlat{display:none}
.story.flat .stFlat{display:block}
.story.flat .stCh{display:none}
.story.flat .stStage{position:relative;top:0;height:auto;pointer-events:auto;margin-top:28px}
.story.flat .stBand,.story.flat .stTop{display:none}
.story.flat .stChart{padding:0}
.story.flat .stCam{position:relative;top:0;bottom:auto;height:calc(952px * var(--k,1))}
.story.flat .stWorld iframe{pointer-events:auto}
.story.flat .stCam{-webkit-mask-image:none;mask-image:none;border:0;background:transparent}
.story.flat.narrow .stStage{display:none}
.story .stFlat .tlist{display:none}
.story.flat.narrow .stFlat .tlist{display:flex;flex-direction:column;gap:8px;margin-top:22px}
.story.flat.narrow .tlist .tDoc{flex:none}
@media (prefers-reduced-motion:reduce){
  .stWorld,.sbBar,.stTray,.stSpec,.lvCap,.tDoc,.stDots i{transition:none}
}

/* ---- document specimens (used as thumbnails in the tray) ---- */
/* 1 · a chart page from the old EHR, inside the browser it runs in.
   Same window grammar as the landing's seven-tabs section, at specimen scale. */
.bw{background:var(--card);border:1px solid var(--hair);border-radius:10px 10px 0 0;overflow:hidden}
.bw .bwT{display:flex;align-items:flex-end;gap:10px;padding:7px 10px 0;background:#ECECEF}
.bw .bwL{display:flex;gap:5px;padding-bottom:8px;flex:none}
.bw .bwL i{width:7px;height:7px;border-radius:50%;background:#D4D4D9;display:block}
.bw .bwTab{display:flex;align-items:center;gap:6px;min-width:0;max-width:64%;background:var(--card);
  border-radius:6px 6px 0 0;padding:5px 10px 6px;font-size:9.5px;color:var(--ink);white-space:nowrap}
.bw .bwTab .fv{width:10px;height:10px;border-radius:3px;background:#2F4F78;color:#fff;flex:none;
  font:700 6.5px/10px Tahoma,sans-serif;text-align:center}
.bw .bwTab .tt{overflow:hidden;text-overflow:ellipsis}
.bw .bwTab .x{color:var(--faint);margin-left:4px}
.bw .bwA{display:flex;align-items:center;gap:9px;padding:5px 10px 6px;border-bottom:1px solid var(--hair)}
.bw .bwA .nv{display:flex;gap:7px;color:var(--faint);font-size:9px;flex:none}
.bw .bwA .ur{flex:1;min-width:0;height:17px;border-radius:99px;background:var(--canvas);border:1px solid var(--hair);
  display:flex;align-items:center;padding:0 9px;font-family:var(--mono);font-size:8.5px;color:var(--mute);
  white-space:nowrap;overflow:hidden}
.bw .bwA .ur span{overflow:hidden;text-overflow:ellipsis}
.bw .bwA .ur b{color:var(--sub);font-weight:400;flex:none}
/* the app itself — Meridian, ASP.NET era. Its gradients are the legacy vendor's, not ours. */
.lgc{font-family:Tahoma,"Segoe UI",sans-serif;font-size:9px;color:#1B2733;background:#F3F5F8}
.lgc .hb{background:linear-gradient(180deg,#4A6C99,#2F4F78);color:#fff;padding:4px 8px;
         font-weight:700;font-size:9px;display:block}
.lgc .mn{background:#DDE3EA;border-bottom:1px solid #A9B4C2;padding:3px 8px;display:flex;gap:9px;
        font-size:8px;color:#33424F}
.lgc table{width:100%;border-collapse:collapse;font-size:8.5px;background:#fff}
.lgc th{background:linear-gradient(180deg,#EDF1F5,#D7DEE6);border:1px solid #A9B4C2;padding:3px 5px;
       text-align:left;font-size:8px}
.lgc td{border:1px solid #C6CFD8;padding:3px 5px;white-space:nowrap}
.lgc tr:nth-child(even) td{background:#EFF3F7}
.lgc td.al{color:#9B2C24;font-weight:700}

/* 2 · an insurance card — a photographed sample card. Payer marks painted out and
   replaced with an invented name (names as text, never logos). Baked shadow cropped off;
   the card sits flat on the stage with a hairline, per the no-shadow law. */
.card2{display:block;width:86%;max-width:390px;height:auto;margin:2px auto 0;border-radius:11px;
       border:1px solid var(--hair);background:var(--card)}

/* 3 · a lab printout — reference-lab house style: typewriter mono, Times field
   labels, boxed header grid, flagged rows set bold. Monochrome, because it came
   through a fax. The lab is invented; no reference-lab marks. */
.lab{font-family:"Courier New",Courier,var(--mono);color:#1E1E1B;padding:7px 10px 0;line-height:1.2}
.lab .lh{display:flex;align-items:flex-end;gap:10px;padding-bottom:4px}
.lab .lh .nm{font-family:Arial,Helvetica,sans-serif;font-weight:800;font-size:13.5px;letter-spacing:-.04em;
  line-height:.9}
.lab .lh .nm small{display:block;font-size:5.5px;font-weight:700;letter-spacing:.02em;margin-top:2px}
.lab .lh .ad{font-family:"Times New Roman",Times,serif;font-size:6.5px;line-height:1.15;text-align:center;flex:1}
.lab .lh .sp{font-family:"Times New Roman",Times,serif;font-size:6.5px;text-align:right}
.lab .lh .sp b{display:block;font-family:"Courier New",Courier,var(--mono);font-size:9px;margin-top:1px}
.lab .gr{display:grid;grid-template-columns:1.25fr 1fr 1.35fr .95fr .45fr;border:1px solid #1E1E1B}
.lab .gr div{border-left:1px solid #1E1E1B;padding:0 4px 1px;text-align:center;min-width:0}
.lab .gr div:first-child{border-left:0;text-align:left;grid-column:1/-1;border-bottom:1px solid #1E1E1B;
  font-weight:700;font-size:8.5px;display:flex;gap:8px;align-items:baseline}
.lab .gr div:nth-child(2){border-left:0}

.lab .gr i{display:block;font:5.5px/1.15 "Times New Roman",Times,serif;font-style:normal;white-space:nowrap}
.lab .gr span{font-size:7.5px;white-space:nowrap}
.lab .gr div:first-child i{font-weight:400}
.lab table{width:100%;border-collapse:collapse;font-size:8px;margin-top:3px}
.lab th{font-size:6.5px;font-weight:700;text-align:left;padding:1px 4px;border:1px solid #1E1E1B}
.lab td{padding:1px 4px;white-space:nowrap}
.lab td:nth-child(2){text-align:right;padding-right:12px}
.lab tr.f td{font-weight:700}

/* 4 · one of your own notes */
.mine{padding:13px 15px}
.mine .h{font-size:8.5px;font-weight:700;letter-spacing:.1em;color:var(--faint);
         font-family:var(--mono);margin:8px 0 3px}
.mine .h:first-child{margin-top:0}
.mine p{margin:0;font-size:9.5px;line-height:1.55;color:#3A3A36}
.mine .sig{margin-top:11px;padding-top:8px;border-top:1px solid var(--hair);font-size:9px;
           color:var(--mute);font-style:italic}

/* ---- how far you take it: three ways to run Lumina, compared column by column ----
   Apple's "which model is right for you" grammar: the product itself heads each
   column, then aligned rows let you read across. Rows are CSS subgrid so every
   capability lines up regardless of copy length. */
.lv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:22px;margin-top:52px}
.lvCol{display:grid;grid-row:span 8;grid-template-rows:subgrid;row-gap:0;min-width:0}
.lvShot{background:var(--canvas);border-radius:var(--r-xl);padding:18px 18px 0;border:1px solid transparent;
  display:flex;flex-direction:column;overflow:hidden;transition:border-color .6s ease}
.lvShot .mockLbl{align-self:flex-start;margin-bottom:14px}
.lvCol.pick .lvShot{border-color:transparent}
.lv.in .lvCol.pick .lvShot{border-color:var(--vio-edge);transition-delay:.55s}
.lvName{padding:26px 4px 20px;border-bottom:1px solid var(--hair)}
.lvName .fl{font-size:12.5px;font-weight:560;color:var(--vio-txt);height:19px}
.lvName h3{margin:0;font-size:22px;font-weight:580;letter-spacing:-.02em;line-height:1.2}
.lvName p{margin:8px 0 0;font-size:14.5px;line-height:1.5;color:var(--sub);max-width:34ch}
.lvRow{display:flex;gap:12px;align-items:flex-start;padding:17px 4px;border-bottom:1px solid var(--hair)}
.lvRow svg{width:20px;height:20px;flex:none;margin-top:1px;fill:none;stroke:var(--ink);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.lvRow b{display:block;font-size:14px;font-weight:560;line-height:1.4;letter-spacing:-.006em}
.lvRow span{display:block;font-size:12.5px;color:var(--mute);line-height:1.45;margin-top:2px}
.lvRow.no svg{stroke:var(--faint)}
.lvRow.no b{color:var(--faint);font-weight:400}
.lvGo{padding:18px 4px 0;font-size:14px;font-weight:520;color:var(--vio-txt)}
.lvGo a:hover{text-decoration:underline}

/* the three product shots — one Lumina window, growing */
.lvWin{flex:1;background:var(--card);border:1px solid var(--hair);border-bottom:0;
  border-radius:var(--r-md) var(--r-md) 0 0;overflow:hidden;display:flex;flex-direction:column;min-height:236px}
.lvBar{display:flex;align-items:center;gap:9px;padding:9px 12px;border-bottom:1px solid var(--hair);
  background:var(--canvas);font-size:11px;color:var(--mute);white-space:nowrap}
.lvBar img{height:12px;width:auto;flex:none}
.lvBar .pt{overflow:hidden;text-overflow:ellipsis;min-width:0}
.lvBar .st{margin-left:auto;font-family:var(--mono);font-size:9.5px;color:var(--faint);flex:none;
  display:flex;align-items:center;gap:5px}
.lvBar .st i{width:6px;height:6px;border-radius:50%;background:var(--ink);display:block}
.lvBody{flex:1;display:flex;min-height:0}
.lvNote{padding:13px 14px;min-width:0;flex:1 1 auto}
.lvNote .h{font-family:var(--mono);font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);margin:0 0 4px}
.lvNote .h:not(:first-child){margin-top:11px}
.lvNote p{margin:0;font-size:11.5px;line-height:1.55;color:var(--ink)}
.lvNote p.thin{color:var(--sub)}
.lvNote q{quotes:"\201C" "\201D";color:var(--sub)}
.lvF{color:var(--vio-txt);background:var(--vio-bg);box-shadow:0 0 0 1px var(--vio-edge);border-radius:2px;padding:0 3px}
.lvSrc{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.lvSrc span{font-family:var(--mono);font-size:8.5px;color:var(--sub);background:var(--canvas);
  border:1px solid var(--hair);border-radius:99px;padding:2px 7px;white-space:nowrap}
.lvWave{display:flex;align-items:center;gap:2px;height:44px;padding:0 14px 14px;margin-top:auto}
.lvWave i{flex:1;background:var(--hair);border-radius:1px;display:block}
/* 2 · Lens rail: the documents the chart was built from */
.lvDocs{flex:none;width:31%;border-right:1px solid var(--hair);padding:11px 10px;background:var(--ground)}
.lvDocs .k{font-family:var(--mono);font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);
  margin-bottom:8px}
.lvDoc{display:flex;align-items:center;gap:7px;padding:6px 0;border-top:1px solid var(--hair);font-size:10.5px;
  line-height:1.3;min-width:0}
.lvDoc:first-of-type{border-top:0}
.lvDoc i{width:16px;height:20px;border:1px solid var(--hair);border-radius:2px;background:var(--card);flex:none;
  position:relative}
.lvDoc i::after{content:"";position:absolute;left:3px;right:3px;top:4px;height:6px;
  background:repeating-linear-gradient(180deg,var(--hair) 0 1px,transparent 1px 3px)}
.lvDoc i.c{width:20px;height:14px;border-radius:3px}
.lvDoc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 3 · a chart of its own: rail, Focus, the note docked */
.lvRail{flex:none;width:28%;border-right:1px solid var(--hair);padding:11px 10px;background:var(--ground)}
.lvRail .nm{font-size:11px;font-weight:600;line-height:1.3}
.lvRail .mt{font-size:9.5px;color:var(--mute);margin-top:2px}
.lvRail .ln{height:5px;border-radius:3px;background:var(--soft);margin-top:9px}
.lvRail .ln.s{width:62%}
.lvFocus{flex:1;padding:11px 12px;min-width:0}
.lvFocus .k{font-size:11px;font-weight:600;margin-bottom:6px;display:flex;align-items:baseline;gap:6px}
.lvFocus .k small{font-weight:400;font-size:9.5px;color:var(--mute)}
.lvFr{display:flex;gap:7px;align-items:baseline;padding:6px 0;border-top:1px solid var(--hair);font-size:10.5px;
  line-height:1.35;min-width:0}
.lvFr b{font-weight:560}
.lvFr span{color:var(--mute);margin-left:auto;font-family:var(--mono);font-size:8.5px;white-space:nowrap}
.lvFr.attn{box-shadow:inset 2px 0 0 var(--amb-edge);padding-left:7px}
.lvDock{flex:none;width:34%;border-left:1px solid var(--hair);padding:11px 11px;display:flex;flex-direction:column}
.lvDock .h{font-family:var(--mono);font-size:8px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.lvDock p{margin:4px 0 0;font-size:10.5px;line-height:1.5}
.lvDock .sg{margin-top:auto;align-self:flex-start;font-size:10px;font-weight:560;color:#fff;background:var(--ink);
  border-radius:99px;padding:5px 11px}

@media (max-width:1180px){
  .lvRail{display:none}
  .lvCol.pick .lvBody{flex-direction:column}
  .lvDocs{width:auto;border-right:0;border-bottom:1px solid var(--hair);display:flex;align-items:center;
    gap:12px;padding:8px 12px;flex-wrap:wrap}
  .lvDocs .k{margin:0}
  .lvDoc{border-top:0;padding:0}
}
@media (max-width:900px){
  .lv{grid-template-columns:1fr;row-gap:56px}
  .lvName .fl:empty{display:none}
  .lvWin{min-height:200px}
}


/* ---- sounds like you ---- */
.styleGrid{display:grid;grid-template-columns:.94fr 1.06fr;gap:22px;margin-top:44px;align-items:start}
.note{padding:18px 20px 20px}
.note .lb{font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;
          color:var(--faint);margin:12px 0 4px}
.note .lb:first-child{margin-top:0}
.note p{margin:0;font-size:12.5px;line-height:1.6}
.note .codes{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;padding-top:13px;
             border-top:1px solid var(--hair)}
.note .codes span{font-size:11px;font-weight:520;border:1px solid var(--hair);border-radius:99px;
                  padding:3px 10px;background:var(--canvas)}
.note .codes span.hi{border-color:var(--vio-edge);background:var(--vio-bg);color:var(--vio-txt)}
.feat{border-top:1px solid var(--hair);padding:22px 0}
.feat:first-child{border-top:0;padding-top:0}
.feat .hd{display:flex;align-items:baseline;gap:12px}
.feat .ix{font-family:var(--mono);font-size:10.5px;color:var(--violet);flex:none}
.feat .t{font-size:16.5px;font-weight:580;letter-spacing:-.016em}
.feat .d{font-size:14px;color:var(--sub);line-height:1.55;max-width:44ch;padding-left:28px;margin-top:5px}

/* ---- cross ---- */
.cross{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px}
.cross .c{border:1px solid var(--hair);border-radius:var(--r-lg);background:var(--card);padding:22px}
.cross .crLogo{height:24px;width:auto;display:block;margin-bottom:16px}
.cross .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
          color:var(--faint);margin-bottom:11px}
.cross .d{font-size:14px;color:var(--sub);line-height:1.55;max-width:48ch}
.cross .lk{display:inline-block;margin-top:14px;font-size:13.5px;font-weight:520;color:var(--vio-txt)}

/* ---- faq ---- */
.faq{display:grid;grid-template-columns:.72fr 1.28fr;gap:48px;align-items:start;margin-top:44px}
.faqP{font-size:14.5px;line-height:1.55;color:var(--sub);max-width:34ch;margin:0}
.qs{border-top:1px solid var(--hair)}
.q{border-bottom:1px solid var(--hair)}
.q button{width:100%;font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left;
          padding:17px 0;display:flex;align-items:baseline;gap:14px}
.q .ix{font-family:var(--mono);font-size:10.5px;color:var(--faint);flex:none}
.q .qt{font-size:15.5px;font-weight:520;letter-spacing:-.012em}
.q .pm{margin-left:auto;font-size:15px;color:var(--mute);flex:none;line-height:1;
       transition:transform .3s ease,color .3s ease}
.q[aria-expanded="true"] .pm{transform:rotate(45deg);color:var(--ink)}
.q[aria-expanded="true"] .ix{color:var(--violet)}
.q .ans{max-height:0;overflow:hidden;opacity:0;
        transition:max-height .42s cubic-bezier(.3,.8,.3,1),opacity .28s ease}
.q[aria-expanded="true"] .ans{max-height:300px;opacity:1}
.q .ans p{font-size:14.5px;line-height:1.6;color:var(--sub);margin:0 0 17px;max-width:62ch;
          padding-left:28px}
.q .ans p b{color:var(--ink);font-weight:560}

/* ---- close + footer ---- */
.closeWrap{background:var(--ground);padding:88px 32px 0}
.closePanel{max-width:var(--w);margin:0 auto;background:var(--ink);color:#F4F4F1;
            border-radius:var(--r-xl);overflow:hidden;position:relative}
.closePanel::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 70% at 50% 116%, rgba(124,92,224,.30), transparent 64%)}
.closePanel > *{position:relative;z-index:2}
.closeTop{padding:80px 44px 0}
.closeH{font-size:clamp(38px,6.4vw,92px);line-height:.98;letter-spacing:-.04em;font-weight:560;
        margin:0;max-width:16ch}
.closeH em{font-style:italic;font-weight:400;color:rgba(244,244,241,.52)}
.closeRule{margin:40px 44px 0;border-top:1px solid rgba(255,255,255,.16)}
.closeFoot{padding:24px 44px 44px;display:grid;grid-template-columns:1fr auto auto;gap:24px;
           align-items:center}
.closeFine{font-family:var(--mono);font-size:11.5px;line-height:1.7;letter-spacing:.03em;
           color:rgba(244,244,241,.56);text-transform:uppercase}
.closeBtn{display:inline-flex;align-items:center;gap:9px;background:#F4F4F1;color:var(--ink);
          border-radius:var(--r-md);padding:13px 20px;font-size:14.5px;font-weight:560;white-space:nowrap}
.closeBtn span{font-family:var(--mono)}
.closeNote{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.04);border-radius:99px;padding:11px 16px;font-family:var(--mono);
  font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:rgba(244,244,241,.7);
  white-space:nowrap}
.closeNote i{width:6px;height:6px;border-radius:50%;background:var(--violet);flex:none;font-style:normal}
.closeNote b{color:#F4F4F1;font-weight:600}
footer.ft{background:var(--ground);padding:72px 0 40px}
.ftGrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
.ftBrand img{height:22px;width:auto;margin-bottom:16px}
.ftBrand .tag{font-family:var(--mono);font-size:11.5px;line-height:1.7;color:var(--mute);max-width:30ch}
.ftCol b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.09em;
         text-transform:uppercase;color:var(--faint);font-weight:400;margin-bottom:14px}
.ftCol a{display:block;font-size:14.5px;color:var(--sub);padding:5px 0}
.ftCol a:hover{color:var(--ink)}
.ftBase{margin-top:52px;padding-top:20px;border-top:1px solid var(--hair);display:flex;
        align-items:baseline;gap:22px;flex-wrap:wrap}
.ftBase .c{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
           color:var(--mute)}
.ftBase .lg{margin-left:auto;display:flex;gap:20px;flex-wrap:wrap}
.ftBase .lg a{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
              color:var(--faint)}

@media (max-width:1080px){
  .wrap{padding:0 20px}
  .nav a.lk{display:none}
  .vs,.styleGrid,.faq,.cross{grid-template-columns:1fr}
  .closeTop{padding:56px 24px 0}
  .closeRule{margin:28px 24px 0}
  .closeFoot{padding:20px 24px 32px;grid-template-columns:1fr;gap:18px}
  .closeWrap{padding:64px 20px 0}
  .ftGrid{grid-template-columns:1fr 1fr}
  .S{padding:64px 0 0}
  .S.last{padding-bottom:72px}
}
/* ---------- motion ---------- */
[data-rise]{opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.75,.25,1);
  transition-delay:calc(var(--d,0) * 70ms)}
[data-rise].in{opacity:1;transform:none}
[data-fact]{background-size:0 100%;background-repeat:no-repeat;
  background-image:linear-gradient(var(--vio-bg),var(--vio-bg));
  box-shadow:0 0 0 0 var(--vio-edge);border-radius:2px;padding:0 3px;color:var(--mute);
  transition:background-size .5s cubic-bezier(.3,.8,.3,1),color .45s ease,box-shadow .45s ease;
  transition-delay:calc(var(--d,0) * 160ms)}
.built [data-fact]{background-size:100% 100%;color:var(--vio-txt);box-shadow:0 0 0 1px var(--vio-edge)}
.src{opacity:0;transform:translateY(-3px);transition:opacity .45s ease,transform .45s ease;
     transition-delay:calc(var(--d,0) * 160ms + 260ms)}
.built .src{opacity:1;transform:none}
@keyframes fcIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.certs img{opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .6s ease;
           transition-delay:calc(var(--d,0) * 60ms + 200ms)}
.certs.in img{opacity:.8;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-rise],[data-rise].in{opacity:1;transform:none;transition:none}
  [data-fact]{background-size:100% 100%;color:var(--vio-txt);box-shadow:0 0 0 1px var(--vio-edge);
              transition:none}
  .src{opacity:1;transform:none;transition:none}
  .lvShot{transition:none}
  .lvCol.pick .lvShot{border-color:var(--vio-edge)}
  .certs img{opacity:.8;transform:none;transition:none}
  .q .ans,.q .pm{transition:none}
}