/* ════════════════════════════════════════════════════════════════════ VANTAGE — shared design system (Sui-inspired) · v9 multi-page Linked by every page. Fonts loaded per-page in . ═════════════════════════════════════════════════════════════════════ */ :root{ --aqua:#4DA2FF; --aqua-2:#8FC8FF; --cyan:#7FE6FF; --blue:#2E6BFF; --blue-press:#1F52D8; --ink:#05080F; --ink-2:#0A1024; --tx:#EDF2FB; --tx-d2:rgba(237,242,251,.66); --tx-d3:rgba(237,242,251,.52); --lt:#FFFFFF; --lt2:#F2F5FA; --lk:#0A0C16; --lk2:#3C4356; --lk3:#5B6472; --lline:#E4E8F0; --dotline:#C7CEDC; --tint:#EAF0FF; /* a11y: focus ring color, tuned per surface below */ --focus:#2E6BFF; --focus-on-dark:#8FC8FF; } /* ── ACCESSIBILITY LAYER (WCAG 2.2 AA) ───────────────────────────────── Shared, propagates to every page. Visual design is preserved: the focus ring is only shown for keyboard users (:focus-visible), tokens above were nudged to the nearest AA-passing value, never restyled. */ /* Visually-hidden but available to assistive tech. */ .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* Skip-to-content: off-screen until focused, then pinned top-left over the nav. */ .skip-link{position:fixed;top:8px;left:8px;z-index:200;transform:translateY(-160%);background:var(--lt);color:var(--lk);font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:14px;padding:11px 18px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.4);transition:transform .18s cubic-bezier(.16,1,.3,1)} .skip-link:focus{transform:translateY(0);outline:3px solid var(--focus);outline-offset:2px} /* Global keyboard focus ring — interactive elements only, keyboard-only. Mouse/touch users never see it (no :focus fallback), so the look is intact. */ :focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px} /* On dark surfaces the blue ring lacks contrast — switch to aqua. */ .nav :focus-visible,.megapanel :focus-visible,.mnav :focus-visible,.pagehero :focus-visible, .cmp2 :focus-visible,.darklist :focus-visible,.beamsec :focus-visible,.ctaband :focus-visible, footer :focus-visible,.pc.feat :focus-visible,.authpage :focus-visible,.darksec :focus-visible{outline-color:var(--focus-on-dark)} /* Inputs already restyle their border on :focus; add a clear ring for keyboard. */ .formcard input:focus-visible,.formcard textarea:focus-visible,.formcard select:focus-visible, .authcard input:focus-visible,.capture input:focus-visible,.tplx-input:focus-visible{outline:3px solid var(--focus);outline-offset:2px} @media(prefers-reduced-motion:reduce){.skip-link{transition:none}} *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{background:var(--lt);color:var(--lk2);font-family:'Inter',system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden} h1,h2,h3,h4{font-family:'Hanken Grotesk',sans-serif;color:var(--lk);font-weight:700;line-height:1.03;letter-spacing:-.025em} a{color:inherit;text-decoration:none} .wrap{max-width:1240px;margin:0 auto;padding:0 36px} .chip-mono{display:inline-block;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.06em;color:var(--lk2);background:var(--lt2);border:1px solid var(--lline);padding:6px 12px;border-radius:6px} .chip-mono.dark{color:var(--tx-d2);background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)} .btn{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:15.5px;padding:14px 26px;border-radius:10px;cursor:pointer;border:1px solid transparent;transition:transform .15s,background .2s,color .2s,border-color .2s} .arr{transition:transform .2s}.btn:hover .arr{transform:translateX(3px)} .btn-blue{background:var(--blue);color:#fff}.btn-blue:hover{background:var(--blue-press);transform:translateY(-2px)} .btn-dark{background:var(--lk);color:#fff}.btn-dark:hover{transform:translateY(-2px)} .btn-line{background:transparent;color:var(--lk);border-color:var(--lline)}.btn-line:hover{border-color:var(--lk)} .btn-light{background:#fff;color:#06182f}.btn-light:hover{transform:translateY(-2px)} .btn-glass{background:rgba(8,14,30,.45);color:#fff;border-color:rgba(255,255,255,.3)}.btn-glass:hover{background:rgba(8,14,30,.75)} /* ── NAV + MEGA-MENU ───────────────────────────────────────────────── */ .nav{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;z-index:50;background:#070B14;backdrop-filter:blur(14px);border-radius:0; transition:width .5s cubic-bezier(.16,1,.3,1),top .5s cubic-bezier(.16,1,.3,1),border-radius .5s,box-shadow .5s,background .4s} .nav.sc{top:11px;width:calc(100% - 28px);max-width:1180px;border-radius:16px;box-shadow:0 16px 44px rgba(0,0,0,.5);background:#0A0F1C} .nav .wrap{height:70px;display:flex;align-items:center;justify-content:space-between} .brand{display:flex;align-items:center;gap:10px;font-family:'Hanken Grotesk';font-weight:700;font-size:21px;color:#fff;letter-spacing:-.02em} .brand .mk{width:27px;height:27px;border-radius:7px;background:linear-gradient(135deg,var(--aqua-2),var(--aqua));display:grid;place-items:center;flex:0 0 auto} .nav-links{display:flex;gap:6px;font-size:15px} .nl-wrap{position:relative} .nl-wrap::after{content:'';position:absolute;top:100%;left:0;right:0;height:22px} .nl{display:inline-flex;align-items:center;gap:8px;color:var(--tx-d2);transition:color .2s;padding:8px 12px;border-radius:9px} .nl:hover,.nl-wrap:hover .nl{color:#fff} .exp{display:inline-grid;place-items:center;width:22px;height:22px;border:1px solid rgba(255,255,255,.16);border-radius:6px;font-size:16px;line-height:0;color:rgba(255,255,255,.5);transition:transform .3s cubic-bezier(.16,1,.3,1),background .25s,color .25s,border-color .25s} .nl-wrap:hover .exp,.nl-wrap.open .exp{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff;transform:rotate(45deg)} .megapanel{position:absolute;top:calc(100% + 20px);left:50%;transform:translateX(-50%) translateY(10px);min-width:320px;background:#0C1124;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:10px;box-shadow:0 34px 70px rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:opacity .22s,transform .28s cubic-bezier(.16,1,.3,1);display:grid;gap:2px;z-index:60} .megapanel.wide{grid-template-columns:1fr 1fr;min-width:560px} .nl-wrap:hover .megapanel,.nl-wrap.open .megapanel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .mega-item{display:block;padding:12px 14px;border-radius:11px;transition:background .2s} .mega-item:hover{background:rgba(255,255,255,.06)} .mega-item b{display:block;color:#fff;font-size:14.5px;font-weight:600} .mega-item span{display:block;color:var(--tx-d3);font-size:12.5px;margin-top:2px;line-height:1.4} .nav-cta{background:var(--aqua);color:#04101f;font-weight:600;font-size:14.5px;padding:10px 20px;border-radius:9px;transition:background .2s,transform .15s;white-space:nowrap} .nav-cta:hover{background:var(--aqua-2);transform:translateY(-1px)} .menu-btn{display:none;width:42px;height:42px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:transparent;cursor:pointer;color:#fff;align-items:center;justify-content:center} .menu-btn svg{width:20px;height:20px} /* mobile menu */ .mnav{position:fixed;inset:0;z-index:49;background:#05080F;padding:96px 28px 40px;display:none;flex-direction:column;gap:4px;overflow-y:auto} .mnav.show{display:flex} .mnav a{color:#fff;font-family:'Hanken Grotesk';font-weight:600;font-size:22px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08)} .mnav a.sub{font-family:'Inter';font-weight:400;font-size:16px;color:var(--tx-d2);padding:9px 0 9px 16px;border-bottom:0} .mnav .grp{font-family:'Space Mono';font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-d3);margin-top:18px} /* ── HERO (home) ───────────────────────────────────────────────────── */ .hero{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 24px 80px; background:radial-gradient(120% 80% at 50% 122%,rgba(170,212,255,.9),transparent 60%),linear-gradient(180deg,#04060E 0%,#081633 30%,#1A47A0 62%,#5E9BEA 100%)} .hero::before{content:'';position:absolute;left:0;right:0;bottom:0;height:160px;background:linear-gradient(180deg,transparent,var(--lt));z-index:1} .hh{position:relative;z-index:2;display:inline-block;font-weight:600;font-size:clamp(58px,13vw,164px);line-height:.92;letter-spacing:-.05em} @keyframes hfade{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}} /* hero lines fade+rise in once */ @keyframes lnfade{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} /* a glow that travels across each letter — staggered per-letter delay (set in app.js) makes it flow left→right, forever */ @keyframes flowglow{ 0%{color:rgba(202,222,255,.82);text-shadow:0 0 5px rgba(190,220,255,.28),0 0 15px rgba(120,190,255,.2)} 13%{color:#fff;text-shadow:0 0 10px #e2efff,0 0 32px rgba(130,198,255,.95),0 0 68px rgba(95,165,255,.7)} 42%,100%{color:rgba(202,222,255,.82);text-shadow:0 0 5px rgba(190,220,255,.28),0 0 15px rgba(120,190,255,.2)} } .hh .ln{display:block;animation:lnfade .9s cubic-bezier(.16,1,.3,1) both} .hh .ln:nth-child(1){animation-delay:.08s} .hh .ln:nth-child(2){animation-delay:.22s} .hh .w{display:inline-block} .hh .ch{display:inline-block;color:rgba(202,222,255,.82);will-change:color,text-shadow;animation:flowglow 2.6s linear infinite} .sub{position:relative;z-index:2;font-size:clamp(17px,1.7vw,21px);color:rgba(255,255,255,.84);max-width:540px;margin:34px auto 0;animation:hfade .9s cubic-bezier(.16,1,.3,1) .44s both} .sub b{color:#fff;font-weight:600} .hero .cta{position:relative;z-index:2;display:flex;gap:12px;justify-content:center;margin-top:40px;flex-wrap:wrap;animation:hfade .9s cubic-bezier(.16,1,.3,1) .56s both} /* ── PAGE HERO (sub-pages) ─────────────────────────────────────────── */ .pagehero{position:relative;overflow:hidden;background:radial-gradient(120% 120% at 50% -20%,#1A47A0,transparent 58%),var(--ink);padding:170px 24px 90px;text-align:center} .pagehero .beams{-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 46%,#000 92%);mask-image:linear-gradient(180deg,transparent 0,transparent 46%,#000 92%);opacity:.7} .pagehero .inner{position:relative;z-index:2;max-width:820px;margin:0 auto} .pagehero .eb{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--aqua-2);display:inline-flex;align-items:center;gap:9px;margin-bottom:22px} .pagehero .eb .sq{width:8px;height:8px;border-radius:2px;background:var(--aqua)} .pagehero h1{color:#fff;font-size:clamp(44px,7vw,92px);line-height:.98;letter-spacing:-.04em} .pagehero h1 .gl{background:linear-gradient(95deg,#9FCBFF,#fff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .pagehero p{color:rgba(255,255,255,.78);font-size:clamp(17px,1.6vw,20px);max-width:560px;margin:26px auto 0} .pagehero .cta{display:flex;gap:12px;justify-content:center;margin-top:36px;flex-wrap:wrap} /* ── STAT BAND ─────────────────────────────────────────────────────── */ .stats{padding:58px 0 8px} .stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center} .stat .n{font-family:'Hanken Grotesk';font-weight:800;font-size:clamp(34px,4.4vw,52px);color:var(--lk);line-height:1;letter-spacing:-.03em} .stat .n.blue{color:var(--blue)} .stat .l{font-size:13.5px;color:var(--lk3);margin-top:10px} /* ── GIANT STATEMENT ───────────────────────────────────────────────── */ .state{padding:78px 0 92px} .state .chip-mono{margin-bottom:30px} .state h2{font-size:clamp(34px,5.3vw,76px);line-height:1.04;letter-spacing:-.03em;color:var(--lk);max-width:1080px} /* highlight box (reusable). default = black on light; .dk = blue on dark */ /* Marquee-bulb underline — the brand metaphor as text emphasis. Replaces the heavy blackout highlight with a row of glowing bulbs that wipe in left-to-right on scroll (same mechanism as before, lighter touch). `em` units so the bulb pattern scales with font size. Multi-line safe via box-decoration-break:clone. Honors prefers-reduced-motion. */ .mark{ background:none; color:inherit; padding:0 .04em .18em; border-radius:0; -webkit-box-decoration-break:clone; box-decoration-break:clone; background-image:radial-gradient(circle,#8FC8FF 0 .085em,rgba(143,200,255,.45) .105em .15em,transparent .17em); background-size:0% .26em; background-repeat:repeat-x; background-position:left bottom; transition:background-size .85s cubic-bezier(.16,1,.3,1) .15s } .mark.dk{ /* secondary emphasis — same metaphor in brand blue, slightly tighter spacing */ background-image:radial-gradient(circle,#2E6BFF 0 .075em,rgba(46,107,255,.4) .095em .14em,transparent .16em) } .in .mark{background-size:100% .26em;color:inherit} @media(prefers-reduced-motion:reduce){ .mark{background-size:100% .26em;transition:none} } .itile{display:inline-grid;place-items:center;width:.84em;height:.84em;background:var(--blue);border-radius:.18em;vertical-align:-.1em;margin:0 .14em;box-shadow:0 4px 14px rgba(46,107,255,.4);transform:scale(0);transition:transform .55s cubic-bezier(.34,1.56,.64,1) .15s} .in .itile{transform:scale(1)} .itile svg{width:.5em;height:.5em} /* When .itile lives inside .ppt (3-column section on about/executives/guides) it's a COLUMN CARD, not the inline icon. Override the tiny-icon defaults so text doesn't wrap per-character. */ .ppt .itile{display:block;width:auto;height:100%;padding:26px;margin:0;background:var(--lt2);border:1px solid var(--lline);border-radius:18px;vertical-align:baseline;box-shadow:none;transform:none;transition:none;place-items:stretch;text-align:left} .ppt .itile h3{font-family:'Hanken Grotesk',sans-serif;font-weight:800;font-size:22px;letter-spacing:-.02em;color:var(--lk);margin:14px 0 10px;line-height:1.15} .ppt .itile p{font-size:15px;color:var(--lk2);line-height:1.62;margin:0} .ppt .itile .step-k{display:block} /* ── FEATURE LIST (dotted, scroll-spy) ─────────────────────────────── */ .flist{background:var(--lt2);padding:92px 0} .flist .wrap{display:grid;grid-template-columns:.5fr 1.5fr;gap:40px;align-items:start} .flist-left{position:sticky;top:108px} .flist-left .mb{font-family:'Space Mono',monospace;font-size:13px;color:var(--lk3);display:block;margin-bottom:16px} .flist-left p{font-size:15px;color:var(--lk2);margin-top:18px;max-width:240px} .frow{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px 4px;border-top:1.5px dotted var(--dotline)} .frow:last-child{border-bottom:1.5px dotted var(--dotline)} .frow h3{font-size:clamp(26px,3.6vw,46px);color:var(--lk);font-weight:600;letter-spacing:-.02em} .tile{width:58px;height:58px;border-radius:12px;background:var(--blue);display:grid;place-items:center;flex:0 0 auto;box-shadow:0 10px 26px rgba(46,107,255,.3)} .tile svg{width:26px;height:26px;stroke:#fff;fill:none} .frow h3,.frow .tile{transition:color .4s,transform .4s,opacity .4s,box-shadow .4s} .flist-rows.spy .frow h3{color:#AEB4C2} .flist-rows.spy .frow.active h3{color:var(--lk)} .flist-rows.spy .frow .tile{transform:scale(.9);opacity:.5} .flist-rows.spy .frow.active .tile{transform:scale(1.04);opacity:1;box-shadow:0 16px 36px rgba(46,107,255,.5)} /* ── FEATURE CARDS WITH DIAGRAMS (Sui interior pages) ──────────────── */ .fcards{padding:90px 0} .fcards .fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px} .fcard{background:var(--lt2);border:1px solid var(--lline);border-radius:18px;padding:26px;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s,border-color .25s} .fcard:hover{transform:translateY(-4px);box-shadow:0 26px 54px rgba(12,18,48,.12);border-color:#cfd8e8} .fcard .top{display:flex;align-items:center;justify-content:space-between} .fcard h3{font-size:20px;color:var(--lk)} .fcard .ar{width:34px;height:34px;border-radius:9px;border:1px solid var(--lline);display:grid;place-items:center;color:var(--blue);transition:background .2s,color .2s} .fcard:hover .ar{background:var(--blue);color:#fff;border-color:var(--blue)} .fcard p{font-size:14px;color:var(--lk2);margin-top:10px} .fcard .iso{margin-top:22px;border-radius:12px;background:#0A1024;border:1px solid var(--lline);padding:18px;display:grid;place-items:center;min-height:150px} .fcard .iso svg{width:100%;max-width:170px;height:auto;stroke:var(--aqua);fill:none;opacity:.9} .fcard .iso svg .f{fill:var(--blue)} /* ── PROBLEM / SOLUTION TWO-COLUMN ─────────────────────────────────── */ .cmp2{background:var(--ink);padding:92px 0} .cmp2 .cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:44px} .cmp2 .col{display:grid;gap:12px} .cmp2 .col .ct{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-d3);margin-bottom:4px} .cmp2 .col.us .ct{color:var(--aqua-2)} .crow{border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:20px 22px} .cmp2 .col.us .crow{background:rgba(46,107,255,.07);border-color:rgba(77,162,255,.25)} .crow .ch{display:flex;align-items:center;gap:11px;color:#fff;font-size:18px;font-weight:600;font-family:'Hanken Grotesk'} .crow .ch .sq{width:11px;height:11px;border-radius:3px;background:#39405E;flex:0 0 auto} .cmp2 .col.us .crow .ch .sq{background:var(--blue);box-shadow:0 0 12px rgba(46,107,255,.7)} .crow p{color:var(--tx-d2);font-size:14px;margin-top:9px} /* ── SECTION HEAD ──────────────────────────────────────────────────── */ .shead{max-width:680px;margin-bottom:50px} .shead.center{margin-left:auto;margin-right:auto;text-align:center} .shead .chip-mono{margin-bottom:18px} .shead h2{font-size:clamp(30px,4.4vw,54px);color:var(--lk);line-height:1.04} .shead p{font-size:17px;color:var(--lk2);margin-top:16px} .shead.dark h2{color:#fff}.shead.dark p{color:var(--tx-d2)} /* ── PILE CARD ─────────────────────────────────────────────────────── */ .pile{padding:96px 0} .pile .wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:center} .pile .lead .chip-mono{margin-bottom:18px} .pile .lead h2{font-size:clamp(28px,3.6vw,44px);line-height:1.06;color:var(--lk)} .pile .lead p{color:var(--lk2);font-size:17px;margin-top:16px;max-width:440px} .card{position:relative;background:var(--lt);border:1px solid var(--lline);border-radius:22px;padding:18px;box-shadow:0 30px 70px rgba(12,18,48,.10)} .card-h{display:flex;justify-content:space-between;padding:5px 7px 14px} .card-h .t{font-size:14px;font-weight:600;color:var(--lk)} .card-h .c{font-family:'Space Mono',monospace;font-size:11px;color:var(--lk3)} .rows{display:grid;gap:9px} .r{display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:14px;border:1px solid var(--lline);background:#FBFCFE} .r .av{width:33px;height:33px;border-radius:50%;flex:0 0 auto;background:#E7EBF2} .r .bars{flex:1;display:grid;gap:6px} .r .bars i{display:block;height:7px;border-radius:4px;background:#E1E6EF} .r .bars i:first-child{width:52%}.r .bars i:last-child{width:34%;opacity:.6} .r .st{font-family:'Space Mono',monospace;font-size:10.5px;color:var(--lk3);white-space:nowrap} .r.dim{opacity:.55} .r.you{position:relative;background:var(--tint);border-color:var(--blue);box-shadow:0 0 0 1px var(--blue) inset,0 18px 44px rgba(46,107,255,.22);transform:translateX(-14px) scale(1.04)} .r.you .av{background:var(--blue);display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff} /* YOU row content — DASHBOARD treatment. Header bar (name + status pill) → 3 stat tiles → live-pulse Strategist chip → checked artifact list → "Next" card → timeline strip with timestamps. Reads like a product surface, not marketing copy. Fills width edge-to-edge. */ .r.you .who{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px;padding:2px 0} .r.you .who-hdr{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid rgba(46,107,255,.16)} .r.you .who-name{font-size:15.5px;color:var(--lk);font-weight:800;line-height:1.1;letter-spacing:-.015em;flex:1;min-width:0} .r.you .who-status{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:#fff;background:linear-gradient(150deg,var(--blue),#8FC8FF);padding:6px 12px 6px 10px;border-radius:999px;box-shadow:0 6px 16px rgba(46,107,255,.35);white-space:nowrap;flex-shrink:0} .r.you .who-status svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:3} .r.you .who-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px} .r.you .who-stat{background:#fff;border:1px solid rgba(12,18,48,.08);border-radius:10px;padding:9px 11px;box-shadow:0 1px 2px rgba(12,18,48,.05)} .r.you .who-stat .ws-v{font-family:'Hanken Grotesk',sans-serif;font-weight:800;font-size:18px;color:var(--lk);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums} .r.you .who-stat .ws-v small{font-size:11px;color:var(--lk3);font-weight:600;margin-left:1px} .r.you .who-stat .ws-k{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--lk3);margin-top:5px;font-weight:600} .r.you .who-strategist{display:inline-flex;align-items:center;gap:7px;padding:6px 11px 6px 9px;background:rgba(46,107,255,.07);border:1px solid rgba(46,107,255,.18);border-radius:8px;align-self:flex-start} .r.you .who-strategist .ws-pulse{width:7px;height:7px;border-radius:50%;background:#0FB57A;box-shadow:0 0 0 3px rgba(15,181,122,.18);animation:youpulse 2.4s ease-in-out infinite;flex-shrink:0} @keyframes youpulse{0%,100%{box-shadow:0 0 0 3px rgba(15,181,122,.18)}50%{box-shadow:0 0 0 6px rgba(15,181,122,.04)}} @media(prefers-reduced-motion:reduce){.r.you .who-strategist .ws-pulse{animation:none}} .r.you .who-strategist .ws-label{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--lk3);font-weight:700} .r.you .who-strategist strong{font-size:12.5px;color:var(--lk);font-weight:700;letter-spacing:-.01em} .r.you .who-arts{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px} .r.you .who-arts li{font-size:12.5px;color:var(--lk2);line-height:1.45;display:flex;align-items:flex-start;gap:8px} .r.you .who-arts .art-check{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;background:linear-gradient(135deg,#8FC8FF,var(--blue));color:#fff;font-size:9px;font-weight:900;flex-shrink:0;margin-top:1px;box-shadow:0 1px 3px rgba(46,107,255,.4),0 0 0 2px rgba(46,107,255,.10)} .r.you .who-arts li strong{color:var(--lk);font-weight:700} .r.you .who-next{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid rgba(46,107,255,.22);border-radius:10px;padding:10px 12px;box-shadow:0 2px 6px rgba(12,18,48,.06)} .r.you .who-next .who-next-k{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);font-weight:700;flex-shrink:0;padding:3px 8px;background:rgba(46,107,255,.10);border-radius:6px} .r.you .who-next .who-next-body{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0} .r.you .who-next .who-next-body strong{font-size:13px;color:var(--lk);font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums} .r.you .who-next .who-next-body span{font-size:11.5px;color:var(--lk2)} /* Timeline strip — application journey across the bottom. The fully-completed steps share one bar; the active (Interview) dot pulses to indicate "where you are now". Time as proof of human-led, real-clock work. */ .r.you .who-timeline{list-style:none;margin:4px 0 0;padding:11px 0 0;border-top:1px solid rgba(46,107,255,.16);display:grid;grid-template-columns:repeat(5,1fr);gap:4px;position:relative} .r.you .who-timeline::before{content:'';position:absolute;left:10%;right:10%;top:16px;height:2px;background:linear-gradient(to right,var(--blue) 0%,var(--blue) 80%,rgba(46,107,255,.28) 80%,rgba(46,107,255,.28) 100%);border-radius:2px;z-index:0} .r.you .wt-item{display:flex;flex-direction:column;align-items:center;gap:5px;position:relative;z-index:1} .r.you .wt-dot{width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,#8FC8FF,var(--blue));box-shadow:0 1px 3px rgba(46,107,255,.4),0 0 0 3px #E9F1FF} .r.you .wt-item.active .wt-dot{background:linear-gradient(135deg,var(--blue),#2E4FA8);animation:wt-pulse 2s ease-in-out infinite} @keyframes wt-pulse{0%,100%{box-shadow:0 0 0 3px rgba(46,107,255,.25),0 0 12px rgba(46,107,255,.5)}50%{box-shadow:0 0 0 5px rgba(46,107,255,.12),0 0 18px rgba(46,107,255,.7)}} @media(prefers-reduced-motion:reduce){.r.you .wt-item.active .wt-dot{animation:none}} .r.you .wt-k{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--lk3);font-weight:700;text-align:center;line-height:1.1} .r.you .wt-item.active .wt-k{color:var(--blue)} .r.you .wt-item time{font-size:10px;color:var(--lk3);font-variant-numeric:tabular-nums;font-weight:600;text-align:center;line-height:1} .r.you .wt-item.active time{color:var(--lk);font-weight:700} @media(max-width:520px){.r.you .who-stats{gap:5px}.r.you .who-stat{padding:7px 8px}.r.you .who-stat .ws-v{font-size:15px}.r.you .who-stat .ws-k{font-size:8.5px}.r.you .who-timeline{gap:2px}.r.you .wt-k{font-size:8.5px}.r.you .wt-item time{font-size:9px}} .r.you .who > b{display:block;font-size:14.5px;color:var(--lk);font-weight:700;line-height:1.1} .r.you .who > span:not(.who-name):not(.who-strategist):not(.who-status){font-size:12px;color:var(--lk2)} .r.you .tg{font-size:11.5px;font-weight:700;color:#fff;background:var(--blue);padding:6px 11px;border-radius:999px;white-space:nowrap} .kchip{position:absolute;right:-10px;bottom:-16px;display:flex;align-items:center;gap:10px;background:var(--lt);border:1px solid var(--lline);border-radius:14px;padding:11px 14px;box-shadow:0 18px 44px rgba(12,18,48,.14)} .kchip .a{width:26px;height:26px;border-radius:50%;background:#7A5BD6;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700} .kchip .x1{font-size:12.5px;font-weight:600;color:var(--lk)}.kchip .x2{font-size:11px;color:var(--lk3)} /* ── TRUST ─────────────────────────────────────────────────────────── */ .trust{padding:96px 0} .tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .tcard{background:var(--lt2);border:1px solid var(--lline);border-radius:18px;padding:30px} .tcard .ti{width:46px;height:46px;border-radius:11px;background:var(--blue);display:grid;place-items:center;margin-bottom:18px} .tcard .ti svg{width:22px;height:22px;stroke:#fff;fill:none} .tcard h3,.tcard h4{font-size:19px;margin-bottom:8px}.tcard p{font-size:14.5px;color:var(--lk2)} .tnote{margin-top:24px;font-size:14px;color:var(--lk2)}.tnote b{color:var(--lk)} /* ── WHO GRID ──────────────────────────────────────────────────────── */ .who{background:var(--lt2);padding:96px 0} .wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .wcard{background:var(--lt);border:1px solid var(--lline);border-radius:16px;padding:26px;transition:transform .25s,box-shadow .25s;display:block} .wcard:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(12,18,48,.10)} .wcard .k{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)} .wcard h3,.wcard h4{font-size:18px;margin:10px 0 7px}.wcard p{font-size:14px;color:var(--lk2)} .wcard .more{display:inline-block;margin-top:14px;font-size:13.5px;font-weight:600;color:var(--blue)} /* ── PRICING ───────────────────────────────────────────────────────── */ .pricing{padding:96px 0} .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch} .pc{background:var(--lt);border:1px solid var(--lline);border-radius:20px;padding:32px 28px;display:flex;flex-direction:column} .pc.feat{background:var(--ink);border-color:var(--ink);color:var(--tx)} .pc .nm{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)} .pc.feat .nm{color:var(--aqua-2)} .pc .amt{font-family:'Hanken Grotesk';font-weight:800;font-size:46px;color:var(--lk);margin:14px 0 2px;line-height:1;letter-spacing:-.03em} .pc.feat .amt{color:#fff} .pc .amt span{font-family:'Inter';font-size:15px;color:var(--lk3);font-weight:400}.pc.feat .amt span{color:var(--tx-d3)} .pc .who2{font-size:14px;color:var(--lk3);margin-bottom:20px}.pc.feat .who2{color:var(--tx-d2)} .pc ul{list-style:none;flex:1;margin-bottom:22px} .pc li{font-size:14px;padding:9px 0;border-top:1px solid var(--lline);color:var(--lk2);display:flex;gap:10px;align-items:flex-start} .pc.feat li{border-color:rgba(255,255,255,.12);color:var(--tx-d2)} .pc li svg{width:16px;height:16px;stroke:var(--blue);fill:none;flex:0 0 auto;margin-top:3px}.pc.feat li svg{stroke:var(--aqua-2)} .pc .btn{width:100%;justify-content:center} .pfoot{text-align:center;margin-top:16px;font-size:13px;color:var(--lk3)} .reassure{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 28px;margin-top:34px} .reassure span{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--lk)} .reassure svg{width:17px;height:17px;stroke:var(--blue);fill:none;flex:0 0 auto} /* ── QUOTE ─────────────────────────────────────────────────────────── */ .quote{background:var(--lt2);padding:96px 0} .quote .wrap{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;max-width:980px} .quote .ph{width:104px;height:104px;border-radius:18px;background:#C25B7A;display:grid;place-items:center;color:#fff;font-family:'Hanken Grotesk';font-size:34px;font-weight:700;flex:0 0 auto} .quote blockquote{font-family:'Hanken Grotesk';font-weight:600;font-size:clamp(22px,2.6vw,32px);color:var(--lk);line-height:1.25;letter-spacing:-.02em} .quote cite{display:block;margin-top:18px;font-style:normal;font-size:14px;color:var(--lk3)}.quote cite b{color:var(--lk);font-weight:600} /* ── FAQ ───────────────────────────────────────────────────────────── */ .faq{padding:96px 0} .faq-list{max-width:840px;margin-top:10px} .fq{border-top:1px solid var(--lline)}.fq:last-child{border-bottom:1px solid var(--lline)} .fq button{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:26px 44px 26px 0;font-family:'Hanken Grotesk';font-weight:600;font-size:19px;color:var(--lk);position:relative} .fq button::after{content:'';position:absolute;right:6px;top:31px;width:11px;height:11px;border-right:2.4px solid var(--blue);border-bottom:2.4px solid var(--blue);transform:rotate(45deg);transition:transform .3s} .fq.open button::after{transform:rotate(-135deg);top:35px} .fq .a{max-height:0;overflow:hidden;transition:max-height .35s ease} .fq .a p{padding:0 0 26px;font-size:15px;color:var(--lk2);max-width:720px} .fq.open .a{max-height:360px} /* ── DARK GETTING-STARTED LIST ─────────────────────────────────────── */ .darklist{background:var(--ink);padding:94px 0} .dhead{margin-bottom:24px}.dhead .chip-mono{margin-bottom:18px} .dhead h2{color:#fff;font-size:clamp(30px,4.4vw,52px);letter-spacing:-.025em} .dl-row{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;padding:28px 4px;border-top:1px solid rgba(255,255,255,.1)} .dl-row:last-child{border-bottom:1px solid rgba(255,255,255,.1)} .dl-row .lhs{display:flex;align-items:center;gap:16px} .dl-row .sq{width:11px;height:11px;background:var(--blue);border-radius:3px;flex:0 0 auto;box-shadow:0 0 14px rgba(46,107,255,.7)} .dl-row h3{color:#fff;font-size:clamp(24px,3.2vw,40px);letter-spacing:-.02em} .dl-row p{color:var(--tx-d2);font-size:14.5px;max-width:300px;text-align:right} /* ── GIANT TICKING NUMBER ──────────────────────────────────────────── */ .bignum{background:var(--ink);padding:106px 24px;text-align:center} .bignum .chip-mono{margin-bottom:22px} .bn{font-family:'Hanken Grotesk';font-weight:800;font-size:clamp(54px,13vw,168px);line-height:.95;letter-spacing:-.045em;background:linear-gradient(180deg,#fff 28%,#5E9BEA);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .bignum p{color:var(--tx-d2);margin-top:18px;font-size:16px} /* ── ANIMATED BEAMS ────────────────────────────────────────────────── */ .beams{position:absolute;inset:0;display:flex;overflow:hidden;z-index:0;pointer-events:none} .beams i{flex:1 1 0;background:linear-gradient(180deg,rgba(46,107,255,.02) 0%,rgba(46,107,255,.6) 68%,#9FDBFF 100%);opacity:.4;will-change:opacity;animation:beamPulse 3s ease-in-out infinite} @keyframes beamPulse{0%,100%{opacity:.12}50%{opacity:.95}} .beamsec{position:relative;background:#04060E;padding:130px 24px 140px;overflow:hidden;text-align:center} .beamsec .beams{-webkit-mask-image:linear-gradient(180deg,transparent 0%,transparent 34%,#000 78%,#000 100%);mask-image:linear-gradient(180deg,transparent 0%,transparent 34%,#000 78%,#000 100%)} .beamsec .inner{position:relative;z-index:2;max-width:920px;margin:0 auto} .blbl{display:inline-flex;align-items:center;gap:9px;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:26px} .blbl .sq{width:9px;height:9px;background:var(--blue);border-radius:2px} .beamsec h2{color:#fff;font-size:clamp(36px,6vw,84px);line-height:1;letter-spacing:-.04em} .beamsec p{color:rgba(255,255,255,.68);max-width:520px;margin:24px auto 32px} /* ── CTA ───────────────────────────────────────────────────────────── */ .ctaband{background:radial-gradient(120% 130% at 50% 0%,#1A47A0,transparent 60%),var(--ink);padding:104px 24px;text-align:center;position:relative;overflow:hidden} .ctaband h2{color:#fff;font-size:clamp(34px,5vw,68px);line-height:1.0;letter-spacing:-.035em} .ctaband .gl{background:linear-gradient(95deg,#6FA8FF,#fff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .ctaband p{color:rgba(255,255,255,.7);margin:18px auto 32px;max-width:520px;position:relative;z-index:2} .ctaband h2{position:relative;z-index:2} .ctaband .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative;z-index:2} .ctaband .beams{-webkit-mask-image:linear-gradient(180deg,transparent 0%,transparent 40%,#000 88%);mask-image:linear-gradient(180deg,transparent 0%,transparent 40%,#000 88%);opacity:.8} .capture{display:flex;gap:10px;justify-content:center;max-width:480px;margin:0 auto;position:relative;z-index:2;flex-wrap:wrap} .capture input{flex:1;min-width:220px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);border-radius:11px;padding:14px 18px;color:#fff;font-size:15px;font-family:'Inter'} .capture input::placeholder{color:rgba(255,255,255,.5)} .capture input:focus{outline:none;border-color:var(--aqua);background:rgba(255,255,255,.16)} .capture .btn{flex:0 0 auto} .capnote{position:relative;z-index:2;margin-top:16px;font-size:13px;color:rgba(255,255,255,.6)} .capnote a{color:#fff;border-bottom:1px solid rgba(255,255,255,.4)} /* ── MARQUEE ───────────────────────────────────────────────────────── */ .mq{overflow:hidden;border-top:1px solid var(--lline);border-bottom:1px solid var(--lline);padding:18px 0;margin-top:8px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)} .mq .track{display:flex;gap:46px;width:max-content;animation:marq 42s linear infinite} .mq:hover .track{animation-play-state:paused} .mq span{font-family:'Hanken Grotesk';font-weight:600;font-size:18px;color:var(--lk3);white-space:nowrap;display:inline-flex;align-items:center;gap:18px} .mq span::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--blue)} @keyframes marq{to{transform:translateX(-50%)}} /* ── PILE 'you' row reveal ─────────────────────────────────────────── */ .stack .r.you{opacity:0} .stack.in .r.you{animation:youin .85s cubic-bezier(.16,1,.3,1) .15s both, youglow 3.6s ease-in-out 1.6s infinite} @keyframes youin{from{opacity:0;transform:translateX(-14px) translateY(18px) scale(1)}to{opacity:1;transform:translateX(-14px) scale(1.04)}} @keyframes youglow{0%,100%{box-shadow:0 0 0 1px var(--blue) inset,0 18px 44px rgba(46,107,255,.22)}50%{box-shadow:0 0 0 1px var(--blue) inset,0 24px 56px rgba(46,107,255,.42)}} /* ── FOOTER ────────────────────────────────────────────────────────── */ footer{background:var(--ink);color:var(--tx-d2);padding:72px 0 40px;position:relative;overflow:hidden} .foot{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr;gap:28px;margin-bottom:46px} .foot .brand{margin-bottom:16px} .foot .bl{font-size:14px;color:var(--tx-d3);max-width:260px} .foot .social{display:flex;gap:10px;margin-top:18px} .foot .social a{width:36px;height:36px;border-radius:9px;border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;color:var(--tx-d2);transition:background .2s,color .2s,border-color .2s} .foot .social a:hover{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.25)} .foot .social svg{width:17px;height:17px;fill:currentColor} .foot h5,.foot h2.foot-col-h{font-family:'Space Mono',monospace;font-size:11px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-d3);margin-bottom:14px;line-height:1.6} .foot a.fl{display:block;font-size:14px;color:var(--tx-d2);padding:5px 0}.foot a.fl:hover{color:#fff} .foot-b{border-top:1px solid rgba(255,255,255,.08);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--tx-d3)} .foot-b .lg{display:flex;gap:18px}.foot-b a:hover{color:#fff} /* ── REVEAL ────────────────────────────────────────────────────────── Fail-safe: final (visible) state is the default. JS adds .rv-armed to start hidden, then .in to animate to visible. If IntersectionObserver never fires or JS fails, text remains readable. */ .rv{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)} .rv-armed{opacity:0;transform:translateY(22px)} .rv.in,.rv-armed.in{opacity:1;transform:none} @media (prefers-reduced-motion: reduce){.rv,.rv-armed{opacity:1!important;transform:none!important;transition:none!important}} /* ── GRADIENT-CLIP LEAKAGE FIX ─────────────────────────────────────── Any element using -webkit-background-clip:text + -webkit-text-fill-color: transparent (to paint gradient text) PROPAGATES the transparent fill to descendant ////, rendering them invisible on dark surfaces. This was the .takeaway-box-on-dark bug confirmed in the job-search-report screenshot. We scope every known gradient-clip carrier so the gradient look stays on the intended target, but children fall back to a readable high-contrast color (white on dark surfaces, ink on light). Targets cover this file (.pagehero h1 .gl, .bn, .ctaband .gl) AND known carriers in sibling sheets that pages co-load (.midcta, .tile, .ctaband, .pagehero, .bn, .rpt-hero, .hh, .ob-step, .kb-hero, .apply-cta). Using `revert` would re-inherit transparent; we set an explicit color. */ .midcta b,.midcta strong,.midcta em,.midcta i, .tile b,.tile strong,.tile em,.tile i, .ctaband h2 b,.ctaband h2 strong,.ctaband h2 em,.ctaband h2 i, .ctaband .gl b,.ctaband .gl strong,.ctaband .gl em,.ctaband .gl i, .pagehero h1 b,.pagehero h1 strong,.pagehero h1 em,.pagehero h1 i, .pagehero h1 .gl b,.pagehero h1 .gl strong,.pagehero h1 .gl em,.pagehero h1 .gl i, .bn b,.bn strong,.bn em,.bn i, .rpt-hero b,.rpt-hero strong,.rpt-hero em,.rpt-hero i, .hh b,.hh strong,.hh em,.hh i, .ob-step h2 .gl b,.ob-step h2 .gl strong,.ob-step h2 .gl em,.ob-step h2 .gl i, .kb-hero h1 .gl b,.kb-hero h1 .gl strong,.kb-hero h1 .gl em,.kb-hero h1 .gl i, .apply-cta h2 .gl b,.apply-cta h2 .gl strong,.apply-cta h2 .gl em,.apply-cta h2 .gl i{ -webkit-text-fill-color:#fff;color:#fff;background:none;-webkit-background-clip:initial;background-clip:initial } /* Same protection on light/takeaway boxes: a .takeaway/.callout with a gradient-clip parent must keep its own readable text. Force inherited color to the ink token so children are never transparent. */ .takeaway b,.takeaway strong,.takeaway em,.takeaway i, .callout b,.callout strong,.callout em,.callout i{ -webkit-text-fill-color:currentColor;color:inherit } /* ── RESPONSIVE ────────────────────────────────────────────────────── */ /* ≤1024 — tablet landscape: tighten wraps, soften the tallest hero paddings, begin collapsing the densest 3-col grids to 2-col. */ @media(max-width:1024px){ .wrap{padding:0 28px} .nav.sc{max-width:calc(100% - 28px)} .tgrid,.wgrid,.pgrid,.fcards .fgrid,.cardgrid{grid-template-columns:repeat(2,1fr)} .pagehero{padding:140px 24px 72px} .beamsec{padding:108px 24px 110px} .pile .wrap{gap:44px} } @media(max-width:960px){ .nav-links,.nav-cta{display:none} .menu-btn{display:inline-flex} .stats .wrap{grid-template-columns:repeat(2,1fr);gap:30px 20px} .flist .wrap,.pile .wrap{grid-template-columns:1fr;gap:40px}.flist-left{position:static} .tgrid,.wgrid,.pgrid,.fcards .fgrid,.cmp2 .cols{grid-template-columns:1fr} .foot{grid-template-columns:1fr 1fr} } /* ≤768 — portrait tablet / large phone: single-column everything that's left, trim vertical rhythm, keep the pile card from overflowing via its 'you' scale. */ @media(max-width:768px){ .wrap{padding:0 22px} .cardgrid{grid-template-columns:1fr;margin-top:34px} .state{padding:60px 0 64px} .flist{padding:64px 0} .fcards,.trust,.who,.pricing,.pile,.quote,.faq{padding:64px 0} .cmp2,.darklist{padding:64px 0} .ctaband,.bignum{padding:76px 20px} .beamsec{padding:90px 22px 96px} .pagehero{padding:126px 22px 64px} /* feature list rows stack their tile above the headline */ .frow{flex-wrap:wrap;gap:14px 18px;padding:24px 2px} /* pile card 'you' row uses a -14px translate + scale that can poke past the viewport edge on narrow screens — neutralize the horizontal shift */ .r.you{transform:none;scale:1} .stack.in .r.you,.stack .r.you{animation:none} .stack .r.you{opacity:1} .kchip{position:static;margin:14px 0 2px;right:auto;bottom:auto} /* quote portrait shrinks */ .quote .ph{width:84px;height:84px;font-size:28px} /* dark getting-started rows already single-col below */ .reassure{gap:10px 18px} } @media(max-width:640px){ .hero{padding:116px 16px 70px} .hh{font-size:clamp(48px,15.5vw,96px)} .sub{font-size:16px} .dl-row{grid-template-columns:1fr;gap:8px}.dl-row p{text-align:left;max-width:none} .quote .wrap{grid-template-columns:1fr;text-align:center}.quote .ph{margin:0 auto} .megapanel.wide{grid-template-columns:1fr;min-width:300px} } /* ≤480 — phones incl. 375px: kill every remaining horizontal overflow, cap giant clamp type, give comfortable tap targets, drop the footer to 1col. */ @media(max-width:480px){ .wrap{padding:0 18px} .nav .wrap{height:62px} .hero{padding:104px 14px 64px} .hh{font-size:clamp(42px,13.5vw,74px)} .hero .cta,.pagehero .cta,.ctaband .cta{flex-direction:column;align-items:stretch} .hero .cta .btn,.pagehero .cta .btn,.ctaband .cta .btn{justify-content:center;width:100%} .pagehero{padding:112px 18px 56px} .pagehero h1{font-size:clamp(36px,10vw,56px)} /* giant statement: cap so a single long word can't force a scroll */ .state h2{font-size:clamp(28px,8.6vw,40px)} .beamsec h2{font-size:clamp(30px,9vw,46px)} .bn{font-size:clamp(48px,18vw,96px)} /* stat band to single column so big numbers never collide */ .stats .wrap{grid-template-columns:1fr;gap:26px} /* footer: stack fully */ .foot{grid-template-columns:1fr;gap:24px} .foot-b{flex-direction:column;align-items:flex-start;gap:10px} /* pricing / form / card paddings ease in */ .pc{padding:26px 22px} .formcard{padding:26px 20px} .fcard,.tcard,.wcard,.acard{padding:22px} /* email capture: stack input + button so nothing exceeds the band */ .capture{flex-direction:column} .capture input,.capture .btn{width:100%;min-width:0} /* feature row headline reflows */ .frow{padding:20px 2px} .frow h3{font-size:clamp(22px,7.4vw,32px)} /* comfortable tap targets */ .mega-item{padding:14px} .foot a.fl{padding:8px 0} .fq button{font-size:17px;padding:22px 40px 22px 0} } /* prose safety net — long tables/figures in articles must scroll, not overflow. Scoped tables (.btab etc.) keep their own look; this only guards the box. */ .prose figure,.prose img,.prose svg{max-width:100%;height:auto} .prose table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} @media(max-width:480px){ .prose{padding:48px 0 72px} .prose table{font-size:13px} } @media(prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none} .hh .ln,.hh .ch,.sub,.hero .cta{animation:none!important;opacity:1!important;filter:none!important;transform:none!important} .hh .ch{color:#fff!important;text-shadow:0 0 16px rgba(120,190,255,.5)!important} .mq .track,.beams i{animation:none!important} .hero .kick .b,.eb .b,.bulbrow i{animation:none!important} .stack .r.you{opacity:1!important;animation:none!important} .rw{opacity:1!important;transition:none!important} .mark{background-size:100% 100%!important;color:#fff!important;transition:none!important} .itile{transform:none!important;transition:none!important} } /* ── PROSE (legal / text pages) ────────────────────────────────────── */ .prose{max-width:760px;margin:0 auto;padding:64px 0 96px} .prose .upd{font-family:'Space Mono',monospace;font-size:12px;color:var(--lk3);margin-bottom:30px} .prose h2{font-size:22px;margin:36px 0 10px;color:var(--lk)} .prose p,.prose li{font-size:15px;color:var(--lk2);margin-bottom:12px} .prose ul{padding-left:20px;margin-bottom:14px} .prose .note{background:var(--lt2);border:1px solid var(--lline);border-left:3px solid var(--blue);border-radius:10px;padding:16px 18px;font-size:14px;color:var(--lk2);margin:24px 0} /* ── FORMS (contact) ───────────────────────────────────────────────── */ .formsec{padding:60px 0 100px} .formcard{max-width:560px;margin:0 auto;background:var(--lt);border:1px solid var(--lline);border-radius:20px;padding:34px;box-shadow:0 30px 70px rgba(12,18,48,.08)} .formcard .fld{margin-bottom:16px} .formcard label{display:block;font-size:13px;font-weight:600;color:var(--lk);margin-bottom:7px} .formcard input,.formcard textarea,.formcard select{width:100%;border:1px solid var(--lline);border-radius:11px;padding:13px 15px;font-size:15px;font-family:'Inter';color:var(--lk);background:var(--lt2)} .formcard input:focus,.formcard textarea:focus,.formcard select:focus{outline:none;border-color:var(--blue);background:#fff} .formcard textarea{min-height:130px;resize:vertical} .formcard .btn{width:100%;justify-content:center;margin-top:6px} /* ── AUTH (signup / login) ─────────────────────────────────────────── */ .authpage{min-height:100vh;display:grid;place-items:center;padding:60px 24px;background:radial-gradient(120% 100% at 50% -10%,#1A47A0,transparent 55%),var(--ink)} .authcard{width:100%;max-width:420px;background:var(--lt);border-radius:22px;padding:38px 34px;box-shadow:0 40px 90px rgba(0,0,0,.5)} .authcard .lg{display:flex;align-items:center;gap:9px;justify-content:center;font-family:'Hanken Grotesk';font-weight:700;font-size:20px;color:var(--lk);margin-bottom:18px} .authcard .lg .mk{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--aqua-2),var(--aqua));display:grid;place-items:center} .authcard h1{text-align:center;font-size:25px;margin-bottom:6px} .authcard .s{text-align:center;font-size:14px;color:var(--lk3);margin-bottom:26px} .authcard .fld{margin-bottom:14px} .authcard label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--lk)} .authcard input{width:100%;border:1px solid var(--lline);border-radius:11px;padding:12px 14px;font-size:15px;background:var(--lt2)} .authcard input:focus{outline:none;border-color:var(--blue);background:#fff} .authcard .btn{width:100%;justify-content:center;margin-top:8px} .authcard .alt{text-align:center;font-size:13px;color:var(--lk3);margin-top:20px} .authcard .alt a{color:var(--blue);font-weight:600} .authcard .legal{text-align:center;font-size:11.5px;color:var(--lk3);margin-top:16px} /* ── ARTICLE / GUIDE / ROLE CARDS ──────────────────────────────────── */ .cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px} .acard{display:block;background:var(--lt2);border:1px solid var(--lline);border-radius:16px;padding:24px;transition:transform .25s,box-shadow .25s,border-color .25s} .acard:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(12,18,48,.1);border-color:#cfd8e8} .acard .tag{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)} .acard h3{font-size:18px;margin:12px 0 8px;color:var(--lk)} .acard p{font-size:14px;color:var(--lk2)} .acard .more{display:inline-block;margin-top:14px;font-size:13.5px;font-weight:600;color:var(--blue)} .rolerow{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 4px;border-top:1px solid var(--lline)} .rolerow:last-child{border-bottom:1px solid var(--lline)} .rolerow h3{font-size:19px;color:var(--lk)}.rolerow .meta{font-size:13px;color:var(--lk3)} @media(max-width:960px){.cardgrid{grid-template-columns:1fr}} /* ── HERO KICKER — marquee "top billing" tag w/ glowing bulbs ──────── */ .hero .kick{position:relative;z-index:2;display:inline-flex;align-items:center;gap:13px;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#fff;margin-bottom:26px;animation:hfade .9s cubic-bezier(.16,1,.3,1) .1s both} .hero .kick .b{width:7px;height:7px;border-radius:50%;background:var(--aqua-2);box-shadow:0 0 10px var(--aqua-2),0 0 20px rgba(127,216,255,.55);animation:bulb 1.6s ease-in-out infinite} .hero .kick .b:last-child{animation-delay:.8s} @keyframes bulb{0%,100%{opacity:.45;box-shadow:0 0 5px var(--aqua-2)}50%{opacity:1;box-shadow:0 0 12px var(--aqua-2),0 0 24px rgba(127,216,255,.7)}} .pile .lead p b{color:var(--lk);font-weight:600} /* reusable marquee bulb divider */ .bulbrow{display:flex;justify-content:center;gap:14px;padding:4px 0} .bulbrow i{width:6px;height:6px;border-radius:50%;background:var(--aqua-2);box-shadow:0 0 8px var(--aqua-2);animation:bulb 1.6s ease-in-out infinite} /* ── sub-page eyebrow bulb + contextual bulb rows ──────────────────── */ .eb .b{width:7px;height:7px;border-radius:50%;background:var(--aqua-2);box-shadow:0 0 9px var(--aqua-2);animation:bulb 1.6s ease-in-out infinite;flex:0 0 auto} .ctaband .cta-bulbs{position:relative;z-index:2;margin-bottom:20px} .stack .card-bulbs{margin-bottom:14px} .flist-left p b{color:var(--lk);font-weight:600} /* scroll-typing reveal units (set live by app.js on scroll) */ .rw{opacity:.07;transition:opacity .18s ease-out} .streveal{will-change:contents} /* ════════════════════════════════════════════════════════════════════ CINEMATIC INTRO — "the marquee powers on" → match-cut into the nav. ~5s sequence (home only, gated by html.intro-on). The mark+word form ONE horizontal lockup (.lockup) sized proportionally to the nav brand, so on exit JS can FLIP it up to become the real nav wordmark. Overlay sits ON TOP of the hero — content/SEO never blocked. ═════════════════════════════════════════════════════════════════════ */ html.intro-on{overflow:hidden;background:#04060E} html.intro-on body{overflow:hidden} #intro{display:none} html.intro-on #intro{display:flex} #intro{position:fixed;inset:0;z-index:9999;flex-direction:column;align-items:center;justify-content:center;overflow:hidden} #intro .bg{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 48%,#0A1730,#04060E 72%);transition:opacity .6s ease} #intro.fly .bg{opacity:0} #intro .flare{position:absolute;width:62vmax;height:62vmax;border-radius:50%; background:radial-gradient(circle,rgba(143,200,255,.5),rgba(77,162,255,.12) 40%,transparent 70%); opacity:0;transform:scale(.2);animation:introFlare 1.1s ease-out 2.5s forwards} @keyframes introFlare{0%{opacity:0;transform:scale(.2)}55%{opacity:.85}100%{opacity:0;transform:scale(1.5)}} #intro .sign{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:28px} #intro .bulbs{display:flex;gap:18px} #intro .bulbs i{width:9px;height:9px;border-radius:50%;background:#8FC8FF;opacity:.05; animation:introBulb .5s ease-out forwards,bulb 1.8s ease-in-out 1.6s infinite} @keyframes introBulb{from{opacity:.05;box-shadow:none}to{opacity:1;box-shadow:0 0 10px #8FC8FF,0 0 22px rgba(127,216,255,.7)}} #intro .bulbs i:nth-child(1){animation-delay:.30s,1.6s} #intro .bulbs i:nth-child(2){animation-delay:.42s,1.6s} #intro .bulbs i:nth-child(3){animation-delay:.54s,1.6s} #intro .bulbs i:nth-child(4){animation-delay:.66s,1.6s} #intro .bulbs i:nth-child(5){animation-delay:.78s,1.6s} #intro .bulbs i:nth-child(6){animation-delay:.90s,1.6s} #intro .bulbs i:nth-child(7){animation-delay:1.02s,1.6s} #intro .bulbs i:nth-child(8){animation-delay:1.14s,1.6s} #intro .bulbs i:nth-child(9){animation-delay:1.26s,1.6s} /* the lockup: mark + word, horizontal, proportional to .nav .brand (mk 27 / font 21 / gap 10) */ #intro .lockup{--m:96px;display:flex;align-items:center;gap:calc(var(--m)*.37); transition:transform .85s cubic-bezier(.66,0,.2,1)} #intro .lockup .mk{width:var(--m);height:var(--m);border-radius:calc(var(--m)*.26); background:linear-gradient(135deg,#8FC8FF,#4DA2FF);display:grid;place-items:center;flex:0 0 auto; opacity:0;transform:scale(.6);animation:introMk .7s cubic-bezier(.16,1,.3,1) 1s forwards} #intro .lockup .mk svg,#intro .lockup .mk img{width:calc(var(--m)*.64);height:calc(var(--m)*.64);object-fit:contain;display:block} #intro .intro-logo{height:calc(var(--m) * 2);width:auto;display:block;opacity:0;animation:introLogo .9s cubic-bezier(.16,1,.3,1) 1s forwards} @keyframes introLogo{0%{opacity:0;transform:scale(.6);filter:drop-shadow(0 0 0 rgba(127,216,255,0))}60%{opacity:1;transform:scale(1.02);filter:drop-shadow(0 0 48px rgba(127,216,255,.85))}100%{opacity:1;transform:scale(1);filter:drop-shadow(0 0 30px rgba(127,216,255,.45))}} #intro.fly .intro-logo{filter:none;transition:filter .3s} @keyframes introMk{0%{opacity:0;transform:scale(.6);box-shadow:0 0 0 rgba(127,216,255,0)} 60%{box-shadow:0 0 48px rgba(127,216,255,.85)}100%{opacity:1;transform:scale(1);box-shadow:0 0 30px rgba(127,216,255,.45)}} #intro .word{display:flex;font-family:'Hanken Grotesk',sans-serif;font-weight:700;line-height:1; letter-spacing:-.02em;color:#fff;font-size:calc(var(--m)*.78)} #intro .word i{opacity:0;font-style:normal;animation:introFlick .6s linear forwards} @keyframes introFlick{0%{opacity:0;text-shadow:none}55%{opacity:0}60%{opacity:1;text-shadow:0 0 18px rgba(143,200,255,.95)} 66%{opacity:.22}72%{opacity:1}82%{opacity:.6}100%{opacity:1;text-shadow:0 0 22px rgba(130,198,255,.55)}} #intro .word i:nth-child(1){animation-delay:1.50s} #intro .word i:nth-child(2){animation-delay:1.70s} #intro .word i:nth-child(3){animation-delay:1.90s} #intro .word i:nth-child(4){animation-delay:2.10s} #intro .word i:nth-child(5){animation-delay:2.30s} #intro .word i:nth-child(6){animation-delay:2.50s} /* on exit: settle the glow so the landed wordmark matches the flat nav brand */ #intro.fly .word i{text-shadow:none;transition:text-shadow .3s} #intro.fly .lockup .mk{box-shadow:none;transition:box-shadow .3s} #intro.fly .bulbs,#intro.fly .tag,#intro.fly .flare,#intro.fly .skip{opacity:0;transition:opacity .35s ease} #intro .tag{font-family:'Space Mono',monospace;font-size:clamp(12px,1.6vw,15px);letter-spacing:.32em;text-transform:uppercase; color:rgba(255,255,255,.85);opacity:0;animation:introTag .7s ease-out 2.9s forwards} @keyframes introTag{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} #intro.out{transition:opacity .55s ease,transform .55s ease;opacity:0;transform:scale(1.05);pointer-events:none} #intro .skip{position:absolute;right:22px;bottom:20px;z-index:3;background:transparent;border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.7);font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.1em;padding:8px 14px;border-radius:8px; cursor:pointer;opacity:0;animation:introTag .5s ease-out .6s forwards;transition:color .2s,border-color .2s} #intro .skip:hover{color:#fff;border-color:rgba(255,255,255,.5)} #intro .skip span{opacity:.6;margin-left:2px} @media(max-width:600px){#intro .lockup{--m:58px}} @media(prefers-reduced-motion:reduce){html.intro-on{overflow:auto;background:var(--lt)}html.intro-on body{overflow:auto}html.intro-on #intro{display:none}} /* ── PILE CARD v2 — cinematic "rise out of the pile, into the lights" ── */ .rows{position:relative} .rows::after{content:"+ 209 others, still in the pile";display:block;text-align:center;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.02em;color:var(--lk3);opacity:.6;padding-top:14px} .r.dim{filter:saturate(.55)} .stack .r.dim{opacity:0} .stack.in .r.dim{animation:dimin .55s ease both} .stack.in .r.dim:nth-of-type(1){animation-delay:.04s} .stack.in .r.dim:nth-of-type(2){animation-delay:.12s} .stack.in .r.dim:nth-of-type(4){animation-delay:.55s} .stack.in .r.dim:nth-of-type(5){animation-delay:.66s} @keyframes dimin{from{opacity:0;transform:translateY(10px)}to{opacity:.5;transform:none}} .r.you{transform:scale(1.04);overflow:visible;z-index:1} .r.you::before{content:'';position:absolute;inset:-3px;border-radius:17px;z-index:-1;pointer-events:none;background:radial-gradient(130% 180% at 16% 50%,rgba(125,185,255,.6),rgba(46,107,255,.14) 46%,transparent 74%);opacity:0} .stack.in .r.you::before{animation:spotbloom 1s ease .4s both,spotpulse 3.6s ease-in-out 1.8s infinite} @keyframes spotbloom{from{opacity:0;transform:scale(.65)}to{opacity:1;transform:scale(1)}} @keyframes spotpulse{0%,100%{opacity:.8}50%{opacity:1}} .stack .r.you{opacity:0} .stack.in .r.you{animation:youin2 .9s cubic-bezier(.34,1.3,.5,1) .32s both,youglow2 3.6s ease-in-out 2s infinite} @keyframes youin2{0%{opacity:0;transform:translateY(28px) scale(.98)}60%{transform:translateY(-5px) scale(1.06)}100%{opacity:1;transform:scale(1.04)}} @keyframes youglow2{0%,100%{box-shadow:0 0 0 1px var(--blue) inset,0 18px 44px rgba(46,107,255,.22)}50%{box-shadow:0 0 0 1px var(--blue) inset,0 26px 62px rgba(46,107,255,.46)}} .stack .r.you .tg{transform-origin:center;display:inline-flex;align-items:center;gap:5px} .stack.in .r.you .tg{animation:tgpop .55s cubic-bezier(.34,1.56,.64,1) .8s both} @keyframes tgpop{0%{opacity:0;transform:scale(.5)}62%{transform:scale(1.14)}100%{opacity:1;transform:scale(1)}} .stack .kchip{opacity:0} .stack.in .kchip{animation:kchipin .6s cubic-bezier(.16,1,.3,1) 1s both} @keyframes kchipin{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}} @media(max-width:768px){ .r.you{transform:none!important} .r.you::before,.stack.in .r.you::before{display:none} .stack .r.you,.stack.in .r.you,.stack .r.dim,.stack.in .r.dim,.stack .kchip,.stack.in .kchip,.stack.in .r.you .tg{animation:none!important;opacity:1!important;transform:none!important} .stack .r.dim{opacity:.55!important} } @media(prefers-reduced-motion:reduce){ .r.you,.r.you::before,.stack.in .r.you,.stack.in .r.you::before,.stack .r.dim,.stack.in .r.dim,.stack .kchip,.stack.in .kchip,.stack.in .r.you .tg{animation:none!important} .r.you{transform:scale(1.04)}.r.dim{opacity:.55!important;transform:none!important}.kchip,.r.you .tg{opacity:1!important;transform:none!important} } /* ── FREE 48-HOUR TRIAL highlight ─────────────────────────────────── */ .hero .trialpill{position:relative;z-index:2;display:inline-flex;align-items:center;gap:9px;margin-top:22px;font-size:13.5px;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);padding:9px 17px;border-radius:999px;animation:hfade .9s cubic-bezier(.16,1,.3,1) .7s both;transition:background .2s} .hero .trialpill:hover{background:rgba(255,255,255,.2)} .hero .trialpill b{font-weight:700} .hero .trialpill .b{width:7px;height:7px;border-radius:50%;background:var(--aqua-2);box-shadow:0 0 10px var(--aqua-2);animation:bulb 1.6s ease-in-out infinite;flex:0 0 auto} .trialband{background:linear-gradient(100deg,var(--blue),var(--aqua))} .trialband .wrap{padding:24px 36px} .tb-inner{display:flex;align-items:center;gap:26px;justify-content:center;flex-wrap:wrap;text-align:left} .tb-badge{display:inline-flex;align-items:center;gap:8px;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);padding:7px 13px;border-radius:999px;white-space:nowrap} .tb-badge .b{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 9px #fff;animation:bulb 1.6s ease-in-out infinite} .tb-copy{flex:1;min-width:240px} .trialband h2{color:#fff;font-size:clamp(19px,2.2vw,25px);margin:0 0 3px;line-height:1.1} .trialband p{color:#fff;font-size:14.5px;margin:0;max-width:560px} .trialband p b{color:#fff;font-weight:700} .trialband .btn{background:#04101f;color:#fff;white-space:nowrap;flex:0 0 auto} .trialband .btn:hover{background:#0a1830} @media(max-width:700px){.tb-inner{flex-direction:column;text-align:center}.trialband p{max-width:none}} /* ── i18n: language selector + RTL foundation ─────────────────────── */ .langsel{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--tx-d2);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);padding:5px 11px;border-radius:999px;transition:color .2s,border-color .2s} .langsel:hover{color:#fff;border-color:rgba(255,255,255,.3)} .foot-b{flex-wrap:wrap;gap:14px} /* RTL foundation — flips the essentials; full CSS-logical-property migration tracked in I18N-READINESS.md */ [dir="rtl"]{direction:rtl} [dir="rtl"] .lead,[dir="rtl"] .prose,[dir="rtl"] .shead,[dir="rtl"] .pagehero .inner{text-align:right} [dir="rtl"] .nav .wrap,[dir="rtl"] .foot-b,[dir="rtl"] .tb-inner{flex-direction:row-reverse} [dir="rtl"] .prose ul,[dir="rtl"] .prose ol,[dir="rtl"] .ulx{padding-right:1.2em;padding-left:0} [dir="rtl"] .arr{transform:scaleX(-1)} @media(min-width:961px){footer.big .foot{grid-template-columns:1.5fr repeat(5,1fr)}} /* ── article byline + author cards (E-E-A-T) ──────────────────────── */ .byline{display:flex;align-items:center;gap:12px;margin:0 0 28px;padding:15px 0;border-top:1px solid var(--lline);border-bottom:1px solid var(--lline)} .byline .ava{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--aqua-2),var(--aqua));color:#04101f;display:grid;place-items:center;font-weight:700;font-size:14px;flex:0 0 auto} .byline b{font-size:15px;color:var(--lk);font-weight:600;display:block} .byline b a{color:var(--blue)} .byline .meta{font-size:13px;color:var(--lk3)} .authorgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:36px} .authorcard{display:flex;gap:16px;border:1px solid var(--lline);border-radius:16px;padding:22px;background:var(--lt);align-items:flex-start} .authorcard .ava{width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,var(--aqua-2),var(--aqua));color:#04101f;display:grid;place-items:center;font-weight:700;font-size:19px;flex:0 0 auto} .authorcard h3{font-size:18px;margin:0 0 2px}.authorcard .role{font-family:'Space Mono',monospace;font-size:12px;color:var(--blue);margin-bottom:8px}.authorcard p{font-size:14px;color:var(--lk2);margin:0} @media(max-width:760px){.authorgrid{grid-template-columns:1fr}} /* ── sticky "On this page" rail for articles ──────────────────────── */ html{scroll-behavior:smooth} .prose h2,.prose h3{scroll-margin-top:92px} .article-shell{display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:56px;align-items:start;max-width:1060px;margin:0 auto} .article-shell>article.prose{max-width:none!important;margin:0;min-width:0} .toc-rail{position:sticky;top:96px;align-self:start;max-height:calc(100vh - 124px);overflow-y:auto;overscroll-behavior:contain} .toc-rail .toc-h{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--lk3);margin:0 0 12px;padding-left:14px} .toc-rail nav a{display:block;padding:5px 0 5px 14px;margin-left:-2px;color:var(--lk3);border-left:2px solid var(--lline);line-height:1.38;font-size:13.5px;text-decoration:none;transition:color .15s ease,border-color .15s ease} .toc-rail nav a.sub{padding-left:28px;font-size:12.5px} .toc-rail nav a:hover{color:var(--lk)} .toc-rail nav a.active{color:var(--blue);border-left-color:var(--blue);font-weight:600} .prose .toc{display:none} .toc-mobile{display:none} @media(max-width:1024px){ .article-shell{display:block;max-width:none} .toc-rail{display:none} .toc-mobile{display:block;margin:0 0 28px;border:1px solid var(--lline);border-radius:13px;background:var(--lt);overflow:hidden} .toc-mobile summary{cursor:pointer;padding:13px 17px;font-weight:600;font-size:14px;color:var(--lk);list-style:none} .toc-mobile summary::-webkit-details-marker{display:none} .toc-mobile summary::after{content:'\203A';float:right;transform:rotate(90deg);color:var(--lk3);transition:transform .2s} .toc-mobile[open] summary::after{transform:rotate(-90deg)} .toc-mobile nav{padding:2px 17px 14px} .toc-mobile nav a{display:block;padding:7px 0;color:var(--lk2);font-size:13.5px;text-decoration:none;border-top:1px solid var(--lline)} .toc-mobile nav a.sub{padding-left:16px} } /* ════════════════════════════════════════════════════════════════════ FACETED TEMPLATE FILTER (assets/template-filter.js) Reusable filter bar for resume / cover-letter / site template galleries. Built on app.css tokens · dark+light parity (.tplx.on-dark or inside a dark section flips to the light-on-dark palette). ═════════════════════════════════════════════════════════════════════ */ .tplx{margin:30px 0 8px;display:flex;flex-direction:column;gap:14px} .tplx-search{position:relative;display:flex;align-items:center} .tplx-search-ic{position:absolute;left:16px;width:18px;height:18px;color:var(--lk3);pointer-events:none} .tplx-input{width:100%;font-family:'Inter',system-ui,sans-serif;font-size:15px;color:var(--lk);background:var(--lt);border:1px solid var(--lline);border-radius:12px;padding:13px 16px 13px 44px;transition:border-color .18s,box-shadow .18s} .tplx-input::placeholder{color:var(--lk3)} .tplx-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(46,107,255,.16)} .tplx-input::-webkit-search-cancel-button{cursor:pointer} .tplx-group{display:flex;flex-wrap:wrap;align-items:center;gap:9px} .tplx-glabel{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--lk3);margin-right:2px} .tplx-pills{display:flex;flex-wrap:wrap;gap:8px} .tplx-pill{font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:var(--lk2);background:var(--lt);border:1px solid var(--lline);padding:7px 13px;border-radius:999px;cursor:pointer;transition:.16s} .tplx-pill:hover{border-color:var(--lk);color:var(--lk)} .tplx-pill.on{background:var(--blue);border-color:var(--blue);color:#fff} .tplx-pill:focus-visible{outline:2px solid var(--blue);outline-offset:2px} .tplx-toggles{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:2px} .tplx-toggle{display:inline-flex;align-items:center;gap:8px;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;color:var(--lk2);background:var(--lt);border:1px solid var(--lline);padding:7px 14px;border-radius:999px;cursor:pointer;transition:.16s} .tplx-toggle .tplx-dot{width:9px;height:9px;border-radius:50%;border:1.6px solid var(--dotline);transition:.16s} .tplx-toggle:hover{border-color:var(--lk);color:var(--lk)} .tplx-toggle.on{background:var(--lk);border-color:var(--lk);color:#fff} .tplx-toggle.on .tplx-dot{background:var(--aqua);border-color:var(--aqua)} .tplx-toggle:focus-visible{outline:2px solid var(--blue);outline-offset:2px} .tplx-spacer{flex:1 1 auto;min-width:8px} .tplx-count{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.03em;color:var(--lk3);white-space:nowrap} .tplx-clear{display:inline-flex;align-items:center;gap:6px;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;color:var(--blue);background:transparent;border:0;cursor:pointer;padding:6px 4px} .tplx-clear svg{width:14px;height:14px} .tplx-clear:hover{text-decoration:underline} .tplx-clear:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px} @media(max-width:560px){ .tplx-glabel{width:100%;margin-bottom:-2px} .tplx-count{order:2} .tplx-clear{order:3} } /* ── dark parity: filter inside a dark section, or .tplx.on-dark ───────── */ .cmp2 .tplx,.darksec .tplx,.tplx.on-dark{} .cmp2 .tplx-input,.darksec .tplx-input,.tplx.on-dark .tplx-input{color:var(--tx);background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)} .cmp2 .tplx-input::placeholder,.darksec .tplx-input::placeholder,.tplx.on-dark .tplx-input::placeholder{color:var(--tx-d3)} .cmp2 .tplx-search-ic,.darksec .tplx-search-ic,.tplx.on-dark .tplx-search-ic{color:var(--tx-d3)} .cmp2 .tplx-glabel,.darksec .tplx-glabel,.tplx.on-dark .tplx-glabel{color:var(--tx-d3)} .cmp2 .tplx-pill,.darksec .tplx-pill,.tplx.on-dark .tplx-pill{color:var(--tx-d2);background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)} .cmp2 .tplx-pill:hover,.darksec .tplx-pill:hover,.tplx.on-dark .tplx-pill:hover{color:#fff;border-color:rgba(255,255,255,.4)} .cmp2 .tplx-pill.on,.darksec .tplx-pill.on,.tplx.on-dark .tplx-pill.on{background:var(--aqua);border-color:var(--aqua);color:#04101f} .cmp2 .tplx-toggle,.darksec .tplx-toggle,.tplx.on-dark .tplx-toggle{color:var(--tx-d2);background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)} .cmp2 .tplx-toggle:hover,.darksec .tplx-toggle:hover,.tplx.on-dark .tplx-toggle:hover{color:#fff;border-color:rgba(255,255,255,.4)} .cmp2 .tplx-toggle.on,.darksec .tplx-toggle.on,.tplx.on-dark .tplx-toggle.on{background:#fff;border-color:#fff;color:#06182f} .cmp2 .tplx-count,.darksec .tplx-count,.tplx.on-dark .tplx-count{color:var(--tx-d3)} .cmp2 .tplx-clear,.darksec .tplx-clear,.tplx.on-dark .tplx-clear{color:var(--aqua-2)} /* ════════════════════════════════════════════════════════════════════ WAVE 4 (2026-06-29) — additive a11y polish. - Footer column headers now h2.foot-col-h (was h5) so document heading order is contiguous. Visual style preserved. - Promoted .panel-head h3 → h2 in dashboard pages: see dashboard.css/partner.css for the matching selector update. - Region/landmark, contrast and label fixes live in their owners (per-page or component CSS); this section keeps a safety net for glass surfaces flagged by the 2026-06-29 axe sweep without overriding Batch A's tokens. ═════════════════════════════════════════════════════════════════════ */ .sb-plan .pb{color:#fff;opacity:1} .card .pb,.panel .pb,.kpi .pb{color:var(--lk2)} .darksec .pb,.cmp2 .pb{color:var(--tx)} /* ═════════════════════════════════════════════════════════════════════ Brand logo (full horizontal lockup) — header + footer .brand wrappers Additive: leave existing .brand / .mk rules intact so sb-brand and any decorative .mk uses keep working. ═════════════════════════════════════════════════════════════════════ */ .brand-logo{display:block;height:60px;width:auto;max-width:100%} /* Header logo: explicit width to bypass flex-shrink compression + intrinsic SVG size quirks. The new full logo SVG has embedded content — the browser reads its natural size as 300×116, so at height:100px we need explicit width:260px (100 × 300/116) to size it correctly. */ nav .brand-logo,header .brand-logo{ height:72px !important; width:188px !important; max-width:none !important; min-width:188px !important; object-fit:contain !important; object-position:left center !important; flex:0 0 auto !important; transform:none !important; transition:height .28s cubic-bezier(.16,1,.3,1),width .28s cubic-bezier(.16,1,.3,1),min-width .28s cubic-bezier(.16,1,.3,1); } footer .brand-logo{height:60px;transform:none} nav a.brand,header a.brand,footer a.brand{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto} .nav .nl{white-space:nowrap} /* When scrolled: shrink to icon-only mark. New icon SVG is nearly square (viewBox 142.68×139.75, aspect ratio 1.021), so container is sized nearly square with breathing room. */ .nav.sc .brand-logo{ height:52px !important; width:54px !important; min-width:54px !important; object-fit:contain !important; object-position:center center !important; } /* Nav content sizing: Tightened for a more compact, centered nav. 1) Compress nav-links (smaller padding/gap/font) so 8 items fit tighter. 2) Narrow .nav .wrap so pre-scroll content sits with visible viewport cushion. 3) Narrow .nav.sc pill for a distinctly compact floating look. */ .nav .nav-links{gap:0 !important} .nav .nl{padding:8px 7px !important;font-size:14px !important} .nav .wrap{max-width:1180px !important} .nav.sc{ box-sizing:border-box !important; max-width:1120px !important; padding-left:20px !important; padding-right:20px !important; } .nav.sc .wrap{ max-width:100% !important; width:100% !important; padding:0 !important; margin:0 !important; box-sizing:border-box !important; } @media(max-width:900px){ nav .brand-logo,header .brand-logo{height:56px !important;width:146px !important;min-width:146px !important} .nav.sc .brand-logo{height:44px !important;width:46px !important;min-width:46px !important} } @media(max-width:640px){ nav .brand-logo,header .brand-logo{height:44px !important;width:115px !important;min-width:115px !important} .nav.sc .brand-logo{height:38px !important;width:40px !important;min-width:40px !important} } /* ── SPLASH INTRO — first-page-load Marqee brand moment (once per session) ── */ .mq-splash{ position:fixed;inset:0;z-index:9999; background:#05080F; /* Marqee ink */ display:grid;place-items:center; animation:mqSplashOut .6s cubic-bezier(.4,0,.2,1) 2.2s forwards; pointer-events:none; background-image:radial-gradient(ellipse at center,rgba(77,162,255,.10) 0%,transparent 60%); } .mq-splash-inner{ display:flex;flex-direction:column;align-items:center;gap:24px; opacity:0; animation:mqSplashIn .8s cubic-bezier(.16,1,.3,1) .1s forwards; } .mq-splash-logo{ height:clamp(72px,10vw,112px);width:auto;max-width:82vw; filter:drop-shadow(0 20px 40px rgba(46,107,255,.35)); } .mq-splash-tag{ font-family:'Space Mono',monospace;font-weight:700; font-size:clamp(11px,1.4vw,15px); letter-spacing:.32em;text-transform:uppercase; color:rgba(255,255,255,.72); display:flex;align-items:center;gap:.5em; } .mq-splash-tag .mq-w{ display:inline-block; opacity:0;transform:translateY(8px); animation:mqSplashWord .55s cubic-bezier(.16,1,.3,1) both; } .mq-splash-tag .mq-w:nth-child(1){animation-delay:.7s} .mq-splash-tag .mq-w:nth-child(2){animation-delay:.9s} .mq-splash-tag .mq-w:nth-child(3){animation-delay:1.1s;color:var(--aqua-2,#8FC8FF)} .mq-splash.mq-splash-done{display:none} @keyframes mqSplashIn{to{opacity:1}} @keyframes mqSplashOut{to{opacity:0;visibility:hidden}} @keyframes mqSplashWord{to{opacity:1;transform:translateY(0)}} @media(prefers-reduced-motion:reduce){.mq-splash{display:none}} /* ════════════════════════════════════════════════════════════════════ WAVE 5 (2026-06-30) — COMPREHENSIVE MOBILE RESPONSIVENESS LAYER Root-cause fixes from /scratchpad/mobile-responsive-2026-06-30/audit.md Applies to ALL 482 pages via shared CSS. Mirrored byte-for-byte in /Marqee Laravel/public/css/marketing.css for parity invariant. Breakpoints: 1024 / 768 / 480 / 360. Preserves design tokens, dark+light parity, marquee-bulb underline, all animations, page-design invariant. ═════════════════════════════════════════════════════════════════════ */ /* R13 — marquee track must clip inside its container, not the document. .mq already has overflow:hidden via main rule (line 353), confirm-only. */ /* R14 — defensive max-width on wide megapanel so it never pokes past viewport. */ .megapanel{max-width:calc(100vw - 28px)} /* R10 — site-wide table overflow protection (outside .prose). Comparison tables, plan grids, salary tables. Inline tables without an explicit wrap class now scroll horizontally instead of being clipped. Wave 5b verification (2026-06-30): adds .ctbl/.ctable/.bymo/.cmptbl/.btable classes found in pricing/contact/partner-program/who-its-for/index. */ .tblwrap,table.btab,table.btable,table.ptbl,table.cmp-tbl,table.cmptbl,table.ctbl,table.ctable,table.bymo,table.responsive-table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} /* R15 — index pile mock card had min-width creep from inline who-stat cells forcing the right column past viewport at 320. Constrain card to wrap. Wave 5b: Laravel render added 22px overflow vs static HTML; force grid-area width with calc-based viewport cap as ultimate safety net. */ .pile{overflow-x:clip} .pile .wrap{max-width:100%;min-width:0} .pile .lead,.pile .stack.pilemock{min-width:0;max-width:100%} .pile .stack.pilemock .card{min-width:0;max-width:100%;box-sizing:border-box} .pile .stack.pilemock .rows,.pile .stack.pilemock .r{min-width:0;max-width:100%;box-sizing:border-box} .pile .stack.pilemock .who-stats,.pile .stack.pilemock .who-stat{min-width:0;max-width:100%;box-sizing:border-box} .pile .stack.pilemock .who,.pile .stack.pilemock .who-name{min-width:0;max-width:100%;overflow:hidden} @media(max-width:480px){ .pile .stack.pilemock .card{padding:16px 14px 18px} .pile .stack.pilemock .who-stats{flex-wrap:wrap;gap:6px 14px} .pile .stack.pilemock .who-stat{min-width:0;flex:1 1 100px} } /* R16 — personal-site-builder template preview .tgrid uses inline grid-template-columns:repeat(2,1fr) which overrides external CSS without !important. Collapse at 768 + tablet 2-col override at 1024. */ @media(max-width:768px){ .tgrid[style*="grid-template-columns:repeat(2,1fr)"]{grid-template-columns:1fr!important} } /* ≤1024 — small laptop / tablet landscape. Collapse desktop-only grids that were inheriting too-narrow column widths at this breakpoint. */ @media(max-width:1024px){ /* R1 — footer 5-col → 4-col at small laptop; tagline col stays wider */ .foot{grid-template-columns:1.7fr 1fr 1fr 1fr;gap:24px} footer.big .foot{grid-template-columns:1.5fr repeat(4,1fr);gap:24px} /* R2 — stats band 4-col → 2-col at small laptop */ .stats .wrap{grid-template-columns:repeat(2,1fr);gap:28px 22px} /* R3 — cardgrid: align with global 1024 collapse (already in 1024 block earlier) */ /* R8 — normalize library/tool/auxiliary grids that were stuck multi-col */ .lib-grid,.libgrid,.bx-grid,.sgrid,.ao-grid,.tool-grid{grid-template-columns:repeat(2,1fr)} /* Common helper grids: .grid-3 / .grid-4 to 2-col, .grid-2 stays */ .grid-3,.grid-4,.ppt,.kpis{grid-template-columns:repeat(2,1fr)} /* nav-cta + cards never push past their wrap edge */ .nav-cta{max-width:100%} } /* ≤960 — original nav-collapse breakpoint (kept compatible). */ /* ≤768 — portrait tablet / iPad / large phone. The MASSIVE block: 38 multi-col grids in audit had to collapse here; we do it once globally. */ @media(max-width:768px){ /* R1 — footer fully stacks at 2 cols */ .foot{grid-template-columns:1fr 1fr;gap:24px} footer.big .foot{grid-template-columns:1fr 1fr;gap:24px} /* R4 — dl-row stacks; right-aligned helper p flows left */ .dl-row{grid-template-columns:1fr;gap:8px} .dl-row p{text-align:left;max-width:none} /* R5 — flist intro paragraph "240px max" unlocks now (not at 960) */ .flist-left p{max-width:none} /* R6 — narrow lede paragraphs unlock at 768 (was 960) */ .flist-left .bl,.pile .bl,.shead .bl,.pile .lead p{max-width:none} /* R7 — tool-grid uses 768 (was 760 off-by-8) */ .tool-grid{grid-template-columns:1fr} /* R8 — library / browser-extension / sub-page grids all 1-col */ .lib-grid,.libgrid,.bx-grid,.sgrid,.ao-grid,.bs-grid,.pd-incl,.rf-grid,.cmp-row{grid-template-columns:1fr} /* R9 — author grid (was ≤760) */ .authorgrid{grid-template-columns:1fr} /* segment cards / partner tracks / preview grids: 1-col */ .seg,.po,.track-grid,.preview-grid,.cmp-grid{grid-template-columns:1fr} /* generic helper grids */ .grid-2,.grid-3,.grid-4,.ppt,.kpis{grid-template-columns:1fr;gap:16px} /* hide desktop-only megapanels (mobile uses hamburger .mnav) */ .megapanel{display:none} /* wrap padding reduces */ .wrap{padding:0 18px} /* lede paragraphs in heroes that had hardcoded max-width */ .pagehero p{max-width:none} /* nav-cta out, hamburger in (existing at 960 — reaffirm) */ .nav-links,.nav-cta{display:none} .menu-btn{display:inline-flex} /* sticky positioning unsticks so column flow works */ .flist-left{position:static} .flist .wrap,.pile .wrap{grid-template-columns:1fr;gap:36px} /* fluid headline scaling — hero, page hero, section heads */ .hh{font-size:clamp(44px,11vw,84px)} .pagehero h1{font-size:clamp(36px,8.5vw,64px)} .shead h2,.state h2,.beamsec h2,.ctaband h2,.darklist h2,.cmp2 h2,.faq h2{font-size:clamp(28px,6.6vw,46px)} /* tighten padding on heavy bands */ .stats{padding:42px 0 8px} .trialband .wrap{padding:20px 18px} } /* ≤480 — phones. Tap targets, micro-text legibility, full single-col. */ @media(max-width:480px){ /* R11 — micro-text grows to 13px floor at narrow widths (WCAG 2.5.5) */ .chip-mono,.tc-note,.eb,.meta,.foot a.fl{font-size:13px} .bs-tag,.lbl,.foot h5,.foot h2.foot-col-h{font-size:12px} /* tighter wrap padding for small phones */ .wrap{padding:0 16px} /* nav compact */ .nav .wrap{height:60px} .brand{font-size:18px} .brand .mk{width:24px;height:24px} /* hero / pagehero / state tighten */ .hero{padding:104px 14px 64px} .pagehero{padding:108px 16px 52px} .state{padding:54px 0 60px} .flist,.fcards,.trust,.who,.pricing,.pile,.quote,.faq,.cmp2,.darklist{padding:54px 0} .ctaband,.bignum{padding:64px 16px} .beamsec{padding:78px 16px 84px} /* footer fully stacks */ .foot{grid-template-columns:1fr;gap:22px} footer.big .foot{grid-template-columns:1fr;gap:22px} .foot-b{flex-direction:column;align-items:flex-start;gap:10px} /* stat band 1-col */ .stats .wrap{grid-template-columns:1fr;gap:24px} /* email capture stack */ .capture{flex-direction:column} .capture input,.capture .btn{width:100%;min-width:0} /* fluid font caps so a single long word never forces overflow */ .hh{font-size:clamp(40px,12.5vw,68px)} .pagehero h1{font-size:clamp(32px,9.5vw,52px)} .state h2,.beamsec h2{font-size:clamp(26px,8vw,40px)} .bn{font-size:clamp(46px,17vw,90px)} /* card paddings ease */ .pc,.fcard,.tcard,.wcard,.acard,.formcard{padding:22px 18px} /* feature row */ .frow{padding:18px 2px} .frow h3{font-size:clamp(22px,7vw,30px)} /* tap target floors on links */ .mega-item{padding:14px} .fq button{font-size:17px;padding:22px 36px 22px 0} /* tables shrink slightly */ .btab,.ptbl,.cmp-tbl{font-size:13px} /* hero CTAs stack full-width */ .hero .cta,.pagehero .cta,.ctaband .cta{flex-direction:column;align-items:stretch} .hero .cta .btn,.pagehero .cta .btn,.ctaband .cta .btn{justify-content:center;width:100%} /* defensive: any explicit pixel width on hero/pagehero artwork shrinks */ .hero img,.pagehero img,.fcard .iso svg{max-width:100%;height:auto} } /* ≤360 — small phone (iPhone SE / Android Mini). Last-mile safety. */ @media(max-width:360px){ .wrap{padding:0 14px} .nav .wrap{height:58px} .brand{font-size:16.5px} .brand .mk{width:22px;height:22px} .hh{font-size:clamp(36px,13vw,58px)} .pagehero h1{font-size:clamp(28px,10vw,44px)} .state h2{font-size:clamp(24px,8.5vw,34px)} .bn{font-size:clamp(40px,17vw,72px)} .pc,.fcard,.tcard,.wcard,.acard,.formcard,.authcard{padding:20px 16px} /* keep type readable at 320 */ body{font-size:14.5px} .chip-mono,.tc-note,.eb,.meta{font-size:12.5px} /* dense pricing list / li padding */ .pc li{padding:8px 0;font-size:13.5px} /* tighten frow further */ .frow h3{font-size:clamp(20px,7.4vw,26px)} .tile{width:48px;height:48px} .tile svg{width:22px;height:22px} /* defensive: shrink any 11px micro-labels further (legibility floor 11.5) */ .blbl{font-size:11.5px;letter-spacing:.08em} /* hero animations on extra-small respect reduced motion best — no forced override here */ } /* GLOBAL DEFENSIVE — applies at every viewport. Anything with an explicit fixed pixel width that didn't get a media-query rule still can't force the document to scroll horizontally. */ img,video,svg,iframe,embed{max-width:100%;height:auto}