/* Harvest Season self-serve pages, in the harvestseasonai.com colorway (dark only): forest
   background, gold primary actions and highlights, greens as secondary accents, ivory text,
   serif display over a system sans body. System font stacks only. */
:root {
  color-scheme: dark;
  --bg: #0f1e15;
  --surface: #152a1e;
  --surface-2: #1a3326;
  --raised: #1d4a3a;
  --gold: #b5883a;
  --gold-deep: #a07a33;
  --on-gold: #0b1610;            /* dark text on gold: 5.8:1, 4.7:1 on the hover gold */
  --green: #40916c;
  --green-deep: #2d6a4f;
  --ink: #f8f6f1;
  --ink-soft: rgb(248 246 241 / .72);
  --ink-faint: rgb(248 246 241 / .55);
  --line: rgb(255 255 255 / .1);
  --line-2: rgb(255 255 255 / .12);
  --field-line: rgb(248 246 241 / .4);  /* form-control edges keep 3:1 against the page */
  --error: #f2a196;
  --font-display: ui-serif, Georgia, Cambria, "Times New Roman", serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --step--2: .75rem;
  --step--1: .875rem;
  --step-0: 1rem;
  --step-1: clamp(1.125rem, 1.05rem + .35vw, 1.25rem);
  --step-2: clamp(1.75rem, 1.4rem + 1.5vw, 3rem);
  --step-4: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);
  --space-xs: .5rem; --space-s: .75rem; --space-m: 1.25rem; --space-l: 2rem;
  --space-xl: 3.25rem; --space-2xl: clamp(3.5rem, 2.5rem + 5vw, 6rem);
  --radius-s: 8px; --radius-m: 12px; --radius-l: 16px; --radius-pill: 9999px;
  --shadow-1: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  --measure: 66ch;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; color: var(--ink); min-height: 100vh;
  background:
    radial-gradient(40rem 28rem at -6rem -8rem, rgb(45 106 79 / .2), transparent 70%),
    radial-gradient(36rem 26rem at calc(100% + 6rem) 34rem, rgb(181 136 58 / .07), transparent 70%),
    var(--bg);
  font: 400 var(--step-0)/1.6 var(--font-body);
}
a { color: var(--gold); text-underline-offset: .18em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--radius-s); }
::selection { background: var(--gold); color: var(--on-gold); }

.site-head, .site-foot, main { width: min(100% - 2.5rem, 72rem); margin-inline: auto; }
.site-head { padding-block: 1.1rem; }
.wordmark {
  font: 700 var(--step-1)/1.4 var(--font-display); color: var(--ink); text-decoration: none;
  text-transform: uppercase; letter-spacing: .18em;
}
.wordmark:hover { color: var(--ink); }

.hero {
  display: grid; gap: var(--space-l) var(--space-xl); align-items: start;
  padding-block: var(--space-xl) var(--space-2xl);
}
.hero-copy { display: contents; }
h1 {
  font: 700 var(--step-4)/1.05 var(--font-display); letter-spacing: -.025em; color: #fff;
  margin: 0; max-width: 21em; text-wrap: balance;
}
h2 { font: 700 var(--step-2)/1.1 var(--font-display); color: #fff; margin: 0 0 var(--space-m); text-wrap: balance; }
.lede { font-size: var(--step-1); line-height: 1.55; color: var(--ink-soft); max-width: 40ch; margin: 0; }

.start { display: grid; gap: var(--space-m); align-content: start; }
.site-label {
  justify-self: start; font-size: var(--step--2); font-weight: 600; line-height: 1.3;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gold);
}
.step-site { display: grid; gap: var(--space-xs); }
.site-row {
  display: flex; align-items: stretch; background: var(--surface); border: 1px solid var(--field-line);
  border-radius: var(--radius-l); padding: 6px; box-shadow: var(--shadow-1);
}
.site-row:focus-within { border-color: var(--gold); }
.site-row input {
  flex: 1; min-width: 0; border: 0; background: transparent; padding: .7rem .9rem;
  font: inherit; font-size: var(--step-1); color: var(--ink);
}
.site-row input::placeholder, .field input::placeholder { color: var(--ink-faint); }
.site-row input:focus { outline: none; }
.go {
  flex: none; width: 3.25rem; border: 0; border-radius: var(--radius-m); cursor: pointer;
  background: var(--gold); color: var(--on-gold); display: grid; place-items: center;
}
.go:hover, .build:hover { background: var(--gold-deep); color: var(--on-gold); }
.no-site { justify-self: start; font-size: var(--step--1); }

