/* Hallmark · macrostructure: Scroll-Story Scene (the /pack system, told to agencies) · page: / (homepage)
 * tone: confident, plainspoken, receipts-first · anchor hue: UpHex blue 257° · theme: UpHex brand (locked)
 * Loaded after pack_start.css, whose hero, scene, bubble, stops, artifact, pricing, and close styles this page reuses.
 * Motion lives in app/javascript/local_business/fan_hero.js and home_story.js; every rule here is the finished state.
 */

/* ------------------------------------------------------------------ 1 · hero (the fan-out town) */
.home-hero .kicker { margin-bottom: var(--space-md); }
.home-hero .hero__title { max-width: 14ch; font-size: clamp(2.6rem, 5.4vw + 0.5rem, 5.5rem); }
@media (min-width: 960px) { .home-hero .scene { margin-top: -16vw; } }
/* The placeholder names both starting points ("clientwebsite.com or roofers"), so the field runs wider than /pack's. */
:is(.home-page, .library-page, .pricing-page, .highlevel-page, .playbook-page, .ai-page) .start-form { max-width: 42rem; }
/* The hero's trial line sits where the town art fades in behind it, so it gets ink and a canvas halo. */
.home-hero .start-form__note { color: var(--color-navy); font-weight: 600; text-shadow: 0 0 10px var(--color-canvas), 0 0 3px var(--color-canvas); }
/* The close's trial line sits on the night town, where the muted grey loses contrast. */
.start-form--night .start-form__note { color: var(--color-on-navy-2); }
.home-route { stroke-width: 7; }
.home-pin .route-pin__halo { fill: color-mix(in oklab, var(--color-blue) 28%, transparent); }
.home-pin .route-pin__dot { fill: var(--color-surface); stroke: var(--color-blue); stroke-width: 5; }

/* ------------------------------------------------------------------ 2 · receipts */
.home-receipts { padding: var(--space-4xl) 0 var(--space-3xl); }
.home-stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md);
  max-width: 60rem; margin: var(--space-2xl) auto 0; padding: var(--space-xl) 0;
  border-block: var(--rule-hair) solid var(--color-rule-strong); text-align: center;
}
.home-stat { display: flex; flex-direction: column-reverse; gap: var(--space-2xs); min-width: 0; }
.home-stat dt { font-size: var(--text-sm); font-weight: 700; color: var(--color-muted); }
.home-stat dd { margin: 0; font: 800 var(--text-3xl)/1 var(--font-display); letter-spacing: -0.045em; color: var(--color-navy); white-space: nowrap; }
@media (min-width: 760px) { .home-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.home-gap { position: relative; display: grid; gap: var(--space-lg); max-width: 60rem; margin: var(--space-3xl) auto 0; }
.home-receipt {
  display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-lg); align-items: center;
  padding: var(--space-md); border-radius: var(--radius-card);
  background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule); box-shadow: var(--shadow-soft);
}
.home-receipt--best { border: 2px solid var(--color-blue); box-shadow: var(--shadow-lift), var(--shadow-glow); }
.home-receipt__creative { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--color-rule); }
.home-receipt__body { min-width: 0; }
.home-receipt__offer { margin-top: var(--space-2xs); font: 800 var(--text-lg)/1.2 var(--font-display); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.home-receipt__cpl { margin-top: var(--space-xs); font-weight: 700; color: var(--color-muted); }
.home-receipt__cpl span { font: 800 var(--text-2xl)/1 var(--font-display); letter-spacing: -0.04em; color: var(--color-navy); margin-right: 4px; }
.home-receipt--best .home-receipt__cpl span { color: var(--color-blue-deep); }
.home-receipt__meta { display: flex; gap: var(--space-lg); margin: var(--space-sm) 0 0; font-size: var(--text-sm); }
.home-receipt__meta dt { color: var(--color-muted); font-weight: 600; }
.home-receipt__meta dd { margin: 0; font-weight: 800; }
.home-gap__verdict { text-align: center; font-size: var(--text-md); color: var(--color-muted); }
.home-gap__verdict strong, .home-gap__verdict span { color: var(--color-navy); font-weight: 800; }
@media (min-width: 860px) {
  .home-gap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); }
  .home-receipt { grid-template-columns: 1fr; padding: var(--space-lg); }
  .home-receipt__creative { aspect-ratio: 4 / 3; }
  .home-receipt--best { transform: rotate(-1.5deg); }
  .home-receipt--worst { transform: rotate(1.5deg); }
  .home-gap__verdict { grid-column: 1 / -1; }
}
.home-receipts__more, .home-results__more {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-xs) var(--space-lg);
  margin-top: var(--space-xl); text-align: center;
}
.home-receipts__more a, .home-results__more a, .home-followup__link a, .pricing__note a {
  display: inline-flex; align-items: center; min-height: var(--touch-target);
  font-weight: 800; color: var(--color-blue-deep); text-underline-offset: 3px;
}
.home-receipts__more a:hover, .home-results__more a:hover, .home-followup__link a:hover, .pricing__note a:hover { color: var(--color-navy); }
.home-fineprint { font-size: var(--text-xs); color: var(--color-muted); }

