/* v2 header and footer, shared by every v2 page (views/common/v2/header and footer).
   Taken as is from brand.css of the landing pages, split off base.css so the chrome lives in its own file.
   The account menu, the notice bars and .footer-brand p at the bottom are plus additions the static pages did not need */

/* ---------- Nav ---------- */
/* Liquid glass: mostly transparent, heavy blur, saturation + brightness lift
   so whatever scrolls underneath stays visible but never fights the nav. */
/* Glass bar. No brightness() in the filter: it clipped light content to pure
   white and made the bar read brighter than the page under it. Blur plus a
   white wash only, near-clear at rest and frosted once scrolled. */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.08);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);box-shadow:none;transition:background-color .35s var(--ease),box-shadow .35s var(--ease),backdrop-filter .35s var(--ease)}
.nav.scrolled{background:rgba(255,255,255,.62);backdrop-filter:blur(32px) saturate(170%);-webkit-backdrop-filter:blur(32px) saturate(170%);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 .5px 0 rgba(18,18,18,.05)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav{background:rgba(255,255,255,.90)}
  .nav.scrolled{background:rgba(255,255,255,.94)}
}
.nav-inner{max-width:var(--container);margin:0 auto;padding:0 var(--gutter);height:var(--nav-h);display:flex;align-items:center;gap:8px}
.nav .logo{display:flex;align-items:center;gap:10px;margin-right:16px}
.nav .logo img{height:32px;width:auto}
/* Nav lockup: the You Exec mark, a hairline, then the app mark and its wordmark.
   Mark and wordmark share a height, and the wordmark files keep the original
   artwork's vertical extent, so the two line up exactly as in the full logo. */
.lockup{display:flex;align-items:center;gap:13px;margin-right:16px}
.lockup__part{display:flex;align-items:center;gap:11px}
.lockup .mark,.lockup .lot{width:30px;height:30px;flex:none}
.lockup img{height:30px;width:auto}
.lockup__div{flex:none;width:1px;height:24px;background:var(--border-2);border-radius:1px}
.lockup__ye .mark{opacity:.9;transition:opacity .25s var(--ease)}
.lockup__ye:hover .mark{opacity:1}
.lockup .soon{margin-left:2px}
.lockup__part:hover .mark--anim > g{animation:mark-part .68s cubic-bezier(.22,.86,.28,1) both;animation-delay:var(--d,0ms)}
@media (max-width:760px){.lockup{gap:10px}.lockup img{height:26px}.lockup .mark,.lockup .lot{width:26px;height:26px}}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav-links > a:not(.btn){font-size:14px;font-weight:500;color:var(--ink-2);padding:8px 12px;border-radius:var(--pill);transition:background-color .2s,color .2s}
.nav-links > a:not(.btn):hover{color:var(--ink);background:rgba(18,18,18,.06)}
.nav-links > a.btn{margin-left:8px}
.nav-links .count{font-size:10px;color:var(--muted);vertical-align:super;margin-left:2px}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;padding:8px;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:6px 0;border-radius:2px}
/* Apps menu (nav dropdown) */
.apps{position:relative}
.apps > button{display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;cursor:pointer;font-size:14px;font-weight:500;color:var(--ink-2);padding:8px 12px;border-radius:var(--pill);transition:background-color .2s,color .2s}
.apps > button::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.apps:hover > button,.apps.open > button,.apps:focus-within > button{color:var(--ink);background:rgba(18,18,18,.06)}
.apps.open > button::after,.apps:hover > button::after{transform:rotate(225deg) translateY(-2px)}
.apps-panel{position:absolute;top:calc(100% + 10px);left:auto;right:0;width:330px;max-width:calc(100vw - 48px);padding:10px;background:#fff;border-radius:var(--r);box-shadow:var(--shadow),0 0 0 1px var(--border);display:grid;grid-template-columns:1fr;gap:2px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s var(--ease),transform .25s var(--ease),visibility .2s}
.apps:hover .apps-panel,.apps.open .apps-panel,.apps:focus-within .apps-panel{opacity:1;visibility:visible;transform:none}
.apps-panel a{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:var(--r-sm);transition:background-color .15s}
.apps-panel a:hover{background:var(--bg-soft)}
.apps-panel a.active{background:var(--blue-10)}
.apps-panel .lot{width:34px;height:34px;transition:transform .3s var(--ease)}
.apps-panel .mark{width:34px;height:34px;flex:none;transition:transform .3s var(--ease)}
.apps-panel b{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink)}
.apps-panel span{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.apps-panel .all{grid-column:1/-1;justify-content:center;font-size:13px;font-weight:600;color:var(--blue);padding:13px 10px 5px;margin-top:6px;border-top:1px solid var(--border);border-radius:0}
.apps-panel .all:hover{background:none;color:var(--blue-dark);text-decoration:underline;text-underline-offset:3px}
/* ---------- Footer ---------- */
footer{padding:56px var(--gutter) 40px;border-top:1px solid var(--border)}
.footer-top{display:flex;align-items:flex-start;justify-content:space-between;gap:32px;flex-wrap:wrap}
.footer-brand img{height:28px;width:auto;margin-bottom:12px}
.footer-cols{display:flex;gap:56px;flex-wrap:wrap}
.footer-col{display:flex;flex-direction:column;gap:10px;min-width:120px}
.footer-col b{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:4px}
.footer-col a{font-size:13.5px;color:var(--ink-2);transition:color .15s}
.footer-col a:hover{color:var(--blue)}
.footer-col .soon{margin-left:6px}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:20px;border-top:1px solid var(--border);font-size:12px;color:var(--muted)}
.footer-bottom a{text-decoration:underline;text-underline-offset:2px}

