@font-face {
  /* Arial sized to Inter's metrics, so the swap to Inter doesn't move the layout. */
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107.4%;
  ascent-override: 90.2%;
  descent-override: 22.48%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial");
  size-adjust: 118%;
  ascent-override: 84%;
  descent-override: 20%;
}

:root {
  --navy: #0e1f3a;
  --navy-raised: #1b3360;
  --teal: #12806f;
  --page: #f3f5f8;
  --cream: #fbf6ec;
  --white: #ffffff;

  --ink-2: #45536b; /* secondary text: 7.6:1 on white, 7:1 on page */
  --on-navy: #ffffff;
  --on-navy-2: #b9c4d6; /* 9:1 on navy */
  --rule: #d9dee6;
  --rule-strong: #b8c0cc;
  --rule-navy: #2c4166;
  --rule-cream: #e8dfcc;

  --display: "Archivo", "Archivo Fallback", Arial, sans-serif;
  --body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display-stretch: 112%;

  --wrap: 1200px;
  --gutter: 16px;
  --col-gap: 24px;
  --radius: 4px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 760px) {
  :root {
    --gutter: 32px;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 16px;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--page);
  color: var(--navy);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-feature-settings: "cv11", "ss01";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--teal);
  color: var(--white);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3,
p,
dl,
dd,
figure {
  margin: 0;
}

h1,
h2 {
  font-family: var(--display);
  font-stretch: var(--display-stretch);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h3 {
  font-family: var(--body);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.005em;
}

a {
  color: inherit;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover {
  text-decoration-color: var(--teal);
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.num {
  font-variant-numeric: tabular-nums lining-nums;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  background: var(--navy);
  color: var(--white);
  padding: 10px 16px;
  border-radius: var(--radius);
  z-index: 10;
}

.skip:focus {
  top: 12px;
}

/* Wordmark */

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-stretch: var(--display-stretch);
  font-weight: 600;
  font-size: 1.375rem;
  letter-spacing: -0.015em;
  line-height: 1;
  color: var(--navy);
  text-decoration: none;
}

.logo {
  width: 22px;
  height: auto;
  flex: none;
}

/* Buttons and links */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: var(--radius);
  border: 0;
  background: var(--navy);
  color: var(--white);
  font-family: var(--body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.2s var(--ease-out), translate 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

.btn:hover {
  background: var(--navy-raised);
  color: var(--white);
}

@media (prefers-reduced-motion: no-preference) {
  .btn:hover {
    translate: -2px -2px;
    box-shadow: 2px 2px 0 var(--teal), 4px 4px 0 #1f6fd1;
  }
}

.btn-small {
  min-height: 40px;
  padding: 9px 16px;
  font-size: 0.9375rem;
}

.btn-outline {
  background: transparent;
  color: var(--navy);
  box-shadow: inset 0 0 0 2px var(--navy);
  cursor: pointer;
}

.btn-outline:hover {
  background: var(--navy);
}

.hero-note {
  margin-top: 18px;
  font-size: 0.9375rem;
  font-weight: 500;
}

.hero-email {
  margin-top: 4px;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.hero-offer {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-cream);
  max-width: 36rem;
  font-size: 0.9375rem;
  color: var(--ink-2);
  /* Room for its wrapped length in Inter, so the swap from the fallback font doesn't push the film down. */
  min-height: calc(2lh + 14px);
}

.hero-offer strong {
  font-weight: 600;
  color: var(--navy);
}

/* Keeps a hyphenated phrase such as "15-minute" on one line. */
.nowrap {
  white-space: nowrap;
}

.select-all {
  user-select: all;
  -webkit-user-select: all;
  font-weight: 600;
  color: var(--navy);
}

.text-link {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
}

/* Header */

.site-header {
  background: var(--cream);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 24px;
  padding-top: 14px;
  padding-bottom: 6px;
}

.nav-links {
  order: 3;
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 0 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  font-weight: 500;
  /* one row on phones: the four links fit from 340px; narrower screens scroll the row sideways */
  overflow-x: auto;
  scrollbar-width: none;
}

.nav-links a {
  display: inline-block;
  padding: 10px 0;
  white-space: nowrap;
  text-decoration: none;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  text-decoration: underline;
}

.nav-links a[aria-current="page"] {
  text-decoration-color: var(--teal);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

@media (min-width: 760px) {
  .nav {
    flex-wrap: nowrap;
    padding-top: 18px;
    padding-bottom: 18px;
  }
  .nav-links {
    order: 0;
    width: auto;
    margin-left: auto;
    justify-content: flex-start;
    gap: 32px;
    font-size: 0.9375rem;
    overflow-x: visible;
  }
}

/* Hero */

.hero {
  background: var(--cream);
  padding-bottom: 56px;
  border-bottom: 1px solid var(--rule-cream);
}

.hero-grid {
  display: grid;
  gap: 20px;
  padding-top: 32px;
}

.hero h1 {
  font-size: clamp(1.875rem, 4.2vw, 2.875rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  max-width: 20ch;
}

.hero-audience {
  margin-top: 16px;
  max-width: 30rem;
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink-2);
}

.lede {
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  line-height: 1.55;
  max-width: 36rem;
}

.hero-actions {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}

@media (min-width: 960px) {
  .hero {
    padding-bottom: 96px;
  }
  .hero-grid {
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--col-gap);
    padding-top: 32px;
  }
  .hero-head {
    grid-column: 1 / span 6;
  }
  .hero-copy {
    grid-column: 7 / span 6;
    padding-top: 6px;
  }
}

/* Explainer film */

.film {
  margin-top: 40px;
}

.film-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--page);
  box-shadow: 0 1px 2px rgb(14 31 58 / 0.12), 0 24px 56px rgb(14 31 58 / 0.16);
}

.film video,
.film-poster img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--page);
}

