/* Shared styles for index.html and thanks.html */

/* Base (replaces the old theme stylesheets) */
html {
  font-size: 62.5%;
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
body {
  margin: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  font-family: Poppins, "Helvetica Neue", sans-serif;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
img,
button {
  vertical-align: middle;
}
input,
select,
button {
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}

body {
  background: #fff;
  color: #111;
}

/* Top bar wordmark */
.top-bar {
  padding: 2.4rem 20px 0;
  text-align: center;
}
.wordmark {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.2;
  color: #000;
}
.wordmark-title {
  font-size: 1.5rem;
  font-weight: 700;
}
.wordmark-byline {
  font-size: 1.2rem;
  font-weight: 400;
  color: #555;
}

/* Page */
.page {
  max-width: 600px;
  margin: 0 auto;
  padding: 5.6rem 20px 8rem;
}

/* Intro */
.intro {
  text-align: center;
}
.page h1 {
  margin: 0 0 1.6rem;
  font-size: clamp(3rem, 8vw, 4.4rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #000;
  text-wrap: balance;
}
/* Hand-drawn green highlighter stroke behind key words */
.marker {
  margin: 0 -0.1em;
  padding: 0 0.1em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M5 14C40 10.5 90 15 130 12S185 10.5 195 11.5' fill='none' stroke='%2315803d' stroke-width='17' stroke-linecap='round' opacity='0.28'/%3E%3C/svg%3E") 0 70% / 100% 0.9em no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.lead {
  max-width: 30em;
  margin: 0 auto;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.55;
  color: #444;
  text-wrap: balance;
}
/* Playbook cover */
.cover {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin: 2.4rem auto 1.6rem;
}

/* Case studies */
.page h3 {
  margin: 0 0 2rem;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
  color: #15803d;
}
.case-studies {
  margin: 0 0 4rem;
  padding: 0;
  list-style: none;
  counter-reset: case;
}
.case-studies li {
  position: relative;
  margin: 0 0 1.2rem;
  padding: 2rem 2rem 2rem 8.4rem;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.5;
  color: #333;
  background: #f6f6f4;
  border-radius: 10px;
  counter-increment: case;
}
/* Number, with a hand-drawn green circle around it */
.case-studies li::before,
.case-studies li::after {
  position: absolute;
  top: 50%;
  left: 1.8rem;
  width: 48px;
  height: 48px;
  margin-top: -24px;
}
.case-studies li::before {
  content: counter(case);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
}
.case-studies li::after {
  content: "";
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M41 9C31 3 13 6 7 21C1 37 13 54 31 53C48 52 57 38 52 22C48 11 37 5 22 8' fill='none' stroke='%2315803d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Turn each circle a little differently so they look drawn by hand */
.case-studies li:nth-child(2)::after {
  transform: rotate(120deg) scale(1.04, 0.96);
}
.case-studies li:nth-child(3)::after {
  transform: rotate(-60deg) scaleX(-1);
}
.case-studies u {
  font-weight: 700;
  text-decoration: none;
  color: #000;
}

/* Opt-in form: first name + email, then phone + business type, side by side (stacked on phones) */
.optin-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.2rem;
}
.optin .field {
  margin: 0 0 1.2rem;
}
.optin label {
  display: block;
  margin: 0 0 0.4rem;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.4;
  color: #333;
}
.optin input,
.optin select {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 13px 16px;
  font-family: inherit;
  font-size: 1.6rem;
  line-height: 1.4;
  color: #000;
  background: #fff;
  border: 1.5px solid #ccc;
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Dropdown arrow, since appearance: none removes the browser's own */
.optin select {
  padding-right: 44px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 18px no-repeat;
  cursor: pointer;
}
/* "Select your business type" shows in placeholder grey until a type is picked */
.optin select:invalid {
  color: #757575;
}
.optin select option {
  color: #000;
}
.optin input::placeholder {
  color: #757575;
}
.optin input:focus,
.optin select:focus {
  border-color: #15803d;
  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.15);
  outline: none;
}
.optin [aria-invalid="true"] {
  border-color: #b91c1c;
}
.optin [aria-invalid="true"]:focus {
  border-color: #b91c1c;
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.15);
}
/* Text/call consent line above the submit button */
.optin-consent {
  margin: 0.4rem 0 1.2rem;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.5;
  color: #555;
}
.optin-consent a {
  color: inherit;
  text-decoration: underline;
}
/* Inline message under a field that needs fixing */
.field-error {
  margin: 0.4rem 0 0;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.4;
  color: #b91c1c;
}
.field-error[hidden] {
  display: none;
}
.optin button:disabled {
  cursor: default;
  opacity: 0.8;
}
@media (max-width: 599px) {
  .optin-row {
    grid-template-columns: 1fr;
  }
  .page h1 + .lead {
    font-size: 1.5rem;
  }
  /* Smaller on phones so the form starts higher up the screen */
  .cover {
    max-width: 270px;
    margin: 1.2rem auto 0.8rem;
  }
}
.optin button {
  display: block;
  width: 100%;
  margin: 0.4rem 0 0;
  padding: 17px;
  font-family: inherit;
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  background: #15803d;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.optin button:hover,
.optin button:focus-visible {
  background: #116932;
}
.optin button:focus-visible {
  outline: 3px solid rgba(21, 128, 61, 0.35);
  outline-offset: 2px;
}

/* What's Inside, below the opt-in */
.inside {
  margin: 5.6rem 0 0;
}
.inside h3 {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.inside .case-studies {
  margin: 0;
}

/* Shown when the opt-in submit fails */
.optin-error {
  margin: 1.2rem 0 0;
  font-size: 1.5rem;
  line-height: 1.5;
  text-align: center;
  color: #b91c1c;
}
.optin-error[hidden] {
  display: none;
}

/* Footer */
.site-footer {
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem 20px 2.4rem;
  font-size: 1.3rem;
  line-height: 1.5;
  text-align: center;
  color: #999;
  border-top: 1px solid #eee;
}

/* Thank-you page: confirmation → video → one Apply button */
.page-ty {
  max-width: 680px;
  padding-top: 5.6rem;
  padding-bottom: 5.6rem;
}
/* Small label above the headline */
.eyebrow {
  margin: 0 0 1rem;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: #15803d;
}
.page-ty h1 {
  margin-bottom: 1.6rem;
  font-size: clamp(2.6rem, 6.4vw, 3.8rem);
}
.page-ty .lead {
  max-width: none;
  margin: 0 0 1rem;
  font-size: 1.7rem;
  text-wrap: pretty;
}
/* The three proof points: centered, one per row, split by hairlines so each reads at a glance */
.proof-list {
  max-width: 30em;
  margin: 0 auto 0.4rem;
  padding: 0;
  list-style: none;
  text-align: center;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.45;
  color: #333;
}
.proof-list li {
  padding: 1rem 0;
  text-wrap: balance;
}
.proof-list li + li {
  border-top: 1px solid #e8efe9;
}
/* Green check in front of each point */
.proof-list li::before {
  content: "";
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  margin: 0 0.4em 0 0;
  vertical-align: -0.2em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%2315803d'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.proof-list strong {
  font-weight: 700;
  color: #000;
}
.page h2 {
  margin: 0 0 1rem;
  font-size: clamp(2.4rem, 5.5vw, 2.8rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
  color: #000;
  text-wrap: balance;
}
.section-copy {
  max-width: 32em;
  margin: 0 auto 2rem;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.6;
  text-align: center;
  color: #444;
  text-wrap: pretty;
}

/* Video */
.vsl-frame {
  position: relative;
  width: 100%;
  margin: 2.4rem 0 0;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}
.vsl-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
/* Dimmed thumbnail with a play button, replaced by the player on click */
.vsl-poster {
  all: unset;
  position: absolute;
  inset: 0;
  display: block;
  cursor: pointer;
}
.vsl-poster[hidden] {
  display: none;
}
.vsl-poster:focus-visible {
  outline: 3px solid #15803d;
  outline-offset: -3px;
}
.vsl-poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vsl-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  transition: background-color 0.15s ease;
}
.vsl-poster:hover::after,
.vsl-poster:focus-visible::after {
  background: rgba(0, 0, 0, 0.35);
}
.vsl-play {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: clamp(56px, 14vw, 84px);
  height: clamp(56px, 14vw, 84px);
  border-radius: 50%;
  background: #15803d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23fff'/%3E%3C/svg%3E") 56% 50% / 44% no-repeat;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.vsl-poster:hover .vsl-play,
.vsl-poster:focus-visible .vsl-play {
  background-color: #116932;
  transform: translate(-50%, -50%) scale(1.06);
}
/* Shown only if the player can't load */
.vsl-retry {
  margin: 1.2rem 0 0;
  font-size: 1.6rem;
  line-height: 1.5;
  color: #666;
}
.vsl-retry[hidden] {
  display: none;
}
.vsl-retry button {
  margin: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: #15803d;
  text-decoration: underline;
  background: none;
  border: 0;
  cursor: pointer;
}

/* The one call to action, directly under the video */
.ty-cta {
  margin: 3.2rem 0 0;
  text-align: center;
}
.playbook-button.apply-button {
  min-height: 48px;
  margin: 0 auto;
  letter-spacing: 0.02em;
}
/* Reassurance line under the Apply button */
.cta-note {
  margin: 1.2rem 0 0;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.5;
  color: #666;
}
/* Who it's for / not for */
.fit-note {
  max-width: 32em;
  margin: 3.2rem auto 0;
  padding: 2.4rem 0 0;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.55;
  color: #555;
  text-align: left;
  border-top: 1px solid #eee;
}
.fit-note p {
  margin: 0 0 1.2rem;
}
.fit-note p:last-child {
  margin-bottom: 0;
}
.fit-note strong {
  font-weight: 600;
  color: #111;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Opens the Playbook PDF; matches the opt-in button */
.playbook-button {
  display: block;
  max-width: 440px;
  margin: 0 auto 4rem;
  padding: 17px;
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: #15803d;
  border-radius: 8px;
  transition: background-color 0.15s ease;
}
.playbook-button:hover,
.playbook-button:focus-visible {
  background: #116932;
}
.playbook-button:focus-visible {
  outline: 3px solid rgba(21, 128, 61, 0.35);
  outline-offset: 2px;
}
.playbook-button[hidden] {
  display: none;
}

/* Phones */
@media (max-width: 599px) {
  .page {
    padding: 3.6rem 20px 6rem;
  }
  .page.page-ty {
    padding-top: 3.6rem;
    padding-bottom: 4rem;
  }
  .page-ty .lead,
  .page-ty h1 + .lead,
  .proof-list,
  .section-copy {
    font-size: 1.6rem;
  }
  /* Edge to edge on phones: cancels the page's 20px side padding */
  .vsl-frame {
    width: calc(100% + 40px);
    margin: 2rem -20px 0;
    border-radius: 0;
  }
  .ty-cta {
    margin-top: 2.4rem;
  }
  .fit-note {
    margin-top: 2.4rem;
    font-size: 1.6rem;
  }
  .lead {
    font-size: 1.6rem;
  }
  .case-studies li {
    padding: 1.6rem 1.6rem 1.6rem 7rem;
    font-size: 1.6rem;
  }
  .case-studies li::before,
  .case-studies li::after {
    left: 1.2rem;
    width: 42px;
    height: 42px;
    margin-top: -21px;
    font-size: 2rem;
  }
}