/* ============================================================ Authyr — premium marketing design system Built on the EXACT app tokens (app/globals.css + tailwind.config.ts) so authyr.com and app.authyr.com share one visual language. Canonical brand blue: --signal #1E4DFF ============================================================ */ :root{ /* ---- shared with the app (do not drift) ---- */ --paper:#ffffff; --surface:#f6f7fb; --surface-2:#eef1f8; --ink:#0a0e1a; --ink-dim:#4a5568; --ink-mute:#8a94a6; --line:#e2e6ee; --line-strong:#c8cfdb; --signal:#1e4dff; --signal-deep:#0f3ae3; --signal-tint:rgba(30,77,255,.08); --signal-ring:rgba(30,77,255,.22); --warm:#b86e00; --danger:#c5283d; --ink-block:#0a0e1a; --ink-block-2:#161b2a; --ink-paper:#f4f7fb; --ink-paper-dim:#9ca8bd; /* ---- premium extensions (derived from --signal) ---- #1E4DFF is the checkmark and reads vivid on white, but the same hex goes muddy on near-black. On dark surfaces we step up in LUMINANCE while holding the hue, so it still reads as the Authyr blue. */ --signal-hi:#5C82FF; /* headline accent on dark */ --signal-el:#3D6BFF; /* electric mid — glows, laser grid */ --signal-soft:#e8edff; /* light blue wash */ --signal-glow:rgba(61,107,255,.62); --verify:#0d9f6e; /* verification cue only */ --verify-hi:#79e0b5; /* legacy brand mint, on dark */ --verify-tint:#e3f7ef; --deep:#060a16; /* hero black-navy */ --deep-2:#0d1428; --sans:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --ease:cubic-bezier(.16,1,.3,1); --r:16px; --sh:0 30px 70px -46px rgba(6,10,22,.5); --sh-hi:0 40px 90px -50px rgba(6,10,22,.62); } *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden} img,svg{max-width:100%} :focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:6px} ::selection{background:var(--signal);color:#fff} .wrap{width:min(1180px,100% - 44px);margin-inline:auto} h1,h2,h3{margin:0;letter-spacing:-.045em;text-wrap:balance;line-height:1.03;font-weight:800} h1{font-size:clamp(40px,6vw,76px);font-weight:900;letter-spacing:-.05em} h2{font-size:clamp(31px,4.3vw,54px);font-weight:900} h3{font-size:19px;letter-spacing:-.022em;font-weight:700;line-height:1.28} p{margin:0;text-wrap:pretty} .lede{font-size:clamp(17px,1.4vw,20.5px);color:var(--ink-dim);max-width:60ch} a{color:inherit} section{padding-block:clamp(66px,8vw,116px)} .band{background:linear-gradient(180deg,#f2f6ff 0%,#e9effc 100%);border-block:1px solid #dde5f5} .center{text-align:center}.center .lede{margin-inline:auto} /* ---------------- header (light, always) ---------------- */ .hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.72);backdrop-filter:blur(14px) saturate(1.6);border-bottom:1px solid transparent;transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)} .hdr.solid{background:rgba(255,255,255,.92);border-bottom-color:var(--line);box-shadow:0 1px 20px -12px rgba(6,10,22,.35)} .hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:22px;padding-block:15px} .logo{font-weight:900;font-size:21px;letter-spacing:-.055em;color:var(--ink);text-decoration:none} .logo i{color:var(--signal);font-style:normal} .navl{display:flex;gap:28px;font-size:15px;font-weight:500;color:var(--ink-dim)} .navl a{text-decoration:none;transition:color .2s} .navl a:hover{color:var(--ink)} @media(max-width:900px){.navl{display:none}} /* ---------------- buttons ---------------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:1px solid transparent;border-radius:12px;padding:12px 22px;font:inherit;font-size:15.5px;font-weight:700;text-decoration:none;cursor:pointer;transition:transform .16s var(--ease),box-shadow .25s var(--ease),background .2s var(--ease),border-color .2s var(--ease)} .btn-b{background:var(--signal);color:#fff;box-shadow:0 8px 26px -10px var(--signal-glow)} .btn-b:hover{background:var(--signal-deep);box-shadow:0 14px 40px -12px var(--signal-glow);transform:translateY(-2px)} .btn-o{background:#fff;color:var(--ink);border-color:var(--line-strong)} .btn-o:hover{background:#fff;border-color:var(--ink-mute);transform:translateY(-2px)} .btn-g{background:#fff;color:var(--ink);border-color:var(--line-strong)} .btn-g:hover{border-color:var(--ink-mute);transform:translateY(-2px)} .btn-lg{padding:15px 28px;font-size:16.5px;min-height:52px} .cta{display:flex;gap:13px;margin-top:32px;flex-wrap:wrap} .center .cta{justify-content:center} /* ---------------- bright hero ---------------- Luminous white, not dark. The shader paints coloured LIGHT onto white rather than noise onto black — brighter, and it keeps the site light. */ .hero{position:relative;background:linear-gradient(180deg,#f7f9ff 0%,#fdfdff 55%,#fff 100%);color:var(--ink);overflow:hidden;padding-block:clamp(56px,7vw,94px) clamp(72px,8.5vw,120px);isolation:isolate;border-bottom:1px solid var(--line)} .hero > .fx canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.9} .glowA,.glowB{position:absolute;border-radius:50%;filter:blur(80px);z-index:0;pointer-events:none} .glowA{width:680px;height:680px;left:-12%;top:-34%;background:radial-gradient(closest-side,rgba(61,107,255,.30),transparent 72%)} .glowB{width:520px;height:520px;right:-8%;bottom:-30%;background:radial-gradient(closest-side,rgba(121,224,181,.34),transparent 72%)} .hero .wrap{position:relative;z-index:2} .hero h1{color:var(--ink);margin-top:22px} .hero h1 u{text-decoration:none;color:var(--signal)} .hero .lede{color:var(--ink-dim);margin-top:22px} .hero .lede b{color:var(--ink);font-weight:700} .hgrid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(34px,4.6vw,62px);align-items:center} @media(max-width:980px){.hgrid{grid-template-columns:1fr}} .pill{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 15px 7px 7px;font-size:13.5px;font-weight:600;color:var(--ink-dim);box-shadow:0 2px 10px -6px rgba(6,10,22,.28)} .pill b{background:var(--signal);border-radius:999px;padding:4px 11px;font-size:12px;font-weight:800;color:#fff} .pill.mint b{background:var(--verify)} .metrics{display:flex;gap:32px;margin-top:38px;padding-top:26px;border-top:1px solid var(--line);flex-wrap:wrap} .metric .n{font-size:26px;font-weight:900;letter-spacing:-.03em;color:var(--ink)} .metric .l{font-size:13.5px;color:var(--ink-mute);font-weight:500} /* ---------------- glass product pane ---------------- */ .mock{position:relative;perspective:1600px} .pane{background:linear-gradient(168deg,#fff,#f7f9ff);border:1px solid var(--line);border-radius:20px;padding:16px;box-shadow:0 42px 90px -46px rgba(6,10,22,.42),0 2px 8px -3px rgba(6,10,22,.06);transform:rotateY(-7deg) rotateX(3deg)} @media(max-width:980px){.pane{transform:none}} .pane .dots{display:flex;align-items:center;gap:7px;padding:0 4px 13px} .pane .dots i{width:9px;height:9px;border-radius:50%;background:var(--line-strong)} .inner{background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden;color:var(--ink)} .ihead{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border-bottom:1px solid var(--line)} .ihead p{font-size:13.5px;font-weight:800;letter-spacing:-.01em} .ihead span{font-size:11.5px;font-weight:700;color:var(--verify);background:var(--verify-tint);border-radius:999px;padding:4px 9px} .irow{display:flex;gap:11px;padding:13px 15px;border-bottom:1px solid var(--line)} .irow:last-child{border-bottom:none} .av{width:30px;height:30px;border-radius:50%;flex:none;background:linear-gradient(140deg,#c3d0ff,#6d8dff);display:grid;place-items:center;font-size:11px;font-weight:800;color:#0e1a4d} .irow .c p{font-size:12.8px;font-weight:700} .irow .c .txt{font-size:12.2px;color:var(--ink-dim);font-weight:400;margin-top:3px;line-height:1.45} .vchk{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;color:var(--verify);margin-top:5px} .vchk svg{width:11px;height:11px} .float{position:absolute;right:-18px;bottom:-22px;background:#fff;border-radius:15px;padding:13px 15px;box-shadow:0 24px 50px -22px rgba(6,10,22,.55);display:flex;align-items:center;gap:11px;border:1px solid var(--line)} @media(max-width:560px){.float{right:-6px;bottom:-16px;padding:10px 12px}} .float p{font-size:12.5px;font-weight:800;letter-spacing:-.01em;line-height:1.25} .float span{font-size:11px;color:var(--ink-mute);font-weight:500} .sealw{width:38px;height:38px;flex:none} .sealw circle.tr{stroke:var(--signal-soft)} .sealw path.dr{stroke:var(--signal);stroke-dasharray:44;stroke-dashoffset:44;animation:drw .9s var(--ease) 1.1s forwards} @keyframes drw{to{stroke-dashoffset:0}} /* ---------------- marquee ---------------- */ .mq{border-bottom:1px solid var(--line);background:var(--surface);overflow:hidden} .mq .row{display:flex;gap:44px;padding-block:19px;white-space:nowrap;animation:slide 34s linear infinite;width:max-content} .mq span{font-size:15px;font-weight:700;color:var(--ink-mute);letter-spacing:-.01em} .mq span b{color:var(--ink)} @keyframes slide{to{transform:translateX(-50%)}} .mq:hover .row{animation-play-state:paused} /* ---------------- cards / grids ---------------- */ .grid3{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin-top:46px} .grid3>*{flex:1 1 300px;max-width:390px} .card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);text-decoration:none;display:block} .card:hover{transform:translateY(-5px);box-shadow:0 26px 54px -30px rgba(6,10,22,.34);border-color:var(--signal)} .card::after{content:"";position:absolute;right:-70px;top:-70px;width:190px;height:190px;border-radius:50%;background:radial-gradient(closest-side,var(--signal-tint),transparent 72%);opacity:0;transition:opacity .3s var(--ease)} .card:hover::after{opacity:1} .card>*{position:relative;z-index:1} .ic{width:44px;height:44px;border-radius:13px;background:var(--ink);display:grid;place-items:center;margin-bottom:17px} .ic svg{width:21px;height:21px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .ic.mint{background:var(--verify)} .ic.blue{background:var(--signal)} .card h3{margin-bottom:7px;font-size:20px} .card p{font-size:15.5px;color:var(--ink-dim)} .go{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:14px;font-weight:800;color:var(--signal)} .go svg{width:14px;height:14px;transition:transform .25s var(--ease);stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round} .card:hover .go svg{transform:translateX(4px)} .num{width:42px;height:42px;border-radius:12px;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:900;font-size:17px;margin-bottom:17px} /* feature list */ .flist{display:flex;flex-direction:column;gap:16px;margin-top:26px} .fitem{display:flex;gap:13px;align-items:flex-start} .fitem svg{flex:none;width:21px;height:21px;margin-top:2px;stroke:var(--verify);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} .fitem p{font-size:16.5px;color:var(--ink-dim)} .fitem b{color:var(--ink);font-weight:700} /* tiers */ .tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;margin-top:46px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff} .tier{padding:26px;border-right:1px solid var(--line)} .tier:last-child{border-right:none} @media(max-width:780px){.tier{border-right:none;border-bottom:1px solid var(--line)}.tier:last-child{border-bottom:none}} .bars{display:flex;gap:5px;margin-bottom:16px} .bar{height:6px;flex:1;border-radius:4px;background:var(--line-strong)} .bar.on{background:var(--signal);box-shadow:0 0 12px -2px var(--signal-glow)} /* dark statement band */ .mani{position:relative;background:var(--deep);color:#fff;text-align:center;overflow:hidden} .mani::before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;width:900px;height:520px;background:radial-gradient(closest-side,rgba(61,107,255,.42),transparent 70%);filter:blur(60px)} .mani .wrap{position:relative;z-index:1} .mani h2{color:#fff;max-width:17ch;margin-inline:auto} .mani h2 u{text-decoration:none;color:var(--signal-hi)} .mani p{color:rgba(255,255,255,.68);margin:24px auto 0;max-width:56ch;font-size:18.5px} /* footer */ .ftr{background:var(--deep);color:rgba(255,255,255,.55);border-top:1px solid rgba(255,255,255,.08)} .ftr .wrap{padding-block:34px;font-size:14px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap} .ftr b{color:#fff} .ftr a{color:rgba(255,255,255,.7);text-decoration:none} .ftr a:hover{color:#fff} /* ---------------- background FX ---------------- Injected by authyr-premium.js. Every layer is decorative and pointer-events:none, sits at z-index 0, content rides above at z-index 1. */ .fx{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden} section:not(.band):not(.mani){background:var(--paper)} section:not(.band):not(.mani) > .fx{opacity:.55} .band > .fx{opacity:.9} section, .mani, .band{position:relative;isolation:isolate} .fx{z-index:-1} /* soft diagonal light beams — organic, no repeating geometry. (Replaced the drifting lattice: at section scale it read as a checkerboard, which is the template tell we're avoiding.) */ .fx-beam::before{ content:"";position:absolute;inset:-35% -20%; background: linear-gradient(114deg,transparent 26%,rgba(61,107,255,.11) 43%,transparent 57%), linear-gradient(114deg,transparent 54%,rgba(121,224,181,.10) 69%,transparent 82%); animation:beamSweep 28s ease-in-out infinite alternate; } @keyframes beamSweep{to{transform:translate3d(5%,-4%,0) rotate(1.5deg)}} .fx-beam::after{ content:"";position:absolute;width:50vw;height:50vw;right:-12%;top:-26%;border-radius:50%; background:radial-gradient(closest-side,rgba(61,107,255,.15),transparent 72%); filter:blur(70px); animation:floatB 30s ease-in-out infinite alternate; } /* slow aurora blobs — for light sections that need warmth without a grid */ .fx-aurora::before,.fx-aurora::after{ content:"";position:absolute;border-radius:50%;filter:blur(90px);opacity:.5 } .fx-aurora::before{width:46vw;height:46vw;left:-12%;top:-30%; background:radial-gradient(closest-side,rgba(61,107,255,.26),transparent 70%); animation:floatA 22s ease-in-out infinite alternate} .fx-aurora::after{width:38vw;height:38vw;right:-10%;bottom:-28%; background:radial-gradient(closest-side,rgba(121,224,181,.22),transparent 70%); animation:floatB 27s ease-in-out infinite alternate} @keyframes floatA{to{transform:translate3d(7%,9%,0) scale(1.12)}} @keyframes floatB{to{transform:translate3d(-8%,-7%,0) scale(1.15)}} /* dark statement band: orbiting glow */ .fx-orbs::before,.fx-orbs::after{ content:"";position:absolute;border-radius:50%;filter:blur(70px) } .fx-orbs::before{width:520px;height:520px;left:8%;top:-40%; background:radial-gradient(closest-side,rgba(61,107,255,.58),transparent 70%); animation:orbA 19s ease-in-out infinite alternate} .fx-orbs::after{width:400px;height:400px;right:6%;bottom:-38%; background:radial-gradient(closest-side,rgba(92,130,255,.42),transparent 70%); animation:orbB 24s ease-in-out infinite alternate} @keyframes orbA{to{transform:translate3d(12%,16%,0)}} @keyframes orbB{to{transform:translate3d(-14%,-12%,0)}} /* hero shader canvas sits under the glow orbs */ .hero > .fx canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.85} .hero > .fx canvas.fallback{opacity:.5} /* motion */ .rise{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .rise.in{opacity:1;transform:none} .rise[data-d="1"]{transition-delay:.09s}.rise[data-d="2"]{transition-delay:.18s} .rise[data-d="3"]{transition-delay:.27s}.rise[data-d="4"]{transition-delay:.36s} @media(prefers-reduced-motion:reduce){ .rise{opacity:1;transform:none;transition:none} .mq .row{animation:none} .sealw path.dr{animation:none;stroke-dashoffset:0} html{scroll-behavior:auto} .btn:hover,.card:hover{transform:none} /* FX freeze to a composed static frame — still textured, never blank */ .fx-beam::before,.fx-beam::after,.fx-aurora::before,.fx-aurora::after, .fx-orbs::before,.fx-orbs::after{animation:none} } /* ============================================================ Forever Components — mesh gradient (original palette kept: iris #7c5cff / signal #1e4dff / magenta #ff5ca8). Screen-blended blobs on a blurred field. Injected by authyr-fx.js. ============================================================ */ .fx-mesh{position:absolute;inset:0;overflow:hidden;pointer-events:none} .fx-mesh__field{position:absolute;inset:-20%;filter:blur(40px) saturate(1.3)} .fx-mesh__blob{position:absolute;width:55%;height:55%;border-radius:50%; mix-blend-mode:screen;will-change:transform} .fx-mesh__blob--1{background:radial-gradient(circle,#7c5cff,transparent 65%); top:0;left:0;animation:fxMesh1 7s cubic-bezier(.65,0,.35,1) infinite alternate} .fx-mesh__blob--2{background:radial-gradient(circle,#1e4dff,transparent 65%); top:5%;right:0;animation:fxMesh2 8.5s cubic-bezier(.65,0,.35,1) infinite alternate} .fx-mesh__blob--3{background:radial-gradient(circle,#ff5ca8,transparent 65%); bottom:0;left:15%;animation:fxMesh3 6.5s cubic-bezier(.65,0,.35,1) infinite alternate} .fx-mesh__blob--4{background:radial-gradient(circle,#7c5cff,transparent 65%); bottom:5%;right:10%;opacity:.8;animation:fxMesh4 9.5s cubic-bezier(.65,0,.35,1) infinite alternate} @keyframes fxMesh1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(40%,30%) scale(1.3)}} @keyframes fxMesh2{0%{transform:translate(0,0) scale(1.2)}100%{transform:translate(-35%,40%) scale(.9)}} @keyframes fxMesh3{0%{transform:translate(0,0) scale(1)}100%{transform:translate(50%,-30%) scale(1.25)}} @keyframes fxMesh4{0%{transform:translate(0,0) scale(1.1)}100%{transform:translate(-40%,-35%) scale(.95)}} @media(prefers-reduced-motion:reduce){.fx-mesh__blob{animation:none}} /* ---------------- micro data-viz widgets ---------------- */ .w-step{display:flex;gap:3px;align-items:flex-end;height:26px} .w-step i{flex:1;height:12px;border-radius:2px;background:var(--line); transition:height .45s var(--ease),background .45s var(--ease)} .w-step i.on{height:26px;background:var(--signal); box-shadow:0 0 8px -1px var(--signal-glow)} @media(prefers-reduced-motion:reduce){.w-step i{transition:none}} .wgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:34px} .wgrid>*{flex:1 1 230px;max-width:300px} @media(max-width:900px){.wgrid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.wgrid{grid-template-columns:1fr}} .wcard{border:1px solid var(--line);border-radius:14px;background:#fff;padding:20px;text-align:center; transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)} .wcard:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--signal)} .wcard .wl{font-size:12.5px;font-weight:700;color:var(--ink-mute);margin-top:12px; text-transform:uppercase;letter-spacing:.07em} .wcard .wv{font-size:14.5px;color:var(--ink-dim);margin-top:6px} .wcard canvas{display:block;margin-inline:auto} /* widget canvases are intrinsically sized — never stretched by a hero rule */ [data-w] canvas{position:static;width:auto;height:auto;display:block;margin-inline:auto} /* small uppercase descriptor under a card heading (industry sub-labels) */ .klabel{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase; color:var(--signal);margin:-4px 0 10px} /* ---- comparison / spec table ------------------------------------------- Used by how-it-works (tier table) and pricing (by-industry bands). Scrolls inside its own container so a wide table never makes the page scroll horizontally on mobile. */ .tblw{overflow-x:auto;margin-top:34px;border:1px solid var(--line);border-radius:var(--r);background:#fff} .tbl{width:100%;border-collapse:collapse;min-width:600px} .tbl th{text-align:left;font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase; color:var(--ink-mute);padding:16px 20px;border-bottom:1px solid var(--line);background:var(--surface);white-space:nowrap} .tbl td{padding:17px 20px;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink-dim);vertical-align:top} .tbl tr:last-child td{border-bottom:none} .tbl tr:hover td{background:#fbfcff} .tbl td b,.tbl td strong{color:var(--ink);font-weight:800} .tbl .tg{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px; font-weight:900;font-size:14px;background:var(--signal);color:#fff} .tbl .tg.b{background:#3d6bff}.tbl .tg.c{background:#8a94a6}.tbl .tg.d{background:#c8cedb;color:#5a6377} /* ---- vertical timeline (the 30-day window) ---- */ .tl{margin-top:38px;position:relative;padding-left:34px} .tl::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px; background:linear-gradient(180deg,var(--signal),rgba(30,77,255,.16))} .tlx{position:relative;padding-bottom:30px} .tlx:last-child{padding-bottom:0} .tlx::before{content:"";position:absolute;left:-30px;top:5px;width:12px;height:12px;border-radius:50%; background:#fff;border:3px solid var(--signal);box-shadow:0 0 0 4px rgba(30,77,255,.12)} .tlx .d{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--signal)} .tlx h3{font-size:19px;font-weight:800;letter-spacing:-.02em;margin:6px 0 7px;color:var(--ink)} .tlx p{font-size:15.5px;color:var(--ink-dim);line-height:1.62} /* ---- signal card (the seven verification signals) ---- */ .sig{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px; transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)} .sig:hover{transform:translateY(-4px);border-color:var(--signal);box-shadow:var(--sh)} .sig .e{font-size:24px;line-height:1;margin-bottom:12px;display:block} .sig h3{font-size:16.5px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px;color:var(--ink)} .sig p{font-size:14.5px;color:var(--ink-dim);line-height:1.58} .sig .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px} .sig .tags span{font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:99px; background:var(--surface);color:var(--ink-mute);border:1px solid var(--line)} .sig .tags span.s{background:rgba(30,77,255,.08);color:var(--signal);border-color:rgba(30,77,255,.2)} /* ---- honesty box: what we never claim ---- */ .hon{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:34px;border:1px solid var(--line); border-radius:var(--r);overflow:hidden;background:#fff} .hon>div{padding:28px} .hon>div+div{border-left:1px solid var(--line)} .hon h3{font-size:16px;font-weight:800;margin-bottom:16px;letter-spacing:-.02em} .hon ul{list-style:none;display:flex;flex-direction:column;gap:12px} .hon li{font-size:14.8px;line-height:1.55;padding-left:26px;position:relative;color:var(--ink-dim)} .hon li::before{position:absolute;left:0;top:-1px;font-weight:900;font-size:15px} .hon .no li::before{content:"\00d7";color:#d92d20} .hon .yes li::before{content:"\2713";color:var(--verify)} @media (max-width:760px){.hon{grid-template-columns:1fr}.hon>div+div{border-left:none;border-top:1px solid var(--line)}} /* ---- pricing plans ---- */ .plans{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-top:40px;align-items:stretch} .plan{flex:1 1 300px;max-width:380px;display:flex;flex-direction:column;background:#fff; border:1px solid var(--line);border-radius:var(--r);padding:30px;position:relative; transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)} .plan:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:var(--signal)} .plan.feat{border-color:var(--signal);border-width:2px;box-shadow:0 24px 70px -40px rgba(30,77,255,.55)} .plan .tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--signal); color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase; padding:6px 14px;border-radius:99px;white-space:nowrap} .plan h3{font-size:21px;font-weight:900;letter-spacing:-.03em;color:var(--ink)} .plan .who{font-size:13.5px;color:var(--ink-mute);font-weight:600;margin-top:4px} .plan .blurb{font-size:14px;color:var(--ink-dim);margin-top:10px;line-height:1.55;min-height:60px} .plan .price{display:flex;align-items:baseline;gap:5px;margin:20px 0 3px} .plan .price .n{font-size:44px;font-weight:900;letter-spacing:-.045em;color:var(--ink)} .plan .price .per{font-size:15px;color:var(--ink-mute);font-weight:600} .plan .bill{font-size:12.5px;color:var(--ink-mute);min-height:18px} .plan ul{list-style:none;margin:22px 0;display:flex;flex-direction:column;gap:11px;flex:1} .plan li{font-size:14.2px;color:var(--ink-dim);line-height:1.5;padding-left:24px;position:relative} .plan li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--verify);font-weight:900} .plan li b{color:var(--ink);font-weight:750} .plan .btn{width:100%;justify-content:center} /* billing toggle */ .btog{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:99px; background:var(--surface);margin-top:26px} .btog button{border:none;background:none;font:inherit;font-size:14px;font-weight:700;cursor:pointer; padding:9px 20px;border-radius:99px;color:var(--ink-mute);transition:all .22s var(--ease)} .btog button.on{background:var(--ink);color:#fff} .btog .save{font-size:11.5px;font-weight:800;color:var(--verify)} /* ---- FAQ accordion ---- */ .faq{margin-top:34px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff} .faq details{border-bottom:1px solid var(--line)} .faq details:last-child{border-bottom:none} .faq summary{cursor:pointer;list-style:none;padding:20px 24px;font-size:16.5px;font-weight:750; color:var(--ink);display:flex;justify-content:space-between;gap:16px;align-items:center; transition:background .2s var(--ease)} .faq summary::-webkit-details-marker{display:none} .faq summary:hover{background:var(--surface)} .faq summary::after{content:"+";font-size:22px;font-weight:400;color:var(--signal);flex:none;line-height:1} .faq details[open] summary::after{content:"\2013"} .faq details[open] summary{color:var(--signal)} .faq .a{padding:0 24px 22px;font-size:15.5px;color:var(--ink-dim);line-height:1.65} /* ---- nav dropdown (Special cases) ------------------------------------- CSS-only: opens on hover AND on focus-within, so it works for keyboard users without any JS. The