@media (min-width: 760px) {
  .film video,
  .film-poster img {
    aspect-ratio: 16 / 9;
  }
}

/* The whole poster is the play button; the visible label is a pill in the middle. */
.film-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px;
  border: 0;
  background: transparent;
  color: var(--white);
  font: 600 1.0625rem/1.2 var(--body);
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out);
}

/* film.js unhides the button; without JavaScript it stays hidden (display: flex above would beat [hidden]). */
.film-play[hidden] {
  display: none;
}

/* Wide screens: sit the label under the poster's headline, in the empty left column, so it shows
   above the fold. Padding percentages are of the width: 20.25% is 36% of a 16:9 frame's height. */
@media (min-width: 760px) {
  .film-play {
    align-items: flex-start;
    justify-content: flex-start;
    padding: 20.25% 0 0 5%;
  }
}

.film-play-label {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 10px 24px 10px 12px;
  border-radius: 999px;
  background: var(--navy);
  box-shadow: 0 2px 4px rgb(14 31 58 / 0.2), 0 12px 32px rgb(14 31 58 / 0.28);
  transition: background-color 0.2s var(--ease-out), scale 0.25s var(--ease-out);
}

.film-play-icon {
  flex: none;
  width: 36px;
  height: 36px;
}

.film-play:hover {
  background: rgb(14 31 58 / 0.05);
}

.film-play:hover .film-play-label,
.film-play:focus-visible .film-play-label {
  background: var(--navy-raised);
}

@media (prefers-reduced-motion: no-preference) {
  .film-play:hover .film-play-label {
    scale: 1.04;
  }
}

/* The frame clips overflow, so draw the focus ring inside the poster and around the label. */
.film-play:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: -3px;
  border-radius: var(--radius);
}

.film-play:focus-visible .film-play-label {
  box-shadow: 0 0 0 3px var(--cream), 0 0 0 5px var(--teal);
}

@media (min-width: 960px) {
  .film {
    margin-top: 40px;
  }
}

.film figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 16px;
  font-size: 0.875rem;
  color: var(--ink-2);
}

/* Transcript under the film */