/* ------------------------------------------------------------------ 3 · stops (artifacts only; the route is pack_start's) */
.home-picks { display: grid; gap: var(--space-xs); margin-top: var(--space-md); }
.home-pick {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-sm); align-items: baseline;
  padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--color-rule);
}
.home-pick--on { border-color: var(--color-blue); background: var(--color-soft-blue); }
.home-pick__niche { grid-column: 1 / -1; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
.home-pick__offer { font-weight: 700; font-size: var(--text-sm); overflow-wrap: anywhere; }
.home-pick__cpl { font-weight: 800; font-size: var(--text-sm); color: var(--color-blue-deep); white-space: nowrap; }
.home-lead {
  display: flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-md);
  padding: 10px 14px; border-radius: var(--radius-pill); background: var(--color-navy); color: var(--color-on-navy);
  font-size: var(--text-sm); font-weight: 600;
}
.home-lead strong { color: var(--color-blue-light); }
.home-lead__dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--color-blue); box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-blue) 35%, transparent); }

/* ------------------------------------------------------------------ 4 · scale (night, one template → fifty) */
.home-scale { padding: var(--space-4xl) 0; background: radial-gradient(70% 60% at 70% 50%, var(--color-navy-raised), var(--color-navy-deep) 72%); color: var(--color-on-navy); }
.home-scale :focus-visible { outline-color: var(--color-focus-on-navy); }
.home-scale__grid { display: grid; gap: var(--space-2xl); align-items: center; }
.home-scale__points { display: grid; gap: var(--space-sm); margin-top: var(--space-xl); }
.home-scale__points li { display: flex; align-items: center; gap: var(--space-sm); font-weight: 700; }
.home-fleet { margin: 0; display: grid; gap: var(--space-lg); justify-items: center; }
.home-fleet__template {
  padding: var(--space-md) var(--space-lg); border-radius: var(--radius-card);
  background: var(--color-surface); color: var(--color-navy); box-shadow: var(--shadow-lift), var(--shadow-glow); text-align: center;
}
.home-fleet__name { margin-top: var(--space-2xs); font: 800 var(--text-lg)/1.2 var(--font-display); letter-spacing: -0.02em; }
.home-fleet__tiles { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; width: min(100%, 26rem); }
.home-fleet__tile { aspect-ratio: 1; border-radius: 6px; background: var(--color-blue); box-shadow: 0 0 12px color-mix(in oklab, var(--color-blue) 55%, transparent); }
.home-fleet__count { font: 800 var(--text-xl)/1 var(--font-display); letter-spacing: -0.02em; color: var(--color-on-navy-2); }
.home-fleet__count span { color: var(--color-on-navy); font-size: 1.6em; letter-spacing: -0.04em; }
@media (min-width: 960px) {
  /* Pinned on desktop, so it fills the screen rather than showing the canvas below it. */
  .home-scale { min-height: 100svh; display: grid; align-items: center; }
  .home-scale__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xl); }
}

/* ------------------------------------------------------------------ 5 · first client */
.home-first { padding: var(--space-4xl) 0 var(--space-3xl); }
.home-first__grid { display: grid; gap: var(--space-2xl); align-items: center; }
.home-first .kicker { margin-bottom: var(--space-md); }
.home-first__steps { display: grid; gap: var(--space-md); margin-top: var(--space-xl); counter-reset: first; max-width: 34rem; }
.home-first__steps li { counter-increment: first; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--space-sm); color: var(--color-muted); }
.home-first__steps li::before {
  content: counter(first); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--color-blue-deep); color: var(--color-surface); font-weight: 800;
}
.home-first__steps strong { display: block; color: var(--color-navy); font-weight: 800; }
.home-pitch {
  margin: 0; padding: var(--space-xl); border-radius: var(--radius-panel);
  background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule); box-shadow: var(--shadow-lift);
  transform: rotate(-1deg);
}
.home-pitch__niche { margin-top: var(--space-lg); font-weight: 700; color: var(--color-blue-deep); }
.home-pitch__offer { margin-top: var(--space-2xs); font: 800 var(--text-2xl)/1.05 var(--font-display); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.home-pitch__numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); margin: var(--space-lg) 0; }
.home-pitch__numbers div { padding: var(--space-sm); border-radius: 12px; background: var(--color-canvas); }
.home-pitch__numbers dt { font-size: var(--text-xs); font-weight: 700; color: var(--color-muted); }
.home-pitch__numbers dd { margin: 2px 0 0; font: 800 var(--text-xl)/1 var(--font-display); letter-spacing: -0.03em; }
.home-pitch__numbers div:first-child dd { color: var(--color-blue-deep); }
@media (min-width: 960px) { .home-first__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-3xl); } }

