/* PlanWatch "Site Plan" chrome: the floating pill header and the footer.
   Shared by the rebuilt marketing pages and every other public page, so the site reads as one thing.
   Everything is scoped under .nav / .footer, because the older Tailwind pages load this file too
   and must not inherit the marketing reset. Needs tokens.css and audience-switch.css. */

/* Scoped reset and type for the chrome only */
.nav, .footer { font-family: var(--font-sans); letter-spacing: var(--track-ui); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.5; }
.nav *, .nav *::before, .nav *::after, .footer *, .footer *::before, .footer *::after { box-sizing: border-box; }
.nav a, .footer a { color: inherit; text-decoration: none; }
.nav ul, .footer ul, .nav ol { margin: 0; padding: 0; list-style: none; }
.nav p, .footer p, .footer h4 { margin: 0; }
.nav button { font: inherit; color: inherit; letter-spacing: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
.nav svg, .footer svg { display: block; max-width: 100%; }
.nav :focus-visible, .footer :focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
.nav .sr-only, .footer .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.nav .sm-only { display: none; }
@media (max-width: 600px) { .nav .lg-only { display: none; } .nav .sm-only { display: inline; } }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 10px; background: #111214; color: #fff; font: 600 15px/1 var(--font-sans); text-decoration: none; transition: top .15s; }
.skip-link:focus { top: 12px; }

/* Buttons inside the chrome (pages have their own .btn in base.css; these are scoped so older pages are untouched) */
.nav .btn, .footer .btn {
  --h: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--h); padding: 0 22px; border-radius: 999px;
  background: var(--ink); color: var(--paper); font-weight: 600; font-size: 16px; line-height: 1; white-space: nowrap; letter-spacing: -0.01em;
  transition: background-color var(--dur-instant) var(--ease-out), transform var(--dur-instant) var(--ease-out);
}
.nav .btn:hover, .footer .btn:hover { background: color-mix(in srgb, var(--ink) 86%, var(--paper)); }
.nav .btn:active { transform: translateY(1px); }
.nav .btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-2); }
.nav .btn--ghost:hover { background: var(--paper-2); }
.nav .btn--sm { --h: 38px; padding: 0 16px; font-size: 14px; }

/* Older pages: the fixed pill floats over the page, so the page starts below it */
.nav-spacer { height: var(--nav-clear); }

/* ---------- Nav: a floating pill, inset from the top and the edges, fixed while you scroll ----------
   Three zones (Ben, 18 Oct): the logo left, the audience switch centred in the pill, the actions right. The two
   side columns are equal, so the switch sits on the pill's centre line. The page links live in the menu. */
:root { --nav-h: 60px; --nav-top: 14px; --nav-clear: calc(var(--nav-h) + var(--nav-top) * 2); }
.nav { position: fixed; top: var(--nav-top); left: 0; right: 0; z-index: 100; pointer-events: none; }
.nav > .wrap {
  --pad-l: 20px; --pad-r: 8px;
  pointer-events: auto; position: relative; width: calc(100% - 28px); max-width: 1180px; height: var(--nav-h); margin: 0 auto; padding: 0 var(--pad-r) 0 var(--pad-l);
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: saturate(1.7) blur(18px); backdrop-filter: saturate(1.7) blur(18px);
  box-shadow: 0 0 0 1px rgba(17, 18, 20, .07), 0 12px 32px -14px rgba(17, 18, 20, .28);
  transition: background-color var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out), transform var(--dur-quick) var(--ease-out);
}
.nav.is-scrolled > .wrap { background: rgba(255, 255, 255, .86); box-shadow: 0 0 0 1px rgba(17, 18, 20, .08), 0 18px 44px -16px rgba(17, 18, 20, .34); }
.nav .btn { border-radius: 999px; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; justify-self: start; }
.brand svg { width: 26px; height: 26px; }
.brand b { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.03em; line-height: 1; }
.brand .brand-tag { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
  padding: 4px 7px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--rule-2); margin-left: 2px; }
