/* Site chrome — header and footer, lifted from thedip.app.
   The marketing site is built in Elementor, so the numbers below (172px header,
   49px card radius, the -151px overlap under the blue card, 138.88px badges)
   are the values that page actually ships. The markup here is plain, but the
   measurements are not invented. */
:root {
  --dip-blue: #0387D1;
  --dip-navy: #091B3D;
  --dip-navy-deep: #083965;
  --dip-pale: #E6F3FB;
  --dip-hairline: rgba(255, 255, 255, 0.1);
  /* The live site wraps its chrome at 1320px with a 1rem gutter. Here the
     chrome borrows the guides' own measure instead, so the logo lines up with
     the page's first word — a header on a different grid to the page under it
     reads as a mistake. The fallbacks are the marketing site's numbers, for if
     this file is ever used without guides.css. */
  --chrome-wrap: var(--wrap, 82.5rem);
  --chrome-gutter: var(--gutter, 1rem);
  /* The bar's three heights, from the live site. Named because the nav panel
     hangs off the bottom of the bar and has to know how tall it is. */
  --header-h: 10.75rem; /* 172px */
}

/* ============================ header ============================ */

.site-header {
  position: relative;
  z-index: 999;
  background: #fff;
}

.site-header__inner {
  max-width: var(--chrome-wrap);
  margin: 0 auto;
  min-height: var(--header-h);
  padding: 0 var(--chrome-gutter);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  text-decoration: none;
  flex: 0 0 auto;
}
.site-logo img { display: block; width: 3.6875rem; height: auto; }
.site-logo__word {
  font-family: Mitr, system-ui, sans-serif;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.43;
  color: var(--dip-navy);
}

/* The nav takes the slack so the login button sits hard right. */
.site-nav { margin-left: auto; }
.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.site-nav__list > li { position: relative; display: flex; }
/* The marketing site sets these links at 18px/39px with 12px of side padding,
   in a 1320px bar holding six items. This bar is narrower, carries a seventh
   item and the locale switch, and has to hold the longer Spanish labels — at
   the live size the row wrapped in both locales. A step down fits every label
   on one line at every width the horizontal nav is used. */
.site-nav__list > li > a {
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
  font-family: Inter, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 2.4375rem;
  color: var(--dip-navy);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.site-nav__list > li > a:hover,
.site-nav__list > li > a:focus-visible { text-decoration: underline; }

.site-nav__caret { width: 0.75em; height: 0.75em; margin-left: 0.375rem; fill: currentColor; }

/* Submenus open on hover and on keyboard focus — :focus-within keeps them
   reachable by tab, which a hover-only menu is not. */
.site-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9997;
  min-width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--dip-navy);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-0.375rem);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}
.site-nav__list > li:hover > .site-submenu,
.site-nav__list > li:focus-within > .site-submenu {
  visibility: visible;
  opacity: 1;
  transform: none;
}
.site-submenu a {
  display: block;
  padding: 0.8125rem 1.25rem;
  border-left: 0.5rem solid transparent;
  font-family: Sora, system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.4;
  color: #fff;
  text-decoration: none;
}
.site-submenu a:hover, .site-submenu a:focus-visible { text-decoration: underline; }

.site-login {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* The live button is a fixed 135px — the width of the word LOGIN. Translated
     it is wider, so this keeps that size as a floor and grows from there. */
  min-width: 8.4375rem;
  padding: 1.25rem 1rem;
  white-space: nowrap;
  border: 1px solid var(--dip-blue);
  border-radius: 3.6875rem;
  background: transparent;
  font-family: Sora, system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.44;
  color: var(--dip-blue);
  text-decoration: none;
}
.site-login:hover { background: var(--dip-pale); }

/* The other locale of the page being read. Quiet next to the login pill, but
   it sits in the bar at every width — on a phone it is the only way across. */
.lang-switch {
  flex: 0 0 auto;
  font-family: Sora, system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--dip-navy);
  text-decoration: none;
  white-space: nowrap;
}
.lang-switch:hover, .lang-switch:focus-visible { text-decoration: underline; }

