/* 11 Out of 10 Would Recommend: podcast page.
   Colors and type follow the Intention Craft Design System (Work Sans, orange #ff5e1a). */

@font-face {
  font-family: "Work Sans";
  src: url("/assets/fonts/work-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --orange: #ff5e1a;
  --orange-hover: #ff6e30;
  --orange-press: #e24e10;
  --ink: #282828;
  --hero-dark: #1e1d1e;
  --help-dark: #1c1c1c;
  --muted-on-dark: #dad9d9;
  --muted: #5c5a5a;
  --rule: #dad9d9;
  --font: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Hero background: one composite (glow + people) over a repeating dot tile.
     On desktop both scale with the screen once it is wider than 1443px, so the
     photo always covers the full width and its dots stay lined up with the tile. */
  --hero-w: max(1443px, 100vw);
  --dot: calc(var(--hero-w) * 39 / 1443);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: #fff; }
img { max-width: 100%; }
a { color: var(--orange); }
a:hover { color: var(--orange-press); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 16px 24px; }

/* Header */
.site-header { background: var(--ink); border-bottom: 1px solid rgba(255,255,255,.16); }
.header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.logo { display: block; height: 26px; width: auto; }
.header-nav { display: flex; gap: 24px; align-items: center; }
.header-nav a { color: #fff; font-size: 16px; font-weight: 600; text-decoration: none; }
.header-nav a:hover { color: var(--orange-hover); }

/* Hero */
.hero {
  position: relative;
  color: #fff;
  background-color: var(--hero-dark);
  background-image: url("/assets/img/hero-desktop.jpg"), url("/assets/img/dot-tile-desktop.png");
  background-repeat: no-repeat, repeat;
  background-position: center bottom, center bottom;
  background-size: var(--hero-w) auto, var(--dot) var(--dot);
  padding-bottom: calc(var(--hero-w) * 300 / 1443);
}
.hero-inner {
  max-width: 880px; margin: 0 auto; padding: 36px 24px 0;
  display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center;
}
.title-block { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.hero h1 { margin: 0; width: 100%; max-width: 560px; line-height: 0; }
.hero h1 img { display: block; width: 100%; height: auto; }
.hosts { margin: 0; display: flex; flex-direction: column; align-items: center; }
.hosts-with { font-size: 14px; }
.hosts-names { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.description { margin: 0; font-size: 19px; line-height: 1.5; max-width: 680px; text-wrap: balance; }

.signup {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 100%; max-width: 620px; padding-top: 8px;
}
.signup h2 { margin: 0; font-size: 36px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
.signup label { display: flex; flex-direction: column; gap: 2px; font-size: 18px; line-height: 1.45; color: var(--muted-on-dark); }
.one-line { white-space: nowrap; }
.signup-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; max-width: 480px; margin-top: 8px; }
.signup input {
  flex: 1 1 220px; min-width: 0; height: 52px; padding: 0 16px;
  border-radius: 10px; border: 1px solid rgba(255,255,255,.32);
  background: #fff; color: var(--ink); font: inherit; font-size: 17px;
}
.signup input:focus { outline: none; box-shadow: 0 0 0 3px rgba(255,94,26,.45); }
.form-status { margin: 0; min-height: 0; font-size: 17px; font-weight: 600; color: #fff; }
.form-status:empty { display: none; }
.form-status.is-error { color: #ffb08c; }
.apps { margin: 4px 0 0; font-size: 15px; color: var(--muted-on-dark); text-wrap: balance; }

/* Buttons: primary, from the design system */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font); font-weight: 700; font-size: 1.1875rem; line-height: 1; letter-spacing: -0.01em;
  padding: 18px 34px; border-radius: 10px; border: 2px solid transparent;
  background: var(--orange); color: #fff; text-decoration: none; cursor: pointer;
  box-shadow: 0 8px 22px rgba(255,94,26,.28);
  transition: background 200ms cubic-bezier(.2,.7,.2,1), transform 120ms cubic-bezier(.2,.7,.2,1);
}
.btn:hover { background: var(--orange-hover); color: #fff; }
.btn:active { background: var(--orange-press); transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,94,26,.45); }
.btn[disabled] { opacity: .6; cursor: wait; }

/* Help section */
.help { background: var(--help-dark); color: #fff; }
.help-inner { max-width: 880px; margin: 0 auto; padding: 96px 24px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.help h2 { margin: 0; font-size: 40px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.help p { margin: 0; font-size: 19px; line-height: 1.6; max-width: 680px; }

/* Footer */
.site-footer { background: #fff; border-top: 1px solid var(--rule); }
.footer-row { padding-top: 28px; padding-bottom: 28px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.logo-footer { height: 28px; }
.site-footer span { font-size: 15px; color: var(--muted); }

/* Phones: their own pre-sized images, never a shrunk dot pattern */
@media (max-width: 760px) {
  .hero {
    background-image: url("/assets/img/hero-phone.jpg"), url("/assets/img/dot-tile-phone.png");
    background-size: 555px 221px, 15px 15px;
    padding-bottom: 236px;
  }
  .nav-extra { display: none; }
}
@media (max-width: 560px) {
  .one-line { white-space: normal; }
  .help h2 { font-size: 32px; }
  .help-inner { padding: 72px 24px; }
}

/* Thank-you pages (/thanks/, /crash-course/): Jake pointing beside the message */
.cheer {
  color: #fff;
  background-color: var(--hero-dark);
  background-image: radial-gradient(ellipse 34% 60% at 72% 100%, rgba(255,94,26,.22) 0%, rgba(255,94,26,0) 100%), url("/assets/img/dot-tile-desktop.png");
  background-repeat: no-repeat, repeat;
  background-position: center bottom, center bottom;
  background-size: 100% 100%, 39px 39px;
}
.cheer-inner {
  max-width: 1040px; margin: 0 auto; padding: 56px 24px 0;
  display: flex; align-items: flex-end; gap: 32px;
}
.cheer-text { flex: 1 1 0; padding-bottom: 72px; }
.cheer h1 { margin: 0 0 16px; font-size: 56px; line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; }
.cheer-kicker { margin: 0 0 4px; font-size: 24px; line-height: 1.3; font-weight: 700; color: var(--orange-hover); }
.cheer-note { margin: 0 0 16px; font-size: 16px; line-height: 1.4; color: var(--muted-on-dark); text-wrap: balance; }
.cheer-lead { margin: 0 0 16px; font-size: 22px; line-height: 1.45; font-weight: 600; text-wrap: balance; }
.cheer-step { margin: 0 0 12px; font-size: 19px; line-height: 1.55; color: var(--muted-on-dark); text-wrap: balance; }
.cheer-step strong { color: #fff; }
.cheer-small { margin: 0 0 28px; font-size: 15px; color: var(--muted-on-dark); }
.cheer-back { color: var(--orange-hover); font-weight: 600; }
.cheer-back:hover { color: #fff; }
.cheer-photo { flex: 0 0 auto; width: min(44%, 440px); height: auto; display: block; }
@media (max-width: 760px) {
  .cheer { background-image: radial-gradient(ellipse 70% 30% at 50% 100%, rgba(255,94,26,.22) 0%, rgba(255,94,26,0) 100%), url("/assets/img/dot-tile-phone.png"); background-size: 100% 100%, 15px 15px; }
  .cheer-inner { flex-direction: column; align-items: center; text-align: center; padding-top: 40px; gap: 8px; }
  .cheer-text { padding-bottom: 8px; }
  .cheer h1 { font-size: 40px; }
  .cheer-photo { width: min(80%, 340px); }
}