.details { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-m); min-width: 0; }
.details legend { font: 700 var(--step-1)/1.25 var(--font-display); color: #fff; padding: 0; margin-bottom: var(--space-s); }
.grid { display: grid; gap: var(--space-s) var(--space-m); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.field { display: grid; gap: .35rem; align-content: start; }
.field label { font-weight: 600; font-size: var(--step--1); color: var(--ink); }
.field input {
  font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--field-line);
  border-radius: var(--radius-m); padding: .7rem .85rem; min-width: 0;
}
.field input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgb(181 136 58 / .25); }
[aria-invalid="true"] { border-color: var(--error) !important; }
.hint { margin: 0; font-size: var(--step--1); color: var(--ink-soft); }
.field-error { margin: 0; font-size: var(--step--1); color: var(--error); font-weight: 600; }
.form-alert {
  padding: var(--space-s) var(--space-m); border-radius: var(--radius-m);
  background: rgb(242 161 150 / .1); border: 1px solid rgb(242 161 150 / .45);
  color: var(--error); font-weight: 600;
}
.consents { display: grid; gap: var(--space-s); font-size: var(--step--1); color: var(--ink-soft); }
.check { display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--space-s); align-items: start; }
.check input { width: 1.1rem; height: 1.1rem; margin: .2rem 0 0; accent-color: var(--gold); }
.build {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  justify-self: start; border: 0; border-radius: var(--radius-m); cursor: pointer;
  background: var(--gold); color: var(--on-gold); text-decoration: none; box-shadow: var(--shadow-1);
  font: 700 var(--step-0)/1.5 var(--font-display); padding: .75rem 1.5rem;
}
.fine { margin: 0; font-size: var(--step--1); color: var(--ink-soft); max-width: 52ch; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.video-slot { margin: 0; display: grid; gap: var(--space-s); }
.video-frame {
  display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9;
  border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-1); object-fit: cover;
}
div.video-frame {
  display: grid; place-items: center; padding: var(--space-m); text-align: center; color: var(--ink-soft);
}
.video-frame p { margin: 0; }
.video-slot figcaption { font-size: var(--step--1); color: var(--ink-soft); }

