/* Why HosBot · intro slide + one pastel panel per reason */
.why-section{margin-top:140px;padding:0 25px;scroll-margin-top:24px}

/* ---------- Shared visuals ---------- */
.wv{--wv-card:#fff;--wv-soft:#f5f7fa;--wv-text:#1d1d1f;--wv-muted:#6e6e73;--wv-line:#e3e7ec;--wv-accent:#0071e3;--wv-ok:#2f8a5b;--wv-ok-bg:#e8f5ee;color:var(--wv-text);font-size:14px;line-height:1.45;width:100%}
.wv-window{background:var(--wv-card);border:1px solid var(--wv-line);border-radius:18px;box-shadow:0 16px 40px #15294012;overflow:hidden;position:relative}
.wv-bar{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--wv-line);font-size:13px}
.wv-bar b{font-weight:600;white-space:nowrap}
.wv-live{white-space:nowrap}
.wv-dots{display:flex;gap:5px}.wv-dots i{width:9px;height:9px;border-radius:50%;background:var(--wv-line)}
.wv-live{margin-left:auto;color:var(--wv-ok);font-size:12px;font-weight:600}
.wv-tag{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--wv-muted);margin-bottom:10px}
.wv-bubble{padding:11px 14px;border-radius:16px;max-width:92%;font-size:14px}
.wv-bubble.me{align-self:flex-end;background:var(--wv-accent);color:#fff;border-bottom-right-radius:4px}
.wv-bubble.bot-msg{display:flex;gap:9px;align-items:flex-start;background:var(--wv-soft);border-bottom-left-radius:4px}
.wv .bot{transform:rotate(-7deg)}

/* Animation: steps fade in in sequence once .play is added (on scroll into view) */
.why-anim .wv .wv-step{opacity:0;transform:translateY(8px)}
.wv.play .wv-step{animation:wvIn .45s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:calc(var(--d,0) * .55s + .15s)}
@keyframes wvIn{to{opacity:1;transform:none}}

/* 1 · Its own computer */
.wv-computer{display:grid;grid-template-columns:minmax(0,.8fr) 70px minmax(0,1.6fr);align-items:center}
.wvc-laptop{display:flex;flex-direction:column;align-items:center;gap:0}
.wvc-lid{position:relative;width:100%;max-width:150px;height:18px;border-radius:8px 8px 2px 2px;background:linear-gradient(#c9ced6,#aeb5bf)}
.wvc-lid span{position:absolute;right:10px;bottom:22px;font-weight:600;color:var(--wv-muted);font-size:13px;opacity:0;animation:wvZ 2.4s infinite}
.wvc-lid span:nth-child(2){right:22px;bottom:34px;font-size:15px;animation-delay:.6s}
.wvc-lid span:nth-child(3){right:36px;bottom:48px;font-size:18px;animation-delay:1.2s}
@keyframes wvZ{30%,70%{opacity:.9}100%{opacity:0;transform:translateY(-6px)}}
.wvc-base{width:115%;max-width:176px;height:7px;border-radius:0 0 8px 8px;background:#d7dbe1}
.wvc-laptop em{font-style:normal;font-size:12px;color:var(--wv-muted);margin-top:14px;text-align:center}
.wvc-wire{height:2px;background:repeating-linear-gradient(90deg,var(--wv-line) 0 6px,transparent 6px 11px);position:relative;margin:0 6px}
.wvc-wire i{position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--wv-accent);animation:wvWire 1.6s linear infinite}
@keyframes wvWire{to{left:calc(100% - 8px)}}
.wvc-clock{font-size:46px;font-weight:600;letter-spacing:-2px;padding:14px 16px 4px;line-height:1}
.wvc-clock small{font-size:15px;letter-spacing:0;margin-left:5px;color:var(--wv-muted)}
.wv-tasks{list-style:none;margin:0;padding:6px 16px}
.wv-tasks li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--wv-line)}
.wv-tasks span{font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--wv-muted);width:52px}
.wv-tasks em{margin-left:auto;font-style:normal;width:22px;height:22px;border-radius:50%;background:var(--wv-ok-bg);color:var(--wv-ok);display:grid;place-items:center;font-size:12px;font-weight:700}
.wvc-tools{display:flex;gap:6px;padding:10px 16px 14px}
.wvc-tools span{font-size:11px;padding:4px 9px;border-radius:999px;background:var(--wv-soft);color:var(--wv-muted)}

