/* TradeSitePros funnel pages.
   Deliberately plain. These pages have one job each and no nav links to
   wander off through, which is how the Stone Systems capture behaves.
   Tokens match the main tradesitepros.com site. */

:root {
  --brand: #0B2D5B;
  --brand-light: #0EA5FF;
  --brand-dark: #071f3f;
  --accent: #F97316;
  --green: #10B981;
  --green-dark: #0d9668;
  --dark: #0B2D5B;
  --text: #334155;
  --text-light: #64748b;
  --bg: #ffffff;
  --bg-soft: #f8fafc;
  --bg-alt: #f1f5f9;
  --border: #E5E7EB;
  --radius: 12px;
  --shadow: 0 1px 3px rgb(0 0 0 / .08), 0 4px 12px rgb(0 0 0 / .04);
  --shadow-lg: 0 4px 20px rgb(0 0 0 / .1), 0 8px 32px rgb(0 0 0 / .06);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { color: var(--dark); line-height: 1.2; margin: 0; }
a { color: var(--brand); }
img, video, iframe { max-width: 100%; }

.wrap { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.wrap--wide { max-width: 1040px; }

/* header: logo only, no escape routes */
.fhead { padding: 22px 0; border-bottom: 1px solid var(--border); background: #fff; }
.fhead .wrap { display: flex; align-items: center; justify-content: center; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; color: var(--dark); text-decoration: none; letter-spacing: -.02em; }
.logo__text b { color: var(--brand-light); }

main { padding: 44px 0 64px; }

.eyebrow {
  margin: 0 0 14px; color: var(--accent); font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; text-align: center;
}
h1 { font-size: clamp(28px, 5vw, 42px); font-weight: 800; letter-spacing: -.025em; text-align: center; text-wrap: balance; }
.lede { max-width: 58ch; margin: 18px auto 0; font-size: 17px; text-align: center; color: var(--text-light); }
.price-line { margin: 16px 0 0; font-size: 22px; font-weight: 800; color: var(--dark); text-align: center; }

.step-label {
  display: block; margin: 34px 0 12px; text-align: center;
  font-size: 15px; font-weight: 700; color: var(--dark);
}
.step-label b { color: var(--accent); }

/* video / calendar placeholders */
.slot {
  display: grid; place-items: center; gap: 10px;
  aspect-ratio: 16 / 9; padding: 24px; text-align: center;
  border: 2px dashed var(--border); border-radius: var(--radius);
  background: var(--bg-soft); color: var(--text-light);
}
.slot--tall { aspect-ratio: auto; min-height: 420px; }
.slot strong { color: var(--dark); font-size: 15px; }
.slot span { font-size: 13px; max-width: 46ch; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 18px 36px; border: none; border-radius: 10px;
  font: inherit; font-size: 17px; font-weight: 700; text-decoration: none;
  cursor: pointer; transition: background .2s, transform .2s;
}
.btn--go { color: #fff; background: var(--green); box-shadow: 0 4px 14px rgb(16 185 129 / .32); }
.btn--go:hover { background: var(--green-dark); transform: translateY(-1px); }
.btn--brand { color: #fff; background: var(--brand); box-shadow: 0 4px 14px rgb(11 45 91 / .32); }
.btn--brand:hover { background: var(--brand-dark); transform: translateY(-1px); }
.btn--ghost { color: var(--brand); background: #fff; border: 1px solid var(--border); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

.actions { margin-top: 28px; text-align: center; }
.microcopy { margin: 12px 0 0; font-size: 13px; color: var(--text-light); text-align: center; }

.body-copy { max-width: 62ch; margin: 22px auto 0; font-size: 17px; text-align: center; }

/* proof */
.proof { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--border); }
.proof h2 { font-size: 20px; text-align: center; }
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
.proof-card { padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-soft); }
.proof-card p { margin: 0 0 14px; font-size: 15px; }
.proof-card footer { font-size: 13px; font-weight: 700; color: var(--dark); }
.proof-card footer span { display: block; font-weight: 500; color: var(--text-light); }
.placeholder-note {
  margin: 22px 0 0; padding: 14px 16px; border-left: 3px solid var(--accent);
  background: #fffbeb; font-size: 13px; color: #92400e;
}

/* survey */
.survey-backdrop {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: flex-start; justify-content: center; padding: 20px;
  background: rgb(15 23 42 / .6); overflow-y: auto;
}
.survey-backdrop.is-open { display: flex; }
.survey {
  width: min(560px, 100%); margin: auto; padding: 28px;
  border-radius: 16px; background: #fff; box-shadow: var(--shadow-lg);
}
.survey__bar { height: 6px; margin-bottom: 20px; border-radius: 999px; background: var(--bg-alt); overflow: hidden; }
.survey__fill { height: 100%; width: 0; background: var(--brand); transition: width .25s ease; }
.survey__count { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--brand); }
.survey__q { margin: 0 0 18px; font-size: 22px; font-weight: 800; color: var(--dark); line-height: 1.25; }
.survey__opts { display: grid; gap: 10px; }
.survey__opt {
  padding: 15px 18px; border: 1px solid var(--border); border-radius: 10px;
  background: #fff; font: inherit; font-size: 16px; font-weight: 600; color: var(--dark);
  text-align: left; cursor: pointer; transition: border-color .15s, background .15s;
}
.survey__opt:hover { border-color: var(--brand); background: #eff6ff; }
.survey__field { display: block; margin-bottom: 14px; }
.survey__field span { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--dark); }
.survey__field input {
  width: 100%; min-height: 50px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: 16px; outline: none;
}
.survey__field input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgb(14 165 255 / .18); }
.survey__consent { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin: 4px 0 16px; font-size: 13px; color: var(--text-light); }
.survey__consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand); }
.survey__err { margin: 0 0 12px; color: #b91c1c; font-size: 14px; }
.survey__back { margin-top: 14px; border: none; background: none; font: inherit; font-size: 14px; color: var(--text-light); cursor: pointer; text-decoration: underline; }

.ffoot { padding: 28px 0 40px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-light); text-align: center; }
.ffoot a { color: var(--text-light); }

