/* Visibility Engine page additions on top of site.css */
.vis-hero{margin-top:56px;max-width:980px;}
.vis-hero .frame{position:relative;box-shadow: var(--shadow);}
.vtable{padding:6px 0;}
.vrow{display:grid;grid-template-columns:1.1fr .7fr 1.6fr;gap:18px;padding:14px 22px;border-bottom:1px solid var(--line);align-items:center;font-size:15px;}
.vrow small{display:block;font-family:var(--font-m);font-size:11px;color:var(--ink-3);margin-top:2px;}
.vrow.vh{font-family:var(--font-m);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--rule);}
.vrow.you{background:color-mix(in srgb,var(--hot) 14%,var(--card));border-bottom:0;}
.vrow.you span:nth-child(2){color:var(--hot);font-weight:700;}
.vnote{padding:12px 22px 16px;font-family:var(--font-m);font-size:11.5px;color:var(--ink-3);border-top:1px dashed var(--line);}
.q4{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--rule);border-radius:8px;overflow:hidden;background:var(--card);}
.q4>div{padding:30px 26px;border-right:1px solid var(--rule);}
.q4>div:last-child{border-right:0;}
.q4 .num{font-family:var(--font-d);font-size:72px;line-height:.9;font-weight:700;color:var(--hot);font-style:italic;}
.q4 h3{font-size:1.35rem;margin:14px 0 10px;line-height:1.15;}
.q4 p{color:var(--ink-2);font-size:15px;}
.vcols{grid-template-columns:1.1fr .8fr .7fr 1.3fr 1.5fr .9fr;}
.vcols span:nth-child(3){font-family:var(--font-m);}
.vp{font-style:normal;font-family:var(--font-m);font-size:11px;padding:3px 9px;border-radius:3px;border:1px solid var(--rule);display:inline-block;}
.vp.hi{background:var(--hot);color:#fff;border-color:var(--hot);}
.vp.md{background:var(--hi);}
.vp.cf{background:#fff;border-style:dashed;}
.vq{font-style:normal;font-family:var(--font-m);font-size:11px;margin-left:6px;color:var(--ink-3);}
.report-list{margin-top:44px;max-width:760px;}
.report-list h3{font-size:1.6rem;margin-bottom:14px;}
.report-list ol{margin:0;padding-left:1.3em;display:grid;gap:8px;color:var(--ink-2);}
.report-list b{color:var(--ink);}
.roles{display:grid;gap:14px;}
.role{background:var(--card);border:1px solid var(--rule);border-radius:8px;padding:20px 24px;}
.role.hi{background:var(--hi);box-shadow: var(--shadow);}
.role .rk{font-family:var(--font-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);}
.role.hi .rk{color:var(--ink);}
.role h4{font-family:var(--font-d);font-size:1.4rem;margin:4px 0 4px;letter-spacing:-.01em;}
.role p{color:var(--ink-2);font-size:15px;}
.role.hi p{color:var(--ink);}
.guards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.guards>div{border:1px solid rgba(230, 237, 245, .22);border-radius:8px;padding:24px;background:#12263D;}
.guards h4{font-family:var(--font-d);font-size:1.35rem;margin-bottom:10px;color:var(--hi);}
.guards h4::before{content:"Never ";color:#E6EDF5;font-style:italic;}
.guards p{color:#9DB0C4;font-size:15px;}
.pair{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center;}
.flow{display:grid;gap:8px;justify-items:stretch;}
.fstep{border:1px solid var(--rule);border-radius:8px;padding:14px 20px;background:var(--card);display:flex;justify-content:space-between;gap:14px;align-items:baseline;}
.fstep b{font-family:var(--font-d);font-size:1.2rem;}
.fstep span{font-family:var(--font-m);font-size:12px;color:var(--ink-3);text-align:right;}
.fstep.hi{background:var(--hi);box-shadow: var(--shadow);}
.farrow{text-align:center;font-family:var(--font-m);color:var(--hot);line-height:1;}
.vprices{grid-template-columns:1fr 1fr;max-width:900px;margin-inline:auto;}
@media (max-width:1000px){.q4{grid-template-columns:1fr 1fr;}.q4>div:nth-child(2){border-right:0;}.q4>div:nth-child(-n+2){border-bottom:1px solid var(--rule);}.guards{grid-template-columns:1fr 1fr;}.pair{grid-template-columns:1fr;}.vcols{grid-template-columns:1fr 1fr;}.vcols span:nth-child(n+3){font-size:14px;}.vprices{grid-template-columns:1fr;}.vrow{grid-template-columns:1fr 1fr;}.vrow span:last-child{grid-column:1/-1;}}
@media (max-width:600px){.q4,.guards{grid-template-columns:1fr;}.q4>div{border-right:0;border-bottom:1px solid var(--rule);}.q4>div:last-child{border-bottom:0;}}

/* photo stage for the hero, and the deeper-checks cards */
.vis-stage { position:relative; margin-top:56px; border:1px solid var(--rule); border-radius:8px; overflow:hidden; box-shadow:var(--shadow); padding:clamp(28px, 5vw, 64px) clamp(20px, 6vw, 90px); min-height:460px; display:flex; align-items:center; }
.vis-stage .scene-bg { position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.06); animation:drift 22s ease-in-out infinite alternate; }
.vis-stage .scene-veil { position:absolute; inset:0; background:linear-gradient(90deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .3)); }
.vis-stage .vis-card { position:relative; width:min(640px, 100%); box-shadow:var(--shadow); z-index:2; }
.vis-phone { position:absolute; right:clamp(16px, 7%, 90px); bottom:-34px; width:clamp(130px, 17%, 190px); z-index:3; }
.vis-phone.float { animation:bob 8s ease-in-out infinite; }
.vchip { position:absolute; z-index:4; background:#fff; border:1px solid var(--rule); border-radius:3px; padding:7px 14px 7px 10px; font-family:var(--font-m); font-size:12.5px; font-weight:500; box-shadow:var(--shadow); display:inline-flex; align-items:center; gap:8px; animation:bob 6s ease-in-out infinite; }
.vchip .dot { width:11px; height:11px; border-radius:50%; border:1px solid var(--rule); display:inline-block; }
.dot.ok { background:var(--ok); } .dot.bad { background:var(--hot); } .dot.warn { background:var(--hi); }
.vc1 { top:7%; right:34%; } .vc2 { top:24%; right:6%; animation-delay:-2s; } .vc3 { bottom:9%; right:36%; animation-delay:-4s; }
.deep-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
.deep { background:var(--card); border:1px solid var(--rule); border-radius:8px; padding:26px 26px 22px; box-shadow:var(--shadow); }
.deep-sq { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:16px; }
.deep-sq .sq { width:18px; height:18px; border-radius:5px; border:1px solid var(--rule); display:inline-block; }
.deep-sq .sq-pass { background:var(--ok); } .deep-sq .sq-warn { background:repeating-linear-gradient(135deg, var(--hi) 0 4px, #F0F5FB 4px 8px); } .deep-sq .sq-fail { background:var(--hot); }
.deep-sq .sq:nth-child(4n) { background:transparent; border-style:dashed; border-color:var(--ink-3); }
.deep h3 { font-size:1.5rem; margin-bottom:6px; }
.deep-lede { color:var(--ink-2); font-size:15px; margin-bottom:14px; }
.deep ul { margin:0; padding-left:1.1em; color:var(--ink-2); font-size:15px; display:grid; gap:9px; }
.deep-foot { margin-top:36px; max-width:760px; color:var(--ink-2); }
.deep-foot a { text-decoration:underline; font-weight:600; color:var(--ink); }
@media (max-width: 1000px) { .deep-grid { grid-template-columns:1fr; } .vis-stage { padding-bottom:150px; } .vis-phone { right:24px; } .vc1 { right:8%; top:4%; } .vc3 { display:none; } }
@media (prefers-reduced-motion: reduce) { .vis-stage .scene-bg, .vis-phone.float, .vchip { animation:none; } }
.nav-links a { white-space:nowrap; }
.nav-links { gap:20px; }
.vis-stage { padding-right:clamp(20px, 27%, 330px); }
.vis-stage .vis-card { width:min(620px, 100%); }
.vis-phone { right:clamp(16px, 6%, 80px); bottom:-40px; }
.vc1 { top:8%; right:7%; } .vc2 { top:22%; right:24%; }
@media (max-width: 1000px) { .vis-stage { padding-right:clamp(20px, 6vw, 90px); padding-bottom:170px; } .vc1 { right:8%; top:3%; } .vc2 { display:none; } }