:root{ --blue:#1666ED; --blue-bright:#2D7BFF; --sky:#00B4FF; --cyan:#00D1FF; --violet:#7C8CFF; --ink:#0B1220; --muted:#5B6470; --line:#ECEFF5; --soft:#F5F8FD; --soft2:#EAF1FE; --grad:linear-gradient(125deg,#1666ED 0%,#2D7BFF 50%,#00B4FF 100%); --grad2:linear-gradient(100deg,#2D7BFF,#00D1FF); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:hidden} .mono{font-family:'Geist Mono',monospace}.it{font-style:italic} a{text-decoration:none;color:inherit} .wrap{max-width:1180px;margin:0 auto;padding:0 28px} .grad-text{background:var(--grad2);-webkit-background-clip:text;background-clip:text;color:transparent} /* text-align and balance: a label that wraps (the Spanish ones do, on a small phone) stays centred in the pill and splits evenly instead of hugging its left edge. */ .btn{display:inline-flex;align-items:center;gap:8px;background:var(--blue);color:#fff;border:none;border-radius:999px; padding:15px 28px;font-weight:800;font-size:15.5px;font-family:inherit;cursor:pointer;text-align:center;text-wrap:balance;transition:transform .18s,box-shadow .18s;box-shadow:0 12px 30px -10px rgba(22,102,237,.6)} .btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 20px 44px -12px rgba(22,102,237,.8)} .btn.white{background:#fff;color:var(--blue)}.btn.white:hover{box-shadow:0 20px 44px -12px rgba(0,0,0,.3)} .btn.ghost-w{background:rgba(255,255,255,.14);color:#fff;box-shadow:none;backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.35)} .btn.sm{padding:12px 20px;font-size:14px} /* topbar */ .topbar{background:var(--ink);color:#cfe0ff;font-size:13px;font-weight:600;text-align:center;padding:8px 16px;display:flex;justify-content:center;gap:18px;flex-wrap:wrap} .topbar a{color:#fff}.topbar .es{background:rgba(255,255,255,.12);padding:2px 10px;border-radius:999px} /* NAV */ /* top:0, not top:37px. The 37 was there to clear the topbar. But nav is absolute and its offset parent is the header underneath — .subhero, .pay, .gh — and that header already begins below the topbar. So the topbar's height was being counted twice, and the 37px it reserved a second time showed up as a band of empty navy between the topbar and the menu on every page that uses this file: auto, home, commercial, contact, /pay and /pay/guide. Nothing else changes. Under 900px the topbar is hidden and nav is fixed at top:0 already, so this only ever affected desktop. */ nav{position:absolute;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:20px 28px} nav .logo{height:30px;filter:brightness(0) invert(1)} .links a{color:rgba(255,255,255,.92);font-weight:700;font-size:14.5px;transition:opacity .15s}.links a:hover{opacity:.7} .nav-cta{display:flex;gap:14px;align-items:center}.signin{color:#fff;font-weight:700;font-size:14.5px} /* The horizontal link row is gone at every width — the panel is the menu. Kept as a rule rather than deleted so any page still carrying the markup hides it instead of printing a bare list of links under the logo. */ .links{display:none} @media(max-width:960px){.topbar{font-size:12px;gap:12px}} /* ---- the menu panel ---- A panel that comes in from the right rather than a sheet that drops from the top, and the same panel at every width — one menu to maintain instead of a desktop bar plus a phone drawer that drift apart. Full width on a phone, a little over half the screen on a laptop, with the photograph still visible beside it so it reads as a layer over the page and not as a different page. */ /* ---- the menu panel ---- A panel that comes in from the right rather than a sheet that drops from the top, and the same panel at every width — one menu to maintain instead of a desktop bar plus a phone drawer that drift apart. Full width on a phone, a little over half the screen on a laptop, with the photograph still visible beside it so it reads as a layer over the page and not as a different page. */ /* ---- the menu panel ---- A panel that comes in from the right rather than a sheet that drops from the top, and the same panel at every width — one menu to maintain instead of a desktop bar plus a phone drawer that drift apart. Full width on a phone, a little over half the screen on a laptop, with the photograph still visible beside it so it reads as a layer over the page and not as a different page. */ /* Above the nav, not below it. header nav is z-index:70, so at 59/60 the panel opened *underneath* the hamburger — and the panel's close button lands in exactly the corner the hamburger occupies, so the X was unclickable and the burger was painting on top of an open menu. Found by a click that timed out, not by looking at it. */ /* The panel carries its own palette. It has to. assets/styles.css defines --ink/--muted/--line/--soft and no --navy, --ice or --ice2 at all; shell.py defines a third set. Written against the host's tokens the same rules produced white text on white on eleven pages, silently, because an undefined custom property does not error — it just yields nothing and the colour is inherited. Prefixed --m* so nothing here can collide with a host token of the same name, and set on .drawer and .scrim rather than :root so the panel cannot leak its palette into the page it is sitting on. */ .scrim,.drawer{--mnavy:#0A2148;--mblue:#1666ED;--mblue-d:#0F4FBF; --mice:#EFF5FF;--mice2:#DCEAFF;--mline:#E5EBF6;--mmuted:#5C6A80; --mgrad:linear-gradient(115deg,#1666ED,#00C2FF)} .scrim{position:fixed;inset:0;z-index:79;background:rgba(4,10,24,.55); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s} .scrim.on{opacity:1;visibility:visible} .drawer{position:fixed;top:0;right:0;bottom:0;z-index:80;width:min(100%,560px); background:#fff;display:flex;flex-direction:column;overflow-y:auto; padding:22px 26px 30px;transform:translateX(101%); transition:transform .38s cubic-bezier(.2,.8,.2,1);visibility:hidden; text-align:left;box-shadow:-30px 0 70px -30px rgba(4,10,24,.5)} .drawer.on{transform:none;visibility:visible} body.locked{overflow:hidden} .dtop{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-bottom:26px} /* On a phone the switch, the quote button and the close button do not fit on one line (see tools/menu.py): the quote button takes a line of its own. */ @media(max-width:439.98px){ .dtop{flex-wrap:wrap;row-gap:14px} .dtop .dcta{order:3;flex:1 1 100%} } .dcta{display:inline-flex;align-items:center;justify-content:center; background:var(--mgrad);color:#fff;border-radius:99px;padding:13px 24px; font-size:14.5px;font-weight:800;text-decoration:none;white-space:nowrap; box-shadow:0 12px 24px -12px rgba(22,102,237,.9)} .dcta:hover{text-decoration:none;filter:brightness(1.05)} .dclose{width:44px;height:44px;flex:0 0 auto;border-radius:99px;border:1.5px solid var(--mline); background:#fff;color:var(--mnavy);font-size:20px;line-height:1;cursor:pointer; display:grid;place-items:center;transition:background .16s,border-color .16s} .dclose:hover{background:var(--mice);border-color:#CFE0F8} /* The three products, at the size of the decision they are. */ /* Everything in here is pinned to static on purpose. The panel is dropped into three stylesheets that all style bare elements. It used a