/* Ask Kai and pricing, carried over from the v2 page (they worked) with the page
   tokens of v3. Kai's art sizing notes from v2 still hold: the source is 460px wide,
   its alpha ends at x=303, so the negative margin pulls the empty gesture column
   back out of the layout. */

.kai{display:grid;grid-template-columns:224px minmax(0,1fr);grid-template-rows:1fr auto;gap:26px;
     align-items:end;max-width:980px;margin:0 auto;scroll-margin-top:90px}
.kai-art{grid-column:1;grid-row:1/3;position:relative;align-self:end;pointer-events:none}
.kai-art img{width:340px;height:auto;max-width:none;margin-right:-116px;display:block;
  filter:saturate(.95) drop-shadow(0 0 1px rgba(183,163,255,.45)) drop-shadow(0 14px 26px rgba(0,0,0,.55));
  -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 96%);mask-image:linear-gradient(to bottom,#000 62%,transparent 96%)}
.kai-art::before{content:"";position:absolute;left:-8%;right:26%;top:2%;height:66%;z-index:-1;
  background:radial-gradient(50% 50% at 46% 42%,rgba(139,108,255,.13),transparent 72%)}
.kai-art::after{content:"";position:absolute;left:0;right:32%;bottom:14px;height:64px;z-index:-1;filter:blur(20px);
  background:radial-gradient(50% 100% at 50% 50%,rgba(139,108,255,.3),transparent 70%)}
.kai-copy{grid-column:2;grid-row:1}
.kai-copy h2{margin:0 0 12px}
.kai-copy p{color:var(--dim);font-size:16.5px;max-width:50ch}
.kai-card{grid-column:2;grid-row:2;margin:0;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
          background:var(--sheet);box-shadow:0 26px 70px rgba(0,0,0,.45)}
.kai-chat{padding:16px 18px 18px;display:flex;flex-direction:column;gap:12px}
.kai-row{display:flex;gap:11px;align-items:flex-start}
.kai-av{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  background:radial-gradient(60% 60% at 50% 35%,rgba(139,108,255,.28),rgba(139,108,255,.05));
  box-shadow:0 0 0 1px rgba(139,108,255,.35),0 0 14px rgba(139,108,255,.22)}
.kai-av img{width:100%;height:100%;object-fit:cover}
.kai-bub{background:var(--sheet-2);border:1px solid var(--line);border-radius:4px 12px 12px 12px;padding:11px 13px;
         font-size:14px;line-height:1.55;color:var(--dim)}
.kai-bub b{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--vio-2);margin-bottom:4px}
.kai-chips{display:flex;flex-wrap:wrap;gap:7px;padding-left:45px}
.kai-chips span{font-family:var(--mono);font-size:11.5px;color:var(--dim);background:rgba(139,108,255,.07);
                border:1px solid var(--line);border-radius:20px;padding:5px 12px}
.kai-ask{display:flex;align-items:center;background:var(--ground-2);border:1px solid var(--line-soft);
         border-radius:12px;padding:11px 14px;font-size:14px;color:var(--faint)}
.kai-caret{width:2px;height:15px;background:var(--vio-2);margin-left:1px;animation:blink 1.6s infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media (max-width:760px){
  .kai{grid-template-columns:1fr;grid-template-rows:auto;gap:18px;max-width:560px}
  .kai-art{grid-column:1;grid-row:auto;margin-bottom:-16px}
  .kai-art img{width:206px;margin-right:0}
  .kai-copy,.kai-card{grid-column:1;grid-row:auto}
  .kai-chips{padding-left:0}
}

/* pricing */
.toggle{display:flex;justify-content:center;margin:0 0 34px}
.toggle button{font-size:14px;font-weight:600;padding:9px 20px;cursor:pointer;background:var(--sheet);
               color:var(--dim);border:1px solid var(--line)}
.toggle button:first-child{border-radius:999px 0 0 999px}
.toggle button:last-child{border-radius:0 999px 999px 0}
.toggle button.on{background:rgba(139,108,255,.14);color:var(--ink);border-color:var(--vio)}
.toggle .save{color:var(--vio-2);font-weight:700}
.price-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:860px;margin:0 auto}
@media (max-width:760px){.price-grid{grid-template-columns:1fr}}
.price{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-card);padding:30px;position:relative}
.price.pop{border-color:var(--vio);box-shadow:0 20px 60px rgba(139,108,255,.13)}
.price .tag{position:absolute;top:-11px;left:26px;background:var(--vio);color:#0b0a14;font-size:11px;font-weight:700;
            letter-spacing:.06em;border-radius:999px;padding:3px 11px}
.price .name{font-size:17px;font-weight:700}
.price .amt{margin:14px 0 4px;font-size:42px;font-weight:760;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.price .amt .anchor{color:var(--faint);text-decoration:line-through;font-size:22px;font-weight:600;margin-right:8px}
.price .amt .per{font-size:15px;font-weight:500;color:var(--dim)}
.price .billed{color:var(--faint);font-size:13.5px;min-height:20px}
.price .seats{color:var(--dim);font-size:14.5px;margin-top:4px}
.price ul{list-style:none;margin:22px 0;padding:0;display:flex;flex-direction:column;gap:10px}
.price li{font-size:15px;color:var(--dim);padding-left:20px;position:relative}
.price li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;background:var(--vio);transform:rotate(45deg)}
.price .btn{width:100%}
.price .reassure{margin-top:12px;text-align:center;font-size:13px;color:var(--faint)}
.road{display:flex;gap:10px;justify-content:center;margin:26px 0 0;flex-wrap:wrap}
.road span{font-size:13px;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:6px 14px}
.road span b{color:var(--ink);font-weight:650}