.transcript {
  margin-top: 20px;
  max-width: 44rem;
  border-top: 1px solid var(--rule-cream);
  border-bottom: 1px solid var(--rule-cream);
}

.transcript summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 48px;
  padding: 12px 0;
  font-weight: 600;
  font-size: 0.9375rem;
}

.transcript summary::-webkit-details-marker {
  display: none;
}

.transcript[open] .plus::after {
  transform: scaleY(0);
}

.transcript-body {
  padding: 4px 0 20px;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.transcript-body p + p {
  margin-top: 8px;
}

/* Page heading for inner pages */

.page-head {
  background: var(--cream);
  border-bottom: 1px solid var(--rule-cream);
  padding: 40px 0 48px;
}

.page-head h1 {
  font-size: clamp(2rem, 4.4vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  max-width: 18ch;
}

.page-head .split-body {
  align-self: end;
}

.inputs {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-cream);
  max-width: 36rem;
  font-size: 0.9375rem;
}

.inputs span {
  display: block;
  margin-bottom: 2px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-2);
}

@media (min-width: 960px) {
  .page-head {
    padding: 72px 0 80px;
  }
}

/* Section scaffolding */

.section {
  padding: 72px 0;
}

@media (min-width: 960px) {
  .section {
    padding: 112px 0;
  }
  .section-tight {
    padding: 88px 0;
  }
}

.split {
  display: grid;
  gap: 32px;
}

.split-head h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.25rem);
  line-height: 1.12;
}

.split-head p {
  margin-top: 14px;
  color: var(--ink-2);
  max-width: 34rem;
}

@media (min-width: 960px) {
  .split {
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--col-gap);
  }
  .split-head {
    grid-column: 1 / span 4;
  }
  .split-body {
    grid-column: 6 / span 7;
  }
}

/* Sample report */

.report {
  background: var(--navy);
  color: var(--on-navy);
}

.report .split-lead {
  color: var(--on-navy-2);
  max-width: 38rem;
}

.report :focus-visible {
  outline-color: var(--white);
}

.report-grid {
  margin-top: 48px;
  display: grid;
  gap: 48px;
}

.report-grid > * {
  min-width: 0;
}

.sheet-fig a {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25), 0 18px 48px rgb(0 0 0 / 0.28);
  transition: translate 0.3s var(--ease-out);
}

@media (prefers-reduced-motion: no-preference) {
  .sheet-fig a:hover {
    translate: 0 -3px;
  }
}

.demo-tab {
  background: var(--navy-raised);
  color: var(--on-navy);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 10px 16px;
  border-radius: var(--radius) var(--radius) 0 0;
}

.demo-tab + a {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.sheet-fig figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-navy);
  font-size: 0.875rem;
  color: var(--on-navy-2);
}

.sheet-fig figcaption b {
  color: var(--on-navy);
  font-weight: 600;
  min-width: 3.5em;
}

.zoom-hint {
  flex-basis: 100%;
}

/* Phones: show report pages at a readable size inside a sideways-scrolling frame. */
@media (max-width: 759px) {
  .sheet-fig a {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  .sheet-fig img {
    width: 720px;
    max-width: none;
  }
}

@media (min-width: 760px) {
  .zoom-hint {
    display: none;
  }
}

.demo-figures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--rule-navy);
}

.demo-figures div {
  padding: 20px 0 22px;
}

.demo-figures div + div {
  padding-left: 20px;
  border-left: 1px solid var(--rule-navy);
}

.demo-figures .after {
  border-top: 4px solid var(--teal);
  margin-top: -1px;
}

.demo-figures dt {
  font-size: 0.875rem;
  color: var(--on-navy-2);
  line-height: 1.4;
  max-width: 16rem;
}

