/* The home page (index.html, inside <div class="vh">). Built 2026-09-23 from
   plugin/docs/superpowers/mocks/2026-09-23-home-woo-structure.html; every rule is scoped to .vh. */
.vh{font-family:var(--font);color:var(--ink)}.vh a{color:inherit;text-decoration:none}.vh img{display:block;max-width:100%}.vh h1,.vh h2,.vh h3{font-weight:500;letter-spacing:-.035em;margin:0}.vh *{box-sizing:border-box}
.vh{--warm:hsl(var(--ah2) 32% 95%);--warm-line:hsl(var(--ah2) 25% 86%);--wrap:1300px}
.vh .wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px}
.vh .mark{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.vh .mark::before{content:"";width:9px;height:9px;border-radius:2px;background:currentColor;flex:none}
.vh .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 24px;border-radius:12px;font-size:15.5px;font-weight:500;border:1px solid transparent;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.vh .btn--acc{background:var(--accent);color:#fff;box-shadow:0 12px 26px -16px var(--accent)}
.vh .btn--acc:hover{background:var(--accent-dark)}
.vh .btn--line{border-color:var(--accent);color:var(--accent)}
.vh .btn--line:hover{background:var(--accent);color:#fff}
.vh .btn--white{background:#fff;color:var(--ink)}
.vh .btn--ghost{border-color:rgb(255 255 255/.55);color:#fff}
.vh .btn--ghost:hover{background:rgb(255 255 255/.1)}
.vh .btn--s{height:42px;padding:0 18px;font-size:14.5px;border-radius:10px}
.vh .arrow{border-bottom:1px solid currentColor;padding-bottom:2px;font-weight:500;font-size:15px}
.vh h1,.vh h2,.vh h3{font-weight:500;letter-spacing:-.035em;margin:0}
.vh .hero{position:relative;isolation:isolate;overflow:hidden;min-height:calc(100vh - 114px);display:flex;align-items:center;padding:12px 0 48px}
.vh .hero .wrap{display:grid;grid-template-columns:1fr 1.02fr;gap:64px;align-items:center;width:100%}
.vh .hero-shape{position:absolute;right:-120px;top:40px;width:820px;height:calc(100% - 80px);border-radius:48px 0 0 48px;background:var(--hero);z-index:-1}
.vh .hero-shape.s2{display:none}
.vh .launch{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--n50);margin-bottom:34px}
.vh .launch::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--accent-2);flex:none}
.vh .launch b{font-weight:500;color:var(--ink)}
.vh .launch a{color:var(--accent);font-weight:500}
.vh .hero h1{font-size:clamp(44px,5.4vw,76px);line-height:1;max-width:11ch}
.vh .hero .lead{font-size:19px;line-height:1.6;color:var(--n50);max-width:40ch;margin:28px 0 36px}
.vh .hero .ctas{display:flex;align-items:center;gap:28px}
.vh .hero .fine{font-size:13.5px;color:var(--n60);margin-top:26px}
.vh .shot{position:relative;height:min(640px,calc(100vh - 190px));min-height:470px}
.vh .shot .photo{position:absolute;inset:0 0 0 70px;border-radius:28px;overflow:hidden;box-shadow:0 50px 90px -50px rgb(20 20 40/.55)}
.vh .shot .photo img{width:100%;height:100%;object-fit:cover}
.vh .frame{position:absolute;left:34%;top:30%;width:44%;height:40%;border:1.5px solid #fff;border-radius:6px;box-shadow:0 0 0 999px rgb(10 14 30/.18)}
.vh .frame::before{content:"";position:absolute;left:-13px;top:-13px;width:26px;height:26px;border-radius:6px;background:var(--accent);box-shadow:0 6px 14px -4px rgb(0 0 0/.35)}
.vh .frame span{position:absolute;right:0;top:-30px;font-size:12px;font-weight:500;color:#fff;background:var(--accent);padding:5px 9px;border-radius:5px}
.vh .readcard{position:absolute;left:0;bottom:28px;width:330px;background:#fff;border-radius:18px;padding:18px 20px;box-shadow:0 30px 60px -30px rgb(20 20 40/.5)}
.vh .readcard .f{display:flex;justify-content:space-between;font-size:12.5px;color:var(--n60);padding-bottom:12px;border-bottom:1px solid var(--surface)}
.vh .readcard .f b{font-weight:500;color:var(--n60);font-variant-numeric:tabular-nums}
.vh .readcard h4{margin:12px 0 6px;font-size:17px;font-weight:500;letter-spacing:-.02em}
.vh .readcard p{margin:0;font-size:14px;line-height:1.5;color:var(--n50)}
.vh .readcard .into{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;color:var(--n50)}
.vh .readcard .into::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--ok)}
.vh .readcard .into b{font-weight:500;color:var(--ink)}
.vh .stats{padding:90px 0 80px}
.vh .stats h2{font-size:clamp(34px,3.6vw,50px);line-height:1.05;max-width:17ch;margin-bottom:56px}
.vh .stats .srow{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.vh .stat{border-left:3px solid var(--accent);padding:4px 0 4px 26px}
.vh .stat .n{font-size:clamp(46px,4.6vw,66px);font-weight:500;letter-spacing:-.04em;line-height:1;color:var(--accent)}
.vh .stat .n small{font-size:.45em;letter-spacing:-.01em;margin-left:4px}
.vh .stat p{margin:14px 0 10px;font-size:16px;line-height:1.5;max-width:26ch}
.vh .stat a{font-size:13px;color:var(--n60);border-bottom:1px solid var(--n80)}
.vh .panel{position:relative;border-radius:28px;overflow:hidden;background:var(--dark);display:grid;grid-template-columns:320px 1fr;align-items:center;gap:56px;padding:64px}
.vh .panel>img{display:none}
.vh .panel .scene{order:2}
.vh .panel .cap{order:1;color:#fff}
.vh .panel .cap .mark{color:hsl(var(--ah) 90% 80%)}
.vh .panel .cap h3{font-size:34px;line-height:1.15;margin:16px 0 12px}
.vh .panel .cap p{margin:0;font-size:15px;line-height:1.6;color:rgb(255 255 255/.78)}
.vh .does{background:var(--warm);margin-top:-320px;padding:420px 0 120px}
.vh .does>.wrap>h2{font-size:clamp(36px,3.8vw,54px);text-align:center;margin-bottom:56px}
.vh .wide{position:relative;overflow:hidden;border-radius:28px;background:var(--accent);color:#fff;display:grid;grid-template-columns:.8fr 1.2fr;min-height:470px}
.vh .wide .shape{display:none}
.vh .wide .txt{position:relative;padding:60px 0 60px 60px;align-self:center}
.vh .wide h3{font-size:44px;line-height:1.02;margin:18px 0 18px}
.vh .wide p{font-size:16.5px;line-height:1.6;color:rgb(255 255 255/.84);margin:0 0 28px;max-width:34ch}
.vh .wide .mark{color:hsl(var(--ah) 90% 82%)}
.vh .wide .vis{position:relative;padding:48px 48px 48px 20px;align-self:center}
.vh .pair{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:28px}
.vh .card h3{font-size:30px;line-height:1.1;margin:28px 0 12px}
.vh .card p{font-size:16px;line-height:1.6;color:var(--n50);margin:0 0 24px;max-width:40ch}
.vh .card .vis{border-radius:24px;background:var(--hero);padding:32px;height:500px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;position:relative}
.vh .card .vis.v2{background:var(--hero)}
.vh .wide.light{background:#fff;color:var(--ink);grid-template-columns:1.2fr .8fr;margin-top:28px}
.vh .wide.light .shape{left:-160px;right:auto;top:auto;bottom:-260px;background:var(--soft-2);transform:rotate(-12deg)}
.vh .wide.light .txt{padding:60px 60px 60px 0}
.vh .wide.light p{color:var(--n50)}
.vh .wide.light .mark{color:var(--accent)}
.vh .wide.light .vis{padding:48px 20px 48px 48px;align-self:center}
.vh .dark{background:var(--dark);color:#fff;padding:110px 0 120px;overflow:hidden}
.vh .dark>.wrap>h2{font-size:clamp(36px,3.8vw,54px);text-align:center;margin-bottom:14px}
.vh .dark>.wrap>p.sub{text-align:center;color:rgb(255 255 255/.7);font-size:17px;margin:0 0 56px}
.vh .rows{display:flex;flex-direction:column;gap:22px}
.vh .row{display:flex;gap:22px;width:max-content;animation:vhDrift 90s linear infinite}
.vh .row.r2{animation-direction:reverse;animation-duration:110s;margin-left:-160px}
.vh .rows:hover .row{animation-play-state:paused}
@keyframes vhDrift{to{transform:translateX(-50%)}}
.vh .pic{width:300px;flex:none;background:var(--dark-card);border-radius:18px;overflow:hidden;box-shadow:inset 0 0 0 1px rgb(255 255 255/.07)}
.vh .pic img{width:100%;height:210px;object-fit:cover}
.vh .pic div{padding:14px 16px 18px}
.vh .pic small{display:block;font-size:11.5px;color:rgb(255 255 255/.45);margin-bottom:6px}
.vh .pic b{display:block;font-weight:500;font-size:14.5px;margin-bottom:5px}
.vh .pic span{font-size:13px;line-height:1.5;color:rgb(255 255 255/.72);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vh .state{margin-top:80px;display:grid;grid-template-columns:.95fr 1.05fr;background:var(--page);color:var(--ink);border-radius:28px;overflow:hidden;min-height:440px}
.vh .state .l{background:var(--hero);padding:48px;display:flex;flex-direction:column;justify-content:center;align-items:center}
.vh .tree{background:#fff;border-radius:16px;padding:18px 20px;box-shadow:0 30px 60px -36px rgb(20 20 40/.45);font-size:14px;width:360px}
.vh .tree .h{display:flex;justify-content:space-between;font-size:12px;color:var(--n60);padding-bottom:10px;border-bottom:1px solid var(--surface);margin-bottom:6px}
.vh .tree div.i{display:flex;justify-content:space-between;padding:7px 0}
.vh .tree div.i.c{padding-left:22px;color:var(--n50)}
.vh .tree div.i span{color:var(--n60);font-variant-numeric:tabular-nums}
.vh .rest{margin-top:16px;max-width:360px;background:var(--dark);color:#d9e0ff;border-radius:14px;padding:16px 18px;font:12.5px/1.6 ui-monospace,Consolas,monospace;width:360px}
.vh .rest em{color:hsl(var(--ah) 90% 78%);font-style:normal}
.vh .state .r{padding:64px 60px;align-self:center}
.vh .state h3{font-size:40px;line-height:1.05;margin:18px 0 18px;max-width:14ch}
.vh .state p{font-size:16.5px;line-height:1.6;color:var(--n50);margin:0 0 16px;max-width:44ch}
.vh .state .from{font-size:14px;color:var(--n60);margin-top:22px}
.vh .state .from b{color:var(--ink);font-weight:500}
.vh .tested{padding:110px 0 20px}
.vh .tested .top{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:34px}
.vh .tested h2{font-size:30px;line-height:1.15;max-width:22ch}
.vh .tested .top p{margin:0;font-size:15px;color:var(--n50);max-width:40ch;line-height:1.6}
.vh .real{padding:100px 0 110px}
.vh .real h2{font-size:clamp(36px,3.8vw,54px);line-height:1.05;max-width:20ch}
.vh .real .sub{font-size:17px;line-height:1.6;color:var(--n50);max-width:62ch;margin:18px 0 36px}
.vh .tabs{display:flex;gap:34px;border-bottom:1px solid var(--n80);margin-bottom:34px}
.vh .tabs button{font:inherit;font-size:16px;font-weight:500;color:var(--n60);background:none;border:0;padding:0 0 14px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.vh .tabs button.on{color:var(--ink);border-color:var(--accent)}
.vh .case{display:none;grid-template-columns:1fr 1fr 1fr;gap:22px;min-height:440px}
.vh .case.on{display:grid}
.vh .case>div{border-radius:24px;overflow:hidden;position:relative}
.vh .case .a{background:var(--hero);padding:40px 36px;display:flex;flex-direction:column;justify-content:center;gap:0}
.vh .case .a h3{font-size:26px;line-height:1.15;margin:0 0 16px}
.vh .case .a p{font-size:15.5px;line-height:1.6;color:var(--n50);margin:0 0 12px}
.vh .case .a p b{color:var(--ink);font-weight:500}
.vh .case .a .btn{margin-top:22px;align-self:flex-start}
.vh .case .b img{width:100%;height:100%;object-fit:cover}
.vh .case .b .who{position:absolute;left:18px;bottom:18px;background:rgb(255 255 255/.94);border-radius:10px;padding:10px 12px;font-size:12.5px;line-height:1.45;max-width:78%}
.vh .case .b .who b{display:block;font-weight:500}
.vh .case .c{background:var(--dark);color:#fff;padding:38px 34px;display:flex;flex-direction:column}
.vh .case .c .big{font-size:76px;font-weight:500;letter-spacing:-.05em;line-height:.95;color:hsl(var(--ah) 90% 80%)}
.vh .case .c .big small{font-size:.36em;letter-spacing:-.01em;color:#fff;margin-left:6px}
.vh .case .c p{font-size:18px;line-height:1.45;margin:22px 0 0;letter-spacing:-.01em}
.vh .case .c .note{margin-top:auto;font-size:13px;line-height:1.55;color:rgb(255 255 255/.6)}
.vh .steps{display:flex;gap:10px;margin-top:26px}
.vh .steps button{width:46px;height:46px;border-radius:12px;border:1px solid var(--n80);background:var(--page);font-size:18px;cursor:pointer}
.vh .steps button:last-child{background:var(--ink);color:#fff;border-color:var(--ink)}
.vh .faq{padding-top:10px;padding-bottom:100px;display:grid;grid-template-columns:.8fr 1.2fr;gap:60px}
.vh .faq h2{font-size:40px;line-height:1.05}
.vh .faq details{border-bottom:1px solid var(--n80);padding:22px 0}
.vh .faq summary{font-size:19px;font-weight:500;letter-spacing:-.02em;cursor:pointer;list-style:none;display:flex;justify-content:space-between}
.vh .faq summary::after{content:"+";color:var(--accent)}
.vh .faq details[open] summary::after{content:"–"}
.vh .faq details p{font-size:15.5px;line-height:1.65;color:var(--n50);margin:14px 0 0;max-width:60ch}
.vh .cta{position:relative;overflow:hidden;border-radius:28px;background:var(--accent);color:#fff;padding:72px 64px;display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;margin-bottom:100px}
.vh .cta .shape{display:none}
.vh .cta h2{position:relative;font-size:clamp(38px,4vw,58px);line-height:1.02;max-width:14ch}
.vh .cta p{position:relative;font-size:17px;line-height:1.6;color:rgb(255 255 255/.85);margin:22px 0 32px;max-width:44ch}
.vh .cta .ctas{position:relative;display:flex;gap:14px}
.vh .plans{position:relative;display:flex;flex-direction:column;gap:12px}
.vh .plans div{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid rgb(255 255 255/.22);padding:18px 0;font-size:15.5px}
.vh .plans div:last-child{border-bottom:1px solid rgb(255 255 255/.22)}
.vh .plans div b{font-weight:500;font-size:17px}
.vh .plans div span{color:rgb(255 255 255/.8)}
@media (max-width:900px){.vh .wrap{padding:0 16px}.vh .hero .wrap,.vh .wide,.vh .wide.light,.vh .pair,.vh .state,.vh .case.on,.vh .faq,.vh .cta,.vh .stats .srow{grid-template-columns:1fr}.vh .hero{min-height:0}.vh .shot{height:440px;min-height:0}.vh .shot .photo{left:30px}.vh .readcard{width:280px;bottom:16px}.vh .panel{height:auto;grid-template-columns:1fr;padding:32px 20px;gap:28px}.vh .tree,.vh .rest{width:100%}.vh .does{margin-top:-200px;padding-top:260px}.vh .wide .txt,.vh .wide.light .txt{padding:36px 24px}.vh .wide .vis,.vh .wide.light .vis{padding:0 20px 28px}.vh .card .vis{height:380px;padding:18px}.vh .state .r{padding:36px 24px}.vh .rest{position:static;margin-top:18px;width:auto}.vh .tested .top{flex-direction:column;align-items:start}.vh .cta{padding:44px 24px}.vh .case .c .big{font-size:60px}.vh .tabs{gap:22px;overflow-x:auto}}
@media (prefers-reduced-motion:reduce){.vh .row{animation:none}}
.vh .logos{display:grid;grid-template-columns:repeat(6,1fr);gap:22px 24px;padding:30px 0;border-top:1px solid var(--n80);border-bottom:1px solid var(--n80)}
.vh .logos span{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;color:var(--n50);filter:grayscale(1);opacity:.8;transition:filter .3s,opacity .3s}
.vh .logos span:hover{filter:none;opacity:1}
.vh .logos img{width:28px;height:28px;border-radius:6px;flex:none}
@media (max-width:900px){.vh .logos{grid-template-columns:repeat(2,1fr)}}