/* ============================================================
   HAVENROLL: lead.css
   Shared styles for the six lead pages (/playbook, /workbook,
   their /thanks pages, /book, /booked). Loads after style.css and
   composes its :root tokens. No new hex values.
   ============================================================ */

/* ── Buttons ─────────────────────────────────────────────
   Primary actions use the site-wide .btn--orange. */
.btn--lg { padding: var(--sp-4) var(--sp-8); font-size: var(--text-base); }
.btn .lead-arrow { transition: transform 0.3s var(--ease-out); }
.btn:hover .lead-arrow { transform: translateX(4px); }

/* ── Logo-only header ────────────────────────────────────── */
.lead-header {
  background: var(--forest);
  height: 64px;
  display: flex;
  align-items: center;
}
.lead-header__inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-10);
}
.lead-header img { height: 30px; width: auto; }

/* ── Logo-only footer ────────────────────────────────────── */
.lead-footer {
  background: var(--forest);
  padding: var(--sp-6) 0;
}
.lead-footer__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-10);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
}
.lead-footer a {
  color: rgba(255,255,255,0.8);
  transition: color 0.2s var(--ease-out);
}
.lead-footer a:hover { color: var(--orange); }
.lead-footer__sep { margin: 0 var(--sp-2); }

/* ── Leaf pattern backdrop, shared by the cream heroes ───── */
.lead-leaves { position: absolute; inset: 0; pointer-events: none; }

/* ── Opt-in hero ─────────────────────────────────────────── */
.lp-hero {
  background: var(--cream);
  padding: calc(var(--nav-h) + var(--sp-20)) 0 var(--sp-20);
  position: relative;
  overflow: hidden;
}
.lp-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(300px, 480px);
  gap: var(--sp-16);
  align-items: center;
}
.lp-hero h1 {
  font-size: 3.1rem;
  color: var(--forest);
  letter-spacing: -0.015em;
  margin: 0 0 var(--sp-5);
}
.lp-hero h1 em { font-style: italic; color: var(--orange); }
.lp-hero__sub {
  font-size: 1.2rem;
  color: var(--ink-mid);
  line-height: var(--leading-normal);
  max-width: 50ch;
  margin: 0 0 var(--sp-8);
}
.lp-hero__cover {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 22px 48px rgba(12,69,20,0.22), 0 8px 18px rgba(0,0,0,0.1);
  transform: rotate(2deg);
  transition: transform 0.5s var(--ease-out);
}
.lp-hero__cover:hover { transform: rotate(0deg) translateY(-6px); }
.lp-hero__cover img { width: 100%; height: auto; }

/* ── What's inside ───────────────────────────────────────── */
.lp-inside { background: var(--white); }
.lp-inside__inner { max-width: 760px; }
.lp-inside h2 { color: var(--forest); }
.lp-list {
  display: grid;
  gap: var(--sp-4);
  margin: 0;
}
.lp-list li {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  background: var(--cream);
  border-left: 2px solid var(--sage);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--sp-5) var(--sp-6);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--ink-mid);
  box-shadow: var(--shadow-sm);
}
.lp-list svg { flex-shrink: 0; color: var(--forest); margin-top: 6px; }
.lp-inside__note {
  font-size: var(--text-md);
  color: var(--ink-muted);
  margin: var(--sp-8) 0 0;
}

/* ── Who it's from ───────────────────────────────────────── */
.lp-from { background: var(--cream); text-align: center; }
.lp-from__inner { max-width: 640px; margin: 0 auto; }
.lp-from__text {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  line-height: 1.4;
  color: var(--forest);
  text-wrap: balance;
  margin: 0 0 var(--sp-10);
}

/* ── Inline form section ─────────────────────────────────── */
.lp-get {
  background: var(--forest);
  position: relative;
  overflow: hidden;
  scroll-margin-top: var(--nav-h);
}
.lp-get__inner {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
}

/* ============================================================
   OPT-IN CARD (shared by inline and modal)
   ============================================================ */
.optin__card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-10) var(--sp-8);
}
.optin__track {
  height: 6px;
  background: var(--cream-dark);
  border-radius: 3px;
  overflow: hidden;
  margin: 0 0 var(--sp-8);
}
.optin__bar {
  height: 100%;
  width: 100%;
  background: var(--forest);
  border-radius: 3px;
  transform-origin: left center;
  transform: scaleX(0.35);
  transition: transform 0.5s var(--ease-out);
}
.optin__bar.is-step-2 { transform: scaleX(0.8); }