/* "What happens next": the ordered list renders as numbered cards, like the main site's steps. */
.how { padding-block: var(--space-xl) var(--space-2xl); border-top: 1px solid var(--line); }
.how ol {
  list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.how li {
  counter-increment: step; display: grid; gap: var(--space-s); align-content: start;
  padding: 1.5rem; border-radius: var(--radius-l); background: var(--surface);
  border: 1px solid var(--line); color: var(--ink-soft); font-size: var(--step--1); line-height: 1.65;
}
.how li::before {
  content: counter(step, decimal-leading-zero); color: var(--gold);
  font: 700 var(--step-1)/1 var(--font-display);
}
.how strong { display: block; color: #fff; font: 700 var(--step-0)/1.35 var(--font-display); margin-bottom: .25rem; }

.site-foot {
  display: flex; flex-wrap: wrap; gap: var(--space-m); padding-block: var(--space-l);
  border-top: 1px solid var(--line); font-size: var(--step--2); color: var(--ink-faint);
}
.site-foot a { color: var(--ink-faint); text-decoration: none; }
.site-foot a:hover { color: var(--gold); }

/* JS enhancement: reveal step 2 only after the website step (plain form without JS). */
.js .start[data-step="1"] .details { display: none; }
.start[data-mode="site"] .nosite-only { display: none; }
.start[data-mode="nosite"] .step-site { display: none; }
.has-site { justify-self: start; font-size: var(--step--1); }

.status { padding-block: var(--space-2xl); display: grid; gap: var(--space-m); justify-items: start; }
.status > * { max-width: 44rem; }
.status .lede { max-width: 48ch; }
.progress { display: grid; gap: var(--space-xs); width: min(100%, 28rem); }
.progress .bar { display: block; height: 6px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; }
.progress .bar span {
  display: block; height: 100%; width: 35%; border-radius: inherit; background: var(--gold);
  animation: slide 1.8s ease-in-out infinite;
}
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
.elapsed { font-size: var(--step--1); color: var(--ink-soft); }
.steps-note { margin: 0; color: var(--ink-soft); max-width: 60ch; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-m); align-items: center; }
.text-link { font-weight: 600; }

@media (min-width: 60rem) {
  .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .hero h1 { grid-column: 1 / -1; }
  .lede { grid-column: 1 / -1; max-width: 52ch; }
  .start { grid-column: 1; }
  .hero .video-slot { grid-column: 2; grid-row: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .progress .bar span { animation: none; width: 100%; opacity: .5; }
}
@media (prefers-reduced-motion: no-preference) {
  .build, .go, a { transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
}

/* Claim step: what the $500 includes, then the optional (unticked) order bump. */
.claim .included { margin: 0; padding-left: 1.2rem; display: grid; gap: var(--space-xs); max-width: 60ch; color: var(--ink-soft); }
.claim .included li::marker { color: var(--green); }
.claim-form { display: grid; gap: var(--space-m); justify-items: start; width: 100%; }
.bump {
  display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--space-s); align-items: start;
  width: 100%; padding: 1.5rem; border: 1px solid var(--line-2); border-radius: var(--radius-l);
  background: var(--surface); color: var(--ink-soft); cursor: pointer;
}
.bump:hover { border-color: rgb(181 136 58 / .6); }
.bump:has(input:checked) { border-color: var(--gold); background: var(--surface-2); }
.bump input { width: 1.1rem; height: 1.1rem; margin: .25rem 0 0; accent-color: var(--gold); }
.bump strong { color: #fff; }
.total { margin: 0; font-weight: 600; }

/* One small line under the landing and booking forms. Muted ivory around a gold link (AA). */
.privacy-line { margin: 0; font-size: var(--step--2); color: var(--ink-soft); }
.privacy-line a { color: var(--gold); }
.privacy-line a:hover { color: var(--ink); }

/* Pre-call page (/website-call-confirmed): one centred column of panels, like the main site's
   /confirmed. */
.precall-page { width: min(100% - 2.5rem, 42rem); display: grid; gap: var(--space-m); padding-block: var(--space-xl) var(--space-2xl); }
.precall-intro { display: grid; gap: var(--space-s); justify-items: center; text-align: center; margin-bottom: var(--space-s); }
.precall-intro h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 2.75rem); }
.precall-intro .lede { max-width: 46ch; }
.eyebrow {
  margin: 0; padding: .25rem .75rem; border-radius: var(--radius-pill); background: var(--surface);
  border: 1px solid var(--line); color: var(--gold); font-size: var(--step--2); font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
}
.panel {
  display: grid; gap: var(--space-s); padding: 1.5rem; border-radius: var(--radius-l);
  background: var(--surface); border: 1px solid var(--line);
}
.panel h2 {
  display: flex; align-items: center; gap: .75rem; margin: 0;
  font-size: var(--step-1); line-height: 1.3;
}
.step-num {
  flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--gold); color: var(--on-gold); font: 700 .8rem/1 var(--font-display);
}
.panel-sub { margin: 0; color: var(--ink-soft); font-size: var(--step--1); }
.panel .video-slot { margin-top: var(--space-xs); }
.prep { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-s); color: var(--ink-soft); }
.prep li { display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--space-s); align-items: start; }
.prep li::before {
  content: ""; width: 1.25rem; height: 1.25rem; margin-top: .15rem; border-radius: 50%;
  border: 1px solid rgb(64 145 108 / .6); background: rgb(64 145 108 / .15)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='%2340916c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 100% no-repeat;
}
.panel .fine { padding-top: var(--space-s); border-top: 1px solid var(--line); max-width: none; }