/* ============================================================
   AllureTrak — Homepage sections (DARK)
   ============================================================ */

/* ---- 1. Operators contrast ---- */
.operators{background:var(--night)}
.op-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:1020px;margin:0 auto}
.op-card{background:#fff;border:1px solid #E4EDEF;border-radius:var(--r-lg);padding:42px 40px;box-shadow:0 30px 70px -30px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.16);transition:transform .3s,box-shadow .3s,border-color .3s}
.op-card .op-ic{width:60px;height:60px;border-radius:16px;display:grid;place-items:center;margin-bottom:24px}
.op-card h3{font-family:var(--display);font-size:25px;font-weight:700;color:#10293A;letter-spacing:-.01em}
.op-card .op-desc{margin-top:10px;font-size:17px;color:#5A727B;line-height:1.55}
.op-list{margin-top:24px;display:flex;flex-direction:column;gap:14px}
.op-list li{display:flex;gap:13px;font-size:17px;color:#2C434C;line-height:1.45}
.op-list li .mk{flex-shrink:0;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:800;margin-top:1px}
.op-generic{background:#F4F8F9}
.op-generic .op-ic{background:#E6EEF0;color:#7C9098}
.op-generic .op-list li .mk{background:rgba(218,59,59,.14);color:#D43B3B}
.op-generic .op-list li{color:#5A727B}
.op-allure{border-color:rgba(20,184,166,.45);box-shadow:0 30px 70px -28px rgba(20,184,166,.4),0 2px 8px rgba(0,0,0,.16)}
.op-allure .op-ic{background:var(--grad-teal);color:#04171c}
.op-allure .op-list li .mk{background:rgba(13,107,132,.12);color:#0B6A82}
.op-allure:hover{transform:translateY(-4px);box-shadow:0 38px 80px -28px rgba(20,184,166,.5),0 2px 8px rgba(0,0,0,.16)}
.op-closer{max-width:820px;margin:52px auto 0;text-align:center;font-family:var(--display);font-size:clamp(22px,2.4vw,28px);font-weight:600;color:#fff;line-height:1.4;letter-spacing:-.01em}

/* ---- 2. Lease lifecycle (interactive) ---- */
.lifecycle{background:var(--night-2)}
.lc-card{max-width:1040px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);padding:28px clamp(20px,3vw,40px) 38px}
.lc-head{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:18px;margin-bottom:8px}
.lc-name{font-family:var(--display);font-weight:700;font-size:20px;color:#fff}
.lc-term{font-size:14.5px;color:var(--ink-3);margin-top:5px}
.lc-filters{display:flex;flex-wrap:wrap;gap:8px}
.lc-filter{font-family:var(--body);font-size:13px;font-weight:600;color:var(--ink-3);padding:7px 15px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);cursor:pointer;transition:.2s}
.lc-filter:hover{color:#fff;border-color:var(--teal)}
.lc-filter.on{color:#04171c;background:var(--teal);border-color:var(--teal)}

.lc-railwrap{position:relative;margin:104px 14px 96px}
.lc-rail{position:relative;height:5px;border-radius:999px;background:rgba(255,255,255,.1)}
.lc-fill{position:absolute;left:0;top:0;bottom:0;width:42%;border-radius:999px;background:linear-gradient(90deg,var(--teal),var(--sky));transition:width .8s cubic-bezier(.2,.7,.3,1)}
.lc-today{position:absolute;left:42%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 6px rgba(20,184,166,.22);animation:lcpulse 2.2s ease-in-out infinite;z-index:4}
@keyframes lcpulse{0%,100%{box-shadow:0 0 0 6px rgba(20,184,166,.22)}50%{box-shadow:0 0 0 12px rgba(20,184,166,.08)}}
.lc-today .tl{position:absolute;top:26px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:700;color:var(--teal-glow);white-space:nowrap}
.lc-node{position:absolute;top:50%;transform:translate(-50%,-50%);cursor:pointer;z-index:3}
.lc-node .pt{width:15px;height:15px;border-radius:50%;background:var(--surface);border:3px solid var(--teal);margin:0 auto;transition:transform .2s,box-shadow .2s}
.lc-node:hover .pt,.lc-node.active .pt{transform:scale(1.25);box-shadow:0 0 0 6px rgba(20,184,166,.2)}
.lc-node.warn .pt{border-color:var(--amber)}
.lc-node.warn:hover .pt,.lc-node.warn.active .pt{box-shadow:0 0 0 6px rgba(251,191,36,.2)}
.lc-flag{position:absolute;left:50%;transform:translateX(-50%);width:158px;background:var(--surface-3);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-md);padding:9px 12px;transition:opacity .3s,transform .3s;pointer-events:none}
.lc-node.up .lc-flag{bottom:26px}
.lc-node.down .lc-flag{top:26px}
.lc-node.edge-l .lc-flag{left:0;transform:none}
.lc-node.edge-r .lc-flag{left:auto;right:0;transform:none}
.lc-flag .d{font-size:11px;font-weight:700;color:var(--teal-glow)}
.lc-flag .e{font-size:12.5px;color:var(--ink-2);line-height:1.32;margin-top:2px}
.lc-node.warn .lc-flag{border-color:rgba(251,191,36,.45);background:rgba(251,191,36,.08)}
.lc-node.warn .lc-flag .d{color:var(--amber)}
.lc-node.dimmed{opacity:.22}
.lc-node.dimmed .lc-flag{opacity:.4}
.lc-detail{margin-top:8px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);padding:22px 24px;display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;min-height:96px}
.lc-detail .di{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;background:var(--grad-teal);color:#04171c;flex-shrink:0}
.lc-detail .dt .dk{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--teal-glow)}
.lc-detail .dt h4{font-family:var(--display);font-size:20px;font-weight:700;color:#fff;margin:4px 0}
.lc-detail .dt p{font-size:14px;color:var(--ink-3);line-height:1.5;max-width:560px}
.lc-detail .dmeta{text-align:right}
.lc-detail .dmeta .v{font-family:var(--display);font-size:26px;font-weight:700;color:#fff}
.lc-detail .dmeta .l{font-size:12px;color:var(--ink-4);margin-top:2px}
.lc-detail.warn .di{background:linear-gradient(135deg,var(--amber),#f59e0b);color:#3a2a06}
.lc-detail.warn .dt .dk{color:var(--amber)}
.lc-hint{text-align:center;font-size:13px;color:var(--ink-4);margin-top:18px}

/* ---- 3. Be ready (legal) ---- */
.beready{background:var(--night)}
.br-card{max-width:1020px;margin:0 auto;background:#fff;border:1px solid #E4EDEF;border-radius:var(--r-xl);box-shadow:0 44px 96px -32px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.2);overflow:hidden}
.br-card-grid{display:grid;grid-template-columns:1.05fr .95fr}
.br-card-left{padding:clamp(30px,3.6vw,48px)}
.br-bt{font-family:var(--display);font-weight:700;font-size:23px;color:#10293A;margin-bottom:22px;letter-spacing:-.01em}
.br-item{display:flex;align-items:center;gap:15px;padding:17px 0;border-bottom:1px solid #EEF3F5;font-size:20px;font-weight:600;color:#10293A}
.br-item:last-of-type{border-bottom:none}
.br-item .ck{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:var(--grad-teal);color:#04171c;display:grid;place-items:center;font-weight:800;font-size:16px}
.br-meta{display:flex;align-items:center;gap:15px;margin-top:26px;font-family:var(--display);font-weight:700;font-size:20px;color:#10293A}
.br-from{color:#7C9098;text-decoration:line-through}
.br-arrow{color:#0B6A82;font-size:23px}
.br-to{color:#0B6A82}
.br-card-img{position:relative;min-height:360px;overflow:hidden;background:radial-gradient(130% 110% at 72% 18%,#0e6379 0%,#0a3d4c 55%,#0c2533 100%)}
.br-card-img::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(80% 80% at 60% 40%,#000,transparent 80%);pointer-events:none}
.ready-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.ready-illo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.br-disc{max-width:760px;margin:40px auto 0;text-align:center;font-size:13px;color:var(--ink-4)}

/* ---- 4. On demand query ---- */
.ondemand{background:var(--night-2)}
.q-stage{max-width:880px;margin:0 auto}
.q-bar{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid #E4EDEF;border-radius:999px;box-shadow:0 28px 64px -28px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.18);padding:12px 12px 12px 26px;max-width:780px;margin:0 auto}
.q-bar .qi{flex-shrink:0;color:#0B6A82}
.q-bar .qtext{flex:1;font-size:clamp(17px,1.7vw,20px);color:#10293A;font-weight:500;min-height:28px}
.q-bar .qtext .caret{display:inline-block;width:2px;height:18px;background:var(--teal);margin-left:1px;vertical-align:-3px;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
.q-bar .qgo{flex-shrink:0;width:52px;height:52px;border-radius:50%;background:var(--grad-teal);color:#04171c;display:grid;place-items:center}
.q-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px}
.q-chip{padding:13px 22px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);border-radius:999px;color:#fff;font-weight:600;font-size:16px;cursor:pointer;transition:.2s}
.q-chip:hover,.q-chip.on{border-color:var(--teal);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md)}

/* ---- 5. Stakes ---- */
.stakes{background:var(--night)}
.stk-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,4vw,64px);align-items:center}
.stk-list{margin-top:30px;display:flex;flex-direction:column;gap:22px}
.stk-item{display:flex;gap:16px}
.stk-item .ck{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--grad-teal);color:#04171c;display:grid;place-items:center;font-weight:800;font-size:14px}
.stk-item h4{font-family:var(--display);font-size:17px;font-weight:600;color:#fff}
.stk-item h4 .tag{display:inline-block;margin-left:8px;padding:2px 9px;font-size:11px;font-weight:600;color:var(--teal-glow);background:rgba(20,184,166,.14);border-radius:999px;vertical-align:middle}
.stk-item p{font-size:14.5px;color:var(--ink-3);line-height:1.55;margin-top:3px}
.stk-visual{position:relative;height:660px;display:flex;align-items:center;justify-content:center}
.proc-doc{position:relative;width:290px;height:410px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);padding:28px;z-index:2}
.proc-doc .pl{height:10px;border-radius:5px;background:rgba(255,255,255,.08);margin-bottom:16px;animation:lpulse 1.4s ease-in-out infinite}
.proc-doc .pl:nth-child(2){animation-delay:.15s}.proc-doc .pl:nth-child(3){animation-delay:.3s}.proc-doc .pl:nth-child(4){animation-delay:.45s}.proc-doc .pl:nth-child(5){animation-delay:.6s}
@keyframes lpulse{0%,100%{opacity:1}50%{opacity:.35}}
.proc-scan{position:absolute;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--teal),var(--sky));box-shadow:0 0 12px rgba(20,184,166,.7);border-radius:3px;animation:procscan 2.6s ease-in-out infinite}
@keyframes procscan{0%{top:18px}50%{top:250px}100%{top:18px}}
.proc-tiles{position:absolute;right:0;display:grid;grid-template-columns:1fr 1fr;gap:16px;width:500px;z-index:2}
.proc-tile{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--teal);border-radius:16px;box-shadow:var(--shadow-md);padding:18px 18px;opacity:0;transform:scale(.9) translateX(-12px);animation:tilein 11s ease-in-out infinite}
.proc-tile .tt{font-family:var(--display);font-size:17px;font-weight:700;color:#fff}
.proc-tile .tloc{font-size:13px;color:var(--ink-4);margin:3px 0 10px}
.proc-tile .tb{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px}
.proc-tile:nth-child(1){animation-delay:.6s;border-left-color:var(--violet)}
.proc-tile:nth-child(2){animation-delay:.9s;border-left-color:var(--green)}
.proc-tile:nth-child(3){animation-delay:1.2s;border-left-color:var(--blue)}
.proc-tile:nth-child(4){animation-delay:1.5s;border-left-color:var(--amber)}
@keyframes tilein{0%,4%{opacity:0;transform:scale(.9) translateX(-12px)}12%,80%{opacity:1;transform:none}92%,100%{opacity:0;transform:scale(.94) translateX(-6px)}}

/* ---- 6. Allure Intelligence band (distinct dark + strong glow) ---- */
.intel{position:relative;overflow:hidden;background:radial-gradient(120% 100% at 80% 0%,#0C2E36 0%,var(--night-2) 40%,var(--night) 82%);color:var(--ink-2)}
.intel::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(80% 70% at 60% 30%,#000 30%,transparent 82%)}
.intel-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr .92fr;gap:clamp(40px,4vw,64px);align-items:center}
.intel h2{font-family:var(--display);font-weight:700;letter-spacing:-.025em;font-size:clamp(30px,3.8vw,46px);line-height:1.1;color:#fff;margin-top:18px}
.intel h2 .grad{background:linear-gradient(105deg,#5eead4,#38BDF8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.intel .lead{color:var(--ink-3);margin-top:20px;max-width:520px}
.intel-points{margin-top:30px;display:flex;flex-direction:column;gap:18px}
.intel-pt{display:flex;gap:14px}
.intel-pt .ic{flex-shrink:0;width:38px;height:38px;border-radius:11px;background:rgba(20,184,166,.16);color:var(--teal-glow);display:grid;place-items:center}
.intel-pt h4{font-family:var(--display);font-size:16px;font-weight:600;color:#fff}
.intel-pt p{font-size:14px;color:var(--ink-3);line-height:1.5;margin-top:2px}
.intel-cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
.scanwrap{position:relative;height:540px}
.scanwrap::after{content:'';position:absolute;width:520px;height:520px;background:radial-gradient(circle,rgba(20,184,166,.25),transparent 62%);pointer-events:none}
.scandoc{position:relative;width:256px;height:344px;border-radius:16px;background:linear-gradient(180deg,#0c2731,#0a2028);border:1px solid rgba(20,184,166,.35);box-shadow:0 40px 90px -30px rgba(0,0,0,.7),0 0 0 1px rgba(20,184,166,.12),inset 0 1px 0 rgba(255,255,255,.05);padding:24px 22px;overflow:hidden;z-index:2}
.scandoc .dh{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-glow)}
.scandoc .dt{font-family:var(--display);font-size:23px;color:#fff;margin:10px 0 22px;font-weight:700}
.scandoc .row{height:9px;border-radius:5px;background:rgba(255,255,255,.08);margin-bottom:15px}
.scandoc .row.hot{background:linear-gradient(90deg,rgba(20,184,166,.7),rgba(20,184,166,.1))}
.scanline{position:absolute;left:0;right:0;height:58px;top:0;background:linear-gradient(180deg,transparent,rgba(20,184,166,.22) 55%,transparent);border-top:2px solid rgba(94,234,212,.9);box-shadow:0 0 24px rgba(20,184,166,.6);animation:scanmove 3.4s cubic-bezier(.45,0,.55,1) infinite}
@keyframes scanmove{0%{top:-10%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}
.result-chip{position:absolute;display:flex;align-items:center;gap:12px;z-index:3;padding:14px 18px;border-radius:15px;background:linear-gradient(180deg,#1a4451,#123640);border:1px solid rgba(94,234,212,.5);backdrop-filter:blur(10px);box-shadow:0 18px 40px -16px rgba(0,0,0,.7),0 0 0 1px rgba(20,184,166,.12),0 0 28px -6px rgba(45,212,191,.35);color:#eafaf9}
.result-chip .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(45,212,191,.22);color:#7df3e4;flex-shrink:0}
.result-chip>span:last-child{display:flex;flex-direction:column;gap:3px;line-height:1.2;min-width:0}
.result-chip .k{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#9fd9d2;font-weight:700}
.result-chip .v{display:block;white-space:nowrap;font-size:15.5px;font-weight:700;color:#fff}
.result-chip svg{width:19px;height:19px}
.result-chip.c1{top:3%;right:-2%}
.result-chip.c2{top:30%;right:-6%}
.result-chip.c3{top:58%;right:-6%}
.result-chip.c4{top:86%;right:0}
.intel-connect{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.intel-connect path{fill:none;stroke:url(#icg);stroke-width:1.6;stroke-dasharray:4 5}
.intel-connect circle{fill:#5eead4}
.scandoc{position:absolute;left:2%;top:50%;transform:translateY(-50%);width:330px;height:448px;z-index:2;padding:30px 28px}
@keyframes chipIn{0%,8%{opacity:0;transform:translateX(-8px) scale(.96)}18%,82%{opacity:1;transform:none}96%,100%{opacity:0}}

/* ---- 7. Every location (floating cards) ---- */
.everyloc{background:var(--night-2)}
.el-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(36px,4vw,60px);align-items:center}
.el-feats{margin-top:28px;display:flex;flex-direction:column;gap:20px}
.el-feat{display:flex;gap:14px}
.el-feat .ck{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--teal);color:#04171c;display:grid;place-items:center;font-weight:800;font-size:13px}
.el-feat h4{font-family:var(--display);font-size:16px;font-weight:600;color:#fff}
.el-feat p{font-size:14px;color:var(--ink-3);line-height:1.5;margin-top:2px}
.doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.doc-card{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:var(--r-md);box-shadow:var(--shadow-md);padding:18px;transition:transform .3s,box-shadow .3s}
.doc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.doc-card.fl{animation:floaty 4s ease-in-out infinite;animation-delay:var(--d,0s)}
.doc-card .dh{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-4);margin-bottom:10px}
.doc-card .dh svg{width:16px;height:16px;color:var(--teal)}
.doc-card .dtitle{font-family:var(--display);font-size:16px;font-weight:700;color:#fff}
.doc-card .dloc{font-size:12.5px;color:var(--ink-3);margin:2px 0 6px}
.doc-card .ddate{font-size:12.5px;color:var(--ink-2);font-weight:500;margin-bottom:10px}
.doc-card .dstatus{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px}
.dc-insurance{border-left-color:var(--violet)}.dc-insurance .dh svg{color:var(--violet)}
.dc-lease{border-left-color:var(--green)}.dc-lease .dh svg{color:var(--green)}
.dc-inspection{border-left-color:var(--blue)}.dc-inspection .dh svg{color:var(--blue)}
.dc-license{border-left-color:var(--amber)}.dc-license .dh svg{color:var(--amber)}
.dc-project{border-left-color:#F472B6}.dc-project .dh svg{color:#F472B6}
.dc-variance{border-left-color:var(--red)}.dc-variance .dh svg{color:var(--red)}

/* ---- 8. CTA early access ---- */
.cta{position:relative;overflow:hidden;background:radial-gradient(110% 120% at 18% 10%,#0c4b5c 0%,#0a3d4c 38%,var(--night-2) 86%)}
.cta::before{content:'';position:absolute;right:-10%;top:-40%;width:640px;height:640px;background:radial-gradient(circle,rgba(45,212,191,.26),transparent 62%);pointer-events:none}
.cta::after{content:'';position:absolute;left:-8%;bottom:-50%;width:520px;height:520px;background:radial-gradient(circle,rgba(56,189,248,.16),transparent 64%);pointer-events:none}
.cta-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,4vw,60px);align-items:center}
.cta h2{color:#fff}
.cta .lead{color:#cdeef0;margin-top:18px;max-width:480px}
.cta-feats{margin-top:26px;display:flex;flex-direction:column;gap:12px}
.cta-feats li{display:flex;align-items:center;gap:11px;font-size:15px;font-weight:500;color:#eaf9fa}
.cta-feats .ck{width:22px;height:22px;border-radius:50%;background:var(--teal-bright);color:#04171c;display:grid;place-items:center;font-weight:800;font-size:12px}
.cta-form{background:linear-gradient(180deg,var(--surface-3),var(--surface));border:1px solid var(--line-strong);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);padding:clamp(26px,3vw,36px)}
.cta-form h3{font-family:var(--display);font-size:21px;font-weight:700;color:#fff;margin-bottom:6px}
.cta-form .sub{font-size:14px;color:var(--ink-3);margin-bottom:20px}

/* ---- 7b. Pinned scrollytelling (Stripe-style sticky storytelling) ---- */
.scrolly{background:var(--night-2);position:relative}
.scrolly-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,84px);align-items:start}
.scrolly-visual{position:relative;align-self:start;height:min(74vh,540px);will-change:transform}
.scrolly-stage{position:relative;width:100%;height:100%;border-radius:var(--r-xl);border:1px solid var(--line);background:linear-gradient(180deg,var(--surface),var(--surface-2));box-shadow:var(--shadow-xl),0 0 0 1px rgba(20,184,166,.08);overflow:hidden}
.scrolly-stage .bar{display:flex;align-items:center;gap:8px;padding:15px 18px;border-bottom:1px solid var(--line-2)}
.scrolly-stage .bar .d{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.16)}
.scrolly-stage .bar .crumbs{margin-left:10px;font-size:12.5px;color:var(--ink-3);font-weight:500}
.scrolly-panel{position:absolute;left:0;right:0;top:51px;bottom:0;padding:22px 24px;opacity:0;transform:translateY(10px);pointer-events:none;display:flex;flex-direction:column;justify-content:center;gap:12px}
.scrolly-panel.active{opacity:1;transform:none;pointer-events:auto}
.scrolly-plabel{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-glow);margin-bottom:2px}
.sp-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-3)}
.sp-row .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;background:rgba(20,184,166,.16);color:var(--teal-glow)}
.sp-row .tt{font-family:var(--display);font-weight:600;font-size:16.5px;color:#fff}
.sp-row .ms{font-size:13.5px;color:var(--ink-3);margin-top:2px}
.sp-row .badge{margin-left:auto;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.sp-answer{border:1px solid rgba(20,184,166,.32);border-radius:var(--r-md);padding:16px 18px;background:linear-gradient(135deg,rgba(20,184,166,.1),rgba(56,189,248,.05))}
.sp-answer .q{font-size:13px;color:var(--ink-3)}
.sp-answer .a{font-family:var(--display);font-size:16px;color:#fff;font-weight:600;margin-top:6px;line-height:1.4}
.sp-answer .a b{color:var(--teal-glow)}
/* mini timeline inside panel */
.sp-rail{position:relative;height:4px;border-radius:999px;background:rgba(255,255,255,.12);margin:34px 8px 30px}
.sp-rail .f{position:absolute;left:0;top:0;bottom:0;width:46%;border-radius:999px;background:linear-gradient(90deg,var(--teal),var(--sky))}
.sp-rail .nd{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:var(--surface);border:3px solid var(--teal);transform:translate(-50%,-50%)}
.sp-rail .nd.w{border-color:var(--amber)}
.sp-rail .nd .lab{position:absolute;top:16px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:10.5px;font-weight:600;color:var(--ink-3)}
.sp-rail .nd.w .lab{color:var(--amber)}
.scrolly-steps{display:flex;flex-direction:column}
.scrolly-step{min-height:58vh;display:flex;flex-direction:column;justify-content:center;padding:18px 0}
.scrolly-step .sn{display:inline-flex;width:42px;height:42px;border-radius:12px;background:var(--surface);border:1px solid var(--line);color:var(--ink-3);align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:16px;margin-bottom:16px}
.scrolly-step h3{font-family:var(--display);font-size:clamp(22px,2.4vw,30px);font-weight:700;color:var(--ink-4);letter-spacing:-.015em;line-height:1.22}
.scrolly-step p{margin-top:12px;font-size:16px;line-height:1.62;color:var(--ink-4);max-width:460px}
.scrolly-step.active h3{color:#fff}
.scrolly-step.active p{color:var(--ink-2)}
.scrolly-step.active .sn{background:var(--grad-teal);border-color:transparent;color:#04171c}

/* ============================================================
   LIGHT APP SURFACES — product mockups render as white "screenshots"
   so they lift off the dark site (Stripe/Linear style). Light text on
   white; teal accents darkened for contrast. Placed late so it wins.
   ============================================================ */
.surface,.lc-card,.scrolly-stage,.proc-doc,.scandoc{
  background:#FFFFFF;border:1px solid #E4EDEF;
  box-shadow:0 36px 84px -28px rgba(0,0,0,.62),0 2px 8px rgba(0,0,0,.18);
}
/* status chips — readable on white tints (shared across all app surfaces) */
.st-ok{color:#0F9D6E;background:rgba(16,185,129,.13)}
.st-warn{color:#B26F08;background:rgba(245,158,11,.16)}
.st-alert{color:#DA3B3B;background:rgba(239,68,68,.11)}

/* Hero product card */
.surface-bar{border-bottom:1px solid #EEF3F5}
.surface-bar .d{background:#D7E1E4}
.surface-bar .crumbs{color:#8499A0}
.docmini{background:#F6F9FB;border:1px solid #E7EEF0}
.docmini .ek{color:#8FA3AA}
.docmini h5{color:#10293A}
.docmini .loc{color:#5E757D}
.docmini .ln{background:#E4ECEF}
.answer-card{background:linear-gradient(135deg,rgba(13,107,132,.08),rgba(56,189,248,.06));border:1px solid rgba(13,110,134,.26)}
.answer-card .q{color:#5E757D}
.answer-card .a{color:#10293A}
.answer-card .a b{color:#0B6A82}

/* Lease lifecycle card */
.lc-name{color:#10293A}
.lc-term{color:#5E757D}
.lc-filter{background:#F1F6F8;border:1px solid #E2EBEE;color:#5E757D}
.lc-filter:hover{color:#0A4F63;border-color:#0D6B84}
.lc-filter.on{background:#0D6B84;border-color:#0D6B84;color:#fff}
.lc-rail{background:#E4ECEF}
.lc-flag{background:#fff;border:1px solid #E4ECEF;box-shadow:0 8px 20px -10px rgba(16,40,54,.3)}
.lc-flag .d{color:#0B6A82}
.lc-flag .e{color:#33464E}
.lc-node .pt{background:#fff}
.lc-node.warn .lc-flag{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.42)}
.lc-node.warn .lc-flag .d{color:#B26F08}
.lc-detail{background:#F4F8F9;border:1px solid #E4ECEF}
.lc-detail .dt .dk{color:#0B6A82}
.lc-detail .dt h4{color:#10293A}
.lc-detail .dt p{color:#5E757D}
.lc-detail .dmeta .v{color:#10293A}
.lc-detail .dmeta .l{color:#8FA3AA}
.lc-detail.warn .dt .dk{color:#B26F08}
.lc-hint{color:#93A8AF}

/* Pinned scrollytelling stage */
.scrolly-stage .bar{border-bottom:1px solid #EEF3F5}
.scrolly-stage .bar .d{background:#D7E1E4}
.scrolly-stage .bar .crumbs{color:#8499A0}
.scrolly-plabel{color:#0B6A82}
.sp-row{background:#F6F9FB;border:1px solid #E7EEF0}
.sp-row .ic{background:rgba(13,107,132,.1);color:#0B6A82}
.sp-row .tt{color:#10293A}
.sp-row .ms{color:#5E757D}
.sp-answer{background:linear-gradient(135deg,rgba(13,107,132,.08),rgba(56,189,248,.06));border:1px solid rgba(13,110,134,.26)}
.sp-answer .q{color:#5E757D}
.sp-answer .a{color:#10293A}
.sp-answer .a b{color:#0B6A82}
.sp-rail{background:#E4ECEF}
.sp-rail .nd{background:#fff}
.sp-rail .nd .lab{color:#5E757D}
.sp-rail .nd.w .lab{color:#B26F08}

/* Document processor (stakes) */
.proc-doc .pl{background:#E7EEF0}
.proc-tile{background:#fff;border:1px solid #E7EEF0;box-shadow:0 12px 28px -14px rgba(16,40,54,.34)}
.proc-tile .tt{color:#10293A}
.proc-tile .tloc{color:#8398A0}

/* Scanned lease document (intel) — white paper */
.scandoc{box-shadow:0 36px 84px -28px rgba(0,0,0,.6),0 0 0 1px rgba(20,184,166,.14)}
.scandoc .dh{color:#0B6A82}
.scandoc .dt{color:#10293A}
.scandoc .row{background:#E7EEF0}
.scandoc .row.hot{background:linear-gradient(90deg,rgba(20,184,166,.5),rgba(20,184,166,.08))}

/* ---- 7c. Compact "From signed to handled" (wide white dashboard + horizontal steps) ---- */
.flow{background:var(--night-2)}
.flow-panel{max-width:1080px;margin:0 auto;background:#fff;border:1px solid #E4EDEF;border-radius:var(--r-xl);box-shadow:0 40px 90px -30px rgba(0,0,0,.66),0 2px 8px rgba(0,0,0,.2);overflow:hidden}
.flow-bar{display:flex;align-items:center;gap:8px;padding:15px 20px;border-bottom:1px solid #EEF3F5}
.flow-bar .d{width:11px;height:11px;border-radius:50%;background:#D7E1E4}
.flow-bar .crumbs{margin-left:10px;font-size:13px;color:#8499A0;font-weight:500}
.flow-bar .flow-pill{margin-left:auto;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:11.5px;font-weight:700;color:#0B6A82;background:rgba(13,107,132,.1);padding:5px 12px;border-radius:999px}
.flow-body{display:grid;grid-template-columns:1.12fr .88fr}
.flow-main{padding:22px;display:grid;grid-template-columns:1fr 1fr;gap:14px;border-right:1px solid #EEF3F5;align-content:start}
.flow-side{padding:22px;display:flex;flex-direction:column;gap:14px;background:#F7FAFC}
.flow-side-label{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#0B6A82}
.flow-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1080px;margin:34px auto 0}
.flow-step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:22px 22px;transition:transform .25s,border-color .25s,box-shadow .25s}
.flow-step:hover{transform:translateY(-4px);border-color:rgba(20,184,166,.4);box-shadow:var(--shadow-md)}
.flow-step .fn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--grad-teal);color:#04171c;font-family:var(--display);font-weight:700;font-size:16px;margin-bottom:14px}
.flow-step h4{font-family:var(--display);font-size:17px;font-weight:700;color:#fff;letter-spacing:-.01em}
.flow-step p{margin-top:7px;font-size:13.5px;color:var(--ink-3);line-height:1.55}

/* ---- 1b. Versus — interactive white "ask the same question" demo ---- */
.versus{background:var(--night)}
.versus-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 auto clamp(30px,4vw,44px);max-width:900px}
.vchip{font-family:var(--body);font-size:15px;font-weight:600;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:11px 18px;cursor:pointer;transition:.2s}
.vchip:hover{border-color:var(--teal);color:#fff}
.vchip.on{background:var(--grad-teal);color:#04171c;border-color:transparent}
.versus-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:1080px;margin:0 auto}
.vcard{background:#fff;border:1px solid #E4EDEF;border-radius:var(--r-xl);box-shadow:0 36px 84px -30px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.2);overflow:hidden;display:flex;flex-direction:column}
.vcard-head{display:flex;align-items:center;gap:13px;padding:20px 24px;border-bottom:1px solid #EEF3F5}
.vcard-head .vic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex-shrink:0}
.vcard-head h3{font-family:var(--display);font-size:20px;font-weight:700;color:#10293A;letter-spacing:-.01em}
.vcard-head .tag{margin-left:auto;font-size:11.5px;font-weight:700;padding:5px 12px;border-radius:999px;white-space:nowrap}
.vcard.generic .vic{background:#EDF1F3;color:#94A6AD}
.vcard.generic .tag{color:#7C8A90;background:#EDF1F3}
.vcard.allure{box-shadow:0 36px 84px -30px rgba(20,184,166,.4),0 0 0 1px rgba(20,184,166,.18),0 2px 8px rgba(0,0,0,.2)}
.vcard.allure .vic{background:var(--grad-teal);color:#04171c}
.vcard.allure .tag{color:#0F9D6E;background:rgba(16,185,129,.13)}
.vcard-body{padding:24px;display:flex;flex-direction:column;gap:16px;flex:1}
.vq{align-self:flex-start;max-width:92%;background:#EEF3F6;color:#33464E;font-size:15px;font-weight:500;padding:13px 17px;border-radius:15px 15px 15px 5px}
.va{font-size:17px;line-height:1.58;color:#10293A;font-weight:500}
.vcard.generic .va{color:#647A82}
.va b{color:#0B6A82;font-weight:700}
.vsrc{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#0B6A82;background:rgba(13,107,132,.08);border:1px solid rgba(13,107,132,.18);padding:8px 14px;border-radius:12px;align-self:flex-start;line-height:1.3}
.vsrc svg{width:15px;height:15px;flex-shrink:0;color:#0F9D6E}
.vflag{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:#9A6206;align-self:flex-start}
.vflag svg{width:16px;height:16px;flex-shrink:0;color:#C66}
.versus-closer{max-width:840px;margin:clamp(40px,5vw,56px) auto 0;text-align:center;font-family:var(--display);font-size:clamp(20px,2.2vw,27px);font-weight:600;color:#fff;line-height:1.4;letter-spacing:-.01em}
.versus-closer em{font-style:normal;color:var(--teal-glow)}

/* ---- Responsive ---- */
@media (max-width:980px){
  .op-grid{grid-template-columns:1fr}
  .br-grid,.stk-grid,.intel-grid,.el-grid,.cta-grid{grid-template-columns:1fr;gap:40px}
  .stk-visual{order:2;height:440px}
  .scanwrap{height:420px}
  .el-grid .doc-grid{order:2}
}
@media (max-width:760px){
  .versus-grid{grid-template-columns:1fr}
  .scrolly-grid{grid-template-columns:1fr;gap:24px}
  .flow-body{grid-template-columns:1fr}
  .flow-main{grid-template-columns:1fr;border-right:none;border-bottom:1px solid #EEF3F5}
  .flow-steps{grid-template-columns:1fr 1fr}
  .scrolly-visual{position:relative;top:0;height:auto;order:-1}
  .scrolly-stage{height:auto;min-height:360px}
  .scrolly-panel{position:relative;top:0;opacity:1;transform:none;display:none}
  .scrolly-panel.active{display:flex}
  .scrolly-step{min-height:0;padding:14px 0 28px}
}
@media (max-width:680px){
  .lc-railwrap{margin:0}
  .lc-rail,.lc-today{display:none}
  .lc-node{position:static;transform:none!important;display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;cursor:default}
  .lc-node .pt{margin:4px 0 0}
  .lc-flag{position:static;transform:none!important;width:auto;flex:1;box-shadow:var(--shadow-sm)}
  .lc-node.dimmed{display:none}
  .lc-detail{grid-template-columns:1fr;text-align:left;gap:14px}
  .lc-detail .dmeta{text-align:left}
  .proc-tiles{width:auto;position:relative;right:auto;margin-top:24px}
  .doc-grid{grid-template-columns:1fr}
}

/* ---- 05-30 — Operators contrast: depth + accent (de-bland) ---- */
.op-card{position:relative;overflow:hidden}
.op-generic{transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s}
.op-generic:hover{transform:translateY(-4px);box-shadow:0 38px 80px -30px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.16)}
.op-allure::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--grad-teal)}
.op-allure::after{content:'';position:absolute;right:-54px;top:-54px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(20,184,166,.12),transparent 70%);pointer-events:none}

/* ---- 05-30 — Versus intro: operator portrait + copy ---- */
.versus-intro{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,4vw,58px);align-items:center;max-width:1100px;margin:0 auto clamp(36px,4vw,54px)}
.versus-intro-copy{text-align:left}
.versus-intro-copy .h2{margin-top:14px}
.versus-intro-copy .lead{margin-top:18px;max-width:560px}
.versus-photo{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:5/4;background:#0e2b39;box-shadow:0 44px 96px -32px rgba(0,0,0,.62),0 0 0 1px rgba(20,184,166,.16)}
.versus-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 32%}
.versus-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 46%,rgba(7,14,18,.62));pointer-events:none}
.versus-photo-tag{position:absolute;left:18px;bottom:18px;right:18px;z-index:2;font-family:var(--display);font-weight:600;font-size:clamp(15px,1.5vw,17px);color:#fff;background:rgba(7,14,18,.42);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:11px 15px;line-height:1.35}
@media (max-width:860px){
  .versus-intro{grid-template-columns:1fr;gap:26px}
  .versus-photo{aspect-ratio:16/10;max-height:340px}
  .versus-intro-copy{text-align:center}
  .versus-intro-copy .lead{margin-left:auto;margin-right:auto}
}

/* ---- 05-30 — Versus polish: white active chip, recessive generic, branded standout allure ---- */
.vchip.on{background:#fff;color:#04171c;border-color:#fff;box-shadow:0 8px 20px -8px rgba(0,0,0,.55)}

/* Generic card recedes: muted gray surface */
.vcard.generic{background:#F4F8F9;border-color:#E1E9EC;box-shadow:0 18px 46px -30px rgba(0,0,0,.5)}
.vcard.generic .vcard-head{border-bottom-color:#E6EDEF}
.vcard.generic .vq{background:#EAEFF1}

/* AllureTrak card stands out: bright white, teal frame, top accent, strong glow */
.vcard.allure{position:relative;background:#fff;border:2px solid rgba(20,184,166,.6);box-shadow:0 46px 104px -34px rgba(20,184,166,.6),0 0 0 1px rgba(20,184,166,.12),0 2px 10px rgba(0,0,0,.22)}
.vcard.allure::before{content:'';position:absolute;left:0;right:0;top:0;height:5px;background:var(--grad-teal);z-index:3}
.vcard.allure .vcard-head{padding-top:24px;border-bottom-color:#E2F3F0}

/* Brand logo in the AllureTrak card */
.vcard.allure .vic-logo{background:transparent;padding:0;overflow:hidden;width:44px;height:44px;border-radius:12px;box-shadow:0 8px 18px -6px rgba(10,79,99,.65)}
.vcard.allure .vic-logo img{width:100%;height:100%;display:block;border-radius:12px}

/* ---- 05-31 — Lease lifecycle intro: copy + operator photo ---- */
.lifecycle-intro{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(32px,4vw,60px);align-items:center;max-width:1100px;margin:0 auto clamp(36px,4vw,52px)}
.lifecycle-intro-copy{text-align:left}
.lifecycle-intro-copy .h2{margin-top:14px}
.lifecycle-intro-copy .lead{margin-top:18px;max-width:560px}
.lifecycle-photo{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:5/4;background:#0e2b39;box-shadow:0 44px 96px -32px rgba(0,0,0,.62),0 0 0 1px rgba(20,184,166,.16)}
.lifecycle-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.lifecycle-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(7,14,18,.6));pointer-events:none}
.lifecycle-photo-tag{position:absolute;left:18px;bottom:18px;right:18px;z-index:2;font-family:var(--display);font-weight:600;font-size:clamp(14px,1.4vw,16px);color:#fff;line-height:1.35}
@media (max-width:860px){
  .lifecycle-intro{grid-template-columns:1fr;gap:26px}
  .lifecycle-photo{aspect-ratio:16/10;max-height:320px;order:-1}
  .lifecycle-intro-copy{text-align:center}
  .lifecycle-intro-copy .lead{margin-left:auto;margin-right:auto}
}