.optin__step { border: 0; padding: 0; margin: 0; min-width: 0; }
.optin__step[hidden] { display: none; }
.optin__heading {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--forest);
  line-height: var(--leading-tight);
  margin: 0 0 var(--sp-2);
}
.optin__heading:focus { outline: none; }
.optin__q {
  font-size: var(--text-md);
  color: var(--ink-mid);
  margin: 0 0 var(--sp-6);
}
.optin__sub {
  font-size: 1rem;
  color: var(--ink-muted);
  line-height: var(--leading-normal);
  margin: 0 0 var(--sp-6);
}

.optin__roles { display: grid; gap: var(--sp-3); }
.optin__role {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  text-align: left;
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--forest);
  background: var(--cream);
  border: 1.5px solid var(--cream-dark);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  min-height: 56px;
  transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.optin__role svg { flex-shrink: 0; color: var(--sage); transition: transform 0.3s var(--ease-out); }
.optin__role:hover { border-color: var(--sage); background: var(--white); }
.optin__role:hover svg { transform: translateX(4px); }
.optin__role:active { transform: scale(0.99); }
.optin__role[aria-pressed="true"] { border-color: var(--forest); background: var(--white); }

.optin__back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: none;
  border: 0;
  padding: var(--sp-1) 0;
  margin: 0 0 var(--sp-4);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ink-muted);
  transition: color 0.2s var(--ease-out);
}
.optin__back:hover { color: var(--forest); }
.optin__back:active { color: var(--forest-deep); }

.optin__field { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-4); }
.optin__field label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mid);
}
.optin__field input {
  font-family: var(--font-sans);
  font-size: var(--text-base);   /* 16px: stops iOS zooming on focus */
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--cream-dark);
  border-radius: var(--radius);
  padding: 12px var(--sp-4);
  width: 100%;
  transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.optin__field input:hover { border-color: var(--sage); }
.optin__field input:focus-visible {
  outline: none;
  background: var(--white);
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(12,69,20,0.16);
}
.optin__field input[aria-invalid="true"] { border-color: var(--orange-dark); background: var(--white); }
.optin__msg {
  font-size: var(--text-sm);
  color: var(--orange-dark);
  font-weight: 600;
  min-height: 0;
}
.optin__msg:empty { display: none; }

.optin__error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  background: var(--cream);
  border-left: 3px solid var(--orange-dark);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--sp-4);
  margin: 0 0 var(--sp-4);
  font-size: 1rem;
  line-height: var(--leading-normal);
  color: var(--ink);
}
.optin__error[hidden] { display: none; }
.optin__error p { margin: 0; flex: 1 1 200px; line-height: var(--leading-normal); }
.optin__retry { padding: 10px var(--sp-5); }

.optin__submit { width: 100%; justify-content: center; position: relative; }
.optin__submit:disabled { cursor: progress; transform: none; }
.optin__spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: optin-spin 0.8s linear infinite;
}
.optin__submit.is-loading .optin__spinner { display: inline-block; }
.optin__submit.is-loading .lead-arrow { display: none; }
@keyframes optin-spin { to { transform: rotate(360deg); } }

.optin__consent {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  line-height: var(--leading-normal);
  margin: var(--sp-5) 0 0;
}
.optin__consent a { color: var(--forest); text-decoration: underline; text-underline-offset: 2px; }
.optin__consent a:hover { color: var(--orange-dark); }
.optin__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Modal ───────────────────────────────────────────────── */
.optin-modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}
.optin-modal[hidden] { display: none; }
.optin-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(7,31,10,0.72);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.optin-modal__panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - var(--sp-8));
  max-height: calc(100dvh - var(--sp-8));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.optin-modal.is-open .optin-modal__scrim { opacity: 1; }
.optin-modal.is-open .optin-modal__panel { opacity: 1; transform: translateY(0); }
.optin-modal .optin__card { box-shadow: var(--shadow-lg); padding-top: var(--sp-12); }
.optin-modal__close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 1;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--ink-muted);
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.optin-modal__close svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
.optin-modal__close:hover { background: var(--cream); color: var(--forest); }
.optin-modal__close:active { background: var(--cream-dark); }
body.optin-open { overflow: hidden; }

/* ============================================================
   THANKS / BOOK / BOOKED
   ============================================================ */
.ty-hero {
  background: var(--cream);
  position: relative;
  overflow: hidden;
  padding: var(--sp-16) 0 var(--sp-16);
}
.ty-hero__inner { position: relative; max-width: 680px; }
.ty-hero h1 {
  font-size: 3rem;
  color: var(--forest);
  margin: 0 0 var(--sp-4);
}
.ty-hero p {
  font-size: var(--text-lg);
  color: var(--ink-mid);
  line-height: var(--leading-normal);
  margin: 0 0 var(--sp-8);
}

