/* Shared site header + footer — used on every page for consistent UX */ html{overflow-x:clip;max-width:100%} body{overflow-x:clip;max-width:100%;width:100%} /* Adaptive nav: light by default, .on-dark when scrolled over a dark section */ .site-nav{position:sticky;top:0;z-index:100;height:66px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 28px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid #ECECEE;transition:background .25s ease,border-color .25s ease;min-width:0} .site-nav .brand{display:flex;align-items:center;text-decoration:none;flex-shrink:1;min-width:0} .site-nav .brand .logo-lockup{height:25px;width:auto;display:block;filter:none;transition:filter .25s ease} .site-nav .links--desktop{display:flex;gap:2px} .site-nav .links--desktop a{font-size:.9rem;font-weight:500;color:#54555A;text-decoration:none;padding:8px 14px;border-radius:999px;transition:background .2s,color .2s} .site-nav .links--desktop a:hover,.site-nav .links--desktop a.active{background:#F1F0ED;color:#0B0B0C} .site-nav .links{display:flex;gap:2px} .site-nav .links a{font-size:.9rem;font-weight:500;color:#54555A;text-decoration:none;padding:8px 14px;border-radius:999px;transition:background .2s,color .2s} .site-nav .links a:hover,.site-nav .links a.active{background:#F1F0ED;color:#0B0B0C} .site-nav .cta{display:inline-flex;align-items:center;gap:7px;background:#FF4500;color:#fff;font-size:.88rem;font-weight:600;padding:10px 18px;border-radius:999px;text-decoration:none;box-shadow:0 6px 18px rgba(255,69,0,.3);transition:background .2s,transform .2s} .site-nav .cta:hover{background:#FF6B35;transform:translateY(-1px)} .site-nav.on-dark{background:#0B0B0C !important;border-bottom-color:rgba(255,255,255,.08) !important;-webkit-backdrop-filter:none;backdrop-filter:none} .site-nav.on-dark .brand .logo-lockup{filter:brightness(0) invert(1)} .site-nav.on-dark .links--desktop a{color:rgba(255,255,255,.72)} .site-nav.on-dark .links--desktop a:hover,.site-nav.on-dark .links--desktop a.active{background:rgba(255,255,255,.1);color:#fff} /* Mobile nav — drawer is portaled to so iOS fixed positioning is reliable */ .site-nav__end{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto} .nav-menu-btn{ display:none; align-items:center; justify-content:center; width:44px; height:44px; padding:0; margin:0; border:1px solid #ECECEE; border-radius:12px; background:#fff; cursor:pointer; flex-shrink:0; -webkit-tap-highlight-color:transparent; transition:background .2s,border-color .2s,transform .2s; } .nav-menu-btn__bar{display:block;width:18px;height:2px;background:#0B0B0C;border-radius:2px;transition:transform .25s ease,opacity .2s ease,margin .25s ease} .nav-menu-btn__bar+.nav-menu-btn__bar{margin-top:5px} .site-nav.on-dark .nav-menu-btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)} .site-nav.on-dark .nav-menu-btn__bar{background:#fff} .site-nav.menu-open .nav-menu-btn__bar:nth-child(1){transform:translateY(7px) rotate(45deg)} .site-nav.menu-open .nav-menu-btn__bar:nth-child(2){opacity:0} .site-nav.menu-open .nav-menu-btn__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .site-nav.menu-open{z-index:1002} .site-nav.menu-open .nav-menu-btn{position:relative;z-index:1003;background:#fff;border-color:#ECECEE} .site-nav.on-dark.menu-open .nav-menu-btn{background:#0B0B0C;border-color:rgba(255,255,255,.2)} .site-nav.on-dark.menu-open .nav-menu-btn__bar{background:#fff} .site-nav__drawer[hidden]{display:none!important} .site-nav__drawer{position:fixed;inset:0;z-index:10000;pointer-events:none;visibility:hidden} .site-nav__drawer.is-visible{pointer-events:auto;visibility:visible} .site-nav__backdrop{position:absolute;inset:0;border:0;padding:0;margin:0;background:rgba(11,11,12,.52);opacity:0;transition:opacity .28s ease;cursor:pointer} .site-nav__drawer.is-visible .site-nav__backdrop{opacity:1} .site-nav__drawer-panel{ position:absolute;top:0;right:0; width:min(340px,90vw); height:100%;height:100dvh;max-height:100dvh; min-height:-webkit-fill-available; background:#fff; border-left:1px solid #ECECEE; box-shadow:-16px 0 48px rgba(11,11,12,.14); padding:0; display:flex;flex-direction:column; transform:translateX(100%); transition:transform .28s cubic-bezier(.16,1,.3,1); overflow:hidden; color:#0B0B0C; } .site-nav__drawer.is-visible .site-nav__drawer-panel{transform:translateX(0)} .site-nav__drawer-head{ display:flex;align-items:center;justify-content:space-between; padding:max(14px,calc(10px + env(safe-area-inset-top))) 18px 12px; flex-shrink:0; border-bottom:1px solid #ECECEE; background:#fff; } .site-nav__drawer-title{font-family:'Sora',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8A8B91} .site-nav__drawer-close{width:40px;height:40px;border:1px solid #E2E2E5;border-radius:10px;background:#F7F6F4;color:#0B0B0C;font-size:1.35rem;line-height:1;cursor:pointer;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent} .site-nav__drawer-body{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:8px 14px 12px; } .site-nav__mobile-links{display:flex;flex-direction:column;gap:2px} .site-nav__mobile-links a{ display:flex;align-items:center; font-family:'Sora',sans-serif; font-size:1.05rem;font-weight:600; color:#0B0B0C!important; text-decoration:none!important; padding:13px 14px; border-radius:12px; border:1px solid transparent; transition:background .2s,color .2s,border-color .2s; } .site-nav__mobile-links a:hover,.site-nav__mobile-links a.active{ background:#FFF2EC; color:#FF4500!important; border-color:rgba(255,69,0,.12); } .site-nav__drawer-foot{ flex-shrink:0; padding:14px 18px max(18px,calc(14px + env(safe-area-inset-bottom))); border-top:1px solid #ECECEE; background:linear-gradient(180deg,#F7F6F4 0%,#fff 100%); } .site-nav__drawer .cta--drawer{ display:flex!important; align-items:center; justify-content:center; width:100%; margin:0; padding:15px 22px; font-family:'Inter',sans-serif; font-size:1rem; font-weight:600; color:#fff!important; text-decoration:none!important; background:#FF4500; border-radius:999px; box-shadow:0 10px 28px -6px rgba(255,69,0,.45); transition:background .2s,transform .2s; } .site-nav__drawer .cta--drawer:active{background:#FF6B35;transform:scale(.98)} html.nav-scroll-lock,html.nav-scroll-lock body{overflow:hidden;height:100%;touch-action:none} /* Beat legacy per-page `nav { … }` rules on legal / article pages */ nav.site-nav{ z-index:100; background:rgba(255,255,255,.82); border-bottom:1px solid #ECECEE; -webkit-backdrop-filter:saturate(180%) blur(16px); backdrop-filter:saturate(180%) blur(16px); } nav.site-nav.on-dark{ background:#0B0B0C!important; border-bottom-color:rgba(255,255,255,.08)!important; -webkit-backdrop-filter:none; backdrop-filter:none; } @media(max-width:760px){ .site-nav{padding:0 16px} .site-nav .brand .logo-lockup{height:22px;max-width:min(148px,42vw)} .site-nav .links--desktop{display:none} .site-nav .cta--nav-bar{display:none} .nav-menu-btn{display:inline-flex;flex-direction:column} } .site-footer{border-top:1px solid rgba(255,255,255,.08);padding:60px 28px 0;background:#0B0B0C} .site-footer .inner{max-width:1200px;margin:0 auto} .site-footer .top{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:40px 48px;margin-bottom:44px} .site-footer .blurb{flex:0 0 38%;max-width:38%;min-width:min(100%,280px)} .site-footer .blurb .brand{display:flex;align-items:center;text-decoration:none} .site-footer .blurb .brand .logo-lockup{height:30px;width:auto;display:block;filter:brightness(0) invert(1)} .site-footer .foot-tagline{margin:18px 0 0;font-size:1.02rem;font-weight:500;line-height:1.55;letter-spacing:-.01em;color:rgba(255,255,255,.72);max-width:22em} .site-footer .foot-usp{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:14px} .site-footer .foot-usp li{position:relative;padding-left:26px;font-size:.92rem;font-weight:500;line-height:1.45;color:rgba(255,255,255,.82)} .site-footer .foot-usp li::before{content:'✓';position:absolute;left:0;top:1px;font-size:.88rem;color:#FF6B35;font-weight:800} .site-footer .cols{flex:1;display:flex;gap:40px 56px;flex-wrap:wrap;justify-content:flex-end;min-width:min(100%,320px)} .site-footer h5{font-family:'Sora',sans-serif;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#fff;margin-bottom:14px} .site-footer .cols a{display:block;font-size:.88rem;color:rgba(255,255,255,.55);text-decoration:none;padding:5px 0;transition:color .2s} .site-footer .cols a:hover{color:#FF6B35} .site-footer .sub-footer{border-top:1px solid rgba(255,255,255,.08);padding:18px 0 22px} .site-footer .sub-foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 20px} .site-footer .sub-foot-copy{margin:0;font-size:.8rem;color:rgba(255,255,255,.48);line-height:1.45} .site-footer .sub-foot-sep{margin:0 .35em;color:rgba(255,255,255,.28)} .site-footer .sub-foot-legal{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px} .site-footer .sub-foot-legal a{font-size:.78rem;font-weight:400;color:rgba(255,255,255,.44);text-decoration:none;transition:color .2s;white-space:nowrap} .site-footer .sub-foot-legal a:hover{color:rgba(255,255,255,.62)} .site-footer .sub-foot-disclaimers{margin-top:12px;max-width:900px} .site-footer .sub-foot-disclaimers p{margin:0;font-size:.72rem;line-height:1.55;color:rgba(255,255,255,.38)} @media(max-width:900px){.site-footer .blurb{flex:1 1 100%;max-width:100%}.site-footer .cols{justify-content:flex-start;gap:36px}} @media(max-width:560px){.site-footer .cols{gap:36px}.site-footer .sub-foot-row{flex-direction:column;align-items:flex-start;gap:10px}} /* Premium markers — shared across marketing pages (no emojis) */ .feat-label{font-family:'Sora',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#FF4500;display:flex;align-items:center;gap:10px} .feat-label::before{content:'';width:20px;height:2px;background:#FF4500;border-radius:2px;flex-shrink:0} .feat-index{font-family:'Sora',sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.08em;color:#FF4500;width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,69,0,.22);background:#FFF2EC;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0} .ui-initial{font-family:'Sora',sans-serif;font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#54555A;line-height:1} .ui-badge{font-family:'Sora',sans-serif;font-size:.58rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8A8B91;background:#F1F0ED;border-radius:6px;padding:4px 6px;flex-shrink:0} .thumb-label{font-family:'Sora',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#FF4500} .frame-label{font-family:'Sora',sans-serif;font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#FF4500}