/* 2 · Setup by conversation */
.wv-setup{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:18px;align-items:stretch}
.wvs-old,.wvs-new{background:var(--wv-card);border:1px solid var(--wv-line);border-radius:18px;padding:16px;position:relative}
.wvs-old{opacity:.75}
.wvs-graph{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 10px;padding:6px 2px}
.wvs-graph i{height:26px;border-radius:7px;border:1.5px dashed var(--wv-muted);opacity:.55}
.wvs-graph i:nth-child(2n){transform:translateY(10px)}
.wvs-x{position:absolute;inset:38px 16px 16px;opacity:0}
.wvs-x:before,.wvs-x:after{content:"";position:absolute;left:50%;top:50%;width:110%;height:3px;border-radius:3px;background:#e5484d;transform:translate(-50%,-50%) rotate(28deg)}
.wvs-x:after{transform:translate(-50%,-50%) rotate(-28deg)}
.wvs-new{display:flex;flex-direction:column;gap:10px}
.wvs-live{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-weight:600;font-size:13px}
.wvs-allow{padding:6px 11px;border-radius:999px;background:var(--wv-ok-bg);color:var(--wv-ok)}

/* 3 · Team */
.wvt-row{display:grid;grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr) 22px minmax(0,1fr) 22px minmax(0,1fr);align-items:stretch}
.wvt-node{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:16px 8px;border-radius:18px;background:var(--wv-card);border:1px solid var(--wv-line)}
.wvt-node strong{font-size:12.5px;font-weight:600;line-height:1.25}
.wvt-node em{font-style:normal;font-size:12px;color:var(--wv-ok)}
.wvt-link{height:2px;align-self:center;background:var(--wv-line);position:relative;margin:0 3px}
.wvt-link i{position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;background:var(--wv-accent);opacity:0}
.wv.play .wvt-link i{animation:wvPass .55s ease-in-out forwards;animation-delay:calc(var(--d) * .55s + .45s)}
@keyframes wvPass{0%{opacity:1;left:0}90%{opacity:1}100%{opacity:0;left:calc(100% - 10px)}}
.wvt-note{margin-top:18px;text-align:center;font-size:12px;color:var(--wv-muted)}