.lead-cal-section { background: var(--white); }
.lead-cal-section--b { padding-top: var(--sp-24); }
.lead-cal-section__head { max-width: 640px; margin: 0 0 var(--sp-10); }
.lead-cal-section__head h2 { color: var(--forest); margin: 0 0 var(--sp-4); }
.lead-cal-section__head p {
  font-size: var(--text-lg);
  color: var(--ink-mid);
  line-height: var(--leading-normal);
  margin: 0;
}

/* The calendar widget moves its time list beside the month at about
   740px and its details into a left column at 1000px, so give it room. */
.lead-cal {
  max-width: 1080px;
  margin: 0 auto;
  min-height: 640px;
  background: var(--white);
  border: 1px solid var(--cream-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  scroll-margin-top: var(--sp-4);
  position: relative;
}
/* The widget takes a few seconds to paint on a phone. This sits behind
   the iframe and is covered once the calendar draws. */
.lead-cal::before {
  content: "Loading available times\2026";
  position: absolute;
  top: var(--sp-16);
  left: 0;
  right: 0;
  text-align: center;
  font-size: var(--text-md);
  color: var(--ink-muted);
}
.lead-cal__frame {
  position: relative;
  display: block;
  width: 100%;
  min-height: 640px;
  border: 0;
  overflow: hidden;
}

/* /book */
.bk-hero {
  background: var(--cream);
  position: relative;
  overflow: hidden;
  padding: var(--sp-12) 0 var(--sp-16);
}
.bk-hero__top {
  position: relative;
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: var(--sp-12);
  align-items: center;
  margin: 0 0 var(--sp-10);
}
.bk-hero__me { margin: 0; }
.bk-hero__me img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.bk-hero__head { max-width: 820px; }
.bk-hero__head h1 { text-wrap: balance; }
.bk-hero h1 {
  font-size: 2.8rem;
  color: var(--forest);
  margin: 0 0 var(--sp-4);
}
.bk-hero__head p {
  font-size: var(--text-lg);
  color: var(--ink-mid);
  line-height: var(--leading-normal);
  margin: 0;
}
.bk-hero .lead-cal { position: relative; }

/* Fit section. Same pattern as the "Who this is actually for" section on
   /playbook: two cards, uppercase labels, plain check lists. */
.bk-fit { background: var(--white); }
.bk-fit__head { text-align: center; margin: 0 auto var(--sp-12); }
.bk-fit__head h2 { color: var(--forest); margin: 0; }
.bk-fit__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
  max-width: 1020px;
  margin: 0 auto;
  align-items: stretch;
}
.bk-fit__col {
  background: var(--cream);
  border: 1px solid var(--cream-dark);
  border-radius: var(--radius-lg);
  padding: var(--sp-10) var(--sp-8);
}
.bk-fit__col h3 {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 var(--sp-8);
}
.bk-fit__col--yes h3 { color: var(--orange-dark); }
.bk-fit__col--no h3 { color: var(--ink-muted); }
.bk-fit__list { display: grid; gap: var(--sp-6); margin: 0; }
.bk-fit__list li {
  display: flex;
  gap: var(--sp-4);
  font-size: var(--text-lg);
  color: var(--ink-mid);
  line-height: var(--leading-normal);
}
.bk-fit__list span { text-wrap: pretty; }
.bk-fit__icon { flex-shrink: 0; margin-top: 6px; }
.bk-fit__col--yes .bk-fit__icon { color: var(--orange); }
.bk-fit__col--no .bk-fit__icon { color: var(--ink-muted); }

/* Why should you listen to me? Left edge lines up with the calendar above.
   Photo card on the left, story and checklist on the right. */
.bk-who { background: var(--cream); }
.bk-who__grid {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: var(--sp-16);
  align-items: start;
  max-width: 1080px;
}
.bk-who__card {
  position: sticky;
  top: var(--sp-8);
  background: var(--forest);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-6) var(--sp-6) var(--sp-8);
  text-align: center;
}
.bk-who__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin: 0 0 var(--sp-6);
}
.bk-who__card .bk-who__name {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  color: var(--cream);
  line-height: var(--leading-tight);
  margin: 0 0 var(--sp-2);
}
.bk-who__card .bk-who__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--orange);
  margin: 0;
}

.bk-who__body { max-width: 640px; }
.bk-who__body h2 { color: var(--forest); margin: 0 0 var(--sp-6); }
.bk-who__body p {
  font-size: var(--text-lg);
  color: var(--ink-mid);
  line-height: var(--leading-normal);
  margin: 0 0 var(--sp-5);
}
.bk-who__label {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--forest);
  line-height: var(--leading-normal);
  margin: var(--sp-8) 0 var(--sp-4);
}
.bk-who__checks, .bk-who__list { display: grid; margin: 0 0 var(--sp-6); }
.bk-who__checks { gap: var(--sp-3); }
.bk-who__list { gap: var(--sp-2); }
.bk-who__checks li, .bk-who__list li {
  display: flex;
  gap: var(--sp-3);
  font-size: var(--text-lg);
  color: var(--ink-mid);
  line-height: var(--leading-normal);
}
.bk-who__checks svg { flex-shrink: 0; color: var(--forest); margin-top: 6px; }
.bk-who__list svg { flex-shrink: 0; color: var(--orange); margin-top: 7px; }
.bk-who__body .btn { margin-top: var(--sp-4); }

