/* ab-chrome · the ONE nav / footer / cookie layer for every appbrew.com v2 page (web.md §4 C1, C15, C23). Loaded in each page's after the page's own CSS. Footer and cookie use their own class namespaces (.abf-*, .abc-*) so no page stylesheet can restyle them. Nav rules only touch the shared Webflow Navbar instance on pages that load this file — the component definition is not edited, so production pages are unaffected. Values: milo-v2 as measured 28 Sep 2026, plus the six decisions settled that day (Doppio + Inter only, fixed CTA pair, 1200 column, 24 phone gutter, cookie bottom-left, composer glass). */ :root{ --abx-cream:#FAF8F5; --abx-canvas:#F0EBE2; --abx-ink:#231B10; --abx-ink-74:rgba(35,27,16,.74); --abx-ink-69:rgba(35,27,16,.69); --abx-ink-66:rgba(35,27,16,.66); --abx-rule:rgba(35,27,16,.14); --abx-rule-soft:rgba(35,27,16,.09); --abx-blue:#0033A0; --abx-blue-950:#062265; --abx-ease:cubic-bezier(.16,1,.3,1); --abx-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --abx-dop:'Doppio','Inter',system-ui,sans-serif; --abx-col:1200px; --abx-gutter:40px; /* the one glass: milo-v2's composer body with cofounder's rim */ --abx-glass:linear-gradient(180deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.92) 100%); --abx-glass-filter:blur(30px) saturate(1.35); --abx-glass-rim:inset 0 1px 0 rgba(255,255,255,.98),inset 0 -1px 0 rgba(35,27,16,.05); --abx-lift:0 14px 40px rgba(35,27,16,.12); } @media (max-width:991px){:root{--abx-gutter:40px}} @media (max-width:767px){:root{--abx-gutter:24px}} /* ── C1 · nav: one column, one CTA size ───────────────────────────────────────── The component's container is already 1200 at x120; its own 12/4px inner padding pushed the logo to x132 and the CTAs to 1316. Zero it so the bar meets the content column on both edges. */ html body .navbar_component .navbar_container{padding-left:0;padding-right:0} @media (min-width:992px){ html body .navbar_component .navbar_left-wrapper .button{box-sizing:border-box;min-height:42px;height:42px;padding:0 18px;font-size:13.5px;line-height:1;display:inline-flex;align-items:center} html body .navbar_component .navbar_left-wrapper .button *{font-size:13.5px;line-height:1} } @media (max-width:991px){ html body .navbar_component{padding-left:var(--abx-gutter);padding-right:var(--abx-gutter)} html body .navbar_component .navbar_left-wrapper .button.is-navbar{box-sizing:border-box;min-height:44px;height:44px;padding:0 16px;font-size:15px;line-height:1;display:inline-flex;align-items:center} html body .navbar_component .navbar_left-wrapper .button.is-navbar *{font-size:15px;line-height:1} } /* link ink: the component's #363A48 is a cool grey on a warm page */ html body .navbar_component .navbar_menu-links > .navbar_menu-dropdown > .navbar_dropdown-toggle, html body .navbar_component .navbar_menu-links > a{color:var(--abx-ink-74);transition:color .2s var(--abx-ease)} html body .navbar_component .navbar_menu-links > .navbar_menu-dropdown > .navbar_dropdown-toggle:hover, html body .navbar_component .navbar_menu-links > a:hover{color:var(--abx-ink)} /* ── C15 · footer: milo-v2's measured anatomy ─────────────────────────────────── */ .abf{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;padding:64px var(--abx-gutter) 0;background:var(--abx-canvas);color:var(--abx-ink-66);font:400 15px/24px var(--abx-sans);-webkit-font-smoothing:antialiased;text-align:left} .abf *,.abf *::before,.abf *::after{box-sizing:border-box} .abf :where(h4,p,ul,li){margin:0;padding:0;list-style:none} .abf-in{width:100%;max-width:var(--abx-col);display:flex;flex-direction:column} .abf-top{display:grid;grid-template-columns:1.5fr;grid-auto-flow:column;grid-auto-columns:1fr;gap:40px 28px;padding-bottom:44px;border-bottom:1px solid var(--abx-rule-soft)} .abf-mark,.abf-mark a{color:var(--abx-ink)} .abf-wm{display:block;height:26px;width:auto;aspect-ratio:126/30;background-color:currentColor; -webkit-mask:url('https://cdn.prod.website-files.com/671c75aea252ba8250473e86/6ab6c1c9364bd9c55c216c43_milo-wordmark.svg') no-repeat left center/contain; mask:url('https://cdn.prod.website-files.com/671c75aea252ba8250473e86/6ab6c1c9364bd9c55c216c43_milo-wordmark.svg') no-repeat left center/contain} .abf-tag{margin-top:16px;max-width:274px;font-size:14.5px;line-height:1.55;color:var(--abx-ink-69)} /* micro label — Inter replaces milo-v2's ui-monospace (no mono in the brand, 28 Sep) */ .abf-h{font:500 11.5px/1.6 var(--abx-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--abx-ink-69);margin-bottom:14px} .abf-col ul{display:flex;flex-direction:column;gap:9px} .abf a{text-decoration:none;transition:color .2s var(--abx-ease)} .abf-col a{font-size:14.5px;line-height:1.6;color:var(--abx-ink-74)} .abf-col a:hover,.abf-soc a:hover{color:var(--abx-ink)} .abf-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;padding-top:24px;font-size:13px;line-height:1.6;color:var(--abx-ink-69)} .abf-soc{display:flex;flex-wrap:wrap;gap:16px} .abf-soc a{color:var(--abx-ink-69)} .abf a:focus-visible{outline:2px solid var(--abx-blue);outline-offset:2px;border-radius:2px} .abf-sign{width:100%;margin-top:52px;height:.86em;overflow:hidden;pointer-events:none;user-select:none;white-space:nowrap;text-align:center;font:300 clamp(54px,15.6vw,226px)/.86 var(--abx-dop);letter-spacing:-.035em;color:rgba(35,27,16,.06)} @media (max-width:991px){.abf-top{grid-auto-flow:row;grid-template-columns:repeat(2,1fr);grid-auto-columns:auto;gap:32px}.abf-mark{grid-column:1/-1}} @media (max-width:767px){ .abf{padding:48px var(--abx-gutter) 60px} .abf-h{font-size:12px} .abf-col ul{gap:0} .abf-col a{display:block;padding:7px 0} .abf-bot{flex-direction:column;align-items:flex-start;gap:20px} .abf-sign{margin-top:30px} } /* ── C23 · cookie notice: bottom-left, one line; a bottom sheet on phone ────────── Bottom-right is milo-v2's sound toggle and the Milo rail's dock. */ .abc{position:fixed;left:24px;bottom:24px;z-index:120;display:flex;align-items:center;gap:12px;max-width:min(560px,calc(100vw - 48px));padding:6px 8px 6px 16px;border:1px solid rgba(255,255,255,.6);border-radius:16px; background:var(--abx-glass);-webkit-backdrop-filter:var(--abx-glass-filter);backdrop-filter:var(--abx-glass-filter);box-shadow:var(--abx-glass-rim),var(--abx-lift); color:var(--abx-ink);font:400 15px/1.5 var(--abx-sans);-webkit-font-smoothing:antialiased;opacity:0;transform:translateY(8px);transition:opacity .32s var(--abx-ease),transform .32s var(--abx-ease)} .abc.is-in{opacity:1;transform:none} .abc[hidden]{display:none} .abc *{box-sizing:border-box} .abc p{margin:0} .abc-ico{width:16px;height:16px;flex:0 0 16px;color:var(--abx-ink-69)} .abc-line{white-space:nowrap} .abc a,.abc button{font:inherit;color:var(--abx-blue);background:none;border:0;margin:0;padding:12px 0;cursor:pointer;text-decoration:underline;text-decoration-color:var(--abx-rule);text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color .2s var(--abx-ease),color .2s var(--abx-ease)} .abc a:hover,.abc button:hover{text-decoration-color:currentColor} .abc a:focus-visible,.abc button:focus-visible{outline:2px solid var(--abx-blue);outline-offset:2px;border-radius:4px} .abc .abc-acts{display:flex;align-items:center;gap:8px;margin-left:8px;white-space:nowrap} .abc-acts button[data-choice="declined"]{color:var(--abx-ink-69)} .abc-acts button[data-choice="accepted"]{font-weight:500} .abc-slash{color:var(--abx-ink-69)} @media (max-width:767px){ .abc{left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));max-width:none;flex-wrap:wrap;gap:0 12px;padding:8px 16px} .abc-line{white-space:normal;flex:1 1 220px} .abc .abc-acts{margin-left:28px} /* milo-v2's sound toggle shares the corner on phone: step it aside while the notice is up */ html.abc-open .snd{opacity:0;pointer-events:none} } @media (prefers-reduced-motion:reduce){.abc{transition:none;transform:none}} /* legacy page-owned copies, retired. Hidden from first paint; chrome.js then removes them and moves the Footer v2 component into the old footer's slot. Page builds stop emitting them. */ footer.foot,aside.cookie[data-block="cookie"]{display:none!important} .navbar_component ~ * header.nav,.navbar_component ~ header.nav{display:none!important} /* hardening (28 Sep, found live): page stylesheets that zero p/h4/ul margins at higher specificity (pricing's did) must not reach the footer's own spacing. */ footer.abf .abf-tag{margin:16px 0 0} footer.abf .abf-h{margin:0 0 14px} footer.abf ul,footer.abf li{margin:0;padding:0;list-style:none}