.demo-figures dd {
  margin-top: 10px;
  font-family: var(--display);
  font-stretch: var(--display-stretch);
  font-weight: 600;
  font-size: clamp(3.25rem, 9vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.demo-figures-note {
  border-top: 1px solid var(--rule-navy);
  border-bottom: 1px solid var(--rule-navy);
  padding: 12px 0;
  font-size: 0.875rem;
  color: var(--on-navy-2);
}

.contents h2 {
  font-family: var(--body);
  font-stretch: normal;
  font-size: 0.9375rem;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--on-navy);
}

.report-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 32px;
  padding-top: 32px;
  border-top: 1px solid var(--rule-navy);
}

.report-cta p {
  font-family: var(--display);
  font-stretch: var(--display-stretch);
  font-weight: 600;
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* On the navy report section the main button turns light, so it still stands out. */
.report .btn {
  background: var(--white);
  color: var(--navy);
}

.report .btn:hover {
  background: var(--cream);
  color: var(--navy);
}

@media (max-width: 759px) {
  .report-cta .btn {
    width: 100%;
  }
}

.contents ol {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  color: var(--on-navy-2);
}

.contents li {
  padding: 8px 0;
  border-top: 1px solid var(--rule-navy);
}

@media (min-width: 960px) {
  .report-grid {
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--col-gap);
    row-gap: 72px;
  }
  .exhibit {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--col-gap);
    align-items: stretch;
  }
  .demo-figures {
    grid-column: 1 / span 8;
    border-bottom: 1px solid var(--rule-navy);
  }
  .demo-figures-note {
    grid-column: 9 / span 4;
    display: flex;
    align-items: flex-end;
    padding-bottom: 22px;
  }
  .fig-summary {
    grid-column: 1 / span 8;
  }
  .contents {
    grid-column: 10 / span 3;
    align-self: start;
    padding-top: 40px;
  }
  .fig-table {
    grid-column: 1 / span 10;
  }
  .fig-plan {
    grid-column: 4 / span 9;
  }
  .report-cta {
    grid-column: 1 / -1;
  }
}

/* Process */

.process {
  background: var(--white);
}

.track {
  margin: 0;
  padding: 0 0 0 32px;
  list-style: none;
  position: relative;
}

.track::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--rule-strong);
}

.track li {
  position: relative;
  padding-bottom: 28px;
}

.track li:last-child {
  padding-bottom: 0;
}

.track li::before {
  content: "";
  position: absolute;
  left: -32px;
  top: 6px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--navy);
}

.track li.done::before {
  z-index: 1;
  background: var(--teal);
  border-color: var(--teal);
  box-shadow: inset 0 0 0 2px var(--white);
}

.track h2 {
  font-family: var(--body);
  font-stretch: normal;
  font-size: 1.0625rem;
  line-height: 1.4;
  letter-spacing: -0.005em;
}

.track p {
  margin-top: 4px;
  color: var(--ink-2);
  max-width: 34rem;
}

.track .who {
  margin-top: 8px;
  font-size: 0.875rem;
  color: var(--navy);
}

.track .who span {
  color: var(--ink-2);
}

.status {
  display: inline-block;
  margin-top: 12px;
  padding: 3px 10px;
  border-radius: var(--radius);
  background: var(--teal);
  color: var(--white);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

@media (min-width: 960px) {
  .track {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: var(--col-gap);
    padding: 32px 0 0;
  }
  .track::before {
    left: 6px;
    right: calc((100% - 4 * var(--col-gap)) / 5);
    top: 6px;
    bottom: auto;
    width: auto;
    height: 1px;
  }
  .track li {
    padding: 0;
  }
  .track li::before {
    left: 0;
    top: -32px;
  }
  .track li.done::after {
    content: "";
    position: absolute;
    top: -26.5px;
    right: calc(100% - 6px);
    width: calc(100% + var(--col-gap));
    height: 2px;
    background: var(--teal);
  }
}

.stage-cta {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 32px;
}

.stage-cta p {
  max-width: 34rem;
  font-size: 1.125rem;
  font-weight: 500;
}

@media (max-width: 759px) {
  .stage-cta .btn {
    width: 100%;
  }
}

@media (min-width: 960px) {
  .stage-cta {
    margin-top: 72px;
  }
}

/* How we decide what comes first */

.levels {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule-strong);
}

