/* priv/static/css/navbar.css
 *
 * The site header and its mobile drawer, and only those.
 *
 * Every page's header rendered identically before this file existed, but the
 * rules producing that were spread over eleven different blocks in fourteen
 * stylesheets - base rules in each page's own base file, a 57-rule #siteHeader
 * rewrite in about-adjustments-02, and single-rule tweaks in four more. There
 * was no one place to read, and no way to change the header once.
 *
 * Extracted in the order /contact loads its stylesheets, which is the shortest
 * chain that produces the whole thing. Comments below mark where each part
 * came from, because the cascade between them is load-bearing.
 *
 * Loaded by both shells, like footer.css and for the same reason: one header
 * component on every page, signed-in or not. Every rule is scoped to
 * #siteHeader, or to a class beginning .nav- or .mobile- or .brand-, so none
 * of it reaches the app's own styling.
 *
 * Do not write a star followed by a slash anywhere in these comments. It ends
 * the comment early and the parser then eats the rules that follow it, which
 * is silent - the page renders, slightly wrong. It cost .brand-lockup its
 * display:flex once already.
 */

/*  The palette these rules use.
 *
 *  The V40 page stylesheets put these on :root, so extracting the header
 *  without them left every var() unresolved on app pages - which loaded
 *  navbar.css but none of the marketing CSS. The visible symptom was a mobile
 *  drawer with no background, showing the page through it.
 *
 *  Scoped to the header and the drawer rather than :root, for the same reason
 *  footer.css scopes its own: nothing in this file may reach the app's
 *  styling. The values are the ones all seven V40 sheets agree on, so on a
 *  marketing page these override :root with identical values and change
 *  nothing.
 */
#siteHeader,.mobile-drawer{
  --navy:#223649;
  --trust:#3F5A74;
  --apricot:#F5CAB3;
  --porcelain:#F9F7F4;
  --soft-line:rgba(34,54,73,.09);
  --pcv-header-bg:rgba(249,247,244,.96)
}

/*  from contact-base-b9df05b2.css  */
.brand-lockup{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:1px}
.brand-name{font-family:"M PLUS Rounded 1c",Inter,sans-serif;font-size:17px;font-weight:800;color:var(--navy);letter-spacing:-.03em;line-height:1.1}
.brand-tagline{font-family:"Kalam","Comic Sans MS",cursive;font-size:10.8px;line-height:1.05;color:var(--trust);font-weight:400;white-space:nowrap;max-height:18px;opacity:1;overflow:hidden;transition:max-height .2s ease,opacity .18s ease,margin .2s ease}
header.scrolled{height:58px}
header.scrolled .brand-tagline{max-height:0;opacity:0;margin:0}
.desktop-nav{display:none}
@media (min-width:900px){
  header.scrolled{height:64px}
  .brand-name{font-size:19px}
  .brand-tagline{font-size:11.5px}}
@media (min-width:1100px){
  header.scrolled{height:70px}
  .brand-name{font-size:20px}
  .brand-tagline{font-size:12px}}
@media (min-width:1120px){
  .desktop-nav{display:flex;align-items:center;gap:25px;margin-left:auto}
  .desktop-nav a{color:var(--navy);text-decoration:none;font-size:13.5px;font-weight:650;white-space:nowrap}
  .desktop-nav a:not(.nav-cta){opacity:.82}
  .desktop-nav .nav-cta{min-height:42px;padding:0 18px;border-radius:14px;background:var(--trust);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 7px 16px rgba(63,90,116,.14)}}
