/* 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 and the notice bars at the bottom are plus additions the static pages did not need.
   The Shards pages that show the v2 header (common/bodies/shards, see Spark.nav) load this file too, over Bootstrap
   and main.css and without base.css: the header rules key on the header element so Bootstrap's own .nav lists stay
   out, and the Bootstrap resets at the bottom give the header what base.css gives it on a v2 page */

/* ---------- 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. */
header.nav{display:block;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)}
header.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))){
  header.nav{background:rgba(255,255,255,.90)}
  header.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's viewBox keeps 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 .wordmark{height:30px;width:calc(30px * var(--ar))}
.lockup__div{flex:none;width:1px;height:24px;background:var(--border-2);border-radius:1px;transform:rotate(20deg)}
.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)}
/* html.marks-wait (shell head) holds the lockup marks hidden until marks.js takes over. If the scripts never run
   they show up on their own after 2s */
.marks-wait .lockup .mark--anim > g{opacity:0;animation:marks-show 0s 2s forwards}
@keyframes marks-show{to{opacity:1}}
@media (max-width:760px){.lockup{gap:10px}.lockup .wordmark{height:26px;width:calc(26px * var(--ar))}.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)}

/* Quiet links move a hair toward you */
/* 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 ---------- */

/* Bootstrap resets for the Shards pages, at element specificity (:where) so every header rule wins over them. On a
   v2 page base.css already says the same. The body rendering of base.css comes first, without it the same Inter reads
   heavier under Bootstrap on a Mac */
:where(header.nav, .nav-notice, footer.ft){font-family:var(--font-body);line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
:where(header.nav, .nav-notice) a{color:inherit;text-decoration:none}
:where(header.nav) button{font:inherit;color:inherit}
:where(header.nav) svg{display:block}
/* The Pro pill spelled out, .btn .btn-sm .btn-pro of base.css, so Bootstrap's .btn and main.css do not restyle it */
.nav-links > a.btn-pro{display:inline-flex;align-items:center;justify-content:center;font-family:inherit;font-weight:600;font-size:14px;line-height:1.4;padding:7px 15px;border-radius:var(--pill);border:1px solid transparent;background:none;color:var(--ink);box-shadow:none;white-space:nowrap;text-decoration:none}
.nav-links > a.btn-pro:hover{color:var(--ink)}

/* 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 common/includes/accountMenu, styled by
   stylesheets/common/account-menu.css. In the phone sheet its panel opens in place like the Apps panel */
/* Column of the account locked card over the nav (common/includes/accountLockedBar, styled by common/account-locked.css),
   the nav's own. Positioned so the hero's glow, which starts 140px above the hero, paints under it and not over it. The
   country discount card is common/coupon-bar.css */
.nav-notice{position:relative;z-index:1;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}

@media (max-width:760px){
  .nav-links.open .yx-acct-wrap{width:100%}
  .nav-links.open .yx-account{width:100%;padding:8px 12px;border-radius:14px}
  .nav-links.open .yx-acct-name{display:block}
  .nav-links.open .yx-acct-menu{position:static;width:100%;box-shadow:none;margin-top:4px}
}

/* The v2 footers (views/common/v2/footerYouExec and footerAppLanding), the Pro and app landing designs of youexec-footer.html. The plain footer
   rule above is the home page's parallax footer's, so .ft sets its own padding and border */
footer.ft{padding:40px var(--gutter) 30px;border-top:0;background:#fff}
/* The column spelled out so Bootstrap's .container does not size it on the Shards pages */
.ft .container{max-width:var(--container);margin:0 auto;padding:0}
.ft-row{display:flex;align-items:center;justify-content:space-between;gap:18px 40px;flex-wrap:wrap}
.ft-row nav{display:flex;align-items:center;gap:10px 26px;flex-wrap:wrap}
/* The apps are their lockups (common/v2/lockup), --brand-h sizes mark and wordmark together, marks.css */
.ft-apps > a,.ft-apps > span{--brand-h:16px;font-size:15px;color:var(--ink);font-family:var(--font-head);font-weight:600;letter-spacing:-.015em;display:inline-flex;align-items:center;gap:8px;transition:color .18s var(--ease)}
.ft-apps .mark,.ft-apps .lot{width:16px;height:16px;flex:none}
.ft-apps a[href]:hover{color:var(--blue)}
.ft-apps .parent{gap:0}
.ft-apps .parent .mark{width:22px;height:22px}
.ft-apps [aria-current]{background:#fff;box-shadow:inset 0 0 0 1px var(--ink);border-radius:var(--pill);padding:6px 14px;margin-inline:-6px;font-weight:700;cursor:default}
.ft-apps .soon{margin-left:-2px;font-size:9.5px;padding:1px 6px}
.ft-util{gap:10px 24px}
.ft-util > a{font-size:14.5px;font-weight:500;color:var(--ink-2);transition:color .18s var(--ease),background-color .18s var(--ease)}
.ft-util a:hover{color:var(--blue)}
/* Pro, the orange pill of the pages that sell it, filled by the bloom of bloom.css. The footer template leaves it out
   for a paying customer */
.ft-util > a.ft-pro,.ft-util > a.ft-pro:hover{color:var(--ink);font-weight:600;border-radius:var(--pill);padding:7px 18px}
.ft-div{width:1px;height:15px;background:var(--border);display:inline-block;flex:none;transform:rotate(20deg)}
.ft-copy{margin:34px 0 0;text-align:center;color:var(--muted);font-size:13px}
@media (max-width:760px){.ft-row{justify-content:flex-start;gap:14px 26px}}