:root{
  --shell-canvas:#e2e2df;
  --shell-paper:#f7f6f2;
  --shell-ink:#070607;
  --shell-graphite:#111210;
  --shell-iron:#626762;
  --shell-body:'DM Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --shell-motion:cubic-bezier(.4,0,.2,1);
  --shell-snap:cubic-bezier(.22,1,.36,1);
}

html{
  /* iOS inflates body text on rotation without this */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  /* the nav is sticky, so anchor jumps must clear it */
  scroll-padding-top:100px;
}

.global-nav,
.global-nav *,
.global-footer,
.global-footer *{box-sizing:border-box}

.global-nav{
  position:sticky;
  top:0;
  z-index:100;
  padding-top:20px;
  color:var(--shell-ink);
  font-family:var(--shell-body);
  opacity:1;
  transform:none;
  transition:padding .24s var(--shell-motion);
}
.global-nav-wrap{
  width:min(calc(100% - 112px),1660px);
  max-width:none;
  margin:0 auto;
}
.global-nav-inner{
  width:100%;
  max-width:1660px;
  min-height:44px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding:0;
  background:transparent;
  border:1px solid transparent;
  border-radius:800px;
  box-shadow:0 0 0 rgba(7,6,7,0);
  transition:max-width .32s var(--shell-snap),padding .28s var(--shell-snap),background .24s var(--shell-motion),border-color .24s var(--shell-motion),box-shadow .24s var(--shell-motion),gap .28s var(--shell-snap);
}
.global-nav.is-condensed{padding-top:12px}
.global-nav.is-condensed .global-nav-inner{
  width:100%;
  max-width:min(820px,calc(100vw - 32px));
  justify-content:center;
  gap:18px;
  padding:8px 10px 8px 16px;
  background:var(--shell-paper);
  border-color:rgba(7,6,7,.08);
  box-shadow:0 14px 34px rgba(7,6,7,.12);
}
.global-brand{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  color:inherit;
  text-decoration:none;
}
.global-brand-logo{
  display:block;
  width:156px;
  height:42px;
  object-fit:contain;
  mix-blend-mode:multiply;
  transition:width .42s ease,height .42s ease;
}
.global-nav.is-condensed .global-brand-logo{width:142px;height:38px}
.global-nav-links,
.global-nav-social{
  display:flex;
  align-items:center;
  gap:22px;
  transition:gap .42s ease;
}
.global-nav:not(.is-condensed) .global-nav-links{margin-right:auto}
.global-nav:not(.is-condensed) .global-nav-social{margin-left:auto}
.global-nav-links a{
  color:var(--shell-ink);
  font-size:14px;
  font-weight:500;
  line-height:1.2;
  text-decoration:none;
  white-space:nowrap;
  transition:color .16s ease;
}
.global-nav-links a:hover{color:#3c3d39}
.global-nav-links a[aria-current="page"]{font-weight:700}
.global-nav-social > a{
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  color:var(--shell-ink);
  text-decoration:none;
  transition:color .16s ease;
}
.global-nav-social > a:hover{color:#3c3d39}
.global-nav-social svg{display:block;width:18px;height:18px}
.global-nav-cta{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  padding:10px 22px;
  border:1px solid transparent;
  border-radius:800px;
  background:var(--shell-graphite);
  color:var(--shell-paper);
  font-size:14px;
  font-weight:500;
  line-height:1.1;
  text-decoration:none;
  white-space:nowrap;
  transition:background .16s ease,color .16s ease;
}
.global-nav-cta:hover{background:#292a27}
.global-nav :focus-visible,
.global-footer :focus-visible{outline:3px solid var(--shell-iron);outline-offset:3px}

.global-footer{
  margin:0;
  padding:54px 0 38px;
  border-top:1px solid rgba(7,6,7,.28);
  background:var(--shell-canvas);
  color:var(--shell-ink);
  font-family:var(--shell-body);
}
.global-footer-wrap{
  width:min(1280px,calc(100% - 64px));
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(220px,1.3fr) repeat(5,minmax(120px,1fr));
  gap:30px;
  align-items:start;
}
.global-footer-brand{display:flex;flex-direction:column;gap:18px;max-width:290px}
.global-footer-brand p{
  margin:0;
  color:rgba(7,6,7,.68);
  font-size:14px;
  font-weight:500;
  line-height:1.45;
}
.global-footer-group{display:flex;flex-direction:column;gap:10px}
.global-footer-group strong{
  font-size:12px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.global-footer a{color:inherit;text-decoration:none}
.global-footer-group a{color:rgba(7,6,7,.68);font-size:14px;font-weight:500;line-height:1.45}
.global-footer-group a:hover{color:var(--shell-ink)}
.global-footer-bottom{
  grid-column:1 / -1;
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding-top:26px;
  margin-top:12px;
  border-top:1px solid rgba(7,6,7,.14);
}
.global-footer-copy{color:rgba(7,6,7,.62);font-size:13px;font-weight:500;line-height:1.45}

/* Phone menu. Hidden above 920px, where the bar carries its own links, so
   nothing here reaches the desktop layout. */
.global-nav-toggle{
  display:none;
  width:44px;
  height:44px;
  flex:0 0 auto;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--shell-ink);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.global-nav-toggle > span{
  display:block;
  width:21px;
  height:14px;
  position:relative;
}
.global-nav-toggle i{
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  background:currentColor;
  border-radius:2px;
  transition:transform .22s var(--shell-snap),opacity .16s var(--shell-motion);
}
.global-nav-toggle i:nth-child(1){top:0}
.global-nav-toggle i:nth-child(2){top:6px}
.global-nav-toggle i:nth-child(3){top:12px}
.global-nav-toggle.is-open i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.global-nav-toggle.is-open i:nth-child(2){opacity:0}
.global-nav-toggle.is-open i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.global-nav-menu{
  position:fixed;
  inset:0;
  z-index:99;
  display:flex;
  justify-content:center;
  padding:74px 12px 24px;
  padding-left:max(12px,env(safe-area-inset-left));
  padding-right:max(12px,env(safe-area-inset-right));
  background:rgba(7,6,7,.32);
  overflow-y:auto;
  overscroll-behavior:contain;
  animation:global-nav-menu-in .18s var(--shell-motion) both;
}
.global-nav-menu[hidden]{display:none}
@keyframes global-nav-menu-in{from{opacity:0}to{opacity:1}}
.global-nav-menu-card{
  width:100%;
  max-width:520px;
  align-self:flex-start;
  padding:10px 20px 20px;
  background:var(--shell-paper);
  border:1px solid rgba(7,6,7,.08);
  border-radius:28px;
  box-shadow:0 18px 44px rgba(7,6,7,.18);
}
.global-nav-menu-links{display:block}
.global-nav-menu-links a{
  display:block;
  padding:16px 0;
  border-bottom:1px solid rgba(7,6,7,.12);
  color:var(--shell-ink);
  font-family:'Anton','Arial Narrow',sans-serif;
  font-size:30px;
  font-weight:400;
  line-height:1;
  letter-spacing:.01em;
  text-transform:uppercase;
  text-decoration:none;
}
.global-nav-menu-links a[aria-current="page"]{color:var(--shell-iron)}
.global-nav-menu-cta{
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:20px;
  padding:12px 22px;
  border-radius:800px;
  background:var(--shell-graphite);
  color:var(--shell-paper);
  font-size:16px;
  font-weight:500;
  text-decoration:none;
}
.global-nav-menu-social{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:14px;
}
.global-nav-menu-social a{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  color:var(--shell-ink);
  text-decoration:none;
}
.global-nav-menu-social svg{display:block;width:20px;height:20px}
html.nav-menu-open,
html.nav-menu-open body{overflow:hidden}

@media (max-width:1100px){
  .global-nav-social{display:none}
}

@media (max-width:920px){
  html{scroll-padding-top:84px}
  .global-nav{padding-top:12px}
  .global-nav-wrap{width:min(1280px,calc(100% - 32px))}
  .global-nav-links,.global-nav-social{display:none}
  .global-nav-toggle{display:grid}
  .global-nav-inner,
  .global-nav.is-condensed .global-nav-inner{
    width:100%;
    max-width:none;
    justify-content:space-between;
    gap:8px;
    padding:8px 8px 8px 14px;
    background:var(--shell-paper);
    box-shadow:none;
  }
  /* brand stays left, CTA and the three-line button group on the right */
  .global-nav-cta{margin-left:auto}
  .global-brand{min-height:44px}
  .global-brand-logo,
  .global-nav.is-condensed .global-brand-logo{width:134px;height:36px}
  .global-nav-cta{min-height:40px;padding:10px 16px}
  .global-footer-wrap{width:min(1280px,calc(100% - 32px));grid-template-columns:repeat(2,minmax(0,1fr))}
  .global-footer-brand{grid-column:1 / -1}
}

@media (max-width:620px){
  .global-nav{padding-top:10px}
  .global-nav-wrap{
    width:calc(100vw - 24px);
    max-width:calc(100vw - 24px);
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }
  .global-nav-inner,
  .global-nav.is-condensed .global-nav-inner{min-height:52px;padding:6px 6px 6px 12px;border-radius:28px}
  .global-brand-logo,
  .global-nav.is-condensed .global-brand-logo{width:116px;height:32px}
  .global-nav-cta{display:none}
  /* two columns instead of one: the single stack ran ~890px tall on a phone */
  .global-footer{
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
    padding-bottom:calc(38px + env(safe-area-inset-bottom));
  }
  .global-footer-wrap{width:calc(100% - 24px);grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}
  .global-footer-brand{grid-column:1 / -1}
  .global-footer-group{gap:2px}
  .global-footer-group a{
    display:flex;
    align-items:center;
    min-height:38px;
    font-size:15px;
  }
  .global-footer-copy{font-size:14px}
  .global-footer-bottom{grid-column:1 / -1;flex-direction:column}
}

@media (max-width:390px){
  .global-brand-logo,
  .global-nav.is-condensed .global-brand-logo{width:106px}
  .global-nav-menu-links a{font-size:27px}
}

@media (prefers-reduced-motion:reduce){
  .global-nav-menu{animation:none}
  .global-nav-toggle i{transition:none}
  .global-nav,
  .global-nav-inner,
  .global-brand-logo,
  .global-nav-links,
  .global-nav-social{transition:none!important}
}

/* Common questions / FAQ accordion. Shared by /faq/ and the ERIKA page. */
.faq-section{padding-block:clamp(90px,10vw,150px)}
.faq-head{margin-bottom:clamp(30px,3.6vw,52px)}
.faq-head h2{
  font-family:'Anton','Arial Narrow',sans-serif;
  font-size:clamp(36px,5vw,80px);line-height:.95;
  text-transform:uppercase;letter-spacing:-.01em;margin:0;
  color:var(--shell-ink);
}
.faq-head p{margin:14px 0 0;max-width:60ch;color:var(--shell-iron)}
.faq-list{border-top:1px solid rgba(7,6,7,.14)}
.faq-list details{border-bottom:1px solid rgba(7,6,7,.14)}
.faq-list summary{
  display:flex;align-items:baseline;gap:20px;justify-content:space-between;
  padding:26px 0;cursor:pointer;list-style:none;
  font-family:var(--shell-body);
  font-size:clamp(17px,1.5vw,21px);font-weight:500;line-height:1.35;
  color:var(--shell-ink);
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"+";font-family:'Anton','Arial Narrow',sans-serif;
  font-size:26px;line-height:1;color:var(--shell-iron);flex:none;
  transition:transform .25s var(--shell-snap);
}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list summary:hover{color:var(--shell-iron)}
.faq-list details p{
  margin:0 0 30px;max-width:74ch;color:var(--shell-iron);
  font-size:clamp(15px,1.15vw,17px);line-height:1.62;
}
@media (max-width:720px){ .faq-list summary{padding:22px 0;gap:14px} }