/* Burger. Hidden until the desktop nav is dropped at 1024px. */
.site-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 0.25em;
  border: 0;
  border-radius: 0.1875rem;
  background: var(--dip-pale);
  color: var(--dip-navy);
  font-size: 1.375rem;
  cursor: pointer;
}
.site-nav-toggle svg { display: block; width: 1em; height: auto; fill: currentColor; }
.site-nav-toggle__close { display: none; }
.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__open { display: none; }
.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__close { display: block; }

/* Three separate thresholds, because they answer three questions.

   1248px: the horizontal nav needs a bar this wide to hold seven items, the
   locale switch and the login pill on one line — in Spanish as well as English.
   The live site collapses at 1024px, but its nav is shorter and carries no
   switch, so its threshold would leave ours wrapping for 200px of widths. */
@media (max-width: 78em) {
  .site-nav-toggle { display: flex; order: 1; margin-left: 1rem; }
  .lang-switch { margin-left: auto; }

  /* The menu becomes one navy panel stretched under the bar, as it does on the
     live site. */
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 1.25rem 0 0;
    background: var(--dip-navy);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transform: scaleY(0);
    transform-origin: top;
    transition: max-height 0.3s, transform 0.3s, visibility 0.3s;
  }
  .site-nav[data-open="true"] {
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    visibility: visible;
    transform: scaleY(1);
  }
  .site-nav__list { display: block; }
  .site-nav__list > li { display: block; }
  .site-nav__list > li > a,
  .site-submenu a {
    padding: 0.8125rem 1.25rem;
    border-left: 0.5rem solid transparent;
    font-family: Sora, system-ui, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: #fff;
  }
  .site-nav__caret { fill: #fff; }
  /* No hover on touch, so submenus are always open in the panel. */
  .site-submenu {
    position: static;
    visibility: visible;
    opacity: 1;
    transform: none;
    background: transparent;
  }
  .site-submenu a { padding-left: 2.5rem; opacity: 0.85; }
}

/* Below the same 1248px, the footer's bottom row stacks for the same reason the
   nav collapsed: the sentence and seven links no longer sit side by side.
   Stacked, the nav reads first and the copyright closes the page. */
@media (max-width: 78em) {
  .site-footer__bottom { flex-direction: column-reverse; align-items: stretch; border-top: 0; padding-top: 0; }
  .site-footer__copy { flex: 0 0 auto; padding-top: 0.9375rem; border-top: 1px solid var(--dip-hairline); }
  .site-footer__nav { flex: 0 0 auto; }
  .site-footer__nav ul { justify-content: center; }
}

/* 2. 1024px: the live site's own tablet step — the bar gets shorter and drops
   the login pill. Above it there is room for the pill even once the nav has
   collapsed, so it stays. */
@media (max-width: 64em) {
  :root { --header-h: 6.25rem; /* 100px */ }
  .site-login { display: none; }
}

/* 3. 767px: the live site's phone step. */
@media (max-width: 47.9375em) {
  :root { --header-h: 4.75rem; /* 76px */ }
  .site-logo img { width: 2.75rem; }
  .site-logo__word { font-size: 1.25rem; }
}

/* Label text that only screen readers need. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

/* ============================ footer ============================ */

/* Guide pages end with their own bottom padding; this is the air between the
   last of the page and the blue card. */