.brand-home{color:inherit;text-decoration:none}
.desktop-nav a[aria-current="page"]{opacity:1!important;font-weight:750}
.desktop-nav a[aria-current="page"]:after{
  content:"";display:block;width:22px;height:2px;margin:5px auto 0;border-radius:99px;background:var(--apricot)
}
.nav-for{position:relative}
.nav-for summary{list-style:none;cursor:pointer;color:var(--navy);font-size:13.5px;font-weight:650;opacity:.82;white-space:nowrap}
.nav-for summary::-webkit-details-marker{display:none}
.nav-for summary:after{content:"⌄";margin-left:5px;font-size:11px}
.nav-for[open] summary:after{content:"⌃"}
.nav-for-menu{position:absolute;top:34px;left:50%;transform:translateX(-50%);min-width:190px;padding:9px;background:rgba(249,247,244,.99);border:1px solid var(--soft-line);border-radius:14px;box-shadow:0 14px 35px rgba(34,54,73,.12);z-index:1100}
.nav-for-menu a{display:block!important;padding:9px 10px;border-radius:9px;font-size:13px!important;opacity:1!important}
.nav-for-menu a:hover{background:rgba(217,238,244,.42)}
.mobile-drawer{position:fixed;inset:0;z-index:1400;pointer-events:none;visibility:hidden}
.mobile-drawer.open{pointer-events:auto;visibility:visible}
.mobile-drawer-backdrop{position:absolute;inset:0;background:rgba(34,54,73,.26);opacity:0;transition:opacity .2s ease}
.mobile-drawer.open .mobile-drawer-backdrop{opacity:1}
.mobile-drawer-panel{position:absolute;top:0;right:0;width:min(88vw,360px);height:100%;padding:20px 22px 32px;background:var(--porcelain);transform:translateX(102%);transition:transform .24s ease;box-shadow:-16px 0 42px rgba(34,54,73,.14);overflow:auto}
.mobile-drawer.open .mobile-drawer-panel{transform:translateX(0)}
.mobile-drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.mobile-drawer-title{font-family:"M PLUS Rounded 1c",Inter,sans-serif;font-weight:800;color:var(--navy);font-size:18px}
.drawer-close{appearance:none;border:0;background:transparent;width:40px;height:40px;font-size:28px;line-height:1;color:var(--navy);cursor:pointer}
.mobile-nav{display:flex;flex-direction:column;gap:2px}
.mobile-nav>a,.mobile-nav .mobile-group-label{display:block;padding:12px 4px;color:var(--navy);text-decoration:none;font-weight:700;font-size:17px}
.mobile-group{padding:3px 0 9px 16px;display:flex;flex-direction:column;gap:3px}
.mobile-group a{padding:9px 4px;color:var(--trust);text-decoration:none;font-weight:650;font-size:15px}
.mobile-nav .mobile-cta{margin-top:18px;min-height:48px;padding:0 16px;border-radius:14px;background:var(--trust);color:#fff;display:flex;align-items:center;justify-content:center;text-align:center}
body.nav-open{overflow:hidden}
.contact-page .desktop-nav a[aria-current="page"]{
  opacity:1!important;
  font-weight:750;
}
.contact-page .desktop-nav a[aria-current="page"]:after{
  content:"";
  display:block;
  width:22px;
  height:2px;
  margin:5px auto 0;
  border-radius:99px;
  background:var(--apricot);
}
.brand-home{color:inherit;text-decoration:none}
.nav-for{position:relative}
.nav-for summary{list-style:none;cursor:pointer;color:var(--navy);font-size:13.5px;font-weight:650;opacity:.82;white-space:nowrap}
.nav-for summary::-webkit-details-marker{display:none}
.nav-for summary:after{content:"⌄";margin-left:5px;font-size:11px}
.nav-for[open] summary:after{content:"⌃"}
.nav-for-menu{position:absolute;top:34px;left:50%;transform:translateX(-50%);min-width:190px;padding:9px;background:rgba(249,247,244,.99);border:1px solid var(--soft-line);border-radius:14px;box-shadow:0 14px 35px rgba(34,54,73,.12);z-index:1100}
.nav-for-menu a{display:block!important;padding:9px 10px;border-radius:9px;font-size:13px!important;opacity:1!important}
.nav-for-menu a:hover{background:rgba(217,238,244,.42)}
.mobile-drawer{position:fixed;inset:0;z-index:1400;pointer-events:none;visibility:hidden}
.mobile-drawer.open{pointer-events:auto;visibility:visible}
.mobile-drawer-backdrop{position:absolute;inset:0;background:rgba(34,54,73,.26);opacity:0;transition:opacity .2s ease}
.mobile-drawer.open .mobile-drawer-backdrop{opacity:1}
.mobile-drawer-panel{position:absolute;top:0;right:0;width:min(88vw,360px);height:100%;padding:20px 22px 32px;background:var(--porcelain);transform:translateX(102%);transition:transform .24s ease;box-shadow:-16px 0 42px rgba(34,54,73,.14);overflow:auto}
.mobile-drawer.open .mobile-drawer-panel{transform:translateX(0)}
.mobile-drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.mobile-drawer-title{font-family:"M PLUS Rounded 1c",Inter,sans-serif;font-weight:800;color:var(--navy);font-size:18px}
.drawer-close{appearance:none;border:0;background:transparent;width:40px;height:40px;font-size:28px;line-height:1;color:var(--navy);cursor:pointer}
.mobile-nav{display:flex;flex-direction:column;gap:2px}
.mobile-nav>a,.mobile-nav .mobile-group-label{display:block;padding:12px 4px;color:var(--navy);text-decoration:none;font-weight:700;font-size:17px}
.mobile-group{padding:3px 0 9px 16px;display:flex;flex-direction:column;gap:3px}
.mobile-group a{padding:9px 4px;color:var(--trust);text-decoration:none;font-weight:650;font-size:15px}
.mobile-nav .mobile-cta{margin-top:18px;min-height:48px;padding:0 16px;border-radius:14px;background:var(--trust);color:#fff;display:flex;align-items:center;justify-content:center;text-align:center}
body.nav-open{overflow:hidden}
/*  from about-adjustments-02-40813c7c.css  */
#siteHeader{
  position:fixed!important;top:0!important;left:0!important;right:0!important;transform:none!important;
  width:100%!important;max-width:none!important;height:72px!important;z-index:1300!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  padding:0 20px!important;background:var(--pcv-header-bg)!important;
  border-bottom:1px solid rgba(63,90,116,.08)!important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:height .2s ease,box-shadow .2s ease!important;
}
#siteHeader.scrolled{height:58px!important;box-shadow:0 7px 24px rgba(34,54,73,.07)!important}
#siteHeader .brand-lockup{min-width:0!important;margin:0!important;padding:0!important}
#siteHeader .brand-home{display:block!important;color:inherit!important;text-decoration:none!important}
#siteHeader .brand-name{font-family:"M PLUS Rounded 1c",Inter,sans-serif!important;font-size:18px!important;line-height:1.05!important;font-weight:800!important;letter-spacing:-.03em!important;color:var(--navy)!important;white-space:nowrap!important}
#siteHeader .brand-tagline{margin-top:3px!important;max-height:18px!important;overflow:hidden!important;font-family:"Kalam","Comic Sans MS",cursive!important;font-size:10.5px!important;line-height:1.2!important;font-weight:400!important;color:var(--trust)!important;opacity:1!important;transition:max-height .18s ease,opacity .18s ease,margin .18s ease!important}
#siteHeader.scrolled .brand-tagline{max-height:0!important;opacity:0!important;margin-top:0!important}
#siteHeader .desktop-nav{display:none!important;align-items:center!important;gap:22px!important;margin:0!important}
#siteHeader .desktop-nav>a,#siteHeader .nav-for>summary{font-family:Inter,sans-serif!important;font-size:13.5px!important;line-height:1.2!important;font-weight:650!important;color:var(--navy)!important;text-decoration:none!important;opacity:.80!important;white-space:nowrap!important}
#siteHeader .desktop-nav>a:hover,#siteHeader .desktop-nav>a:focus-visible,#siteHeader .nav-for>summary:hover{opacity:1!important}
#siteHeader .desktop-nav a[aria-current="page"]{opacity:1!important;font-weight:750!important}
#siteHeader .desktop-nav a[aria-current="page"]:after,#siteHeader .nav-for.is-current>summary:after-current{content:""}
#siteHeader .desktop-nav a[aria-current="page"]:after{content:""!important;display:block!important;width:22px!important;height:2px!important;margin:5px auto 0!important;border-radius:99px!important;background:var(--apricot)!important}
#siteHeader .nav-for{position:relative!important;margin:0!important;padding:0!important}
#siteHeader .nav-for summary{list-style:none!important;cursor:pointer!important}
#siteHeader .nav-for summary::-webkit-details-marker{display:none!important}
#siteHeader .nav-for summary:after{content:"⌄"!important;margin-left:5px!important;font-size:11px!important}
#siteHeader .nav-for[open] summary:after{content:"⌃"!important}
#siteHeader .nav-for.is-current summary{opacity:1!important;font-weight:750!important}
#siteHeader .nav-for-menu{position:absolute!important;top:31px!important;left:50%!important;transform:translateX(-50%)!important;min-width:200px!important;padding:9px!important;background:rgba(249,247,244,.99)!important;border:1px solid rgba(63,90,116,.14)!important;border-radius:14px!important;box-shadow:0 14px 35px rgba(34,54,73,.12)!important;z-index:1400!important}
#siteHeader .nav-for-menu a{display:block!important;padding:9px 10px!important;border-radius:9px!important;font-size:13px!important;font-weight:650!important;color:var(--navy)!important;text-decoration:none!important;opacity:1!important}
#siteHeader .nav-for-menu a:hover{background:rgba(217,238,244,.42)!important}
#siteHeader .nav-cta{display:flex!important;align-items:center!important;justify-content:center!important;min-height:39px!important;padding:0 15px!important;border-radius:12px!important;background:var(--trust)!important;color:#fff!important;opacity:1!important;font-weight:750!important;box-shadow:none!important}
#siteHeader .nav-cta:after{display:none!important}
#siteHeader .menu{appearance:none!important;border:0!important;background:transparent!important;width:40px!important;height:40px!important;padding:0!important;display:grid!important;place-items:center!important;flex:0 0 auto!important;cursor:pointer!important}
#siteHeader .menu i,#siteHeader .menu i:before,#siteHeader .menu i:after{width:19px!important;height:2px!important;border-radius:99px!important;background:var(--navy)!important;display:block!important;position:relative!important}
#siteHeader .menu i:before,#siteHeader .menu i:after{content:""!important;position:absolute!important;left:0!important}
#siteHeader .menu i:before{top:-6px!important}
#siteHeader .menu i:after{top:6px!important}
.mobile-drawer{position:fixed!important;inset:0!important;z-index:1500!important;pointer-events:none!important;visibility:hidden!important}
.mobile-drawer.open{pointer-events:auto!important;visibility:visible!important}
.mobile-drawer-backdrop{position:absolute!important;inset:0!important;background:rgba(34,54,73,.28)!important;opacity:0!important;transition:opacity .2s ease!important}
.mobile-drawer.open .mobile-drawer-backdrop{opacity:1!important}
.mobile-drawer-panel{position:absolute!important;top:0!important;right:0!important;width:min(88vw,360px)!important;height:100%!important;padding:20px 22px 32px!important;background:var(--porcelain)!important;transform:translateX(102%)!important;transition:transform .24s ease!important;box-shadow:-16px 0 42px rgba(34,54,73,.14)!important;overflow:auto!important}
.mobile-drawer.open .mobile-drawer-panel{transform:translateX(0)!important}
.mobile-drawer-top{display:flex!important;align-items:center!important;justify-content:space-between!important;margin-bottom:28px!important}
.mobile-drawer-title{font-family:"M PLUS Rounded 1c",Inter,sans-serif!important;font-weight:800!important;color:var(--navy)!important;font-size:18px!important}
.drawer-close{appearance:none!important;border:0!important;background:transparent!important;width:40px!important;height:40px!important;font-size:28px!important;line-height:1!important;color:var(--navy)!important;cursor:pointer!important}
.mobile-nav{display:flex!important;flex-direction:column!important;gap:2px!important}
.mobile-nav>a,.mobile-nav .mobile-group-label{display:block!important;padding:12px 4px!important;color:var(--navy)!important;text-decoration:none!important;font-weight:700!important;font-size:17px!important}
.mobile-nav>a[aria-current="page"]{color:var(--trust)!important}
.mobile-group{padding:3px 0 9px 16px!important;display:flex!important;flex-direction:column!important;gap:3px!important}
.mobile-group a{padding:9px 4px!important;color:var(--trust)!important;text-decoration:none!important;font-weight:650!important;font-size:15px!important}
.mobile-group a[aria-current="page"]{color:var(--navy)!important}
.mobile-nav .mobile-cta{margin-top:18px!important;min-height:48px!important;padding:0 16px!important;border-radius:999px!important;background:var(--trust)!important;color:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important}
body.nav-open{overflow:hidden!important}
@media (min-width:600px){
  #siteHeader{height:72px!important;padding:0 32px!important}
  #siteHeader .brand-name{font-size:19px!important}
  #siteHeader .brand-tagline{font-size:11px!important}}
@media (min-width:900px){
  #siteHeader{height:78px!important;padding:0 36px!important}
  #siteHeader.scrolled{height:62px!important}
  #siteHeader .desktop-nav{display:flex!important}
  #siteHeader .menu{display:none!important}}
@media (min-width:1120px){
  #siteHeader{height:86px!important;padding:0 48px!important}
  #siteHeader .desktop-nav{gap:26px!important}
  #siteHeader .brand-name{font-size:20px!important}
  #siteHeader .brand-tagline{font-size:11.5px!important}}
/*  from about-adjustments-03-def6a331.css  */
#siteHeader .desktop-nav > a.nav-cta,
#siteHeader .desktop-nav > a.nav-cta:visited{
  background:var(--trust) !important;
  color:var(--porcelain) !important;
}
#siteHeader .desktop-nav > a.nav-cta:hover,
#siteHeader .desktop-nav > a.nav-cta:focus-visible{
  color:var(--porcelain) !important;
  opacity:1 !important;
}
/*  from contact-adjustments-04-2f481c43.css  */
#siteHeader .desktop-nav > a.nav-cta,
#siteHeader .desktop-nav > a.nav-cta:visited,
#siteHeader .desktop-nav > a.nav-cta:hover,
#siteHeader .desktop-nav > a.nav-cta:focus-visible{
  background-color:#3F5A74 !important;
  background-image:none !important;
  color:#F9F7F4 !important;
  opacity:1 !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  border-color:#3F5A74 !important;
}

/*  the account menu, which is ours and not in V40
 *
 *  V40 ends the nav with a "Log In" button. A signed-in owner gets this
 *  instead: the profile circle that the old app navbar's "My Account"
 *  dropdown used to be, in the V40 language. It borrows .nav-cta's colour and
 *  height so it sits on the same baseline as the button it replaces, and
 *  .nav-for-menu's panel so the two dropdowns in the header match.
 *
 *  It lives inside .desktop-nav, which is display:none below 1120px, so it
 *  disappears with the rest of the nav and the drawer takes over. The drawer
 *  lists the same destinations as a labelled group - see the component.
 */
.nav-account{position:relative;margin-left:0}
.nav-account summary{list-style:none;cursor:pointer;display:flex;align-items:center}
.nav-account summary::-webkit-details-marker{display:none}
.nav-avatar{
  width:42px;height:42px;border-radius:50%;
  background:var(--trust);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:"M PLUS Rounded 1c",Inter,sans-serif;font-size:16px;font-weight:800;
  line-height:1;letter-spacing:0;
  box-shadow:0 7px 16px rgba(63,90,116,.14);
  transition:box-shadow .18s ease
}
.nav-account summary:hover .nav-avatar,
.nav-account[open] .nav-avatar{box-shadow:0 9px 22px rgba(63,90,116,.24)}
.nav-account summary:focus-visible{outline:none}
.nav-account summary:focus-visible .nav-avatar{outline:2px solid var(--apricot);outline-offset:2px}

.nav-account-menu{
  position:absolute;top:52px;right:0;min-width:230px;padding:9px;
  background:rgba(249,247,244,.99);
  border:1px solid var(--soft-line);border-radius:14px;
  box-shadow:0 14px 35px rgba(34,54,73,.12);z-index:1100
}
.nav-account-who{padding:8px 10px 10px;border-bottom:1px solid var(--soft-line);margin-bottom:6px}
.nav-account-label{display:block;font-size:11px;font-weight:650;color:var(--trust);opacity:.7}
.nav-account-email{
  display:block;font-size:13px;font-weight:700;color:var(--navy);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:210px
}
.nav-account-menu a{
  display:block!important;padding:9px 10px;border-radius:9px;
  font-size:13px!important;font-weight:650;color:var(--navy);
  text-decoration:none;opacity:1!important
}
.nav-account-menu a:hover{background:rgba(217,238,244,.42)}

/*  Sign out is a <form>, not a link - see the component for why. These rules
 *  undo the button's user-agent styling so it reads as the menu row it is.
 */
.nav-sign-out{margin:6px 0 0;border-top:1px solid var(--soft-line);padding-top:6px}
.nav-sign-out button{
  appearance:none;-webkit-appearance:none;background:none;border:0;
  width:100%;text-align:left;cursor:pointer;
  padding:9px 10px;border-radius:9px;
  font-family:inherit;font-size:13px;font-weight:650;color:var(--trust)
}
.nav-sign-out button:hover{background:rgba(217,238,244,.42)}

.mobile-sign-out{margin:18px 0 0}
.mobile-sign-out button{
  appearance:none;-webkit-appearance:none;border:0;cursor:pointer;
  width:100%;min-height:48px;padding:0 16px;border-radius:14px;
  background:transparent;color:var(--trust);
  border:1.5px solid var(--soft-line);
  font-family:inherit;font-size:16px;font-weight:700;
  display:flex;align-items:center;justify-content:center
}

/*  Room for the fixed header.
 *
 *  #siteHeader is position:fixed, so it is out of flow and reserves no space.
 *  Every V40 page reserves it on its own wrapper instead - .prototype on eight
 *  pages, .page on horse-owners - stepping 72 / 78 / 86px at the same two
 *  widths. An app page has neither wrapper, so when this header replaced the
 *  app's own the first screenful of every signed-in page rendered underneath
 *  it. The onboarding step list was the visible one.
 *
 *  Keyed on a class the app shell puts on <body>, not on body outright: the
 *  marketing pages already reserve it on their wrapper, and doing it here too
 *  would push every one of them down a second time.
 */
body.has-fixed-navbar{padding-top:72px}
@media (min-width:900px){body.has-fixed-navbar{padding-top:78px}}
@media (min-width:1100px){body.has-fixed-navbar{padding-top:86px}}