/* XpherAI — unified stylesheet One file for both pages. Add a class to : landing page -> legal page -> Global section = selectors identical on both pages. Each page section is scoped via :where(body.page-*) to preserve original specificity & source order. identical=4 divergent=16 */ /* ===== GLOBAL (identical on both pages) ===== */ *{margin:0;padding:0;box-sizing:border-box} .brand .mark::after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--bg-0)} @keyframes spin{to{transform:rotate(360deg)}} .foot a:hover{color:var(--orange-bright)} /* ===== PAGE: LANDING ===== */ body.page-landing{ --orange:#F47B3D;--orange-bright:#FF9A5A;--orange-deep:#C45A28;--orange-soft:rgba(244,123,61,.12); --bg-0:#070707;--bg-1:#0E0E0E;--bg-2:#161616;--bg-3:#1F1F1F; --line:rgba(244,123,61,.18);--hair:rgba(255,255,255,.07); --text:#F5F2EF;--muted:rgba(245,242,239,.60);--muted-2:rgba(245,242,239,.40); --display:'Clash Display','Sora',sans-serif;--body:'Manrope',sans-serif; --maxw:1200px;--ease:cubic-bezier(.16,1,.3,1); } html:where(:has(body.page-landing)){scroll-behavior:smooth;-webkit-text-size-adjust:100%} :where(body.page-landing) html.lenis,:where(body.page-landing) html.lenis body{height:auto} :where(body.page-landing) .lenis.lenis-smooth{scroll-behavior:auto!important} body.page-landing{background:var(--bg-0);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;} @media(max-width:900px){body.page-landing{cursor:auto}} :where(body.page-landing) #gl{position:fixed;inset:0;z-index:0;pointer-events:none} body.page-landing::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.045;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} :where(body.page-landing) .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative;z-index:3} :where(body.page-landing) a{color:inherit;text-decoration:none} :where(body.page-landing) h1,:where(body.page-landing) h2,:where(body.page-landing) h3{font-family:var(--display);letter-spacing:-.02em;line-height:1.02;font-weight:600} :where(body.page-landing) section{position:relative;z-index:3} :where(body.page-landing) .cursor{position:fixed;top:0;left:0;width:8px;height:8px;border-radius:50%;background:var(--orange-bright);z-index:9999;pointer-events:none;transform:translate(-50%,-50%);mix-blend-mode:screen} :where(body.page-landing) .cursor-ring{position:fixed;top:0;left:0;width:38px;height:38px;border:1px solid rgba(244,123,61,.5);border-radius:50%;z-index:9998;pointer-events:none;transform:translate(-50%,-50%);transition:width .25s,height .25s,background .25s,border-color .25s} :where(body.page-landing) .cursor-ring.hover{width:60px;height:60px;background:rgba(244,123,61,.08);border-color:var(--orange-bright)} @media(max-width:900px){:where(body.page-landing) .cursor,:where(body.page-landing) .cursor-ring{display:none}} :where(body.page-landing) #nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:20px 34px;transition:all .5s var(--ease)} :where(body.page-landing) #nav.scrolled{background:rgba(7,7,7,.7);backdrop-filter:blur(20px);border-bottom:1px solid var(--hair);padding:13px 34px} :where(body.page-landing) .brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.01em} :where(body.page-landing) .brand .mark{width:32px;height:32px;border-radius:50%;background:conic-gradient(from 0deg,var(--orange-deep),var(--orange),var(--orange-bright),var(--orange-deep));position:relative;animation:spin 16s linear infinite;box-shadow:0 0 22px rgba(244,123,61,.55)} :where(body.page-landing) .nav-links{display:flex;gap:34px;align-items:center} :where(body.page-landing) .nav-links a:not(.btn){font-size:15px;color:var(--muted);font-weight:500;transition:color .2s;position:relative} :where(body.page-landing) .nav-links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;background:var(--orange-bright);transition:width .3s var(--ease)} :where(body.page-landing) .nav-links a:not(.btn):hover{color:var(--text)} :where(body.page-landing) .nav-links a:not(.btn):hover::after{width:100%} :where(body.page-landing) .btn{font-family:var(--body);font-weight:700;font-size:15px;cursor:pointer;border:none;padding:12px 24px;border-radius:40px;transition:transform .3s var(--ease),box-shadow .4s;display:inline-flex;align-items:center;gap:8px} :where(body.page-landing) .btn-primary{background:linear-gradient(135deg,var(--orange-bright),var(--orange-deep));color:#fff;box-shadow:0 8px 28px rgba(244,123,61,.38)} :where(body.page-landing) .btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(244,123,61,.55)} :where(body.page-landing) .btn-ghost{background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--text)} :where(body.page-landing) .btn-ghost:hover{border-color:var(--orange);background:var(--orange-soft);transform:translateY(-2px)} @media(max-width:820px){:where(body.page-landing) .nav-links a:not(.btn){display:none}} :where(body.page-landing) header{position:relative;padding:180px 0 100px;overflow:visible} :where(body.page-landing) .hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center} :where(body.page-landing) .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--orange-bright);border:1px solid var(--line);padding:8px 16px;border-radius:40px;background:var(--orange-soft);margin-bottom:30px} :where(body.page-landing) .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--orange-bright);box-shadow:0 0 10px var(--orange-bright);animation:pulse 2s infinite} @keyframes pulse{50%{opacity:.35}} :where(body.page-landing) h1.hero-title{font-size:clamp(42px,6.6vw,84px);font-weight:600;letter-spacing:-.03em} :where(body.page-landing) h1.hero-title .grad{background:linear-gradient(120deg,var(--orange-bright),var(--orange) 48%,var(--orange-deep));-webkit-background-clip:text;background-clip:text;color:transparent} :where(body.page-landing) .hero-line{display:block;overflow:hidden} :where(body.page-landing) .hero-line>span{display:block} :where(body.page-landing) .hero-sub{font-size:clamp(17px,1.9vw,20px);color:var(--muted);max-width:540px;margin:30px 0 38px} :where(body.page-landing) .hero-cta{display:flex;gap:16px;flex-wrap:wrap;align-items:center} :where(body.page-landing) .hero-meta{display:flex;gap:34px;margin-top:46px;flex-wrap:wrap} :where(body.page-landing) .hero-meta .num{font-family:var(--display);font-weight:700;font-size:30px;color:var(--text);display:block} :where(body.page-landing) .hero-meta .lbl{font-size:13px;color:var(--muted-2)} :where(body.page-landing) .phone-stage{position:relative;display:flex;justify-content:center;align-items:center;min-height:600px;perspective:1400px} :where(body.page-landing) .phone{width:288px;height:600px;border-radius:46px;position:relative;background:linear-gradient(160deg,#242424,#0b0b0b);border:1px solid rgba(244,123,61,.22);box-shadow:0 50px 100px rgba(0,0,0,.7),0 0 0 9px rgba(18,18,18,.92),0 0 80px rgba(244,123,61,.2);padding:15px;z-index:5;transform-style:preserve-3d} :where(body.page-landing) .phone-screen{width:100%;height:100%;border-radius:32px;background:var(--bg-0);overflow:hidden;position:relative;display:flex;flex-direction:column} :where(body.page-landing) .notch{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:96px;height:19px;background:#000;border-radius:0 0 15px 15px;z-index:6} :where(body.page-landing) .scr-top{display:flex;align-items:center;justify-content:space-between;padding:32px 17px 12px} :where(body.page-landing) .scr-title{font-family:var(--display);font-weight:600;font-size:14px} :where(body.page-landing) .model-chip{font-size:11px;border:1px solid var(--line);border-radius:9px;padding:5px 9px;color:var(--orange-bright);display:flex;align-items:center;gap:5px} :where(body.page-landing) .scr-msg{margin:0 15px 11px;padding:11px 13px;border-radius:13px;font-size:11.5px;line-height:1.5;color:var(--muted)} :where(body.page-landing) .scr-msg.user{background:rgba(244,123,61,.2);align-self:flex-end;border-bottom-right-radius:3px;max-width:80%;color:var(--text)} :where(body.page-landing) .scr-msg.bot{background:var(--bg-2);border-bottom-left-radius:3px;max-width:88%} :where(body.page-landing) .switcher{margin:6px 15px;background:var(--bg-2);border:1px solid var(--line);border-radius:15px;overflow:hidden} :where(body.page-landing) .sw-row{display:flex;align-items:center;justify-content:space-between;padding:10px 13px;font-size:11.5px;border-bottom:1px solid rgba(255,255,255,.05);opacity:.4;transition:.45s var(--ease)} :where(body.page-landing) .sw-row:last-child{border-bottom:none} :where(body.page-landing) .sw-row.active{opacity:1;background:var(--orange-soft);color:var(--orange-bright);font-weight:600} :where(body.page-landing) .scr-input{margin:auto 13px 15px;border:1px solid var(--line);border-radius:26px;padding:10px 15px;font-size:11px;color:var(--muted-2);display:flex;align-items:center;justify-content:space-between} :where(body.page-landing) .scr-input .plus{color:var(--orange)} :where(body.page-landing) .orbit{position:absolute;font-family:var(--display);font-weight:600;font-size:13px;padding:10px 16px;border-radius:40px;background:rgba(18,18,18,.85);border:1px solid var(--line);backdrop-filter:blur(10px);box-shadow:0 12px 34px rgba(0,0,0,.5);z-index:6;will-change:transform} :where(body.page-landing) .orbit .d{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--orange-bright);margin-right:8px;vertical-align:middle;box-shadow:0 0 8px var(--orange-bright)} :where(body.page-landing) .orbit.b1{top:36px;left:-20px} :where(body.page-landing) .orbit.b2{top:200px;right:-44px} :where(body.page-landing) .orbit.b3{bottom:80px;left:-44px} @media(max-width:900px){:where(body.page-landing) .hero-grid{grid-template-columns:1fr;text-align:center}:where(body.page-landing) .hero-sub{margin-left:auto;margin-right:auto}:where(body.page-landing) .hero-cta,:where(body.page-landing) .hero-meta,:where(body.page-landing) .eyebrow{justify-content:center}:where(body.page-landing) .phone-stage{margin-top:24px}:where(body.page-landing) .orbit.b1{left:0}:where(body.page-landing) .orbit.b2{right:-10px}:where(body.page-landing) .orbit.b3{left:-10px}} :where(body.page-landing) .strip{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:26px 0;overflow:hidden;background:rgba(14,14,14,.4)} :where(body.page-landing) .marquee{display:flex;gap:54px;white-space:nowrap;width:max-content;animation:slide 26s linear infinite;align-items:center} :where(body.page-landing) .marquee:hover{animation-play-state:paused} @keyframes slide{to{transform:translateX(-50%)}} :where(body.page-landing) .m-item{font-family:var(--display);font-weight:600;font-size:19px;color:var(--muted);display:flex;align-items:center;gap:54px} :where(body.page-landing) .m-item::after{content:"✦";color:var(--orange);font-size:13px} :where(body.page-landing) .sec{padding:120px 0} :where(body.page-landing) .sec-head{max-width:680px;margin-bottom:60px} :where(body.page-landing) .sec-head.center{margin-left:auto;margin-right:auto;text-align:center} :where(body.page-landing) .sec-head .tag{font-size:13px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--orange-bright);margin-bottom:16px;display:block} :where(body.page-landing) .sec-head h2{font-size:clamp(32px,4.8vw,56px);font-weight:600;letter-spacing:-.03em} :where(body.page-landing) .sec-head p{color:var(--muted);margin-top:20px;font-size:18px} :where(body.page-landing) .bento{display:grid;grid-template-columns:repeat(6,1fr);gap:20px} :where(body.page-landing) .card{background:linear-gradient(160deg,var(--bg-2),var(--bg-1));border:1px solid var(--hair);border-radius:24px;padding:32px;position:relative;overflow:hidden;transition:transform .45s var(--ease),border-color .45s} :where(body.page-landing) .card:hover{transform:translateY(-8px);border-color:var(--line)} :where(body.page-landing) .card .glow{position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(244,123,61,.18),transparent 65%);opacity:0;transition:opacity .4s;pointer-events:none;transform:translate(-50%,-50%);left:0;top:0} :where(body.page-landing) .card:hover .glow{opacity:1} :where(body.page-landing) .card .ico{width:48px;height:48px;border-radius:14px;background:var(--orange-soft);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin-bottom:20px;position:relative;z-index:2} :where(body.page-landing) .card .ico svg{width:25px;height:25px;stroke:var(--orange-bright);fill:none;stroke-width:1.8} :where(body.page-landing) .card h3{font-size:21px;font-weight:600;margin-bottom:11px;position:relative;z-index:2} :where(body.page-landing) .card p{color:var(--muted);font-size:15.5px;position:relative;z-index:2} :where(body.page-landing) .c-span3{grid-column:span 3} :where(body.page-landing) .c-span2{grid-column:span 2} :where(body.page-landing) .c-span6{grid-column:span 6} :where(body.page-landing) .card.feature-big{display:grid;grid-template-columns:1.1fr 1fr;gap:34px;align-items:center;padding:42px} :where(body.page-landing) .chip-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:8px} :where(body.page-landing) .mini-chip{font-size:13px;padding:7px 14px;border-radius:22px;border:1px solid var(--line);color:var(--muted);background:rgba(244,123,61,.05);transition:.3s} :where(body.page-landing) .mini-chip.on{color:#fff;background:linear-gradient(135deg,var(--orange),var(--orange-deep));border-color:transparent} :where(body.page-landing) .thread-demo{background:var(--bg-0);border:1px solid var(--line);border-radius:16px;padding:8px;position:relative;z-index:2} :where(body.page-landing) .thread-demo .tr{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;font-size:13px;border-radius:10px;transition:.4s var(--ease)} :where(body.page-landing) .thread-demo .tr .ct{font-size:11px;color:var(--muted-2);border:1px solid var(--hair);border-radius:20px;padding:3px 10px} :where(body.page-landing) .thread-demo .tr.lit{background:var(--orange-soft);color:var(--orange-bright);font-weight:600} @media(max-width:900px){:where(body.page-landing) .bento{grid-template-columns:1fr}:where(body.page-landing) .c-span3,:where(body.page-landing) .c-span2,:where(body.page-landing) .c-span6{grid-column:span 1}:where(body.page-landing) .card.feature-big{grid-template-columns:1fr}} :where(body.page-landing) .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} :where(body.page-landing) .step .n{font-family:var(--display);font-weight:700;font-size:60px;color:transparent;-webkit-text-stroke:1.4px var(--orange);opacity:.5;line-height:1} :where(body.page-landing) .step h3{font-size:21px;margin:16px 0 9px;font-weight:600} :where(body.page-landing) .step p{color:var(--muted);font-size:15.5px} @media(max-width:780px){:where(body.page-landing) .steps{grid-template-columns:1fr}} :where(body.page-landing) .spaces-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} :where(body.page-landing) .folder-list{background:linear-gradient(160deg,var(--bg-2),var(--bg-1));border:1px solid var(--hair);border-radius:26px;padding:16px} :where(body.page-landing) .folder{display:flex;align-items:center;gap:13px;padding:15px 17px;border-radius:13px;transition:.35s var(--ease)} :where(body.page-landing) .folder:hover{background:var(--orange-soft);transform:translateX(6px)} :where(body.page-landing) .folder svg{width:21px;height:21px;stroke:var(--orange);fill:none;stroke-width:1.8} :where(body.page-landing) .folder .nm{font-family:var(--display);font-weight:600;font-size:16px} :where(body.page-landing) .folder .ct{margin-left:auto;font-size:12px;color:var(--muted-2);border:1px solid var(--hair);border-radius:20px;padding:3px 11px} @media(max-width:900px){:where(body.page-landing) .spaces-grid{grid-template-columns:1fr}} :where(body.page-landing) .shots{display:flex;gap:34px;justify-content:center;align-items:flex-end;flex-wrap:wrap} :where(body.page-landing) .shot-frame{width:268px;flex:0 0 auto;border-radius:40px;padding:13px;background:linear-gradient(160deg,#242424,#0b0b0b);border:1px solid rgba(244,123,61,.22);box-shadow:0 34px 76px rgba(0,0,0,.6),0 0 0 8px rgba(18,18,18,.92);transition:transform .45s var(--ease),box-shadow .45s} :where(body.page-landing) .shot-frame:hover{transform:translateY(-12px) scale(1.02);box-shadow:0 46px 100px rgba(0,0,0,.7),0 0 0 8px rgba(18,18,18,.92),0 0 60px rgba(244,123,61,.24)} :where(body.page-landing) .shot-frame.tall{transform:translateY(-26px)} :where(body.page-landing) .shot-frame.tall:hover{transform:translateY(-38px) scale(1.02)} :where(body.page-landing) .shot-screen{position:relative;border-radius:28px;overflow:hidden;background:var(--bg-1);aspect-ratio:9/19.5} :where(body.page-landing) .shot-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} :where(body.page-landing) .shot-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;background:linear-gradient(160deg,rgba(244,123,61,.08),rgba(10,10,10,.4)),repeating-linear-gradient(45deg,rgba(255,255,255,.025) 0 12px,transparent 12px 24px);color:var(--muted-2);text-align:center;padding:24px} :where(body.page-landing) .shot-ph svg{width:40px;height:40px;stroke:var(--orange);fill:none;stroke-width:1.6;opacity:.7} :where(body.page-landing) .shot-ph .t{font-family:var(--display);font-weight:600;font-size:14px;color:var(--muted)} :where(body.page-landing) .shot-ph .s{font-size:12px;line-height:1.4} :where(body.page-landing) .shot-cap{text-align:center;margin-top:20px;font-family:var(--display);font-weight:600;font-size:14px;color:var(--muted)} @media(max-width:900px){:where(body.page-landing) .shot-frame.tall{transform:none}:where(body.page-landing) .shot-frame.tall:hover{transform:translateY(-12px) scale(1.02)}:where(body.page-landing) .shot-frame{width:230px}} :where(body.page-landing) .compare{max-width:760px;margin:0 auto;border:1px solid var(--hair);border-radius:24px;overflow:hidden;background:linear-gradient(160deg,var(--bg-2),var(--bg-1))} :where(body.page-landing) .cmp-row{display:grid;grid-template-columns:1.4fr 1fr 1fr;align-items:center;padding:18px 26px;border-bottom:1px solid var(--hair);font-size:15.5px} :where(body.page-landing) .cmp-row:last-child{border-bottom:none} :where(body.page-landing) .cmp-row.head{background:rgba(244,123,61,.06);font-family:var(--display);font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)} :where(body.page-landing) .cmp-row .xa{color:var(--orange-bright);font-weight:700;text-align:center} :where(body.page-landing) .cmp-row .ot{color:var(--muted-2);text-align:center} :where(body.page-landing) .cmp-row .lbl{color:var(--text)} :where(body.page-landing) .tick-n{color:var(--muted-2)} @media(max-width:620px){:where(body.page-landing) .cmp-row{grid-template-columns:1.3fr .8fr .8fr;padding:14px 16px;font-size:13.5px}} :where(body.page-landing) .tcols{columns:3;column-gap:22px} @media(max-width:900px){:where(body.page-landing) .tcols{columns:2}} @media(max-width:620px){:where(body.page-landing) .tcols{columns:1}} :where(body.page-landing) .tcard{break-inside:avoid;background:linear-gradient(160deg,var(--bg-2),var(--bg-1));border:1px solid var(--hair);border-radius:20px;padding:26px;margin-bottom:22px;transition:.4s var(--ease)} :where(body.page-landing) .tcard:hover{border-color:var(--line);transform:translateY(-4px)} :where(body.page-landing) .tcard .stars{color:var(--orange-bright);font-size:14px;letter-spacing:2px;margin-bottom:14px} :where(body.page-landing) .tcard p{font-size:15.5px;color:var(--text);line-height:1.55} :where(body.page-landing) .tcard .who{display:flex;align-items:center;gap:11px;margin-top:18px} :where(body.page-landing) .tcard .av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--orange),var(--orange-deep));display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:600;font-size:15px;color:#fff} :where(body.page-landing) .tcard .nm{font-weight:600;font-size:14px} :where(body.page-landing) .tcard .rl{font-size:12px;color:var(--muted-2)} :where(body.page-landing) .faq{max-width:760px;margin:0 auto} :where(body.page-landing) .q{border-bottom:1px solid var(--hair)} :where(body.page-landing) .q-head{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 4px;cursor:pointer;font-family:var(--display);font-weight:600;font-size:18px} :where(body.page-landing) .q-head .ic{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:.4s var(--ease);color:var(--orange-bright)} :where(body.page-landing) .q.open .q-head .ic{transform:rotate(45deg);background:var(--orange-soft)} :where(body.page-landing) .q-body{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)} :where(body.page-landing) .q-body p{color:var(--muted);padding:0 4px 24px;font-size:16px} :where(body.page-landing) .cta-band{margin:80px 0;border-radius:36px;padding:90px 40px;text-align:center;position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(244,123,61,.18),rgba(20,20,20,.55));border:1px solid var(--line)} :where(body.page-landing) .cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 90% at 50% 0,rgba(255,154,90,.28),transparent 60%)} :where(body.page-landing) .cta-band h2{font-size:clamp(32px,5vw,58px);font-weight:600;position:relative;letter-spacing:-.03em} :where(body.page-landing) .cta-band p{color:var(--muted);max-width:540px;margin:20px auto 36px;position:relative} :where(body.page-landing) .store-badges{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;position:relative} :where(body.page-landing) footer{border-top:1px solid var(--hair);padding:60px 0 44px;position:relative;z-index:3} :where(body.page-landing) .foot{display:flex;justify-content:space-between;align-items:flex-start;gap:34px;flex-wrap:wrap} :where(body.page-landing) .foot .links{display:flex;gap:34px;flex-wrap:wrap} :where(body.page-landing) .foot a{color:var(--muted);font-size:14px;transition:.2s} :where(body.page-landing) .copy{color:var(--muted-2);font-size:13px;margin-top:34px;border-top:1px solid var(--hair);padding-top:26px} /* ===== PAGE: LEGAL ===== */ body.page-legal{ --orange:#F47B3D;--orange-bright:#FF9A5A;--orange-deep:#C45A28;--orange-soft:rgba(244,123,61,.12); --bg-0:#070707;--bg-1:#0E0E0E;--bg-2:#161616;--line:rgba(244,123,61,.18);--hair:rgba(255,255,255,.07); --text:#F5F2EF;--muted:rgba(245,242,239,.66);--muted-2:rgba(245,242,239,.42); --display:'Clash Display','Sora',sans-serif;--body:'Manrope',sans-serif;--maxw:1180px;--ease:cubic-bezier(.16,1,.3,1); } html:where(:has(body.page-legal)){scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%} body.page-legal{background:var(--bg-0);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased} body.page-legal::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(60% 45% at 85% -5%,rgba(244,123,61,.16),transparent 60%),radial-gradient(45% 40% at 0% 12%,rgba(196,90,40,.10),transparent 55%)} body.page-legal::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.04;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} :where(body.page-legal) a{color:var(--orange-bright);text-decoration:none} :where(body.page-legal) .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative;z-index:2} :where(body.page-legal) h1,:where(body.page-legal) h2,:where(body.page-legal) h3{font-family:var(--display);letter-spacing:-.02em;line-height:1.1;font-weight:600} :where(body.page-legal) .topnav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:16px 34px;background:rgba(7,7,7,.72);backdrop-filter:blur(20px);border-bottom:1px solid var(--hair)} :where(body.page-legal) .brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:700;font-size:20px;color:var(--text)} :where(body.page-legal) .brand .mark{width:30px;height:30px;border-radius:50%;background:conic-gradient(from 0deg,var(--orange-deep),var(--orange),var(--orange-bright),var(--orange-deep));position:relative;animation:spin 16s linear infinite;box-shadow:0 0 20px rgba(244,123,61,.5)} :where(body.page-legal) .nav-links{display:flex;gap:28px;align-items:center} :where(body.page-legal) .nav-links a{font-size:14.5px;color:var(--muted);font-weight:500;transition:color .2s} :where(body.page-legal) .nav-links a:hover{color:var(--text)} :where(body.page-legal) .btn{font-weight:700;font-size:14px;padding:10px 20px;border-radius:40px;background:linear-gradient(135deg,var(--orange-bright),var(--orange-deep));color:#fff;box-shadow:0 6px 22px rgba(244,123,61,.35);transition:transform .3s var(--ease)} :where(body.page-legal) .btn:hover{transform:translateY(-2px)} @media(max-width:760px){:where(body.page-legal) .nav-links a:not(.btn){display:none}} :where(body.page-legal) .legal-hero{padding:140px 0 30px;text-align:center} :where(body.page-legal) .legal-hero .pill{display:inline-flex;gap:8px;align-items:center;font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--orange-bright);border:1px solid var(--line);background:var(--orange-soft);padding:7px 15px;border-radius:40px;margin-bottom:22px} :where(body.page-legal) .legal-hero h1{font-size:clamp(34px,5.4vw,58px);letter-spacing:-.03em} :where(body.page-legal) .legal-hero p{color:var(--muted);margin-top:16px;font-size:17px} :where(body.page-legal) .tabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:34px 0 10px;position:relative;z-index:2} :where(body.page-legal) .tab{font-family:var(--display);font-weight:600;font-size:15px;color:var(--muted);border:1px solid var(--line);background:transparent;padding:11px 24px;border-radius:40px;cursor:pointer;transition:.3s var(--ease)} :where(body.page-legal) .tab:hover{color:var(--text);background:var(--orange-soft)} :where(body.page-legal) .tab.active{color:#fff;background:linear-gradient(135deg,var(--orange),var(--orange-deep));border-color:transparent;box-shadow:0 8px 24px rgba(244,123,61,.32)} :where(body.page-legal) .legal-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px;padding:40px 0 100px;align-items:start} :where(body.page-legal) .toc{position:sticky;top:96px;width:260px;max-height:calc(100vh - 120px);overflow-y:auto;padding-right:8px;text-align:left} :where(body.page-legal) .toc::-webkit-scrollbar{width:5px} :where(body.page-legal) .toc::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px} :where(body.page-legal) .toc .toc-title{font-family:var(--display);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--orange-bright);margin-bottom:14px;text-align:left} :where(body.page-legal) .toc-group{display:none;flex-direction:column;gap:2px} :where(body.page-legal) .toc-group.show{display:flex} :where(body.page-legal) .toc-group a{display:block;width:100%;text-align:left;font-size:13.5px;color:var(--muted-2);padding:7px 12px;border-left:2px solid transparent;border-radius:0 8px 8px 0;line-height:1.4;transition:.25s} :where(body.page-legal) .toc-group a:hover{color:var(--text);background:rgba(244,123,61,.06)} :where(body.page-legal) .toc-group a.active{color:var(--orange-bright);border-left-color:var(--orange);background:var(--orange-soft)} :where(body.page-legal) main{min-width:0} :where(body.page-legal) .doc{display:none;background:linear-gradient(160deg,var(--bg-2),var(--bg-1));border:1px solid var(--hair);border-radius:24px;padding:48px clamp(24px,4vw,56px)} :where(body.page-legal) .doc.show{display:block;animation:fade .5s var(--ease)} @keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} :where(body.page-legal) .doc-head{border-bottom:1px solid var(--hair);padding-bottom:26px;margin-bottom:30px} :where(body.page-legal) .doc-tag{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-bright)} :where(body.page-legal) .doc-head h1{font-size:clamp(28px,4vw,42px);margin-top:10px;letter-spacing:-.03em} :where(body.page-legal) .doc-updated{color:var(--muted-2);font-size:14px;margin-top:10px;font-style:italic} :where(body.page-legal) .doc-h{font-size:clamp(20px,2.6vw,27px);color:var(--text);margin:42px 0 14px;padding-top:10px;scroll-margin-top:90px;font-weight:600} :where(body.page-legal) .doc-h::before{content:"";display:block;width:42px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--orange),var(--orange-deep));margin-bottom:16px} :where(body.page-legal) .doc-sh{font-size:17px;color:var(--orange-bright);margin:26px 0 8px;font-weight:600;font-family:var(--display)} :where(body.page-legal) .doc-p{color:var(--muted);margin:0 0 16px;font-size:15.5px} :where(body.page-legal) .doc-ul{margin:0 0 18px;padding-left:0;list-style:none} :where(body.page-legal) .doc-ul li{color:var(--muted);font-size:15.5px;padding:7px 0 7px 26px;position:relative;line-height:1.6} :where(body.page-legal) .doc-ul li::before{content:"";position:absolute;left:4px;top:15px;width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 8px rgba(244,123,61,.6)} :where(body.page-legal) footer{border-top:1px solid var(--hair);padding:48px 0 40px;position:relative;z-index:2} :where(body.page-legal) .foot{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap} :where(body.page-legal) .foot .links{display:flex;gap:28px;flex-wrap:wrap} :where(body.page-legal) .foot a{color:var(--muted);font-size:14px} :where(body.page-legal) .copy{color:var(--muted-2);font-size:13px;margin-top:28px;border-top:1px solid var(--hair);padding-top:22px} :where(body.page-legal) .back-top{position:fixed;right:26px;bottom:26px;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--orange),var(--orange-deep));border:none;color:#fff;font-size:20px;cursor:pointer;opacity:0;pointer-events:none;transition:.35s var(--ease);z-index:90;box-shadow:0 10px 30px rgba(244,123,61,.4)} :where(body.page-legal) .back-top.show{opacity:1;pointer-events:auto} @media(max-width:880px){:where(body.page-legal) .legal-layout{grid-template-columns:1fr}:where(body.page-legal) .toc{display:none}}