/* Get Transcripts. Hand-authored; there is no build step.
 *
 * The measurements below were taken from the Wix page this site replaces, at
 * 1440 px and 390 px wide. Wix sized most of the hero in viewport units, so
 * the same ratios are kept here instead of fixed pixel values.
 *
 * The Content-Security-Policy in /_headers allows this stylesheet and nothing
 * inline: a style attribute or a <style> element is blocked, not ignored.
 */

/* Besley stands in for the Clarendon the Wix page licensed. Its capitals and
   x-height are about 12 percent taller at the same font size, so it is scaled
   to match; every slab size below is then the size the Wix page used. */
@font-face {
  font-family: "Besley";
  src: url("/assets/fonts/besley.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  size-adjust: 89%;
}

@font-face {
  font-family: "Wix Madefor Display";
  src: url("/assets/fonts/wix-madefor-display.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Wix Madefor Text";
  src: url("/assets/fonts/wix-madefor-text.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --blue: #1a6aff;
  --navy: #041051;
  --cream: #f2eae7;
  --slab: "Besley", Georgia, "Times New Roman", serif;
  --display: "Wix Madefor Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text: "Wix Madefor Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* One percent of the design width. The Wix layout grew with the viewport up
     to 1600 px and held still above it. */
  --u: min(1vw, 16px);
  --gutter: 5.69vw;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  margin: 0;
  background: #fff;
  color: #000;
  font: 400 16px/1.6 var(--text);
}

main {
  flex: 1 0 auto;
}

h1,
h2,
h3,
p,
ul {
  margin: 0;
}

img,
svg {
  display: block;
}

a {
  color: inherit;
}

a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.skip {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 2;
  padding: 12px 16px;
  background: #fff;
}

.skip:focus {
  top: 8px;
}

/* ---- Announcement bar ---------------------------------------------------- */

.announce {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 39px;
  padding-inline: 16px;
  background: var(--blue);
  color: #fff;
  /* Wix scaled this text with the viewport and nothing else, which left it at
     5.5 px on a phone. The floor is the one deliberate departure in type: 16 px,
     easing down on the narrowest phones so the line still fits. */
  font: 800 clamp(min(16px, 4.3vw), 1.40625vw, 27px) / 1.6 var(--slab);
  letter-spacing: -0.014em;
  text-align: center;
}

.announce a {
  position: relative;
}

/* The default ring would fall outside the bar, white on white. */
.announce a:focus-visible {
  outline-offset: 1px;
}

/* Grows the tap target past 44 px without growing the bar. */
.announce a::after {
  content: "";
  position: absolute;
  inset: -10px -12px -12px;
}

/* ---- Logo and navigation ------------------------------------------------- */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 133px;
  padding-inline: var(--gutter);
}

.logo {
  color: var(--navy);
}

.logo img {
  width: 40.25vw;
  height: auto;
}

.site-nav ul {
  padding: 0;
  list-style: none;
}

.site-nav a {
  position: relative;
  display: block;
  border-bottom: 1px solid transparent;
  font-size: 15px;
  line-height: 21px;
  text-decoration: none;
}

.site-nav a::after {
  content: "";
  position: absolute;
  inset: -11px -8px -12px;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--blue);
}

.site-nav a[aria-current="page"] {
  border-bottom-color: currentColor;
}

/* ---- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  padding: 11.54vw 0 9.7vw;
  text-align: center;
}

.hero-art {
  width: 69.23vw;
  height: auto;
  margin-inline: auto;
  opacity: 0.49;
}

.hero h1,
.hero-sub,
.hero-lede {
  position: relative;
  margin-inline: auto;
  line-height: 1.3;
}

.hero h1 {
  max-width: 95.9vw;
  margin-top: 0.5vw;
  color: var(--navy);
  font-family: var(--slab);
  font-size: max(38px, 9.7436vw);
  font-weight: 600;
  letter-spacing: 0.024em;
}

.hero-sub,
.hero-lede {
  font-family: var(--display);
  font-weight: 700;
}

.hero-sub {
  max-width: 77.9vw;
  margin-top: 7.74vw;
  font-size: 2.96875vw;
}

.hero-lede {
  max-width: 70.5vw;
  margin-top: 10vw;
  font-size: 2.65625vw;
}

/* ---- Promise strip ------------------------------------------------------- */

.promise {
  padding: 2.56vw 7.44vw;
  background: #000;
  color: #fff;
  font: 400 clamp(20px, 2.1875vw, 28px) / 1.25 var(--display);
  text-align: center;
}

/* ---- About --------------------------------------------------------------- */

.about {
  padding: 7.9vw;
}

.about h2 {
  font: 600 clamp(34px, 6.25vw, 80px) / 1 var(--slab);
  letter-spacing: 0.024em;
}

.about ul {
  min-height: 200px;
  margin-top: 36px;
  padding-left: 29px;
}

/* ---- Why choose ---------------------------------------------------------- */

.why {
  padding: 30px 30px 54px;
  background: var(--navy);
  color: var(--cream);
  text-align: center;
}

.why h2 {
  /* Wide enough to break after "Get", as the Wix page did. */
  max-width: 270px;
  margin-inline: auto;
  padding-block: 20px;
  font: 600 clamp(32px, 5.3125vw, 68px) / 1.12 var(--slab);
  letter-spacing: 0.024em;
}

.why-item {
  padding: 30px;
}

.why-icon {
  margin: 0 auto 20px;
}

.why h3 {
  margin-bottom: 16px;
  font: 600 clamp(22px, 2.1875vw, 28px) / 1.143 var(--slab);
  letter-spacing: 0.024em;
}

/* ---- Footer -------------------------------------------------------------- */

.site-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  padding-inline: 16px;
  background: #000;
  color: #fff;
  font-size: 14px;
  line-height: 18px;
  text-align: center;
}