.levels li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}

.levels .p {
  justify-self: start;
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.levels-note {
  margin-top: 20px;
  max-width: 38rem;
  color: var(--ink-2);
}

.levels-note a {
  color: var(--navy);
  font-weight: 500;
  text-decoration-color: var(--teal);
}

.questions {
  background: var(--white);
}

.faq details p a {
  color: var(--navy);
  text-decoration-color: var(--teal);
}

/* Price */

.sheet {
  margin: 0;
}

/* One card now; two or three tier cards later sit side by side (see the wide-screen rules below). */
.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--col-gap);
}

.tier {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 24px 28px;
  border-top: 3px solid var(--navy);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--white);
  box-shadow: 0 1px 2px rgb(14 31 58 / 0.08);
}

.product-name {
  font-family: var(--body);
  font-stretch: normal;
  font-size: 1.0625rem;
  line-height: 1.4;
  letter-spacing: -0.005em;
}

/* No prices on the site: the card says how the fixed price is set, and the button asks for the review. */
.pricing-rule {
  font-weight: 500;
}

.quote {
  margin-top: 14px;
  font-family: var(--display);
  font-stretch: var(--display-stretch);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.quote-steps {
  margin: 20px 0 28px;
  padding-left: 1.25rem;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.quote-steps li::marker {
  color: var(--teal);
  font-weight: 600;
}

.quote-steps li + li {
  margin-top: 8px;
}

.tier .btn {
  margin-top: auto;
}

@media (max-width: 759px) {
  .tier .btn {
    width: 100%;
  }
}

.spec {
  margin-top: 32px;
  border-top: 2px solid var(--navy);
}

.spec div {
  display: grid;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}

.spec div:last-child {
  border-bottom: 0;
}

.spec dt {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-2);
}

.spec ul {
  margin: 0;
  padding-left: 1.1rem;
}

.spec li::marker {
  color: var(--teal);
}

.spec li + li {
  margin-top: 4px;
}

@media (min-width: 640px) {
  .spec div {
    grid-template-columns: 10rem 1fr;
    gap: 24px;
  }
  .spec dt {
    padding-top: 2px;
  }
}

@media (min-width: 960px) {
  .sheet {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--col-gap);
    align-items: start;
  }
  .tiers {
    grid-column: 1 / span 4;
    position: sticky;
    top: 32px;
  }
  .spec {
    grid-column: 6 / span 7;
    margin-top: 0;
  }
  /* Two or three tiers: the cards take the full width and the shared details go underneath. */
  .sheet:has(.tier + .tier) .tiers {
    grid-column: 1 / -1;
    position: static;
  }
  .sheet:has(.tier + .tier) .spec {
    grid-column: 4 / span 9;
    margin-top: 56px;
  }
}

/* Partners */

.partners {
  background: var(--white);
}

.terms {
  border-top: 1px solid var(--rule-strong);
}

.terms div {
  display: grid;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}

.terms dt {
  font-weight: 600;
}

.terms dd {
  color: var(--ink-2);
}

.partners-note {
  margin-top: 24px;
  max-width: 38rem;
  color: var(--ink-2);
}

.partners-note b {
  color: var(--navy);
  font-weight: 600;
}

.partners .btn {
  margin-top: 32px;
}

@media (max-width: 759px) {
  .partners .btn {
    width: 100%;
  }
}

@media (min-width: 640px) {
  .terms div {
    grid-template-columns: 10rem 1fr;
    gap: 24px;
  }
}

/* Questions */

.faq {
  border-top: 1px solid var(--rule-strong);
}

.faq details {
  border-bottom: 1px solid var(--rule);
}

.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
  font-weight: 600;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary:hover {
  color: var(--navy-raised);
}

.plus {
  flex: none;
  position: relative;
  width: 14px;
  height: 14px;
}

.plus::before,
.plus::after {
  content: "";
  position: absolute;
  background: var(--navy);
  border-radius: 1px;
  transition: transform 0.25s var(--ease-out);
}