/* 4 · Learns by watching */
.wv-learn{display:grid;grid-template-columns:minmax(0,1.2fr) 40px minmax(0,1fr);align-items:center}
.wvl-rec{margin-left:auto;color:#e5484d;font-size:12px;font-weight:600;animation:wvBlink 1.2s infinite}
@keyframes wvBlink{50%{opacity:.35}}
.wvl-demo ol{margin:0;padding:12px 16px 14px 34px;display:flex;flex-direction:column;gap:9px}
.wvl-demo li{padding:7px 10px;border-radius:9px;background:var(--wv-soft)}
.wvl-cursor{position:absolute;left:62%;top:58px;width:14px;height:20px;background:var(--wv-text);clip-path:polygon(0 0,100% 70%,55% 70%,75% 100%,60% 100%,40% 72%,0 100%);opacity:0}
.wv.play .wvl-cursor{animation:wvCursor 2.2s ease-in-out forwards .15s}
@keyframes wvCursor{0%{opacity:1;top:58px}25%{top:96px}50%{top:136px}75%{top:176px}100%{opacity:1;top:176px}}
.wvl-arrow{text-align:center;font-size:24px;color:var(--wv-accent)}
.wvl-skill{background:var(--wv-card);border:1px solid var(--wv-line);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:8px;box-shadow:0 16px 40px #15294012}
.wvl-skill strong{font-size:18px;font-weight:600}
.wvl-skill em{font-style:normal;font-size:12px;color:var(--wv-muted)}
.wvl-week{display:flex;gap:6px}
.wvl-week span{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:12px;font-weight:600;background:var(--wv-ok-bg);color:var(--wv-ok)}

/* 5 · Smarter every day */
.wv-memory{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:16px;align-items:stretch}
.wvm-card{background:var(--wv-card);border:1px solid var(--wv-line);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px}
.wvm-card:first-child{opacity:.8}
.wvm-card em{font-style:normal;font-size:12px;color:var(--wv-muted)}
.wvm-later ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.wvm-later li{padding:8px 11px;border-radius:10px;background:var(--wv-soft);display:flex;gap:8px}
.wvm-later li:before{content:"✓";color:var(--wv-ok);font-weight:700}
.wvm-meter{height:8px;border-radius:8px;background:var(--wv-soft);overflow:hidden;margin-top:auto}
.wvm-meter i{display:block;height:100%;width:var(--w);border-radius:8px;background:linear-gradient(90deg,#f5c84b,#2f8a5b)}
.why-anim .wvm-meter i{width:0}
.wv.play .wvm-meter i{animation:wvMeter 1.4s cubic-bezier(.2,.7,.3,1) forwards .3s}
.wv.play .wvm-later .wvm-meter i{animation-delay:1.2s}
@keyframes wvMeter{to{width:var(--w)}}


/* ---------- Shared slide copy ---------- */
.why{--why-gap:20px}
.why .why-slide{scroll-margin-top:30px}
.why h3{margin:0;font-weight:600;letter-spacing:-.04em;line-height:1.08;color:#1d1d1f;font-size:clamp(2rem,3.4vw,3.1rem)}
.more-sections .why p{margin:0}
.why .why-num{display:inline-block;font-size:14px;font-weight:600;color:#0071e3;margin-bottom:18px;font-variant-numeric:tabular-nums}
.more-sections .why .why-line{font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.4;color:#1d1d1f;font-weight:500;margin-top:16px;letter-spacing:-.01em}
.more-sections .why .why-body{font-size:16px;line-height:1.7;margin-top:16px;max-width:560px}
.why-stage{border-radius:30px;padding:36px;display:flex;align-items:center}
.why .tone-mint{--tone:#e4f5ec;--tone-ink:#2f7a55}
.why .tone-blue{--tone:#e6f0fd;--tone-ink:#0062c4}
.why .tone-lilac{--tone:#efeafa;--tone-ink:#6b52a0}
.why .tone-peach{--tone:#fdece2;--tone-ink:#b2582b}
.why .tone-yellow{--tone:#fbf3d6;--tone-ink:#8a6a10}
.why-index{list-style:none;margin:40px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.why-index a{display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:999px;background:#f5f5f7;color:#1d1d1f;text-decoration:none;font-size:15px;font-weight:500;transition:background .2s}
.why-index a:hover{background:#e8eef7}
.why-index a span{width:30px;height:30px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:12px;font-weight:600;color:#0071e3}

/* ---------- 4 · Pastel panels ---------- */
.why-v4 .why-slide{border-radius:36px;padding:64px;margin-bottom:20px}
.why-v4 .why-intro{background:#f5f5f7}
.why-v4 .why-index a{background:#fff}
.why-v4 article.why-slide{background:var(--tone);display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);gap:50px;align-items:center;min-height:min(86vh,740px)}
.why4-big{display:block;font-size:clamp(5rem,11vw,9.5rem);font-weight:600;letter-spacing:-.06em;line-height:.85;color:var(--tone-ink);margin-bottom:28px}
.more-sections .why-v4 .why-body{color:#4f5662}
.why-v4 .why-stage{background:#ffffffb8;min-height:400px}

@media(prefers-reduced-motion:reduce){.wv *{animation:none!important}.wv .wv-step{opacity:1;transform:none}.wvm-meter i{width:var(--w)}.why2-frame,.why5-track{transition:none}}

/* ---------- Tablet ---------- */
@media(max-width:1080px){
  .why-section{padding:0 10px}
  .wv-computer{grid-template-columns:minmax(0,.7fr) 44px minmax(0,1.6fr)}
  .why-v4 article.why-slide{gap:36px}
  .why-v4 .why-slide{padding:44px}
}

/* ---------- Phone ---------- */
@media(max-width:800px){
  .why-section{margin-top:80px}
  .wv-computer{grid-template-columns:minmax(0,1fr);gap:14px}
  .wvc-laptop{flex-direction:row;gap:14px;justify-content:center}
  .wvc-laptop em{margin:0}
  .wvc-lid{width:90px}
  .wvc-base{display:none}
  .wvc-wire{display:none}
  .wvc-clock{font-size:38px}
  .wv-setup,.wv-memory{grid-template-columns:minmax(0,1fr)}
  .wvs-old{display:none}
  .wvt-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .wvt-link{display:none}
  .wv-learn{grid-template-columns:minmax(0,1fr);gap:10px}
  .wvl-arrow{transform:rotate(90deg)}
  .why-stage{padding:20px;border-radius:24px}
  .why-v4 .why-stage{min-height:0}
  .why-v4 .why-slide{padding:32px 20px;border-radius:28px}
  .why-v4 article.why-slide{grid-template-columns:minmax(0,1fr);gap:26px;min-height:0}
}
.wvm-lock{display:flex;align-items:center;gap:6px}.wvm-lock svg{width:13px;height:13px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6}