from the pricing page) must clear the 72px sticky nav, or the target section lands hidden under it. Overview goes to index.html top (no fragment) so the nav stays visible. Global desktop offset; the responsive block below overrides it with min(112px,20vw) for the taller mobile nav. */ #hero,#integrations,#why,#setup,#faq,#waitlist{scroll-margin-top:88px} html{scroll-behavior:smooth} .nav-logo{justify-self:start;display:flex;align-items:center;gap:9px} .logo-wordmark{display:block;flex-shrink:0;height:38px;width:auto} .footer-logo .logo-wordmark{height:38px;filter:brightness(0) invert(1)} .nav-links{justify-self:center;display:flex;align-items:center;gap:32px} .nav-actions{ justify-self:end; display:flex; align-items:center; gap:12px; flex-shrink:0; } .nav-link{font-weight:500;font-size:14px;line-height:18px;color:#6B7280;transition:color 0.2s ease} .nav-link:hover{color:#079d55} .nav-link.active{color:#079d55;font-weight:600} /* 报价分析：默认入口，品牌绿胶囊，置于能力矩阵前方，区别于普通导航项 */ .nav-link--primary{color:#079d55;font-weight:700;background:rgba(7,157,85,.10);border:1px solid rgba(7,157,85,.30);padding:6px 15px;border-radius:100px;transition:background .2s ease,color .2s ease,transform .15s ease} .nav-link--primary:hover{background:#079d55;color:#fff;transform:scale(1.03)} .nav-link--primary.is-active{background:#079d55;color:#fff} .nav-cta{border-radius:100px;padding:9px 22px;background:#1F7380;font-weight:600;font-size:14px;line-height:18px;color:#fff;display:inline-block;transition:background 0.2s ease,transform 0.15s ease} .nav-cta:hover{background:#206d48;transform:scale(1.03)} .nav-lang-wrap{display:flex;align-items:center;flex-shrink:0} /* Typographic size matches .nav-cta (14px / 18px / 600); vertical padding accounts for 1px border so total height aligns with the pill button */ .nav-lang-select{ font-family:inherit;font-size:14px;font-weight:600;line-height:18px;color:#6B7280; border:1px solid #E6E6E6;border-radius:100px; appearance:none;-webkit-appearance:none; padding:8px 30px 8px 16px; background-color:#fff; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M2 4l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; cursor:pointer; max-width:160px; } .nav-lang-select:hover{ border-color:#079d55;color:#079d55; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23207880' d='M2 4l4 4 4-4'/%3E%3C/svg%3E"); } /* ─── HERO ───────────────────────────────────────────────── */ .hero{width:100%;background:#FAFAFA;border-bottom:1px solid #E6E6E6} .hero-inner{ max-width:1440px;margin:0 auto; display:flex;flex-direction:column;align-items:center; padding:120px 80px 100px; } .hero-shader{width:235px;height:250px;flex-shrink:0;position:relative;isolation:isolate;margin-top:-24px} #hero-liquid-metal canvas{z-index:0!important;position:absolute;inset:0;width:100%!important;height:100%!important} .hero-h1{font-weight:600;font-size:76px;line-height:105%;letter-spacing:-0.03em;color:#26202F;text-align:center;max-width:820px;margin:0 0 24px;white-space:pre-wrap;min-height:2lh} .hero-sub{font-size:18px;line-height:165%;letter-spacing:-0.01em;color:#6B7280;text-align:center;max-width:480px;margin:0 0 20px;min-height:3lh} .hero-actions{display:flex;align-items:flex-start;gap:8px;justify-content:center;margin-top:20px} .hero-email-pill{ display:flex;align-items:center;width:440px; border-radius:100px;padding:5px 5px 5px 20px; background:#fff;border:1px solid rgba(0,0,0,0.1);box-shadow:0 2px 12px rgba(0,0,0,0.06);flex-shrink:0; transition:border-color 0.2s ease,box-shadow 0.2s ease; } .hero-email-pill:focus-within{border-color:#079d55;border-width:2px;box-shadow:0 2px 18px rgba(7,157,85,0.15)} .hero-email-pill input{flex:1;border:none;outline:none;background:none;font-family:'Geist',system-ui,sans-serif;font-size:15px;line-height:18px;letter-spacing:-0.01em;color:#26202F} .hero-email-pill input::placeholder{color:#9CA3AF} .hero-join{border-radius:100px;padding:11px 24px;background:#079d55;font-weight:500;font-size:14px;line-height:18px;letter-spacing:-0.01em;color:#fff;white-space:nowrap;transition:background 0.2s ease} .hero-join:hover{background:#206d48} /* Standalone variant — used after the email-pill input was removed in favour of a direct console hand-off. Bigger padding so the bare CTA doesn't look anaemic where the pill used to be. Centering needs both: - `display:flex` (block-level) + `width:fit-content` + `margin:0 auto` so the button collapses to its content width and the auto margins can do horizontal centering inside a BLOCK parent (cta-content). `inline-flex` here would silently break centering — auto margins have no effect on inline-level elements. - `align-self:center` for flex parents (hero-actions). */ a.hero-join--standalone{display:flex;align-items:center;justify-content:center;padding:14px 32px;font-size:15px;text-decoration:none;width:fit-content;margin:0 auto;align-self:center} .hero-watch-wrap{position:relative;display:inline-flex;vertical-align:top} .hero-watch{ display:flex;align-items:center;height:52px;border-radius:100px;gap:8px; background:#fff;border:1px solid rgba(0,0,0,0.1);box-shadow:0 2px 12px rgba(0,0,0,0.06); padding:5px 20px;font-weight:500;font-size:14px;line-height:18px;color:#26202F; cursor:pointer; } .hero-watch-badge{ position:absolute;top:-7px;right:-4px;z-index:2; background:#26202F;color:#fff;font-size:10px;font-weight:600;line-height:1; letter-spacing:0.04em;text-transform:uppercase;white-space:nowrap; padding:4px 7px;border-radius:5px;box-shadow:0 2px 10px rgba(38,32,47,0.2); pointer-events:none;opacity:0;transform:scale(0.88); transition:opacity 0.18s ease,transform 0.22s cubic-bezier(0.34,1.56,0.64,1); } .hero-watch-badge.show{opacity:1;transform:scale(1)} @media (prefers-reduced-motion: reduce){ .hero-watch-badge{transition:none} .hero-watch-badge.show{transform:none} } .hero-proof{display:flex;align-items:center;margin-top:28px;gap:12px} .hero-avatars{display:flex;align-items:center;position:relative;min-height:28px} .hero-av{width:28px;height:28px;border-radius:50%;border:2px solid #FAF9F6;background-size:cover;background-position:center;flex-shrink:0;position:relative;transform-origin:center;display:block;object-fit:cover;background-color:transparent} .hero-av+.hero-av{margin-left:-8px} /* Left = newest; higher z-index so the stack reads clearly */ .hero-avatars .hero-av:nth-child(1){z-index:5} .hero-avatars .hero-av:nth-child(2){z-index:4} .hero-avatars .hero-av:nth-child(3){z-index:3} .hero-avatars .hero-av:nth-child(4){z-index:2} @keyframes hero-av-join{0%{opacity:0;transform:scale(0.35)}65%{transform:scale(1.12)}100%{opacity:1;transform:scale(1)}} .hero-av.hero-av--join{animation:hero-av-join 0.58s cubic-bezier(0.34,1.56,0.64,1) forwards} @media (prefers-reduced-motion:reduce){ .hero-av.hero-av--join{animation:none;opacity:1;transform:none} } .hero-proof-txt{font-size:13px;line-height:16px;letter-spacing:-0.01em;color:#9CA3AF;text-align:center} /* ─── FRICTION ───────────────────────────────────────────── */ .friction{width:100%;background:#fff;border-bottom:1px solid #E6E6E6;overflow:visible} .friction-wrap{display:flex;align-items:center;gap:80px;padding:120px 126px 20px;max-width:1440px;margin:0 auto;box-sizing:border-box} .friction-left{flex:5;display:flex;flex-direction:column;min-width:0} .friction-h2{font-weight:600;font-size:40px;line-height:110%;letter-spacing:-0.03em;color:#26202F;margin-bottom:20px;max-width:552px} .friction-body{font-size:16px;letter-spacing:-0.01em;line-height:170%;color:#6B7280;max-width:544px} .friction-bold{font-size:16px;letter-spacing:-0.01em;line-height:170%;color:#079d55;font-weight:600} .friction-logos-block{display:flex;flex-direction:column;gap:8px;margin-top:28px} .friction-logos-label{font-weight:500;font-size:13px;line-height:22px;color:#079d55;margin:0;display:inline-block;background:#ebf5f0;padding:0 6px;border-radius:4px;box-sizing:border-box;align-self:flex-start} .friction-logos{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .friction-logo-chip{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border-radius:9px;box-sizing:border-box} .friction-logo-chip.w37{width:37px} .friction-logo-chip img,.friction-logo-chip svg{display:block;max-width:22px;max-height:22px;width:auto;height:auto;object-fit:contain;flex-shrink:0} .friction-logo-chip .friction-logo-photo{width:27px;height:27px;border-radius:4px;background-size:cover;background-position:center} .friction-right{flex:7;min-width:0;display:flex;align-items:center;justify-content:flex-end;position:relative;overflow:visible} .friction-stack{position:relative;left:128px;width:100%;max-width:649px;aspect-ratio:649/496;min-height:280px;max-height:min(52vw,496px);transform:scale(1.3);transform-origin:right center} .friction-layer-back{position:absolute;inset:0;width:100%;height:100%;z-index:0;border:none;pointer-events:none;display:block} .friction-layer-mid,.friction-layer-front{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;pointer-events:none} .friction-layer-mid{z-index:1} .friction-layer-front{z-index:2} /* ─── HOW IT WORKS ───────────────────────────────────────── */ .hiw{width:100%;background:#fff;border-bottom:1px solid #E7E7E7;overflow:hidden} .hiw-wrap{display:flex;gap:45px;justify-content:center;align-items:flex-start;padding:50px 126px 130px;max-width:1440px;margin:0 auto} .hiw-panel{flex:1;display:flex;flex-direction:column;gap:20px} .hiw-panel-hd{display:flex;flex-direction:column;gap:10px} .hiw-panel-title{font-weight:600;font-size:20px;line-height:24px;font-family:'Geist',sans-serif} .hiw-panel-title.on{color:#079d55} .hiw-panel-title.off{color:#A1A4AD} .hiw-panel-desc{font-size:13px;line-height:165%;font-family:'Geist',sans-serif} .hiw-panel-desc.on{color:#6B7280} .hiw-panel-desc.off{color:#B5B5B7} .hiw-divider{width:1px;align-self:stretch;background:rgba(0,0,0,0.07);flex-shrink:0} /* chat widget */ .hiw-chat{border-radius:12px;border:1px solid rgba(0,0,0,0.08);overflow:hidden;display:flex;flex-direction:column;height:256px;background:#F8FAFB;width:100%;max-width:458px;align-self:center} .hiw-chat-bar{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid rgba(0,0,0,0.07);flex-shrink:0} .hiw-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} .hiw-dot.green{background:#4ADE80} .hiw-dot.red{background:#FF281E} .hiw-chat-mode{font-size:12px;color:#374151;font-family:'Geist',sans-serif} .hiw-msgs{padding:16px 20px;display:flex;flex-direction:column;gap:14px;flex:1;overflow:hidden;justify-content:flex-end} /* input area */ .hiw-input-area{border:1px solid rgba(0,0,0,0.08);border-radius:12px;padding:10px 10px 10px 16px;display:flex;align-items:center;gap:8px;background:#F8FAFB;width:100%;max-width:458px;align-self:center} .hiw-input{flex:1;border:none;outline:none;background:none;font-family:'Geist',sans-serif;font-size:13px;color:#374151;cursor:default;min-width:0} .hiw-input::placeholder{color:#9CA3AF} .hiw-send-wrap{position:relative;flex-shrink:0} .hiw-send-btn{width:32px;height:32px;border-radius:50%;background:#207580;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform 0.15s ease,background 0.15s ease;flex-shrink:0} .hiw-send-btn:hover{background:#206d48} .hiw-send-btn:active{transform:scale(0.9)} .hiw-send-btn:disabled{background:#C4C9D4;cursor:default;animation:none!important;box-shadow:none!important} @keyframes send-ring{0%{box-shadow:0 0 0 0 rgba(7,157,85,0.55)}70%{box-shadow:0 0 0 9px rgba(7,157,85,0)}100%{box-shadow:0 0 0 0 rgba(7,157,85,0)}} .hiw-send-btn.pulse{animation:send-ring 1.5s ease infinite} .hiw-send-btn.grey-btn{background:#4B5563} .hiw-send-btn.grey-btn:hover{background:#374151} @keyframes send-ring-grey{0%{box-shadow:0 0 0 0 rgba(75,85,99,0.55)}70%{box-shadow:0 0 0 9px rgba(75,85,99,0)}100%{box-shadow:0 0 0 0 rgba(75,85,99,0)}} .hiw-send-btn.grey-btn.pulse{animation:send-ring-grey 1.5s ease infinite} /* send tooltip */ .hiw-send-tip{position:absolute;bottom:calc(100% + 9px);right:0;background:#1C1917;color:#fff;font-size:11px;font-family:'Geist',sans-serif;font-weight:500;padding:5px 10px;border-radius:7px;white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity 0.2s ease,transform 0.2s ease} .hiw-send-tip::after{content:'';position:absolute;top:100%;right:10px;border:5px solid transparent;border-top-color:#1C1917} .hiw-send-tip.show{opacity:1;transform:translateY(0)} /* green success bubble */ .bbl-success{border-radius:2px 12px 12px 12px;padding:12px 16px;background:#F0FDF4;border:1px solid rgba(34,197,94,0.22);font-size:13px;line-height:160%;color:#166534;font-family:'Geist',sans-serif;max-width:85%;white-space:pre-wrap;font-weight:500} /* message rows — scale-up spring entry */ .hiw-msg{opacity:0;transform:scale(0.86) translateY(5px);transform-origin:bottom left;transition:opacity 0.26s ease,transform 0.3s cubic-bezier(0.34,1.56,0.64,1)} .hiw-msg.hiw-msg-user{transform-origin:bottom right} .hiw-msg.show{opacity:1;transform:scale(1) translateY(0)} .hiw-msg-user{display:flex;justify-content:flex-end} .hiw-msg-agent{display:flex;align-items:flex-start;gap:10px} /* bubbles */ .bbl-user{max-width:72%;border-radius:12px 12px 2px 12px;padding:10px 16px;background:#079d55;font-size:13px;line-height:150%;color:#fff;font-family:'Geist',sans-serif;white-space:pre-wrap;min-width:16px;min-height:20px} .bbl-user.off{background:#6C7280} .bbl-agent{border-radius:2px 12px 12px 12px;padding:12px 16px;background:#fff;border:1px solid rgba(0,0,0,0.07);font-size:13px;line-height:160%;color:#374151;font-family:'Geist',sans-serif;max-width:85%;white-space:pre-wrap} .bbl-tool{border-radius:2px 12px 12px 12px;padding:10px 14px;background:#fff;border:1px solid rgba(0,0,0,0.07)} .bbl-tool-fn{font-size:12px;line-height:160%;font-family:'Geist Mono','Geist',monospace;color:#3d6b4a;display:block;margin-bottom:4px} .bbl-tool-fn.red{color:#E3602A} .bbl-tool-param{font-size:12px;line-height:160%;font-family:'Geist Mono','Geist',monospace;color:#374151;display:block} .bbl-error{border-radius:2px 12px 12px 12px;padding:12px 16px;background:#FFF5F5;border:1px solid rgba(220,38,38,0.15);font-size:13px;line-height:160%;color:#DC2626;font-family:'Geist',sans-serif;max-width:85%} /* typing cursor */ .typing-cur::after{content:'|';animation:cur-blink 0.55s step-end infinite;margin-left:1px;opacity:1} @keyframes cur-blink{50%{opacity:0}} /* thinking dots */ .thinking-bbl{border-radius:2px 12px 12px 12px;padding:13px 16px;background:#fff;border:1px solid rgba(0,0,0,0.07);display:flex;gap:5px;align-items:center} .t-dot{width:6px;height:6px;border-radius:50%;background:#C4C9D4;animation:t-pulse 1.3s ease-in-out infinite;flex-shrink:0} .t-dot:nth-child(2){animation-delay:.22s} .t-dot:nth-child(3){animation-delay:.44s} @keyframes t-pulse{0%,80%,100%{opacity:.3;transform:scale(.75)}40%{opacity:1;transform:scale(1)}} /* avatars */ .av-bot{width:28px;height:28px;border-radius:50%;background:#483236;display:flex;align-items:center;justify-content:center;flex-shrink:0} /* ─── SECTION LABEL ──────────────────────────────────────── */ .sec-label{ display:flex;align-items:center;height:30px;padding:0 12px; border:1px solid #E6E6E6;border-radius:8px;width:fit-content;overflow:hidden; } .sec-label-txt{font-weight:500;font-size:12px;line-height:22.5px;color:#26202F;white-space:nowrap;text-transform:uppercase} /* ─── WHY CHOOSE ─────────────────────────────────────────── */ .why{width:100%;background:#FAFAFA;border-bottom:1px solid #E6E6E6} .why-wrap{display:flex;align-items:flex-start;gap:80px;padding:120px 126px} .why-left{width:433px;display:flex;flex-direction:column;gap:20px;flex-shrink:0;position:sticky;top:88px;align-self:flex-start;padding-top:32px} .why-title-block{display:flex;flex-direction:column;align-items:flex-start} .why-title-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;width:fit-content;max-width:100%} .why-h2{font-weight:600;font-size:42px;line-height:110%;letter-spacing:-0.03em;color:#26202F;margin-bottom:0;white-space:nowrap} .why-logo-chip{width:56px;height:56px;border-radius:50%;background:#26202F;position:relative;flex-shrink:0} .why-logo-chip svg{position:absolute;left:calc(50% - 0.5px);top:50%;transform:translate(-50%,-50%)} .why-subtitle{font-size:20px;line-height:160%;color:#6B7280;margin-bottom:8px;align-self:stretch;margin-top:16px} .why-nav{display:flex;flex-direction:column;gap:8px} .why-nav-item{ display:flex;align-items:center;border-radius:8px;padding:13px 16px;gap:12px;cursor:pointer; border:1px solid transparent;transition:background 0.2s,border-color 0.2s; } .why-nav-item.active{background:#ebf5f0;border-color:transparent} .why-nav-item:not(.active){background:#F0F2F4} .why-nav-item:not(.active):hover{background:#ebf5f0;border-color:transparent} .why-nav-txt{font-weight:500;font-size:16px;line-height:20px} .why-nav-item.active .why-nav-txt{color:#1F707A} .why-nav-item:not(.active) .why-nav-txt{color:#6B7280} .why-nav-item:not(.active):hover .why-nav-txt{color:#1F707A} .why-right{width:640px;min-height:525px;flex-shrink:0;border-radius:20px;background:#fff;padding:32px;position:relative;overflow:clip} .why-feature{display:flex;flex-direction:column} .why-feature-panel{position:absolute;inset:32px;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .42s ease,transform .42s cubic-bezier(.16,1,.3,1),visibility 0s linear .42s;pointer-events:none} .why-feature-panel.active{opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s;pointer-events:auto} .why-feat-title{font-weight:600;font-size:26px;line-height:32px;letter-spacing:-0.02em;color:#26202F;margin-bottom:8px} .why-feat-desc{font-size:14px;line-height:165%;color:#6B7280;margin-bottom:24px} /* One Unified Key visual */ .vis-key{display:flex;align-items:center;justify-content:center;border-radius:14px;height:351px;background:#FBF7EF;flex-shrink:0;padding:48px;overflow:hidden} .vis-key-inner{display:flex;flex-direction:column;align-items:center;gap:28px;width:100%} .key-display{ display:flex;align-items:center;gap:12px;height:70px;width:319px; justify-content:center;background:#fff;border:1px solid #DFDFDF; box-shadow:0 2px 12px rgba(0,0,0,0.06);border-radius:12px;flex-shrink:0;padding:0 16px; } .key-icon-wrap{width:44px;height:44px;border-radius:8px;background:#FAFAFA;border:1px solid rgba(0,0,0,0.1);position:relative;flex-shrink:0} .key-icon-wrap svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)} .key-text{font-size:20px;line-height:24px;letter-spacing:0.05em;color:#26202F} .chips-marquee-wrap{align-self:stretch;margin:0 -48px;display:flex;flex-direction:column;gap:10px;overflow:hidden} .chips-track{display:flex;gap:10px;width:max-content;animation:chips-scroll 32s linear infinite} .chips-track-r2{animation-duration:27s} @keyframes chips-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} .chip{display:flex;align-items:center;gap:12px;border-radius:12px;padding:6px 24px;height:70px;background:#fff;border:1px solid rgba(0,0,0,0.07);justify-content:center;flex-shrink:0} .chip-txt{font-size:14px;line-height:18px;color:#374151} /* Pay-As-You-Go visual */ .vis-payg{display:flex;height:342px;border-radius:14px;padding:32px 24px;gap:16px;overflow:visible;align-items:center;justify-content:center;background:#ECF6F8;flex-shrink:0} .payg-card{display:flex;flex-direction:column;align-items:center;width:182px;height:221px;background:#fff;border:1px solid rgba(46,119,155,0.18);box-shadow:0 2px 12px rgba(0,0,0,0.06);border-radius:9px;flex-shrink:0;overflow:hidden} .payg-card-hd{display:flex;flex-direction:column;justify-content:center;gap:4px;height:61px;align-self:stretch;padding:0 14px} .payg-divider{height:1px;width:159px;background:rgba(221,221,221,0.43);flex-shrink:0} .payg-card-bd{display:flex;flex-direction:column;gap:0;flex:1;justify-content:center;align-self:stretch;padding:0} .payg-row{display:flex;justify-content:space-between;padding:8px 14px;align-self:stretch} .payg-checklist{display:flex;flex-direction:column;gap:10px;padding:0 25px;width:259px;flex-shrink:0} .payg-check-row{display:flex;align-items:center;gap:8px} .check-circle{width:16px;height:16px;border-radius:50%;background:#00BE89;display:flex;align-items:center;justify-content:center;flex-shrink:0} .payg-check-txt{font-size:13px;line-height:16px;letter-spacing:-0.01em;color:#374151} /* Auto-Failover visual */ .vis-fail{height:312px;display:flex;flex-direction:column;justify-content:center;border-radius:14px;overflow:hidden;gap:6px;background:#FBF8FA;flex-shrink:0;padding:36px} .fail-router{display:flex;justify-content:center} .fail-router-pill{border-radius:100px;padding:7px 18px;background:#1A2E30} .fail-router-txt{font-weight:600;font-size:11px;line-height:14px;letter-spacing:0.06em;color:#fff} .fail-lines{display:flex;justify-content:center} .fail-providers{display:flex;gap:10px} .fail-prov{flex:1;display:flex;flex-direction:column;border-radius:10px;padding:12px 14px;gap:5px} .fail-prov.on{background:#EBFDF4;border:1.5px solid #08BE89} .fail-prov.dn{background:#fff;border:1.5px solid #FEE2DF} .fail-prov.sb{background:#fff;border:1px solid #E5E7EB} .fail-prov-row{display:flex;justify-content:space-between;align-items:center} .fail-prov-name{font-weight:600;font-size:12px;line-height:16px} .fail-prov-name.on{color:#1B2F30} .fail-prov-name.dn{color:#9CA3AF;text-decoration:line-through} .fail-prov-name.sb{color:#6B7280} .fail-badge{display:flex;border-radius:100px;padding:5px 7px} .fail-badge.on{background:#08BE89} .fail-badge.dn{background:#FEE2DF} .fail-badge.sb{background:#F3F4F6} .fail-badge-txt{font-weight:500;font-size:10px;line-height:12px} .fail-badge-txt.on{color:#fff} .fail-badge-txt.dn{color:#DC2626} .fail-badge-txt.sb{color:#6B7280} .fail-status{font-size:10px;line-height:12px} .fail-status.on{color:#3D6E79;font-weight:500} .fail-status.dn{color:#DC2626} .fail-status.sb{color:#9CA3AF} /* Built for Scale visual */ .vis-scale{height:260px;display:flex;flex-direction:column;justify-content:center;border-radius:14px;gap:16px;overflow:hidden;background:#26202F;flex-shrink:0;padding:36px} .scale-status-row{display:flex;align-items:center;gap:10px} .scale-dot{width:8px;height:8px;border-radius:50%;background:#4ADE80;flex-shrink:0} .scale-status-txt{font-size:13px;line-height:16px;color:#E2E8F0} .scale-metrics{display:flex;flex-direction:column;gap:10px} .scale-metric-row{display:flex;justify-content:space-between;align-items:center} .scale-metric-lbl{font-size:12px;line-height:16px;color:#94A3B8} .scale-metric-val{font-size:12px;line-height:16px;color:#E2E8F0} .scale-bar-bg{height:4px;border-radius:2px;background:rgba(255,255,255,0.1);flex-shrink:0} .scale-bar-fill{height:100%;border-radius:2px;background:#3d6b4a} /* ── PAY-AS-YOU-GO: stacked cards ───────────────────────── */ .payg-stack{position:relative;width:182px;height:221px;flex-shrink:0} .payg-card-slot{position:absolute;inset:0;transition:transform 0.7s cubic-bezier(0.34,1.56,0.64,1)} .payg-card-slot:nth-child(1){z-index:3} .payg-card-slot:nth-child(2){z-index:2} .payg-card-slot:nth-child(3){z-index:1} .payg-stack.anim .payg-card-slot:nth-child(2){transform:rotate(-8deg) translate(-24px,8px);transition-delay:0.05s} .payg-stack.anim .payg-card-slot:nth-child(3){transform:rotate(7deg) translate(18px,10px);transition-delay:0.1s} .payg-check-row{opacity:0;transform:translateX(10px);transition:opacity 0.4s ease,transform 0.4s ease} .payg-checklist.anim .payg-check-row:nth-child(1){opacity:1;transform:none;transition-delay:0.3s} .payg-checklist.anim .payg-check-row:nth-child(2){opacity:1;transform:none;transition-delay:0.5s} .payg-checklist.anim .payg-check-row:nth-child(3){opacity:1;transform:none;transition-delay:0.7s} /* ── AUTO FAILOVER: card entrance + dot ─────────────────── */ .fail-prov,.fail-router-pill{opacity:0;transform:scale(0.82);transition:opacity 0.45s ease,transform 0.45s cubic-bezier(0.34,1.56,0.64,1)} .fail-anim .fail-router-pill{opacity:1;transform:scale(1);transition-delay:0s} .fail-anim .fail-prov:nth-child(1){opacity:1;transform:scale(1);transition-delay:0.15s} .fail-anim .fail-prov:nth-child(2){opacity:1;transform:scale(1);transition-delay:0.27s} .fail-anim .fail-prov:nth-child(3){opacity:1;transform:scale(1);transition-delay:0.39s} /* ── PLUG & PLAY: terminal ───────────────────────────────── */ .vis-pnp{height:320px;border-radius:14px;background:#F1F2F4;flex-shrink:0;position:relative;overflow:hidden} .pnp-icons{position:absolute;left:50%;top:47px;transform:translateX(-50%);display:flex;gap:11px;align-items:flex-start} .pnp-icon{border-radius:12px;overflow:hidden;flex-shrink:0;opacity:0;transform:translateY(-20px) scale(0.8);transition:opacity 0.4s ease,transform 0.5s cubic-bezier(0.34,1.56,0.64,1);box-shadow:0 14px 28px -9px rgba(0,0,0,0.2),0 14px 9px -9px rgba(0,0,0,0.2);display:flex;align-items:center;justify-content:center} .pnp-anim .pnp-icon:nth-child(1){opacity:1;transform:none;transition-delay:0s} .pnp-anim .pnp-icon:nth-child(2){opacity:1;transform:none;transition-delay:0.12s} .pnp-anim .pnp-icon:nth-child(3){opacity:1;transform:none;transition-delay:0.24s} .pnp-terminal{position:absolute;left:50%;top:125px;transform:translateX(-50%) translateY(20px) scale(0.93);width:463px;height:277px;background:#26202F;border-radius:20px;overflow:hidden;border:1px solid rgba(0,0,0,0.08);box-shadow:0 71px 24px -60px rgba(0,0,0,0.06),0 28px 25px -11px rgba(0,0,0,0.06);opacity:0;transition:opacity 0.5s ease 0.1s,transform 0.55s cubic-bezier(0.34,1.56,0.64,1) 0.1s} .pnp-anim .pnp-terminal{opacity:1;transform:translateX(-50%)} .pnp-titlebar{position:absolute;left:0;top:0;width:100%;display:flex;align-items:center;gap:10px;padding:14px 20px;background:#2C2733;border-bottom:1px solid rgba(0,0,0,0.07)} .pnp-tbar-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} .pnp-cursor{display:inline-block;width:5px;height:16px;background:#DDDDDD;vertical-align:middle;margin-left:1px;animation:cur-blink 0.8s step-end infinite} /* ─── INTEGRATIONS ───────────────────────────────────────── */ .integrations{width:100%;background:#FAFAFA;border-bottom:1px solid #E6E6E6;overflow:hidden} .integrations-wrap{display:flex;flex-direction:column;padding:80px 126px 160px} .integ-header{display:flex;flex-direction:column;align-items:center;margin-bottom:48px;gap:14px} .integ-title{font-weight:600;font-size:40px;line-height:110%;letter-spacing:-0.03em;color:#26202F;width:526px;text-align:center;margin-bottom:12px} .integ-sub{font-size:20px;line-height:160%;text-align:center;color:#6B7280;max-width:560px} .tabs-row{display:flex;margin-bottom:32px;gap:4px;align-items:flex-start;justify-content:center;border-bottom:1px solid rgba(0,0,0,0.08)} .tab{padding:10px 20px;margin-bottom:-1px;border-bottom:2px solid transparent;cursor:pointer;font-weight:500;font-size:14px;line-height:18px;color:#6B7280;white-space:nowrap;transition:color 0.15s,border-color 0.15s} .tab.active{border-bottom-color:#3d6b4a;color:#26202F} .tab.dim{color:#A7ABB5;cursor:default;position:relative} .tab.dim .tab-tooltip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) scale(0.9);background:#26202F;color:#fff;font-size:12px;font-weight:500;white-space:nowrap;padding:5px 10px;border-radius:6px;pointer-events:none;opacity:0;transition:opacity 0.15s,transform 0.15s} .tab.dim .tab-tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#26202F} .tab.dim:hover .tab-tooltip{opacity:1;transform:translateX(-50%) scale(1)} .integ-cards{display:flex;gap:10px;align-items:stretch} .integ-card{display:flex;flex-direction:column;justify-content:space-between;flex:1;height:355px;border-radius:14px;padding:24px;background:#fff;border:1px solid rgba(0,0,0,0.07);gap:24px} .integ-card-top{display:flex;flex-direction:column;gap:24px;align-self:stretch} .integ-card-icon{width:60px;height:60px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden} .integ-card-body{display:flex;flex-direction:column;gap:8px} .integ-card-name{font-weight:500;font-size:20px;line-height:24px;color:#26202F} .integ-card-desc{font-size:14px;line-height:18px;color:#6B7280} .integ-demo-btn{display:flex;align-items:center;justify-content:center;gap:4px;height:40px;border-radius:8px;background:white;outline:1px solid #F1F2F4;border:none;cursor:pointer;font-weight:500;font-size:14px;line-height:18px;color:#26202F;font-family:inherit;transition:background 0.15s} .integ-demo-btn:hover{background:#F7F8FA} #tab-social .integ-card, #tab-crypto .integ-card{flex:none;width:290px;flex-shrink:0} .integ-card.reveal-visible.reveal-scale{animation:revealScaleSpring 980ms cubic-bezier(0.16, 1, 0.3, 1) both} #social-outer, #crypto-outer{position:relative;margin:0 -126px} .social-mask{position:absolute;top:0;height:355px;width:160px;pointer-events:none;z-index:2} .social-mask-l{left:0;background:linear-gradient(to right,#FAFAFA 45%,transparent)} .social-mask-r{right:0;background:linear-gradient(to left,#FAFAFA 45%,transparent)} .social-nav-btn{position:absolute;top:177px;transform:translateY(-50%);z-index:3;width:40px;height:40px;border-radius:50%;border:1px solid #E6E6E6;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,0.09);transition:opacity 0.2s,box-shadow 0.15s;color:#26202F} .social-nav-btn:hover{box-shadow:0 4px 14px rgba(0,0,0,0.14)} .social-nav-btn-l{left:20px} .social-nav-btn-r{right:20px} .social-sb-wrap{padding:10px 126px 0} .social-sb-track{height:3px;border-radius:999px;background:#E6E6E6;position:relative} .social-sb-thumb{height:3px;border-radius:999px;background:#B0B0B0;position:absolute;top:0;left:0;cursor:pointer;transition:background 0.15s} .social-sb-thumb:hover{background:#888} .demo-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;pointer-events:none;transition:opacity 0.2s} .video-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.82);display:flex;align-items:center;justify-content:center;z-index:1100;opacity:0;pointer-events:none;transition:opacity 0.2s;padding:24px} .video-overlay.open{opacity:1;pointer-events:all} .video-modal{position:relative;width:min(1080px,100%);max-height:90vh;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000;transform:scale(0.96);transition:transform 0.2s;box-shadow:0 24px 64px rgba(0,0,0,0.5)} .video-overlay.open .video-modal{transform:scale(1)} .video-player{width:100%;height:100%;display:block;background:#000} .video-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:none;background:rgba(0,0,0,0.55);color:#fff;font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .video-close:hover{background:rgba(0,0,0,0.78)} @media (max-width:640px){.video-modal{border-radius:12px}.video-overlay{padding:12px}} .demo-overlay.open{opacity:1;pointer-events:all} .demo-modal{background:#fff;border-radius:20px;width:580px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;transform:translateY(12px);transition:transform 0.2s} .demo-overlay.open .demo-modal{transform:translateY(0)} .demo-modal-hd{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,0,0,0.07)} .demo-modal-service{display:flex;align-items:center;gap:12px} .demo-modal-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden} .demo-modal-name{font-weight:600;font-size:16px;line-height:20px;color:#26202F} .demo-close{width:32px;height:32px;border-radius:50%;border:none;background:#F1F2F4;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:#6B7280;line-height:1} .demo-close:hover{background:#E5E7EB} .demo-modal-body{flex:1;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:14px} .dm-user{display:flex;justify-content:flex-end} .dm-user-bbl{max-width:72%;border-radius:12px 12px 2px 12px;padding:10px 16px;background:#079d55;font-size:13px;line-height:150%;color:#fff} .dm-agent{display:flex;align-items:flex-start;gap:10px} .dm-av{width:28px;height:28px;border-radius:50%;background:#EBF1F2;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:11px;color:#3d6b4a} /* Routing hint between user query and agent code call — narrates the one-line story the marketing site exists to sell ("AgentKey chose the right provider for me"). Slim + muted on purpose so it doesn't compete with the bubbles above and below it; the provider name and one-clause "why" go on the same line. */ .dm-route{display:flex;align-items:center;gap:6px;padding:2px 4px;font-size:11.5px;line-height:140%;color:#7A828B;font-style:italic} .dm-route-arrow{font-size:12px;color:#9CA3AF;flex-shrink:0} .dm-route-provider{color:#3d6b4a;font-style:normal;font-weight:500} .dm-code-bbl{border-radius:2px 12px 12px 12px;padding:10px 14px;background:#F8FAFB;border:1px solid rgba(0,0,0,0.07)} .dm-code{font-family:'Geist Mono',system-ui,monospace;font-size:12px;line-height:160%} .dm-code-fn{color:#3d6b4a} .dm-code-k{color:#374151} .dm-result{border-radius:2px 12px 12px 12px;padding:12px 16px;max-width:85%;background:#F8FAFB;border:1px solid rgba(0,0,0,0.07);font-size:13px;line-height:160%;color:#374151;white-space:pre-wrap} /* ─── SETUP ──────────────────────────────────────────────── */ .setup{width:100%;background:#fff;border-bottom:1px solid #E6E6E6} .setup-wrap{display:flex;align-items:flex-start;gap:120px;padding:96px 126px} .setup-left{position:sticky;top:80px;align-self:flex-start;display:flex;flex-direction:column;align-items:flex-start;gap:14px} .setup-title-wrap{display:flex;flex-direction:column;align-items:flex-start;width:485px} .setup-h2{font-weight:600;font-size:40px;line-height:110%;letter-spacing:-0.03em;color:#26202F;margin-bottom:16px} .setup-sub{font-size:20px;line-height:160%;color:#6B7280;align-self:stretch} .setup-right{flex:1.4;flex-basis:0;display:flex;flex-direction:column} .setup-step{display:flex;gap:20px;padding-bottom:36px;border-bottom:1px solid rgba(0,0,0,0.06)} .setup-step:not(:first-child){padding-top:36px} .setup-step:last-child{padding-bottom:0;border-bottom:none} .step-num{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#079d55;flex-shrink:0;font-weight:600;font-size:14px;line-height:18px;color:#fff} .step-content{padding-top:4px} .step-title{font-weight:600;font-size:17px;line-height:22px;letter-spacing:-0.02em;color:#26202F;margin-bottom:8px} .step-desc{font-size:14px;line-height:165%;letter-spacing:-0.01em;color:#6B7280;margin-bottom:14px} .code-block{border-radius:10px;padding:14px 18px;background:#FAF9F6;border:1px solid rgba(0,0,0,0.06)} .code-line{font-family:'Geist Mono',system-ui,monospace;font-size:13px;line-height:16px} .code-line+.code-line{margin-top:4px} .code-plain-sans{font-family:'Geist',system-ui,sans-serif;font-size:16px;line-height:20px;color:#26202F} .code-comment{color:#6B7280} .code-default{color:#374151} /* ─── SETUP (Paper-like three-step layout) ────────────────── */ .etup-wrap{max-width:1440px;margin:0 auto;padding:96px 126px} .etup-header{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:64px} .setup-lead{font-size:20px;line-height:160%;color:#6B7280;align-self:stretch;max-width:760px} .etup-inner{display:flex;flex-direction:column} .etup-step{display:flex;align-items:stretch} .etup-col{flex:1;display:flex;flex-direction:column;gap:32px;height:560px;padding:0 24px 36px;box-sizing:border-box} .etup-col:not(:last-child){border-right:1px solid rgba(0,0,0,0.06)} .setup-illu{height:332px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;transform-origin:center center} .setup-illu img{width:288px;height:262px;display:block} .etup-step-row{display:flex;gap:20px;align-items:flex-start} .etup-step-text{display:flex;flex-direction:column} .setup-pill{display:inline-flex;align-items:center;background:#26202F;color:#fff;border-radius:6px;padding:0 9px;font-size:14px;line-height:22px;height:22px;box-sizing:border-box;vertical-align:baseline} /* ─── FAQ ────────────────────────────────────────────────── */ .faq{width:100%;background:#FAF9F6;border-bottom:1px solid #E6E6E6;overflow:hidden} .faq-wrap{display:flex;flex-direction:column;align-items:center;padding:60px 126px 80px;height:auto;min-height:0} .faq-header{display:flex;flex-direction:column;align-items:center;gap:14px} .faq-h2{font-weight:600;font-size:40px;line-height:110%;letter-spacing:-0.03em;color:#26202F;width:498px;text-align:center;margin-bottom:64px} .faq-list{width:100%;display:flex;flex-direction:column} .faq-item{padding:24px 0;border-top:1px solid rgba(0,0,0,0.08);cursor:pointer} .faq-item:last-child{border-bottom:1px solid rgba(0,0,0,0.08)} .faq-q-row{display:flex;justify-content:space-between;align-items:flex-start;gap:24px} .faq-q{font-weight:600;font-size:16px;line-height:140%;color:#26202F;flex-shrink:0} .faq-toggle{flex-shrink:0;margin-top:2px;font-size:20px;line-height:24px;color:#9CA3AF;transition:transform 0.35s cubic-bezier(0.16,1,0.3,1)} .faq-a{font-size:15px;line-height:170%;color:#6B7280;width:100%;text-align:justify;text-justify:inter-word;overflow:hidden;max-height:0;opacity:0;margin-top:0;transition:max-height 0.5s cubic-bezier(0.16,1,0.3,1),opacity 0.35s ease,margin-top 0.35s ease} .faq-item.open .faq-a{max-height:300px;opacity:1;margin-top:12px} /* ─── CTA ────────────────────────────────────────────────── */ .cta{width:100%;background:#26202F;border-bottom:1px solid #33343D} .cta-wrap{padding:0 126px 96px;max-width:1440px;margin:0 auto} .cta-inner{ max-width:1280px;border-radius:28px;overflow:hidden;display:flex;flex-direction:column; align-items:center;gap:24px;margin:0 auto;padding:120px 80px; } .nav-logo-name{font-weight:600;font-size:17px;line-height:22px;letter-spacing:-0.03em;color:#26202F} .cta-icon{width:86px;height:86px;border-radius:21px;background:#079d55;position:relative;flex-shrink:0} .cta-icon svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)} .cta-content{max-width:560px;align-self:stretch;margin:0 auto} .cta-h2{font-weight:500;font-size:48px;line-height:105%;letter-spacing:-0.03em;color:#fff;text-align:center;margin-bottom:16px;white-space:pre-wrap} .cta-sub{font-size:16px;line-height:165%;letter-spacing:-0.01em;text-align:center;color:rgba(235,241,242,0.55);margin-bottom:40px} .cta-pill{ display:flex;align-items:center;max-width:420px;border-radius:100px; padding:5px 5px 5px 24px;background:#fff;border:1px solid rgba(255,255,255,0.56); margin:0 auto;transition:border-color 0.2s ease; } .cta-pill:focus-within{border-color:#079d55;border-width:2px} .cta-pill input{flex:1;border:none;outline:none;background:none;font-family:'Geist',system-ui,sans-serif;font-size:15px;line-height:18px;letter-spacing:-0.01em;color:#26202F} .cta-pill input::placeholder{color:rgba(0,0,0,0.4)} .cta-btn{border-radius:100px;padding:12px 24px;background:#079d55;font-weight:600;font-size:14px;line-height:18px;letter-spacing:-0.01em;color:#fff;white-space:nowrap} .cta-btn:hover{background:#206d48} /* Standalone variant — see .hero-join--standalone. */ a.cta-btn--standalone{display:flex;align-items:center;justify-content:center;padding:16px 36px;font-size:15px;text-decoration:none;width:fit-content;margin:0 auto;align-self:center} /* ─── FOOTER ─────────────────────────────────────────────── */ .footer{width:100%;background:#FFFFFF;border-top:1px solid #E5E7EB} .footer-wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px 24px;padding:18px 126px;position:relative;max-width:1440px;margin:0 auto} .footer-left{display:flex;align-items:center} .footer-logo{display:flex;align-items:center;gap:9px} .footer-copy{font-size:11px;line-height:14px;letter-spacing:0.04em;color:#6B7280} .footer-icons{display:flex;align-items:center;gap:8px} .footer-right{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .footer-icon{width:32px;height:32px;border-radius:50%;background:rgba(17,24,39,0.05);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s ease} a.footer-icon:hover{background:rgba(17,24,39,0.08)} a.footer-icon:hover svg path{stroke:#079d55} .footer-links{display:flex;gap:24px;flex-wrap:wrap} .footer-link{font-weight:500;font-size:12px;line-height:16px;letter-spacing:0.04em;text-transform:uppercase;color:#6B7280;cursor:pointer} a.footer-link:hover{color:#079d55} /* Text reveal cleanup: neutralize any per-letter reveal leftovers */ .reveal-up{ opacity:0; transform:translateY(18px); filter:blur(3px); will-change:transform,opacity,filter; } .reveal-scale{ opacity:0; transform:translateY(18px) scale(0.7); filter:blur(4px); will-change:transform,opacity,filter; } .reveal-visible.reveal-up{ opacity:1; transform:translateY(0); filter:blur(0px); animation:revealUpSpring 860ms cubic-bezier(0.16, 1, 0.3, 1) both; } .reveal-visible.reveal-scale{ opacity:1; transform:translateY(0) scale(1); filter:blur(0px); animation:revealScaleSpring 980ms cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes revealUpSpring{ 0%{opacity:0; transform:translateY(18px); filter:blur(3px);} 55%{opacity:1; transform:translateY(-6px); filter:blur(0px);} 100%{opacity:1; transform:translateY(0); filter:blur(0px);} } @keyframes revealScaleSpring{ 0%{opacity:0; transform:translateY(18px) scale(0.7); filter:blur(4px);} 55%{opacity:1; transform:translateY(-5px) scale(1.02); filter:blur(0px);} 100%{opacity:1; transform:translateY(0) scale(1); filter:blur(0px);} } @media (prefers-reduced-motion: reduce){ .reveal-up,.reveal-scale{opacity:1;transform:none;filter:none;animation:none !important;} .reveal-visible.reveal-up,.reveal-visible.reveal-scale{animation:none !important;} } /* ─── FOOTER ─────────────────────────────────────────────── */ .footer{width:100%;background:#FFFFFF;border-top:1px solid #E5E7EB} .footer-wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px 24px;padding:18px 126px;position:relative;max-width:1440px;margin:0 auto} .footer-left{display:flex;align-items:center} .footer-logo{display:flex;align-items:center;gap:9px} .footer-name{font-weight:600;font-size:14px;line-height:18px;letter-spacing:-0.02em;color:#111827} .footer-copy{font-size:11px;line-height:14px;letter-spacing:0.04em;color:#6B7280} .footer-icons{display:flex;align-items:center;gap:8px} .footer-right{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .footer-icon{width:32px;height:32px;border-radius:50%;background:rgba(17,24,39,0.05);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s ease} a.footer-icon:hover{background:rgba(17,24,39,0.08)} a.footer-icon:hover svg path{stroke:#079d55} .footer-badge{display:inline-flex;align-items:center;margin-left:4px;transition:opacity .15s ease} .footer-badge:hover{opacity:0.85} .footer-badge img{display:block;height:32px;width:auto} .footer-links{display:flex;gap:24px;flex-wrap:wrap} .footer-link{font-weight:500;font-size:12px;line-height:16px;letter-spacing:0.04em;text-transform:uppercase;color:#6B7280;cursor:pointer} /* ═══ Mobile / H5 (≤768px) ═══════════════════════════════════ */ html{-webkit-text-size-adjust:100%} @media (max-width:768px){ .rail{display:none} /* Nav: logo + actions on row 1; links scroll on row 2 */ .nav-inner{ grid-template-columns:1fr auto; grid-template-rows:auto auto; height:auto; min-height:56px; padding:10px 16px; column-gap:12px; row-gap:10px; align-items:center; } .nav-logo{grid-column:1;grid-row:1} .nav-actions{grid-column:2;grid-row:1} .nav-links{ grid-column:1/-1; grid-row:2; justify-self:stretch; justify-content:flex-start; overflow-x:auto; -webkit-overflow-scrolling:touch; gap:18px; padding:2px 0 6px; scrollbar-width:thin; } .nav-links::-webkit-scrollbar{height:3px} .nav-link{font-size:13px;white-space:nowrap;flex-shrink:0} .nav-lang-select{font-size:12px;padding:7px 26px 7px 12px;max-width:132px} .nav-cta{padding:8px 14px;font-size:13px} .wrap{padding:0 16px} .hero-inner{padding:48px 16px 56px} .hero-h1{font-size:clamp(28px,9vw,40px);margin-bottom:16px} .hero-sub{font-size:15px;margin-bottom:36px;max-width:none;padding:0 4px} .hero-actions{ flex-direction:column; align-items:stretch; width:100%; max-width:400px; gap:10px; } /* Match .cta-pill / .cta-btn (footer signup) — column card, not single horizontal pill */ .hero-email-pill{ flex-direction:column; align-items:stretch; width:100%; max-width:none; flex-wrap:nowrap; padding:8px; gap:8px; border-radius:16px; } .hero-email-pill input{ width:100%; flex:0 0 auto; padding:10px 12px; text-align:center; } .hero-join{ width:100%; padding:14px 20px; font-weight:600; background:#079d55; text-align:center; } .hero-join:hover{background:#206d48} .hero-watch-wrap{align-self:center;width:fit-content} .hero-watch{width:fit-content;justify-content:center;height:48px} .hero-proof{flex-direction:column;margin-top:20px;text-align:center} .friction-wrap{ flex-direction:column; gap:32px; padding:48px 16px 24px; align-items:stretch; } .friction-h2{font-size:28px;max-width:none} .friction-body{max-width:none;font-size:15px} .friction-right{justify-content:center;overflow:hidden} .friction-stack{ position:relative; left:0; transform:scale(1); transform-origin:center center; max-width:100%; min-height:220px; margin:0 auto; } .hiw-wrap{ flex-direction:column; gap:28px; padding:32px 16px 64px; } .hiw-divider{display:none} .hiw-panel{max-width:480px;margin:0 auto;width:100%} .hiw-chat,.hiw-input-area{max-width:none} .why-wrap{ flex-direction:column; gap:28px; padding:56px 16px; } .why-left{ width:100%; position:static; top:auto; } .why-h2{font-size:28px} .why-subtitle{font-size:16px} .why-right{ width:100%; min-height:600px; padding:20px 16px; border-radius:16px; } .why-feature-panel{inset:20px 16px} .why-feat-title{font-size:20px;line-height:26px} .vis-key{height:auto;min-height:280px;padding:24px 16px} .key-display{width:100%;max-width:100%;height:auto;min-height:64px;padding:12px} .chips-marquee-wrap{margin:0 -16px} .vis-payg{flex-direction:column;height:auto;min-height:0;padding:24px 16px;gap:20px} .payg-checklist{width:100%;max-width:100%;padding:0} .vis-fail{padding:20px 12px;min-height:0;height:auto} .fail-providers{flex-wrap:wrap;justify-content:center} .vis-scale{min-height:0;height:auto;padding:24px 16px} .vis-pnp{min-height:280px;height:auto;padding-bottom:24px} .pnp-terminal{ width:calc(100% - 32px); max-width:420px; height:auto; min-height:240px; } .pnp-icons{flex-wrap:wrap;justify-content:center;gap:8px} .integrations-wrap{padding:48px 16px 80px} .integ-header{margin-bottom:28px} .integ-title{ width:auto; max-width:100%; font-size:26px; padding:0 8px; } .integ-sub{font-size:16px;max-width:none;padding:0 4px} .tabs-row{ overflow-x:auto; -webkit-overflow-scrolling:touch; justify-content:flex-start; padding-bottom:4px; margin:0 -16px 24px; padding-left:16px; padding-right:16px; scrollbar-width:none; } .tabs-row::-webkit-scrollbar{display:none} .tab{padding:10px 14px;font-size:13px} .integ-cards{flex-direction:column;gap:12px} .integ-card{height:auto;min-height:0} /* Social + Crypto tabs on mobile: drop the desktop carousel entirely and let cards stack vertically. Carousel was designed to fit ~all platforms / capabilities in one viewport on desktop; on a phone the horizontal-scroll + visible peek of "half a card" is hostile (see the cropped Reddit in screenshots). The inline `padding:0 126px` on #tab-social / #tab-crypto comes from the markup, hence the !important. */ #tab-social, #tab-crypto{ padding:0 16px !important; /* override inline desktop padding */ flex-wrap:wrap !important; /* stack rows */ overflow-x:visible !important; /* kill horizontal scroll */ gap:16px !important; } #tab-social .integ-card, #tab-crypto .integ-card{width:100%;flex:1 1 100%;max-width:none} #social-outer, #crypto-outer{margin:0} /* no negative-padding bleed */ .social-mask, .social-nav-btn, .social-sb-wrap{display:none} /* carousel chrome is irrelevant when there is no carousel */ .setup-wrap{flex-direction:column;gap:40px;padding:48px 16px} .setup-title-wrap{width:100%} .setup-h2{font-size:28px} .setup-sub{font-size:16px} .etup-wrap{padding:48px 16px} .etup-header{margin-bottom:40px} .etup-inner{flex-direction:column} .etup-step{flex-direction:column} .etup-col{ height:auto; min-height:0; padding:0 0 32px; border-right:none; border-bottom:1px solid rgba(0,0,0,0.06); } .etup-col:last-child{border-bottom:none;padding-bottom:0} .setup-illu{height:240px} .setup-illu img{width:min(288px,85vw);height:auto} .faq-wrap{padding:48px 16px 48px;height:auto;min-height:0} .faq-h2{width:auto;max-width:100%;font-size:26px;margin-bottom:32px;padding:0 4px} .faq-q{font-size:15px} .cta-wrap{padding:0 16px 48px} .cta-inner{padding:56px 20px;gap:20px;border-radius:20px} .cta-h2{font-size:clamp(24px,7vw,32px);white-space:normal} .cta-sub{margin-bottom:28px;font-size:14px} .cta-pill{ flex-direction:column; max-width:none; width:100%; padding:8px; gap:8px; border-radius:16px; } .cta-pill input{width:100%;padding:10px 12px;text-align:center} .cta-btn{width:100%;padding:14px 20px} .footer-wrap{ flex-direction:column; align-items:flex-start; gap:12px; padding:20px 16px; } .footer-right{flex-wrap:wrap;gap:10px 14px} .footer-links{position:static;left:auto;top:auto} .demo-modal{width:calc(100vw - 24px);max-width:520px;max-height:85vh} #hero,#integrations,#why,#setup,#faq,#waitlist{scroll-margin-top:min(112px,20vw)} /* iOS Safari auto-zooms inputs whose computed font-size is < 16px when they receive focus — bump the two free-text inputs in the hero / CTA pills above that threshold so the page doesn't jump to fit-zoom on tap. Visual size barely changes (15→16px). */ .hero-email-pill input, .cta-pill input{font-size:16px} } /* ═══ Universal mobile-friendly defaults ════════════════════════════ */ /* Belt-and-braces — these apply on every viewport but only matter on mobile in practice. Kept outside the 768px block so a wider tablet landscape still inherits the safe-area + tap-highlight behaviour. */ html{ overflow-x:hidden; /* mirrors body — defense vs a rogue child element forcing horizontal scroll */ -webkit-tap-highlight-color:transparent; /* drop the grey iOS tap flash */ } img, svg, video, canvas{ max-width:100%; height:auto; /* preserve aspect ratio when shrunk; no-op for explicit width+height attrs */ } /* Notch / home-indicator safe areas (iPhone X+). The footer and nav are the most likely to be clipped; fixed bottom toolbars (n/a here) would also need it. */ .footer{padding-bottom:max(0px,env(safe-area-inset-bottom))} .nav-outer{padding-left:max(0px,env(safe-area-inset-left));padding-right:max(0px,env(safe-area-inset-right))} /* ═══ Extra-small / phone-portrait (≤480px) ═════════════════════════ */ @media (max-width:480px){ /* Tighter typography pass — the 768px block already shrank these once; this nudges them again for ≤480px (iPhone SE, common mid-range Android in portrait). */ .hero-h1{font-size:clamp(26px,8.5vw,34px)} .hero-sub{font-size:14px;margin-bottom:28px} .friction-h2,.why-h2,.setup-h2,.integ-title{font-size:24px} .friction-body,.why-subtitle,.setup-sub,.integ-sub{font-size:14px} .faq-h2{font-size:22px} .faq-q{font-size:14px} .cta-h2{font-size:clamp(22px,6.5vw,28px)} /* Tighter horizontal padding — `.wrap` defaults to 126px; the 768px block doesn't fully reset it for every section. */ .wrap{padding-left:16px;padding-right:16px} .footer-wrap{padding:24px 16px} /* Cards / pills — drop borrowed desktop padding so content fits. */ .integ-card{padding:16px} .why-feat-title{font-size:18px;line-height:24px} /* Buttons — keep ≥44px tap target, primary CTAs use full width. */ .cta-btn,.hero-actions a,.nav-cta{min-height:44px;display:inline-flex;align-items:center;justify-content:center} } /* ─── V3 LOCAL PATCHES: official site baseline + latest Paper deltas ─── */ .hero-inner{padding:34px 80px 80px;min-height:621px;justify-content:center} .hero-shader{width:235px;height:250px;margin-bottom:0} .hero-h1{max-width:min(938px,calc(100vw - 160px));margin-bottom:18px;font-size:clamp(48px,5.28vw,76px);white-space:nowrap;min-height:auto} .hero-sub{max-width:min(760px,calc(100vw - 160px));margin-bottom:34px;min-height:auto} .hero-sub-main{white-space:nowrap} .hero-proof{margin-top:24px} .v3-usecases{min-height:auto;background:#fff;border-bottom:1px solid #E6E6E6;padding:60px 0 28px;overflow:hidden} .v3-usecases .use-case-demo{width:min(1200px,calc(100vw - 252px));margin:0 auto;flex:none;transform:none} .v3-usecases .showcase-content{padding-top:26px} .hiw{display:none} .friction-wrap{flex-direction:column;align-items:center;gap:40px;padding:80px 126px 60px} .friction-left{align-items:center;text-align:center} .friction-h2{max-width:552px;margin-bottom:20px;overflow-wrap:anywhere} .friction-body{max-width:716px;overflow-wrap:anywhere} .friction-logos-block{align-items:center;margin-top:32px} .friction-logos-label{align-self:center;background:transparent;color:#079d55} .agent-support-v3{width:800px;max-width:100%;display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:32px} .support-label-v3{width:431px;max-width:100%;display:grid;grid-template-columns:minmax(64px,120px) auto minmax(64px,120px);align-items:center;justify-content:center;gap:12px} .support-label-v3 span{display:block;height:1px;background:#079d55} .support-label-v3 b{color:#079d55;font-size:13px;font-weight:600;line-height:22px;white-space:nowrap} /* All agent logos flow in ONE centered wrap container. The markup keeps two inner rows (6 + 5) but they're display:contents, so every logo becomes a direct flex item here and wraps evenly at any width. The old approach (two independent flex rows, each wrapping on its own) stranded a single logo on its own line at in-between widths (e.g. "OpenCode" alone). */ .agent-logo-rows-v3{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px 28px;width:100%} .agent-logo-row-v3{display:contents} .agent-logo-row-v3.compact{width:auto;max-width:none} .agent-logo-row-v3 span{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:0;color:#111827;font-size:13px;font-weight:650;line-height:18px;white-space:nowrap} .agent-logo-row-v3 img{width:32px;height:32px;flex:0 0 32px;object-fit:contain} .agent-more-v3{font-size:13px;font-weight:650;color:#111827} .friction-right{justify-content:center;width:100%} .friction-stack{left:0;width:525px;height:401px;max-width:100%;min-height:0;transform:none;max-height:none;overflow:visible} .friction-layer-back, .friction-layer-mid, .friction-layer-front{inset:auto;left:50%;top:calc(50% + 16px);width:151.81%;height:152.12%;max-width:none;max-height:none;transform:translate(-50%,-50%);object-fit:contain;object-position:center} .integrations-wrap{padding-top:80px!important;padding-bottom:80px!important} .integrations-v3{width:100%;max-width:none;box-sizing:border-box;margin:0;padding:80px 126px;border-bottom:1px solid #E6E6E6;text-align:center;background:#FAFAFA} .integrations-v3 .providers-head{width:100%;max-width:1188px;margin:0 auto 48px} .integrations-v3 .provider-groups{width:100%;max-width:1188px;margin:0 auto} .integrations-v3 .sec-label{margin:0 auto} .integrations-v3 h2{margin:12px 0 12px;color:#26202F;font-size:40px;font-weight:600;letter-spacing:-.03em;line-height:1.1} .integrations-v3 .section-sub{max-width:656px;margin:0 auto;color:#6B7280;font-size:16px;line-height:1.7} .provider-groups{display:flex;flex-direction:column;gap:56px;text-align:left} .provider-groups article{display:flex;flex-direction:column;gap:10px} .provider-groups h3{display:flex;align-items:baseline;gap:8px;margin:0;color:#111827;font-size:28px;font-weight:650;font-variation-settings:"wght" 650;letter-spacing:0;line-height:38px} .provider-groups h3 small{width:max-content;color:#1F707A;font-size:12px;font-weight:500;letter-spacing:.05em;line-height:22.5px;white-space:pre;flex-shrink:0} .provider-groups h3 small.provider-count-regular{color:#14716D;font-size:14px;letter-spacing:0;line-height:18px;white-space:pre-wrap} .provider-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));justify-content:stretch;gap:12px;overflow:visible} .provider-card{width:100%;height:72px;min-width:0;min-height:72px;max-height:72px;display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:18px 14px;align-content:center;align-items:center;column-gap:12px;row-gap:3px;padding:16px;border:1px solid #D8DEE8;border-radius:12px;background:#fff;box-shadow:none;box-sizing:border-box;color:#374151;overflow:hidden} .provider-card img{grid-column:1;grid-row:1 / 3;width:34px;height:34px;object-fit:contain;align-self:center;justify-self:center} .provider-card b,.provider-card small{grid-column:2;display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .provider-card b{grid-row:1;color:#111827;font-size:14px;font-weight:600;line-height:18px} .provider-card small{grid-row:2;color:#6B7280;font-size:11px;font-weight:400;line-height:14px} .why-wrap{display:grid!important;grid-template-columns:433px 640px!important;gap:80px!important;align-items:flex-start!important} .why-right{height:auto!important;min-height:525px!important;overflow:hidden} .why-feature{display:flex!important} .cta{background:#26202F;color:#fff} .cta-wrap{min-height:616px;display:flex;align-items:center;justify-content:center} .cta-inner{display:flex;flex-direction:column;align-items:center;text-align:center} .cta-sub{color:rgba(255,255,255,.58)} .debug-controls{display:none!important} @media(min-width:769px) and (max-width:1040px){ .nav-inner{ grid-template-columns:1fr auto; grid-template-rows:auto auto; height:auto; min-height:56px; padding:10px 126px; column-gap:12px; row-gap:10px; align-items:center; } .nav-logo{ grid-column:1; grid-row:1; } .nav-actions{ grid-column:2; grid-row:1; } .nav-links{ grid-column:1/-1; grid-row:2; justify-self:stretch; justify-content:flex-start; overflow-x:auto; -webkit-overflow-scrolling:touch; gap:18px; padding:2px 0 6px; scrollbar-width:thin; } .nav-links::-webkit-scrollbar{height:3px} .nav-link{ font-size:13px; white-space:nowrap; flex-shrink:0; } .nav-lang-select{ font-size:12px; padding:7px 26px 7px 12px; max-width:132px; } .nav-cta{ padding:8px 14px; font-size:13px; } } @media(min-width:1051px) and (max-width:1408px){ .footer-wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:nowrap; gap:24px; padding:18px 126px; max-width:1440px; margin:0 auto; } .footer-right{justify-self:auto} } @media(min-width:769px) and (max-width:1050px){ .footer-wrap{ flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:16px; padding:20px 126px; } .footer-logo{ order:1; } .footer-right{ order:2; flex-wrap:wrap; gap:12px 16px; } } @media(min-width:1041px) and (max-width:1408px){ .why-wrap{ width:calc(100vw - 252px)!important; grid-template-columns:minmax(300px,.42fr) minmax(0,.58fr)!important; gap:clamp(28px,4vw,64px)!important; padding:96px 0!important; } .why-left{ width:auto; min-width:0; padding-top:clamp(22px,2.5vw,32px); } .why-h2{font-size:clamp(32px,3.2vw,42px)} .why-subtitle{font-size:clamp(15px,1.6vw,20px)} .why-nav-item{padding:11px 13px} .why-nav-txt{ min-width:0; overflow-wrap:anywhere; font-size:clamp(13px,1.25vw,16px); line-height:1.25; } .why-right{ width:100%; min-width:0; min-height:clamp(475px,42vw,525px)!important; padding:clamp(22px,2.5vw,32px); } .why-feature-panel{inset:clamp(22px,2.5vw,32px)} .why-feat-title{font-size:clamp(22px,2.1vw,26px);line-height:1.2} .why-feat-desc{font-size:clamp(12px,1.1vw,14px);line-height:1.6} .vis-key{height:clamp(292px,30vw,351px);padding:clamp(24px,3vw,48px)} .key-display{width:min(319px,100%);height:64px} .key-text{font-size:clamp(14px,1.55vw,20px);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .chips-marquee-wrap{margin:0 calc(clamp(24px,3vw,48px) * -1)} .chip{height:clamp(56px,6vw,70px);padding:6px clamp(14px,2vw,24px)} .vis-payg{height:clamp(292px,30vw,342px);padding:28px 20px;gap:12px;overflow:hidden} .payg-checklist{width:min(220px,42%);padding:0 8px} .payg-check-txt{font-size:12px;line-height:15px} .vis-fail{height:clamp(276px,28vw,312px);padding:clamp(20px,2.6vw,36px)} .fail-providers{gap:8px} .fail-prov{min-width:0;padding:10px} .fail-prov-row{gap:6px;align-items:flex-start} .fail-prov-name,.fail-status{overflow-wrap:anywhere} .fail-badge{padding:4px 6px;flex-shrink:0} .vis-pnp{height:clamp(286px,29vw,320px)} .pnp-terminal{width:min(463px,calc(100% - 40px))} } @media(min-width:1041px) and (max-width:1408px){ .v3-usecases{--agent-width:520px} .v3-usecases{padding:56px 0 32px} .v3-usecases .use-case-demo{width:calc(100vw - 252px)} .v3-usecases .audience-tabs{ width:100%; flex-wrap:wrap; justify-content:center; } .v3-usecases .showcase-content{ gap:clamp(24px,3vw,36px); justify-content:center; } .v3-usecases .scenario-list{ width:auto; flex:1 1 34%; max-width:440px; min-width:0; gap:14px; } .v3-usecases .scenario-intro h1{ width:100%; font-size:clamp(26px,2.8vw,32px); } .v3-usecases .scenario-intro p{ font-size:15px; line-height:1.6; } .v3-usecases .scenario-card{ height:auto; min-height:88px; padding:clamp(12px,1.25vw,14px) clamp(14px,1.6vw,18px); } .v3-usecases .scenario-card strong{ font-size:clamp(14px,1.45vw,18px); line-height:1.32; } .v3-usecases .preview-stack{ width:auto !important; flex:1 1 var(--agent-width) !important; min-width:0; max-width:600px; } .v3-usecases .agent-window{ width:100%; height:558px; transform:none; } .v3-usecases .prompt{ left:34px; right:24px; width:auto; font-size:clamp(12px,1.05vw,14px); line-height:1.45; overflow-wrap:anywhere; } .v3-usecases .prompt-arrow{left:18px} .v3-usecases .agent-output{top:118px} .v3-usecases .agent-dot{left:22px} .v3-usecases .status{ width:auto; max-width:calc(100% - 58px); margin-left:38px; margin-right:20px; font-size:clamp(12px,1.05vw,14px); line-height:1.55; } .v3-usecases .status-row{width:100%;max-width:100%} .v3-usecases .response{ width:auto; margin-left:38px; margin-right:20px; font-size:clamp(12px,1.05vw,14px); line-height:1.45; overflow-wrap:anywhere; } } @media(min-width:1181px) and (max-width:1300px){ .v3-usecases{--agent-width:500px} } @media(min-width:1041px) and (max-width:1180px){ .v3-usecases{--agent-width:460px} .v3-usecases .showcase-content{gap:20px} } @media(min-width:1181px) and (max-width:1408px){ .provider-grid{grid-template-columns:repeat(4,minmax(0,1fr))} } @media(min-width:901px) and (max-width:1180px){ .integrations-v3{padding-left:126px;padding-right:126px} .provider-grid{grid-template-columns:repeat(3,minmax(0,1fr))} } @media(min-width:769px) and (max-width:1180px){ .etup-wrap{ padding:80px 126px; } .etup-header{ margin-bottom:44px; } .setup-lead{ max-width:760px; overflow-wrap:anywhere; } .etup-step{ flex-direction:column; } .etup-col{ height:auto; min-height:0; gap:24px; padding:0 0 40px; border-right:none!important; border-bottom:1px solid rgba(0,0,0,0.06); } .etup-col:last-child{ border-bottom:none; padding-bottom:0; } .setup-illu{ height:280px; } .setup-illu img{ width:min(288px,70%); height:auto; } .etup-step-row{ max-width:720px; } .etup-step-text{ min-width:0; } .step-desc{ overflow-wrap:anywhere; } } @media(min-width:769px) and (max-width:900px){ .integrations-v3{padding-left:126px;padding-right:126px} .provider-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(min-width:901px) and (max-width:1040px){ .why-wrap{ display:flex!important; flex-direction:column!important; gap:36px!important; width:auto!important; padding:80px 126px!important; } .why-left{ width:100%; position:static; top:auto; } .why-nav{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; gap:8px; } .why-nav-item{ width:100%; min-width:0; justify-content:center; text-align:center; padding:12px 10px; } .why-nav-txt{ min-width:0; overflow-wrap:anywhere; font-size:clamp(12px,1.35vw,14px); line-height:1.25; } .why-right{ width:100%; min-height:560px!important; } .v3-usecases{ display:block; padding:52px 126px 36px; overflow:hidden; } .v3-usecases .use-case-demo{ width:100%; min-width:0; max-width:none; flex:0 1 auto; gap:18px; margin:0 auto; transform:none; } .v3-usecases .audience-tabs{ width:100%; flex-wrap:wrap; gap:8px; justify-content:flex-start; } .v3-usecases .audience-tab{ flex:1 1 calc(33.333% - 8px); min-width:0; min-height:38px; height:auto; padding:0 12px; font-size:12px; line-height:16px; } .v3-usecases .tab-content{ min-width:0; max-width:100%; justify-content:center; white-space:normal; text-align:center; line-height:16px; } .v3-usecases .tab-icon{width:18px;height:18px;flex-basis:18px} .v3-usecases .showcase-content{ flex-direction:column; align-items:stretch; gap:20px; padding:18px 0 0; } .v3-usecases .scenario-connector{display:none} .v3-usecases .scenario-list{width:100%;gap:12px} .v3-usecases .scenario-intro{gap:8px} .v3-usecases .scenario-intro h1{width:100%;font-size:clamp(24px,4vw,32px);line-height:1.12} .v3-usecases .scenario-intro p{font-size:14px;line-height:1.55} .v3-usecases .scenario-card{min-height:78px;height:auto;gap:5px;padding:14px 16px;border-radius:14px} .v3-usecases .scenario-card strong{font-size:15px;line-height:20px} .v3-usecases .preview-stack{width:100% !important;min-width:0;flex:0 1 auto !important} .v3-usecases .agent-window{width:100%;max-width:100%;min-width:0;height:520px;border-radius:18px} .v3-usecases .agent-header{height:48px;flex-basis:48px;padding:0 16px;font-size:13px} .v3-usecases .agent-dots{transform:scale(.82);transform-origin:right center} .v3-usecases .prompt{left:34px;right:16px;width:auto;font-size:12px;line-height:18px;overflow-wrap:anywhere} .v3-usecases .prompt-arrow{left:18px} .v3-usecases .agent-output{top:128px} .v3-usecases .agent-dot{left:20px} .v3-usecases .status{width:auto;max-width:calc(100% - 48px);margin-left:32px;margin-right:16px;font-size:12px;line-height:18px} .v3-usecases .status-row{width:100%;max-width:100%} .v3-usecases .response{width:auto;margin-left:32px;margin-right:16px;font-size:12px;line-height:18px;overflow-wrap:anywhere} .v3-usecases .response h2{font-size:16px;line-height:21px} .v3-usecases .response h3{font-size:14px;line-height:19px} .v3-usecases .agent-input{height:48px;flex-basis:48px;padding:0 16px} .v3-usecases .input-shell{height:47px} .v3-usecases .reply-label{font-size:12px} } @media(max-width:900px){ .hero-inner{min-height:560px;padding-inline:16px} .hero-h1{max-width:100%;font-size:clamp(28px,9vw,40px);white-space:normal} .hero-sub{max-width:none;font-size:15px;margin-bottom:36px;padding:0 4px} .hero-sub-main{white-space:normal} .v3-usecases{ display:block; padding:48px 126px 36px; overflow:hidden; } .v3-usecases .use-case-demo{ width:100%; min-width:0; max-width:none; flex:0 1 auto; gap:18px; margin:0 auto; transform:none; } .v3-usecases .audience-tabs{ width:100%; flex-wrap:wrap; gap:8px; justify-content:flex-start; } .v3-usecases .audience-tab{ flex:1 1 calc(33.333% - 8px); min-width:0; min-height:38px; height:auto; padding:0 12px; font-size:12px; line-height:16px; } .v3-usecases .tab-content{ min-width:0; max-width:100%; justify-content:center; white-space:normal; text-align:center; line-height:16px; } .v3-usecases .tab-icon{width:18px;height:18px;flex-basis:18px} .v3-usecases .showcase-content{ flex-direction:column; align-items:stretch; gap:20px; padding:18px 0 0; } .v3-usecases .scenario-connector{display:none} .v3-usecases .scenario-list{ width:100%; gap:12px; } .v3-usecases .scenario-intro{gap:8px} .v3-usecases .scenario-intro h1{ width:100%; font-size:clamp(24px,7vw,32px); line-height:1.12; } .v3-usecases .scenario-intro p{ font-size:14px; line-height:1.55; } .v3-usecases .scenario-card{ min-height:78px; height:auto; gap:5px; padding:14px 16px; border-radius:14px; } .v3-usecases .scenario-card strong{ font-size:15px; line-height:20px; } .v3-usecases .preview-stack{ width:100% !important; min-width:0; flex:0 1 auto !important; } .v3-usecases .agent-window{ width:100%; max-width:100%; min-width:0; height:520px; border-radius:18px; } .v3-usecases .agent-header{ height:48px; flex-basis:48px; padding:0 16px; font-size:13px; } .v3-usecases .agent-dots{transform:scale(.82);transform-origin:right center} .v3-usecases .prompt{ left:34px; right:16px; width:auto; font-size:12px; line-height:18px; overflow-wrap:anywhere; } .v3-usecases .prompt-arrow{left:18px} .v3-usecases .agent-output{top:128px} .v3-usecases .agent-dot{left:20px} .v3-usecases .status{ width:auto; max-width:calc(100% - 48px); margin-left:32px; margin-right:16px; font-size:12px; line-height:18px; } .v3-usecases .status-row{width:100%;max-width:100%} .v3-usecases .response{ width:auto; margin-left:32px; margin-right:16px; font-size:12px; line-height:18px; overflow-wrap:anywhere; } .v3-usecases .response h2{font-size:16px;line-height:21px} .v3-usecases .response h3{font-size:14px;line-height:19px} .v3-usecases .agent-input{ height:48px; flex-basis:48px; padding:0 16px; } .v3-usecases .input-shell{height:47px} .v3-usecases .reply-label{font-size:12px} /* Below 900px the 2-column friction layout has no room for the ~525px image stack beside the text, so the text column collapses and content overflows (clipped by body{overflow-x:hidden}). Stack it and drop to 16px side padding here — the ≤768 block already does this lower down; extending it to ≤900 closes the 769–900px gap that showed truncated copy + a cut-off "Support multiple agents" row. */ .friction-wrap{flex-direction:column;align-items:stretch;gap:32px;padding:64px 16px 48px} .friction-h2{max-width:none} .friction-body{max-width:none} .friction-right{overflow:visible;justify-content:center} .agent-support-v3{width:100%} .agent-logo-row-v3,.agent-logo-row-v3.compact{width:100%;flex-wrap:wrap;justify-content:center;gap:14px 18px} .agent-logo-row-v3 span{white-space:normal;text-align:center;max-width:128px} .friction-stack{ width:min(525px,calc(100% / 1.5181)); height:auto; aspect-ratio:525/401; max-width:100%; } .friction-layer-back, .friction-layer-mid, .friction-layer-front{ top:calc(50% + clamp(6px,3.2vw,16px)); } .agent-support-v3{width:100%;gap:18px;margin-top:28px} .support-label-v3{grid-template-columns:minmax(40px,1fr) auto minmax(40px,1fr)} .agent-logo-rows-v3{gap:14px} .agent-logo-row-v3,.agent-logo-row-v3.compact{width:100%;flex-wrap:wrap;gap:14px 18px} .agent-logo-row-v3 span{font-size:12px;white-space:normal;text-align:center;max-width:128px} .agent-logo-row-v3 img{width:28px;height:28px;flex-basis:28px} .integrations-v3{padding:64px 126px} .provider-groups{gap:36px} .provider-groups h3{flex-wrap:wrap} .provider-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .provider-card{width:100%;grid-template-columns:34px minmax(0,1fr)} .why-wrap{display:flex!important;flex-direction:column!important;gap:36px!important} .why-nav{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; gap:8px; } .why-nav-item{ width:100%; min-width:0; justify-content:center; text-align:center; padding:12px 10px; } .why-nav-txt{ min-width:0; overflow-wrap:anywhere; } .why-right{width:100%!important;min-height:600px!important} } @media(min-width:521px) and (max-width:1040px){ .why-wrap{ display:flex!important; flex-direction:column!important; gap:36px!important; width:auto!important; } .why-left{ width:100%; position:static; top:auto; } .why-nav{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; gap:8px; } .why-nav-item{ width:100%; min-width:0; justify-content:center; text-align:center; padding:12px 10px; } .why-nav-txt{ min-width:0; overflow-wrap:anywhere; font-size:clamp(12px,1.35vw,14px); line-height:1.25; } .why-right{ width:100%!important; min-height:560px!important; } } @media(min-width:769px) and (max-width:1040px){ .why-wrap{ padding:80px 126px!important; } } @media(max-width:768px){ .v3-usecases{padding-inline:16px} .v3-usecases .audience-tab{flex-basis:calc(50% - 4px)} .friction-wrap{padding-left:16px;padding-right:16px} .integrations-v3{padding-left:16px;padding-right:16px} .provider-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:520px){ .v3-usecases{ padding:40px 16px 32px; } .v3-usecases .audience-tabs{justify-content:flex-start} .v3-usecases .audience-tab{flex-basis:calc(50% - 4px)} .v3-usecases .audience-tab{min-height:44px;height:auto;padding:0 12px} .v3-usecases .agent-window{height:500px} .v3-usecases .agent-dots{display:none} .why-nav{grid-template-columns:repeat(2,minmax(0,1fr))} .friction-wrap{padding:56px 16px 40px} .friction-stack{width:min(420px,calc(100% / 1.42));max-width:100%} .friction-layer-back, .friction-layer-mid, .friction-layer-front{width:142%;height:142%;top:calc(50% + 8px)} } /* ════ agentkey /showcase.css (V3 demo / agent-window) ════ */ :root { color: #26202f; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-synthesis: none; -webkit-font-smoothing: antialiased; } * { box-sizing: border-box; } html, body { min-width: 100%; min-height: 100%; margin: 0; } body { overflow-x: hidden; } .showcase-stage { min-height: auto; display: flex; justify-content: center; padding: 48px 32px 36px; background: transparent; } .use-case-demo { width: 1200px; flex: 0 0 1200px; display: flex; flex-direction: column; align-items: center; gap: 18px; } .audience-tabs { width: fit-content; display: flex; align-items: center; justify-content: center; gap: 8px; } .audience-tab { --tab-fill: 0%; position: relative; width: fit-content; height: 42px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0 16px; border: 1px solid #e6e6e6; border-radius: 999px; background: #fff; color: #26202f; font: 500 14px/17px "Geist", system-ui, sans-serif; cursor: pointer; } .audience-tab .tab-progress { position: absolute; inset: 0 auto 0 0; width: var(--tab-fill); border-radius: 999px 0 0 999px; background: #ccebed; pointer-events: none; } .audience-tab .tab-content { position: relative; z-index: 1; display: flex; align-items: center; gap: 4px; white-space: nowrap; } .audience-tab .tab-icon { width: 20px; height: 20px; flex: 0 0 20px; color: #6b7280; } .audience-tab .tab-icon-fill, .audience-tab .tab-icon-crypto { fill: currentColor; stroke: currentColor; } .audience-tab .tab-icon-crypto { stroke-width: 0.3; } .audience-tab .tab-icon-stroke { fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; } .audience-tab.active { border-color: #1f7480; background: #eaf6f7; color: #26202f; } .audience-tab.active .tab-icon { color: #1f7480; } .showcase-content { position: relative; width: 100%; display: flex; align-items: flex-start; justify-content: center; gap: 48px; padding: 28px 0; } .scenario-connector { position: absolute; inset: 0; z-index: 0; overflow: visible; pointer-events: none; opacity: 0; } .connector-line { fill: none; stroke: #168f9f; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 7px rgb(22 143 159 / 32%)); } .scenario-list { position: relative; z-index: 1; width: 420px; height: 460px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; } .scenario-intro { width: 100%; display: flex; flex-direction: column; gap: 12px; margin: 0; } .scenario-intro h1 { width: 100%; margin: 0; color: #26202f; font-family: "Geist", system-ui, sans-serif; font-size: 32px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; } .audience-title-slot { position: relative; display: inline-flex; align-items: baseline; width: auto; height: 1.1em; overflow: visible; clip-path: inset(0 0 -0.5em 0); color: #1f7480; vertical-align: baseline; transform: translateY(0.16em); transition: width 360ms cubic-bezier(0.22, 0.72, 0.32, 1); } .audience-title-slot span { position: absolute; left: 0; bottom: 0; line-height: 1.1; white-space: nowrap; transition: transform 360ms cubic-bezier(0.22, 0.72, 0.32, 1); will-change: transform; } .audience-title-slot span.entering { transform: translateY(110%); } .audience-title-slot span.active { transform: translateY(0); } .audience-title-slot span.leaving { transform: translateY(-110%); } .can-do-text { display: inline-block; transform: translateY(0.05em); } .scenario-intro p { margin: 0; color: #6b7280; font-family: "Geist", system-ui, sans-serif; font-size: 16px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.7; } .scenario-card { --edge-proximity: 0; --cursor-angle: 45deg; --inner-glow-x: 50%; --inner-glow-y: 108%; --inner-glow-width: 220px; --inner-glow-height: 78px; --inner-depth-direction: to top; --inner-axis-direction: 90deg; --edge-sensitivity: 30; --color-sensitivity: calc(var(--edge-sensitivity) + 20); --border-radius: 18px; --glow-padding: 59px; --cone-spread: 34; --fill-opacity: 0.24; --card-bg: #fff; --glow-color: rgb(137 185 192 / 82%); --glow-color-60: rgb(137 185 192 / 42%); --glow-color-50: rgb(137 185 192 / 32%); --glow-color-40: rgb(137 185 192 / 24%); --glow-color-30: rgb(137 185 192 / 17%); --glow-color-20: rgb(209 231 234 / 14%); --glow-color-10: rgb(209 231 234 / 8%); --gradient-one: radial-gradient(at 80% 55%, #22a9b8 0, transparent 50%); --gradient-two: radial-gradient(at 69% 34%, #fcf3f6 0, transparent 50%); --gradient-three: radial-gradient(at 8% 6%, #89b9c0 0, transparent 50%); --gradient-four: radial-gradient(at 41% 38%, #168f9f 0, transparent 50%); --gradient-five: radial-gradient(at 86% 85%, #fcf3f6 0, transparent 50%); --gradient-six: radial-gradient(at 82% 18%, #d1e7ea 0, transparent 50%); --gradient-seven: radial-gradient(at 51% 4%, #fcf3f6 0, transparent 50%); --gradient-base: linear-gradient(#22a9b8 0 100%); position: relative; height: 96px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; overflow: visible; padding: 0 24px; border: 1px solid #e8e8ea; border-radius: var(--border-radius); background: var(--card-bg); color: #17141f; text-align: left; cursor: pointer; isolation: isolate; transform: translate3d(0, 0, 0.01px); } .scenario-card .scenario-number, .scenario-card strong { position: relative; z-index: 2; } .scenario-card > .inner-glow { position: absolute; inset: 1px; z-index: 0; overflow: hidden; border-radius: calc(var(--border-radius) - 1px); pointer-events: none; opacity: 0; transition: opacity 0.2s ease-out; background: transparent; box-shadow: inset 0 0 24px rgb(35 189 208 / 12%); } .scenario-card > .inner-glow::before { content: ""; position: absolute; left: var(--inner-glow-x); top: var(--inner-glow-y); width: var(--inner-glow-width); height: var(--inner-glow-height); background: linear-gradient( var(--inner-depth-direction), rgb(35 189 208 / 48%) 0%, rgb(76 198 211 / 34%) 36%, rgb(157 226 232 / 18%) 64%, transparent 90% ); mask-image: linear-gradient( var(--inner-axis-direction), transparent 0%, black 20%, black 80%, transparent 100% ); transform: translate(-50%, -50%); will-change: left, top; } .scenario-card.sweep-active > .inner-glow { opacity: 1; } .scenario-number { color: #7a7780; font-size: 14px; line-height: 20px; } .scenario-card strong { color: #a7a4ac; font-size: 18px; font-weight: 600; line-height: 24px; } .scenario-card.active { box-shadow: 0 12px 32px rgb(137 185 192 / 12%); } .scenario-card.active .scenario-number { color: #1f7480; font-weight: 700; } .scenario-card.active strong { color: #17141f; } .scenario-card::before, .scenario-card::after, .scenario-card > .edge-light { content: ""; position: absolute; inset: 0; border-radius: inherit; transition: opacity 0.25s ease-out; z-index: -1; will-change: opacity, mask-image; } .scenario-card:not(.sweep-active)::before, .scenario-card:not(.sweep-active)::after, .scenario-card:not(.sweep-active) > .edge-light { opacity: 0; transition: opacity 0.75s ease-in-out; } .scenario-card::before { border: 1px solid transparent; background: linear-gradient(var(--card-bg) 0 100%) padding-box, linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box, var(--gradient-one) border-box, var(--gradient-two) border-box, var(--gradient-three) border-box, var(--gradient-four) border-box, var(--gradient-five) border-box, var(--gradient-six) border-box, var(--gradient-seven) border-box, var(--gradient-base) border-box; opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity))); mask-image: conic-gradient( from var(--cursor-angle) at center, black calc(var(--cone-spread) * 1%), transparent calc((var(--cone-spread) + 15) * 1%), transparent calc((100 - var(--cone-spread) - 15) * 1%), black calc((100 - var(--cone-spread)) * 1%) ); } .scenario-card::after { border: 1px solid transparent; background: var(--gradient-one) padding-box, var(--gradient-two) padding-box, var(--gradient-three) padding-box, var(--gradient-four) padding-box, var(--gradient-five) padding-box, var(--gradient-six) padding-box, var(--gradient-seven) padding-box, var(--gradient-base) padding-box; mask-image: linear-gradient(to bottom, black, black), radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%), radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%), radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%), radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%), radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%), conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%); mask-composite: subtract, add, add, add, add, add; opacity: calc(var(--fill-opacity) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity))); mix-blend-mode: normal; } .scenario-card > .edge-light { inset: calc(var(--glow-padding) * -1); pointer-events: none; z-index: 1; mask-image: conic-gradient( from var(--cursor-angle) at center, black 0%, black 4%, transparent 14%, transparent 86%, black 96%, black 100% ); opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity))); mix-blend-mode: plus-lighter; } .scenario-card > .edge-light::before { content: ""; position: absolute; inset: var(--glow-padding); border-radius: inherit; box-shadow: inset 0 0 0 1px var(--glow-color), inset 0 0 1px 0 var(--glow-color-60), inset 0 0 3px 0 var(--glow-color-50), inset 0 0 6px 0 var(--glow-color-40), inset 0 0 15px 0 var(--glow-color-30), inset 0 0 25px 2px var(--glow-color-20), inset 0 0 50px 2px var(--glow-color-10), 0 0 1px 0 var(--glow-color-60), 0 0 3px 0 var(--glow-color-50), 0 0 6px 0 var(--glow-color-40), 0 0 15px 0 var(--glow-color-30), 0 0 25px 2px var(--glow-color-20), 0 0 50px 2px var(--glow-color-10); } .showcase-content .preview-stack { position: relative; z-index: 1; width: 560px; flex: 1 1 520px; max-width: 600px; box-sizing: border-box; gap: 14px; } .use-case-demo > .debug-controls { position: fixed; right: auto; bottom: 18px; left: 50%; z-index: 50; display: flex; transform: translateX(-50%); } @media (max-width: 1260px) { .use-case-demo { transform: scale(calc((100vw - 40px) / 1200)); transform-origin: top center; } } .stage { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px; } .preview-stack { display: flex; flex-direction: column; align-items: center; gap: 18px; } .debug-controls { width: min(960px, calc(100vw - 64px)); display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #dedee3; border-radius: 14px; background: rgb(255 255 255 / 92%); box-shadow: 0 8px 24px rgb(38 32 47 / 8%); } .play-toggle { width: 34px; height: 34px; flex: 0 0 34px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; color: #fff; background: #26202f; cursor: pointer; } .pause-icon { width: 10px; height: 13px; border-right: 3px solid currentColor; border-left: 3px solid currentColor; } .play-toggle.paused .pause-icon { width: 0; height: 0; margin-left: 2px; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid currentColor; border-right: 0; } .timeline { flex: 1 1 auto; accent-color: #3d6b4a; cursor: pointer; } .timecode { min-width: 96px; color: #66616c; font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px; text-align: right; } .agent-window { width: 100%; max-width: 100%; min-width: 0; height: 558px; display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid #e6e6e6; border-radius: 22px; box-shadow: 0 18px 42px rgb(38 32 47 / 10%); } .agent-header { height: 56px; flex: 0 0 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; border-bottom: 1px solid #ececef; color: #374151; font-family: "Geist Mono", "SFMono-Regular", Consolas, monospace; font-size: 16px; font-weight: 700; line-height: 20px; } .agent-title { flex: 0 0 auto; } .agent-dots { width: 93px; height: 16px; display: flex; flex-direction: column; justify-content: center; gap: 3px; opacity: 0; } .dots-row { height: 5px; display: flex; align-items: center; gap: 3px; } .dots-row span { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: #000; opacity: var(--dot-alpha, 0.2); } .agent-dots.is-running .dots-row span { animation: dot-matrix-pulse 0.8s linear infinite; } .dots-row:first-child span:nth-child(1) { animation-delay: -0.95s; } .dots-row:first-child span:nth-child(2) { animation-delay: -0.72s; } .dots-row:first-child span:nth-child(3) { animation-delay: -0.48s; } .dots-row:first-child span:nth-child(4) { animation-delay: -0.18s; } .dots-row:first-child span:nth-child(5) { animation-delay: -0.64s; } .dots-row:first-child span:nth-child(6) { animation-delay: -0.88s; } .dots-row:first-child span:nth-child(7) { animation-delay: -0.34s; } .dots-row:first-child span:nth-child(8) { animation-delay: -0.08s; } .dots-row:first-child span:nth-child(9) { animation-delay: -0.56s; } .dots-row:first-child span:nth-child(10) { animation-delay: -0.26s; } .dots-row:first-child span:nth-child(11) { animation-delay: -0.82s; } .dots-row:first-child span:nth-child(12) { animation-delay: -0.40s; } .dots-row:last-child span:nth-child(1) { animation-delay: -0.52s; } .dots-row:last-child span:nth-child(2) { animation-delay: -0.24s; } .dots-row:last-child span:nth-child(3) { animation-delay: -0.78s; } .dots-row:last-child span:nth-child(4) { animation-delay: -0.44s; } .dots-row:last-child span:nth-child(5) { animation-delay: -0.92s; } .dots-row:last-child span:nth-child(6) { animation-delay: -0.12s; } .dots-row:last-child span:nth-child(7) { animation-delay: -0.66s; } .dots-row:last-child span:nth-child(8) { animation-delay: -0.36s; } .dots-row:last-child span:nth-child(9) { animation-delay: -0.04s; } .dots-row:last-child span:nth-child(10) { animation-delay: -0.70s; } .dots-row:last-child span:nth-child(11) { animation-delay: -0.30s; } .dots-row:last-child span:nth-child(12) { animation-delay: -0.86s; } @keyframes dot-matrix-pulse { 0%, 5%, 100% { opacity: 0; } 38% { opacity: calc(var(--dot-alpha, 0.2) * 1.05); } 68% { opacity: 0.18; } 92% { opacity: 0; } } .conversation-viewport { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: #fff; } .conversation { position: absolute; inset: 0; transform: translateY(0); opacity: 1; will-change: transform, opacity; transition: transform 900ms cubic-bezier(0.22, 0.72, 0.32, 1), opacity 300ms cubic-bezier(0.7, 0, 1, 0.5); } .timeline-controlled, .timeline-controlled .prompt, .timeline-controlled .conversation, .timeline-controlled .response [data-reveal] { transition: none !important; } .conversation.fade-out { opacity: 0; transition: opacity 300ms cubic-bezier(0.7, 0, 1, 0.5); } .conversation.resetting { transition: none !important; } .prompt { position: absolute; top: 20px; left: 41px; width: 558px; padding: 0; border-radius: 0; background: transparent; color: #26202f; font-family: "Geist Mono", "SFMono-Regular", Consolas, monospace; font-size: 14px; font-weight: 500; letter-spacing: -0.02em; line-height: 20px; opacity: 0; transform: translateY(4px); transform-origin: 0 0; white-space: pre-wrap; } .prompt-cursor { display: inline-block; width: 7px; height: 1.08em; margin-left: 1px; background: #26202f; vertical-align: -0.16em; } .prompt.typing-complete .prompt-cursor { animation: cli-cursor-blink 1s steps(1, end) infinite; } @keyframes cli-cursor-blink { 0%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } } .prompt-arrow { position: absolute; top: 24px; left: 23px; width: 12px; height: 12px; fill: #41cd75; stroke: #41cd75; stroke-width: 1.8; opacity: 0; transform: translateY(12px) scale(0.98); transform-origin: 0 0; } .prompt.show { opacity: 1; transform: translateY(0) scale(1); transition: opacity 400ms ease, transform 400ms cubic-bezier(0.2, 0.75, 0.25, 1); } .agent-output { position: absolute; top: 113px; right: 0; left: 0; } .agent-dot { position: absolute; top: 0; left: 25px; width: 8px; height: 8px; border-radius: 50%; background: rgb(23 20 31 / 50%); opacity: 0; } .status { position: relative; width: max-content; min-height: 23px; margin-left: 36px; margin-bottom: 0; color: #3d6b4a; font-family: "Geist Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 14px; font-weight: 500; letter-spacing: -0.02em; line-height: 160%; text-transform: uppercase; } .status-stack { width: auto; margin-right: 34px; margin-bottom: 11px; } .status-row { position: relative; width: max-content; min-height: 23px; display: flex; align-items: center; gap: 0; overflow: hidden; color: #3d6b4a; } .status-row.completed { opacity: 0.5; } .status-row.active { opacity: 1; } .status-row + .status-row { margin-top: 3px; } .status-sweep { position: absolute; top: 0; bottom: 0; width: 72px; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 92%), transparent); mix-blend-mode: screen; pointer-events: none; } .status-branch { width: 16px; height: 16px; flex: 0 0 16px; margin-right: 0; background: no-repeat center calc(50% - 4px) / 16px 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 204.8 204.8'%3E%3Cpath fill='none' stroke='%2339717E' stroke-width='10' d='M128.001 160.003L64 160.002L64 44.801'/%3E%3C/svg%3E"); } .status-label { margin-left: 0; } .status-chevron { width: 16px; height: 16px; flex: 0 0 16px; margin-left: 4px; opacity: 1; background: no-repeat center / 16px 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 204.8 204.8'%3E%3Cpath fill='%2339717E' d='M145.329 106.929l-64 64a6.4 6.4 0 0 1-9.056-9.056L131.753 102.401 72.273 42.929a6.4 6.4 0 0 1 9.056-9.056l64 64A6.4 6.4 0 0 1 145.329 106.929Z'/%3E%3C/svg%3E"); } .tool-icons { display: flex; align-items: center; padding-left: 4px; } .tool-icon { position: relative; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border: 0; outline: 1.5px solid #fff; outline-offset: 0; border-radius: 50%; color: #fff; font-family: system-ui, sans-serif; font-size: 9px; font-weight: 650; line-height: 1; opacity: 0; transform: scale(0.72); } .tool-icon.visible { opacity: 1; transform: scale(1); } .tool-icon + .tool-icon { margin-left: -4px; } .tool-icon:nth-child(1) { z-index: 3; } .tool-icon:nth-child(2) { z-index: 2; } .tool-icon:nth-child(3) { z-index: 1; } .tool-icon:nth-child(4) { z-index: 0; } .tool-tiktok, .tool-x { background: #17171a; } .tool-icon.tool-x img { width: 18px; height: 18px; object-fit: contain; } .tool-tiktok img { width: 13.5px; height: 13.5px; object-fit: contain; } .tool-icon > img { width: 18px; height: 18px; object-fit: cover; } .tool-icon > svg { width: 14px; height: 14px; display: block; overflow: visible; } .tool-icon > svg path, .tool-icon > svg rect, .tool-icon > svg circle { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .tool-icon > svg circle[r="1"] { fill: currentColor; stroke: none; } .tool-perplexity img { width: 18px; height: 18px; object-fit: contain; } .tool-threads img { width: 19px; height: 19px; object-fit: cover; } .tool-youtube { background: #ff2b20; font-size: 8px; } .tool-instagram { background: #fff; } .tool-instagram img { width: 18px; height: 18px; object-fit: contain; } .tool-web { background: #fff; } .tool-web img { width: 14.5px; height: 14.5px; object-fit: contain; } .tool-firecrawl { background: #ffe7d8; } .tool-brightdata { background: #e9f4ff; } .tool-brightdata img { width: 18px; height: 18px; object-fit: cover; } .tool-serper { background: #e7f0ff; } .tool-amazon { background: #ff9900; } .tool-amazon img { width: 16px; height: 16px; object-fit: contain; } .tool-crunchbase { background: #146aff; } .tool-crunchbase img, .tool-yahoo img { width: 18px; height: 18px; object-fit: cover; } .tool-yahoo { background: #6001d2; } .tool-finnhub { background: #fff; } .tool-finnhub img { width: 18px; height: 18px; object-fit: cover; } .tool-reddit { background: #ff4500; } .tool-producthunt { background: #da552f; color: #fff; font-size: 11px; font-weight: 650; } .tool-exa { background: #0b0f19; } .tool-exa img { width: 18px; height: 18px; object-fit: cover; } .tool-perplexity { background: #102b2c; } .tool-naming { background: #e0f7ff; color: #0891b2; } .tool-wallet { background: #dcfce7; color: #16a34a; } .tool-token { background: #efe8ff; color: #8b5cf6; } .tool-market { background: #e8f0ff; color: #4568f0; } .tool-cex { background: #fff0e4; color: #ff5a1f; } .tool-social { background: #f3e8ff; color: #a855f7; } .tool-news { background: #ffe6e6; color: #ef4444; } .tool-funds { background: #fce7f3; color: #db2777; } .status.loading { color: #3d6b4a; } .shimmer-layer { position: absolute; inset: 0; color: transparent; background-image: linear-gradient( 100deg, transparent 0%, #9bd4d3 30%, #ffffff 50%, #9bd4d3 70%, transparent 100% ); background-size: 72px 100%; background-repeat: no-repeat; background-position: calc(100% + 72px) 0; background-clip: text; -webkit-background-clip: text; pointer-events: none; } .status.done { animation: done-in 220ms ease both; } @keyframes done-in { from { opacity: 0.35; } to { opacity: 1; } } .response { width: 564px; min-height: 20px; margin-top: 18px; margin-left: 41px; color: #26202f; font-family: "Geist Mono", "SFMono-Regular", Consolas, monospace; font-size: 14px; font-weight: 500; letter-spacing: -0.02em; line-height: 20px; } .response h2, .response h3, .response p { margin: 0; } .response h2 { margin-bottom: 12px; font-size: 19px; line-height: 24px; font-weight: 650; letter-spacing: -0.025em; } .response h3 { margin-top: 23px; margin-bottom: 10px; font-size: 17px; line-height: 22px; font-weight: 650; letter-spacing: -0.02em; } .response h3.section-first { margin-top: 0; } .response .answer-intro { margin-bottom: 18px; } .response strong { font-weight: 700; } .response a { color: #1f7480; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .response code { padding: 1px 5px; border-radius: 6px; background: #ececef; color: inherit; font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.92em; } .terminal-answer { color: #26202f; font-family: "Geist Mono", "SFMono-Regular", Consolas, monospace; font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: -0.02em; white-space: normal; overflow-wrap: anywhere; word-break: normal; } .terminal-answer h2, .terminal-answer h3, .terminal-answer p { margin: 0; font: inherit; letter-spacing: inherit; line-height: inherit; } .terminal-answer h2, .terminal-answer h3, .terminal-answer strong { font-weight: 650; word-break: keep-all; overflow-wrap: normal; } .terminal-answer h2 { margin-bottom: 18px; } .terminal-answer h3 { margin-top: 24px; margin-bottom: 14px; } .terminal-answer .answer-intro { margin-bottom: 16px; } .terminal-answer a { color: #1f7480; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .terminal-answer code { padding: 0; border-radius: 0; background: transparent; color: #1f7480; font: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .terminal-answer .crypto-value { color: #1f7480; overflow-wrap: anywhere; word-break: normal; } .terminal-answer .crypto-table { width: 100%; } .terminal-answer .crypto-header, .terminal-answer .crypto-row { display: grid; column-gap: 10px; } .terminal-answer .crypto-header { padding: 0 0 7px; border-bottom: 2px solid rgb(38 32 47 / 28%); } .terminal-answer .crypto-row { align-items: start; padding: 8px 0 9px; border-bottom: 1px solid rgb(38 32 47 / 18%); } .terminal-answer .crypto-header > *, .terminal-answer .crypto-row > * { min-width: 0; margin: 0; line-height: 20px; overflow-wrap: anywhere; word-break: normal; } .terminal-answer .crypto-transfer-table .crypto-header, .terminal-answer .crypto-transfer-table .crypto-row { grid-template-columns: minmax(78px, 0.72fr) 54px minmax(0, 1.18fr) minmax(0, 1.18fr) minmax(0, 1.34fr); column-gap: 8px; } .terminal-answer .crypto-transfer-table .crypto-row > strong { overflow-wrap: anywhere; word-break: normal; } .terminal-answer .crypto-snapshot-table .crypto-header, .terminal-answer .crypto-snapshot-table .crypto-row { grid-template-columns: minmax(210px, 0.75fr) minmax(0, 1.8fr); } .terminal-answer .crypto-derivatives-table .crypto-header, .terminal-answer .crypto-derivatives-table .crypto-row { grid-template-columns: minmax(130px, 0.7fr) minmax(180px, 1fr) minmax(180px, 1fr); } .terminal-answer .crypto-liquidations-table { max-width: 560px; } .terminal-answer .crypto-liquidations-table .crypto-header, .terminal-answer .crypto-liquidations-table .crypto-row { grid-template-columns: 110px 170px 110px 110px; } .terminal-answer .crypto-project-table .crypto-header, .terminal-answer .crypto-project-table .crypto-row { grid-template-columns: minmax(96px, 0.82fr) minmax(0, 1.45fr) minmax(0, 1.45fr); column-gap: 8px; } .terminal-answer .crypto-performance-table { max-width: 280px; } .terminal-answer .crypto-performance-table .crypto-header, .terminal-answer .crypto-performance-table .crypto-row { grid-template-columns: 92px 130px; } .terminal-answer .results-header, .terminal-answer .result-row { grid-template-columns: 238px 1fr; column-gap: 24px; } .terminal-answer .results-header { padding: 0 0 7px; border-bottom-color: rgb(38 32 47 / 28%); } .terminal-answer .result-row { padding: 13px 0 14px; border-bottom-color: rgb(38 32 47 / 18%); } .terminal-answer .result-row > strong, .terminal-answer .result-row p { line-height: 20px; } .terminal-answer .platform, .terminal-answer .platform-media, .terminal-answer .platform-image, .terminal-answer .globe-icon, .terminal-answer .platform-badge { margin-right: 3px; } .platform-badge { position: relative; top: -0.06em; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; vertical-align: middle; line-height: 0; } .platform-badge img { display: block; width: 16px; height: 16px; object-fit: cover; } .tiktok-badge, .x-badge { background: #17171a; } .tiktok-badge img { width: 12px; height: 12px; object-fit: contain; } .youtube-badge { background: #ff2b20; } .youtube-badge img { width: 16px; height: 16px; object-fit: contain; } .instagram-badge { background: #fff; } .reddit-badge, .hn-badge { background: #fff; } .bilibili-badge, .threads-badge { background: #fff; } .results-table { width: 100%; } .results-header, .result-row { display: grid; grid-template-columns: 138px 1fr; column-gap: 16px; } .results-header { padding-bottom: 8px; border-bottom: 1px solid #e5e7eb; } .result-row { padding: 12px 0; border-bottom: 1px solid #ececef; } .result-row > strong { line-height: 20px; } .result-row p { line-height: 20px; } .platform { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; border-radius: 4px; font-size: 10px; font-weight: 800; line-height: 16px; vertical-align: -1px; } .platform.x-logo { color: #fff; background: #000 url("assets/x.png") center / 16px 16px no-repeat; font-size: 0; } .platform.youtube { width: 18px; color: #fff; background: #ff2b20; } .platform-media { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; overflow: hidden; border-radius: 4px; vertical-align: -3px; } .tiktok-media { background: #17171a; } .tiktok-media img { width: 13px; height: 13px; object-fit: contain; } .globe-icon { width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; } .platform.hn { color: #fff; background: #ff6600; } .platform-image { width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; } .discussion-table { width: 100%; } .discussion-header, .discussion-row { display: grid; grid-template-columns: 58px minmax(0, 1fr) 148px; column-gap: 10px; } .discussion-header { padding: 0 0 8px; border-bottom: 1px solid #e5e7eb; } .discussion-row { align-items: start; padding: 10px 0; border-bottom: 1px solid #ececef; line-height: 19px; } .discussion-row > strong { line-height: 19px; } .terminal-answer-discussions h2 { margin-bottom: 18px; } .terminal-answer .discussion-header, .terminal-answer .discussion-row { grid-template-columns: 68px minmax(0, 1fr) minmax(150px, 170px); column-gap: 12px; } .terminal-answer .discussion-header { padding: 0 0 7px; border-bottom-color: rgb(38 32 47 / 28%); } .terminal-answer .discussion-header > * { min-width: 0; white-space: nowrap; overflow-wrap: normal; word-break: keep-all; } .terminal-answer .discussion-row { align-items: start; padding: 10px 0 11px; border-bottom-color: rgb(38 32 47 / 18%); line-height: 20px; } .terminal-answer .discussion-row > span { display: flex; align-items: center; min-height: 20px; } .terminal-answer .discussion-row p, .terminal-answer .discussion-row > strong { min-width: 0; margin: 0; line-height: 20px; overflow-wrap: anywhere; word-break: normal; } .terminal-answer .discussion-row code { overflow-wrap: anywhere; word-break: break-all; } .discussion-card-list { width: 100%; } .discussion-card { padding: 12px 0 13px; border-bottom: 1px solid rgb(38 32 47 / 18%); } .discussion-card dl { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 12px; row-gap: 0; margin: 0; } .discussion-card dt, .discussion-card dd { min-width: 0; margin: 0; line-height: 20px; } .discussion-card dt { font-weight: 650; } .discussion-card dd { overflow-wrap: anywhere; } .discussion-card code { word-break: break-all; } .compare-table { width: 100%; } .compare-header, .compare-row { display: grid; grid-template-columns: 108px minmax(0, 1fr); column-gap: 12px; } .compare-header { padding: 0 0 7px; border-bottom: 1px solid rgb(38 32 47 / 28%); } .compare-header > * { min-width: 0; white-space: nowrap; overflow-wrap: normal; word-break: keep-all; } .compare-row { align-items: start; padding: 8px 0 9px; border-bottom: 1px solid rgb(38 32 47 / 18%); } .compare-row > strong, .compare-row p { min-width: 0; margin: 0; line-height: 20px; overflow-wrap: anywhere; } .compare-row code { word-break: break-all; } .wide-compare-table .compare-header, .wide-compare-table .compare-row { grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.35fr); column-gap: 12px; } .wide-compare-table .compare-row > strong { overflow-wrap: normal; word-break: normal; } .price-table { width: 100%; } .price-row { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.45fr); column-gap: 12px; align-items: start; padding: 6px 0 7px; border-bottom: 1px solid rgb(38 32 47 / 18%); } .price-header { padding-top: 0; border-bottom-color: rgb(38 32 47 / 28%); } .price-row > * { min-width: 0; margin: 0; line-height: 20px; } .price-row > strong { overflow-wrap: normal; word-break: normal; } .terminal-bullet-list { margin: 0 0 18px; padding-left: 18px; } .terminal-bullet-list li { margin-bottom: 4px; padding-left: 4px; line-height: 20px; } .terminal-bullet-list li::marker { color: inherit; } .terminal-number-list { margin: 0 0 18px; padding-left: 20px; } .terminal-number-list li { margin-bottom: 3px; padding-left: 4px; line-height: 20px; } .terminal-number-list li::marker { color: #1f7480; font-weight: 650; } .g2-fields-table .compare-header, .g2-fields-table .compare-row { grid-template-columns: 128px minmax(0, 1fr); column-gap: 10px; } .scrape-table { width: 100%; } .scrape-header, .scrape-row { display: grid; grid-template-columns: 150px minmax(0, 1.05fr) minmax(0, 1.42fr) minmax(0, 1.2fr) minmax(0, 1.18fr); column-gap: 8px; } .scrape-header { padding: 0 0 7px; border-bottom: 1px solid rgb(38 32 47 / 28%); } .scrape-row { align-items: start; padding: 7px 0 8px; border-bottom: 1px solid rgb(38 32 47 / 18%); } .scrape-header > *, .scrape-row > * { min-width: 0; margin: 0; line-height: 20px; } .scrape-header > * { white-space: normal; overflow-wrap: normal; word-break: normal; } .scrape-row > p, .scrape-row > strong { overflow-wrap: anywhere; } .funding-table { width: 100%; } .funding-header, .funding-row { display: grid; grid-template-columns: 168px minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; } .funding-header { padding: 0 0 7px; border-bottom: 1px solid rgb(38 32 47 / 28%); } .funding-header > :nth-child(4) { display: none; } .funding-row { align-items: start; padding: 7px 0 8px; border-bottom: 1px solid rgb(38 32 47 / 18%); row-gap: 1px; } .funding-header > *, .funding-row > * { min-width: 0; margin: 0; line-height: 20px; } .funding-header > * { white-space: nowrap; overflow-wrap: normal; word-break: keep-all; } .funding-row > p, .funding-row > strong { overflow-wrap: anywhere; } .funding-row > :nth-child(4) { grid-column: 1 / -1; color: rgb(38 32 47 / 82%); } .compact-price-table { max-width: 520px; } .compact-price-table .price-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } .metric-table { width: 100%; } .metric-header, .metric-row { display: grid; grid-template-columns: 154px minmax(0, 1.2fr) minmax(0, 1.28fr); column-gap: 12px; } .metric-header { padding: 0 0 7px; border-bottom: 1px solid rgb(38 32 47 / 28%); } .metric-row { align-items: start; padding: 7px 0 8px; border-bottom: 1px solid rgb(38 32 47 / 18%); } .metric-header > *, .metric-row > * { min-width: 0; margin: 0; line-height: 20px; } .metric-header > * { white-space: nowrap; overflow-wrap: normal; word-break: keep-all; } .metric-row > p, .metric-row > strong { overflow-wrap: anywhere; } .mcp-table { width: 100%; } .mcp-header, .mcp-row { display: grid; grid-template-columns: 136px 72px minmax(0, 1.08fr) minmax(0, 1.52fr) minmax(0, 1.5fr); column-gap: 8px; } .mcp-header { padding: 0 0 7px; border-bottom: 1px solid rgb(38 32 47 / 28%); } .mcp-row { align-items: start; padding: 6px 0 7px; border-bottom: 1px solid rgb(38 32 47 / 18%); } .mcp-header > *, .mcp-row > * { min-width: 0; margin: 0; line-height: 20px; } .mcp-header > * { white-space: normal; overflow-wrap: normal; word-break: normal; } .mcp-row > p, .mcp-row > strong { overflow-wrap: anywhere; } .mcp-row > :nth-child(2) { text-align: right; } .messaging-table { width: 100%; } .messaging-header, .messaging-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) minmax(0, 1.12fr); column-gap: 12px; } .messaging-header { padding: 0 0 7px; border-bottom: 1px solid rgb(38 32 47 / 28%); } .messaging-row { padding: 8px 0 9px; border-bottom: 1px solid rgb(38 32 47 / 18%); } .messaging-row > strong, .messaging-row > p, .messaging-header > * { min-width: 0; line-height: 20px; } .messaging-row > p { margin: 0; overflow-wrap: anywhere; } .messaging-header > * { white-space: nowrap; overflow-wrap: normal; word-break: keep-all; } .compact-messaging-table .messaging-row { grid-template-columns: 104px minmax(0, 1fr); column-gap: 12px; } .compact-messaging-table .messaging-row > strong { white-space: nowrap; overflow-wrap: normal; word-break: keep-all; } .value-grid { width: 100%; } .value-header, .value-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; } .value-header { padding-bottom: 7px; border-bottom: 1px solid rgb(38 32 47 / 28%); } .value-header > *, .value-row p { min-width: 0; } .value-header > * { white-space: nowrap; overflow-wrap: normal; word-break: keep-all; } .value-row { border-bottom: 1px solid rgb(38 32 47 / 18%); } .value-row p { padding: 8px 0 9px; line-height: 20px; overflow-wrap: anywhere; } .product-table { width: 100%; } .product-header, .product-row { display: grid; grid-template-columns: 126px minmax(0, 1.08fr) minmax(0, 1.18fr); column-gap: 12px; } .product-header { padding: 0 0 7px; border-bottom: 1px solid rgb(38 32 47 / 28%); } .product-header > * { min-width: 0; white-space: nowrap; overflow-wrap: normal; word-break: keep-all; } .product-row { align-items: start; padding: 8px 0 9px; border-bottom: 1px solid rgb(38 32 47 / 18%); } .product-row > strong, .product-row p { min-width: 0; margin: 0; line-height: 20px; overflow-wrap: anywhere; } .longevity-table .product-header, .longevity-table .product-row { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.04fr) minmax(0, 2.22fr); column-gap: 10px; } .ev-signal-table .product-header, .ev-signal-table .product-row { grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.14fr) minmax(0, 2fr); column-gap: 10px; } .ev-source-table .product-header, .ev-source-table .product-row { grid-template-columns: minmax(0, 1.05fr) minmax(0, 2.1fr) minmax(0, 0.8fr); column-gap: 10px; } .agent-workflow-table .compare-header, .agent-workflow-table .compare-row { grid-template-columns: 210px minmax(0, 1fr); column-gap: 10px; } .terminal-answer .pain-list { margin: 0 0 18px; padding-left: 22px; } .terminal-answer .pain-list li { margin-bottom: 12px; padding-left: 2px; line-height: 20px; } .terminal-answer .pain-list li::marker { color: inherit; font-weight: 500; } .claude-table { width: 100%; } .claude-header, .claude-row { display: grid; grid-template-columns: 62px minmax(0, 1.02fr) minmax(0, 1.18fr) minmax(120px, 0.7fr); column-gap: 8px; } .claude-header { padding: 0 0 7px; border-bottom: 1px solid rgb(38 32 47 / 28%); } .claude-header > * { min-width: 0; white-space: nowrap; overflow-wrap: normal; word-break: keep-all; } .claude-row { align-items: start; padding: 8px 0 9px; border-bottom: 1px solid rgb(38 32 47 / 18%); line-height: 20px; } .claude-row > span { display: flex; align-items: center; min-height: 20px; } .claude-row p, .claude-row > strong { min-width: 0; margin: 0; line-height: 20px; overflow-wrap: anywhere; word-break: normal; } .terminal-answer .pattern-list { margin: 0 0 18px; padding-left: 22px; } .terminal-answer .pattern-list li { margin-bottom: 8px; padding-left: 2px; line-height: 20px; } .terminal-answer .pattern-list li::marker { color: inherit; font-weight: 500; } .content-table { width: 100%; } .content-header, .content-row { display: grid; grid-template-columns: 0.98fr 1.62fr 0.9fr; column-gap: 10px; } .content-header { padding-bottom: 7px; border-bottom: 1px solid #e5e7eb; } .content-row { align-items: start; padding: 8px 0 9px; border-bottom: 1px solid #ececef; line-height: 19px; } .content-row p, .content-row > strong { line-height: 19px; } .hn-list, .debate-list { margin: 0 0 16px; padding-left: 22px; } .hn-list li, .debate-list li { margin-bottom: 8px; padding-left: 2px; } .terminal-answer .debate-list, .terminal-answer .video-topic-list { margin: 0 0 18px; padding-left: 22px; } .terminal-answer .debate-list li, .terminal-answer .video-topic-list li { margin-bottom: 8px; padding-left: 2px; line-height: 20px; } .terminal-answer .debate-list li::marker, .terminal-answer .video-topic-list li::marker { color: inherit; font-weight: 500; } .response > p:not(.answer-intro) { margin-bottom: 14px; line-height: 20px; } .response [data-reveal] { opacity: 0; transform: translateY(4px); transition: opacity 180ms ease, transform 180ms ease; } .response [data-reveal].revealed { opacity: 1; transform: translateY(0); } .agent-input { position: relative; z-index: 2; height: 56px; flex: 0 0 56px; padding: 0 24px; background: #fff; border-top: 1px solid #ececef; } .input-shell { position: relative; height: 55px; display: flex; align-items: center; gap: 6px; border: 0; border-radius: 0; background: #fff; } .reply-label { position: static; color: #aeaeae; font-family: "Geist Mono", "SFMono-Regular", Consolas, monospace; font-size: 14px; font-weight: 500; line-height: 18px; } .input-arrow { width: 12px; height: 12px; flex: 0 0 12px; fill: #6b7280; stroke: #6b7280; stroke-width: 1.8; } @media (max-width: 700px), (max-height: 620px) { .stage { padding: 16px; } .agent-window { transform: scale(min(calc((100vw - 32px) / 634), calc((100vh - 32px) / 558))); } .debug-controls { width: min(960px, calc(100vw - 32px)); } } @media (prefers-reduced-motion: reduce) { .prompt.show, .conversation.fade-out, .conversation.scrolling { transition-duration: 1ms; } }