/* AIPorter product page: hero cards that dock into a browser window on scroll, and a pinned
   "how it works" demo where a cursor acts out Optimize, Transfer and Export. Uses steep.css tokens. */

/* Browser window mock */
.win{position:relative;background:var(--paper);border-radius:20px;box-shadow:var(--float);overflow:hidden;text-align:left}
.win-bar{display:flex;align-items:center;gap:7px;height:44px;padding:0 14px;border-bottom:1px solid var(--hair);background:var(--fog)}
.win-bar>i{width:10px;height:10px;border-radius:50%;background:var(--hair);flex:none}
.addr{margin:0 auto;min-width:40%;text-align:center;background:var(--paper);border:1px solid var(--hair);border-radius:9999px;padding:4px 16px;font-size:12.5px;color:var(--slate);transition:color .3s}
.ext-ic{flex:none;width:30px;height:30px;border-radius:8px;border:0;background:transparent;display:grid;place-items:center;padding:0;transition:background .2s}
.ext-ic.on{background:var(--mist)}
.ext-ic svg{width:20px;height:20px}
.win-body{position:relative;height:440px;overflow:hidden}

.msgs{position:absolute;inset:0 0 120px;padding:24px 28px;display:flex;flex-direction:column;gap:16px;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.msg-u{align-self:flex-end;max-width:72%;background:var(--mist);border-radius:18px;padding:10px 16px;font-size:14.5px}
.msg-a{max-width:86%;font-size:14.5px;color:var(--ink);line-height:1.55}
.msg-a .ln{display:block;height:9px;border-radius:9999px;background:var(--mist);margin-top:9px}
.newchat{position:absolute;inset:0 0 190px;display:grid;place-content:center;text-align:center;opacity:0;transition:opacity .5s var(--ease)}
.newchat p{margin:0;font-family:var(--serif);font-size:30px;letter-spacing:-.015em}
.newchat small{display:block;color:var(--ash);font-size:13px;margin-top:6px}

.box{position:absolute;left:20px;right:20px;bottom:20px;min-height:76px;max-height:200px;border:1px solid var(--hair);border-radius:16px;background:var(--paper);padding:14px 16px 40px;font-size:14.5px;line-height:1.5;overflow:hidden;transition:max-height .5s var(--ease)}
.box .ph{color:var(--smoke)}
.box .txt{white-space:pre-wrap}
.box .txt.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.5;color:var(--ink)}
.box .send{position:absolute;right:12px;bottom:10px;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center}
.box .send svg{width:14px;height:14px;transform:rotate(-90deg)}
.box.glow{border-color:var(--ink)}

/* The real extension button: white logo-only pill floating above the message box */
.ap-pill{position:absolute;right:32px;bottom:108px;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 10px;border-radius:9999px;background:var(--paper);
  box-shadow:0 0 0 1px rgba(4,23,43,.08),0 6px 14px -4px rgba(0,0,0,.12);font-size:13px;font-weight:500;transition:transform .15s var(--ease)}