.plus::before {
  left: 0;
  right: 0;
  top: 6px;
  height: 2px;
}

.plus::after {
  top: 0;
  bottom: 0;
  left: 6px;
  width: 2px;
}

.faq details[open] .plus::after {
  transform: scaleY(0);
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .sheet-fig a,
  .plus::before,
  .plus::after {
    transition: none;
  }
}

.faq details p {
  padding: 0 0 22px;
  color: var(--ink-2);
  max-width: 38rem;
}

/* Contact */

.contact {
  background: var(--cream);
  border-top: 1px solid var(--rule-cream);
}

@media (min-width: 960px) {
  .contact.section-tight {
    padding: 120px 0;
  }
}

.contact-email {
  display: inline-block;
  font-family: var(--display);
  font-stretch: var(--display-stretch);
  font-weight: 600;
  font-size: clamp(1.625rem, 6.4vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
  text-decoration-color: var(--teal);
  overflow-wrap: anywhere;
}

/* From 960 px the address sits in the 7-column body, which is narrower than the full width it had
   below that. Scale it with the viewport so it fits that column at every width (reaching full size
   at about 1180 px); a longer address would wrap rather than push the page sideways. */
@media (min-width: 960px) {
  .contact-email {
    font-size: clamp(2.25rem, 4.4vw, 3.25rem);
  }
}

.contact-email:hover {
  text-decoration-thickness: 4px;
}

.contact-address {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}

.contact .split-body p {
  margin-top: 20px;
  color: var(--ink-2);
  max-width: 34rem;
}

/* Footer */

.site-footer {
  background: var(--cream);
  border-top: 1px solid var(--rule-cream);
  padding: 32px 0 40px;
  font-size: 0.875rem;
  color: var(--ink-2);
}

.footer-grid {
  display: grid;
  gap: 16px;
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
}

.footer-meta a {
  display: inline-block;
  padding: 10px 0;
  margin: -10px 0;
  color: var(--navy);
}

@media (min-width: 960px) {
  .footer-grid {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 48px;
  }
  .footer-meta {
    justify-content: flex-end;
  }
  /* The company line has a row to itself, so the privacy link and copyright sit together below it
     (as on phones) instead of the copyright wrapping alone under the link. */
  .footer-company {
    flex-basis: 100%;
    text-align: right;
  }
}

/* Privacy page */

.doc {
  background: var(--white);
  padding: 56px 0 96px;
}

.doc .split-body > * + * {
  margin-top: 14px;
}

.doc h1 {
  font-size: clamp(2.25rem, 6vw, 3rem);
  line-height: 1.08;
}

.doc .updated {
  margin-top: 12px;
  color: var(--ink-2);
}

.doc .split-body > h2 {
  font-size: 1.375rem;
  line-height: 1.25;
  margin-top: 44px;
}

.doc .split-body > h2:first-child {
  margin-top: 0;
}

.doc ul {
  padding-left: 1.25rem;
}

.doc li::marker {
  color: var(--teal);
}

.doc li + li {
  margin-top: 6px;
}

.doc a {
  font-weight: 500;
  text-decoration-color: var(--teal);
}

.doc .split-head {
  align-self: start;
}

.doc-index ol {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.doc-index a {
  display: block;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--ink-2);
  text-decoration: none;
}

.doc-index a:hover {
  color: var(--navy);
}

@media (max-width: 959px) {
  .doc-index {
    display: none;
  }
}

@media (min-width: 960px) {
  .doc .split-head {
    position: sticky;
    top: 32px;
  }
}

/* Where we fit */

.fit {
  background: var(--white);
}

.fit .split-lead {
  color: var(--ink-2);
  max-width: 38rem;
}

.flow {
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 40px;
}

.flow-step {
  position: relative;
  min-width: 0;
  border-top: 2px solid var(--navy);
  padding-top: 18px;
}

.flow-step > p {
  margin-top: 6px;
  color: var(--ink-2);
  font-size: 0.9375rem;
  max-width: 30rem;
}

/* Arrow to the next step: downwards on phones, sideways on wide screens. */
.flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -30px;
  width: 12px;
  height: 18px;
  translate: -50% 0;
  background: var(--rule-strong);
  clip-path: polygon(40% 0, 60% 0, 60% 55%, 100% 55%, 50% 100%, 0 55%, 40% 55%);
}

