/* ============ Envixin — dark + Stripe design system ============ */ :root{ --bg:#08090D; --bg2:#0C0E14; --surface:#12141C; --surface2:#171A23; --line:#232733; --line2:#2E3341; --indigo:#635BFF; --indigo2:#8079FF; --cyan:#22D3EE; --blue:#0052FF; --gold:#E8C46A; --goldDim:#8A7530; /* --fg3 was #667085 = 4.00:1 on bg and 3.69:1 on cards, below the 4.5:1 minimum. Lightened so help text and prices are actually readable. */ --fg:#F2F4F8; --fg2:#98A2B3; --fg3:#7D8798; --green:#3DDC97; --red:#FF6B7A; --amber:#F5B544; --sh:0 1px 2px rgba(0,0,0,.4),0 10px 30px -12px rgba(0,0,0,.7); --shh:0 4px 10px rgba(0,0,0,.4),0 24px 54px -16px rgba(0,0,0,.8); --glow:0 0 0 1px rgba(99,91,255,.18),0 12px 40px -12px rgba(99,91,255,.35); } *{box-sizing:border-box;margin:0;padding:0} /* overflow-x lives on , NOT . Putting it on body makes body the scroll container, which stops window/anchor scrolling and breaks in-page jumps like the Pricing link. Keep the viewport as the scroller. scroll-behavior stays auto. Smooth is the prettier effect, but an animated scroll can be cancelled part-way — background tab, throttled renderer — and then the section never arrives, which reads as a dead nav button. jump() sets the exact position in one synchronous assignment instead, so a nav click always lands on the section, every time, on every machine. */ html{scroll-behavior:auto;overflow-x:hidden} /* Keyboard focus must always be visible. Never set outline:none without this. */ :focus-visible{outline:2px solid var(--indigo2);outline-offset:2px;border-radius:4px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} body{background:var(--bg);color:var(--fg);font:16px/1.62 Inter,system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased;letter-spacing:-.011em} .mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums} button{font:inherit;cursor:pointer;border:0;background:none;color:inherit} a{color:var(--indigo2);text-decoration:none} img{max-width:100%;display:block} input,textarea,select{font:inherit;color:var(--fg);width:100%;background:var(--bg2); border:1px solid var(--line2);border-radius:9px;padding:12px 14px;transition:.15s} input::placeholder,textarea::placeholder{color:var(--fg3)} input:focus,textarea:focus,select:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px rgba(99,91,255,.18)} .wrap{max-width:1120px;margin:0 auto;padding:0 24px} .wrap-sm{max-width:520px;margin:0 auto;padding:0 24px} /* ---- buttons ---- */ .btn{background:linear-gradient(135deg,var(--indigo),#4F46E5);color:#fff;font-weight:600;font-size:15px; line-height:24px;padding:12px 22px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;gap:8px; transition:.18s;box-shadow:0 2px 8px -2px rgba(99,91,255,.5)} .btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px -8px rgba(99,91,255,.7)} .btn.gold{background:linear-gradient(135deg,var(--gold),#C9A63F);color:#181307;box-shadow:0 2px 8px -2px rgba(232,196,106,.4)} .btn.gold:hover{box-shadow:0 10px 26px -8px rgba(232,196,106,.55)} .btn.line{background:none;border:1px solid var(--line2);color:var(--fg);box-shadow:none} .btn.line:hover{border-color:var(--indigo);color:var(--indigo2);background:none;box-shadow:none} .btn.soft{background:rgba(99,91,255,.13);color:var(--indigo2);box-shadow:none} .btn.soft:hover{background:rgba(99,91,255,.2);box-shadow:none} .btn.white{background:#fff;color:#0A0B0F;box-shadow:0 2px 10px rgba(0,0,0,.3)} .btn.white:hover{box-shadow:0 10px 26px -8px rgba(255,255,255,.3)} .btn.danger{background:none;border:1px solid rgba(255,107,122,.4);color:var(--red);box-shadow:none} .btn.sm{padding:9px 16px;font-size:14px} .btn.lg{padding:15px 30px;font-size:16.5px} .btn.full{display:flex;width:100%} .btn:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none} .arw{transition:.2s}.btn:hover .arw{transform:translateX(3px)} /* ---- nav ---- */ .navbar{position:sticky;top:0;z-index:40;background:rgba(8,9,13,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} nav{display:flex;align-items:center;gap:28px;max-width:1120px;margin:0 auto;padding:14px 24px} .logo{width:31px;height:31px;border-radius:9px;background:linear-gradient(135deg,var(--indigo),var(--cyan)); display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px} .brand{font-size:16.5px;font-weight:700;letter-spacing:-.025em;color:var(--fg)} nav a.nl{color:var(--fg2);font-size:14.5px;font-weight:500;transition:.15s} nav a.nl:hover,nav a.nl.on{color:var(--fg)} .navr{margin-left:auto;display:flex;gap:10px;align-items:center} nav a.nl{white-space:nowrap} /* Secondary nav links drop out before the bar can wrap onto a second line. They stay in the DOM so the mobile drawer still lists them. */ @media(max-width:1400px){nav a.nl2{display:none}} @media(max-width:1120px){nav a.nl{display:none}} @media(max-width:860px){.hidem{display:none}} /* ---- mobile drawer (public nav + app shell) ---- */ .burger{display:none;width:42px;height:42px;flex:0 0 42px;border:1px solid var(--line2);border-radius:11px; align-items:center;justify-content:center;flex-direction:column;gap:4px;background:var(--surface)} .burger i{display:block;width:17px;height:2px;background:var(--fg);border-radius:2px;transition:.2s} .drawer{position:fixed;inset:0;z-index:80;display:none} .drawer.on{display:block} .drawer .scrim{position:absolute;inset:0;background:rgba(4,5,8,.72);backdrop-filter:blur(4px)} .drawer .sheetx{position:absolute;top:0;right:0;bottom:0;width:min(320px,86vw);background:var(--bg2); border-left:1px solid var(--line2);padding:18px 16px calc(18px + env(safe-area-inset-bottom)); overflow-y:auto;display:flex;flex-direction:column;gap:4px;box-shadow:-20px 0 60px rgba(0,0,0,.6)} .drawer .dhead{display:flex;align-items:center;gap:10px;padding:2px 4px 14px;border-bottom:1px solid var(--line);margin-bottom:10px} .drawer .dhead .x{margin-left:auto;width:38px;height:38px;border-radius:10px;border:1px solid var(--line2); color:var(--fg2);font-size:19px;display:grid;place-items:center} .drawer a,.drawer button.ditem{display:flex;align-items:center;gap:10px;padding:14px 12px;border-radius:10px; color:var(--fg);font-size:15.5px;font-weight:500;text-align:left;width:100%;background:none;border:0} .drawer a:active,.drawer button.ditem:active{background:var(--surface)} .drawer .dsec{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg3);font-weight:700;padding:16px 12px 6px} .drawer .dcta{margin-top:14px;display:grid;gap:9px} @media(max-width:860px){ .burger{display:flex} nav{gap:12px;padding:12px 16px} .wrap,.wrap-sm{padding:0 18px} section{padding:56px 0} h1{font-size:clamp(30px,8.6vw,40px)} h2{font-size:clamp(24px,6.6vw,30px)} .sub{font-size:15.5px;margin-bottom:30px} .lede{font-size:16px} /* comfortable touch targets */ .btn{padding:14px 22px;font-size:15.5px} .btn.sm{padding:11px 16px} .btn.lg{padding:16px 24px;font-size:16px} .plan,.card{padding:22px} .pr{font-size:38px} .modal{padding:22px 20px;border-radius:16px;max-height:94vh} .modal h3{font-size:21px} .brokopt,.paybtn{padding:14px 13px} input,textarea,select{padding:14px;font-size:16px} /* 16px stops iOS zoom-on-focus */ label{margin:16px 0 7px} .tourBtn{left:12px;bottom:12px;padding:10px 15px;font-size:12.5px} .chatBtn{right:12px;bottom:12px;width:50px;height:50px} .chatPanel{right:10px;left:10px;bottom:72px;width:auto;height:min(70vh,460px)} .tip{max-width:min(320px,calc(100vw - 28px))} table{font-size:13.5px} th,td{padding:11px 12px} .fgrid{grid-template-columns:1fr 1fr;gap:22px} } @media(max-width:520px){ .fgrid{grid-template-columns:1fr} .statg{grid-template-columns:1fr 1fr;gap:12px} .stat{padding:16px} .stat .v{font-size:23px} .tblhead{flex-wrap:wrap;gap:10px} .tblhead .r{margin-left:0;width:100%} .g4{grid-template-columns:1fr} } /* ---- gradient hero ---- */ .heroWrap{position:relative;overflow:hidden} .grad{position:absolute;top:-300px;left:-10%;right:-10%;height:900px;transform:skewY(-9deg);z-index:0; background:linear-gradient(105deg,#0A0B12 0%,#161B3A 20%,#3B2FA8 44%,#635BFF 60%,#0052FF 76%,#0E7490 100%);opacity:.92} .grad:after{content:"";position:absolute;inset:0;background: radial-gradient(560px 320px at 20% 72%,rgba(34,211,238,.35),transparent 66%), radial-gradient(480px 280px at 80% 26%,rgba(232,196,106,.2),transparent 64%)} .grad:before{content:"";position:absolute;inset:0; background:linear-gradient(to bottom,transparent 55%,rgba(8,9,13,.55) 82%,var(--bg) 100%);z-index:2} /* ---- typography ---- */ h1{font-size:clamp(38px,5.3vw,62px);line-height:1.04;font-weight:800;letter-spacing:-.036em;margin-bottom:20px} h1 em{font-style:normal;background:linear-gradient(100deg,#fff,#A5F3FC 50%,var(--gold)); -webkit-background-clip:text;background-clip:text;color:transparent} h2{font-size:clamp(28px,3.6vw,42px);line-height:1.1;font-weight:800;letter-spacing:-.033em;margin-bottom:14px} h2 em{font-style:normal;color:var(--indigo2)} h3{font-size:21px;font-weight:700;letter-spacing:-.025em} .kicker{display:inline-block;font-size:13px;font-weight:700;color:var(--indigo2);margin-bottom:14px} .kicker.gold{color:var(--gold)} .sub{color:var(--fg2);max-width:60ch;margin-bottom:44px;font-size:17px} .lede{color:rgba(255,255,255,.84);font-size:18px;max-width:47ch;margin-bottom:28px} /* ---- sections ---- */ section{padding:84px 0} section.alt{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} /* Reveal-on-scroll NEVER hides anything. Content is visible from the first paint; scrolling a section into view only plays a short entrance animation on top of that. This has blanked the site twice before — once when a renderer threw and once when the observer never fired in a background tab — so hiding-until-JS-says-otherwise is not a pattern we use any more. */ .rev{opacity:1} html.anim .rev.in{animation:revIn .6s cubic-bezier(.2,.7,.3,1) both} @keyframes revIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){html.anim .rev.in{animation:none}} @media(prefers-reduced-motion:reduce){.rev{opacity:1;transform:none}} /* ---- cards ---- */ .g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px} .g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px} .g4{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px} .card{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:26px;box-shadow:var(--sh);transition:.25s} .card:hover{border-color:var(--line2);box-shadow:var(--shh);transform:translateY(-3px)} .card .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:18px;color:#fff;margin-bottom:16px} .card h4{font-size:17.5px;font-weight:700;margin-bottom:6px;letter-spacing:-.02em} .card p{color:var(--fg2);font-size:14.5px} .card .status{margin-top:14px;font-size:12px;font-weight:600;color:var(--green)} /* ---- pill / badges ---- */ .tagp{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(6px);color:#fff;border-radius:99px;padding:6px 14px;font-size:12.5px;font-weight:600;margin-bottom:22px} .dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 1.8s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(61,220,151,.5)}50%{opacity:.6;box-shadow:0 0 0 7px rgba(61,220,151,0)}} @media(prefers-reduced-motion:reduce){.dot{animation:none}} .badge{font-size:11px;font-weight:600;padding:3px 10px;border-radius:99px;background:rgba(99,91,255,.15);color:var(--indigo2)} .badge.g{background:rgba(61,220,151,.13);color:var(--green)} .badge.a{background:rgba(245,181,68,.13);color:var(--amber)} .badge.r{background:rgba(255,107,122,.13);color:var(--red)} .badge.gold{background:rgba(232,196,106,.13);color:var(--gold)} /* ---- market strip ---- */ .mstrip{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shh);overflow:hidden; margin-top:-40px;position:relative;z-index:3} .mrow{display:grid;grid-template-columns:1.6fr 1fr 1fr 92px;gap:12px;align-items:center;padding:15px 22px;border-bottom:1px solid var(--line)} .mrow:last-child{border:0} .mrow.head{background:var(--bg2);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg3);font-weight:700;padding:11px 22px} .masset{display:flex;align-items:center;gap:12px} .mico{width:33px;height:33px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:700;color:#fff} .mname{font-weight:600;font-size:15px} .msym{font-size:12.5px;color:var(--fg3)} .mup{color:var(--green);font-weight:600}.mdn{color:var(--red);font-weight:600} @media(max-width:700px){.mrow{grid-template-columns:1.4fr 1fr 84px}.mhide{display:none}} /* ---- steps rail ---- */ .rail{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:22px} .rail:before{content:"";position:absolute;top:20px;left:6%;right:6%;height:2px; background:linear-gradient(90deg,var(--indigo),var(--cyan),var(--gold));opacity:.35} @media(max-width:760px){.rail:before{display:none}} .stp{position:relative} .stp .num{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--indigo),#4F46E5);color:#fff; display:grid;place-items:center;font-weight:700;font-size:15px;margin-bottom:16px;box-shadow:0 0 0 6px var(--bg)} section.alt .stp .num{box-shadow:0 0 0 6px var(--bg2)} .stp h4{font-size:17px;font-weight:700;margin-bottom:6px;letter-spacing:-.02em} .stp p{color:var(--fg2);font-size:14.5px} /* ---- video ---- */ .vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px} .vcard{position:relative;border-radius:15px;overflow:hidden;border:1px solid var(--line);background:var(--surface); box-shadow:var(--sh);transition:.25s;cursor:pointer} .vcard:hover{box-shadow:var(--shh);transform:translateY(-3px)} .vthumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg2)} .vthumb img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.05)} .vthumb:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,9,13,.85),transparent 55%)} .vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%; background:rgba(255,255,255,.94);display:grid;place-items:center;z-index:2;transition:.2s; box-shadow:0 8px 26px rgba(0,0,0,.45)} .vcard:hover .vplay{transform:translate(-50%,-50%) scale(1.08)} .vplay:after{content:"";border-left:15px solid #0A0B0F;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px} .vlen{position:absolute;right:10px;bottom:10px;z-index:2;background:rgba(0,0,0,.7);color:#fff; font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:5px} .vmeta{padding:16px 18px} .vmeta h4{font-size:15.5px;font-weight:700;margin-bottom:4px;letter-spacing:-.02em} .vmeta p{color:var(--fg2);font-size:13.5px} .vwho{display:flex;align-items:center;gap:9px;margin-top:12px} .vwho img{width:28px;height:28px;border-radius:50%;object-fit:cover} .vwho span{font-size:12.5px;color:var(--fg3)} /* ---- pricing ---- */ .plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(274px,1fr));gap:20px} .plan{background:var(--surface);border:1px solid var(--line);border-radius:17px;padding:30px;position:relative; display:flex;flex-direction:column;box-shadow:var(--sh);transition:.25s} .plan:hover{box-shadow:var(--shh);transform:translateY(-3px)} .plan.hi{border-color:var(--indigo);box-shadow:var(--glow)} .tagx{position:absolute;top:-12px;left:30px;background:linear-gradient(135deg,var(--indigo),#4F46E5);color:#fff; font-size:11px;font-weight:700;padding:5px 13px;border-radius:99px} .plan h3{font-size:20px;margin-bottom:5px} .plan .d{color:var(--fg2);font-size:14px;min-height:44px} .pr{font-size:44px;font-weight:800;letter-spacing:-.04em;margin:18px 0 0;line-height:1} .pr small{font-size:15px;color:var(--fg3);font-weight:500;letter-spacing:0} .pr .was{font-size:17px;color:var(--fg3);text-decoration:line-through;margin-left:10px;font-weight:500;letter-spacing:0} .plan ul{list-style:none;margin:20px 0 24px;font-size:14.5px;color:var(--fg2);flex:1} .plan li{padding:7px 0 7px 27px;position:relative} .plan li:before{content:"";position:absolute;left:0;top:13px;width:17px;height:17px;border-radius:50%;background:rgba(61,220,151,.13)} .plan li:after{content:"✓";position:absolute;left:5px;top:7px;color:var(--green);font-size:10px;font-weight:800} /* ---- faq ---- */ .faqwrap{display:grid;grid-template-columns:320px 1fr;gap:56px;align-items:start} @media(max-width:860px){.faqwrap{grid-template-columns:1fr;gap:30px}} .faqside{position:sticky;top:96px} .pair{display:grid;gap:11px;margin-top:18px} .pair div{padding:14px;border:1px solid var(--line);border-radius:11px;background:var(--bg2);font-size:13.5px;color:var(--fg2)} .pair b{display:block;font-weight:700;font-size:14px;margin-bottom:3px;color:var(--fg)} .pair .yes{color:var(--green);font-weight:600}.pair .no{color:var(--red);font-weight:600} .qgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 44px} @media(max-width:700px){.qgrid{grid-template-columns:1fr}} .q{border-bottom:1px solid var(--line)} .q>button{width:100%;text-align:left;padding:18px 0;font-size:15.5px;font-weight:600;display:flex; justify-content:space-between;gap:14px;align-items:flex-start;line-height:1.4} .q>button span{color:var(--indigo2);flex:0 0 auto;transition:.2s;font-size:19px;font-weight:400} .q.open>button span{transform:rotate(45deg)} .q .a{display:none;padding:0 0 18px;color:var(--fg2);font-size:14.5px} .q.open .a{display:block} /* ---- modal ---- */ .mask{position:fixed;inset:0;background:rgba(4,5,8,.82);backdrop-filter:blur(5px);display:none; align-items:center;justify-content:center;padding:20px;z-index:60} .mask.on{display:flex} .modal{background:var(--surface);border:1px solid var(--line2);border-radius:19px;width:100%;max-width:490px; max-height:92vh;overflow:auto;padding:30px;box-shadow:0 40px 100px rgba(0,0,0,.7)} .modal.wide{max-width:840px} .modal h3{font-size:25px;font-weight:800;letter-spacing:-.03em;margin-bottom:7px} .mlede{color:var(--fg2);font-size:14.5px;margin-bottom:20px} div.line{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px} div.line:last-of-type{border:0}div.line span{color:var(--fg2)}div.line b{font-weight:600} label{display:block;font-size:13px;font-weight:600;color:var(--fg);margin:18px 0 7px} .slide{min-height:206px} .snum{font-size:12.5px;font-weight:700;color:var(--indigo2);margin-bottom:12px} .slide h4{font-size:26px;font-weight:800;letter-spacing:-.03em;margin-bottom:9px} .slide p{color:var(--fg2);font-size:15px;max-width:44ch} .slide .vis{padding:16px;border:1px solid var(--line);border-radius:11px;background:var(--bg2);margin-top:18px; color:var(--fg2);font-size:13px;text-align:center;font-weight:500} .dots{display:flex;gap:6px;justify-content:center;margin:22px 0 18px} .dots i{width:7px;height:7px;border-radius:50%;background:var(--line2);transition:.2s} .dots i.on{background:var(--indigo);width:21px;border-radius:4px} .paybtn{display:flex;align-items:center;gap:13px;border:1px solid var(--line2);border-radius:11px;padding:14px 15px; width:100%;text-align:left;margin-bottom:9px;transition:.15s} .paybtn:hover{border-color:var(--indigo);background:rgba(99,91,255,.06)} .paybtn b{font-weight:600;display:block;font-size:15px} .paybtn s{text-decoration:none;color:var(--fg3);font-size:12.5px} .paybtn .ic{width:38px;height:38px;border-radius:10px;background:var(--bg2);border:1px solid var(--line); display:grid;place-items:center;color:var(--indigo2);font-weight:700} .addr{background:var(--bg2);border:1px dashed var(--line2);border-radius:9px;padding:13px;font-size:12.5px; word-break:break-all;color:var(--gold);margin-top:8px} .secure{font-size:13.5px;color:var(--fg2);margin-top:16px;padding:14px 16px;background:rgba(99,91,255,.07); border-left:3px solid var(--indigo);border-radius:0 9px 9px 0} .secure b{color:var(--fg)} .simstep{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);opacity:.32;transition:.45s} .simstep:last-child{border:0}.simstep.on{opacity:1} .simstep .ix{width:27px;height:27px;flex:0 0 27px;border-radius:50%;border:1.5px solid var(--line2); display:grid;place-items:center;font-size:11.5px;font-weight:700;color:var(--fg3);transition:.3s} .simstep.on .ix{border-color:var(--indigo);color:var(--indigo2)} .simstep.done .ix{background:var(--green);border-color:var(--green);color:#062B1B} .simstep b{font-weight:700;font-size:15px;display:block} .simstep p{color:var(--fg2);font-size:13.5px;margin-top:2px} .prog{display:flex;gap:5px;margin-bottom:22px} .prog i{flex:1;height:4px;border-radius:4px;background:var(--line)} .prog i.on{background:var(--indigo)} .brokopt{display:flex;align-items:center;gap:12px;border:1px solid var(--line2);border-radius:11px;padding:15px; width:100%;text-align:left;margin-bottom:9px;transition:.15s} .brokopt:hover,.brokopt.sel{border-color:var(--indigo);background:rgba(99,91,255,.07)} .brokopt b{display:block;font-weight:600} .brokopt s{text-decoration:none;color:var(--fg3);font-size:13px} .copybox{display:flex;gap:10px;align-items:center;background:var(--bg2);border:1px solid var(--line2); border-radius:9px;padding:11px 13px;margin-top:8px} .copybox code{flex:1;color:var(--gold);font-family:'JetBrains Mono',monospace;font-size:13.5px;font-weight:600} /* ---- guided tour ---- */ .tourBtn{position:fixed;left:18px;bottom:18px;z-index:35;background:var(--surface2);border:1px solid var(--line2); border-radius:99px;padding:11px 19px;font-size:13.5px;font-weight:600;color:var(--fg2);box-shadow:var(--sh)} .tourBtn:hover{color:var(--fg);border-color:var(--indigo)} .spot{position:fixed;border-radius:14px;box-shadow:0 0 0 9999px rgba(4,5,8,.82);z-index:70;pointer-events:none; transition:.4s cubic-bezier(.2,.7,.3,1);border:2px solid var(--indigo)} .tip{position:fixed;z-index:71;background:var(--surface);border:1px solid var(--line2);border-radius:14px; padding:18px 20px;max-width:320px;box-shadow:var(--shh);transition:.4s cubic-bezier(.2,.7,.3,1)} .tip h5{font-size:15.5px;font-weight:700;margin-bottom:6px} .tip p{color:var(--fg2);font-size:13.5px;margin-bottom:14px} .tip .row{display:flex;gap:8px;align-items:center} .tip .cnt{margin-left:auto;font-size:12px;color:var(--fg3)} /* ---- footer ---- */ footer{background:var(--bg2);border-top:1px solid var(--line);padding:56px 0 32px} .fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;margin-bottom:36px} @media(max-width:760px){.fgrid{grid-template-columns:1fr 1fr;gap:26px}} .fgrid h5{font-size:13px;font-weight:700;margin-bottom:12px;color:var(--fg)} .fgrid a{display:block;color:var(--fg2);font-size:14px;padding:4px 0} .fgrid a:hover{color:var(--indigo2)} .fbot{border-top:1px solid var(--line);padding-top:22px;color:var(--fg3);font-size:13px} /* ---- toast ---- */ .toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(70px);background:var(--surface2); border:1px solid var(--line2);color:var(--fg);border-radius:11px;padding:13px 20px;font-size:14.5px;opacity:0; transition:.3s;z-index:90;box-shadow:var(--shh)} .toast.on{opacity:1;transform:translateX(-50%)} /* ---- app shell (dashboard/admin) ---- */ .shell{display:grid;grid-template-columns:236px 1fr;min-height:100vh} @media(max-width:900px){ .shell{grid-template-columns:1fr} .side{display:none} .tophead{padding:14px 16px;gap:10px;flex-wrap:wrap} .tophead h1{font-size:18.5px;flex:1;min-width:0} .tophead .r{margin-left:0;gap:8px;flex-wrap:wrap;width:100%;justify-content:flex-start} .tophead .r .btn{flex:1;min-width:132px} .tophead .r .burger{flex:0 0 42px;min-width:42px;order:-1;margin-left:auto} .pad{padding:18px 16px calc(18px + env(safe-area-inset-bottom))} } .side{background:var(--bg2);border-right:1px solid var(--line);padding:20px 14px;position:sticky;top:0;height:100vh;overflow-y:auto} .side .brandrow{display:flex;align-items:center;gap:10px;padding:4px 8px 22px} .side a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;color:var(--fg2); font-size:14.5px;font-weight:500;margin-bottom:2px;transition:.15s} .side a:hover{background:var(--surface);color:var(--fg)} .side a.on{background:rgba(99,91,255,.13);color:var(--indigo2)} .side .sec{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg3);font-weight:700;padding:18px 12px 8px} /* A grid item defaults to min-width:auto, so it refuses to shrink below its content and pushes the whole page wider. This is what breaks app-shell pages on phones — never remove it. */ .main{padding:0;min-width:0} .tophead{display:flex;align-items:center;gap:16px;padding:18px 28px;border-bottom:1px solid var(--line); background:rgba(8,9,13,.8);backdrop-filter:blur(12px);position:sticky;top:0;z-index:20} .tophead h1{font-size:21px;font-weight:700;letter-spacing:-.025em;margin:0} .tophead .r{margin-left:auto;display:flex;gap:10px;align-items:center} .pad{padding:28px} .statg{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:22px} .stat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px} .stat .k{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg3);font-weight:700} .stat .v{font-size:27px;font-weight:800;letter-spacing:-.03em;margin-top:6px} .stat .c{font-size:13px;margin-top:4px;color:var(--fg2)} table{width:100%;border-collapse:collapse} th{text-align:left;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--fg3); font-weight:700;padding:12px 16px;background:var(--bg2);border-bottom:1px solid var(--line)} td{padding:14px 16px;border-bottom:1px solid var(--line);font-size:14px} tr:last-child td{border:0} tbody tr:hover{background:var(--bg2)} /* min-width:0 for the same reason as .main — these sit inside grids and would otherwise refuse to shrink, letting a wide table push the whole page sideways. The table still scrolls inside its own overflow-x:auto wrapper. */ .tblwrap{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--sh);min-width:0} .card{min-width:0} .tblhead{display:flex;align-items:center;padding:18px 16px;border-bottom:1px solid var(--line)} .tblhead h3{font-size:16.5px} .tblhead .r{margin-left:auto;display:flex;gap:9px} /* ---- auth pages ---- */ .authwrap{display:grid;grid-template-columns:1fr 1fr;min-height:100vh} @media(max-width:900px){.authwrap{grid-template-columns:1fr}.authart{display:none}} .authart{position:relative;overflow:hidden;background:linear-gradient(150deg,#0A0B12,#2B2394 55%,#0E7490); display:flex;flex-direction:column;justify-content:center;padding:48px;gap:0} .authart:after{content:"";position:absolute;top:-20%;right:-20%;width:640px;height:640px;border-radius:50%; background:radial-gradient(circle,rgba(34,211,238,.32),transparent 62%)} .authart .q,.authart .robowrap{position:relative;z-index:1;border:0} .authart blockquote{font-size:22px;line-height:1.4;font-weight:600;letter-spacing:-.02em;color:#fff;margin-bottom:18px} .authart .who{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.75);font-size:14px} .authart .who img{width:40px;height:40px;border-radius:50%;object-fit:cover} .authform{display:flex;align-items:center;justify-content:center;padding:40px 24px} .authbox{width:100%;max-width:400px} .authbox h1{font-size:31px;margin-bottom:8px} .authbox .sub{font-size:15px;margin-bottom:26px} .divider{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--fg3);font-size:13px} .divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--line)} .oauth{display:flex;gap:10px;margin-bottom:4px} .oauth button{flex:1;border:1px solid var(--line2);border-radius:9px;padding:11px;font-size:14px; font-weight:500;color:var(--fg2);transition:.15s} .oauth button:hover{border-color:var(--fg3);color:var(--fg)} /* ---- phone sim widgets (index hero + dashboard) ---- */ .chip{font-size:10.5px;font-weight:700;letter-spacing:.08em;padding:4px 10px;border-radius:99px; border:1px solid var(--line2);color:var(--fg3);transition:.25s} .chip.on{border-color:var(--green);color:var(--green);background:rgba(61,220,151,.09)} .win{background:#0E1119;border:1px solid var(--line);border-radius:13px;overflow:hidden} .winh{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line)} .winh .l{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg3);font-weight:700} .winh .r{font-size:10.5px;color:var(--fg2)} .winb{padding:12px} .pbtn{flex:1;border:1px solid var(--line2);border-radius:10px;padding:10px 0;font-size:13px;font-weight:600; color:var(--fg);transition:.15s;background:var(--surface)} .pbtn:hover{border-color:var(--indigo)} .pbtn.on{border-color:var(--amber);color:var(--amber)} .pbtn.stop{color:var(--red)} .kebab{flex:0 0 40px;border:1px solid var(--line2);border-radius:10px;font-size:16px;color:var(--fg2);background:var(--surface)} .sheet{position:absolute;left:0;right:0;bottom:0;background:var(--surface2);border-top:1px solid var(--line2); border-radius:20px 20px 0 0;padding:8px 14px 16px;transform:translateY(105%);transition:.3s;z-index:6} .sheet.on{transform:none} .sheet .grip{width:38px;height:4px;border-radius:4px;background:var(--line2);margin:4px auto 10px} .sitem{display:flex;justify-content:space-between;align-items:center;padding:12px 4px;border-bottom:1px solid var(--line); font-size:13.5px;font-weight:600;cursor:pointer} .sitem:last-child{border:0} .sitem.red{color:var(--red)} .sitem small{display:block;font-weight:400;font-size:11px;color:var(--fg3)} .pnote{position:absolute;left:10px;right:10px;bottom:74px;background:var(--surface2);border:1px solid var(--line2); border-radius:11px;padding:11px 13px;font-size:11.5px;color:var(--fg2);opacity:0;pointer-events:none;transition:.3s;z-index:7} .pnote.on{opacity:1} .pnote b{display:block;color:var(--fg);font-size:12px;margin-bottom:2px} .trow{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line)} .trow:last-child{border:0} .tside{display:flex;gap:9px;align-items:center} .tbadge{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:6px} .tbadge.b{background:rgba(61,220,151,.14);color:var(--green)} .tbadge.s{background:rgba(255,107,122,.14);color:var(--red)} .tmeta{font-size:10px;color:var(--fg3)} .tempty{padding:20px;text-align:center;font-size:12px;color:var(--fg3)} /* ---- responsive page grids ---- These used to be set by a JS fit() function, which meant the layout broke whenever that function did not re-run. Pure CSS: nothing to go wrong. */ #heroGrid{grid-template-columns:1.04fr .96fr} #vidGrid{grid-template-columns:1.45fr .55fr} #designGrid,#proofNote{grid-template-columns:1fr 1fr} #instGrid{grid-template-columns:1.05fr .95fr} #appGrid{grid-template-columns:304px 1fr} #ibTop{grid-template-columns:1.15fr .85fr} @media(max-width:940px){#heroGrid{grid-template-columns:1fr}} @media(max-width:900px){#vidGrid,#designGrid,#instGrid{grid-template-columns:1fr}} @media(max-width:860px){#appGrid,#proofNote{grid-template-columns:1fr}} @media(max-width:820px){#ibTop{grid-template-columns:1fr}} /* app-shell pages */ #mainGrid{grid-template-columns:1.35fr .65fr} #botGrid,#extraGrid,#midGrid,#calcGrid,#applyGrid{grid-template-columns:1fr 1fr} @media(max-width:980px){#mainGrid{grid-template-columns:1fr}} @media(max-width:860px){#botGrid,#extraGrid,#midGrid,#calcGrid,#applyGrid{grid-template-columns:1fr}} /* ---- explained jargon term ---- */ .term{display:inline;padding:0;font:inherit;color:inherit;background:none;border:0; border-bottom:1px dashed var(--indigo2);cursor:help;text-align:left} .term:hover{color:var(--indigo2)} .termpop{position:fixed;z-index:95;background:var(--surface2);border:1px solid var(--line2); border-radius:12px;padding:14px 16px;box-shadow:var(--shh);opacity:0;pointer-events:none; transition:.18s;transform:translateY(4px)} .termpop.on{opacity:1;transform:none} .termpop b{display:block;font-size:14px;margin-bottom:5px} .termpop span{display:block;font-size:13.5px;color:var(--fg2);line-height:1.55} /* ---- "before you start" prerequisites ---- */ .prereq{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px} .prereq .step{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:22px;position:relative} .prereq .step .n{width:30px;height:30px;border-radius:50%;background:rgba(99,91,255,.14); color:var(--indigo2);display:grid;place-items:center;font-weight:700;font-size:14px;margin-bottom:12px} .prereq .step h4{font-size:16.5px;font-weight:700;margin-bottom:6px;letter-spacing:-.02em} .prereq .step p{color:var(--fg2);font-size:14px} /* ---- on/off switch (admin licence control) ---- */ .sw{position:relative;display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none} .sw input{position:absolute;opacity:0;width:0;height:0} .sw .track{width:44px;height:25px;border-radius:99px;background:var(--line2);transition:.2s;flex:0 0 44px; display:block;position:relative} .sw .track:after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%; background:var(--fg2);transition:.2s} .sw input:checked + .track{background:rgba(61,220,151,.35)} .sw input:checked + .track:after{transform:translateX(19px);background:var(--green)} .sw input:focus-visible + .track{outline:2px solid var(--indigo2);outline-offset:2px} .sw .lbl{font-size:13px;font-weight:600;color:var(--fg2);min-width:52px} .sw input:checked ~ .lbl{color:var(--green)} /* ---- demo data badge ---- */ .demoTag{display:inline-flex;align-items:center;gap:6px;background:rgba(245,181,68,.13); border:1px solid rgba(245,181,68,.3);color:var(--amber);border-radius:99px; padding:3px 10px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase} /* ---- schedule editor ---- */ .daychips{display:flex;gap:7px;flex-wrap:wrap} .daychip{border:1px solid var(--line2);border-radius:99px;padding:8px 14px;font-size:13.5px;font-weight:600; color:var(--fg2);transition:.15s} .daychip:hover{border-color:var(--indigo)} .daychip.on{background:rgba(99,91,255,.15);border-color:var(--indigo);color:var(--indigo2)} /* ---- tier progress (partner hub) ---- */ .tierbar{height:9px;border-radius:6px;background:var(--bg2);overflow:hidden;border:1px solid var(--line)} .tierbar i{display:block;height:100%;background:linear-gradient(90deg,var(--indigo),var(--cyan));border-radius:6px} /* ---- AI chat widget ---- */ .chatBtn{position:fixed;right:18px;bottom:18px;z-index:55;width:54px;height:54px;border-radius:50%; background:linear-gradient(135deg,var(--indigo),#4F46E5);color:#fff;font-size:22px;display:grid;place-items:center; box-shadow:0 10px 30px -8px rgba(99,91,255,.8);transition:.2s} .chatBtn:hover{transform:translateY(-2px)} .chatPanel{position:fixed;right:18px;bottom:84px;z-index:56;width:min(360px,calc(100vw - 36px));height:min(480px,70vh); background:var(--surface);border:1px solid var(--line2);border-radius:17px;box-shadow:var(--shh); display:none;flex-direction:column;overflow:hidden} .chatPanel.on{display:flex} .chatHead{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--bg2)} .chatHead b{font-size:14.5px} .chatHead .st{font-size:11.5px;color:var(--green);font-weight:600} .chatLog{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:9px} .cmsg{max-width:86%;padding:10px 13px;border-radius:13px;font-size:13.5px;line-height:1.5} .cmsg.bot{background:var(--bg2);border:1px solid var(--line);color:var(--fg);border-bottom-left-radius:4px;align-self:flex-start} .cmsg.me{background:linear-gradient(135deg,var(--indigo),#4F46E5);color:#fff;border-bottom-right-radius:4px;align-self:flex-end} .chatQuick{display:flex;gap:7px;flex-wrap:wrap;padding:0 14px 10px} .chatQuick button{border:1px solid var(--line2);border-radius:99px;padding:6px 12px;font-size:12px; color:var(--indigo2);transition:.15s} .chatQuick button:hover{border-color:var(--indigo);background:rgba(99,91,255,.08)} .chatIn{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line);background:var(--bg2)} .chatIn input{flex:1;padding:10px 13px;border-radius:99px} .chatIn button{flex:0 0 42px;height:42px;border-radius:50%;background:var(--indigo);color:#fff;font-size:16px} /* segmented billing-cycle control (subscribe page) */ .segwrap{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:4px;gap:4px} .seg{padding:9px 16px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--fg2);white-space:nowrap} .seg:hover{color:var(--fg)} .seg.on{background:var(--indigo);color:#fff} @media(max-width:520px){.segwrap{width:100%}.seg{flex:1;padding:9px 8px;font-size:12.5px}} /* ---------- month counter, hosting toggle, video theatre ---------- */ /* buy-by-the-month stepper inside the purchase modal */ .mcount{display:flex;align-items:center;gap:14px;background:var(--bg2);border:1px solid var(--line); border-radius:13px;padding:10px 14px;margin-top:4px} .mstep{width:40px;height:40px;flex:0 0 40px;border-radius:10px;border:1px solid var(--line2); background:var(--surface);font-size:22px;font-weight:600;color:var(--fg);display:grid;place-items:center} .mstep:hover:not(:disabled){background:var(--surface2);border-color:var(--indigo)} .mstep:disabled{opacity:.3;cursor:not-allowed} .mnum{flex:1;text-align:center} .mnum b{font-size:27px;font-weight:800;letter-spacing:-.03em;display:block;line-height:1.1} .mnum s{text-decoration:none;font-size:12.5px;color:var(--fg3)} .mquick{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap} .qbtn{flex:1;min-width:64px;padding:9px 6px;border-radius:9px;border:1px solid var(--line2); background:var(--surface);font-size:13px;font-weight:600;color:var(--fg2)} .qbtn:hover{color:var(--fg);border-color:var(--indigo)} .qbtn.on{background:var(--indigo);border-color:var(--indigo);color:#fff} .mbreak{margin-top:18px;background:var(--bg2);border:1px solid var(--line);border-radius:13px;padding:6px 14px} .mbreak .line:last-child{border-bottom:0} /* the "get it half price" nudge inside the modal */ .ibnudge{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin-top:14px; padding:14px 16px;border-radius:13px;border:1px solid rgba(232,196,106,.34); background:linear-gradient(100deg,rgba(232,196,106,.11),rgba(232,196,106,.03))} .ibnudge:hover{border-color:var(--gold)} .ibnudge b{display:block;font-size:14.5px;color:var(--gold)} .ibnudge s{text-decoration:none;display:block;font-size:12.5px;color:var(--fg2);margin-top:3px;line-height:1.5} .ibnudge .arw{color:var(--gold);flex:0 0 auto} /* hosting toggle that sits above the bot tiles */ .hostbar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap; background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:14px 18px;margin-bottom:22px} .hosttog{display:inline-flex;background:var(--bg2);border:1px solid var(--line2);border-radius:12px;padding:4px;gap:4px} .hosttog button{padding:10px 18px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--fg2);white-space:nowrap} .hosttog button:hover{color:var(--fg)} .hosttog button.on{background:var(--indigo);color:#fff;box-shadow:var(--sh)} .hostnote{font-size:13.5px;color:var(--fg2);min-width:0;flex:1} .hostnote b{color:var(--fg)} @media(max-width:640px){.hosttog{width:100%}.hosttog button{flex:1;padding:10px 8px;font-size:12.5px}} /* the big video that opens the site */ .theatre{border:1px solid var(--line2);border-radius:20px;overflow:hidden;background:var(--surface); box-shadow:0 50px 110px -30px rgba(0,0,0,.9);width:100%;display:block;text-align:left} .theatre .scr{position:relative;aspect-ratio:16/9;display:grid;place-items:center; background:linear-gradient(140deg,#0B0D18,#241E7A 58%,#0E5E74)} .theatre:hover .vplay{transform:scale(1.06)} .vstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);margin-top:1px} .vstrip button{background:var(--surface);padding:15px 16px;text-align:left;min-width:0} .vstrip button:hover{background:var(--surface2)} .vstrip b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.01em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .vstrip s{text-decoration:none;display:block;font-size:12px;color:var(--fg3);margin-top:3px} @media(max-width:820px){.vstrip{grid-template-columns:1fr 1fr}} @media(max-width:420px){.vstrip{grid-template-columns:1fr}} /* ---------- install guide modal ---------- */ .gtabs{display:inline-flex;background:var(--bg2);border:1px solid var(--line2);border-radius:12px; padding:4px;gap:4px;margin:14px 0 18px} .gtab{padding:9px 18px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--fg2);white-space:nowrap} .gtab:hover{color:var(--fg)} .gtab.on{background:var(--indigo);color:#fff} .gsteps{display:grid;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden} .gstep{display:flex;gap:14px;background:var(--surface);padding:18px 20px;align-items:flex-start} .gix{flex:0 0 30px;height:30px;border-radius:50%;background:var(--indigo);color:#fff;display:grid; place-items:center;font-size:13px;font-weight:700} .gstep b{font-size:15.5px;font-weight:700;letter-spacing:-.015em;display:block;margin-bottom:4px} .gstep p{font-size:13.5px;color:var(--fg2);line-height:1.58;margin-bottom:10px} .gvid{font-size:12.5px;font-weight:600;color:var(--indigo2);padding:6px 11px;border-radius:8px; border:1px solid var(--line2);background:var(--bg2)} .gvid:hover{border-color:var(--indigo);color:#fff} @media(max-width:600px){.gtabs{width:100%}.gtab{flex:1;padding:9px 6px;font-size:12.5px} .gstep{padding:15px 15px;gap:11px}} /* hero deploy rail — few guided steps and you are live */ .hsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:22px 0 26px} .hstep{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:13px; padding:14px 16px;backdrop-filter:blur(6px);min-width:0} .hstep i{font-style:normal;display:inline-grid;place-items:center;width:23px;height:23px;border-radius:50%; background:rgba(255,255,255,.9);color:#0B0D18;font-size:11.5px;font-weight:800;margin-bottom:9px} .hstep b{display:block;font-size:14px;font-weight:700;letter-spacing:-.015em} .hstep s{text-decoration:none;display:block;font-size:12.5px;color:rgba(255,255,255,.7);margin-top:3px;line-height:1.5} @media(max-width:860px){.hsteps{grid-template-columns:1fr 1fr}} @media(max-width:460px){.hsteps{grid-template-columns:1fr;gap:9px}.hstep{display:flex;align-items:center;gap:11px} .hstep i{margin:0;flex:0 0 23px}.hstep s{display:none}} /* ---------- "four things we cannot do" cards ---------- */ .safe{display:flex;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:16px; padding:22px 24px;align-items:flex-start;transition:border-color .18s,transform .18s} .safe:hover{border-color:var(--line2);transform:translateY(-2px)} .safeic{flex:0 0 46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:20px; background:rgba(61,220,151,.11);color:var(--green);border:1px solid rgba(61,220,151,.22)} .safe h4{font-size:16.5px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px} .safe p{font-size:14px;color:var(--fg2);line-height:1.6} .safewhy{display:flex;gap:8px;align-items:flex-start;margin-top:12px;padding-top:12px; border-top:1px solid var(--line);font-size:13px;color:var(--fg);font-weight:500} .safewhy span{flex:0 0 17px;height:17px;border-radius:50%;background:rgba(61,220,151,.16);color:var(--green); display:grid;place-items:center;font-size:10px;font-weight:800;margin-top:2px} @media(max-width:560px){.safe{padding:18px 18px;gap:13px}.safeic{flex:0 0 40px;height:40px;font-size:18px}} /* ---------- sign in / sign up switch and role picker ---------- */ .authtog{display:flex;background:var(--bg2);border:1px solid var(--line2);border-radius:12px; padding:4px;gap:4px;margin-bottom:26px} .authtog button{flex:1;padding:11px 8px;border-radius:9px;font-size:14px;font-weight:600;color:var(--fg2)} .authtog button:hover{color:var(--fg)} .authtog button.on{background:var(--indigo);color:#fff;box-shadow:var(--sh)} .roles{display:grid;gap:8px;margin-top:4px} .role{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 14px; border:1px solid var(--line2);border-radius:12px;background:var(--surface);transition:border-color .16s,background .16s} .role:hover{border-color:var(--indigo)} .role.sel{border-color:var(--indigo);background:rgba(99,91,255,.09)} .role .ric{flex:0 0 34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:15px; background:var(--surface2);color:var(--indigo2)} .role.sel .ric{background:var(--indigo);color:#fff} .role b{display:block;font-size:14.5px;font-weight:600} .role s{text-decoration:none;display:block;font-size:12.5px;color:var(--fg3);margin-top:2px;line-height:1.45} .rtick{flex:0 0 18px;color:var(--indigo2);font-weight:800;font-size:13px} /* ================= engine hero: invite left, five agents right ================= */ .ehero{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center; padding:60px 0 64px;position:relative;z-index:1} @media(max-width:1000px){.ehero{grid-template-columns:1fr;gap:36px;padding:44px 0 48px}} .eleft h1{font-size:clamp(32px,4.5vw,54px)} .epills{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 26px} .epill{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16); font-size:12.5px;font-weight:600;color:rgba(255,255,255,.9);backdrop-filter:blur(6px)} .epill i{font-style:normal;color:var(--cyan)} /* the panel holding the agent canvas + candles */ .epanel{background:rgba(9,11,18,.62);border:1px solid rgba(255,255,255,.14);border-radius:20px; padding:16px;backdrop-filter:blur(10px);box-shadow:0 44px 100px -34px rgba(0,0,0,.9)} .epanel .ehd{display:flex;justify-content:space-between;align-items:center; padding:2px 4px 12px;font-size:11px;letter-spacing:.12em;text-transform:uppercase; color:rgba(255,255,255,.5);font-weight:700} .epanel canvas{display:block;width:100%;border-radius:12px;background:#070911} .everdict{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px; padding:11px 14px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)} .everdict b{font-size:13px;font-weight:700;letter-spacing:-.01em} .everdict s{text-decoration:none;font-size:12px;color:rgba(255,255,255,.6);display:block;margin-top:2px} /* the five agent chips, stacked beside the chart */ .agentcol{display:grid;gap:7px;margin-top:12px} .arow{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:11px; background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09)} .arow .ai{flex:0 0 26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:13px;color:#fff} .arow b{font-size:13px;font-weight:600;flex:1;min-width:0} .arow .av{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; padding:3px 8px;border-radius:6px;background:rgba(61,220,151,.14);color:var(--green);white-space:nowrap} .arow .av.wait{background:rgba(245,181,68,.14);color:var(--amber)} /* ================= reviews ================= */ .rev3{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} @media(max-width:820px){.rev3{grid-template-columns:1fr}} .rcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 24px; display:flex;flex-direction:column;gap:12px} .rstars{color:var(--gold);font-size:14px;letter-spacing:2px} .rcard p{font-size:14.5px;color:var(--fg);line-height:1.62} .rwho{display:flex;align-items:center;gap:11px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)} .rav{flex:0 0 34px;height:34px;border-radius:50%;background:var(--surface2);color:var(--indigo2); display:grid;place-items:center;font-weight:700;font-size:13px} .rwho b{font-size:13.5px;font-weight:600;display:block} .rwho s{text-decoration:none;font-size:12px;color:var(--fg3);display:block} /* ================= managed app-controller panel on pricing ================= */ .appctl{margin-top:22px;border:1px solid rgba(99,91,255,.3);border-radius:19px;overflow:hidden; background:linear-gradient(120deg,rgba(99,91,255,.11),rgba(34,211,238,.05))} .appctl .in{display:grid;grid-template-columns:150px 1fr;gap:26px;align-items:center;padding:26px 28px} @media(max-width:760px){.appctl .in{grid-template-columns:1fr;gap:20px;justify-items:center;text-align:center}} .miniph{width:150px;height:296px;border-radius:24px;border:1px solid var(--line2);background:#04050A; padding:6px;box-shadow:0 28px 60px -22px rgba(0,0,0,.9),0 0 60px -30px rgba(99,91,255,.7)} .miniph .scr2{width:100%;height:100%;border-radius:19px;background:#0A0C13;overflow:hidden; display:flex;flex-direction:column;padding:10px 9px;gap:7px} .miniph .mh{display:flex;justify-content:space-between;align-items:center;font-size:8.5px;color:var(--fg3);font-weight:600} .miniph .eq{font-size:19px;font-weight:800;letter-spacing:-.03em;font-family:'JetBrains Mono',monospace} .miniph .lbl{font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg3);font-weight:700} .miniph canvas{display:block;width:100%;border-radius:7px;background:#070911} .miniph .btns{display:flex;gap:5px;margin-top:auto} .miniph .btns span{flex:1;text-align:center;font-size:8.5px;font-weight:700;padding:6px 0;border-radius:7px; background:var(--surface2);color:var(--fg2)} .miniph .btns span.stop{background:rgba(255,107,122,.14);color:var(--red)} .appctl ul{display:grid;grid-template-columns:1fr 1fr;gap:7px 18px;margin:14px 0 0;list-style:none} @media(max-width:560px){.appctl ul{grid-template-columns:1fr}} .appctl ul li{font-size:13.5px;color:var(--fg2);padding-left:22px;position:relative} .appctl ul li:before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:800;font-size:12px} /* ================= sign-in robot ================= */ .robowrap{position:relative;width:100%;max-width:340px;margin:0 auto} .robo{width:100%;height:auto;display:block;filter:drop-shadow(0 30px 60px rgba(0,0,0,.6))} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}} @keyframes armswing{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-17deg)}} @keyframes blink{0%,92%,100%{opacity:1}95%{opacity:.15}} @keyframes tickup{0%{transform:translateY(4px);opacity:0}20%,80%{opacity:1}100%{transform:translateY(-10px);opacity:0}} @keyframes sweep{0%{stroke-dashoffset:420}100%{stroke-dashoffset:0}} .robo .body{animation:floaty 4.6s ease-in-out infinite;transform-origin:center} .robo .arm{animation:armswing 2.3s ease-in-out infinite;transform-origin:118px 150px} .robo .eye{animation:blink 5.2s infinite} .robo .spark{animation:tickup 2.6s ease-in-out infinite} .robo .spark:nth-of-type(2){animation-delay:.9s} .robo .spark:nth-of-type(3){animation-delay:1.7s} .robo .line{stroke-dasharray:420;animation:sweep 3.4s ease-out forwards} @media(prefers-reduced-motion:reduce){ .robo .body,.robo .arm,.robo .eye,.robo .spark,.robo .line{animation:none}} /* ---------- engine canvas with candles running behind it ---------- */ .engstack{position:relative;border-radius:12px;overflow:hidden;background:#070911} .engstack canvas{display:block;width:100%;height:auto} .engstack #candles{position:absolute;inset:0;opacity:.42} .engstack #eng{position:relative;background:transparent} /* the agent chips under the engine */ .chip{font-size:11px;font-weight:700;letter-spacing:.08em;padding:5px 10px;border-radius:7px; background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:var(--fg3);transition:.25s} .chip.on{background:rgba(34,211,238,.14);border-color:rgba(34,211,238,.35);color:var(--cyan)} .chip.go{background:rgba(61,220,151,.15);border-color:rgba(61,220,151,.4);color:var(--green)} /* ---------- the App as a fourth tile in the pricing grid ---------- */ #botGridPub,#subGrid{grid-template-columns:repeat(4,1fr)} @media(max-width:1180px){#botGridPub,#subGrid{grid-template-columns:1fr 1fr}} @media(max-width:680px){#botGridPub,#subGrid{grid-template-columns:1fr}} .plan.appTile{background:linear-gradient(160deg,rgba(99,91,255,.13),rgba(34,211,238,.05)); border-color:rgba(99,91,255,.34)} .plan.appTile.off{background:var(--surface);border-color:var(--line);opacity:.55;filter:grayscale(.85)} .plan.appTile.off .btn{pointer-events:none} .tileph{width:112px;height:212px;border-radius:19px;border:1px solid var(--line2);background:#04050A; padding:5px;margin:4px auto 14px;box-shadow:0 20px 44px -18px rgba(0,0,0,.9)} .tileph .s3{width:100%;height:100%;border-radius:15px;background:#0A0C13;display:flex;flex-direction:column; padding:8px 7px;gap:6px;overflow:hidden} .tileph .t3{display:flex;justify-content:space-between;font-size:7px;color:var(--fg3);font-weight:700} .tileph .e3{font-size:15px;font-weight:800;letter-spacing:-.03em;font-family:'JetBrains Mono',monospace} .tileph .l3{font-size:6.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg3);font-weight:700} .tileph canvas{display:block;width:100%;border-radius:5px;background:#070911} .tileph .b3{display:flex;gap:4px;margin-top:auto} .tileph .b3 span{flex:1;text-align:center;font-size:7px;font-weight:700;padding:5px 0;border-radius:5px; background:var(--surface2);color:var(--fg2)} .tileph .b3 span.st{background:rgba(255,107,122,.14);color:var(--red)} .lockline{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--fg3); margin-top:10px;line-height:1.5} .lockline b{color:var(--amber)} /* ---------- pricing tiles, second pass ---------- Three bots across the top, the control app as one wide tile beneath them. The wide tile is what makes the app read as a real part of the offer rather than a footnote. */ #botGridPub,#subGrid{grid-template-columns:repeat(3,1fr);gap:16px} @media(max-width:1000px){#botGridPub,#subGrid{grid-template-columns:1fr 1fr}} @media(max-width:680px){#botGridPub,#subGrid{grid-template-columns:1fr}} .plan{padding:28px 26px 26px} .plan h3{font-size:20px;letter-spacing:-.025em} .plan .d{font-size:14px;line-height:1.6;color:var(--fg2);margin:10px 0 16px; display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .plan .pr{margin-top:2px;line-height:1} .plan ul{margin:16px 0 18px;display:grid;gap:8px} .plan ul li{font-size:13.5px;line-height:1.5} .planwho{font-size:13px;color:var(--indigo2);font-weight:600;margin-bottom:10px;min-height:2.6em} .pricebox{background:var(--bg2);border:1px solid var(--line);border-radius:13px; padding:14px 16px;margin:4px 0 4px} .plan.hi .pricebox{background:rgba(99,91,255,.08);border-color:rgba(99,91,255,.26)} .pricebox .sub2{font-size:12.5px;color:var(--fg3);margin-top:5px;line-height:1.45} .ibline{font-size:13px;margin-top:9px;padding-top:9px;border-top:1px dashed var(--line2)} /* the wide control-app tile */ .plan.appTile{grid-column:1/-1;padding:0;overflow:hidden; background:linear-gradient(120deg,rgba(99,91,255,.13),rgba(34,211,238,.05)); border-color:rgba(99,91,255,.34)} .plan.appTile .wrapIn{display:grid;grid-template-columns:150px 1fr auto;gap:30px; align-items:center;padding:26px 30px} @media(max-width:900px){.plan.appTile .wrapIn{grid-template-columns:130px 1fr;gap:22px}} @media(max-width:620px){.plan.appTile .wrapIn{grid-template-columns:1fr;justify-items:center;text-align:center;gap:18px}} .plan.appTile.off{background:var(--surface);border-color:var(--line)} .plan.appTile.off .wrapIn{opacity:.5;filter:grayscale(.9)} .plan.appTile .tileph{margin:0} .appfeat{display:grid;grid-template-columns:1fr 1fr;gap:7px 20px;margin-top:14px;list-style:none} @media(max-width:760px){.appfeat{grid-template-columns:1fr}} .appfeat li{font-size:13.5px;color:var(--fg2);padding-left:21px;position:relative} .appfeat li:before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:800;font-size:12px} .appTile.off .appfeat li:before{content:"✕";color:var(--fg3)} .appside{text-align:center;min-width:150px} @media(max-width:900px){.appside{grid-column:1/-1;text-align:left}} /* ---------- "there is a guide for every step" reveal ---------- */ .guidebar{display:flex;align-items:center;gap:14px;width:100%;margin-top:14px;padding:16px 20px; border:1px solid var(--line2);border-radius:14px;background:var(--surface);transition:.18s} .guidebar:hover{border-color:var(--indigo)} .guidebar .gbi{flex:0 0 34px;height:34px;border-radius:10px;background:rgba(99,91,255,.14); color:var(--indigo2);display:grid;place-items:center;font-size:13px} .guidebar b{display:block;font-size:14.5px;font-weight:600} .guidebar s{text-decoration:none;display:block;font-size:12.5px;color:var(--fg3);margin-top:3px} .guidebar .gbx{flex:0 0 22px;font-size:20px;font-weight:400;color:var(--fg3);transition:transform .2s} .guidebar.open .gbx{transform:rotate(45deg);color:var(--indigo2)} /* The strip used to be folded away behind a "A guide for every step" tile. That tile is gone, and it was the only thing that could open this, so the clips are simply shown. */ #guideList{display:grid;margin-top:2px;border:1px solid var(--line);border-radius:0 0 14px 14px} /* ================= pricing, as a guided sequence ================= */ /* the numbered step label used through the pricing flow */ .phn{display:inline-block;font-size:11px;letter-spacing:.11em;text-transform:uppercase;font-weight:800; color:var(--indigo2);margin-bottom:6px} .phn.gold{color:var(--gold)} .phq b{display:block;font-size:17px;font-weight:700;letter-spacing:-.02em} .phq s{text-decoration:none;display:block;font-size:13.5px;color:var(--fg2);margin-top:4px;line-height:1.55} /* step 1 — the hosting switch, attached to the price block */ .pricehead{display:grid;grid-template-columns:1fr auto auto;gap:20px;align-items:center; background:var(--surface);border:1px solid var(--line2);border-radius:16px 16px 0 0; padding:20px 24px;border-bottom:0} @media(max-width:900px){.pricehead{grid-template-columns:1fr;gap:14px}} .phhelp{font-size:13px;font-weight:600;color:var(--indigo2);text-decoration:underline;white-space:nowrap} .phhelp:hover{color:var(--fg)} .hostnote{background:var(--bg2);border:1px solid var(--line2);border-top:0;border-radius:0 0 16px 16px; padding:14px 24px;font-size:13.5px;color:var(--fg2);line-height:1.55} .hostnote b{color:var(--fg)} /* the blue tag, centred on the tile */ .tagx{left:50%;right:auto;transform:translateX(-50%)} /* step 3 — the broker-link invitation, inside pricing */ .ibjoin{margin-top:26px;border:1px solid rgba(232,196,106,.32);border-radius:19px;overflow:hidden; display:grid;grid-template-columns:1fr 300px; background:linear-gradient(120deg,rgba(232,196,106,.11),rgba(232,196,106,.02))} @media(max-width:900px){.ibjoin{grid-template-columns:1fr}} .ibj-head{padding:26px 28px} .ibj-head h3{font-size:clamp(21px,2.6vw,28px);font-weight:800;letter-spacing:-.03em;margin-bottom:8px} .ibj-head p{font-size:14.5px;color:var(--fg2);line-height:1.65;max-width:62ch} .ibj-num{padding:26px 28px;border-left:1px solid rgba(232,196,106,.22); display:flex;flex-direction:column;justify-content:center;background:rgba(0,0,0,.18)} @media(max-width:900px){.ibj-num{border-left:0;border-top:1px solid rgba(232,196,106,.22)}} .ibs-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;font-size:13.5px;color:var(--fg2)} .ibs-note{font-size:12.5px;color:var(--fg3);margin-top:10px;padding-top:10px;border-top:1px solid var(--line);line-height:1.5} .ibjoin .g4{grid-column:1/-1;gap:1px;background:var(--line);border-top:1px solid rgba(232,196,106,.22)} .ibjoin .g4 > div{background:var(--surface);padding:18px 20px} .ibj-foot{grid-column:1/-1;padding:18px 28px;background:var(--surface);display:flex;gap:14px; flex-wrap:wrap;align-items:center;justify-content:space-between} /* the risk warning, where a buyer actually sees it */ .riskbar{margin-top:20px;padding:16px 22px;border-radius:14px;display:flex;gap:12px;flex-wrap:wrap; align-items:baseline;background:rgba(255,107,122,.08);border:1px solid rgba(255,107,122,.3)} .riskbar b{color:var(--red);font-size:14.5px;white-space:nowrap} .riskbar span{font-size:13.5px;color:var(--fg2);line-height:1.55;flex:1;min-width:0} .riskbar a{color:var(--fg);text-decoration:underline} /* ---------- anchors land on the heading, not under the navbar ---------- */ main section,main [id]{scroll-margin-top:96px} /* ================= self-serve price tiles ================= */ .plan{text-align:left} .planwho{text-align:center} .plan .d{text-align:left} /* the "who keeps it running" switch, on the card itself */ .tswitch{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px 13px;margin:4px 0 12px} .tsl{display:block;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:800;color:var(--fg3);margin-bottom:8px} .tsbtns{display:grid;grid-template-columns:1fr 1fr;gap:5px;background:var(--surface); border:1px solid var(--line2);border-radius:9px;padding:4px} .tsbtns button{padding:9px 4px;border-radius:6px;font-size:12.5px;font-weight:600;color:var(--fg2);line-height:1.25} .tsbtns button:hover{color:var(--fg)} .tsbtns button.on{background:var(--indigo);color:#fff;box-shadow:var(--sh)} .tsn{display:block;font-size:12px;color:var(--fg3);margin-top:9px;line-height:1.5} /* claim half price, on the card */ .claim{display:flex;align-items:center;gap:10px;width:100%;text-align:left;margin:2px 0 4px; padding:12px 14px;border-radius:12px;border:1px solid rgba(232,196,106,.36); background:linear-gradient(100deg,rgba(232,196,106,.14),rgba(232,196,106,.03));transition:.18s} .claim:hover{border-color:var(--gold);transform:translateY(-1px)} .claim b{display:block;font-size:13.5px;color:var(--gold)} .claim s{text-decoration:none;display:block;font-size:12px;color:var(--fg2);margin-top:2px;line-height:1.45} .claim .arw{color:var(--gold);flex:0 0 auto} .claimed{padding:11px 14px;border-radius:12px;font-size:13px;font-weight:600;color:var(--green); background:rgba(61,220,151,.1);border:1px solid rgba(61,220,151,.28);margin:2px 0 4px} /* ================= the wide explainer modal ================= */ .modal.wide{max-width:940px} .wsplit{display:grid;grid-template-columns:1fr 300px;gap:30px;align-items:start} @media(max-width:820px){.wsplit{grid-template-columns:1fr;gap:22px}} .wsplit h3{font-size:clamp(21px,2.6vw,27px)} .wlist{list-style:none;display:grid;gap:10px;margin:16px 0} .wlist li{position:relative;padding-left:26px;font-size:14px;color:var(--fg2);line-height:1.55} .wlist li:before{content:"✓";position:absolute;left:0;top:0;color:var(--green);font-weight:800} .wlist li b{color:var(--fg)} .wlist.warn li:before{content:"✕";color:var(--red)} .wphone{position:sticky;top:0} .wphone.dim .mphone{opacity:.5;filter:grayscale(.85)} .wphead{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:800; color:var(--fg3);text-align:center;margin-bottom:10px} .wpfoot{font-size:12px;color:var(--fg3);text-align:center;margin-top:10px} .mphone{width:100%;max-width:300px;margin:0 auto;border-radius:28px;border:1px solid var(--line2); background:#04050A;padding:8px;box-shadow:0 34px 74px -26px rgba(0,0,0,.9),0 0 66px -30px rgba(99,91,255,.6)} .mpscr{border-radius:21px;background:#0A0C13;padding:11px 10px;display:flex;flex-direction:column;gap:8px; height:440px;overflow:hidden;position:relative} .mprow{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--fg3);font-weight:600} .mplbl{font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--fg3);font-weight:700} .mpv{font-size:11.5px;font-weight:600;margin-top:2px} /* ================= video section sized to fit one screen ================= */ /* #watch used to set its own padding here. The ID beat the shared section rhythm, so the video section sat at a different distance from its neighbours than every other section. The declaration is gone; it follows the same rule as the rest. */ .vidhead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:16px} .vidhead .guidebar{margin:0;width:auto;min-width:260px;padding:12px 16px} #watch .theatre{max-width:100%} #watch .theatre .scr{aspect-ratio:auto;height:min(52vh,430px)} /* ================= pricing tile v2 — price on top, fits one screen ================= */ .pricetop{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:18px} .priceside{font-size:13.5px;color:var(--fg2);max-width:42ch;margin:0;line-height:1.55} #botGridPub{gap:16px} .plan{padding:20px 20px 18px;display:flex;flex-direction:column;text-align:left} .ptitle{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:12px} .ptitle h3{font-size:19px;letter-spacing:-.025em} /* the price block, sitting at the top */ .pbig{background:var(--bg2);border:1px solid var(--line);border-radius:13px;padding:14px 16px;margin-bottom:12px} .plan.hi .pbig{background:rgba(99,91,255,.08);border-color:rgba(99,91,255,.26)} .pbig .pr{font-size:34px;line-height:1;letter-spacing:-.035em} .pbig .pr small{font-size:14px;font-weight:600;color:var(--fg3);letter-spacing:0} .pwas{font-size:12.5px;color:var(--fg3);text-decoration:line-through;margin-top:4px} .pbreak{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:12.5px;color:var(--fg2);font-family:'JetBrains Mono',monospace} .pbreak i{font-style:normal;color:var(--fg3)} .pbreak .plus{color:var(--fg3)} .pline{font-size:13px;color:var(--indigo2);font-weight:600;line-height:1.4;margin-bottom:12px;min-height:2.5em} /* the server switch row */ .srv{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px; background:var(--surface);border:1px solid var(--line2);border-radius:12px;padding:11px 13px;margin-bottom:11px;cursor:pointer} .srv.on{border-color:rgba(99,91,255,.4);background:rgba(99,91,255,.06)} .srvtxt b{display:block;font-size:13px;font-weight:600;line-height:1.3} .srvtxt s{text-decoration:none;display:block;font-size:11.5px;color:var(--fg3);margin-top:2px;line-height:1.4} .srvprice{font-size:13px;font-weight:700;font-family:'JetBrains Mono',monospace;color:var(--fg2);white-space:nowrap} .srv.on .srvprice{color:var(--indigo2)} .sw{flex:0 0 auto;width:40px;height:23px;border-radius:999px;background:var(--line2);position:relative;transition:.2s;display:inline-block} .sw i{position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.4)} .srv.on .sw{background:var(--indigo)} .srv.on .sw i{transform:translateX(17px)} .sw:focus-visible{outline:2px solid var(--indigo2);outline-offset:2px} /* claim */ .claim{display:flex;align-items:center;gap:10px;width:100%;text-align:left;margin-bottom:11px; padding:11px 13px;border-radius:12px;border:1px solid rgba(232,196,106,.36); background:linear-gradient(100deg,rgba(232,196,106,.14),rgba(232,196,106,.03));transition:.16s} .claim:hover{border-color:var(--gold);transform:translateY(-1px)} .claim b{display:block;font-size:13px;color:var(--gold)} .claim s{text-decoration:none;display:block;font-size:11.5px;color:var(--fg2);margin-top:1px} .claim .arw{color:var(--gold);flex:0 0 auto;margin-left:auto} .claimed{padding:10px 13px;border-radius:12px;font-size:12.5px;font-weight:600;color:var(--green); background:rgba(61,220,151,.1);border:1px solid rgba(61,220,151,.28);margin-bottom:11px;text-align:center} /* included, tucked into a details so the card stays short */ .pinc{margin-top:10px;border-top:1px solid var(--line);padding-top:8px} .pinc summary{font-size:12.5px;color:var(--fg3);cursor:pointer;font-weight:600;list-style:none; display:flex;align-items:center;gap:6px} .pinc summary::-webkit-details-marker{display:none} .pinc summary:before{content:"+";color:var(--indigo2);font-weight:800} .pinc[open] summary:before{content:"−"} .pinc summary:hover{color:var(--fg)} .pinc ul{margin:10px 0 2px;display:grid;gap:6px} .pinc li{font-size:12.5px;color:var(--fg2)} /* the risk bar, tighter under the compact grid */ #bots .riskbar{margin-top:16px} /* fit the whole pricing grid in one viewport */ #bots{padding-top:26px;padding-bottom:30px} main #bots{scroll-margin-top:72px} #bots .pricetop{margin-bottom:12px} #botGridPub .plan{padding:16px 18px 15px} #botGridPub .ptitle{margin-bottom:9px} #botGridPub .pbig{padding:12px 14px;margin-bottom:9px} #botGridPub .pbig .pr{font-size:30px} #botGridPub .pline{margin-bottom:9px;min-height:0;font-size:12.5px} #botGridPub .srv{padding:9px 12px;margin-bottom:9px} #botGridPub .claim{padding:9px 12px;margin-bottom:9px} #botGridPub .pinc{margin-top:8px;padding-top:7px} @media(max-height:760px){ #botGridPub .d{display:none} /* long paragraph hidden on short screens */ } /* ---------- keep description + specs visible, card aligned ---------- */ #botGridPub .d{display:block !important;font-size:13px;line-height:1.55;color:var(--fg2); margin:0 0 12px; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} #botGridPub .pline{min-height:0;margin-bottom:7px} /* specs block, open and readable, grows so the button sits at the bottom */ .pspecs{margin:2px 0 14px;border-top:1px solid var(--line);padding-top:11px;flex:1 1 auto} .pspecs-h{font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:800; color:var(--fg3);margin-bottom:9px} .pspecs ul{display:grid;gap:7px} /* A word with no space in it must break, not push the tile apart. Applies everywhere a spec list is drawn, not only on the landing tiles. */ .pspecs li{position:relative;padding-left:20px;font-size:13px;color:var(--fg2);line-height:1.45; overflow-wrap:anywhere} .pspecs li:before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:800;font-size:12px} /* "See more", under the checklist. Only drawn when a description exists, so a bot with nothing written for it is laid out exactly as it was. */ /* The condition, said on the tile rather than discovered at the last step. */ .freenote{display:flex;gap:9px;align-items:flex-start;margin-bottom:12px;padding:11px 13px; border:1px solid rgba(61,220,151,.32);border-radius:13px;font-size:12.5px;line-height:1.5; color:var(--fg2);background:linear-gradient(115deg,rgba(61,220,151,.14),rgba(61,220,151,.04))} .freenote b{color:var(--fg);font-weight:700} .freetick{flex:0 0 auto;width:17px;height:17px;border-radius:50%;display:grid;place-items:center; background:rgba(61,220,151,.18);color:var(--green);font-size:10px;font-weight:800;margin-top:1px} /* Description, under the checklist. Only drawn when there is one, so a bot with nothing written for it is laid out exactly as it was. */ .pabout{margin-top:13px;padding-top:11px;border-top:1px solid var(--line)} .pabout-h{font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:800; color:var(--fg3);margin-bottom:6px} /* Two lines, always. Three tiles share a row and stretch to the tallest, so an unclamped opening line would let one bot set the height of the whole shop. */ .pabout-t{font-size:12.5px;line-height:1.5;color:var(--fg2);margin:0 0 8px;overflow:hidden; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere} .seemore{display:inline-flex;align-items:center;gap:6px;padding:0; background:none;border:0;cursor:pointer;font:inherit;font-size:12.5px;font-weight:700; color:var(--indigo2);text-decoration:underline;text-underline-offset:3px} .seemore:hover{color:var(--fg)} /* The × out of a dialog. Sits over the top-right corner of the panel, clear of the badge and the heading that start at the top-left. */ .mx{position:absolute;top:12px;right:12px;width:34px;height:34px;display:grid;place-items:center; border:1px solid var(--line);border-radius:10px;background:var(--surface2);color:var(--fg2); font-size:21px;line-height:1;cursor:pointer;transition:.15s} .mx:hover{background:var(--surface);color:var(--fg);border-color:var(--fg3)} /* overflow-wrap: a word with no spaces must break rather than force a sideways scrollbar across the whole panel. */ /* The reading panel. Wider than a form dialog, but the prose is held to a readable measure inside it — a line spanning the full 720px is hard to track back to the start of. */ .modal.aboutm{max-width:720px;padding:38px 40px 40px} .modal.aboutm h3{font-size:30px;margin-bottom:9px} .modal.aboutm .mlede{font-size:16px;margin-bottom:0;max-width:60ch} .aboutbot{margin-top:20px;padding-top:20px;border-top:1px solid var(--line); color:var(--fg2);font-size:15.5px;line-height:1.75;max-width:64ch; max-height:58vh;overflow-y:auto;overflow-x:hidden;overflow-wrap:anywhere} .aboutbot p{margin:0 0 16px} .aboutbot p:last-child{margin-bottom:0} @media(max-width:760px){ .modal.aboutm{padding:26px 22px 28px} .modal.aboutm h3{font-size:24px} .modal.aboutm .mlede{font-size:14.5px} .aboutbot{font-size:14.5px;line-height:1.68;margin-top:16px;padding-top:16px} } /* the card is a column; the Subscribe button always sits at the bottom edge */ #botGridPub .plan{display:flex;flex-direction:column} #botGridPub .plan > .btn.full{margin-top:auto} /* ---------- description removed; tagline + specs stay ---------- */ #botGridPub .d{display:none !important} #botGridPub .pline{font-size:14px;color:var(--indigo2);font-weight:600;margin-bottom:11px;min-height:0} /* ---------- the Claim 50% button, made to grab the eye ---------- */ .claim{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px; width:100%;text-align:left;margin-bottom:12px;padding:12px 14px;border-radius:13px;overflow:hidden; border:1px solid rgba(232,196,106,.5); background:linear-gradient(115deg,rgba(232,196,106,.22),rgba(232,196,106,.06) 60%,rgba(232,196,106,.14)); box-shadow:0 6px 20px -10px rgba(232,196,106,.5);transition:transform .16s,box-shadow .16s} .claim:hover{transform:translateY(-2px);box-shadow:0 12px 28px -10px rgba(232,196,106,.65);border-color:var(--gold)} /* a soft shine sweep so it reads as a live offer */ .claim:before{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent); transform:skewX(-18deg);animation:claimShine 4.5s ease-in-out infinite} @keyframes claimShine{0%,72%{left:-60%}86%{left:130%}100%{left:130%}} @media(prefers-reduced-motion:reduce){.claim:before{display:none}} .claim-badge{position:relative;z-index:1;flex:0 0 auto;font-size:11px;font-weight:800;letter-spacing:.04em; color:#181307;background:var(--gold);padding:5px 9px;border-radius:7px;box-shadow:0 2px 8px -2px rgba(232,196,106,.7)} .claim-body{position:relative;z-index:1;min-width:0} .claim-body b{display:block;font-size:14.5px;font-weight:700;color:#F6E4B4;letter-spacing:-.01em} .claim-strike{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.5);text-decoration:line-through;margin-left:5px} .claim-body s{text-decoration:none;display:block;font-size:11.5px;color:rgba(232,196,106,.85);margin-top:2px} .claim-go{position:relative;z-index:1;flex:0 0 auto;font-size:12.5px;font-weight:800;color:var(--gold); white-space:nowrap;display:flex;align-items:center;gap:4px} .claimed{padding:11px 14px;border-radius:12px;font-size:13px;font-weight:700;color:var(--green); background:rgba(61,220,151,.12);border:1px solid rgba(61,220,151,.32);margin-bottom:12px;text-align:center} /* ---------- tile fits one screen: no toggle, base price, compact specs ---------- */ #botGridPub .pbreak{margin-top:6px;font-size:12px;color:var(--fg3)} #botGridPub .pspecs{margin:2px 0 12px;padding-top:10px} #botGridPub .pspecs li{font-size:12.5px} #bots{padding-top:24px;padding-bottom:28px} /* ---------- host-choice options inside the Subscribe modal ---------- */ .hostpick{display:block;width:100%;text-align:left;margin-bottom:12px;padding:16px 18px; border:1px solid var(--line2);border-radius:14px;background:var(--surface);transition:.16s;position:relative} .hostpick:hover{border-color:var(--indigo);transform:translateY(-2px);box-shadow:0 12px 28px -14px rgba(99,91,255,.5)} .hostpick.reco{border-color:rgba(99,91,255,.45);background:linear-gradient(120deg,rgba(99,91,255,.12),rgba(34,211,238,.04))} .hostpick.reco:before{content:"Most popular";position:absolute;top:-9px;left:16px;font-size:10px;font-weight:800; letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--indigo);padding:3px 9px;border-radius:6px} .hp-top{display:flex;align-items:center;justify-content:space-between;gap:12px} .hp-top b{font-size:16px;font-weight:700;letter-spacing:-.02em} .hp-price{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:14px;color:var(--indigo2);white-space:nowrap} .hostpick s{text-decoration:none;display:block;font-size:13px;color:var(--fg2);line-height:1.55;margin:7px 0 10px} .hostpick s b{color:var(--fg)} .hp-go{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--indigo2)} .hostpick.reco .hp-go{color:var(--indigo2)} /* ---------- final squeeze so the pricing grid fits one viewport ---------- */ #bots{padding-top:14px;padding-bottom:22px} #bots .pricetop{margin-bottom:10px} #bots .pricetop h2{font-size:clamp(21px,2.6vw,28px)} #bots .priceside{font-size:12.5px} #botGridPub .plan{padding:14px 16px} #botGridPub .ptitle{margin-bottom:7px} #botGridPub .ptitle h3{font-size:18px} #botGridPub .pbig{padding:11px 13px;margin-bottom:8px} #botGridPub .pbig .pr{font-size:27px} #botGridPub .pline{font-size:13px;margin-bottom:8px} #botGridPub .claim{padding:9px 12px;margin-bottom:8px} #botGridPub .pspecs{margin:0 0 10px;padding-top:9px} /* Flowing columns, not a grid: a grid row is as tall as its tallest cell, so one wrapped feature left its neighbour above a hole. See the note in the git log. */ #botGridPub .pspecs ul{display:block;column-count:2;column-gap:14px} #botGridPub .pspecs li{font-size:12px;padding-left:17px;margin-bottom:var(--spec-gap,6px);break-inside:avoid} #bots .riskbar{margin-top:12px;padding:12px 18px} #bots .riskbar b{font-size:13.5px} #bots .riskbar span{font-size:12.5px} /* last 10px */ #botGridPub .pspecs{margin-bottom:6px} #botGridPub .claim{margin-bottom:6px} #botGridPub .pline{margin-bottom:6px} #bots{padding-bottom:18px} /* ================= premium pricing card v3 ================= */ #botGridPub .plan{position:relative;border-radius:18px;overflow:hidden; background:linear-gradient(180deg,var(--surface2),var(--surface));border:1px solid var(--line2); transition:transform .2s,box-shadow .2s,border-color .2s} #botGridPub .plan:hover{transform:translateY(-4px);box-shadow:0 26px 54px -24px rgba(0,0,0,.85);border-color:var(--indigo)} #botGridPub .plan.hi{border-color:rgba(99,91,255,.55); background:linear-gradient(180deg,rgba(99,91,255,.14),var(--surface) 55%); box-shadow:0 0 0 1px rgba(99,91,255,.28),0 22px 50px -24px rgba(99,91,255,.5)} /* "Best value" ribbon on the featured card */ .ribbon{position:absolute;top:13px;right:-34px;transform:rotate(45deg);z-index:2; background:var(--gold);color:#181307;font-size:10.5px;font-weight:800;letter-spacing:.05em; padding:4px 42px;box-shadow:0 4px 12px -3px rgba(0,0,0,.5)} #botGridPub .tagx{position:static;transform:none;display:inline-block;margin:0 0 10px} #botGridPub .ptitle{margin-bottom:4px} #botGridPub .ptitle h3{font-size:19px;font-weight:800;letter-spacing:-.03em} #botGridPub .pline{font-size:13.5px;font-weight:600;color:var(--indigo2);line-height:1.4;margin-bottom:12px;min-height:2.5em} #botGridPub .plan.hi .pline{color:#B9B3FF} /* the price — big and confident, no box */ #botGridPub .pbig{background:none;border:0;padding:0;margin-bottom:12px} #botGridPub .pbig .pr{font-size:40px;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--fg)} .pmo{font-size:15px;font-weight:600;color:var(--fg3);letter-spacing:0;margin-left:3px} #botGridPub .pbreak{margin-top:6px;font-size:12px;color:var(--fg3)} /* ---------- the Claim 50% offer, redesigned to look premium ---------- */ .claim{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:stretch;gap:0; width:100%;text-align:left;margin-bottom:12px;border-radius:14px;overflow:hidden; border:1px solid rgba(232,196,106,.45);background:#14110A; box-shadow:0 8px 22px -12px rgba(232,196,106,.45);transition:transform .16s,box-shadow .16s,border-color .16s} .claim:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:0 14px 30px -12px rgba(232,196,106,.6)} .claim:before{content:"";position:absolute;inset:0;z-index:0; background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%); background-size:250% 100%;animation:claimSweep 3.8s ease-in-out infinite} @keyframes claimSweep{0%,70%{background-position:130% 0}100%{background-position:-30% 0}} @media(prefers-reduced-motion:reduce){.claim:before{display:none}} /* left rail: the price, on a gold gradient */ .claim-price{font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1.05;font-family:'JetBrains Mono',monospace} .claim-price i{font-size:12px;font-weight:700;font-style:normal;opacity:.7} .claim-was{font-size:10.5px;font-weight:600;text-decoration:line-through;opacity:.6} /* right: the pitch */ .claimed{padding:11px 14px;border-radius:12px;font-size:13px;font-weight:700;color:var(--green); background:rgba(61,220,151,.12);border:1px solid rgba(61,220,151,.32);margin-bottom:12px;text-align:center} /* keep the whole thing on one screen */ #botGridPub .plan{padding:16px 16px 15px} #botGridPub .pspecs{margin:0 0 10px;padding-top:9px} #botGridPub .plan > .btn.full{margin-top:auto} /* fit the premium card in one screen */ #bots{padding-top:12px} #bots .pricetop{margin-bottom:8px} #botGridPub .plan{padding:13px 15px} #botGridPub .ptitle h3{font-size:17px} #botGridPub .pline{min-height:2.1em;margin-bottom:8px;font-size:13px} #botGridPub .pbig{margin-bottom:9px} #botGridPub .pbig .pr{font-size:31px} #botGridPub .claim{margin-bottom:9px} #botGridPub .claim-price{font-size:21px} #botGridPub .pspecs{margin:0 0 9px;padding-top:8px} #botGridPub .pspecs ul{display:block;column-count:2;column-gap:14px} #botGridPub .pspecs li{font-size:12px;margin-bottom:var(--spec-gap,6px);break-inside:avoid} #botGridPub .plan > .btn.full{padding:11px} /* last squeeze to one screen */ #botGridPub .pbreak{display:none} /* redundant with the specs list */ #botGridPub .pbig{margin-bottom:8px} #botGridPub .plan{padding:12px 15px} #botGridPub .pline{min-height:1.9em;margin-bottom:7px} #botGridPub .pspecs-h{margin-bottom:7px} #botGridPub .pspecs ul{--spec-gap:5px} #botGridPub .plan > .btn.full{padding:10px} #bots{padding-top:8px} /* ================= centered, premium pricing card (header removed) ================= */ #bots{padding-top:34px;padding-bottom:30px} #botGridPub{align-items:stretch} /* centered header: tag, name, tagline, price */ #botGridPub .plan{padding:20px 20px 18px} #botGridPub .tagx{display:table;margin:0 auto 12px} /* the badge, centred */ #botGridPub .ptitle{justify-content:center;margin-bottom:5px} #botGridPub .ptitle h3{font-size:19px} #botGridPub .pline{text-align:center;min-height:2.5em;margin-bottom:14px;font-size:13.5px; display:flex;align-items:center;justify-content:center} #botGridPub .pbig{text-align:center;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--line)} #botGridPub .pbig .pr{font-size:38px} .plan.hi #botGridPub .pbig,#botGridPub .plan.hi .pbig{border-color:rgba(99,91,255,.25)} /* claim stays as the gold badge, a touch taller now there's room */ #botGridPub .claim{margin-bottom:14px} #botGridPub .claim-price{font-size:23px} /* specs — left-aligned checklist reads cleaner than centred */ #botGridPub .pspecs{margin:0 0 14px;padding-top:12px} #botGridPub .pspecs ul{display:block;column-count:2;column-gap:14px} #botGridPub .pspecs li{font-size:12.5px;margin-bottom:var(--spec-gap,7px);break-inside:avoid} #botGridPub .plan > .btn.full{padding:12px} /* keep the centered premium card on one screen */ #bots{padding-top:22px} #botGridPub .plan{padding:18px 20px 16px} #botGridPub .tagx{margin-bottom:10px} #botGridPub .pline{min-height:2.1em;margin-bottom:11px} #botGridPub .pbig{margin-bottom:11px;padding-bottom:11px} #botGridPub .pbig .pr{font-size:33px} #botGridPub .claim{margin-bottom:11px} #botGridPub .claim-price{font-size:21px} #botGridPub .pspecs{margin:0 0 11px;padding-top:10px} #botGridPub .pspecs li{font-size:12px} /* ===== the tile cap ===== Ten earlier versions of this tag piled up here, each overriding the last with !important, which is why it kept looking like a sticker. They are all gone. One rule: the tag is a lid across the full top edge of the card, corner to corner, raised off the surface by a hard bottom edge. */ #botGridPub .plan, #subGrid .plan{ position:relative; overflow:hidden; /* clips the cap to the card radius */ padding-top:46px; } #botGridPub .plan:not(:has(.tagx)), #subGrid .plan:not(:has(.tagx)){padding-top:18px} #botGridPub .tagx, #subGrid .tagx{ position:absolute; top:0; left:0; right:0; transform:none; margin:0; display:block; width:auto; text-align:center; padding:10px 16px 11px; border:0; border-radius:16px 16px 0 0; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#fff; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:linear-gradient(180deg,#8f88ff 0%,#6b63ff 48%,#4f47d6 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), /* lit top edge */ inset 0 -1px 0 rgba(0,0,0,.22), /* shaded underside */ 0 2px 0 rgba(45,40,116,.95), /* the hard lip it stands on */ 0 8px 18px -8px rgba(99,91,255,.75); /* it floats above the card */ z-index:4; } /* the Combo's corner ribbon duplicated the cap — it stays gone */ #botGridPub .plan.hi .ribbon, #subGrid .plan.hi .ribbon{display:none} /* the highlighted card gets a brighter cap so it still reads as the pick */ #botGridPub .plan.hi .tagx, #subGrid .plan.hi .tagx{ background:linear-gradient(180deg,#a49dff 0%,#7d75ff 48%,#5a52e6 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.22), 0 2px 0 rgba(52,46,132,.95), 0 10px 22px -8px rgba(99,91,255,.9); } /* ===== the claim button ===== A real pressable slab, full width, gold, that asks to be clicked. */ #botGridPub .claim, #subGrid .claim{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:12px 14px; margin-bottom:11px; border:1px solid rgba(232,196,106,.55); border-radius:13px; background:linear-gradient(180deg,rgba(232,196,106,.26) 0%,rgba(232,196,106,.11) 55%,rgba(232,196,106,.05) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 0 rgba(138,109,32,.85), /* the edge you press down onto */ 0 12px 24px -10px rgba(232,196,106,.6); transition:transform .1s ease, box-shadow .1s ease, border-color .15s ease; cursor:pointer; } #botGridPub .claim:hover, #subGrid .claim:hover{ transform:translateY(-2px); border-color:var(--gold); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 6px 0 rgba(138,109,32,.9), 0 18px 32px -10px rgba(232,196,106,.8); } #botGridPub .claim:active, #subGrid .claim:active{ transform:translateY(4px); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 rgba(138,109,32,.9), 0 4px 10px -8px rgba(232,196,106,.5); } #botGridPub .claim:focus-visible, #subGrid .claim:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; } /* "Claim 50% off" is the line that has to pull the click */ #botGridPub .claim b, #subGrid .claim b{ font-size:14px; color:var(--gold); letter-spacing:-.01em; } /* ===== clean landing: a section top lands flush under the 72px sticky nav ===== */ main section, main [id]{scroll-margin-top:72px} /* ===== each section owns the full screen: nothing else can peek in ===== */ main > section{ min-height:calc(100vh - 72px); display:flex; align-items:center; padding:56px 0; } main > section > .wrap{width:100%} @media(max-width:900px){ main > section{min-height:0;display:block;padding:52px 0} } .heroWrap{min-height:calc(100vh - 72px);display:flex;align-items:center} .heroWrap > .wrap{width:100%} @media(max-width:900px){.heroWrap{min-height:0;display:block}} /* small label used in the admin live-demo view */ .k2{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg3);font-weight:700;margin-bottom:3px} /* ---- the logo is the way home ---- The mark and the word are one link on every page, so wherever you are, clicking Envixin returns you to the landing page. nav's own 28px gap would push the two apart, hence the tighter gap inside the link. */ .homelink{display:inline-flex;align-items:center;gap:10px;text-decoration:none} .homelink .brand{color:var(--fg);transition:.15s} .homelink:hover .brand{color:var(--indigo2)} .homelink:hover .logo{box-shadow:0 0 0 3px rgba(99,91,255,.22)} .homelink .logo{transition:.15s} /* ================= fitting a section to a short screen ================= Nothing here changes a tall window. Below 900px of viewport height the vertical rhythm tightens; below 780px it tightens again and the reviews drop to a single row. The aim is that clicking any nav button lands you on a section you can read without scrolling. */ @media(max-height:900px){ main > section{padding:32px 0} /* hero: the paragraph is the only part with slack */ .heroWrap .lede{font-size:15px;line-height:1.6;margin-bottom:14px} .heroWrap .epills{gap:8px;margin-bottom:16px} .heroWrap h1{margin-bottom:12px} /* pricing: the two strips under the tiles carry the excess */ #bots .riskbar{padding:11px 15px;font-size:12.5px;margin-top:12px} #bots .riskbar b{font-size:13px} #botGridPub .plan{padding-top:42px} #botGridPub .pspecs li{font-size:12px} #botGridPub .d{-webkit-line-clamp:2} /* faq: side card and question rows */ #faq .sub{font-size:14px;margin-bottom:14px} .faqside .card{padding:18px} .pair{gap:9px;margin-top:14px} .pair div{padding:10px 12px;font-size:13px} .q > button{padding:13px 0;font-size:15px} .q .a{padding-bottom:14px;font-size:14px} /* reviews */ #reviews .sub{font-size:14px;margin-bottom:14px} .rev3{gap:12px} .rcard{padding:16px 18px} .rcard p{font-size:14px;line-height:1.55; display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} } @media(max-height:780px){ main > section{padding:26px 0} .heroWrap .lede{font-size:14.5px; display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .heroWrap .tagp{margin-bottom:12px} #botGridPub .plan{padding-top:40px;padding-bottom:14px} #botGridPub .pbig{padding:10px 12px;margin-bottom:8px} #botGridPub .pbig .pr{font-size:27px} #botGridPub .claim{padding:10px 12px;margin-bottom:9px} #bots .riskbar{padding:9px 14px;font-size:12px} .faqside .card{padding:15px} .pair div{padding:9px 11px;font-size:12.5px} .q > button{padding:11px 0;font-size:14.5px} /* pricing is the densest section, so it needs the most work. Nothing is removed — the description, the specs and the claim button all stay. They are simply set tighter so the whole tile clears the fold. */ #bots{padding-top:22px;padding-bottom:22px} #bots .riskbar{padding:8px 13px;font-size:11.5px;margin-top:10px} #bots .salesrow{padding:10px 15px;margin-top:11px;font-size:13px} #botGridPub .ptitle{margin-bottom:6px} #botGridPub .pline{margin-bottom:6px; display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden} #botGridPub .pbig{padding:8px 11px;margin-bottom:8px} #botGridPub .pbig .pr{font-size:25px} #botGridPub .claim{padding:9px 11px;margin-bottom:8px} #botGridPub .claim-price{font-size:19px} #botGridPub .pspecs{margin:0 0 9px;padding-top:8px} #botGridPub .pspecs ul{--spec-gap:5px} #botGridPub .pspecs li{font-size:11.5px;line-height:1.35;padding-left:17px} #botGridPub .plan > .btn.full{padding:10px} #bots .salesrow{padding:9px 14px;margin-top:10px;gap:12px} #bots .salesrow b{font-size:13.5px} #bots .salesrow span{font-size:12.5px} #botGridPub .ptitle{margin-bottom:4px} #botGridPub .plan{padding-top:37px;padding-bottom:13px} #botGridPub .claim{padding:8px 11px;margin-bottom:7px} #botGridPub .claim s{margin-top:0} #botGridPub .pspecs ul{--spec-gap:4px} #botGridPub .pspecs li{line-height:1.3} #botGridPub .plan > .btn.full{padding:9px;font-size:14px} /* last 36px: the risk bar onto fewer lines, the claim slab and the spec list a shade tighter. Measured, not guessed — see the fit ladder note. */ #bots .riskbar{padding:7px 13px;font-size:11.5px;line-height:1.45;gap:6px} #bots .riskbar b{font-size:12px} #botGridPub .ptitle{margin-bottom:3px} #botGridPub .ptitle h3{font-size:18px} #botGridPub .claim-price{line-height:1.05} #botGridPub .claim-was{margin-top:0} #botGridPub .claim b{line-height:1.2} #botGridPub .claim s{font-size:11px;line-height:1.3} #botGridPub .pspecs{padding-top:7px;margin-bottom:8px} #botGridPub .pspecs-h{margin-bottom:6px} #botGridPub .pspecs ul{--spec-gap:3px} #botGridPub .pspecs li{line-height:1.25} #bots{padding-top:26px;padding-bottom:26px} #bots .riskbar{margin-top:14px} /* one row of reviews instead of two */ .rev3{grid-template-columns:repeat(4,1fr);gap:10px} .rcard{padding:14px 15px} .rcard p{-webkit-line-clamp:5;font-size:13px} .rcard .rstars{font-size:12px} } /* Below ~660px of height nothing sensible fits, so stop pretending: let the page scroll normally rather than crushing the type into unreadability. */ @media(max-height:660px){ main > section, .heroWrap{min-height:0;display:block} } /* the enterprise strip under the pricing grid */ .salesrow{margin-top:16px;padding:16px 20px;background:var(--surface); border:1px solid var(--line);border-radius:15px; display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap} .salesrow > div{min-width:0} .salesrow b{font-weight:700;display:block} .salesrow span{color:var(--fg2);font-size:14px} /* ================= the seam between two sections ================= Every section is exactly one screen tall, so scrolling from one to the next has no natural gap to signal the change. A hairline that fades out at both ends marks the boundary without drawing a hard line across the page. */ main > section{position:relative} main > section + section::before, .heroWrap + section::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:min(1120px,92%); height:1px; pointer-events:none; background:linear-gradient(90deg,transparent,var(--line2) 22%,var(--line2) 78%,transparent); } /* an .alt section already changes background, so it does not need the line too */ main > section.alt + section::before, main > section.alt::before{opacity:.45} /* ---- the 3D decision engine ---- The robot canvas sits over the candle chart with a transparent background, so the engine looks like it is watching the market behind it. */ .engstack{min-height:220px} .engstack #eng{position:relative;background:transparent;z-index:1} .engRead{position:absolute;left:14px;bottom:12px;z-index:2;pointer-events:none; font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700; color:var(--fg3);background:rgba(6,8,14,.55);border:1px solid rgba(255,255,255,.09); border-radius:99px;padding:5px 12px;backdrop-filter:blur(6px)} .engRead b{color:var(--fg);font-family:"JetBrains Mono",monospace;font-size:13.5px} /* ================= the half-price offer ================= This used to say the same thing four times: a LIFETIME chip, the discounted price, "normally $199" printed directly under the $199 already shown above it, "Claim 50% off", "Half price for life", and "Claim it". Six competing pieces of text in one small slab, which is why it read as a sticker stuck on the tile rather than an offer worth taking. It says it once now — what the price becomes, why, what it costs you, and one thing to press. Gold is kept to the number and the button so the rest of the tile stays calm. */ #botGridPub .claim{ position:relative; display:flex; align-items:center; gap:14px; width:100%; text-align:left; margin:0 0 11px; padding:12px 13px 12px 16px; cursor:pointer; border:1px solid rgba(232,196,106,.34); border-radius:14px; background: linear-gradient(180deg, rgba(232,196,106,.11), rgba(232,196,106,.03)), var(--surface2); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 3px 0 rgba(120,94,26,.55), 0 10px 22px -14px rgba(232,196,106,.5); transition:transform .12s ease, box-shadow .12s ease, border-color .16s ease; } /* a hairline of gold down the leading edge: the detail that reads as premium without adding another block of colour */ #botGridPub .claim::before{ content:""; position:absolute; left:0; top:11px; bottom:11px; width:2px; border-radius:0 2px 2px 0; background:linear-gradient(180deg,var(--gold),rgba(232,196,106,.15)); } #botGridPub .claim:hover{ transform:translateY(-2px); border-color:rgba(232,196,106,.62); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 5px 0 rgba(120,94,26,.60), 0 16px 30px -14px rgba(232,196,106,.75); } #botGridPub .claim:active{ transform:translateY(3px); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 rgba(120,94,26,.6); } #botGridPub .claim:focus-visible{outline:2px solid var(--gold);outline-offset:3px} #botGridPub .claim-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1} #botGridPub .claim-lbl{ font-size:9.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:rgba(232,196,106,.72); } #botGridPub .claim-row{display:flex;align-items:baseline;gap:8px} #botGridPub .claim-price{ font-family:"JetBrains Mono",monospace; font-size:23px; font-weight:800; letter-spacing:-.035em; line-height:1.05; color:var(--gold); } #botGridPub .claim-price i{font-size:11.5px;font-style:normal;font-weight:700;opacity:.7} #botGridPub .claim-was{ font-size:12px; font-weight:600; color:var(--fg3); text-decoration:line-through; } /* No clamp. A clamp on this line cut the sentence off mid-word on short screens — it needed three lines and was given one. The copy is short enough to fit instead, which is the right fix. */ #botGridPub .claim-note{font-size:11.5px; line-height:1.4; color:var(--fg2)} #botGridPub .claim-go{ flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:800; color:#1A1405; background:linear-gradient(180deg,#F3DC9C,var(--gold)); border-radius:99px; padding:7px 13px; box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 2px 0 rgba(120,94,26,.75); } #botGridPub .claim:hover .claim-go{ box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 3px 0 rgba(120,94,26,.85); } #botGridPub .claim-go .arw{color:#1A1405} /* the same slab once it is claimed — a confirmation, not another shout */ #botGridPub .claimed{ margin:0 0 11px; padding:11px 14px; border-radius:14px; text-align:left; border:1px solid rgba(61,220,151,.30); background:rgba(61,220,151,.08); } #botGridPub .claimed b{display:block;font-size:13px;font-weight:700;color:var(--green)} #botGridPub .claimed s{ display:block;text-decoration:none;font-size:11.5px;color:var(--fg2);margin-top:2px; } /* short screens lose padding, never a line of meaning */ @media(max-height:900px){ #botGridPub .claim{padding:10px 12px 10px 14px;margin-bottom:9px;gap:11px} #botGridPub .claim-price{font-size:21px} #botGridPub .claimed{padding:9px 12px;margin-bottom:9px} } @media(max-height:780px){ #botGridPub .claim{padding:9px 11px 9px 13px;margin-bottom:8px;gap:10px} #botGridPub .claim-price{font-size:19px} #botGridPub .claim-go{padding:6px 11px;font-size:12px} #botGridPub .claimed{padding:8px 12px;margin-bottom:8px} } /* ---- the renewal reminder ---- Nothing charges automatically, so this warning is the only thing standing between a customer and an unnoticed gap in their trading. It is deliberately loud, and it appears from ten days out, matching the email and text. */ .renewnag{margin-top:10px;padding:12px 14px;border-radius:12px; border:1px solid rgba(245,181,68,.34);background:rgba(245,181,68,.09); display:flex;align-items:center;gap:12px;flex-wrap:wrap} .renewnag b{font-size:13.5px;color:var(--amber);flex:0 0 auto} .renewnag s{text-decoration:none;font-size:12.5px;color:var(--fg2);flex:1;min-width:180px;line-height:1.45} .renewnag .btn{margin-left:auto;flex:0 0 auto} /* ---- payment confirmation ---- */ .okmark{width:56px;height:56px;margin:0 auto;border-radius:50%;display:grid;place-items:center; font-size:26px;font-weight:800;color:#04120B;background:linear-gradient(180deg,#6EF0BC,var(--green)); box-shadow:0 10px 26px -10px rgba(61,220,151,.8), inset 0 1px 0 rgba(255,255,255,.5)} /* ---- what you actually run it with ---- Managed customers get the app; self-hosted customers get the installer. Only one of these ever appears on a licence, and only once it is bound. */ .runbox{margin-top:10px} .runb{padding:13px 15px;border-radius:12px;border:1px solid var(--line2);background:var(--bg2)} .runb b{display:block;font-size:13.5px;color:var(--fg);margin-bottom:3px} .runb s{text-decoration:none;display:block;font-size:12.5px;color:var(--fg2);line-height:1.5} /* ---- offers ---- Gold, because it is the one thing on the page that saves the customer money, and it appears in exactly two places: the dashboard and the bind box. */ .offerCard{border:1px solid rgba(232,196,106,.34);border-radius:14px;padding:14px 15px; background:linear-gradient(180deg,rgba(232,196,106,.10),rgba(232,196,106,.03)),var(--surface2)} .offerTop{display:flex;align-items:center;gap:9px;margin-bottom:6px;flex-wrap:wrap} .offerTop b{font-size:14.5px;color:var(--fg);letter-spacing:-.01em} .offerTag{font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase; color:#1A1405;background:var(--gold);border-radius:99px;padding:3px 8px} .offerCard s{text-decoration:none;display:block;font-size:12.5px;color:var(--fg2);line-height:1.5} .offerPills{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px} .offerPills span{font-size:11.5px;font-weight:700;color:var(--gold); border:1px solid rgba(232,196,106,.35);border-radius:99px;padding:4px 10px} .offerBrokers{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px} /* ---- the one thing left to do ---- Shown only while a paid licence has no account behind it. It is the whole reason the dashboard exists at that moment, so it sits above everything. */ .askbind{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px; padding:15px 17px;border-radius:14px;border:1px solid rgba(99,91,255,.42); background:linear-gradient(180deg,rgba(99,91,255,.16),rgba(99,91,255,.05)),var(--surface2)} .askbind .askb-l{flex:1;min-width:220px} .askbind b{display:block;font-size:15px;color:var(--fg);margin-bottom:3px} .askbind s{text-decoration:none;display:block;font-size:12.5px;color:var(--fg2);line-height:1.5} .askbind .btn{flex:0 0 auto} /* ---- the two doors after binding ---- */ .ibsplit{display:grid;gap:10px;margin-top:16px} .ibpick{display:flex;align-items:center;gap:12px;text-align:left;width:100%; padding:13px 15px;border-radius:12px;border:1px solid var(--line2);background:var(--bg2); transition:.15s;cursor:pointer} .ibpick:hover{border-color:var(--indigo);background:var(--surface2)} .ibpick b{display:block;font-size:14px;color:var(--fg)} .ibpick s{text-decoration:none;display:block;font-size:12.5px;color:var(--fg2); margin-top:3px;line-height:1.45} .ibpick .arw{margin-left:auto;color:var(--indigo2);flex:0 0 auto} .ibpick > span:first-child{flex:1;min-width:0} /* an account the broker says is already under our link */ .ibacct{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin-bottom:8px; padding:12px 14px;border-radius:11px;border:1px solid var(--line2);background:var(--bg2); transition:.15s;cursor:pointer} .ibacct:hover{border-color:var(--green);background:var(--surface2)} .ibacct b{font-size:15px;color:var(--fg)} .ibacct s{text-decoration:none;display:block;font-size:12px;color:var(--fg3);margin-top:2px} .ibacct > span:first-child{flex:1;min-width:0} .ibacct .arw{color:var(--green)} /* add-to-home-screen steps, one line per platform */ .pwasteps{margin-top:11px;display:grid;gap:6px;padding-top:10px;border-top:1px solid var(--line)} .pwasteps div{font-size:12px;color:var(--fg2);line-height:1.5} .pwasteps i{font-style:normal;font-weight:800;color:var(--fg3);display:inline-block; min-width:58px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase} .pwasteps b{color:var(--fg)} /* ---- the trader dashboard ---- No sidebar, no terminal. One column, because there is only ever one thing to do next on it. */ /* No min-height: .shell already covers the viewport, and any guess at the header height here is a guess that makes the page overflow itself. */ .tdash{padding:34px 0 34px} .tdash > .wrap{max-width:760px} .greet{margin-bottom:22px} .greet-k{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800; color:var(--green);margin-bottom:8px} .greet h1{font-size:clamp(24px,3.4vw,32px);letter-spacing:-.03em;line-height:1.2} .greet h1 em{font-style:normal;color:var(--indigo2)} .greet p{color:var(--fg2);font-size:14.5px;margin-top:8px;max-width:62ch;line-height:1.6} .greet.slim h1{font-size:clamp(20px,2.6vw,25px)} /* the three buttons, and the sentence that says what they really do */ .botctl{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:10px; padding:11px 13px;border-radius:12px;border:1px solid var(--line);background:var(--surface)} .botctl span{font-size:12.5px;color:var(--fg3);flex:1;min-width:170px;line-height:1.45} .acctpick{margin-top:4px} /* ---- the trader sidebar ---- Four entries, all of them things the customer owns. It was removed once for being a trading terminal's menu; this version is not that. */ .side.slim a{font-size:14.5px} .tdash{padding-top:8px} /* the licence key, which is also the way in to binding an account */ .keyrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .keybtn{display:inline-flex;align-items:center;gap:9px;padding:7px 12px;border-radius:10px; border:1px dashed var(--line2);background:var(--bg2);cursor:pointer;transition:.15s} .keybtn:hover{border-color:var(--indigo);background:var(--surface2)} .keybtn .k{font-family:"JetBrains Mono",monospace;font-size:14px;letter-spacing:.06em;color:var(--fg3)} .keybtn .hint{font-size:11.5px;color:var(--indigo2);font-weight:700} /* invoice */ .invoice{border:1px solid var(--line);border-radius:14px;background:var(--surface); padding:16px 18px;margin-bottom:16px} .invoice h3{font-size:15px;margin-bottom:2px} .invoice .inv-no{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--fg3)} .invoice .line{border-bottom:1px solid var(--line)} .invoice .line:last-child{border-bottom:0} /* the file you download, with the date it stops working */ .exfile{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-top:10px; padding:13px 15px;border-radius:12px;border:1px solid var(--line2);background:var(--bg2)} .exfile .ic{width:38px;height:38px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center; font-size:11px;font-weight:800;letter-spacing:.02em;color:#04120B; background:linear-gradient(180deg,#6EF0BC,var(--green))} .exfile .nm{flex:1;min-width:180px} .exfile .nm b{display:block;font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--fg)} .exfile .nm s{text-decoration:none;display:block;font-size:12px;color:var(--fg3);margin-top:2px} .exvalid{font-size:12px;font-weight:700;color:var(--amber);white-space:nowrap} /* managed, while the server is being built */ .provisioning{margin-top:10px;padding:14px 16px;border-radius:12px; border:1px solid rgba(99,91,255,.34);background:rgba(99,91,255,.08)} .provisioning b{display:block;font-size:14px;color:var(--fg);margin-bottom:4px} .provisioning s{text-decoration:none;display:block;font-size:12.5px;color:var(--fg2);line-height:1.5} .provbar{height:4px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:11px} .provbar i{display:block;height:100%;width:38%;border-radius:99px; background:linear-gradient(90deg,var(--indigo),var(--cyan));animation:provslide 1.7s ease-in-out infinite} @keyframes provslide{0%{margin-left:-38%}100%{margin-left:100%}} @media(prefers-reduced-motion:reduce){.provbar i{animation:none;width:100%}} /* ---- the app's account line ---- One row instead of a panel. Small type, heavy weight: readable at a glance without claiming the top of the screen. */ .acctline{display:grid;grid-template-columns:repeat(3,1fr);gap:8px; padding:9px 12px;border-radius:11px;border:1px solid var(--line);background:var(--surface)} .acctline i{display:block;font-style:normal;font-size:8px;letter-spacing:.1em; text-transform:uppercase;color:var(--fg3);font-weight:700;margin-bottom:2px} .acctline b{display:block;font-size:13px;font-weight:800;letter-spacing:-.02em;line-height:1.1} /* the trades list now takes whatever is left, and scrolls only if it must */ .tradewin{flex:1;display:flex;flex-direction:column;min-height:0} .tradewin #tlist{flex:1;min-height:0;overflow-y:auto} /* ================= the simple dashboard ================= Left: the one thing you do. Right: what you bought. Nothing else. */ .dashsplit{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start} @media(max-width:900px){.dashsplit{grid-template-columns:1fr}} .runcard{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:20px 22px} .runhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px} .runhead b{font-size:18px;letter-spacing:-.02em} .runlede{color:var(--fg2);font-size:14px;line-height:1.6;margin-bottom:13px;max-width:60ch} .applink{display:flex;gap:9px;flex-wrap:wrap} /* the how-to video, sitting under the download where it is needed */ .howvid{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin-top:11px; padding:12px 14px;border-radius:12px;border:1px solid var(--line2);background:var(--bg2); cursor:pointer;transition:.15s} .howvid:hover{border-color:var(--indigo);background:var(--surface2)} .howvid .vp{width:34px;height:34px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center; font-size:12px;color:#fff;background:linear-gradient(135deg,var(--indigo),#4F46E5)} .howvid b{display:block;font-size:14px;color:var(--fg)} .howvid s{text-decoration:none;display:block;font-size:12px;color:var(--fg3);margin-top:2px} .expnote{font-size:12px;color:var(--fg3);line-height:1.55;margin-top:11px} .expnote b{color:var(--amber)} /* the subscription card */ .plancard{border:1px solid var(--line);border-radius:16px;background:var(--bg2);padding:18px} .pc-k{font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:800; color:var(--fg3);margin-bottom:8px} .pc-bot{display:block;font-size:17px;letter-spacing:-.02em} .pc-host{font-size:12.5px;color:var(--fg3);margin-top:2px} .pc-price{display:flex;align-items:baseline;gap:6px;margin:14px 0 14px; padding-bottom:14px;border-bottom:1px solid var(--line)} .pc-price b{font-size:26px;font-weight:800;letter-spacing:-.035em} .pc-price s{text-decoration:none;font-size:12.5px;color:var(--fg3)} .pc-row{display:flex;justify-content:space-between;gap:10px;align-items:baseline; padding:6px 0;font-size:13px;color:var(--fg2)} .pc-row b{color:var(--fg);font-weight:600;text-align:right} .pc-warn{margin-top:11px;padding:9px 11px;border-radius:10px;font-size:11.5px;line-height:1.5; color:var(--amber);background:rgba(245,181,68,.09);border:1px solid rgba(245,181,68,.3)} /* ---- the licence agent, and how long since it spoke to us ---- Colour is the whole message here: green means the licence is current, amber means it has been quiet a day, red means the bot is trading on an answer that is now three days old. */ .agentrow{display:flex;align-items:center;gap:9px;margin-top:11px;padding:9px 12px; border-radius:10px;border:1px solid var(--line);background:var(--bg2);font-size:12.5px;color:var(--fg2)} .agentrow b{color:var(--fg);font-weight:600} .agentrow .dot2{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--fg3)} .agentrow.ok .dot2{background:var(--green);box-shadow:0 0 0 3px rgba(61,220,151,.16)} .agentrow.warn .dot2{background:var(--amber);box-shadow:0 0 0 3px rgba(245,181,68,.16)} .agentrow.bad .dot2{background:var(--red);box-shadow:0 0 0 3px rgba(255,107,122,.18)} .agentrow.bad{border-color:rgba(255,107,122,.34);background:rgba(255,107,122,.07)} /* the sentence that says, plainly, when this licence stops */ .pc-valid{margin:2px 0 12px;padding:10px 12px;border-radius:10px;font-size:12.5px;line-height:1.5; color:var(--fg2);background:rgba(61,220,151,.08);border:1px solid rgba(61,220,151,.26)} .pc-valid b{color:var(--green)} .pc-valid.soon{background:rgba(245,181,68,.09);border-color:rgba(245,181,68,.3)} .pc-valid.soon b{color:var(--amber)} .pc-note{font-size:11.5px;color:var(--fg3);line-height:1.5;margin-top:9px} /* subscriptions that have ended */ .pastrow{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)} .pastrow div{flex:1;min-width:0} .pastrow b{display:block;font-size:13.5px;color:var(--fg2)} .pastrow s{text-decoration:none;display:block;font-size:11.5px;color:var(--fg3);margin-top:2px} /* ================= dashboard: one column per view ================= The old dashboard was two columns because it had to say everything at once. Now each view answers one question, so a single readable column is enough — and a column that stops at 620px is easier to read than one that stretches to whatever the window happens to be. */ .onecol{max-width:620px} /* a labelled field: the label sits above, small and quiet */ .fld{display:block;margin-top:12px} .fld>span{display:block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase; color:var(--fg3);margin-bottom:6px;font-weight:600} .fld input,.fld textarea,.fld select{font-size:14px;padding:11px 13px} .fld textarea{resize:vertical;min-height:76px;line-height:1.55} .fld input:disabled{color:var(--fg3);background:var(--bg1);cursor:not-allowed} .fld+.btn{margin-top:13px} /* a checkbox with an explanation under it, rather than a bare label */ .tickrow{display:flex;gap:11px;align-items:flex-start;cursor:pointer;padding:2px 0} .tickrow input{width:16px;height:16px;flex:0 0 auto;margin-top:2px;accent-color:var(--indigo)} .tickrow b{display:block;font-size:13.5px;color:var(--fg)} .tickrow s{text-decoration:none;display:block;font-size:12px;color:var(--fg3); line-height:1.55;margin-top:3px} /* the two download helpers, side by side */ .dlrow{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:11px} .dlrow .howvid{margin-top:0} /* ---- help: the questions ---- */ .faqrow{border-top:1px solid var(--line);padding:2px 0} .faqrow:first-of-type{border-top:0} .faqrow summary{list-style:none;cursor:pointer;padding:12px 26px 12px 0;position:relative; font-size:13.5px;font-weight:600;color:var(--fg2);line-height:1.5} .faqrow summary::-webkit-details-marker{display:none} .faqrow summary:hover{color:var(--fg)} .faqrow summary::after{content:'+';position:absolute;right:2px;top:11px;font-size:16px; color:var(--fg3);font-weight:400} .faqrow[open] summary::after{content:'\2212'} .faqrow[open] summary{color:var(--fg)} .faqrow p{font-size:13px;color:var(--fg2);line-height:1.65;padding:0 0 13px} /* ---- help: chat or ticket ---- */ .helpdoors{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:12px} .hdoor{text-align:left;padding:15px 16px;border-radius:13px;border:1px solid var(--line2); background:var(--bg1);transition:.16s} .hdoor:hover{border-color:var(--indigo);background:var(--bg2);transform:translateY(-1px)} .hdoor b{display:block;font-size:14px;color:var(--fg);margin-bottom:4px} .hdoor s{text-decoration:none;display:block;font-size:12px;color:var(--fg3);line-height:1.55} @media(max-width:620px){.helpdoors,.dlrow{grid-template-columns:1fr}} /* ---- tickets: the list ---- Status is first because it is the only thing they opened this page to see: has anyone looked at it yet. */ .tkrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left; padding:12px 2px;border-top:1px solid var(--line)} .tkrow:hover{background:var(--bg2)} .tkstate{flex:0 0 auto} .tkmain{flex:1;min-width:0} .tkmain b{display:block;font-size:13.5px;color:var(--fg);white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .tkmain s{text-decoration:none;display:block;font-size:11.5px;color:var(--fg3);margin-top:3px} .tkrow .arw{color:var(--fg3);flex:0 0 auto} .tkrow:hover .arw{color:var(--indigo2)} /* ---- tickets: the thread ---- */ .tkhead{display:flex;align-items:flex-start;gap:12px} .tkhead>div{flex:1;min-width:0} .tkhead s{text-decoration:none;display:block;font-size:11.5px;color:var(--fg3);margin-top:5px} .tkwho{font-size:12px;color:var(--fg3);margin-top:9px;padding-bottom:11px; border-bottom:1px solid var(--line)} .tkthread{max-height:44vh;overflow:auto;margin-top:4px} .tkmsg{padding:12px 0;border-bottom:1px solid var(--line)} .tkmsg:last-child{border-bottom:0} .tkfrom{font-size:11px;letter-spacing:.05em;text-transform:uppercase;font-weight:700; color:var(--fg3);margin-bottom:5px} .tkmsg.support .tkfrom{color:var(--indigo2)} .tkmsg p{font-size:13.5px;color:var(--fg2);line-height:1.65;white-space:pre-wrap} .tkmsg.support{padding-left:12px;border-left:2px solid var(--indigo); margin-left:-14px;padding-right:0} /* unread tickets, in the admin sidebar */ .sidecount{display:inline-block;min-width:18px;padding:0 5px;margin-left:6px; border-radius:9px;background:var(--red);color:#fff;font-size:10.5px;font-weight:700; line-height:18px;text-align:center;vertical-align:middle} /* ---- subscription card, rebuilt around the days remaining ---- */ .pc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px} .pc-rate{text-align:right;flex:0 0 auto;padding-top:2px} .pc-rate b{font-size:17px;color:var(--fg);display:block;line-height:1.2} .pc-rate s{text-decoration:none;font-size:11px;color:var(--fg3)} /* the number they came for */ .pc-until{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:14px 0 4px; padding:14px 16px;border-radius:12px; background:rgba(61,220,151,.08);border:1px solid rgba(61,220,151,.26)} .pc-until b{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:30px;line-height:1; color:var(--green);font-variant-numeric:tabular-nums} .pc-until span{font-size:13.5px;color:var(--fg2);font-weight:600} .pc-until s{text-decoration:none;flex:1 0 100%;font-size:12px;color:var(--fg3);margin-top:5px} .pc-until.soon{background:rgba(245,181,68,.09);border-color:rgba(245,181,68,.3)} .pc-until.soon b{color:var(--amber)} /* renew and cancel share a row instead of stacking */ .pc-acts{display:grid;grid-template-columns:1.6fr 1fr;gap:9px;margin-top:14px} .pc-acts .btn{width:100%} /* ================= dashboard finish ================= Scoped to .side and the dashboard cards so the landing page cannot move — the guard verifies that after every change here. */ /* icons on one grid at one stroke weight, so the sidebar reads as a column rather than as six unrelated characters */ .side .ico{width:19px;height:19px;flex:0 0 19px;opacity:.72;transition:.15s} .side a{gap:12px} .side a:hover .ico,.side a.on .ico{opacity:1} .side a>span:first-of-type{flex:1;min-width:0} .side .sidecount{flex:0 0 auto;margin-left:0} .btn .ico.bi{width:17px;height:17px;flex:0 0 17px;margin-right:1px} /* the leading action is confident without being a slab; the lift on hover carries the emphasis instead of raw area */ .runcard > .btn.full{padding:13px 22px;font-size:14.5px} /* gold that reads as metal rather than mustard: darker base, lit top edge, and a hairline so it sits on the dark card instead of glowing off it */ .btn.gold{background:linear-gradient(180deg,#EBD3A0 0%,#C9A959 100%); color:#1A1405;border:1px solid rgba(255,255,255,.22); box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 2px 10px -4px rgba(201,169,89,.45)} .btn.gold:hover{background:linear-gradient(180deg,#F2DDAF 0%,#D2B264 100%); box-shadow:0 1px 0 rgba(255,255,255,.34) inset,0 10px 24px -10px rgba(201,169,89,.55)} /* one internal rhythm instead of six different margins */ .plancard,.runcard{padding:22px} .runcard .exfile{margin-top:14px} .pc-row{padding:9px 0} .pc-note{margin-top:11px} .exfile .nm b{font-size:14px;letter-spacing:-.01em} /* where the controls really are, for a bot on the customer's own machine */ .runfoot{font-size:12px;color:var(--fg3);line-height:1.6;margin-top:12px; padding-top:12px;border-top:1px solid var(--line)} /* the two guide tiles carry icons from the same set as the sidebar */ .howvid .vp svg{width:17px;height:17px;display:block} .howvid .vp{display:flex;align-items:center;justify-content:center} /* ---- views fill the width, reading columns stay centred ---- A card capped at 620px and pinned left leaves two thirds of a wide screen empty on one side, which reads as a broken layout rather than a margin. */ /* The column is as wide as the cards inside it and no wider, then centred, so the heading, the cards and the trailing button all start at the same x. */ /* Use the width. The cap was there to stop a thin card being stretched into a canyon; the card now rearranges when it is wide, so it does not need one. */ .viewcol{width:100%} .viewcol.full{max-width:100%} .onecol{max-width:620px;margin-inline:auto} .viewlede{font-size:14px;color:var(--fg2);line-height:1.6;margin:0 0 16px;max-width:70ch} .viewlede b{color:var(--fg);font-weight:600} /* Cards flow into as many columns as fit and stretch to fill the row. auto-FIT, not auto-fill: auto-fill keeps the empty tracks, which is what left 400px of nothing to the right of three cards on a 1920px screen. */ .cardgrid{display:grid;gap:14px;align-items:start; grid-template-columns:repeat(auto-fit,minmax(340px,1fr))} /* Downloads has enough in each card to carry a full-width column, so it keeps stretching; the subscription cards do not, so they stop at their natural size and the row centres instead of leaving a hole on one side. */ .cardgrid.wide{justify-content:stretch; grid-template-columns:repeat(auto-fit,minmax(440px,1fr))} .cardgrid > *{margin-bottom:0 !important} /* Each card measures the space it was given rather than the window, because the same card is 1,684px wide alone and 411px wide as one of four — at the very same viewport. The wrapper is the container: a container query styles what is INSIDE a container, never the container element itself. */ .cq{container-type:inline-size;min-width:0} .cq > *{width:100%} /* ---- the validity block ---- */ .plancard.pcard .pc-top{align-items:flex-start} .pc-until{display:block;margin:15px 0 6px;padding:15px 16px 13px;border-radius:13px; background:linear-gradient(180deg,rgba(61,220,151,.10),rgba(61,220,151,.04)); border:1px solid rgba(61,220,151,.24)} .pu-top{display:flex;align-items:flex-end;justify-content:space-between;gap:14px} .pu-n{display:flex;align-items:baseline;gap:7px;min-width:0} .pu-n b{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:34px;line-height:.95; color:var(--green);font-variant-numeric:tabular-nums;letter-spacing:-.02em} .pu-n span{font-size:13px;color:var(--fg2);font-weight:600} .pu-to{text-align:right;font-size:11px;color:var(--fg3);line-height:1.5;flex:0 0 auto} .pu-to b{display:block;font-size:12.5px;color:var(--fg2);font-weight:600;margin-top:1px} /* the bar drains as the licence does */ .pu-bar{height:4px;border-radius:99px;background:rgba(255,255,255,.07);margin-top:13px;overflow:hidden} .pu-bar i{display:block;height:100%;border-radius:99px;background:var(--green); box-shadow:0 0 10px -1px rgba(61,220,151,.55)} .pu-foot{font-size:11px;color:var(--fg3);margin-top:8px} .pc-until.warn{background:linear-gradient(180deg,rgba(245,181,68,.11),rgba(245,181,68,.04)); border-color:rgba(245,181,68,.28)} .pc-until.warn .pu-n b{color:var(--amber)} .pc-until.warn .pu-bar i{background:var(--amber);box-shadow:0 0 10px -1px rgba(245,181,68,.55)} .pc-until.bad{background:linear-gradient(180deg,rgba(255,107,122,.11),rgba(255,107,122,.04)); border-color:rgba(255,107,122,.3)} .pc-until.bad .pu-n b{color:var(--red)} .pc-until.bad .pu-bar i{background:var(--red);box-shadow:0 0 10px -1px rgba(255,107,122,.55)} @media(max-width:520px){ .cardgrid,.cardgrid.wide{grid-template-columns:1fr} .pu-top{flex-direction:column;align-items:flex-start;gap:8px} .pu-to{text-align:left} } /* the account is what tells two licences for the same bot apart, so it is in the header rather than buried in a filename */ .rh-acct{font-size:11.5px;color:var(--fg3);background:var(--bg2);border:1px solid var(--line); padding:3px 8px;border-radius:99px;letter-spacing:.01em} .plancard.pcard .pc-host .mono{color:var(--fg2)} /* ---- a download card with room to breathe ---- The file and its button lead; the two guides and the agent line move beside them instead of pushing the card twice as tall as it needs to be. */ @container (min-width:620px){ .runcard{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:0 24px;align-items:start} .runcard .runhead{grid-column:1 / -1} .runcard .exfile{grid-column:1} .runcard > .btn.full{grid-column:1} .runcard .dlrow{grid-column:2;grid-row:2 / span 2;margin-top:14px; grid-template-columns:1fr;align-content:start} .runcard .agentrow{grid-column:1 / -1} .runcard .runfoot{grid-column:1 / -1} .runcard .botctl{grid-column:1 / -1} .runcard .provisioning,.runcard .applink,.runcard .pwasteps,.runcard .applogin{grid-column:1 / -1} } /* the app login a managed customer was promised while the server was building */ .applogin{margin:4px 0 13px;padding:13px 15px;border-radius:12px; border:1px solid var(--line2);background:var(--bg2)} .applogin .al-k{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase; color:var(--fg3);font-weight:600;margin-bottom:8px} .applogin .al-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px; padding:5px 0;font-size:13px} .applogin .al-row span{color:var(--fg3)} .applogin .al-row b{color:var(--fg);font-size:13px} .applogin > s{text-decoration:none;display:block;font-size:11.5px;color:var(--fg3); line-height:1.55;margin-top:8px} /* where the broker discount stands, on the subscription page */ .ibnote{border:1px solid var(--line2);background:var(--bg2);border-radius:12px; padding:13px 16px;margin-bottom:14px;font-size:13px;color:var(--fg2);line-height:1.6;max-width:70ch} .ibnote b{color:var(--fg);font-weight:600} .ibnote.warn{background:rgba(245,181,68,.08);border-color:rgba(245,181,68,.3)} .ibnote.warn b{color:var(--amber)} .ibacts{display:flex;gap:9px;flex-wrap:wrap;margin-top:11px} /* swap managed for own VPS without losing what you already typed */ .hostswap{display:flex;align-items:center;gap:6px;width:100%;justify-content:center; margin-top:9px;padding:9px 12px;border-radius:10px;border:1px dashed var(--line2); background:none;color:var(--fg2);font-size:12.5px;transition:.15s} .hostswap:hover{border-color:var(--indigo);color:var(--indigo2);border-style:solid} /* what you are agreeing to, on the screen where the money moves */ .payterms{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding:12px 14px; border-radius:11px;border:1px solid var(--line);background:var(--bg2); font-size:12px;color:var(--fg3);line-height:1.6} .payterms b{color:var(--fg2);font-weight:600} /* the first question on the bill: which account, because it sets the price */ .acctbox{border:1px solid var(--line2);background:var(--bg2);border-radius:13px; padding:15px 16px;margin:4px 0 18px} .acctbox.done{background:rgba(61,220,151,.06);border-color:rgba(61,220,151,.26)} .ab-k{font-size:12.5px;color:var(--fg2);font-weight:600;margin-bottom:9px} input.ab-num{font-size:19px;letter-spacing:.11em} b.ab-num{display:block;font-size:19px;letter-spacing:.11em;color:var(--fg)} .ab-help{font-size:11.5px;color:var(--fg3);line-height:1.55;margin-top:7px} .ab-open{display:block;margin-top:12px;padding:11px 13px;border-radius:10px; border:1px solid var(--line2);background:var(--bg1);text-decoration:none;transition:.15s} .ab-open:hover{border-color:var(--gold);background:var(--bg2)} .ab-open b{display:block;font-size:13px;color:var(--gold)} .ab-open s{text-decoration:none;display:block;font-size:11.5px;color:var(--fg3); line-height:1.55;margin-top:3px} .acctbox .hostswap{margin-top:10px} /* what a discounted price commits them to, said before they pay */ .ibterm{font-size:11.5px;color:var(--fg3);line-height:1.6;margin:6px 0 2px; padding:9px 12px;border-radius:9px;background:rgba(232,196,106,.07); border:1px solid rgba(232,196,106,.22)} /* the saving, offered rather than demanded */ .ibsave{display:block;margin:10px 0 2px;padding:12px 14px;border-radius:11px; border:1px solid rgba(232,196,106,.3);background:rgba(232,196,106,.06); text-decoration:none;transition:.15s} .ibsave:hover{border-color:var(--gold);background:rgba(232,196,106,.1)} .ibsave b{display:block;font-size:13.5px;color:var(--gold)} .ibsave s{text-decoration:none;display:block;font-size:11.5px;color:var(--fg3); line-height:1.55;margin-top:3px} /* the card that stands between a paid licence and its file */ .bindcard .fld{margin-top:14px} .bindout{font-size:12.5px;line-height:1.6;margin-top:9px;min-height:18px;color:var(--fg3)} .bindout.busy{color:var(--fg3)} .bindout.bad{color:var(--fg2);padding:11px 13px;border-radius:10px; background:rgba(255,107,122,.07);border:1px solid rgba(255,107,122,.28)} .bindout.bad b{display:block;color:var(--red);margin-bottom:3px} /* the offer a full-price customer sees once, after paying */ .switchoffer{margin:14px 0;padding:14px 16px;border-radius:12px; background:rgba(232,196,106,.07);border:1px solid rgba(232,196,106,.28)} .switchoffer b{color:var(--gold);font-size:14px} .switchoffer > s{text-decoration:none;display:block;font-size:12.5px;color:var(--fg2); line-height:1.65;margin:6px 0 12px} .switchoffer > s b{color:var(--fg);font-size:12.5px} .so-or{display:block;font-size:11.5px;color:var(--fg3);margin-top:9px} /* a payment method that does not work yet, said plainly rather than hidden */ .paybtn.soon{opacity:.4;cursor:not-allowed;filter:grayscale(1)} .paybtn.soon:hover{border-color:var(--line2);transform:none} /* Binance Pay: an amount, a code, and a line that changes by itself */ .bpay{border:1px solid var(--line2);border-radius:13px;background:var(--bg2);padding:16px;text-align:center} .bp-head{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px; color:var(--fg2);font-weight:600} .bp-head .ic{color:var(--gold)} .bp-amt{margin:12px 0 4px} .bp-amt b{font-size:26px;color:var(--fg)} .bp-amt s{text-decoration:none;font-size:12px;color:var(--fg3);margin-left:6px} .bp-wait{font-size:13px;color:var(--fg2);margin-top:6px} .bp-note{font-size:11.5px;color:var(--fg3);line-height:1.55;margin-top:9px} /* what the offer actually gives them, three lines, no paragraphs */ .offerlist{display:flex;flex-direction:column;gap:1px;margin-top:16px;border-radius:12px;overflow:hidden; border:1px solid rgba(232,196,106,.28)} .offerlist > div{display:flex;align-items:baseline;gap:12px;padding:12px 15px; background:rgba(232,196,106,.06)} .offerlist b{flex:0 0 auto;min-width:74px;color:var(--gold);font-size:17px} .offerlist span{font-size:12.5px;color:var(--fg2);line-height:1.5} /* the whole bill, for a first purchase */ .paynow{border:1px solid var(--line2);background:var(--bg2);border-radius:13px; padding:18px 18px 16px;margin:6px 0 18px;text-align:center} .pn-k{font-size:12.5px;color:var(--fg2)} .pn-amt{display:block;font-size:40px;line-height:1.05;margin:8px 0 6px;color:var(--fg); letter-spacing:-.02em} .pn-sub{font-size:12px;color:var(--fg3);line-height:1.55;max-width:38ch;margin:0 auto} /* the terms, small, on the screen where the money moves */ .paysmall{font-size:11px;color:var(--fg3);line-height:1.6;margin-top:14px; padding-top:12px;border-top:1px solid var(--line)} /* paying by USDT: one network, one amount, one address */ .usdtpay{border:1px solid var(--line2);border-radius:13px;background:var(--bg2);padding:16px} .up-net{padding:10px 12px;border-radius:10px;margin-bottom:14px; background:rgba(245,181,68,.09);border:1px solid rgba(245,181,68,.3)} .up-net b{display:block;font-size:13px;color:var(--amber)} .up-net s{text-decoration:none;display:block;font-size:11.5px;color:var(--fg2); line-height:1.55;margin-top:3px} .up-k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg3);font-weight:600} .up-amt{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:5px} .up-amt b{font-size:31px;color:var(--fg);letter-spacing:-.01em} .up-amt s{text-decoration:none;font-size:13px;color:var(--fg3)} .up-copy{margin-left:auto;font-size:11.5px;color:var(--indigo2);background:none;border:0} .up-why{font-size:11.5px;color:var(--fg3);line-height:1.55;margin-top:6px} .up-wait{font-size:13px;color:var(--fg2);margin-top:14px;padding-top:12px; border-top:1px solid var(--line)} .up-note{font-size:11.5px;color:var(--fg3);line-height:1.55;margin-top:6px} /* the warning that stops somebody destroying their own money */ .up-warn{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px; border-radius:50%;background:var(--amber);color:#1A1405;font-weight:700;font-size:12px; margin-right:7px;vertical-align:-2px} .up-net b b{color:var(--amber)} /* the receipt, before we ask for anything else */ .paidok{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:12px; background:rgba(61,220,151,.08);border:1px solid rgba(61,220,151,.28);margin-bottom:14px} .po-tick{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--green); color:#04241A;display:grid;place-items:center;font-weight:700;font-size:14px} .paidok b{display:block;font-size:14px;color:var(--green)} .paidok s{text-decoration:none;display:block;font-size:12.5px;color:var(--fg2);margin-top:2px} /* the QR, beside the address rather than instead of it */ .up-qrwrap{display:flex;gap:14px;align-items:flex-start;margin-top:7px} .up-qr{flex:0 0 132px;width:132px;height:132px;background:#fff;border-radius:10px; padding:7px;display:grid;place-items:center} .up-qr svg{display:block;width:100%;height:100%} .up-qr svg rect{shape-rendering:crispEdges} .up-qrside{flex:1;min-width:0} .up-qrhint{font-size:11px;color:var(--fg3);line-height:1.55;margin-top:8px} .up-qrwrap.noqr .up-qr{display:none} @media(max-width:520px){ .up-qrwrap{flex-direction:column;align-items:stretch} .up-qr{align-self:center} } /* start fresh — development only, never rendered on a real domain */ .resetChip{position:fixed;left:14px;bottom:14px;z-index:60;display:flex;align-items:center;gap:7px; padding:8px 13px;border-radius:99px;border:1px dashed var(--line2);background:var(--bg1); color:var(--fg3);font-size:12px;opacity:.55;transition:.15s} .resetChip:hover{opacity:1;border-style:solid;border-color:var(--red);color:var(--red)} .resetChip svg{width:14px;height:14px} @media(max-width:620px){.resetChip{left:10px;bottom:10px;font-size:11px;padding:7px 11px}} /* ============ the subscription card: zones, not a stretched row ============ Stretching a card and filling it are different things. Three rows spread over 1364px left a label at one edge and its value at the other; these zones each carry something, and every label sits directly above its value. Measured on the CARD (.cq is the container), because one subscription is a 1364px card and two are 675px cards — a window query would hand a two-up row a three-column layout it has no room for. */ .plancard.pcard{display:grid;grid-template-columns:1fr;gap:0;padding:22px 24px} .pz{display:flex;flex-direction:column;min-width:0} .pz-what .pc-bot{font-size:21px;letter-spacing:-.025em} .pz-what .pc-host{font-size:12.5px;margin-top:3px} .pz-what .pc-rate{text-align:left;padding-top:0;margin-top:14px} .pz-what .pc-rate b{font-size:27px;font-weight:800;letter-spacing:-.035em;line-height:1.05} .pz-what .pc-rate s{font-size:12px} .pc-foot{font-size:11.5px;color:var(--fg3);line-height:1.55;margin-top:14px;max-width:30ch} /* label above value. At this width a label pinned left and its value pinned right is a row nobody reads across. */ .pz-facts{gap:15px;justify-content:flex-start} .pf{display:block;padding:0;border:0} .pf > span{display:block;font-size:10px;letter-spacing:.11em;text-transform:uppercase; color:var(--fg3);font-weight:700;margin-bottom:5px} .pf > b{display:block;font-size:15px;color:var(--fg);font-weight:600;letter-spacing:.01em; word-break:break-word} .pf > b.lic{font-size:13px;letter-spacing:.03em} .pz-time .pc-until{margin:0} .pz-time .pc-acts{margin-top:14px} /* two zones once the card can hold them */ @container (min-width:620px){ .plancard.pcard{grid-template-columns:minmax(0,1fr) minmax(285px,345px);gap:0 26px} .pz-what {grid-column:1;grid-row:1} .pz-facts{grid-column:1;grid-row:2;margin-top:20px} .pz-time {grid-column:2;grid-row:1 / span 2} .pz-what .pc-foot{margin-top:auto} } /* three once it can hold three, with a hairline where the eye expects one */ @container (min-width:980px){ .plancard.pcard{padding:24px 26px; grid-template-columns:minmax(230px,1fr) minmax(250px,1.05fr) minmax(300px,345px);gap:0 32px} .pz-what {grid-column:1;grid-row:1} .pz-facts{grid-column:2;grid-row:1;margin-top:0;position:relative;padding-left:32px} .pz-time {grid-column:3;grid-row:1} .pz-facts::before{content:'';position:absolute;left:0;top:3px;bottom:3px;width:1px; background:var(--line)} } /* ============ profile: two columns, paired so the heights agree ============ auto-fit put three cards across and orphaned the fourth beside a hole. The tall form sits beside the two short cards instead, and each column keeps its own rhythm. */ .profgrid{display:grid;gap:16px;align-items:start; grid-template-columns:minmax(340px,1fr) minmax(340px,1fr)} .pcol{display:flex;flex-direction:column;gap:16px;min-width:0} .profgrid .plancard{margin:0;padding:22px 24px} .profgrid .pf + .pf{margin-top:14px} .profgrid .pf:first-of-type{margin-top:2px} @media(max-width:900px){ .profgrid{grid-template-columns:1fr} } /* The broker discount, once it is theirs. Same shape as the button it replaces so the tile does not jump, but plainly not a thing to press again — being invited to claim something you already have reads as a shop that has not noticed you. */ .claim.done{cursor:default;opacity:.9} .claim.done .claim-tick{font-size:11px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--green)} /* What they paid for the month they are in, when it is not the rate shown above. Quiet, because it is reassurance rather than news — but present, because its absence is what made a customer think we had changed their price behind them. */ .pc-paid{font-size:11.5px;color:var(--fg3);line-height:1.55;margin-top:10px;max-width:32ch} .pc-paid b{color:var(--fg2)} /* ================= the bot library ================== One row per engine. What you need at a glance on the row, everything else behind the ⋯ — because most visits here are to look, not to edit, and the old screen opened every field of every bot at once. */ .botlist{display:flex;flex-direction:column;gap:10px} .botrow{display:flex;align-items:center;gap:18px;padding:16px 18px; border:1px solid var(--line);border-radius:14px;background:var(--bg2); transition:border-color .15s,background .15s} .botrow:hover{border-color:var(--line2);background:var(--surface)} .botrow.off{opacity:.58} .br-main{flex:1;min-width:0} .br-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .br-name{font-size:16.5px;letter-spacing:-.015em} .br-sold{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:var(--fg3)} .br-sub{font-size:12.5px;color:var(--fg3);margin-top:4px;line-height:1.5} .br-sub .mono{color:var(--fg2)} .br-price{flex:0 0 auto;font-size:19px;font-weight:700;letter-spacing:-.03em;color:var(--fg)} .br-price s{text-decoration:none;font-size:12px;font-weight:500;color:var(--fg3);margin-left:2px} /* The ⋯ itself. Big enough to hit on a laptop trackpad — a 20px target is the difference between a control and a nuisance. */ .dots{width:34px;height:34px;border-radius:9px;border:1px solid transparent; background:none;color:var(--fg3);font-size:19px;line-height:1;cursor:pointer; transition:.15s} .dots:hover{background:var(--surface2);border-color:var(--line);color:var(--fg)} .dots:focus-visible{outline:2px solid var(--indigo);outline-offset:2px} /* The menu. Positioned in JS against the button that opened it, so it must be absolute against the page rather than the row — a row with overflow would otherwise clip it. */ .botmenu{position:absolute;z-index:120;width:290px;padding:6px; border:1px solid var(--line2);border-radius:13px;background:var(--surface); box-shadow:var(--shh)} .botmenu button{display:block;width:100%;text-align:left;padding:10px 12px; border:0;border-radius:9px;background:none;color:var(--fg);cursor:pointer; transition:background .12s} .botmenu button:hover:not([disabled]){background:var(--surface2)} .botmenu button b{display:block;font-size:13.5px;font-weight:600} .botmenu button s{display:block;text-decoration:none;font-size:11.5px;color:var(--fg3); line-height:1.45;margin-top:2px} .botmenu button[disabled]{cursor:default;opacity:.5} .botmenu button.danger:not([disabled]) b{color:var(--red)} @media(max-width:620px){ .botrow{flex-wrap:wrap;gap:10px} .br-price{order:3} .botmenu{width:min(290px, calc(100vw - 28px))} } /* ================= coming soon ================= One screen, centred, nothing to scroll to. Sized off the viewport so it fills the window on a laptop without needing a fixed height that would clip on a phone in landscape. */ .soonwrap{position:relative;overflow:hidden;min-height:calc(100vh - 70px); display:flex;align-items:center;justify-content:center;text-align:center;padding:40px 22px} .soon{position:relative;z-index:1;max-width:620px} .soon-h{font-size:clamp(46px,9vw,86px);line-height:1.02;letter-spacing:-.045em;margin:18px 0 0} .soon-p{color:var(--fg2);font-size:clamp(15px,2.2vw,18px);line-height:1.65; margin:18px auto 30px;max-width:46ch} /* The bar across the top. One button, because the sentence is the offer — the old version made only the last six words clickable and people click the sentence. Full width so there is no dead strip beside a live one. */ .topbanner{display:block;width:100%;border:0;cursor:pointer;text-align:center; padding:10px 16px;font:inherit;font-size:13.5px;font-weight:500;line-height:1.5; background:linear-gradient(90deg,#1B1854,#0E5E74);color:#fff;transition:filter .15s} .topbanner:hover{filter:brightness(1.14)} .topbanner:focus-visible{outline:2px solid var(--gold);outline-offset:-2px} .tb-more{color:#fff;text-decoration:underline;font-weight:600;margin-left:6px; white-space:nowrap} /* ============ the account button, and its menu ============ A face and a first name. It is the fastest way to answer "am I signed in, and as who" without reading anything. */ .mebtn{display:flex;align-items:center;gap:9px;padding:5px 12px 5px 6px; border:1px solid var(--line2);border-radius:99px;background:var(--surface); color:var(--fg);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer; transition:.15s} .mebtn:hover{background:var(--surface2);border-color:var(--fg3)} .mebtn:focus-visible{outline:2px solid var(--indigo);outline-offset:2px} .me-name{max-width:11ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .me-chev{font-size:10px;color:var(--fg3);margin-left:-2px} .me-pic{width:26px;height:26px;border-radius:99px;flex:0 0 auto;object-fit:cover; display:flex;align-items:center;justify-content:center; font-size:11px;font-weight:700;letter-spacing:.02em;color:#fff} .memenu{position:absolute;z-index:200;width:264px;padding:6px; border:1px solid var(--line2);border-radius:14px;background:var(--surface); box-shadow:var(--shh)} .memenu .me-head{display:flex;align-items:center;gap:10px;padding:10px 12px 12px; border-bottom:1px solid var(--line);margin-bottom:6px} .memenu .me-head b{display:block;font-size:13.5px} .memenu .me-head s{display:block;text-decoration:none;font-size:11.5px;color:var(--fg3); margin-top:1px;max-width:17ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .memenu a,.memenu button{display:block;width:100%;text-align:left;padding:9px 12px; border:0;border-radius:9px;background:none;color:var(--fg);cursor:pointer; text-decoration:none;font:inherit;transition:background .12s} .memenu a:hover,.memenu button:hover{background:var(--surface2)} .memenu b{display:block;font-size:13.5px;font-weight:600} .memenu s{display:block;text-decoration:none;font-size:11.5px;color:var(--fg3); line-height:1.45;margin-top:1px} .memenu .danger b{color:var(--red)} @media(max-width:620px){ .me-name,.me-chev{display:none} .mebtn{padding:5px} .memenu{width:min(264px, calc(100vw - 28px))} } /* ---------- the free tile's big word, last say ---------- It shares an element with .pr, and the eight #botGridPub .pbig .pr rules through the breakpoints match this specificity — so at equal weight the file order decides, and this has to be after all of them. No font-size on purpose: each breakpoint already sizes .pr for its width, and a second set of numbers under another class name is two things to keep in step. The old price scales in em so it follows whatever was chosen. */ #botGridPub .pbig .freeword{display:flex;align-items:baseline;gap:.3em; color:var(--green);font-weight:900;letter-spacing:-.02em} #botGridPub .pbig .freeword .wasprice{font-size:.44em;font-weight:600;letter-spacing:0; color:var(--fg3);text-decoration:line-through;text-decoration-thickness:1.5px} /* ---------- a free tile, last say ---------- Green rather than indigo and gold. Gold was the colour of the broker discount and indigo the colour of a priced plan; there is one price now and it is nothing. After the #botGridPub .plan rules for the same reason the big word is: equal specificity, so file order decides. */ #botGridPub .plan.free{border-color:rgba(61,220,151,.32); background:linear-gradient(180deg,rgba(61,220,151,.055),var(--surface) 58%)} #botGridPub .plan.free:hover{border-color:var(--green); box-shadow:0 26px 54px -24px rgba(61,220,151,.42)} #botGridPub .plan.free.hi{border-color:rgba(61,220,151,.62); background:linear-gradient(180deg,rgba(61,220,151,.13),var(--surface) 55%); box-shadow:0 0 0 1px rgba(61,220,151,.26),0 22px 50px -24px rgba(61,220,151,.45)} #botGridPub .plan.free.hi .pline{color:#7FE9BC} #botGridPub .plan.free .ribbon{background:var(--green);color:#04241a} /* ================= the app section, after pricing ================= A still of the phone, not the live mock from app.html. That one runs a tick loop and paints a canvas; borrowing it to decorate a landing section would be paying for motion on a page nobody came here to watch. */ #app .appsplit{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:56px;align-items:center} @media(max-width:940px){#app .appsplit{grid-template-columns:1fr;gap:34px} #app .appshot{order:2}} #app .appshot{display:grid;place-items:center;position:relative} #app .appshot:before{content:"";position:absolute;width:72%;height:64%;border-radius:50%; background:radial-gradient(closest-side,rgba(99,91,255,.32),transparent);filter:blur(38px)} #app .phone{position:relative;width:274px;height:558px;border-radius:38px;padding:8px; border:1px solid var(--line2);background:#04050A; box-shadow:0 44px 100px -30px rgba(0,0,0,.92),0 0 78px -36px rgba(99,91,255,.6)} #app .notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:86px;height:20px; background:#04050A;border-radius:0 0 13px 13px;z-index:5} #app .pscreen{width:100%;height:100%;border-radius:31px;background:#0A0C13;overflow:hidden; display:flex;flex-direction:column;gap:8px;padding:9px 11px 12px} #app .pstat{display:flex;justify-content:space-between;font-size:9px;color:var(--fg3);font-weight:600} #app .ptop{font-size:13.5px;font-weight:700;padding:2px 2px 0} #app .ptop i{font-style:normal;font-size:9.5px;font-weight:600;color:var(--green);margin-left:7px} #app .pnums{display:flex;gap:10px;justify-content:space-between;padding:2px 2px 0} #app .pnums i{display:block;font-style:normal;font-size:8.5px;color:var(--fg3); text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin-bottom:2px} #app .pnums b{font-size:12.5px;font-weight:700} #app .up{color:var(--green)} #app .pcard{border:1px solid var(--line);border-radius:11px;background:var(--bg2);padding:8px 9px} #app .pch{display:flex;justify-content:space-between;font-size:9.5px;color:var(--fg3); font-weight:600;margin-bottom:6px} #app .spark{height:62px;border-radius:7px; background:linear-gradient(180deg,rgba(61,220,151,.22),transparent), repeating-linear-gradient(90deg,transparent 0 13px,rgba(255,255,255,.045) 13px 14px)} #app .prow{display:flex;justify-content:space-between;font-size:10.5px;padding:4px 0; border-top:1px solid var(--line);color:var(--fg2)} #app .pbtns{display:flex;gap:6px;margin-top:auto} #app .pb{flex:1;text-align:center;font-size:11px;font-weight:700;padding:9px 0;border-radius:9px; background:var(--surface2);border:1px solid var(--line);color:var(--fg2)} #app .pb.red{color:#FF8B8B;border-color:rgba(255,99,99,.32)} #app .pb.kb{flex:0 0 38px} #app .appwords h2{font-size:34px;font-weight:800;letter-spacing:-.035em;margin:8px 0 10px} #app .appwords h2 em{font-style:normal;color:var(--indigo2)} #app .appfeat{list-style:none;margin:22px 0 0;display:grid;gap:15px} #app .appfeat li{position:relative;padding-left:26px} #app .appfeat li:before{content:"✓";position:absolute;left:0;top:1px;width:18px;height:18px; border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:800; background:rgba(61,220,151,.16);color:var(--green)} #app .appfeat b{display:block;font-size:14.5px;font-weight:700;margin-bottom:3px} #app .appfeat s{display:block;text-decoration:none;color:var(--fg2);font-size:13px;line-height:1.55} #app .appcta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px} /* the dialog behind "See how it works" */ .modal.appm{max-width:700px;padding:34px 36px 36px} .appsteps{display:grid;gap:14px;margin-top:20px} .appstep{display:flex;gap:13px;align-items:flex-start} .asn{flex:0 0 26px;height:26px;border-radius:9px;display:grid;place-items:center;font-size:12px; font-weight:800;background:rgba(99,91,255,.16);color:var(--indigo2)} .appstep b{display:block;font-size:14.5px;font-weight:700;margin-bottom:3px} .appstep s{display:block;text-decoration:none;color:var(--fg2);font-size:13.5px;line-height:1.6} @media(max-width:760px){.modal.appm{padding:24px 20px 26px} #app .appwords h2{font-size:26px}} /* ---------- four tiles now, not three ---------- One free door and three paid ones. Three columns left the free tile alone on a second row, which reads as an afterthought rather than the main offer. */ #botGridPub{grid-template-columns:repeat(4,minmax(0,1fr))} @media(max-width:1240px){#botGridPub{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:680px){#botGridPub{grid-template-columns:1fr}} /* The paid tile's counterpart to .freenote. Quieter on purpose: "any broker you like" is a relief, not a headline, and two shouting boxes side by side means neither is read. */ .paidnote{display:flex;gap:9px;align-items:flex-start;margin-bottom:12px;padding:11px 13px; border:1px solid var(--line2);border-radius:13px;font-size:12.5px;line-height:1.5; color:var(--fg2);background:var(--bg2)} .paidnote b{color:var(--fg);font-weight:700} .paidtick{flex:0 0 auto;width:17px;height:17px;border-radius:50%;display:grid;place-items:center; background:rgba(99,91,255,.16);color:var(--indigo2);font-size:9px;font-weight:800;margin-top:1px} /* The free tile's button. Green all the way through rather than a green border round an indigo button, which looked like a mistake. */ .btn.green{background:var(--green);border-color:var(--green);color:#04241a} .btn.green:hover{background:#57e8ae;border-color:#57e8ae;color:#04241a} /* "or" between two real choices, rather than one button and an apology. */ .orline{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--fg3);font-size:12px; text-transform:uppercase;letter-spacing:.09em;font-weight:700} .orline:before,.orline:after{content:"";flex:1;height:1px;background:var(--line)} /* ---------- the Library ---------- Three columns, one row per binding: account, bot, file. A table rather than cards because the whole point is comparing rows — which account has which bot, and which is still empty. */ .libhead{display:flex;align-items:center;justify-content:space-between;gap:14px; flex-wrap:wrap;margin-bottom:16px} .libtable{border:1px solid var(--line);border-radius:15px;overflow:hidden;background:var(--surface)} .lhead{display:grid;grid-template-columns:1.1fr 1fr .9fr;gap:16px;padding:11px 18px; background:var(--surface2);border-bottom:1px solid var(--line); font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:800;color:var(--fg3)} .lrow{display:grid;grid-template-columns:1.1fr 1fr .9fr;gap:16px;padding:15px 18px; border-bottom:1px solid var(--line);align-items:start} .lrow:last-child{border-bottom:0} .lrow.done{background:rgba(61,220,151,.045)} .lrow s{display:block;text-decoration:none;color:var(--fg3);font-size:11.5px;line-height:1.45; margin-top:5px} .lacct .mono{font-size:16px;font-weight:700} .lbot b{font-size:14.5px} .lrow select,.lrow input{width:100%;padding:8px 10px;border-radius:9px;font:inherit;font-size:13.5px; background:var(--bg2);border:1px solid var(--line2);color:var(--fg)} .lrow input::placeholder{color:var(--fg3)} .lgo .btn{width:100%} .lempty{color:var(--fg3);font-size:13px;line-height:1.5} .libnote{margin-top:16px;padding:13px 15px;border-radius:12px;font-size:13px;line-height:1.6; color:var(--fg2);border:1px solid var(--line2);background:var(--bg2)} .libnote.g{border-color:rgba(61,220,151,.3);background:rgba(61,220,151,.07)} .libnote b{color:var(--fg)} @media(max-width:760px){ .lhead{display:none} .lrow{grid-template-columns:1fr;gap:12px} } /* ================= pricing tiles, premium pass ================= Five blocks in the same order on every tile: badge, name and tagline, price, one-line condition, four bullets, button. Nothing else. A row of tiles is only comparable if the eye finds the same fact in the same place on each one. The measurements below are the whole design: fixed heights on the tagline and the price block so the four bullets start on the same line across all four tiles, whatever the words above them happen to be. */ #botGridPub .plan{display:flex;flex-direction:column;padding:0;overflow:hidden} /* The badge stops floating over the corner and becomes the tile's own header strip — full width, so four tiles read as four labelled shelves. */ #botGridPub .tagx{position:static;display:block;width:100%;margin:0;border-radius:0; padding:10px 20px;text-align:center;font-size:10.5px;letter-spacing:.11em; text-transform:uppercase;font-weight:800} #botGridPub .phead{padding:20px 22px 0} #botGridPub .phead h3{font-size:21px;font-weight:800;letter-spacing:-.03em;margin:0 0 7px} /* Two lines, always, and never cut mid-word: the clamp needs a height to clamp INTO or it truncates wherever it happens to be when it runs out of box. */ #botGridPub .pline{margin:0;font-size:13px;line-height:1.5;color:var(--fg2); min-height:39px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden} #botGridPub .pbig{margin:18px 22px 0;padding:16px 18px;border-radius:14px; background:var(--bg2);border:1px solid var(--line);text-align:center;min-height:112px; display:flex;flex-direction:column;justify-content:center;gap:9px} #botGridPub .plan.hi .pbig{background:rgba(99,91,255,.09);border-color:rgba(99,91,255,.28)} #botGridPub .plan.free .pbig{background:rgba(61,220,151,.08);border-color:rgba(61,220,151,.28)} #botGridPub .pbig .pr{font-size:38px;font-weight:800;letter-spacing:-.04em;line-height:1;margin:0} #botGridPub .pbig .pmo{font-size:15px;font-weight:600;color:var(--fg3);letter-spacing:0} /* One line, six words. Whatever needs a paragraph belongs behind Read more. */ #botGridPub .pcond{font-size:11.5px;line-height:1.4;color:var(--fg3);font-weight:600} #botGridPub .pcond.g{color:var(--green)} /* One column. Two columns made "Every engine we make" wrap against "Locked to each account", so neither line started where the eye expected it to. */ #botGridPub .pspecs2{list-style:none;margin:0;padding:18px 22px 0;flex:1; display:flex;flex-direction:column;gap:11px} #botGridPub .pspecs2 li{position:relative;padding-left:27px;font-size:13px;line-height:1.45; color:var(--fg2);overflow-wrap:anywhere} #botGridPub .pspecs2 li:before{content:"";position:absolute;left:0;top:1px;width:18px;height:18px; border-radius:50%;background:rgba(255,255,255,.07)} #botGridPub .pspecs2 li:after{content:"";position:absolute;left:6px;top:6px;width:5px;height:9px; border-right:2px solid var(--fg3);border-bottom:2px solid var(--fg3); transform:rotate(45deg)} #botGridPub .plan.free .pspecs2 li:before{background:rgba(61,220,151,.16)} #botGridPub .plan.free .pspecs2 li:after{border-color:var(--green)} #botGridPub .plan.hi .pspecs2 li:before{background:rgba(99,91,255,.2)} #botGridPub .plan.hi .pspecs2 li:after{border-color:var(--indigo2)} #botGridPub .plan > .btn.full{margin:22px 22px 22px;width:auto;padding:13px} @media(max-width:1240px){ #botGridPub .pline{min-height:0} #botGridPub .pbig{min-height:0} } /* ================= pricing tiles, glossy pass ================= Wider frame for this row only. 1120px suits paragraphs; four tiles want more, and every other section keeps the narrower measure that makes its text readable. */ #bots > .wrap{max-width:1240px} #botGridPub{gap:14px} /* Height, trimmed in three places rather than one gutted: the tagline box no longer reserves two full lines of slack, the price panel keeps only the air the price needs, and the button sits closer to the last bullet. */ #botGridPub .phead{padding:17px 20px 0} #botGridPub .pline{min-height:0;margin-bottom:0} #botGridPub .pbig{margin:15px 20px 0;padding:14px 16px;min-height:96px;gap:7px} #botGridPub .pspecs2{padding:15px 20px 0;gap:10px} #botGridPub .plan > .btn.full{margin:18px 20px 20px} /* The gloss. A hairline of light along the top edge is what a bevel does in the world; the sheen is where a card would catch a window. Both stop early — carrying either further down is where this effect starts looking cheap. */ #botGridPub .plan{ box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 18px 40px -22px rgba(0,0,0,.85); transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s cubic-bezier(.2,.7,.3,1), border-color .22s} /* The sheen sits above the background and below the content, and never takes a click. */ #botGridPub .plan:before{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(155deg,rgba(255,255,255,.075),rgba(255,255,255,.018) 26%,transparent 46%); z-index:0} #botGridPub .plan > *{position:relative;z-index:1} #botGridPub .plan:hover{transform:translateY(-5px); box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 32px 60px -26px rgba(0,0,0,.9)} #botGridPub .plan.free:hover{border-color:var(--green); box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 32px 60px -26px rgba(61,220,151,.42)} #botGridPub .plan.hi:hover{border-color:rgba(99,91,255,.75); box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 32px 60px -26px rgba(99,91,255,.5)} /* The header strip is deliberately NOT touched here. It already carries an indigo gradient and a four-layer shadow (see :1329), and the Combo's brighter variant of it (:1349) is the only thing marking that tile as the pick. `background-image` and `box-shadow` replace rather than layer, so a rule here to "add gloss" silently deletes both. It gets its stacking from `.plan > *` above, which is all it needs. */ /* And the price panel, which is the thing the eye lands on. */ #botGridPub .pbig{position:relative;overflow:hidden; box-shadow:inset 0 1px 0 rgba(255,255,255,.07)} #botGridPub .pbig:before{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(160deg,rgba(255,255,255,.05),transparent 55%)} #botGridPub .pbig > *{position:relative} /* The button, lifted the same way so it belongs to the same object. */ #botGridPub .plan > .btn.full{box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 10px 22px -12px rgba(0,0,0,.8)} #botGridPub .plan.free > .btn.full{box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 10px 24px -12px rgba(61,220,151,.55)} @media(max-width:1300px){#bots > .wrap{max-width:1120px}} /* Fixed boxes, so a longer line on one tile cannot push its bullets below the others. Two lines each, and a short line centres in the space rather than collapsing it. */ #botGridPub .pline{min-height:38px} #botGridPub .pcond{min-height:31px;display:flex;align-items:center;justify-content:center; text-align:center} /* The wider frame is the point of this pass, so it must survive a 1280 window too — the previous breakpoint sent it straight back to 1120 at exactly the size most laptops are. Padding gives back the room instead. */ @media(max-width:1300px){#bots > .wrap{max-width:1240px;padding:0 14px}} @media(max-width:1120px){#bots > .wrap{max-width:1120px;padding:0 24px}}