/* Direction F: D's service page + sign-up blocks (mid CTA, strong next-step block, sticky bar) and a visual services menu. Loaded after d.css; uses the same tokens (--accent, --glow, --vio, --d-cyan, --d-pink, --d-iri, --d-pixel, --mono, --ease). */ :root{--f-glass:rgba(10,12,17,.62);--f-line:rgba(255,255,255,.10)} .f-btn{gap:10px} .f-btn svg{transition:transform .25s var(--ease)} .f-btn:hover svg,.f-btn:focus-visible svg{transform:translateX(3px)} .f-mid a:focus-visible,.f-next a:focus-visible,.f-menu a:focus-visible,.f-sticky a:focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* iridescent hairline used by all F panels */ .f-mid-in,.f-next-in,.f-card,.f-jump{position:relative} .f-mid-in::before,.f-next-in::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;background:var(--d-iri); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.5} /* ---------- mid-page CTA (after Features) ---------- */ .f-mid{padding:var(--s3) 0 var(--s6)} .f-mid-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--s4);border-radius:14px; background:linear-gradient(100deg,rgba(var(--glow),.10),rgba(var(--vio),.08) 55%,transparent),var(--f-glass); -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 30px 70px -40px #000} .f-mid-line{margin:0;font-size:clamp(19px,2vw,24px);line-height:1.3;font-weight:600;letter-spacing:-.01em;color:var(--text);max-width:40ch} .f-mid .btn{margin-top:0;flex:none} /* ---------- strong sign-up block (before the FAQ) ---------- */ .f-next{padding:var(--s10) 0} .f-next-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:var(--s6);padding:var(--s10) var(--s8);border-radius:18px;overflow:hidden; background:radial-gradient(70% 90% at 0% 0%,rgba(var(--glow),.16),transparent 60%),radial-gradient(60% 80% at 100% 100%,rgba(var(--vio),.22),transparent 65%),rgba(8,9,13,.72); -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 60px 120px -50px #000,0 0 140px -60px rgba(var(--glow),.5)} .f-next-copy{position:relative;z-index:1} .f-next h2{margin:0;font-size:clamp(34px,4.6vw,68px);line-height:.98;letter-spacing:-.05em;max-width:13ch} .f-next-line{margin:var(--s3) 0 0;font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:#c3c8d0;max-width:46ch} .f-btn-xl{margin-top:var(--s4);height:56px;padding:0 var(--s4);font-size:17px} .f-next-fine{margin-top:var(--s2)} .f-next-art{position:relative;perspective:1100px} .f-next-tilt{position:relative;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.14); transform:rotateY(-14deg) rotateX(6deg) rotateZ(1deg);transform-origin:30% 50%; box-shadow:0 0 0 1px rgba(255,255,255,.04),0 50px 90px -30px rgba(0,0,0,.95),0 0 110px -30px rgba(var(--vio),.6),-30px 30px 90px -50px rgba(var(--glow),.7)} .f-next-tilt img{display:block;width:100%;height:auto;background:#0c0e12} .f-next-tilt::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.10) 48%,transparent 60%),linear-gradient(0deg,rgba(5,5,7,.35),transparent 40%)} /* ---------- visual services menu (bottom of the page) ---------- */ .f-menu{padding:var(--s8) 0 var(--s10);border-top:1px solid rgba(255,255,255,.06)} .f-menu-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4)} .f-menu h2{margin:0;font-size:clamp(28px,3.4vw,48px);line-height:1;letter-spacing:-.045em;max-width:16ch} .f-menu-nav{display:flex;gap:12px;flex-wrap:wrap} .f-jump{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:10px 18px 10px 10px;border-radius:12px;color:var(--text);text-decoration:none;font-weight:600;font-size:16px; background:var(--f-glass);border:1px solid var(--f-line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:border-color .2s,transform .25s var(--ease),box-shadow .25s} .f-jump-ico{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.06);color:var(--accent)} .f-jump svg:last-child{opacity:.6;transition:transform .25s var(--ease),opacity .2s} .f-jump:hover,.f-jump:focus-visible{border-color:rgba(var(--glow),.55);box-shadow:0 0 0 1px rgba(var(--glow),.25),0 14px 40px -18px rgba(var(--glow),.55);transform:translateY(-2px)} .f-jump:hover svg:last-child,.f-jump:focus-visible svg:last-child{opacity:1;transform:translateX(3px)} .f-jump-all{background:linear-gradient(100deg,rgba(var(--glow),.14),transparent 70%),var(--f-glass);border-color:rgba(var(--glow),.35)} .f-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .f-grid>li{margin:0;perspective:900px} .f-card{display:flex;flex-direction:column;height:100%;border-radius:12px;overflow:hidden;color:var(--text);text-decoration:none;background:var(--f-glass);border:1px solid var(--f-line); -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3); transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));transition:transform .5s var(--ease),border-color .2s,box-shadow .3s} .f-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s; background:radial-gradient(240px circle at var(--px,50%) var(--py,0%),rgba(255,255,255,.12),transparent 60%);mix-blend-mode:screen} .f-card-media{position:relative;display:block;aspect-ratio:2/1;overflow:hidden;background:#0c0e12;border-bottom:1px solid rgba(255,255,255,.06)} .f-card-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left;transition:transform .7s var(--ease),filter .4s;filter:saturate(.85) brightness(.85)} .f-card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,9,12,.75),transparent 55%)} .f-card-body{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px 48px 18px 18px} .f-card-n{font:400 16px/1 var(--d-pixel);color:var(--accent);position:absolute;top:-30px;left:18px;z-index:1} .f-card-t{font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1.25} .f-card-l{font-size:14px;line-height:1.45;color:var(--text-2)} .f-card-go{position:absolute;right:16px;bottom:18px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--f-line);color:var(--text-2);transition:all .25s var(--ease)} .f-card:hover,.f-card:focus-visible{--ty:-4px;border-color:rgba(255,255,255,.24);box-shadow:0 30px 60px -30px #000,0 0 0 1px rgba(var(--glow),.18),0 0 60px -20px rgba(var(--vio),.6)} .f-card:hover::after,.f-card:focus-visible::after{opacity:1} .f-card:hover .f-card-media img,.f-card:focus-visible .f-card-media img{transform:scale(1.045);filter:none} .f-card:hover .f-card-go,.f-card:focus-visible .f-card-go{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .f-card.is-tilting{transition:transform .08s linear,border-color .2s,box-shadow .3s} /* ---------- sticky sign-up bar ---------- */ .f-sticky{position:fixed;z-index:60;left:50%;bottom:16px;width:min(620px,calc(100vw - 32px));transform:translate(-50%,calc(100% + 32px));visibility:hidden;opacity:0; transition:transform .45s var(--ease),opacity .3s,visibility 0s linear .45s} .f-sticky.is-on{transform:translate(-50%,0);visibility:visible;opacity:1;transition:transform .45s var(--ease),opacity .3s,visibility 0s} .f-sticky-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:8px 8px 8px 20px;border-radius:999px; background:rgba(10,12,17,.86);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3); box-shadow:0 20px 50px -20px #000,0 0 50px -20px rgba(var(--glow),.45)} .f-sticky-t{margin:0;font-size:15px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .f-sticky .btn{margin-top:0;flex:none;border-radius:999px;padding:0 18px} body.f-sticky-on .preview-bar{opacity:0;pointer-events:none} /* ---------- responsive / calm ---------- */ @media (max-width:1099px){.f-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:899px){ .f-mid-in,.f-next-in,.f-card,.f-jump,.f-sticky-in{-webkit-backdrop-filter:none;backdrop-filter:none} .f-mid-in{flex-direction:column;align-items:flex-start;padding:var(--s3);background:linear-gradient(100deg,rgba(var(--glow),.10),rgba(var(--vio),.08) 55%,transparent),rgba(14,16,21,.94)} .f-next{padding:var(--s6) 0} .f-next-in{grid-template-columns:1fr;gap:var(--s4);padding:var(--s5) var(--s3);background:radial-gradient(90% 60% at 0% 0%,rgba(var(--glow),.14),transparent 60%),rgba(12,14,19,.96)} .f-next-tilt{transform:none} .f-card,.f-jump{background:rgba(14,16,21,.94)} .f-sticky-in{background:rgba(12,14,19,.97)} } @media (max-width:640px){ .f-grid{grid-template-columns:1fr;gap:10px} .f-card{flex-direction:row;align-items:stretch} .f-card-media{flex:none;width:112px;aspect-ratio:auto;border-bottom:0;border-right:1px solid rgba(255,255,255,.06)} .f-card-body{padding:12px 44px 12px 14px;gap:4px} .f-card-n{position:static;font-size:16px} .f-card-t{font-size:16px} .f-card-l{font-size:13px} .f-card-go{top:50%;bottom:auto;right:12px;margin-top:-15px} .f-menu-nav,.f-jump{width:100%} .f-jump{justify-content:flex-start} .f-jump span:nth-child(2){flex:1} .f-sticky{bottom:max(8px,env(safe-area-inset-bottom));width:calc(100vw - 16px)} .f-sticky-in{padding:6px 6px 6px 14px} .f-sticky-t{font-size:13px;white-space:normal;line-height:1.3} } @media (prefers-reduced-motion:reduce){ .f-card,.f-jump,.f-card-media img,.f-btn svg,.f-card-go{transition:none} .f-card:hover,.f-card:focus-visible,.f-jump:hover,.f-jump:focus-visible{transform:none} .f-card:hover .f-card-media img,.f-card:focus-visible .f-card-media img{transform:none} .f-sticky,.f-sticky.is-on{transition:none} .f-next-tilt{transform:rotateY(-8deg) rotateX(4deg)} } /* D's static chrome ring (.hero::before, up to 620px wide, right:-120px) made the page 115px wider than a 1440 viewport. Clip only the horizontal axis of the hero: no scroll container, sticky and the vertical bleed are unchanged. */ main>.layer.hero{overflow-x:clip} /* ---------- bottom showcase (renderBottomShowcase): static list by default; pinned scroll-swap (desktop) and swipe carousel (mobile) only with html.f-pin ---------- */ .f-show-feature{display:none} .f-show-bar{display:none} .f-show-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px} .f-show-item{margin:0} .f-show-a{position:relative;display:flex;align-items:center;gap:14px;height:100%;padding:10px 16px 10px 10px;border-radius:12px;color:var(--text);text-decoration:none;background:var(--f-glass);border:1px solid var(--f-line);transition:border-color .25s,box-shadow .3s,transform .3s var(--ease)} .f-show-a:hover,.f-show-a:focus-visible{border-color:rgba(var(--glow),.5);box-shadow:0 18px 44px -26px rgba(var(--glow),.6);transform:translateY(-2px)} .f-show-thumb{flex:none;display:block;width:112px;aspect-ratio:2/1;border-radius:6px;overflow:hidden;background:#0c0e12;border:1px solid rgba(255,255,255,.08)} .f-show-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left} .f-show-num{display:none} .f-show-txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1} .f-show-t{font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.25} .f-show-l{font-size:13px;line-height:1.4;color:var(--text-2)} .f-show-open{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--accent)} .f-show-open svg{transition:transform .25s var(--ease)} .f-show-a:hover .f-show-open svg,.f-show-a:focus-visible .f-show-open svg{transform:translateX(3px)} /* desktop: pinned scroll-swap */ @media (min-width:900px){ .f-pin .f-show{padding:0;height:calc(var(--n) * 34vh + 100vh)} .f-pin .f-show-pin{position:sticky;top:var(--header);height:calc(100vh - var(--header));height:calc(100svh - var(--header));overflow:hidden} .f-pin .f-show-ui{height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(15rem,19rem);grid-template-rows:auto minmax(0,1fr);column-gap:var(--s6);padding-top:var(--s4);padding-bottom:44px} .f-pin .f-menu-head{grid-column:1/-1;margin-bottom:var(--s2)} .f-pin .f-menu h2{font-size:clamp(24px,2.6vw,38px);max-width:none} .f-pin .f-jump{min-height:48px} .f-pin .f-show-feature{display:flex;flex-direction:column;justify-content:flex-start;min-height:0;color:inherit;text-decoration:none} .f-pin .f-show-frame{display:block;position:relative;aspect-ratio:16/8.4;max-height:calc(100svh - 350px);min-height:180px;border-radius:6px;overflow:hidden;background:#0b0d12;border:1px solid rgba(255,255,255,.16);box-shadow:0 0 0 1px rgba(var(--glow),.18),0 40px 90px -30px rgba(0,0,0,.95),0 0 80px -30px rgba(var(--glow),.45)} .f-pin .f-show-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0 0;transition:transform .9s var(--ease)} .f-pin .f-show-img.is-in{animation:f-show-in .75s var(--ease) both} .f-pin .f-show-img.is-out{animation:f-show-out .75s var(--ease) both} .f-pin .f-show-feature:hover .f-show-img{transform:scale(1.02)} .f-pin .f-show-cap{display:grid;grid-template-columns:1fr auto;align-items:end;gap:4px 20px;margin-top:16px} .f-pin .f-show-count{grid-column:1/-1;font:500 12px/1 var(--mono);letter-spacing:.14em;color:var(--accent)} .f-pin .f-show-title{font-size:clamp(24px,2.3vw,36px);font-weight:700;letter-spacing:-.035em;line-height:1.05} .f-pin .f-show-sub{grid-column:1;color:var(--text-2);font-size:15px;line-height:1.45} .f-pin .f-show-go{grid-column:2;grid-row:2/4;align-self:center;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(var(--glow),.5);color:var(--accent);font-weight:600;font-size:14px;background:rgba(var(--glow),.06)} .f-pin .f-show-cap.is-swap>*{animation:f-show-txt .6s var(--ease) both} .f-pin .f-show-cap.is-swap>:nth-child(2){animation-delay:.05s}.f-pin .f-show-cap.is-swap>:nth-child(3){animation-delay:.1s} .f-pin .f-show-list{display:block;position:relative;min-height:0;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)} .f-pin .f-show-list{align-self:start;max-height:calc(100% - 230px)} .f-pin .f-show-list-in{transition:transform .6s var(--ease);padding-left:12px;margin:0;list-style:none} .f-pin .f-show-a{padding:7px 0;gap:14px;align-items:baseline;background:none;border:0;border-radius:0;box-shadow:none;opacity:.42;transition:opacity .3s,transform .4s var(--ease)} .f-pin .f-show-a:hover,.f-pin .f-show-a:focus-visible{opacity:.85;transform:none} .f-pin .f-show-item.is-cur .f-show-a{opacity:1;transform:translateX(-8px)} .f-pin .f-show-thumb{display:none} .f-pin .f-show-num{display:block;font:500 11px/1 var(--mono);letter-spacing:.1em;color:var(--text-3);min-width:2ch} .f-pin .f-show-item.is-cur .f-show-num{color:var(--accent)} .f-pin .f-show-open{display:none} .f-pin .f-show-l{display:block;opacity:0;transition:opacity .3s} /* space is reserved for every item: the current one expanding used to shift the whole list (CLS) */ .f-pin .f-show-item.is-cur .f-show-l{opacity:1;color:var(--text-3)} .f-pin .f-show-item.is-cur .f-show-open{display:inline-flex;margin-left:auto} .f-pin .f-show-item.is-cur .f-show-a{align-items:center} .f-pin .f-show-bar{display:block;position:absolute;left:clamp(16px,4vw,48px);right:clamp(16px,4vw,48px);bottom:16px;height:2px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden} .f-pin .f-show-bar i{display:block;height:100%;width:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--p,0));box-shadow:0 0 10px rgba(var(--glow),.8)} } @keyframes f-show-in{from{clip-path:inset(100% 0 0 0);transform:scale(1.08)}to{clip-path:inset(0 0 0 0);transform:scale(1)}} @keyframes f-show-out{from{opacity:1}to{opacity:0;transform:scale(.97)}} @keyframes f-show-txt{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* mobile: swipeable carousel (CSS scroll-snap, works without JS) */ @media (max-width:899px){ .f-pin .f-show-list{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin:0 calc(-1 * var(--gutter));padding:4px var(--gutter) 14px;scroll-padding:0 var(--gutter);scrollbar-width:thin} .f-pin .f-show-item{flex:0 0 min(78vw,340px);scroll-snap-align:start} .f-pin .f-show-a{flex-direction:column;align-items:stretch;gap:12px;padding:0 0 14px} .f-pin .f-show-thumb{width:100%;border:0;border-radius:11px 11px 0 0;border-bottom:1px solid rgba(255,255,255,.08)} .f-pin .f-show-txt{padding:0 16px} .f-pin .f-show-t{font-size:18px} .f-pin .f-show-l{font-size:14px} .f-pin .f-show-open{padding:0 16px} } @media (prefers-reduced-motion:reduce){ .f-show-a,.f-show-open svg{transition:none} .f-show-a:hover,.f-show-a:focus-visible{transform:none} } /* ===================================================================================================================== POLISH PASS (2026-10-09). Accent system: TMD green -> brand magenta (#EC008C, Contant/brand/deck-template.md). ===================================================================================================================== */ :root{--f-pink:#ec008c;--f-pink-lt:#ff78c6;--f-btn-ink:#020306; --f-grad:linear-gradient(100deg,#3df29a 0%,#45e6bc 26%,#9d8cf8 62%,#ec008c 100%)} /* 4) premium primary button: see the BUTTON SYSTEM block at the end of this file */ /* 1) hero "What's happening": very transparent dark gradient + light blur behind the text block only (readable over the particle swirl / Tami) */ .demo-text{position:relative;isolation:isolate;color:#d9dde4} .demo-text::before{content:"";position:absolute;z-index:-1;inset:-20px -26px -20px -22px;border-radius:16px;pointer-events:none; background:linear-gradient(100deg,rgba(5,5,7,.74),rgba(5,5,7,.58) 60%,rgba(5,5,7,.36)); -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);box-shadow:0 0 0 1px rgba(255,255,255,.05) inset} .demo-text p:not(.eyebrow):not(.demo-title){color:#d9dde4} /* 2) "What's new in V2" cards (and any card/stat with a data-layer tag): D's hover sheen overlay (.card::after, inset:0) was being painted with the green layer-tag chip, hiding the text. Restore the sheen; the tag chip is not shown in F. */ .card[data-layer]::after,.stat[data-layer]::after{content:"";left:0;top:0;right:0;bottom:0;max-width:none;padding:0;border-radius:inherit;white-space:normal;color:inherit; transform:none;transition:opacity .3s;mix-blend-mode:screen;opacity:0; background:radial-gradient(260px circle at var(--px,50%) var(--py,0%),rgba(255,255,255,.10),transparent 60%), linear-gradient(115deg,transparent 30%,rgba(var(--d-cyan),.08) 45%,rgba(var(--vio),.10) 55%,rgba(var(--d-pink),.10) 65%,transparent 80%)} .card[data-layer]:hover::after,.stat[data-layer]:hover::after{opacity:1;transform:none} .card:hover h3{color:#fff}.card:hover p{color:#d4d8df} /* 3) "How traders use it": green numerals/brackets replaced by the green->magenta system (gradient numerals, magenta corner brackets, gradient top hairline) */ [data-frame*="How traders use it"] .card{--accent:#ff78c6; background:linear-gradient(90deg,#3df29a,#ec008c) 0 0/100% 2px no-repeat,var(--d-glass)} [data-frame*="How traders use it"] .card-n{background:linear-gradient(90deg,#3df29a,#ff78c6);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} [data-frame*="How traders use it"] .card-n::before,[data-frame*="How traders use it"] .card-n::after{-webkit-text-fill-color:#9aa0ab} [data-frame*="How traders use it"] .card:hover{border-color:rgba(255,120,198,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(255,120,198,.25),0 22px 44px -16px rgba(236,0,140,.35),0 22px 40px -16px rgba(0,0,0,.95)} /* 6) help links: visible but inactive (no href, aria-disabled). Flip HELP_ACTIVE in tools/make-f.mjs to make them real links. */ .f-help-row{display:flex;flex-wrap:wrap;gap:8px 10px;margin:var(--s3) 0 0;padding:0} .f-help{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:4px 12px 4px 6px;border-radius:999px;font-size:14px;line-height:1.3;font-weight:500;text-decoration:none; color:#9aa1ad;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09)} .f-help-q{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;font:600 12px/1 var(--mono);color:#9aa1ad;border:1px solid rgba(255,255,255,.18)} .f-help[aria-disabled="true"]{cursor:default} a.f-help[href]{color:var(--text)} a.f-help[href]:hover,a.f-help[href]:focus-visible{border-color:rgba(255,120,198,.55);color:#fff} a.f-help[href]:focus-visible{outline:2px solid #fff;outline-offset:3px} /* 7) bottom showcase: each tab gets its own category tint chip; the current one is lit; a backdrop panel slides in under the section */ .f-show-pin{position:relative} .f-show-pin::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:linear-gradient(115deg,rgba(var(--c,61,242,154),.16),rgba(8,9,13,.9) 46%,rgba(8,9,13,.9)),radial-gradient(60% 80% at 100% 50%,rgba(var(--c,61,242,154),.14),transparent 70%); border-top:1px solid rgba(var(--c,61,242,154),.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)} .f-show-ui{position:relative;z-index:1} .f-show-item .f-show-a:hover,.f-show-item .f-show-a:focus-visible{border-color:rgba(var(--c),.6)} .f-show-thumb{border-color:rgba(var(--c),.4)} .f-show-open{color:#fff} @media (min-width:900px){ .f-pin .f-show.f-anim .f-show-pin::before{transform:translateX(104%);opacity:0;transition:transform .9s var(--ease),opacity .5s} .f-pin .f-show.f-anim.is-in .f-show-pin::before{transform:none;opacity:1} .f-pin .f-show.f-anim .f-show-ui{opacity:.001;transform:translateY(18px);transition:opacity .7s .25s,transform .8s .25s var(--ease)} .f-pin .f-show.f-anim.is-in .f-show-ui{opacity:1;transform:none} .f-pin .f-show-list-in{padding:4px 12px 4px 14px;margin:0;list-style:none} .f-pin .f-show-a{padding:8px 14px 8px 10px;margin:0 0 6px;border-radius:10px;border:1px solid rgba(var(--c),.3);background:rgba(var(--c),.10);opacity:.82;gap:12px; transition:opacity .3s,transform .4s var(--ease),background .3s,border-color .3s,box-shadow .3s} .f-pin .f-show-a:hover,.f-pin .f-show-a:focus-visible{opacity:1;background:rgba(var(--c),.18);border-color:rgba(var(--c),.6)} .f-pin .f-show-num{color:rgb(var(--c));font-weight:600} .f-pin .f-show-t{color:#eef0f4} .f-pin .f-show-item.is-cur .f-show-a{opacity:1;transform:translateX(-5px) scale(1.02);background:linear-gradient(100deg,rgba(var(--c),.42),rgba(var(--c),.16));border-color:rgb(var(--c)); box-shadow:0 0 0 1px rgba(var(--c),.6),0 12px 34px -12px rgba(var(--c),.75),inset 3px 0 0 rgb(var(--c))} .f-pin .f-show-item.is-cur .f-show-t{color:#fff;text-shadow:0 0 .6px #fff,0 0 14px rgba(var(--c),.6)} /* same weight as the others: a bolder title re-wrapped and shifted the list (CLS) */ .f-pin .f-show-item.is-cur .f-show-num{color:#fff} .f-pin .f-show-item.is-cur .f-show-l{color:#e3e6ec} .f-pin .f-show-item.is-cur .f-show-open{color:#fff} .f-pin .f-show-count{color:rgb(var(--c))} .f-pin .f-show-go{color:#fff;border-color:rgba(var(--c),.7);background:rgba(var(--c),.22)} .f-pin .f-show-bar i{background:rgb(var(--c));box-shadow:0 0 10px rgba(var(--c),.8)} } @media (max-width:899px){ .f-show-a{background:linear-gradient(100deg,rgba(var(--c),.16),rgba(14,16,21,.94) 70%);border-color:rgba(var(--c),.35)} .f-show-num{display:inline-block;color:rgb(var(--c))} } @media (prefers-reduced-motion:reduce){ .f-pin .f-show.f-anim .f-show-pin::before,.f-pin .f-show.f-anim .f-show-ui{transition:none;transform:none;opacity:1} } /* section captions above each block (item 5: " TAB nn / ..."): a touch brighter for AA */ main>.layer>.container[data-frame]::before{color:rgba(255,255,255,.58)} /* help links inside .prose: beat the prose link style (green + underline) while inactive */ .prose .f-help,.f-help-row .f-help{text-decoration:none;color:#9aa1ad} .prose a.f-help[href],.f-help-row a.f-help[href]{color:var(--text)} .prose a.f-help[href]:hover,.f-help-row a.f-help[href]:hover{color:#fff} [data-frame*="How traders use it"] .card-n{display:inline-block} /* ===================================================================================================================== BUTTON SYSTEM (round 2, shared by F and the homepage): dark glass button with an animated conic border (TMD green -> brand magenta), cursor-following light, sheen sweep on hover, lift + glow, pressed state, white focus ring. Text is white on near-black (AA). Magnetic pull comes from f.js (fine pointer, wide screens, motion OK) through --mx / --my. ===================================================================================================================== */ @property --f-ang{syntax:'';inherits:false;initial-value:0deg} @keyframes f-spin{to{--f-ang:360deg}} .btn-primary,.btn.btn-primary{position:relative;isolation:isolate;overflow:hidden;border:0;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.35); background:radial-gradient(90px circle at var(--bx,50%) var(--by,-20%),rgba(255,255,255,.16),transparent 70%),linear-gradient(180deg,rgba(30,34,45,.94),rgba(8,10,15,.96)); box-shadow:0 0 0 1px rgba(255,255,255,.05) inset,0 12px 30px -14px rgba(61,242,154,.6),0 10px 34px -16px rgba(236,0,140,.55); transform:translate(var(--mx,0px),var(--my,0px));transition:transform .28s var(--ease),box-shadow .3s} .btn-primary::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1.5px;pointer-events:none; background:conic-gradient(from var(--f-ang),#3df29a,#45e6bc 16%,#9d8cf8 38%,#ec008c 60%,#ff78c6 78%,#3df29a); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:f-spin 6s linear infinite} .btn-primary::after{background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.35) 50%,transparent 68%);z-index:0} .btn-primary:hover,.btn.btn-primary:hover{color:#fff;background:radial-gradient(110px circle at var(--bx,50%) var(--by,-20%),rgba(255,255,255,.22),transparent 70%),linear-gradient(180deg,rgba(34,38,50,.96),rgba(10,12,18,.98)); transform:translate(var(--mx,0px),calc(var(--my,0px) - 3px)); box-shadow:0 0 0 1px rgba(255,255,255,.09) inset,0 18px 40px -14px rgba(61,242,154,.75),0 14px 44px -14px rgba(236,0,140,.7)} .btn-primary:hover::before{animation-duration:2.4s} .btn-primary:active,.btn.btn-primary:active{transform:translate(var(--mx,0px),var(--my,0px)) scale(.97);transition-duration:.08s; box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 2px 14px rgba(0,0,0,.7) inset,0 6px 18px -10px rgba(61,242,154,.5)} .btn-primary:focus-visible,.f-mid a.btn-primary:focus-visible,.f-next a.btn-primary:focus-visible,.f-sticky a.btn-primary:focus-visible{outline:3px solid #fff;outline-offset:3px} .btn-primary svg{color:#7ff7c0;transition:transform .25s var(--ease)} .btn-primary:hover svg{transform:translateX(3px)} @media (prefers-reduced-motion:reduce){ .btn-primary::before{animation:none} .btn-primary,.btn.btn-primary{transition:none;transform:none} .btn-primary:hover,.btn.btn-primary:hover,.btn-primary:active{transform:none} .btn-primary::after{display:none} } /* ===================================================================================================================== SHOWCASE BACKGROUND TINT (shared by F's bottom showcase and the homepage tabs showcase): a panel that slides in under the section and cross-fades its category colour (registered numeric properties = smooth transition). --tr/--tg/--tb are set from JS. ===================================================================================================================== */ @property --tr{syntax:'';inherits:true;initial-value:61} @property --tg{syntax:'';inherits:true;initial-value:242} @property --tb{syntax:'';inherits:true;initial-value:154} .f-show-pin::before,.hf-ta-pin::before,.hf-tb::before,.y-veil::after{ background:linear-gradient(115deg,rgba(var(--tr),var(--tg),var(--tb),.17),rgba(8,9,13,.9) 46%,rgba(8,9,13,.9)),radial-gradient(60% 80% at 100% 50%,rgba(var(--tr),var(--tg),var(--tb),.15),transparent 70%); border-top:1px solid rgba(var(--tr),var(--tg),var(--tb),.35);transition:--tr .8s,--tg .8s,--tb .8s,transform .9s var(--ease),opacity .5s} @media (min-width:900px){ .f-pin .f-show.f-anim .f-show-pin::before{transition:--tr .8s,--tg .8s,--tb .8s,transform .9s var(--ease),opacity .5s} } /* ===================================================================================================================== TOP STATS ROW (item 10): no card, transparent, sits directly on the scene; numbers count up one after another (f.js), the label fades in after its number. ===================================================================================================================== */ .stats{border-bottom:0} .stat-row .stat{background:none;border:0;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;transform:none;padding:var(--s3) var(--s3) var(--s3) 0} .stat-row .stat:hover{transform:none;box-shadow:none;border:0} .stat-row .stat::before,.stat-row .stat[data-layer]::after,.stat-row .stat:hover::before{display:none} .stat-row .stat-n{text-shadow:0 2px 30px rgba(0,0,0,.65)} .stat-row .stat-l{color:#aeb4bf;text-shadow:0 1px 12px rgba(0,0,0,.8)} .stat-row.f-seq .stat-l{opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s var(--ease)} .stat-row.f-seq .stat.is-shown .stat-l{opacity:1;transform:none} .stat-row.f-seq .stat-n{opacity:.4;transition:opacity .4s} .stat-row.f-seq .stat.is-counting .stat-n,.stat-row.f-seq .stat.is-shown .stat-n{opacity:1} .stat-row .stat-suf,.stat-row .stat-pre{text-shadow:0 0 14px rgba(61,242,154,.5)} /* hero H1 glitch layers as pseudo-elements (data-g holds the headline; no duplicated text in the DOM) */ .hero-copy h1::before,.hero-copy h1::after{content:attr(data-g);position:absolute;inset:0;pointer-events:none;opacity:0;display:block} html.d-fx .hero-copy h1::before,html.d-fx .hero-copy h1::after{opacity:1;color:transparent} html.d-fx .hero-copy h1::before{text-shadow:-3px 0 rgba(var(--d-pink),.85);clip-path:inset(100% 0 0 0)} html.d-fx .hero-copy h1::after{text-shadow:3px 0 rgba(var(--d-cyan),.85);clip-path:inset(100% 0 0 0)} html.d-fx .hero-copy h1.d-burst::before{animation:d-g1 .9s steps(1) both} html.d-fx .hero-copy h1.d-burst::after{animation:d-g2 .9s steps(1) both} /* hero media: no scroll-driven rise on load (its entry animation moved the demo block by ~120 px at first paint and counted as a layout shift on pages where the media starts in the fold) */ html.d-fx .hero-demo .demo-media{animation:none} /* ===================================================================================================================== MOBILE / iOS HARDENING (WebKit pass, 2026-10-10). Desktop is untouched: everything below is inside max-width media queries except the two global iOS rules. ===================================================================================================================== */ html{-webkit-text-size-adjust:100%;text-size-adjust:100%} /* iOS inflated text on rotation (landscape): wraps and cut-offs */ h1,h2,h3{text-wrap:balance} p,li,dd,figcaption{text-wrap:pretty} body{overflow-wrap:break-word} @media (max-width:899px){ /* long words never push a box wider than the screen */ main :is(h1,h2,h3,p,li,dt,dd,a,button,summary,span){overflow-wrap:anywhere;hyphens:manual} .btn{max-width:100%;text-align:center} .btn svg{flex:none} /* short labels never break into two lines */ .hf-hero .actions .btn,.hf-tour-btn,.hf-tabs-btn,.hf-ta-ctl .btn,.f-btn,.f-jump,.hf-ta-n,.hf-ta-g,.hf-ta-chip,.f-show-open,.f-show-count,.eyebrow,.y-go{white-space:nowrap} /* hero buttons: sign-up on its own row, the two ghost buttons share the next row */ .hf-hero .actions{display:grid;grid-template-columns:1fr 1fr;gap:10px} .hf-hero .actions>:first-child{grid-column:1/-1} .hf-hero .actions .btn{width:100%;justify-content:center;padding-inline:12px} /* sign-up block under a service page: the text column may shrink */ .f-next-in,.f-next-copy,.f-mid-in,.cta-in{min-width:0} .f-next-line,.f-next-fine,.f-next-copy h2{max-width:100%} .f-next .btn,.f-mid .btn{white-space:normal;line-height:1.25;min-height:46px;height:auto;padding-block:10px} } @media (max-width:420px){ .f-next-in{padding-inline:16px} .f-help{max-width:100%;white-space:normal} } /* landscape phones: short viewports must not make pinned blocks taller than the screen (svh = the visible height, not the large one behind the address bar) */ @media (max-height:520px) and (orientation:landscape){ .hero,.hf-hero{min-height:0} } /* iOS < 16 has no overflow-x:clip: fall back to hidden so an over-wide decorative layer can never create a sideways scroll */ @supports not (overflow-x:clip){html,body{overflow-x:hidden}} @media (max-width:899px){.hf-hero .actions .btn{font-size:13px;letter-spacing:0;padding-inline:8px;gap:6px}} /* MOBILE PASS 2 (2026-10-10): touch targets >= 44px on touch screens / narrow windows. Desktop with a mouse is untouched. */ @media (pointer:coarse),(max-width:899px){ .site-header .logo{min-height:44px;display:inline-flex;align-items:center} .site-header .btn-sm{min-height:44px} .vid-toggle{min-width:44px;min-height:44px} .crumbs a{display:inline-flex;align-items:center;min-height:44px} .f-help,.more>summary,.y-item>a,.y-actions .btn,.tour-index button{min-height:44px} .y-item>a{align-items:center} } @media (pointer:coarse),(max-width:899px){ .crumbs ol{flex-wrap:wrap;align-items:center} } @media (pointer:coarse),(max-width:899px){.f-sticky .btn{min-height:44px}} /* link lists (related links, "also see"): 44px tap height from padding, the list's own gap is reduced so the rhythm stays close */ @media (pointer:coarse),(max-width:899px){ .prose-list li>a,.prose-list li>strong>a{display:inline-block;padding-block:12.5px} .prose-list{gap:2px} } @media (pointer:coarse),(max-width:899px){ .hs-plus{width:44px;height:44px;margin:-22px 0 0 -22px} .hs-plus::before{inset:-3px} } @media (pointer:coarse),(max-width:899px){.header-nav a:not(.btn){padding-block:12px}} /* padding only: never changes whether the link is shown */ /* MOBILE PASS 3 (2026-10-10, MB-03): the sticky bar never hides content on phones. It slides away while the page scrolls (f.js adds .is-scrolling) and returns when the scroll stops; anchors / focus scrolling keep clear of it via scroll-padding. */ @media (max-width:899px){ html{scroll-padding-bottom:88px} .f-sticky.is-on.is-scrolling{transform:translate(-50%,calc(100% + 32px));opacity:0;pointer-events:none;transition:transform .25s var(--ease),opacity .2s,visibility 0s} } @media (max-width:899px) and (prefers-reduced-motion:reduce){.f-sticky.is-on.is-scrolling{transition:none}} /* MOBILE PASS 3 (2026-10-10, MB-07/08): short inline list links keep a 44px-wide hit area; "New" pill is 12px minimum on phones / tablets */ @media (max-width:899px){ .prose-list li>a{display:inline-block;min-width:44px} .pill{font-size:12px} } /* MOBILE PASS 4 (2026-10-12, BTNWRAP): tour-index chips ("01 Three sub-tabs") keep their label on one line; phones get one chip per row at full width (44px tall) instead of wrapped two-line chips */ .tour-index button{white-space:nowrap} @media (max-width:640px){ .tour-index{flex-direction:column;align-items:stretch} .tour-index li{display:flex} .tour-index button{width:100%;justify-content:flex-start;min-height:44px} } /* SITE V4 SERVICE VIDEO (2026-10-13): the hero plays the clean scripted take; the step cards are this HTML overlay, synced from the cues JSON by f.js. Same look as the home hero captions (H-T src/hf.css .hf-cap / .hf-caps / .hf-cap-n / .hf-beats): green pixel step number, one sentence per step, one progress bar per step. Under the video on narrow screens, overlaid bottom-left from 1100px. */ .f-v4{position:relative;min-width:0} .f-v4 .hf-cap{margin:14px 0 0;min-height:1.5em} .f-v4 .hf-caps{list-style:none;margin:0;padding:0;display:grid} .f-v4 .hf-caps li{grid-area:1/1;display:flex;align-items:baseline;gap:10px;font-size:16px;line-height:1.4;font-weight:600;letter-spacing:-.01em;color:var(--text,#fff);opacity:0;translate:0 6px;transition:opacity .45s,translate .45s var(--ease,ease)} .f-v4 .hf-caps li.on{opacity:1;translate:0 0} .f-v4 .hf-cap-n{flex:none;font:400 16px/1 var(--d-pixel,ui-monospace,monospace);color:var(--accent,#3df29a)} .f-v4 .hf-beats{display:flex;gap:6px;margin-top:10px} .f-v4 .hf-beats i{flex:1;height:2px;background:rgba(var(--tw,255,255,255),.14);overflow:hidden;border-radius:2px} .f-v4 .hf-beats b{display:block;height:100%;width:0;background:var(--accent,#3df29a)} .f-v4 .hf-beats i.done b{width:100%} @media (min-width:1100px){ .f-v4 .hf-cap{position:absolute;left:18px;bottom:30px;z-index:3;margin:0;padding:10px 14px;border-radius:8px;background:rgba(var(--k-050507,5,5,7),.72);border:1px solid rgba(var(--tw,255,255,255),.10); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:calc(100% - 96px);pointer-events:none} } @media (prefers-reduced-motion:reduce){ .f-v4 .hf-caps li{transition:none;translate:none} } /* entrance: the shared .tmd-pop-in (H-T pages.css, same values) restated here because html.d-fx .hero-demo .demo-media{animation:none} above (and d.css's d-rise) outrank the plain class */ html.d-fx .hero-demo .f-v4 .demo-media.tmd-pop-in{animation:tmd-pop-in .75s cubic-bezier(.34,1.56,.64,1) var(--tmd-pop-delay,1.5s) backwards} @supports (animation-timing-function:linear(0,1)){html.d-fx .hero-demo .f-v4 .demo-media.tmd-pop-in{animation-timing-function:linear(0,0.038,0.138,0.279,0.443,0.612,0.773,0.916,1.035,1.125,1.187,1.222,1.234,1.225,1.203,1.17,1.132,1.092,1.054,1.021,0.993,0.971,0.957,0.948,0.945,0.947,0.952,0.96,0.969,0.978,0.987,0.995,1.001,1.006,1.01,1.012,1.013,1.012,1.011,1.009,1)}} html.d-fx .hero-demo .f-v4 .demo-media.tmd-pop-in.is-pop-wait{animation-play-state:paused} @media (prefers-reduced-motion:reduce){html.d-fx .hero-demo .f-v4 .demo-media.tmd-pop-in{animation:tmd-fade-in .4s ease var(--tmd-pop-delay,1.5s) backwards}} /* SERVICE CHIP GAP (2026-10-13): the numbered tour-index chips under the video were glued to the Features section below (second chip row touched the feature card); keep a consistent section gap under the row, all widths, LTR + RTL (logical property) */ .tour-index{margin-block-end:var(--s6,48px)} /* TOUR SPOTLIGHT (pilot, Alerts page; 2026-10-13): numbered feature list beside the screenshot; the active item dims the shot and cuts out its real UI region, its text is the caption bar above the shot. Opt-in via data-tour-spot (no "+" hotspots, no drawer). Logical properties for RTL; the poster itself is never mirrored. */ .ts-stage{margin-block-end:var(--s6,48px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,min(520px,46%));gap:clamp(24px,4vw,56px);align-items:start} .ts-view{min-width:0;position:sticky;top:96px} .ts-capbar{display:grid;margin:0 0 4px;padding-inline-start:12px;border-inline-start:2px solid rgba(61,242,154,.6)} .ts-d{grid-area:1/1;margin:0;font-size:15px;line-height:1.55;color:var(--text-2);visibility:hidden;opacity:0;transition:opacity .3s} .ts-d.is-cur{visibility:visible;opacity:1} .ts-stage .frame{width:100%;max-width:none;margin-inline:0} /* the green frame line is a border on a ::after of the crop, not the frame's own 1px border: the frame is fractional in size (aspect-ratio + sticky), and the crop (opaque image) snapped over the border pixel on one edge at some viewport widths / scroll offsets */ .ts-stage .frame{border-color:transparent} .ts-stage .ts-crop::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border:1px solid rgba(var(--glow),.7)} .ts-side{margin-top:0;min-width:0} .ts-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .ts-btn{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:8px 12px;text-align:start;color:var(--text-2);font:600 14px/1.3 var(--mono);border:1px solid var(--line-2);border-radius:3px;background:var(--obj);transition:color .15s,border-color .2s,background-color .2s} .ts-btn .n{flex:none;display:grid;place-items:center;min-width:24px;height:24px;padding:0 4px;border-radius:2px;background:var(--surface-2);font:600 11px/1 var(--mono);color:var(--text-3);transition:background-color .2s,color .2s} .ts-btn:hover{color:var(--text);border-color:rgba(61,242,154,.35)} .ts-btn[aria-current="true"]{color:var(--text);border-color:rgba(61,242,154,.6);background:rgba(var(--glow),.08)} .ts-btn[aria-current="true"] .n{background:var(--accent);color:var(--accent-ink)} .ts-btn:focus-visible{outline-offset:2px} .ts-pause{margin-top:12px;min-height:44px;padding:0 14px;border:1px solid var(--line-2);border-radius:3px;font:600 12px/1 var(--mono);color:var(--text-2);background:none} .ts-pause:hover{color:var(--text);border-color:rgba(61,242,154,.5)} .ts-crop{position:relative;overflow:hidden;width:100%;cursor:zoom-in} .ts-crop:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .ts-inner{position:relative;width:100%} .ts-imgs{position:absolute;inset:0} .ts-img{position:absolute;left:0;top:0;width:100%;opacity:0;transition:opacity .5s} .ts-img.is-on{opacity:1} .ts-img img{display:block;width:100%;height:auto} .ts-zoom{position:absolute;right:10px;bottom:10px;padding:6px 10px;border-radius:999px;background:rgba(8,10,15,.78);border:1px solid rgba(255,255,255,.3);color:#fff;font:700 12px/1 var(--mono);letter-spacing:.02em;opacity:0;transition:opacity .25s;pointer-events:none} .ts-crop:hover .ts-zoom,.ts-crop:focus-visible .ts-zoom{opacity:1} @media (hover:none){.ts-zoom{opacity:1}} /* spotlight (lightbox: .ts-lb-frame must NOT clip with overflow:hidden or carry will-change:filter, else the backdrop-filter hole is lost and the sharp rectangle dims too; the crop clips and must be square, a border-radius on it also loses the hole): the picture is shown normally, then everything OUTSIDE the feature rectangle blurs and dims (backdrop-filter on a layer clipped with an evenodd hole), then the picture zooms in on it (f.js). Do not put filter / opacity<1 / mask on the ancestors of .d while it is on: that would make them the backdrop root and the blur would see nothing. */ .ts-spot,.ts-lb-spot{position:absolute;inset:0;pointer-events:none} .ts-spot i,.ts-lb-spot i{position:absolute;inset:0;display:block} .ts-spot .d,.ts-lb-spot .d{display:none;background:rgba(5,6,10,.06)} .ts-spot .r,.ts-lb-spot .r{background:rgba(255,255,255,.5);opacity:0;transition:opacity .35s} .ts-inner,.ts-lb-inner{transform-origin:0 0;will-change:transform} @media (max-width:899px){ .ts-stage{grid-template-columns:minmax(0,1fr);gap:16px} .ts-view{order:-1;top:8px;z-index:2;max-width:520px;margin-inline:auto;width:100%;background:#05060a} } @media (prefers-reduced-motion:reduce){.ts-spot,.ts-lb-spot,.ts-spot i,.ts-lb-spot i,.ts-d,.ts-btn,.ts-btn .n,.ts-zoom,.ts-img{transition:none}.ts-spot .d,.ts-lb-spot .d{display:none!important}.ts-inner,.ts-lb-inner{will-change:auto}} /* tour lightbox: the screenshot large (FLIP zoom + blur-to-sharp), vignette backdrop, title + text, prev / next */ .ts-lb{position:fixed;inset:0;z-index:210;opacity:0;transition:opacity .35s} .ts-lb.is-open{opacity:1}.ts-lb.is-closing{opacity:0;transition-duration:.55s} .ts-lb-bg{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 45%,rgba(3,4,8,.62),rgba(3,4,8,.9) 70%),radial-gradient(60% 50% at 20% 10%,rgba(var(--glow),.12),transparent 70%),radial-gradient(60% 50% at 85% 90%,rgba(236,0,140,.12),transparent 70%);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1)} .ts-lb-panel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(20px,3vw,44px);padding:clamp(56px,7vh,72px) clamp(16px,3vw,40px) clamp(16px,3vh,40px);overflow:auto} .ts-lb-frame{flex:0 1 auto;width:min(60vw,calc((100vh - 140px)*1.358));min-width:0;background:#05060a;box-shadow:0 0 0 1px rgba(var(--tw,255,255,255),.14),0 40px 120px -20px rgba(0,0,0,.9),0 0 90px -20px rgba(var(--glow),.4);will-change:transform} .ts-lb-crop{position:relative;overflow:hidden;width:100%} .ts-lb-inner{position:relative;width:100%} .ts-lb-inner .ts-imgs{position:absolute;inset:0} .ts-lb-inner .ts-img img{display:block;width:100%;height:auto} .ts-lb-info{flex:0 1 340px;min-width:0;opacity:0;transform:translateY(10px);transition:opacity .5s .3s,transform .5s .3s var(--ease)} .ts-lb.is-open .ts-lb-info{opacity:1;transform:none} .ts-lb-n{margin:0 0 10px;font:600 12px/1 var(--mono);letter-spacing:.06em;color:var(--accent)} .ts-lb-t{margin:0;font-size:clamp(22px,2.2vw,30px);line-height:1.1;letter-spacing:-.03em;color:#fff} .ts-lb-d{margin:12px 0 0;font-size:16px;line-height:1.55;color:#c3c8d0} .ts-lb-nav{display:flex;gap:10px;margin-top:20px} .ts-lb-b,.ts-lb-x{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(8,10,15,.78);color:#fff;cursor:pointer;transition:background .2s,border-color .2s,transform .3s} .ts-lb-b:hover{background:rgba(61,242,154,.3);border-color:var(--accent)} .ts-lb-x{position:absolute;top:12px;right:12px} .ts-lb-x:hover{background:rgba(236,0,140,.55);transform:rotate(90deg)} .ts-lb-b:focus-visible,.ts-lb-x:focus-visible{outline:3px solid #fff;outline-offset:3px} html.ts-lb-open{overflow:hidden} @media (max-width:899px){.ts-lb-panel{flex-direction:column;justify-content:flex-start;align-items:stretch}.ts-lb-frame{width:100%}.ts-lb-info{flex:none}} @media (prefers-reduced-motion:reduce){.ts-lb,.ts-lb.is-closing{transition:opacity .2s}.ts-lb-info{transition:none;opacity:1;transform:none}.ts-lb-x:hover{transform:none}} /* HERO SPLIT (pilot, Alerts page; opt-in .hero-split, 2026-10-13): like the homepage hero. Copy left, the video on a floating tilted glass card right (>=900px; tilt >=1100px as on the homepage), caption chip over the card. Under 900px: stacked as before. */ /* the "What's happening" card stays visible (under the video card on the right at >=900px, under the video below that) */ .hero-split .hero-happening{margin-top:40px;max-width:680px} @media (min-width:900px){ .hero-split>.container{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);column-gap:var(--s5,32px);align-items:center} .hero-split .crumbs{grid-column:1/-1} .hero-split .hero-copy{grid-column:1;grid-row:2;min-width:0} .hero-split .hero-copy h1{font-size:clamp(36px,3.9vw,60px);line-height:.98;letter-spacing:-.045em;max-width:13em} .hero-split .hero-copy .lede{max-width:50ch} /* long titles (>60 chars, class from build/patch): smaller h1 + wider copy column so the CTA stays above the fold at 1280-1440 */ .hero-split.hero-long>.container{grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr)} .hero-split.hero-long .hero-copy h1{font-size:clamp(30px,3.05vw,50px)} .hero-split .hero-happening{grid-column:1/-1;grid-row:3;margin-top:clamp(64px,6.5vw,96px)} .hero-split .hero-demo{grid-column:2;grid-row:2;display:block;margin-top:0;min-width:0} .hero-split .hero-demo .f-v4{perspective:1400px} .hero-split .demo-media{border-radius:12px;border:1px solid rgba(var(--tw,255,255,255),.14); box-shadow:0 0 0 1px rgba(var(--tw,255,255,255),.04),0 60px 110px -40px rgba(var(--ts,0,0,0),calc(.95*var(--sa,1))),0 0 140px -40px rgba(var(--vio),.6),-40px 40px 120px -60px rgba(var(--glow),.6); transition:transform .9s var(--ease),box-shadow .5s} .hero-split .demo-media::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;background:var(--d-iri);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.6} .hero-split .demo-media::before{content:"";position:absolute;inset:0;z-index:1;border-radius:12px;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(var(--tw,255,255,255),.07) 45%,transparent 58%)} .hero-split .demo-media .vid-toggle{right:12px;top:12px;bottom:auto;z-index:3} } @media (min-width:1100px){ .hero-split .hero-demo .f-v4{transform-style:preserve-3d} .hero-split .demo-media,html.d-fx .hero-split .demo-media{transform:rotateY(calc(-11deg + var(--ry,0deg))) rotateX(calc(4deg + var(--rx,0deg)));transform-origin:30% 50%} .hero-split .f-v4 .hf-cap{transform:translateZ(30px)} } @media (hover:hover) and (min-width:1100px){.hero-split .demo-media:hover,html.d-fx .hero-split .demo-media:hover{transform:rotateY(calc(-11deg + var(--ry,0deg))) rotateX(calc(4deg + var(--rx,0deg))) scale(1.012)}} @media (prefers-reduced-motion:reduce){.hero-split .demo-media,.hero-split .demo-media:hover,html.d-fx .hero-split .demo-media,html.d-fx .hero-split .demo-media:hover{transition:none;transform:none}} /* FEATURE CARDS (pilot, Alerts page; opt-in .feature-cards on the Features list): same card treatment as "How traders use it" (.card = glass surface, hair border, radius, shadow, [NN] label, green->magenta hairline + numerals, pink hover glow). Hover is transform/colour/shadow only, so the grid never reflows. */ .feature-cards{gap:var(--s2)} .feature-cards li.card{padding:var(--s4);border:1px solid var(--hair);--accent:#ff78c6;background:linear-gradient(90deg,#3df29a,#ec008c) 0 0/100% 2px no-repeat,var(--d-glass)} .feature-cards li.card h3{font-size:22px;letter-spacing:-.03em} .feature-cards li.card:hover>h3{color:#fff} .feature-cards li.card:hover{border-color:rgba(255,120,198,.55);background:linear-gradient(90deg,#3df29a,#ec008c) 0 0/100% 2px no-repeat,var(--d-glass);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(255,120,198,.25),0 22px 44px -16px rgba(236,0,140,.35),0 22px 40px -16px rgba(0,0,0,.95)} .feature-cards .card-n{display:inline-block;background:linear-gradient(90deg,#3df29a,#ff78c6);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .feature-cards .card-n::before,.feature-cards .card-n::after{-webkit-text-fill-color:#9aa0ab} @media (max-width:600px){.feature-cards li.card{padding:var(--s3)}.feature-cards li.card h3{font-size:19px}} /* effects never above content on narrow windows: a desktop page loaded wide and then resized/opened narrow keeps the fixed WebGL canvas (z-index -1, particle field); hide it under 900px on opted-in pages */ @media (max-width:899px){html[data-cards-late] #d-gl{display:none!important}} .f-next-kw{margin:0 0 var(--s2)} /* HERO LIGHTBOX (pilot, Alerts hero-split): the homepage hero player (H-T hf.css .hf-lb* / .hf-expand*), copied so service pages get the same look. JS: f.js. */ .hf-lb{--k-030408:3,4,8;--k-05060a:5,6,10;--k-080a0f:8,10,15;--kt-e8ebf0:232,235,240} .hf-lb{position:fixed;inset:0;z-index:200;opacity:0;transition:opacity .35s} .hf-lb.is-open{opacity:1}.hf-lb.is-closing{opacity:0;transition-duration:.5s} .hf-lb-bg{position:absolute;inset:0;background:rgba(var(--k-030408),.72);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1)} .hf-lb-frame{position:absolute;border-radius:14px;overflow:hidden;background:rgb(var(--k-05060a));box-shadow:0 0 0 1px rgba(var(--tw),.12),0 40px 120px -20px rgba(var(--ts),calc(.9*var(--sa))),0 0 90px -20px rgba(61,242,154,.35)} .hf-lb-frame img,.hf-lb-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block} .hf-lb-frame video{opacity:0;transition:opacity .4s}.hf-lb-frame.is-live video{opacity:1} .hf-lb-cap{position:absolute;margin:0;padding:6px 2px 0;font-size:clamp(15px,1.5vw,20px);font-weight:600;color:rgb(var(--tw));text-shadow:0 1px 14px rgba(var(--ts),calc(.9*var(--sa)));pointer-events:none} .hf-lb-x{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(var(--tw),.3);background:rgba(var(--k-080a0f),.78);color:rgb(var(--tw));cursor:pointer; -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s,transform .2s} .hf-lb-x:hover{background:rgba(236,0,140,.55);transform:rotate(90deg)} .hf-lb-x:focus-visible{outline:3px solid rgb(var(--tw));outline-offset:3px} html.hf-lb-open{overflow:hidden} @media (prefers-reduced-motion:reduce){.hf-lb,.hf-lb.is-closing{transition:opacity .2s}.hf-lb-x:hover{transform:none}} .hf-lb-ctl{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;padding:26px 10px 8px;background:linear-gradient(transparent,rgba(var(--k-030408),.85))} .hf-lb-b{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:0;background:rgba(var(--tw),.1);color:rgb(var(--tw));cursor:pointer} .hf-lb-b:hover{background:rgba(61,242,154,.35)} .hf-lb-b:focus-visible,.hf-lb-chip:focus-visible,.hf-lb-seek:focus-visible{outline:3px solid rgb(var(--tw));outline-offset:2px} .hf-lb-seek{flex:1;min-width:0;height:40px;margin:0;background:transparent;accent-color:#3df29a;cursor:pointer} .hf-lb-under{position:absolute} .hf-lb-under .hf-lb-cap{position:static} .hf-lb-ch{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin} .hf-lb-chip{min-height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(var(--tw),.28);background:rgba(var(--k-080a0f),.6);color:rgb(var(--kt-e8ebf0));font:600 13px/1 var(--font);cursor:pointer;transition:background .2s,border-color .2s} .hf-lb-chip{height:auto;max-width:100%;padding:9px 16px;line-height:1.25;text-align:start;white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden} @media (max-width:640px){.hf-lb-chip{max-width:min(78vw,300px)}} /* step caption chip: never cut text (long cues wrap, max 2 lines on narrow chips, slightly smaller on mid widths) */ .f-v4 .hf-caps li{min-width:0;overflow-wrap:anywhere;text-wrap:balance} @media (min-width:1100px) and (max-width:1366px){.f-v4 .hf-caps li{font-size:15px}.f-v4 .hf-cap{max-width:calc(100% - 72px)}} .hf-lb-chip:hover{border-color:#3df29a} .hf-lb-chip.on{background:rgba(61,242,154,.2);border-color:#3df29a;color:rgb(var(--tw))} .hf-lb-frame.is-fs,.hf-lb-frame:fullscreen,.hf-lb-frame:-webkit-full-screen{left:0!important;top:0!important;width:100vw!important;height:100vh!important;border-radius:0;transform:none!important;background:rgb(var(--tk))} .hf-lb-frame:fullscreen video,.hf-lb-frame:-webkit-full-screen video{object-fit:contain} @media (max-width:640px){.hf-lb-ch{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.hf-lb-chip{flex:none}} .hf-expand{position:absolute;inset:0;z-index:2;display:grid;place-items:center;border:0;padding:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent} .hf-expand-l{display:inline-flex;align-items:center;gap:8px;padding:11px 20px 11px 16px;border-radius:999px;background:rgba(var(--k-080a0f),.78);border:1px solid rgba(var(--tw),.35);color:rgb(var(--tw));font:700 14px/1 var(--font);letter-spacing:.02em;opacity:0;transform:translateY(8px) scale(.96);transition:opacity .3s,transform .4s var(--ease),background .3s;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .hf-expand-l svg{width:14px;height:14px} .hf-expand:hover .hf-expand-l,.hf-expand:focus-visible .hf-expand-l{opacity:1;transform:none;background:rgba(61,242,154,.22);border-color:#3df29a} .hf-expand:focus-visible{outline:3px solid rgb(var(--tw));outline-offset:-4px;border-radius:12px} @media (hover:none){.hf-expand{display:block}.hf-expand-l{opacity:1;transform:none;position:absolute;left:12px;bottom:12px;padding:9px 14px 9px 12px;font-size:13px}} @media (prefers-reduced-motion:reduce){.hf-screen:hover .hf-media{transform:none}.hf-screen .hf-media,.hf-expand-l{transition:opacity .2s}.hf-expand-l{transform:none}} .hero-split .demo-media .hf-expand{z-index:2} .hero-split .demo-media .vid-toggle{z-index:3} .hero-split .hf-expand-l{font-family:inherit} /* hero video affordance (14.10): the Watch pill is always visible (it used to appear only on hover, so a poster-only hero - reduced motion, data saver, or before the clip loads - read as a picture). Playing: small pill bottom-left. Poster only (no .is-live): centred, larger. Same on every hero-split page. */ .hero-split .hf-expand{display:block} .hero-split .hf-expand-l{opacity:1;transform:none;position:absolute;left:12px;bottom:12px;padding:9px 14px 9px 12px;font-size:13px} .hero-split .demo-media:not(.is-live) .hf-expand-l{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);padding:14px 24px 14px 20px;font-size:16px;background:rgba(61,242,154,.22);border-color:#3df29a} .hero-split .demo-media:not(.is-live) .hf-expand-l svg{width:18px;height:18px} .hero-split .demo-media{cursor:pointer} /* MOTION PASS (pilot, Alerts page; opt-in html[data-motion]; 2026-10-13). Content entrances + effects on the site's neon / glass / pixel-mono language. Rules: only transform / opacity / clip-path / background-position / box-shadow animate (no layout, CLS ~0). Hidden-until-revealed states exist only under html.fx (set by site.js; never under prefers-reduced-motion, so reduced motion = instant + static) and only on elements f.js tagged data-m, so no JS = all content visible. Phones / touch: fade + rise only (no tilt, no traces). */ @property --m-ang{syntax:'';inherits:false;initial-value:0deg} @keyframes m-trace{to{--m-ang:360deg}} @keyframes m-ring{0%{--m-ang:0deg;opacity:0}10%{opacity:1}85%{opacity:1}100%{--m-ang:360deg;opacity:.0}} @keyframes m-idle{0%{--m-ang:0deg;opacity:0}12%{opacity:.7}40%{opacity:.7}52%,100%{--m-ang:360deg;opacity:0}} @keyframes m-scan{0%{clip-path:inset(0 100% 0 0);opacity:.3}100%{clip-path:inset(0 0 0 0);opacity:1}} @keyframes m-flick{0%,100%{transform:none}25%{transform:translate3d(2px,0,0)}50%{transform:translate3d(-2px,0,0)}75%{transform:translate3d(1px,0,0)}} @keyframes m-head{from{clip-path:inset(0 0 100% 0);transform:translate3d(0,.42em,0)}to{clip-path:inset(-10% 0 -25% 0);transform:none}} @keyframes m-rise{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}} @keyframes m-row{from{opacity:0;transform:translate3d(-22px,0,0)}to{opacity:1;transform:none}} @keyframes m-card{from{opacity:0;transform:translate3d(0,28px,0) perspective(900px) rotateX(8deg) scale(.97)}to{opacity:1;transform:none}} @keyframes m-glow{50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(61,242,154,.35),0 0 38px -6px rgba(61,242,154,.5),0 0 60px -10px rgba(236,0,140,.35)}} @keyframes m-hair{from{background-size:0% 2px,auto}to{background-size:100% 2px,auto}} @keyframes m-sheen{from{background-position:-160% 0,0 0}to{background-position:260% 0,0 0}} @keyframes m-line{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes m-frame{from{opacity:0;clip-path:inset(100% 0 0 0);transform:translate3d(0,24px,0) scale(.98)}to{opacity:1;clip-path:inset(0 0 0 0);transform:none}} @keyframes m-art{from{opacity:0;transform:translate3d(48px,0,0) rotate(2deg)}to{opacity:1;transform:none}} /* hidden states: only for elements f.js tagged, only until .m-in */ html.fx[data-motion] [data-m]:not(.m-in){opacity:0} html.fx[data-motion] [data-m="eyebrow"].m-in{animation:m-scan .7s steps(14,end) calc(var(--mi,0)*80ms) backwards,m-flick .35s steps(1,end) calc(.7s + var(--mi,0)*80ms) 1} html.fx[data-motion] [data-m="h2"].m-in{animation:m-head .85s var(--ease) calc(var(--mi,0)*60ms + .1s) backwards;clip-path:inset(-10% 0 -25% 0)} html.fx[data-motion] [data-m="p"].m-in{animation:m-rise .75s var(--ease) calc(var(--mi,0)*90ms + .22s) backwards} html.fx[data-motion] [data-m="row"].m-in{animation:m-row .6s var(--ease) calc(var(--mi,0)*70ms) backwards} html.fx[data-motion] [data-m="frame"].m-in{animation:m-frame .95s var(--ease) .1s backwards} html.fx[data-motion] [data-m="art"].m-in{animation:m-art 1s var(--ease) .35s backwards} /* cards that site.js already reveals (data-r + .in): richer entrance, border-light sweep along the top hairline, one glow pulse */ html.fx[data-motion] .card[data-r].in,html.fx[data-motion] .feature-cards>li[data-r].in{animation:m-card .85s var(--ease) calc(var(--i,0)*90ms) backwards,m-hair .9s var(--ease) calc(var(--i,0)*90ms + .25s) backwards,m-glow 1.5s ease-out calc(var(--i,0)*90ms + .5s) 1} /* "What's happening" box: rises in, glass sweep over its backing, neon border drawn once, then a soft comet keeps circling the edge */ html.fx[data-motion] .hero-happening[data-m].m-in{animation:m-rise .9s var(--ease) .15s backwards} html.fx[data-motion] .hero-happening::before{background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.17) 50%,transparent 58%) -160% 0/60% 100% no-repeat,linear-gradient(100deg,rgba(5,5,7,.74),rgba(5,5,7,.58) 60%,rgba(5,5,7,.36))} html.fx[data-motion] .hero-happening.m-in::before{animation:m-sheen 1.5s var(--ease) .45s 1 both} html.fx[data-motion] .hero-happening::after{content:"";position:absolute;inset:-20px -26px -20px -22px;border-radius:16px;padding:1.5px;pointer-events:none;z-index:-1;opacity:0; background:conic-gradient(from var(--m-ang),transparent 0 58%,#3df29a 80%,#ff78c6 96%,transparent 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude} html.fx[data-motion] .hero-happening.m-in::after{animation:m-ring 1.9s cubic-bezier(.4,0,.2,1) .3s 1 both,m-idle 9s linear 2.4s infinite} /* section connector: a hairline under every section head draws in with the heading */ html.fx[data-motion] .section-head{position:relative} html.fx[data-motion] .section-head::after{content:"";position:absolute;left:0;bottom:calc(-1 * var(--s4,24px));width:min(220px,40%);height:1px;background:linear-gradient(90deg,var(--accent),#ff78c6,transparent);transform:scaleX(0);transform-origin:0 50%;pointer-events:none} html.fx[data-motion] .section-head.in::after{animation:m-line 1s var(--ease) .5s both} /* the big sign-up block: rises with a glow pulse, its tab card slides in tilted */ html.fx[data-motion] .f-next-in[data-m].m-in{animation:m-card 1s var(--ease) backwards,m-glow 1.8s ease-out .6s 1} /* hover micro-interactions (layout-neutral): tour rows nudge, big sign-up block lifts its tab card */ @media (hover:hover) and (min-width:900px){ html.fx[data-motion] .ts-btn{transition:color .15s,border-color .2s,background-color .2s,transform .25s var(--ease)} html.fx[data-motion] .ts-btn:hover{transform:translate3d(4px,0,0)} html.fx[data-motion] .f-next-tilt{transition:transform .5s var(--ease)} html.fx[data-motion] .f-next-in:hover .f-next-tilt{transform:translate3d(0,-6px,0) rotate(-.6deg)} } /* phones / touch: fade + rise only */ @media (max-width:899px),(hover:none){ html.fx[data-motion] .card[data-r].in,html.fx[data-motion] .feature-cards>li[data-r].in{animation:m-rise .7s var(--ease) calc(var(--i,0)*70ms) backwards} html.fx[data-motion] .hero-happening.m-in::after{animation:none;opacity:0} html.fx[data-motion] .hero-happening.m-in::before{animation:none} html.fx[data-motion] [data-m="art"].m-in{animation:m-rise .8s var(--ease) .2s backwards} html.fx[data-motion] [data-m="h2"].m-in{animation:m-rise .7s var(--ease) .1s backwards;clip-path:none} html.fx[data-motion] .f-next-in[data-m].m-in{animation:m-rise .8s var(--ease) backwards} } /* PHONES: the hero CTAs come right after the title so the cookie banner (fixed, ~78px) never covers "Sign up free" / "Take the tour" on the first screen (scan 2026-10-14, mobile.cookie-covers-cta). Source order is unchanged; only the visual order of the hero copy. */ @media (max-width:600px){.hero-copy>.tp-svc-help,.hero-copy>.lede{order:2}} /* SHORT LAPTOP VIEWPORTS (QA 2026-10-14, 1366x768): hero-split heroes with a long lede pushed the primary CTA below the fold (liquidation-heatmap 835, see-the-crypto 867, tokenized-stocks 778, custom-charting 747 vs 768). Tighter lede, H1 and gaps at >=900px wide and <=800px tall only; no copy change. */ @media (min-width:900px) and (max-height:800px){ .hero-split .hero-copy h1{font-size:clamp(30px,3.2vw,46px)} .hero-split.hero-long .hero-copy h1{font-size:clamp(28px,2.75vw,40px)} .hero-split .hero-copy .lede{font-size:clamp(16px,1.3vw,18px);line-height:1.5} .hero-split .hero-copy>.actions{margin-top:20px} } /* carousels: these three tab images are tall windows (about 800x1300-1440). cover cropped them to a top slice; show the whole window instead (2026-10-14). Scoped to the hub carousel, the "more services" showcase frame and its mobile thumb; other cards keep cover. */ .y-car-frame img[src*="multi-exchange-orderbook"],.y-car-frame img[src*="liquidation-tracker"],.y-car-frame img[src*="coin-info"],.y-car-frame img[src*="hyperliquid-whale-tracker"], .f-show-frame img[src*="multi-exchange-orderbook"],.f-show-frame img[src*="liquidation-tracker"],.f-show-frame img[src*="coin-info"],.f-show-frame img[src*="hyperliquid-whale-tracker"], .f-show-thumb img[src*="multi-exchange-orderbook"],.f-show-thumb img[src*="liquidation-tracker"],.f-show-thumb img[src*="coin-info"],.f-show-thumb img[src*="hyperliquid-whale-tracker"]{object-fit:contain;object-position:50% 50%} /* tabs-list videos (2026-10-14): every list preview is the tab's looping take (tabClip), a poster underneath and a