.nav-right { justify-self: end; display: flex; align-items: center; gap: 8px; }
.nav-right .quiet { font-size: 15px; color: var(--ink-2); padding: 0 8px; }
.nav-right .quiet:hover { color: var(--ink); }
/* "Log in / Sign up" where the pill has room for it; "Log in" where it does not */
@media (max-width: 1023px) { .nav-login-more { display: none; } }
.nav-burger { display: inline-flex; flex: none; width: 42px; height: 42px; border-radius: 999px; align-items: center; justify-content: center; background: rgba(17, 18, 20, .06); transition: background-color var(--dur-instant) var(--ease-out); }
.nav-burger:hover { background: rgba(17, 18, 20, .1); }
.nav-burger path { transition: transform var(--dur-quick) var(--ease-out); transform-origin: 8px 8px; }
.nav-burger[aria-expanded="true"] .b1 { transform: translateY(2.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .b2 { transform: translateY(-2.5px) rotate(-45deg); }
/* The menu: a solid panel that slides in from the right over a scrim (Ben, 18 Oct: the old frosted card let the
   page show through). Fixed to the viewport, so it sits outside the pill's .wrap, whose backdrop-filter would
   otherwise trap it. chrome.js toggles .menu-open on .nav, locks the page's scroll and keeps focus inside. */
.nav-scrim { position: fixed; inset: 0; pointer-events: auto; background: rgba(17, 18, 20, .46); opacity: 0; transition: opacity var(--dur-enter) var(--ease-out); }
.nav-menu {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, calc(100% - 44px)); pointer-events: auto;
  display: flex; flex-direction: column; background: var(--sheet, #fff); color: var(--ink);
  box-shadow: -1px 0 0 var(--rule), -24px 0 60px -24px rgba(17, 18, 20, .38);
  transform: translateX(100%); visibility: hidden;
  transition: transform var(--dur-enter) var(--ease-out), visibility 0s linear var(--dur-enter);
}
.nav-menu:focus { outline: none; }
.nav.menu-open .nav-scrim { opacity: 1; }
.nav.menu-open .nav-menu { transform: none; visibility: visible; transition: transform var(--dur-enter) var(--ease-out), visibility 0s; }
.nav-menu[hidden], .nav-scrim[hidden] { display: none; }
.nav-menu-head { display: flex; align-items: center; justify-content: space-between; flex: none; height: calc(var(--nav-h) + var(--nav-top) * 2); padding: 0 16px 0 24px; padding-top: env(safe-area-inset-top, 0px); }
.nav-menu-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.nav-menu-close { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: var(--paper-2); color: var(--ink); transition: background-color var(--dur-instant) var(--ease-out); }
.nav-menu-close:hover { background: var(--paper-3); }
.nav-menu-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px calc(24px + env(safe-area-inset-bottom, 0px)); display: grid; align-content: start; gap: 18px; }
/* Log in / Sign up leads the menu */
.nav-menu-auth { display: grid; gap: 10px; padding: 18px 16px 16px; border-radius: var(--r-lg, 20px); background: var(--paper-2); }
.nav-menu-kicker { font-size: 13px; font-weight: 600; color: var(--ink-3); letter-spacing: var(--track-label); text-transform: uppercase; }
.nav-menu-auth .pw-google { box-shadow: inset 0 0 0 1px var(--rule-2); }
.nav-menu-auth .pw-google:hover { background: var(--paper); }
.nav-menu-email svg { color: var(--ink-2); }
.nav-menu-auth .btn { width: 100%; border-radius: var(--r-btn, 12px); }
.nav-menu-trade { display: inline-flex; align-items: center; gap: 6px; justify-self: center; min-height: 36px; padding: 0 6px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.nav-menu-trade:hover { color: var(--ink); }
.nav-menu-trade svg { transition: transform var(--dur-instant) var(--ease-out); }
.nav-menu-trade:hover svg { transform: translateX(2px); }
.nav-menu-alt { text-align: center; font-size: 14px; color: var(--ink-3); }
.nav-menu-alt a { color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule-2); }
.nav-menu-links { display: grid; }
.nav-menu-links a { display: flex; align-items: center; min-height: 52px; padding: 0 12px; border-radius: 14px; font-size: 18px; font-weight: 500; color: var(--ink); }
.nav-menu-links a:hover { background: var(--paper-2); }
.nav-menu-ctas { display: grid; gap: 8px; }
.nav-menu-ctas .btn { width: 100%; --h: 52px; border-radius: var(--r-btn, 12px); }
/* The page under the open menu stays put. --nav-sbw keeps the layout from jumping where scrollbars take space. */
html.nav-locked, html.nav-locked body { overflow: hidden !important; }
html.nav-locked body { padding-right: var(--nav-sbw, 0px); }
@media (prefers-reduced-motion: reduce) {
  .nav-menu, .nav.menu-open .nav-menu { transform: none; transition: opacity var(--dur-quick, 1ms) linear, visibility 0s; opacity: 0; }
  .nav.menu-open .nav-menu { opacity: 1; }
  .nav-scrim { transition: none; }
}
@media (max-width: 960px) {
  :root { --nav-h: 54px; --nav-top: 10px; }
  .nav > .wrap { width: calc(100% - 20px); --pad-l: 14px; --pad-r: 6px; gap: 10px; }
  .nav-right .quiet, .nav-right .btn--ghost { display: none; }
}
@media (max-width: 480px) {
  .nav-right .btn { --h: 40px; padding: 0 14px; font-size: 14px; }
  .brand .brand-tag { display: none; }
}

/* ---------- The audience switch in the pill ----------
   Centred, with equal halves and real padding (Ben, 18 Oct: it looked squashed). The component's own breakpoints
   pick the words: "For homes | For business" from 1200 px, "Homes | Business" from 700, icons below.
   Phones keep a 44 px track and 52 px per side. */
/* The pill's padding is wider on the logo side, so the switch steps back by half the difference to sit on the
   pill's true centre line rather than the content box's. */
.nav .pw-aud { justify-self: center; margin-left: calc(var(--pad-r) - var(--pad-l)); }
.nav .pw-aud:not(.pw-aud--menu) { --aud-h: 44px; --aud-in: 4px; --aud-ico: 26px; --aud-gap: 7px; --aud-pl: 12px; --aud-pr: 20px; --aud-fs: 15px; }
@media (max-width: 1199px) { .nav .pw-aud:not(.pw-aud--menu) { --aud-pr: 18px; } }
@media (max-width: 699px) { .nav .pw-aud:not(.pw-aud--menu) { --aud-ico: 26px; --aud-pl: 13px; --aud-pr: 13px; } .nav .pw-aud:not(.pw-aud--menu) .pw-aud-opt { min-width: 52px; } }
.nav-right .quiet, .brand { white-space: nowrap; }
@media (max-width: 389px) { .nav .pw-aud:not(.pw-aud--menu) { --aud-pl: 10px; --aud-pr: 10px; } .nav .pw-aud:not(.pw-aud--menu) .pw-aud-opt { min-width: 46px; } }
/* Phones and small tablets: the call to action's short form, so the right zone fits beside the centred switch */
@media (max-width: 767px) { .nav-right .btn .lg-only { display: none; } .nav-right .btn .sm-only { display: inline; } }
/* /for-trades, tablet: the short call to action */
@media (max-width: 820px) { .page-trades .nav-right .btn .lg-only { display: none; } .page-trades .nav-right .btn .sm-only { display: inline; } }
/* The smallest phones: the call to action becomes its icon, the logo mark stays. The words stay for screen readers. */
.nav-right .btn .btn-ico { display: none; }
@media (max-width: 389px) {
  .page-trades .nav-right .btn .sm-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .page-trades .nav-right .btn .btn-ico { display: block; }
  .page-trades .nav-right .btn { width: 42px; padding: 0; }
}
/* Phones below 440 px: the call to action is its icon, so the switch can stay centred and wide (see the end of this section) */
@media (max-width: 439px) {
  .nav-right .btn .sm-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .nav-right .btn .btn-ico { display: block; }
  .nav-right .btn { width: 42px; padding: 0; }
}
@media (max-width: 400px) {
  .nav > .wrap { --pad-l: 12px; gap: 8px; }
  .brand { gap: 7px; }
  .brand b { font-size: 18px; }
  .nav-right { gap: 6px; }
  .nav-right .btn { padding: 0 12px; }
  .nav-burger { width: 40px; height: 40px; }
}
@media (max-width: 389px) { .nav > .wrap { gap: 6px; } }
@media (max-width: 339px) { .nav > .wrap { gap: 5px; --pad-l: 10px; } .nav-burger { width: 38px; height: 38px; } }
/* Phones, measured at 320-439 px. The switch stays on the pill's centre line from 360 px up: the wordmark steps down to
   17 px (16.5 px with the smaller mark below 375 px) so the logo column fits beside it. Below 360 px a centred switch
   would overlap the wordmark, so logo, switch and actions are spaced evenly instead. The halves are 52 px, 46 px below
   390 px, and the earlier 40 px at 320-339 px, the most the pill can hold there beside the logo and both buttons. */
@media (max-width: 439px) { .brand { gap: 7px; } .brand b { font-size: 17px; } }
@media (max-width: 374px) { .brand { gap: 5px; } .brand svg { width: 22px; height: 22px; } .brand b { font-size: 16.5px; } }
@media (max-width: 359px) {
  .nav > .wrap { display: flex; justify-content: space-between; }
  .nav .pw-aud { margin-left: 0; }
}
@media (max-width: 339px) { .nav .pw-aud:not(.pw-aud--menu) { --aud-ico: 25px; --aud-pl: 7px; --aud-pr: 7px; } .nav .pw-aud:not(.pw-aud--menu) .pw-aud-opt { min-width: 40px; } }

/* ---------- The pill in dark: a smoked-glass pill, so the wordmark, mark and links stay light on dark ---------- */
:root[data-theme="dark"] .nav > .wrap { background: rgba(24, 26, 30, .74); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 14px 36px -14px rgba(0, 0, 0, .7); }
:root[data-theme="dark"] .nav.is-scrolled > .wrap { background: rgba(24, 26, 30, .88); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 18px 44px -16px rgba(0, 0, 0, .8); }
:root[data-theme="dark"] .nav-burger { background: rgba(255, 255, 255, .08); }
:root[data-theme="dark"] .nav-menu { box-shadow: -1px 0 0 var(--rule), -24px 0 60px -24px rgba(0, 0, 0, .8); }
:root[data-theme="dark"] .nav-scrim { background: rgba(0, 0, 0, .6); }


/* ---------- Footer ---------- */
.footer { background: var(--paper-2); border-top: 1px solid var(--rule); padding: 72px 0 40px; font-size: 14px; color: var(--ink-2); }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 40px; }
.footer h4 { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 14px; }
.footer li + li { margin-top: 9px; }
.footer a:hover { color: var(--ink); }
.footer-base { display: flex; flex-wrap: wrap; gap: 16px 28px; justify-content: space-between; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--rule); color: var(--ink-3); font-size: 13px; }
@media (max-width: 1080px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } .footer-grid > :first-child { grid-column: 1 / -1; } }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; } }
.footer h4.footer-h4-gap { margin-top: 28px; }
.footer .footer-legal { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.footer a { overflow-wrap: anywhere; }

.footer > .wrap { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.footer .brand { color: var(--ink); }
.footer .footer-legal { margin-top: 18px; max-width: 36ch; }

/* Older pages sit in a padded card (body.p-2 > main); their footer runs full width under it */
body.p-2 > .footer { margin: 16px -0.5rem -0.5rem; }

/* The business pill carries two calls to action: "Log in" steps out of the bar (it leads the menu, and stays in the
   page's price section), and below 1200 px the patch call to action takes its short form. */
.nav--trade .nav-right .quiet { display: none; }
@media (max-width: 1199px) { .nav--trade .nav-right .btn .lg-only { display: none; } .nav--trade .nav-right .btn .sm-only { display: inline; } }
/* Business pill on phones: the call to action is its pin icon below 441 px (the words stay for screen readers) */
@media (max-width: 440px) {
  .nav--trade .nav-right .btn .sm-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .nav--trade .nav-right .btn .btn-ico { display: block; }
  .nav--trade .nav-right .btn { width: 42px; padding: 0; }
}

/* ---------- Sign-in: "Continue with Google", the "or" rule, the welcome note (public/site/js/auth.js) ----------
   Self-contained (no .btn), because pages that only load the chrome use them too. */
.pw-google {
  --h: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  height: var(--h); padding: 0 20px; border-radius: var(--r-btn, 12px);
  background: var(--sheet, #fff); color: var(--ink, #111214); box-shadow: inset 0 0 0 1px var(--rule-2, #D5D1C7);
  font: 600 16px/1 var(--font-sans); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-instant, 120ms) var(--ease-out, ease), box-shadow var(--dur-instant, 120ms);
}
.pw-google:hover { background: var(--paper-2, #F7F5F0); box-shadow: inset 0 0 0 1px var(--ink-4, #B8B5AE); }
.pw-google:active { transform: translateY(1px); }
.pw-google:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--ink-4, #B8B5AE), var(--focus); }
.pw-google svg { width: 18px; height: 18px; flex: none; }
.pw-google--lg { --h: 56px; font-size: 17px; border-radius: 14px; }
.pw-google--sm { --h: 40px; font-size: 14.5px; border-radius: 10px; }
.pw-google[hidden], [data-pw-google-wrap][hidden] { display: none; }
.pw-or { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: var(--ink-3, #6B6F77); font-size: 13px; }
.pw-or::before, .pw-or::after { content: ""; flex: 1; height: 1px; background: var(--rule, #E7E4DD); }
/* Under the Demand Radar claim form's Email label (views/for-trades/_google-claim.ejs) */
.pc-google { margin: 6px 0 2px; }
.pc-google .pw-or { margin: 10px 0 0; }

.pw-hello {
  position: fixed; left: 50%; bottom: 24px; z-index: 10001;
  display: flex; align-items: center; gap: 12px; width: min(560px, calc(100% - 32px));
  padding: 12px 12px 12px 16px; border-radius: 16px;
  background: var(--sheet, #fff); color: var(--ink-2, #3F434A); box-shadow: 0 0 0 1px var(--rule, #E7E4DD), 0 24px 48px -20px rgba(17, 18, 20, .35);
  font: 400 15px/1.4 var(--font-sans);
  transform: translate(-50%, 16px); opacity: 0; transition: transform 320ms var(--ease-out, ease), opacity 240ms var(--ease-out, ease);
}
.pw-hello.on { transform: translate(-50%, 0); opacity: 1; }
.pw-hello b { color: var(--ink, #111214); font-weight: 600; }
.pw-hello-tick { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--amber-field, #FFBE3B); }
.pw-hello-tick svg { width: 16px; height: 16px; fill: none; stroke: #111214; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pw-hello-copy { flex: 1; margin: 0; }
.pw-hello-actions { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.pw-hello-btn { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 10px; background: var(--ink, #111214); color: var(--paper, #fff); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; }
.pw-hello-btn:hover { background: color-mix(in srgb, var(--ink, #111214) 86%, var(--paper, #fff)); }
.pw-hello-close { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-3, #6B6F77); cursor: pointer; }
.pw-hello-close:hover { background: var(--paper-2, #F7F5F0); color: var(--ink, #111214); }
.pw-hello-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 560px) {
  .pw-hello { flex-wrap: wrap; bottom: 16px; }
  .pw-hello-copy { flex: 1 1 calc(100% - 42px); }
  .pw-hello-actions { width: 100%; justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) { .pw-hello { transition: none; } }

/* ---------- Desktop (Ben, 18 Oct): the switch beside the logo, then the page links, the actions right ----------
   The centred three-zone grid above is for phones and tablets only; here the bar is a row again and the menu is not used. */
.nav-links { display: none; font-size: 15px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.nav-links a { transition: color var(--dur-instant); }
.nav-links a:hover { color: var(--ink); }
@media (min-width: 961px) {
  .nav > .wrap { display: flex; gap: 24px; }
  .nav .pw-aud { justify-self: auto; margin-left: -8px; }
  .nav-links { display: flex; gap: 22px; }
  .nav-right { margin-left: auto; }
  .nav-burger, .nav-menu, .nav-scrim { display: none !important; }
}
@media (min-width: 961px) and (max-width: 1199px) {
  .nav > .wrap { gap: 16px; }
  .nav-links { gap: 14px; }
  /* Room for the links: the switch shows its icons here; the words stay for screen readers */
  .nav .pw-aud:not(.pw-aud--menu) { --aud-pl: 8px; --aud-pr: 8px; }
  .nav .pw-aud:not(.pw-aud--menu) .pw-aud-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
/* Desktop has no menu, so the business bar shows its Log in again */
@media (min-width: 961px) { .nav--trade .nav-right .quiet { display: inline; } }