/* /booked */
.bd-main {
  background: var(--cream);
  position: relative;
  overflow: hidden;
  padding: var(--sp-20) 0;
  min-height: calc(100vh - 64px - 72px);
}
.bd-card {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-12) var(--sp-10);
}
.bd-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--forest);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 var(--sp-6);
}
.bd-card h1 { font-size: 2.6rem; color: var(--forest); margin: 0 0 var(--sp-4); }
.bd-card p {
  font-size: var(--text-lg);
  color: var(--ink-mid);
  line-height: var(--leading-normal);
  margin: 0 0 var(--sp-5);
}
.bd-card__sign {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--forest);
  line-height: 1.4;
  margin: var(--sp-8) 0 0;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .lp-hero__inner { grid-template-columns: 1fr; gap: var(--sp-10); }
  .lp-hero__cover { max-width: 440px; }
  .lp-hero h1 { font-size: 2.6rem; }
}
@media (max-width: 768px) {
  .lead-header { height: 56px; }
  .lead-header__inner, .lead-footer__inner { padding: 0 var(--sp-5); }
  .lead-header img { height: 26px; }
  .lp-hero { padding: calc(var(--nav-h) + var(--sp-10)) 0 var(--sp-12); }
  .lp-hero h1 { font-size: 2.1rem; }
  .lp-hero__sub { font-size: 1.05rem; margin-bottom: var(--sp-6); }
  .lp-hero .btn { width: 100%; justify-content: center; }
  .lp-list li { font-size: var(--text-md); padding: var(--sp-4) var(--sp-5); }
  .lp-from__text { font-size: 1.4rem; }
  .optin__card { padding: var(--sp-8) var(--sp-5); }
  .ty-hero { padding: var(--sp-8) 0 var(--sp-10); }
  .ty-hero h1 { font-size: 2.2rem; margin-bottom: var(--sp-3); }
  .ty-hero p { font-size: var(--text-md); margin-bottom: var(--sp-6); }
  .ty-hero .btn { width: 100%; justify-content: center; }
  .lead-cal-section--b { padding-top: var(--sp-16); }
  .bk-hero { padding: var(--sp-6) 0 var(--sp-10); }
  .bk-hero h1 { font-size: 1.75rem; margin-bottom: var(--sp-3); }
  /* Phones: the portrait shrinks to a small avatar beside the name, so the
     calendar still starts above the fold. */
  .bk-hero__top { grid-template-columns: 1fr; gap: var(--sp-4); margin-bottom: var(--sp-5); }
  .bk-hero__me { display: flex; align-items: center; gap: var(--sp-3); }
  .bk-hero__me img {
    width: 52px;
    height: 52px;
    aspect-ratio: 1;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .bk-hero__head p { font-size: 1rem; }
  .bk-fit__head { margin-bottom: var(--sp-8); }
  .bk-fit__grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .bk-fit__col { padding: var(--sp-8) var(--sp-6); }
  .bk-fit__col h3 { margin-bottom: var(--sp-6); }
  .bk-fit__list { gap: var(--sp-5); }
  .bk-fit__list li { font-size: var(--text-md); }
  .bk-who__grid { grid-template-columns: 1fr; gap: var(--sp-10); }
  .bk-who__card { position: static; max-width: 360px; }
  .bk-who__body p, .bk-who__list li, .bk-who__checks li, .bk-who__label { font-size: var(--text-md); }
  .bk-who .btn { width: 100%; justify-content: center; }
  .bd-main { padding: var(--sp-10) 0; }
  .bd-card { padding: var(--sp-10) var(--sp-6); }
  .bd-card h1 { font-size: 2.1rem; }
  .bd-card p { font-size: var(--text-md); }
}
@media (max-width: 480px) {
  .lp-hero h1 { font-size: 1.85rem; }
  /* The widget card loses its frame on phones so the calendar gets the
     full width of the screen. */
  .bk-hero .container, .lead-cal-section .container,
  .bk-fit .container, .bk-who .container { padding: 0 var(--sp-4); }
  .lead-cal { border-radius: var(--radius); }
}

@media (prefers-reduced-motion: reduce) {
  .optin__bar, .optin-modal__scrim, .optin-modal__panel { transition: none; }
  .optin__spinner { animation-duration: 2s; }
  .lp-hero__cover { transform: none; transition: none; }
}