.site-footer { background: #fff; margin-top: 3rem; }

/* The blue card and the navy block overlap: the navy block is pulled up 151px
   and given the same padding back, so the card floats on its shoulder. */
.site-footer__cta {
  position: relative;
  z-index: 1;
  max-width: var(--chrome-wrap);
  margin: 0 auto;
  padding: 0 var(--chrome-gutter);
}
.site-footer__card {
  display: flex;
  align-items: center;
  border-radius: 3.0625rem; /* 49px */
  background: var(--dip-blue);
  overflow: hidden;
}
.site-footer__pitch {
  flex: 1 1 50%;
  min-width: 0;
  padding-left: 8.8125rem; /* 141px */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.site-footer__pitch-title {
  margin: 0;
  font-family: Mitr, system-ui, sans-serif;
  font-size: 3.75rem;
  font-weight: 500;
  line-height: 1.15;
  color: #fff;
}
.site-footer__stores {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}
.site-footer__arrow { flex: 0 0 auto; width: 2.0625rem; height: 2.0625rem; fill: #fff; }
.store-badge {
  display: block;
  padding: 0.8125rem 2.0625rem;
  border-radius: 2.375rem;
  background: #fff;
}
.store-badge img { display: block; width: 8.68rem; height: auto; }
.site-footer__art { flex: 1 1 50%; min-width: 0; padding: 0 2.4375rem 0 2.375rem; }
.site-footer__art img { display: block; width: 100%; height: auto; }

.site-footer__main {
  margin-top: -9.4375rem; /* -151px */
  padding-top: 9.4375rem;
  border-radius: 10.1875rem 10.1875rem 0 0; /* 163px */
  background: var(--dip-navy-deep);
}
.site-footer__main-inner {
  max-width: var(--chrome-wrap);
  margin: 0 auto;
  padding: 0 var(--chrome-gutter);
}

.site-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 24.25rem; /* 388px */
}
.site-footer__brand {
  flex: 1 1 50%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1.25rem;
  padding-right: 1.5rem;
}
.site-footer__brand img { display: block; width: 7.375rem; height: auto; }
.site-footer__email {
  font-family: Sora, system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.4;
  color: #fff;
  text-decoration: none;
}
.site-footer__email:hover { text-decoration: underline; }

.site-footer__subscribe { flex: 0 1 42%; min-width: 0; }
.subscribe-form { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.subscribe-form input {
  flex: 1 1 6rem;
  min-width: 0;
  min-height: 3.6875rem;
  padding: 0.4375rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 0.3125rem;
  background: #fff;
  font: inherit;
  font-size: 1.125rem;
  line-height: 1.4;
  color: #1f2124;
}
.subscribe-form button {
  flex: 0 0 auto;
  min-height: 3.6875rem;
  /* The live button is padded 63px each side inside a wider column; at this
     measure that padding alone would push it under the field. */
  padding: 1.25rem 2.25rem;
  border: 0;
  border-radius: 0.625rem;
  background: var(--dip-blue);
  font-family: Inter, system-ui, sans-serif;
  font-size: 1.125rem;
  color: #fff;
  cursor: pointer;
}
.subscribe-form button:hover { filter: brightness(1.08); }
.site-footer__note {
  margin: 1rem 0 0;
  font-family: Sora, system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.44;
  color: #fff;
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.4375rem 0;
  border-top: 1px solid var(--dip-hairline);
}
.site-footer__copy {
  /* No more of the row than the sentence needs, and it gives way to the nav
     before the nav starts wrapping. */
  flex: 0 1 auto;
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.44;
  color: #fff;
}
.site-footer__nav { flex: 1 1 auto; min-width: 0; }
.site-footer__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.site-footer__nav a {
  display: block;
  padding: 0 0.5rem;
  font-family: Inter, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 2.4375rem;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.site-footer__nav a:hover, .site-footer__nav a:focus-visible { text-decoration: underline; }

@media (max-width: 85.375em) { /* 1366px */
  .site-footer__subscribe { flex-basis: 50%; }
}

@media (max-width: 64em) { /* 1024px */
  .site-footer__card { flex-direction: column; border-radius: 1.5rem; }
  .site-footer__pitch {
    flex: 1 1 auto;
    width: 100%;
    align-items: center;
    padding-left: 0;
    padding-top: 6.375rem; /* 102px */
    text-align: center;
  }
  .site-footer__stores {
    flex-direction: column;
    gap: 1.5rem;
    padding: 5.375rem 0 1.15rem;
    margin-top: 0;
  }
  .store-badge img { width: 12.03rem; }
  .site-footer__art { flex: 1 1 auto; width: 100%; }

  .site-footer__main {
    margin-top: -22.0625rem; /* -353px */
    padding-top: 22.0625rem;
    border-radius: 1.875rem 1.875rem 0 0;
  }
  .site-footer__main-inner { max-width: 100%; }
  .site-footer__top { flex-direction: column; align-items: stretch; min-height: 0; padding: 2rem 0; }
  .site-footer__brand { justify-content: flex-start; padding-right: 0; }
  .site-footer__subscribe { flex-basis: auto; }

}

@media (max-width: 47.9375em) { /* 767px */
  .site-footer__pitch-title { font-size: 2.5rem; }
  .subscribe-form button { flex: 1 1 100%; padding-left: 1.5rem; padding-right: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav, .site-submenu, .site-nav__list > li > a { transition: none; }
}

@media print {
  .site-header, .site-footer { display: none; }
}