@media (max-width: 680px) {
  .proof-grid { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .survey { padding: 22px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* brand mark */
.logo__mark { width: 38px; height: 38px; }

.logo__text b { font-weight: 800; }

/* full lockup: mark, wordmark, tagline under it */


/* Full lockup. The tagline justifies across the exact width of the wordmark
   above it, which is what makes it read as one mark rather than two bits of
   text stacked up. */
.logo__stack { display: flex; flex-direction: column; align-items: stretch; line-height: 1; }
.logo__text { white-space: nowrap; }
.logo__tag {
  display: block; margin-top: 5px;
  font-size: 10px; font-weight: 600; color: var(--text-light);
  text-transform: uppercase; white-space: nowrap;
  text-align: justify; text-align-last: justify;
}
.logo__tag::after { content: ""; display: inline-block; width: 100%; }

/* ---- video testimonial slots ---- */
/* Kai's proof is all video: named, five stars, 41 to 47 seconds, three on the
   landing page and around twenty on the post-booking page. This models that
   layout and density. The slots are empty because TradeSitePros has no
   customers yet, and inventing testimonials on a live page is both against the
   blueprint and unlawful in the UK. */
.vid-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 22px; }
.vid-grid--3 { grid-template-columns: repeat(3, 1fr); }
.vid { margin: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; }
.vid__thumb {
  position: relative; aspect-ratio: 16 / 10;
  display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, var(--bg-alt) 0 10px, var(--bg-soft) 10px 20px);
}
.vid__play {
  width: 34px; height: 34px; border-radius: 50%; background: rgb(11 45 91 / .14);
  display: grid; place-items: center;
}
.vid__play::after { content: ""; border-left: 11px solid rgb(11 45 91 / .5); border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.vid__dur { position: absolute; right: 6px; bottom: 6px; padding: 1px 5px; border-radius: 4px; background: rgb(11 45 91 / .6); color: #fff; font-size: 10px; font-weight: 600; }
.vid figcaption { display: block; padding: 10px 12px 12px; }
.vid__stars { display: block; color: #f5b731; font-size: 12px; letter-spacing: .1em; }
.vid__slot { display: block; margin-top: 5px; font-size: 12px; font-weight: 600; color: var(--text-light); }
.vid__who { display: block; margin-top: 3px; font-size: 11px; color: var(--border); }

@media (max-width: 900px) { .vid-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .vid-grid, .vid-grid--3 { grid-template-columns: repeat(2, 1fr); } }

/* ---- design mockup banner + populated testimonial cards ---- */
/* Only used on /preview/. The live funnel pages keep empty slots. */
.mockup-banner {
  position: sticky; top: 0; z-index: 200;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  padding: 10px clamp(1rem, 4vw, 2rem);
  background: #7c2d12; color: #fff; font-size: 13px; line-height: 1.5;
}
.mockup-banner strong { padding: 2px 8px; border-radius: 4px; background: #fff; color: #7c2d12; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.mockup-banner b { color: #fed7aa; }
.mockup-banner a { color: #fff; }

.vid--filled .vid__thumb { background: linear-gradient(140deg, #16324f, #0B2D5B); }
.vid--filled .vid__play { background: rgb(255 255 255 / .22); }
.vid--filled .vid__play::after { border-left-color: #fff; }
.vid__quote { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--text); }
.vid__name { display: block; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--dark); }
.vid--filled .vid__who { color: var(--text-light); }

/* ---- onboarding questionnaire ---- */
.ob { max-width: 620px; margin: 34px auto 0; }
.ob-progress { height: 6px; border-radius: 999px; background: var(--bg-alt); overflow: hidden; }
.ob-progress__fill { height: 100%; background: var(--green); transition: width .3s ease; }
.ob-count { margin: 14px 0 4px; color: var(--brand-light); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ob h2 { margin: 0; font-size: clamp(24px, 4vw, 32px); font-weight: 800; color: var(--dark); text-align: left; }
.ob-blurb { margin: 8px 0 0; color: var(--text-light); font-size: 15px; }
.ob-warn { margin: 18px 0 0; padding: 14px 16px; border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; background: #fffbeb; color: #92400e; font-size: 14px; line-height: 1.55; }
.ob-form { margin-top: 22px; }

.ob-field { margin-bottom: 20px; }
.ob-field label { display: block; margin-bottom: 4px; font-size: 15px; font-weight: 600; color: var(--dark); }
.ob-field label b { color: var(--accent); }
.ob-help { margin: 0 0 8px; color: var(--text-light); font-size: 13px; line-height: 1.5; }
.ob-field input[type="text"], .ob-field input[type="tel"], .ob-field input[type="email"], .ob-field textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
  font: inherit; font-size: 16px; color: var(--dark); background: #fff; outline: none; resize: vertical;
}
.ob-field input:focus, .ob-field textarea:focus { border-color: var(--brand-light); box-shadow: 0 0 0 3px rgb(14 165 255 / .16); }

.ob-radios { display: grid; gap: 8px; }
.ob-radio { display: flex !important; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; font-weight: 500 !important; cursor: pointer; }
.ob-radio input { width: 18px; height: 18px; accent-color: var(--brand-light); }
.ob-radio:hover { border-color: var(--brand-light); }

.ob-decs { display: grid; gap: 10px; margin-bottom: 20px; }
.ob-dec { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start; padding: 13px 15px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; line-height: 1.5; cursor: pointer; }
.ob-dec input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--green); }

.ob-err { margin: 0 0 14px; color: #b91c1c; font-size: 14px; }
.ob-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ob-actions .btn { flex: 1 1 auto; }
.ob-saved { margin: 14px 0 0; color: var(--text-light); font-size: 12.5px; text-align: center; }

.ob-done { padding: 30px 26px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-soft); text-align: center; }
.ob-done h2 { text-align: center; }
.ob-done p { margin: 12px 0 0; color: var(--text-light); font-size: 15px; }
.ob-done .btn { margin-top: 16px; }

@media (max-width: 560px) { .ob-actions { flex-direction: column-reverse; } }

/* ---- onboarding: visible stepper + reachable actions ---- */
/* Kev could not tell there were more sections. Showing all seven up front, and
   keeping the continue button on screen, fixes both halves of that. */
.ob-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.ob-step { display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px; border: 1px solid var(--border); border-radius: 999px; background: #fff; }
.ob-step span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-alt); color: var(--text-light); font-size: 11px; font-weight: 700; }
.ob-step em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--text-light); }
.ob-step.is-now { border-color: var(--brand-light); background: #eff6ff; }
.ob-step.is-now span { background: var(--brand-light); color: #fff; }
.ob-step.is-now em { color: var(--brand); }
.ob-step.is-done span { background: var(--green); color: #fff; }
.ob-step.is-done em { color: var(--dark); }

.ob-actions--stick {
  position: sticky; bottom: 0; z-index: 10;
  margin: 0 -14px -8px; padding: 12px 14px;
  background: linear-gradient(rgb(255 255 255 / 0), #fff 22%);
}

/* ---- onboarding: clickable stepper + read-through preview ---- */
.ob-steps li { list-style: none; }
button.ob-step { font: inherit; cursor: pointer; }
button.ob-step:hover { border-color: var(--brand-light); }

.ob-preview { margin: 0 0 30px; padding: 20px 22px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.ob-preview h2 { margin: 2px 0 0; font-size: 21px; }
.ob-preview__q { padding: 10px 0; border-bottom: 1px solid var(--bg-alt); }
.ob-preview__q:last-child { border-bottom: 0; }
.ob-preview__q strong { display: block; font-size: 14.5px; font-weight: 600; color: var(--dark); }
.ob-preview__q strong b { margin-left: 6px; color: var(--accent); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.ob-preview__q em { display: block; margin-top: 3px; font-style: normal; font-size: 13px; color: var(--text-light); }

/* Onboarding file uploads. Temporary, retires with the PHP receiver when
   onboarding moves into GoHighLevel. */
.ob-upload { display: grid; gap: 8px; }
.ob-upload input[type="file"] {
  width: 100%; padding: 12px 14px; border: 1px dashed var(--border); border-radius: 10px;
  background: #fff; font: inherit; font-size: 14px; cursor: pointer;
}
.ob-upload input[type="file"]:hover { border-color: var(--brand-light); }
.ob-upload input[type="file"]:disabled { opacity: .6; cursor: progress; }
.ob-upload__list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ob-upload__list li { font-size: 13px; color: var(--dark); }
.ob-upload__list li::before { content: "\2713"; margin-right: 7px; color: var(--green); font-weight: 700; }
.ob-upload__status { margin: 0; font-size: 13px; color: var(--text-light); }
.ob-upload__status.is-bad { color: #b91c1c; }