.flow-us {
  border-top: 0;
  padding: 22px 24px 24px;
  background: var(--navy);
  color: var(--on-navy);
  border-radius: var(--radius);
}

.flow-tasks {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  color: var(--on-navy-2);
}

.flow-tasks li {
  display: grid;
  grid-template-columns: 5.75rem 1fr;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--rule-navy);
}

.flow-tasks b {
  color: var(--on-navy);
  font-weight: 600;
}

.flow-tasks li:last-child b {
  color: #5fd3bf;
}

.flow-us > .flow-it {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-navy);
  font-size: 0.875rem;
  color: var(--on-navy-2);
}

.mini-list {
  margin-top: 20px;
  display: grid;
  gap: 6px;
  max-width: 24rem;
}

.mini-list span {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
}

.mini-list i {
  font-style: normal;
  font-weight: 400;
  color: var(--ink-2);
}

.mini-list em {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--teal);
  color: var(--white);
  font-style: normal;
  font-size: 0.75rem;
}

.p {
  flex: none;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--white);
}

.p1 {
  background: #c4402b;
}

.p2 {
  background: #f2a93b;
  color: var(--navy);
}

.p3 {
  background: #6b4fd8;
}

.p4 {
  background: var(--ink-2);
}

@media (min-width: 960px) {
  .flow {
    margin-top: 64px;
    grid-template-columns: 1fr 1.15fr 1fr;
    gap: 56px;
    align-items: start;
  }
  .flow-step:not(:last-child)::after {
    left: auto;
    right: -38px;
    bottom: auto;
    top: 50%;
    width: 18px;
    height: 12px;
    translate: 0 -50%;
    clip-path: polygon(0 40%, 55% 40%, 55% 0, 100% 50%, 55% 100%, 55% 60%, 0 60%);
  }
  .flow-step:not(.flow-us)::after {
    top: 120px;
  }
}

/* Facing a deadline? (home page) */

.deadline-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--navy);
}

.deadline-list li {
  padding: 22px 0 24px;
  border-bottom: 1px solid var(--rule-strong);
}

.deadline-list li > p {
  margin-top: 6px;
  max-width: 40rem;
  color: var(--ink-2);
}

.deadline-list .deadline-source {
  margin-top: 12px;
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.deadline-source a {
  color: var(--navy);
  font-weight: 500;
  text-decoration-color: var(--teal);
}

.deadline-do {
  margin-top: 32px;
  padding: 20px 24px;
  max-width: 40rem;
  background: var(--white);
  border-left: 3px solid var(--teal);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.deadline-do p + p {
  margin-top: 10px;
  color: var(--ink-2);
}

.deadline-do b {
  font-weight: 600;
}

.deadline-cta {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}

.deadline-cta p {
  font-weight: 500;
}

@media (max-width: 759px) {
  .deadline-cta .btn {
    width: 100%;
  }
}

/* Proof strip on the homepage */

.sample-link {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
}

.report .sample-link .text-link {
  margin-top: 0;
}

.sample-caption {
  color: var(--on-navy-2);
  font-size: 0.9375rem;
}

.proof .demo-figures-note {
  border-bottom: 0;
}

.report .text-link {
  display: inline-block;
  margin-top: 20px;
  color: var(--on-navy);
  text-decoration-color: var(--teal);
}

/* Lists of links to other pages */

.page-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule-strong);
}

.page-list a {
  display: grid;
  gap: 4px;
  padding: 20px 40px 20px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  position: relative;
}