/* ------------------------------------------------------------------ 6 · built in (CRM + follow-up, set up by chat) */
.home-followup { padding: var(--space-4xl) 0 var(--space-3xl); background: var(--color-soft-blue); }
.home-followup__grid { display: grid; gap: var(--space-2xl); align-items: center; }
.home-followup .kicker { margin-bottom: var(--space-md); }
.home-followup__points { display: grid; gap: var(--space-md); margin-top: var(--space-xl); max-width: 34rem; }
.home-followup__points li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: var(--space-sm); align-items: baseline; color: var(--color-muted); }
.home-followup__points li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--color-teal); }
.home-followup__points strong { color: var(--color-navy); font-weight: 800; }
.home-followup__link { margin-top: var(--space-lg); }
/* The chat card is pack_start's .chat (navy panel + .msg bubbles), lifted off the soft-blue band. */
.home-followup__chat { margin: 0; color: var(--color-on-navy); box-shadow: var(--shadow-lift); }
.home-followup__chat .report__kicker { color: var(--color-on-navy-2); }
.home-followup__chat .msg--done { font-size: var(--text-sm); }
@media (min-width: 960px) { .home-followup__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xl); } }

/* The lead handoff steps, used by /gohighlevel's "inside Highlevel" section. */
.home-handoff { display: grid; gap: var(--space-sm); }
.home-handoff__step {
  display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-pill); background: var(--color-surface); box-shadow: var(--shadow-soft); font-weight: 800;
}
.home-handoff__step--end { background: var(--color-navy); color: var(--color-on-navy); }
.home-handoff__num { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: 50%; background: var(--color-soft-blue); color: var(--color-blue-deep); font-size: var(--text-sm); }
.home-handoff__step--end .home-handoff__num { background: var(--color-blue); color: var(--color-surface); }

/* ------------------------------------------------------------------ 7 · results */
.home-results { padding: var(--space-4xl) 0 var(--space-3xl); }
.home-results__list { display: grid; gap: var(--space-md); margin-top: var(--space-2xl); }
.home-result {
  display: flex; flex-direction: column; gap: var(--space-2xs); height: 100%; padding: var(--space-lg);
  border-radius: var(--radius-card); background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule);
  box-shadow: var(--shadow-soft); text-decoration: none;
  transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.home-result:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.home-result__metric { margin-top: var(--space-sm); font: 800 var(--text-3xl)/1 var(--font-display); letter-spacing: -0.045em; }
.home-result__label { font-size: var(--text-sm); color: var(--color-muted); font-weight: 600; }
.home-result__name { margin-top: auto; padding-top: var(--space-md); font-weight: 800; color: var(--color-blue-deep); }
@media (min-width: 640px) { .home-results__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .home-results__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ------------------------------------------------------------------ 8 · plans (pack_start's stairs, three steps) */
.home-plans__list { display: grid; gap: var(--space-sm); margin-top: var(--space-2xl); }
.home-plan {
  display: grid; gap: var(--space-xs); padding: var(--space-lg); border-radius: var(--radius-card);
  background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule); box-shadow: var(--shadow-soft);
}
.home-plan__name { font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
.home-plan__detail { color: var(--color-muted); font-size: var(--text-sm); }
@media (min-width: 860px) {
  .home-plans__list { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: var(--space-md); max-width: 60rem; margin-inline: auto; }
  .home-plan { align-content: start; min-height: calc(10rem + var(--h) * 3rem); padding: var(--space-xl) var(--space-lg); }
  .home-plan .step__price { font-size: var(--text-3xl); }
  .home-plan:nth-child(3) { background: var(--color-navy); border-color: var(--color-navy); }
  .home-plan:nth-child(3) .step__price { color: var(--color-on-navy); }
  .home-plan:nth-child(3) :is(.home-plan__name, .home-plan__detail, .step__per) { color: var(--color-on-navy-2); }
}

/* ------------------------------------------------------------------ footer directory */
.home-footer__links { flex-wrap: wrap; gap: 0 var(--space-lg); }
.home-footer__copy { font-size: var(--text-xs); }

/* ------------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  .home-result { transition: none; }
}