/* ---- 404 ----------------------------------------------------------------- */

.error {
  padding: 72px var(--gutter) 96px;
  text-align: center;
}

.error-code {
  color: var(--navy);
  font: 600 clamp(72px, 12vw, 160px) / 1 var(--slab);
  letter-spacing: 0.024em;
}

.error h1 {
  margin-top: 16px;
  font: 600 clamp(28px, 3.5vw, 44px) / 1.2 var(--slab);
  letter-spacing: 0.024em;
}

.error p {
  margin-top: 16px;
}

.error a {
  color: var(--blue);
}

/* ---- Tablet and desktop -------------------------------------------------- */

@media (min-width: 768px) {
  .masthead {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .logo {
    justify-self: start;
  }

  .logo img {
    width: min(16.8vw, 323px);
  }

  /* The illustration moves behind the text. */
  .hero {
    min-height: 540px;
    padding: calc(5.9 * var(--u)) 0 calc(5.1 * var(--u));
  }

  .hero-art {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(69.24 * var(--u));
    transform: translate(-50%, -50%);
  }

  .hero h1 {
    max-width: calc(69.3 * var(--u));
    margin-top: 0;
    font-size: calc(5.3134 * var(--u));
  }

  /* The Wix page sets this line right of center, and so does this one. */
  .hero-sub {
    left: calc(7.43 * var(--u));
    max-width: calc(79.58 * var(--u));
    margin-top: calc(3.33 * var(--u));
    font-size: calc(2.96875 * var(--u));
  }

  .hero-lede {
    max-width: calc(70.5 * var(--u));
    margin-top: calc(3.82 * var(--u));
    font-size: calc(2.65625 * var(--u));
  }

  .promise {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 4.31vw;
    padding: 0 var(--gutter);
  }

  .about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    width: min(87.36vw, 1398px);
    margin-inline: auto;
    padding: calc(3.125 * var(--u)) 0;
  }

  .about ul {
    min-height: 0;
    margin-top: 0;
    padding-block: 28px;
  }

  .why {
    padding: calc(3.125 * var(--u));
  }

  .why h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: none;
    min-height: 163px;
    padding-block: 0;
  }
}

/* The page has no animation or transition. This keeps it that way for anyone
   who asks for reduced motion, whatever is added later. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}