.ap-pill svg{width:22px;height:22px}
.ap-pill.press{transform:scale(.92)}
.ap-pill .dots{display:none;gap:3px}
.ap-pill.busy .lbl{display:none}
.ap-pill.busy .dots{display:inline-flex}
.dots i{width:5px;height:5px;border-radius:50%;background:var(--ink);animation:dot 1s infinite var(--ease)}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,100%{opacity:.25}50%{opacity:1}}
.kbd{position:absolute;right:32px;bottom:152px;display:flex;gap:4px;opacity:0;transform:translateY(6px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.kbd span{border:1px solid var(--hair);background:var(--paper);border-radius:8px;padding:3px 8px;font-size:12px;font-weight:600;box-shadow:0 2px 0 var(--hair)}
.kbd.show{opacity:1;transform:none}

/* Extension popup */
.popup{position:absolute;top:8px;right:12px;width:250px;padding:14px;border-radius:16px;background:var(--paper);box-shadow:var(--float);opacity:0;transform:translateY(-8px) scale(.98);transform-origin:top right;
  transition:opacity .3s var(--ease),transform .3s var(--ease);pointer-events:none}
.popup.show{opacity:1;transform:none}
.popup .tabs{display:flex;gap:4px;font-size:12px;font-weight:500;color:var(--ash);margin-bottom:12px}
.popup .tabs span{padding:4px 10px;border-radius:9999px}
.popup .tabs .on{background:var(--ink);color:#fff}
.popup h5{margin:10px 0 6px;font-size:11.5px;font-weight:500;color:var(--ash)}
.popup .opts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.popup .opt{display:flex;align-items:center;justify-content:center;gap:6px;height:34px;border-radius:10px;background:var(--mist);font-size:12.5px;font-weight:500;transition:background .2s,color .2s}
.popup .opt svg{width:14px;height:14px}
.popup .opt.hit{background:var(--ink);color:#fff}

/* Exported file card */
.file{position:absolute;right:24px;bottom:112px;width:270px;padding:14px 16px;border-radius:16px;background:var(--paper);box-shadow:var(--float);opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.file.show{opacity:1;transform:none}
.file-h{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600}
.file-h svg{width:20px;height:20px}
.file-h small{margin-left:auto;color:var(--ash);font-weight:500;font-size:12px}
.file pre{margin:10px 0 0;padding:10px 12px;border-radius:10px;background:var(--fog);font-size:11.5px;line-height:1.5;color:var(--slate);white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.file pre b{color:var(--ink);font-weight:600}

.toast{position:absolute;left:50%;top:16px;transform:translate(-50%,-8px);opacity:0;background:var(--ink);color:#fff;border-radius:9999px;padding:7px 14px;font-size:12.5px;font-weight:500;white-space:nowrap;
  display:flex;align-items:center;gap:6px;transition:opacity .3s var(--ease),transform .3s var(--ease);z-index:5}
.toast svg{width:14px;height:14px}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* Cursor with a name tag, like Steep's avatar pointers */
.cursor{position:absolute;left:0;top:0;z-index:9;pointer-events:none;transform:translate(60%,80%);transition:transform .9s cubic-bezier(.45,.05,.25,1)}
.cursor svg{width:20px;height:20px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.15))}
.cursor b{position:absolute;left:16px;top:16px;background:var(--ink);color:#fff;border-radius:9999px;padding:3px 9px;font-size:11.5px;font-weight:600;white-space:nowrap}
.cursor.click svg{animation:click .3s var(--ease)}
@keyframes click{50%{transform:scale(.8)}}

/* Hero: cards around the headline dock into the window as you scroll */
.p-hero{padding:56px 0 120px;overflow:hidden}
.p-hero .hero-copy{padding:48px 0 0}
.assemble{position:relative;max-width:980px;margin:72px auto 0}
.assemble .win{transform-origin:50% 0;will-change:transform}
.frag{position:absolute;z-index:3;padding:14px 16px;will-change:transform}
.frag .row b{font-size:13.5px}
.fr-1{top:64px;right:-36px;width:230px}
.fr-2{bottom:46px;left:-44px;width:250px}
.fr-3{top:120px;left:-56px;width:210px}
.fr-4{bottom:150px;right:-48px;width:220px}
.fr-1 .opt{display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;border-radius:10px;background:var(--mist);font-size:13px;font-weight:500;margin-top:6px}
.fr-1 .opt.on{background:var(--ink);color:#fff}
.fr-1 .opt svg{width:14px;height:14px}
.fr-2 pre{margin:8px 0 0;font-size:11.5px;color:var(--slate);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap}
.fr-2 pre b{color:var(--ink)}
.sites{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sites span{border:1px solid var(--hair);border-radius:9999px;padding:3px 10px;font-size:12px;font-weight:500}

/* Pinned story: steps on the left, live demo on the right */
.story{position:relative;height:420vh;background:var(--fog)}
.pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center}
.pin .wrap{width:100%;display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}
.story-head{margin-bottom:20px}
.story-head .h2{font-size:clamp(32px,3.6vw,48px)}
.steps-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.steps-list button{all:unset;cursor:pointer;display:block;width:100%;box-sizing:border-box;padding:14px 0 14px 24px;position:relative;opacity:.38;transition:opacity .4s var(--ease)}
.steps-list button::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;background:var(--hair);border-radius:2px}
.steps-list .bar{position:absolute;left:0;top:14px;width:2px;height:0;background:var(--ink);border-radius:2px}
.steps-list .on button{opacity:1}
.steps-list .n{font-size:13px;font-weight:600;color:var(--ash)}
.steps-list h3{font-family:var(--serif);font-weight:400;font-size:30px;letter-spacing:-.015em;margin:4px 0 6px}
.steps-list p{margin:0;color:var(--slate);font-size:16px;max-width:30em}
.steps-list button:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:8px}
.step-detail{display:none}
.demo-wrap{position:relative}
/* The cursor may poke past the window edge, so this window rounds its parts instead of clipping */
#win{overflow:visible}
#win .win-bar{border-radius:20px 20px 0 0}
#win .win-body{border-radius:0 0 20px 20px}
.demo-cap{margin:16px 4px 0;color:var(--ash);font-size:14px;min-height:21px;transition:opacity .3s}

/* Feature cards and plans */
.feat .card{min-height:0}
.feat .card .ic-wrap{margin-bottom:8px}
.feat ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.feat li{display:flex;gap:8px;font-size:15px;color:var(--slate)}
.feat li svg{flex:none;width:16px;height:16px;margin-top:4px;color:var(--ink)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.plan{background:var(--paper);border-radius:24px;padding:32px;display:flex;flex-direction:column;gap:6px}
.plan h3{margin:0;font-size:18px;font-weight:500}
.plan .price{font-family:var(--serif);font-size:56px;line-height:1.1;letter-spacing:-.02em;margin:12px 0 0}
.plan .price small{font-family:var(--sans);font-size:16px;color:var(--slate);letter-spacing:0}
.plan .alt{color:var(--slate);font-size:15px;margin:0 0 16px}
.plan ul{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:10px;font-size:15px}
.plan li{display:flex;gap:10px}
.plan li svg{flex:none;width:16px;height:16px;margin-top:4px}
.plan .pill{margin-top:auto;justify-content:center}
.plan.peach{background:var(--peach);color:var(--sienna)}
.plan.peach .price small,.plan.peach .alt{color:var(--sienna);opacity:.8}
.plan.peach .pill.fill{background:var(--sienna);border-color:var(--sienna)}
.fine{color:var(--slate);font-size:14px;margin:28px auto 0;max-width:46em}
.fine a,.lede a,.faq a{text-decoration:underline;text-underline-offset:3px}
.foot-legal{max-width:520px;text-align:right}

@media (max-width:980px){
  .fr-1{right:-12px}.fr-2{left:-12px}.fr-3{left:-12px}.fr-4{right:-12px}
  .pin .wrap{grid-template-columns:1fr;gap:20px}
  .story-head{margin-bottom:8px}
  .story-head .h2{font-size:32px}
  .story-head .lede{display:none}
  .steps-list{grid-template-columns:repeat(3,1fr);gap:8px}
  .steps-list button{padding:12px 0 0;text-align:left}
  .steps-list button::before{top:0;bottom:auto;left:0;right:0;width:auto;height:2px}
  .steps-list .bar{top:0;height:2px!important;width:0}
  .steps-list h3{font-size:20px;margin:2px 0 0}
  .steps-list p{display:none}
  .step-detail{display:block;margin:0;color:var(--slate);font-size:15px;min-height:46px}
  .plans{grid-template-columns:1fr}
}
@media (max-width:640px){
  .frag{display:none}
  .fr-1,.fr-2{display:block;position:relative;inset:auto;width:auto;margin-top:12px;transform:none!important}
  .win-body{height:380px}
  .msgs{padding:18px}
  .popup{width:220px}
  .file{width:230px;right:14px}
  .addr{min-width:0;padding:4px 10px}
  .foot-legal{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .story{height:auto}
  .pin{position:relative;height:auto;padding:96px 0}
  .cursor{display:none}
}