/* Quiet links move a hair toward you */
.footer-col a,.nav-links > a:not(.btn){transition:color .18s var(--ease),background-color .2s var(--ease),transform .2s var(--ease)}
.footer-col a:hover{transform:translateX(2px)}
/* Apps menu: the panel eases open, then the rows arrive one after another */
.apps-panel{transform:translateY(-8px) scale(.985);transform-origin:top right}
.apps:hover .apps-panel,.apps.open .apps-panel,.apps:focus-within .apps-panel{transform:none}
.apps-panel a{opacity:0;transform:translateY(-7px);transition:background-color .15s,opacity .3s var(--ease),transform .3s var(--ease)}
.apps:hover .apps-panel a,.apps.open .apps-panel a,.apps:focus-within .apps-panel a{opacity:1;transform:none;transition-delay:calc(var(--r,0) * 45ms + 70ms)}
.apps-panel .all{--r:4}
@media (max-width:960px){
  .apps-panel{width:min(330px,calc(100vw - 48px))}
}
@media (max-width:760px){
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;background:#fff;box-shadow:0 20px 40px -20px rgba(18,18,18,.25);padding:8px 16px 16px}
  .nav-links.open > a{padding:12px;width:100%}
  .nav-links.open .btn{margin:8px 0 0;justify-content:center}
  .nav-links.open .apps{width:100%}
  .nav-links.open .apps > button{width:100%;justify-content:space-between;padding:12px}
  .nav-links.open .apps-panel{position:static;width:100%;box-shadow:none;padding:0 0 8px;grid-template-columns:1fr;opacity:1;visibility:visible;transform:none;display:none}
  .nav-links.open .apps.open .apps-panel{display:grid}
  .nav-toggle{display:block}
}

/* ---------- Plus additions ---------- */

/* The tagline under the footer logo, inline style on the static pages */
.footer-brand p{font-size:13px;max-width:260px;color:var(--ink-2)}

/* Links of apps with no page yet render without an href */
.nav a:not([href]),footer a:not([href]){cursor:default}

/* Account menu: where a guest sees Log in and Sign up, a signed in visitor gets this. Same shape and motion as the Apps menu */
.acct{position:relative}
.acct > button{display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;cursor:pointer;font-size:14px;font-weight:500;color:var(--ink-2);padding:8px 12px;border-radius:var(--pill);transition:background-color .2s,color .2s}
.acct > button::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.acct:hover > button,.acct.open > button,.acct:focus-within > button{color:var(--ink);background:rgba(18,18,18,.06)}
.acct.open > button::after,.acct:hover > button::after{transform:rotate(225deg) translateY(-2px)}
.acct-panel{position:absolute;top:calc(100% + 10px);right:0;width:240px;max-width:calc(100vw - 48px);padding:8px;background:#fff;border-radius:var(--r);box-shadow:var(--shadow),0 0 0 1px var(--border);display:grid;gap:2px;opacity:0;visibility:hidden;transform:translateY(-8px) scale(.985);transform-origin:top right;transition:opacity .2s var(--ease),transform .25s var(--ease),visibility .2s}
.acct:hover .acct-panel,.acct.open .acct-panel,.acct:focus-within .acct-panel{opacity:1;visibility:visible;transform:none}
.acct-panel a{display:block;padding:9px 12px;border-radius:var(--r-sm);font-size:14px;font-weight:500;color:var(--ink-2);transition:background-color .15s,color .15s}
.acct-panel a:hover{background:var(--bg-soft);color:var(--ink)}
.acct-panel .lbl{display:block;padding:10px 12px 4px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.acct-panel hr{border:0;border-top:1px solid var(--border);margin:6px 4px}
.acct-panel .out{color:#C62828}
.acct-panel .out:hover{color:#C62828}

/* Bars over the nav: the account is locked over a negative credit balance, or the visitor's country gets a discount */
.nav-notice{padding:10px var(--gutter);text-align:center;font-size:13px;font-weight:500;line-height:1.45}
.nav-notice a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.nav-notice--locked{background:#D93025;color:#fff}
.nav-notice--coupon{background:var(--orange-10);color:var(--ink)}
.nav-notice--coupon a{font-weight:600}

@media (max-width:760px){
  .nav-links.open .acct{width:100%}
  .nav-links.open .acct > button{width:100%;justify-content:space-between;padding:12px}
  .nav-links.open .acct-panel{position:static;width:100%;box-shadow:none;padding:0 0 8px;opacity:1;visibility:visible;transform:none;display:none}
  .nav-links.open .acct.open .acct-panel{display:grid}
}