/* ========================================================================== Eiger Funded, shared design system Reskin modelled on the "Cohesion" Framer template: pure white canvas, soft gradient halos, floating pill navigation, heavily rounded white cards. Brand red is the only accent colour. Loaded by every page. Homepage sections live in home.css. ========================================================================== */ :root{ /* brand */ --red:#E60100; --red-600:#C40100; --red-300:#FF7B7A; --red-50:#FFF1F0; --red-glow:rgba(230,1,0,.22); /* ink */ --ink:#0E0E11; --ink-2:#3E4046; --muted:#6E7178; --faint:#9A9DA4; /* surfaces */ --white:#FFFFFF; --canvas:#FFFFFF; --wash:#FAFAFB; --line:#ECECEF; --line-2:#E2E2E6; /* radii, Cohesion is very round */ --r-pill:999px; --r-xl:30px; --r-lg:22px; --r-md:16px; --r-sm:12px; /* elevation, tight and contact-y, not a glow */ --sh-1:0 1px 2px rgba(14,14,17,.05); --sh-2:0 1px 2px rgba(14,14,17,.05),0 5px 12px -6px rgba(14,14,17,.12); --sh-3:0 1px 2px rgba(14,14,17,.05),0 12px 24px -14px rgba(14,14,17,.18); --sh-nav:0 1px 2px rgba(14,14,17,.06),0 6px 14px -8px rgba(14,14,17,.14); --sh-red:0 1px 2px rgba(230,1,0,.18),0 4px 10px -6px rgba(230,1,0,.34); /* layout */ --nav-h:48px; /* motion */ --ease-out:cubic-bezier(0.16,1,0.3,1); --ease-in-out:cubic-bezier(0.65,0,0.35,1); --dur-fast:160ms;--dur-base:260ms;--dur-slow:520ms; } *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{scroll-behavior:smooth} html{-webkit-text-size-adjust:100%;background:#fff} ::selection{background:rgba(230,1,0,.14)} body{ font-family:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Inter, "Helvetica Neue",Arial,sans-serif; color:var(--ink); background:var(--canvas); line-height:1.6; overflow-x:hidden; overflow-x:clip; font-synthesis-weight:none; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{line-height:1.1;letter-spacing:-.03em;font-weight:700} a{text-decoration:none;color:inherit} img{display:block;max-width:100%} button{font:inherit} .container{max-width:1140px;margin:0 auto;padding:0 24px} .container-narrow{max-width:860px;margin:0 auto;padding:0 24px} /* ------------------------------------------------------------------ bits */ .eyebrow{ display:inline-flex;align-items:center;gap:8px; background:rgba(255,255,255,.62); -webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%); border:1px solid rgba(14,14,17,.06); box-shadow:var(--sh-1); color:var(--red); padding:7px 16px;border-radius:var(--r-pill); font-size:12.5px;font-weight:700;letter-spacing:.02em; } .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--red); box-shadow:0 0 0 3px rgba(230,1,0,.14)} .eyebrow .dot.live{animation:pulseDot 1.8s var(--ease-in-out) infinite} @keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.35}} .section-head{text-align:center;max-width:700px;margin:0 auto 56px} .section-title{font-size:clamp(30px,4.2vw,46px);font-weight:700;margin:18px 0 0} .section-sub{color:var(--muted);font-size:17px;margin-top:16px} .card{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-2); } /* Cohesion's signature: a soft gradient halo frame with a white card on top. */ .halo{position:relative;border-radius:var(--r-xl);padding:12px; background:linear-gradient(140deg,rgba(230,1,0,.13),rgba(255,123,122,.08) 42%,rgba(14,14,17,.05)); box-shadow:var(--sh-2)} .halo::before{content:'';position:absolute;inset:-8%;border-radius:inherit;z-index:-1; background:radial-gradient(45% 45% at 30% 20%,rgba(230,1,0,.13),transparent 70%), radial-gradient(45% 45% at 75% 80%,rgba(255,123,122,.12),transparent 70%); filter:blur(26px);opacity:.7;pointer-events:none} .halo-inner{background:var(--white);border-radius:calc(var(--r-xl) - 10px); box-shadow:0 1px 2px rgba(14,14,17,.05)} /* --------------------------------------------------------------- buttons */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:48px;padding:13px 26px; border-radius:var(--r-pill); border:1px solid transparent; font-size:15px;font-weight:650;line-height:1.2;letter-spacing:-.01em; cursor:pointer;text-align:center;white-space:nowrap; transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .btn:hover{transform:translateY(-1px)} .btn:active{transform:translateY(0)} .btn-red{background:var(--red);color:#fff;box-shadow:var(--sh-red)} .btn-red:hover{background:var(--red-600);box-shadow:0 1px 2px rgba(230,1,0,.22),0 8px 16px -8px rgba(230,1,0,.42)} .btn-soft{background:var(--white);color:var(--ink);border-color:var(--line-2);box-shadow:var(--sh-1)} .btn-soft:hover{border-color:#CFD0D5;box-shadow:var(--sh-2)} .btn-dark{background:var(--ink);color:#fff;box-shadow:var(--sh-2)} .btn-dark:hover{background:#000} .btn-white{background:#fff;color:var(--red);box-shadow:0 10px 30px -12px rgba(0,0,0,.35)} /* legacy aliases so older markup keeps working */ .btn-ghost{background:var(--white);color:var(--ink);border-color:var(--line-2);box-shadow:var(--sh-1)} .btn-ghost:hover{border-color:#CFD0D5;box-shadow:var(--sh-2)} /* ------------------------------------------------------------------- nav */ nav.site-nav{position:fixed;top:0;left:0;right:0;z-index:120;padding:16px 20px; pointer-events:none} .nav-inner{max-width:1180px;margin:0 auto;display:flex;align-items:center; justify-content:space-between;gap:16px;pointer-events:auto} /* every pill is exactly --nav-h tall so the three read as one bar */ .nav-pill{ display:flex;align-items:center; height:var(--nav-h);box-sizing:border-box; background:rgba(255,255,255,.78); -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%); border:1px solid rgba(14,14,17,.07); border-radius:var(--r-pill); box-shadow:var(--sh-nav); } .nav-brand{padding:0 20px} .nav-brand img{height:24px;width:auto} .nav-links{gap:2px;padding:0 6px;position:relative} /* the sliding highlight */ .nav-ind{position:absolute;top:6px;bottom:6px;left:0;width:0;z-index:0; border-radius:var(--r-pill);background:var(--red);box-shadow:var(--sh-red);opacity:0; transition:transform 420ms var(--ease-out),width 420ms var(--ease-out),opacity 220ms ease; pointer-events:none} .nav-links a{ position:relative;z-index:1; display:inline-flex;align-items:center;height:36px;padding:0 16px; border-radius:var(--r-pill);font-size:14px;font-weight:600;color:var(--ink-2); transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out); } .nav-links a:hover{color:var(--ink);background:rgba(14,14,17,.05)} .nav-links a.active{background:var(--red);color:#fff;box-shadow:var(--sh-red)} .nav-links a.active:hover{background:var(--red-600);color:#fff} /* with the slider present the pill is drawn by .nav-ind, not the link itself */ .nav-links.has-ind a.active, .nav-links.has-ind a.active:hover{background:transparent;box-shadow:none;color:#fff} .nav-links.has-ind a{transition:color 220ms var(--ease-out)} .nav-end{gap:6px;padding:0 6px} .nav-end .btn{height:36px;min-height:0;padding:0 18px;font-size:14px} .nav-end .btn-soft{border-color:transparent;box-shadow:none;background:transparent} .nav-end .btn-soft:hover{background:rgba(14,14,17,.05);box-shadow:none;border-color:transparent} @media(max-width:1040px){.nav-links{display:none}} @media(max-width:600px){ :root{--nav-h:44px} nav.site-nav{padding:10px 12px} .nav-inner{gap:10px} .nav-brand{padding:0 14px} .nav-brand img{height:20px} /* Log in stays on phones, it is the only way back into an account */ .nav-end{gap:4px;padding:0 5px} .nav-end .btn{height:34px;padding:0 13px;font-size:13px} } @media(max-width:380px){ .nav-brand{padding:0 11px} .nav-end .btn{padding:0 11px;font-size:12.5px} } /* ---------------------------------------------------------------- footer */ footer.site-footer{ position:relative;margin-top:0;padding:72px 0 36px; background:linear-gradient(180deg,#FFFFFF 0%,#FAFAFB 42%,#F5F5F7 100%); border-top:1px solid var(--line); color:var(--muted);font-size:13.5px; } .f-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:40px 30px; padding-bottom:36px;border-bottom:1px solid var(--line);margin-bottom:26px} /* the 44px tap target is kept, but pulled up so the logo's top sits on the same line as the column headings instead of 8px below them */ .f-brand a{display:inline-flex;align-items:center;min-height:44px;padding:9px 0; margin-top:-9px} .f-brand img{height:26px;width:auto} .f-brand p{max-width:34ch;font-size:13.5px;line-height:1.65;margin-top:3px} .f-col h3{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em; color:var(--ink);margin-bottom:12px} .f-col ul{list-style:none;display:grid;gap:0} .f-col a{display:inline-block;padding:4px 0;font-size:13.5px;line-height:1.5; transition:color var(--dur-fast) var(--ease-out)} .f-col a:hover{color:var(--red)} .f-legal{display:grid;gap:14px} .f-legal p{font-size:12.5px;line-height:1.7;opacity:.9;text-wrap:pretty} .f-legal a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px} .f-legal a:hover{color:var(--red)} .f-pay{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px; font-size:12px;line-height:1.6;color:var(--faint)} /* Payment marks, shared by the footer line and the checkout CTAs. Every mark here is now a bare glyph with no built-in padding, so the row starts flush with the left edge of the legal copy above it: no negative margin. */ .pay-marks{display:inline-flex;align-items:center;gap:9px} .pay-marks>svg.pm-bank{opacity:.7;vertical-align:middle;transition:opacity var(--dur-fast) var(--ease-out)} .pay-marks:hover>svg.pm-bank{opacity:1} .pay-coins{display:inline-flex;align-items:center;gap:5px} .pay-coins img{width:15px;height:15px} .pay-marks img{opacity:.7;transition:opacity var(--dur-fast) var(--ease-out)} .pay-marks:hover img{opacity:1} .f-entity{font-size:12px;line-height:1.6;color:var(--faint)} .f-copy{font-size:12px;color:var(--faint)} .f-legal .f-entity+.f-copy{margin-top:-8px} @media(max-width:860px){.f-grid{grid-template-columns:1fr 1fr}} @media(max-width:480px){ .f-grid{grid-template-columns:1fr;gap:26px;padding-bottom:26px;margin-bottom:20px} footer.site-footer{padding:48px 0 28px} .f-col a{padding:2px 0} } /* ===================================================== document pages ==== */ .doc-head{ position:relative;overflow:hidden;text-align:center; padding:150px 0 56px; background: radial-gradient(58% 78% at 50% -10%,rgba(230,1,0,.10),transparent 62%), radial-gradient(42% 62% at 88% 8%,rgba(255,123,122,.14),transparent 66%), linear-gradient(180deg,#FFF7F6 0%,#FFFFFF 76%); } .doc-head .container{position:relative;z-index:2} .doc-head h1{font-size:clamp(32px,5vw,52px);margin:16px 0 14px} .doc-head>.container>p{color:var(--muted);font-size:17px;max-width:600px;margin:0 auto} .doc-head>.container>p.updated{font-size:13px;color:var(--faint);margin-top:22px} /* The plain-English statement of what the product is. Sits under the hero on the home page and under the title on the rule book, so it is styled here rather than in home.css. It must stay legible, not shrink into fine print. */ .plain-note{position:relative;z-index:2;max-width:60ch;margin:24px auto 0; color:var(--muted);font-size:14.5px;line-height:1.65;text-wrap:pretty} .doc-head>.container>p.plain-note{font-size:14.5px;max-width:60ch;margin-top:20px} .doc-head .tag{display:inline-flex;align-items:center;gap:8px;background:#fff; border:1px solid var(--line);box-shadow:var(--sh-1);color:var(--red); padding:7px 16px;border-radius:var(--r-pill);font-size:12.5px;font-weight:700} .crumb{font-size:13px;color:var(--faint);margin-bottom:18px} .crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .crumb li{display:flex;align-items:center} .crumb a{display:inline-flex;align-items:center;min-height:32px} .crumb a:hover{color:var(--ink);text-decoration:underline} .crumb li+li::before{content:'/';margin-right:8px;color:#D3D4D8} .container-legal{max-width:1160px;margin:0 auto;padding:0 24px} .legal-wrap{display:grid;grid-template-columns:250px 1fr;gap:52px;align-items:start; padding:44px 0 72px;min-width:0} .legal-wrap>*{min-width:0} .toc{position:sticky;top:104px;background:var(--white);border:1px solid var(--line); border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:18px 16px} .toc h2{font-size:11px;text-transform:uppercase;letter-spacing:.11em;color:var(--faint); font-weight:700;margin:0 0 8px;padding:0 10px} .toc ol{list-style:none;display:grid;gap:1px;font-size:13.5px} .toc a{display:flex;align-items:center;min-height:38px;padding:8px 12px; border-radius:var(--r-sm);color:var(--muted);font-weight:550; transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)} .toc a:hover{color:var(--ink);background:var(--wash)} .legal-body{max-width:76ch;min-width:0} .block{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--sh-1);padding:34px 32px;margin-bottom:20px;min-width:0; overflow-wrap:break-word; transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)} .block:hover{border-color:var(--line-2);box-shadow:var(--sh-2)} .block h2{font-size:21px;font-weight:700;margin-bottom:12px;display:flex;align-items:center; gap:10px;scroll-margin-top:104px} /* Bare icons, no tinted chip. Optically centred on the heading's cap height. */ .block h2 .ic{color:var(--red);display:inline-flex;align-items:center;justify-content:center; flex-shrink:0;width:22px;height:22px} .block>p,.block li{font-size:15px} .block>p{color:var(--muted);margin-bottom:4px} .block>p+p{margin-top:12px} .block a{color:var(--red);font-weight:600} .block a:hover{text-decoration:underline;text-underline-offset:3px} .block ul{list-style:none;margin-top:14px} .block li{display:flex;gap:13px;align-items:flex-start;padding:11px 0; border-bottom:1px solid var(--line)} .block li:last-child{border-bottom:none} /* Tick = something required or allowed. Prohibitions and cautions must not wear a tick, they get their own neutral marks. */ .li-ic{flex-shrink:0;width:18px;height:18px;display:flex;align-items:center; justify-content:center;margin-top:4px;color:var(--red)} .li-ic.no,.li-ic.warn{color:#9A9DA4} /* nested rule blocks sit flush inside their parent block */ .block .block{border:0;box-shadow:none;padding:26px 0 0;margin:0;border-top:1px solid var(--line)} .block .block:hover{box-shadow:none} .block .block:first-of-type{border-top:0;padding-top:18px} .rt{width:100%;border-collapse:collapse;margin-top:10px;table-layout:fixed} .rt tr{border-bottom:1px solid var(--line)} .rt tr:last-child{border-bottom:none} .rt th{padding:14px 10px 14px 0;vertical-align:top;font-size:14.5px;font-weight:700; width:30%;text-align:left;overflow-wrap:break-word} .rt td{padding:14px 8px;vertical-align:top;font-size:14.5px;overflow-wrap:break-word} .rt td.val{width:16%;white-space:nowrap} .rt td.val b{color:var(--red);font-weight:800;font-size:15px} .rt td:last-child{color:var(--muted);padding-right:0;width:54%} @media(max-width:640px){ .rt th,.rt td{display:block;width:100%!important;padding:2px 0} .rt th{padding:14px 0 2px} .rt td:last-child{padding-bottom:14px} } .also{margin-top:36px;padding-top:26px;border-top:1px solid var(--line)} .also h2{font-size:14px;margin-bottom:14px} .also ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px} .also a{display:inline-flex;align-items:center;min-height:44px;background:var(--white); border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 18px; font-size:13.5px;font-weight:600;box-shadow:var(--sh-1); transition:border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)} .also a:hover{border-color:var(--line-2);transform:translateY(-1px)} .plat-badges{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap} .plat-badges .pb{display:flex;align-items:center;gap:10px;background:#fff; border:1px solid var(--line);border-radius:var(--r-pill);padding:10px 20px; font-weight:700;font-size:14px;box-shadow:var(--sh-1)} .plat-badges img{width:28px;height:28px;object-fit:contain} @media(max-width:940px){ .container-legal{max-width:880px} .legal-wrap{grid-template-columns:1fr;gap:26px;padding-top:30px} .toc{position:static} } @media(max-width:640px){ .doc-head{padding:104px 0 36px} .container-legal{padding:0 20px} .legal-wrap{padding:20px 0 44px} .block{padding:24px 20px;border-radius:var(--r-md)} .block h2{font-size:18px} .toc ol{columns:2;column-gap:14px} .toc a{min-height:32px;padding:6px 10px;font-size:13px;break-inside:avoid} } /* -------------------------------------------------------------- 404 page */ .nf{text-align:center;padding:24px 0 100px} .nf .code{font-size:clamp(90px,17vw,160px);font-weight:800;color:var(--red); line-height:1;letter-spacing:-.05em} .nf h1{font-size:clamp(26px,3.6vw,36px);margin:6px 0 14px} .nf p{color:var(--muted);max-width:52ch;margin:0 auto;font-size:17px} .nf-links{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:34px} /* ------------------------------------------------------------------ a11y */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0} .skip-link{position:absolute;left:16px;top:-100px;z-index:200;background:var(--ink);color:#fff; padding:12px 22px;border-radius:var(--r-pill);font-weight:600; transition:top var(--dur-fast) var(--ease-out)} .skip-link:focus{top:16px} :focus-visible{outline:3px solid var(--red);outline-offset:2px;border-radius:6px} [id]{scroll-margin-top:104px} .reveal{opacity:0;transform:translateY(26px); transition:opacity var(--dur-slow) ease,transform var(--dur-slow) var(--ease-out); will-change:opacity,transform} .reveal.visible{opacity:1;transform:none} .d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s} @media(hover:none){ .btn:hover{transform:none} .block:hover{border-color:var(--line);box-shadow:var(--sh-1)} .also a:hover{transform:none;border-color:var(--line)} .nav-links a:hover{background:transparent;color:var(--ink-2)} .f-col a:hover{color:inherit} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important} } @media print{ nav.site-nav,.toc,.also,footer.site-footer,.skip-link,.crumb{display:none!important} .doc-head{padding:20px 0 10px!important;background:none} body{color:#000;font-size:11pt} .block{break-inside:avoid;border-color:#ccc;box-shadow:none} .legal-wrap{display:block;padding:0} } /* ========================================================================== Activity toasts, injected by /assets/js/activity.js. Frosted glass, same recipe as the floating nav pill. Bottom-left on desktop, full-width above the fold line on phones. ========================================================================== */ .toast-stack{ position:fixed;left:22px;bottom:22px;z-index:150; width:min(344px,calc(100vw - 44px)); pointer-events:none; } .toast{ display:flex;align-items:flex-start;gap:12px; padding:11px 12px; background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%); border:1px solid rgba(14,14,17,.07); border-radius:var(--r-md); box-shadow:0 1px 2px rgba(14,14,17,.06),0 14px 30px -16px rgba(14,14,17,.32); opacity:0;transform:translateY(14px) scale(.98); transition:opacity var(--dur-base) ease,transform var(--dur-slow) var(--ease-out); pointer-events:auto; } .toast.in{opacity:1;transform:none} .toast.out{opacity:0;transform:translateY(-8px) scale(.98)} .toast .av{ flex:none;position:relative; width:38px;height:38px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:linear-gradient(140deg,var(--red),#FF5A59); color:#fff;font-size:13px;font-weight:750;letter-spacing:.02em; box-shadow:0 4px 10px -6px rgba(230,1,0,.6); } .toast .av.payout{background:linear-gradient(140deg,#0E0E11,#3E4046); box-shadow:0 4px 10px -6px rgba(14,14,17,.5)} .toast .av .flag{ position:absolute;right:-3px;bottom:-3px; width:17px;height:17px;border-radius:50%; background:#fff;box-shadow:0 0 0 1.5px rgba(255,255,255,.9),var(--sh-1); display:flex;align-items:center;justify-content:center;font-size:10px;line-height:1; } /* block, not inline, an inline span ignores overflow and line clamping */ .toast .body{display:block;min-width:0;flex:1 1 auto} .toast .line{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; font-size:13.5px;line-height:1.35;color:var(--ink-2);overflow:hidden} .toast .line b{color:var(--ink);font-weight:700} .toast .line .hi{color:var(--red);font-weight:750} /* nudged in from the name above it so the two lines read as a pair */ .toast .meta{display:flex;align-items:center;gap:6px;margin-top:3px;padding-left:4px; font-size:11.5px;color:var(--faint)} .toast .meta .dot{width:5px;height:5px;border-radius:50%;background:#2FBF6B; box-shadow:0 0 0 2.5px rgba(47,191,107,.18)} .toast .x{ flex:0 0 auto;align-self:flex-start; width:22px;height:22px;margin:-2px -2px 0 2px; display:inline-flex;align-items:center;justify-content:center; border:0;background:none;border-radius:50%;color:var(--faint);cursor:pointer; transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out); } .toast .x:hover{color:var(--ink);background:rgba(14,14,17,.06)} @media(max-width:560px){ /* on phones the toast is a pill on the support launcher's line: same bottom, same 52px height, filling the space to its left. activity.js sets the exact width from the launcher; the calc is only the fallback. */ .toast-stack{left:10px;right:auto;bottom:10px;width:calc(100vw - 172px)} .toast{height:52px;align-items:center;gap:8px;padding:0 6px 0 7px; border-radius:var(--r-pill)} .toast .av{width:36px;height:36px;font-size:11.5px} .toast .av .flag{width:15px;height:15px;font-size:9px;right:-2px;bottom:-2px} .toast .line{font-size:12px;line-height:1.3} .toast .meta{display:none} .toast .x{align-self:center;width:20px;height:20px;margin:0} } @media print{ .toast-stack{display:none!important} } /* ========================================================================== Support chat, injected by /assets/js/support.js. Not a live chat: it triages. Support is clients only, so both answers end at a ticket in the portal, either after signing in or after signing up. ========================================================================== */ .sup{position:fixed;right:22px;bottom:22px;z-index:160; display:flex;flex-direction:column;align-items:flex-end;gap:12px} .sup-launch{ display:inline-flex;align-items:center;gap:9px; height:52px;padding:0 20px 0 16px;border-radius:var(--r-pill); background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%); border:1px solid rgba(14,14,17,.07); box-shadow:0 1px 2px rgba(14,14,17,.06),0 14px 30px -16px rgba(14,14,17,.34); color:var(--ink);font-size:14.5px;font-weight:650;cursor:pointer; transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out); } .sup-launch:hover{transform:translateY(-1px); box-shadow:0 1px 2px rgba(14,14,17,.06),0 18px 34px -16px rgba(14,14,17,.4)} .sup-launch .ic{ display:inline-flex;align-items:center;justify-content:center; width:32px;height:32px;border-radius:50%;flex:none; background:var(--red);color:#fff;box-shadow:var(--sh-red)} .sup-launch .ic svg{display:block} .sup-launch .ping{ position:absolute;top:8px;right:8px;width:9px;height:9px;border-radius:50%; background:#2FBF6B;box-shadow:0 0 0 2.5px #fff} .sup.open .sup-launch .lbl{display:none} .sup.open .sup-launch{padding:0 14px;gap:0} .sup-panel{ position:relative; width:min(348px,calc(100vw - 44px)); max-height:min(560px,calc(100vh - 130px)); display:flex;flex-direction:column;overflow:hidden; background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(26px) saturate(180%); backdrop-filter:blur(26px) saturate(180%); border:1px solid rgba(14,14,17,.08); border-radius:var(--r-lg); box-shadow:0 1px 2px rgba(14,14,17,.06),0 30px 60px -24px rgba(14,14,17,.4); transform:translateY(14px) scale(.97);transform-origin:100% 100%;opacity:0; transition:transform var(--dur-slow) var(--ease-out),opacity var(--dur-base) ease; } .sup-panel[hidden]{display:none} .sup.open .sup-panel{transform:none;opacity:1} .sup-head{ display:flex;align-items:center;gap:11px;padding:15px 14px 14px 16px; border-bottom:1px solid rgba(14,14,17,.07); background:linear-gradient(180deg,rgba(255,241,240,.85),rgba(255,255,255,0)); } .sup-head .mark{width:34px;height:34px;border-radius:50%;flex:none; display:flex;align-items:center;justify-content:center; background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1); color:var(--red);overflow:hidden} .sup-head .t{flex:1;min-width:0} .sup-head .t b{display:block;font-size:14.5px;letter-spacing:-.01em} .sup-head .t span{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted)} .sup-head .t span i{width:6px;height:6px;border-radius:50%;background:#2FBF6B; box-shadow:0 0 0 2.5px rgba(47,191,107,.18)} .sup-head .x{ flex:none;width:30px;height:30px;border-radius:50%;border:0;background:none; display:inline-flex;align-items:center;justify-content:center; color:var(--muted);cursor:pointer; transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)} .sup-head .x:hover{color:var(--ink);background:rgba(14,14,17,.06)} .sup-body{flex:1;overflow-y:auto;padding:16px 14px 8px; display:flex;flex-direction:column;gap:9px; -webkit-overflow-scrolling:touch;overscroll-behavior:contain} .sup-msg{max-width:88%;padding:11px 14px;border-radius:16px; font-size:14px;line-height:1.5; animation:supIn 320ms var(--ease-out) both} .sup-msg.bot{align-self:flex-start;background:#fff;color:var(--ink-2); border:1px solid var(--line);border-bottom-left-radius:6px;box-shadow:var(--sh-1)} .sup-msg.me{align-self:flex-end;background:var(--red);color:#fff; border-bottom-right-radius:6px;box-shadow:var(--sh-red)} .sup-msg b{color:var(--ink);font-weight:700} .sup-msg.me b{color:#fff} @keyframes supIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .sup-typing{align-self:flex-start;display:flex;gap:4px;padding:13px 14px; background:#fff;border:1px solid var(--line);border-radius:16px; border-bottom-left-radius:6px;box-shadow:var(--sh-1)} .sup-typing i{width:6px;height:6px;border-radius:50%;background:var(--faint); animation:supDot 1.1s infinite ease-in-out} .sup-typing i:nth-child(2){animation-delay:.15s} .sup-typing i:nth-child(3){animation-delay:.3s} @keyframes supDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}} .sup-opts{display:flex;flex-direction:column;gap:8px;align-items:flex-end; padding:2px 0 6px;animation:supIn 320ms var(--ease-out) both} .sup-opt{ max-width:92%;padding:10px 16px;border-radius:var(--r-pill); background:#fff;border:1.5px solid rgba(230,1,0,.28);color:var(--red-600); font-size:13.5px;font-weight:650;text-align:right;cursor:pointer; box-shadow:var(--sh-1); transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out)} .sup-opt:hover{background:var(--red-50);border-color:rgba(230,1,0,.5);transform:translateY(-1px)} .sup-act{align-self:flex-start;max-width:100%;display:inline-flex;align-items:center;gap:9px; min-height:44px;padding:0 18px;border-radius:var(--r-pill); font-size:14px;font-weight:650;color:#fff;background:var(--red); box-shadow:var(--sh-red);animation:supIn 320ms var(--ease-out) both; transition:background var(--dur-base) var(--ease-out),transform var(--dur-fast) var(--ease-out)} .sup-act:hover{background:var(--red-600);transform:translateY(-1px)} .sup-act svg{flex:none} .sup-foot{padding:8px 14px 13px;display:flex;align-items:center;justify-content:space-between;gap:10px} .sup-restart{background:none;border:0;padding:0;cursor:pointer; font-size:12.5px;font-weight:600;color:var(--faint); transition:color var(--dur-fast) var(--ease-out)} .sup-restart:hover{color:var(--ink-2)} .sup-foot .mail{font-size:12.5px;color:var(--faint)} .sup-foot .mail a{color:var(--muted);font-weight:600} .sup-foot .mail a:hover{color:var(--red)} @media(max-width:560px){ .sup{right:10px;bottom:10px;left:10px;align-items:stretch} .sup-launch{align-self:flex-end} .sup-panel{width:auto;max-height:calc(100vh - 150px)} } @media print{ .sup{display:none!important} } /* ========================================================================== Language picker, footer ========================================================================== 32 static links, one per language, each pointing at the same page in that language. It is a real