/* Business Online - mobile case-study interactions */
.bo-phones{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;justify-items:center}
.bo-phone{width:100%;max-width:260px}
.bo-phone .scr{position:relative;width:100%;aspect-ratio:546/1183;border-radius:36px;background:#1c1a17;padding:11px;box-shadow:0 36px 70px -38px rgba(0,0,0,.5),0 0 0 2px rgba(0,0,0,.08);overflow:hidden}
.bo-phone .scr::before{content:'';position:absolute;top:14px;left:50%;transform:translateX(-50%);width:78px;height:18px;background:#1c1a17;border-radius:0 0 14px 14px;z-index:3}
.bo-phone .scr video,.bo-phone .scr img{width:100%;height:100%;object-fit:cover;border-radius:26px;display:block}
.bo-phone.tall .scr img{object-position:top}
.bo-phone .cap{font-family:'Geist Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);text-align:center;margin-top:14px}
@media(max-width:760px){.bo-phones{grid-template-columns:1fr 1fr}.bo-phone.tall{grid-column:span 2;max-width:300px;margin:0 auto}}

.bo-board{border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:0 24px 60px -34px rgba(42,37,32,.4);cursor:zoom-in;background:#fff}
.bo-board img{display:block;width:100%;transition:transform .6s}
.bo-board:hover img{transform:scale(1.02)}

.bo-tilts{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
.bo-tilt{perspective:1200px;cursor:zoom-in}
.bo-tilt .card{border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:0 24px 60px -34px rgba(42,37,32,.4);transition:transform .35s ease;transform-style:preserve-3d}
.bo-tilt:hover .card{transform:rotateX(4deg) rotateY(-6deg) scale(1.02)}
.bo-tilt .card img{display:block;width:100%}
.bo-tilt .t{font-family:'Geist Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);margin-top:12px}
@media(max-width:760px){.bo-tilts{grid-template-columns:1fr}}

.bo-ba{position:relative;width:100%;max-width:300px;margin:0 auto;aspect-ratio:887/1786;border-radius:30px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 70px -40px rgba(0,0,0,.5);user-select:none;cursor:ew-resize;background:#fff}
.bo-ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;pointer-events:none}
.bo-ba .after{clip-path:inset(0 0 0 var(--x,50%))}
.bo-ba .ba-handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:3px;background:var(--accent);transform:translateX(-50%);pointer-events:none}
.bo-ba .ba-handle::after{content:'\21C6';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.bo-ba .ba-lbl{position:absolute;top:12px;font-family:'Geist Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.08em;background:rgba(0,0,0,.6);color:#fff;padding:5px 10px;border-radius:20px;pointer-events:none}
.bo-ba .ba-lbl.l{left:12px}.bo-ba .ba-lbl.r{right:12px}

#lb{position:fixed;inset:0;background:rgba(20,18,15,.92);display:none;place-items:center;z-index:2000;padding:30px;cursor:zoom-out}
#lb.on{display:grid}
#lb img{max-width:96%;max-height:94%;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
#lb .x{position:absolute;top:24px;right:30px;color:#fff;font-size:30px;cursor:pointer}

/* before/after side-by-side (accurate for two different screens) */
.bo-compare{display:grid;grid-template-columns:1fr 1fr;gap:30px;justify-items:center;align-items:start}
.bo-cmp{position:relative;width:100%;max-width:300px;margin:0;border-radius:30px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 70px -42px rgba(0,0,0,.5);cursor:zoom-in;background:#fff}
.bo-cmp img{display:block;width:100%;height:auto;transition:transform .5s}
.bo-cmp:hover img{transform:scale(1.03)}
.bo-cmp figcaption{position:absolute;top:12px;left:12px;font-family:'Geist Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.08em;background:rgba(0,0,0,.6);color:#fff;padding:5px 10px;border-radius:20px}
.bo-cmp.after figcaption{background:var(--accent)}
@media(max-width:620px){.bo-compare{grid-template-columns:1fr;gap:24px}}

/* maker / checker / authoriser swimlane - unified 4-col grid (lane + 3 stages) */
.swim{display:grid;grid-template-columns:104px repeat(3,1fr);gap:16px;border:1px solid var(--line);border-radius:20px;background:#fff;padding:28px 24px;box-shadow:0 24px 60px -34px rgba(42,37,32,.22);align-items:stretch}
.swim-lane{align-self:start;justify-self:start;font-family:'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.07em;font-size:11.5px;font-weight:500;color:#fff;padding:8px 12px;border-radius:20px;text-align:center;margin-top:8px}
.swim-lane.maker{background:#3f6bd6}
.swim-lane.checker{background:#e0a83c}
.swim-lane.auth{background:var(--accent)}
.sp-cell{display:flex;min-width:0}
.sp-cell.ghost{opacity:.6}
.sp-card{position:relative;border:1px solid var(--line);border-radius:14px;background:var(--paper);padding:14px 16px 14px;width:100%;transition:transform .3s,box-shadow .3s,border-color .3s}
.sp-cell:not(.ghost):not(:empty):hover .sp-card{transform:translateY(-3px);border-color:rgba(42,37,32,.2);box-shadow:0 14px 34px -22px rgba(42,37,32,.4)}
.sp-card .sp-n{display:block;font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.12em;color:var(--accent);margin-bottom:6px}
.sp-card b{display:block;font-family:'Archivo',sans-serif;font-weight:800;font-size:15px;margin-bottom:4px;line-height:1.2}
.sp-card p{font-size:13px;color:var(--ink-soft);margin:0;line-height:1.45}
.sp-card.empty{display:flex;align-items:center;justify-content:center;color:var(--ink-faint);font-family:'Geist Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.07em;background:transparent;border-style:dashed;min-height:52px;text-align:center}
.sp-fork{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.sp-fork .fork{font-family:'Geist Mono',monospace;font-size:10.5px;letter-spacing:.03em;padding:5px 9px;border-radius:8px}
.sp-fork .approve{background:rgba(95,174,106,.16);color:#3d7a48;border:1px solid rgba(95,174,106,.4)}
.sp-fork .reject{background:var(--accent-soft);color:var(--accent);border:1px solid rgba(255,59,29,.3)}
@media(max-width:760px){
  .swim{grid-template-columns:1fr;gap:10px;padding:20px 16px}
  .swim>*{grid-row:auto !important;grid-column:1 !important}
  .swim-lane{justify-self:stretch;margin-top:14px}
  .sp-cell:empty{display:none}
  .sp-cell.ghost{display:none}
}

/* scrollytelling - pinned phone + scrolling steps */
.bo-scrolly{display:grid;grid-template-columns:300px 1fr;gap:60px;align-items:start}
.bo-sticky{position:sticky;top:80px;height:fit-content}
.bo-stickyphone{position:relative;width:280px;aspect-ratio:546/1183;margin:0 auto;border-radius:40px;background:#1c1a17;padding:12px;box-shadow:0 40px 80px -40px rgba(0,0,0,.5),0 0 0 2px rgba(0,0,0,.08)}
.bo-stickyphone::before{content:'';position:absolute;top:15px;left:50%;transform:translateX(-50%);width:82px;height:19px;background:#1c1a17;border-radius:0 0 15px 15px;z-index:3}
.bo-stickyphone img{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);object-fit:cover;object-position:top;border-radius:28px;opacity:0;transform:scale(1.03);transition:opacity .5s ease,transform .6s ease}
.bo-stickyphone img.on{opacity:1;transform:scale(1)}
.bo-sc-steps{display:flex;flex-direction:column;gap:0;padding:16vh 0}
.bo-sc-step{min-height:70vh;display:flex;flex-direction:column;justify-content:center;opacity:.32;transition:opacity .4s ease}
.bo-sc-step.act{opacity:1}
.bo-sc-step .n{font-family:'Geist Mono',monospace;font-size:12px;letter-spacing:.14em;color:var(--accent)}
.bo-sc-step h3{font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(22px,3vw,30px);letter-spacing:-.02em;margin:8px 0 10px;line-height:1.1}
.bo-sc-step p{font-size:16px;color:var(--ink-soft);max-width:440px;margin:0;line-height:1.55}
@media(max-width:760px){.bo-scrolly{grid-template-columns:1fr;gap:0}.bo-sticky{position:static;margin-bottom:30px}.bo-sc-steps{gap:8vh;padding:6vh 0}.bo-sc-step{opacity:1;min-height:auto}}

/* trust-signal hotspots */
.bo-trust-wrap{display:flex;justify-content:center}
.bo-trust{position:relative;width:300px;max-width:100%}
.bo-trust>img{display:block;width:100%;height:auto;border-radius:34px;border:1px solid var(--line);box-shadow:0 36px 80px -40px rgba(0,0,0,.55)}
.bo-hot{position:absolute;transform:translate(-50%,-50%);width:13px;height:13px;padding:0;border:0;background:none;cursor:pointer;z-index:2}
.bo-hot .dot{position:absolute;inset:0;border-radius:50%;background:rgba(150,144,133,.95);box-shadow:0 0 0 2px rgba(150,144,133,.18);display:block}
.bo-hot .dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:rgba(150,144,133,.9);animation:bo-ping 2.4s cubic-bezier(0,0,.2,1) infinite}
@keyframes bo-ping{0%{transform:scale(1);opacity:.35}80%,100%{transform:scale(1.9);opacity:0}}
.bo-hot .tip{position:absolute;bottom:140%;left:50%;transform:translate(-50%,8px);width:210px;background:#1c1a17;color:#fff;border-radius:12px;padding:12px 14px;font-size:12.5px;line-height:1.45;opacity:0;visibility:hidden;transition:opacity .25s,transform .25s;box-shadow:0 18px 40px -18px rgba(0,0,0,.6);z-index:5;text-align:left}
.bo-hot .tip b{display:block;font-family:'Archivo',sans-serif;font-weight:800;font-size:13px;margin-bottom:4px;color:#fff}
.bo-hot .tip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:7px solid transparent;border-top-color:#1c1a17}
.bo-hot:hover .tip,.bo-hot:focus-visible .tip,.bo-hot.open .tip{opacity:1;visibility:visible;transform:translate(-50%,0)}
.bo-hot:hover,.bo-hot.open{z-index:6}
/* flip tips that sit low on the screen so they open upward-safe */
.bo-hot.low .tip{bottom:auto;top:140%}
.bo-hot.low .tip::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#1c1a17}
@media(max-width:760px){.bo-hot .tip{width:170px}}

/* role-dashboard videos - these clips ALREADY include a device frame + label, so NO extra bezel */
.bo-vids{display:flex;gap:48px;justify-content:center;flex-wrap:wrap;align-items:flex-start}
.bo-vid{margin:0;width:100%;max-width:320px}
.bo-vid video{width:100%;height:auto;display:block;border-radius:48px}
.bo-vid figcaption{margin-top:14px;text-align:center;font-family:'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--ink-faint)}
/* role-based design decisions — before/after toggle */
.roledec-toggle{display:inline-flex;gap:4px;border:1px solid var(--line);border-radius:999px;padding:4px;background:#fff;margin:0 auto 28px;box-shadow:0 10px 30px -24px rgba(42,37,32,.4)}
.roledec-toggle button{font-family:'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:11px;color:var(--ink-soft);background:none;border:0;padding:9px 18px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s}
.roledec-toggle button.on{background:var(--accent);color:#fff}
.roledec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.roledec-card{border:1px solid var(--line);border-radius:16px;padding:24px 22px;background:#fff;box-shadow:0 14px 40px -28px rgba(42,37,32,.22)}
.roledec-card .rd-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.roledec-card h3{font-size:17px;text-transform:none;letter-spacing:-.01em;line-height:1.2}
.roledec-card .rd-role{flex:none;font-family:'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.06em;font-size:9.5px;color:var(--accent);background:rgba(255,59,29,.08);border-radius:999px;padding:5px 10px;white-space:nowrap;margin-top:2px}
.roledec-card p{color:var(--ink-soft);font-size:14.5px;line-height:1.5;margin:0}
.roledec-card p b{color:var(--ink);font-weight:600}
.roledec:not(.is-after) .rd-after{display:none}
.roledec.is-after .rd-before{display:none}
.roledec:not(.is-after) .roledec-card{opacity:.8}
@media(max-width:680px){.roledec-grid{grid-template-columns:1fr}}
/* annotated role videos */
.annrole{display:grid;grid-template-columns:280px 1fr;gap:40px;align-items:center;max-width:800px;margin:0 auto 40px}
.annrole .bo-vid{max-width:280px;margin:0}
.annrole-info .rd-role{display:inline-block;margin-bottom:18px}
.annlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px}
.annlist li{position:relative;padding-left:26px}
.annlist li::before{content:'';position:absolute;left:0;top:6px;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(255,59,29,.12)}
.annlist b{display:block;font-size:16px;color:var(--ink);font-weight:600;margin-bottom:4px;letter-spacing:-.01em}
.annlist span{font-size:14px;color:var(--ink-soft);line-height:1.5}
@media(max-width:680px){.annrole{grid-template-columns:1fr;gap:24px;justify-items:center}.annrole-info{justify-self:stretch}}
@media(max-width:680px){.bo-vids{gap:24px}.bo-vid{max-width:280px}}