.page-list a::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 16px;
  height: 12px;
  translate: 0 -50%;
  background: var(--navy);
  clip-path: polygon(0 40%, 60% 40%, 60% 0, 100% 50%, 60% 100%, 60% 60%, 0 60%);
  transition: translate 0.25s var(--ease-out), background-color 0.2s var(--ease-out);
}

.page-name {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s var(--ease-out);
}

.page-desc {
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.page-list a:hover .page-name {
  text-decoration-color: var(--teal);
}

.page-list a:hover::after {
  background: var(--teal);
  translate: 4px -50%;
}

.more {
  background: var(--white);
}

.next {
  margin-top: 32px;
}

@media (prefers-reduced-motion: reduce) {
  .film-play,
  .film-play-label,
  .page-list a::after {
    transition: none;
  }
}

@media (max-width: 759px) {
  .hero-actions .btn {
    width: 100%;
  }
}

/* Hero: founder line */

.hero-founder {
  margin-top: 8px;
  color: var(--navy);
  font-weight: 500;
}

/* Autoplaying film: sound and pause buttons, captions */

.film-controls {
  position: absolute;
  right: 12px;
  top: 12px;
  display: flex;
  gap: 8px;
}

.film-ctrl {
  font: 600 0.875rem/1 var(--body);
  color: var(--white);
  background: rgb(14 31 58 / 0.86);
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: 999px;
  padding: 9px 14px;
  cursor: pointer;
}

.film-ctrl:hover {
  background: var(--navy);
}

.film-ctrl:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}

.film-sound {
  background: var(--teal);
  border-color: var(--teal);
}

.film video::cue {
  font-family: var(--body);
  font-size: 0.95em;
  background: rgb(14 31 58 / 0.82);
  color: #ffffff;
}

/* Got a deadline? strip */

.deadline-strip .split-body > p {
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  max-width: 38rem;
}

.tags {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tags a {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  color: var(--navy);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  background: var(--white);
}

.tags a:hover,
.tags a:focus-visible {
  border-color: var(--teal);
  color: var(--teal);
}

.fit > .wrap > h2 {
  margin-bottom: 28px;
}

/* Contact form */

.contact-lede {
  margin-top: 12px;
  color: var(--ink-2);
  max-width: 22rem;
}

.contact-form {
  display: grid;
  gap: 18px;
  max-width: 34rem;
  margin-bottom: 40px;
}

.contact-form[hidden] {
  display: none;
}

.field {
  display: grid;
  gap: 6px;
}

.field label {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--navy);
}

.field .optional {
  font-weight: 400;
  color: var(--ink-2);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 12px;
  font: 400 1rem/1.4 var(--body);
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
}

.field textarea {
  min-height: 132px;
  resize: vertical;
}

.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(135deg, var(--navy) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 1px;
  border-color: var(--teal);
}

.field [aria-invalid="true"] {
  border-color: #b3261e;
  box-shadow: inset 0 0 0 1px #b3261e;
}

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.turnstile:empty {
  min-height: 65px;
}

.contact-form .btn {
  justify-self: start;
  min-width: 140px;
  cursor: pointer;
}

.contact-form .btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

.contact .split-body .form-status {
  margin-top: 0;
  min-height: 1.5em;
}

.contact .split-body .form-status[data-kind="error"] {
  color: #b3261e;
  font-weight: 500;
}

.form-done {
  max-width: 34rem;
  margin-bottom: 40px;
  padding: 20px 22px;
  background: var(--white);
  border-left: 4px solid var(--teal);
  border-radius: var(--radius);
}

.form-done:focus {
  outline: none;
}

.contact .split-body .form-done-title {
  margin: 0;
  font-family: var(--display);
  font-stretch: var(--display-stretch);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--navy);
}

@media (max-width: 559px) {
  .contact-form .btn {
    justify-self: stretch;
  }
}

/* Under the form, the address is the backup route: smaller than before. */
.contact-form ~ .contact-address .contact-email {
  font-size: clamp(1.25rem, 4.4vw, 1.75rem);
}