/* Hallmark · macrostructure: Scroll-Story Scene (the homepage's /pack system) · page: /gohighlevel
 * tone: operator-to-operator, plainspoken · anchor hue: UpHex blue 257° · theme: UpHex brand (locked)
 * Loaded after pack_start.css and uphex_home.css, whose hero, scene, receipts, scale, handoff, close, and footer
 * styles this page reuses. Motion: fan_hero.js + home_story.js + highlevel_story.js; every rule here is the finished state.
 */

/* ------------------------------------------------------------------ 1 · hero (the generated town square) */
.highlevel-hero .hero__title { max-width: 15ch; }
/* The generated art is 1088×608, a touch wider than the 1672×941 town, so the frame follows it. */
@media (min-width: 760px) { .highlevel-hero__frame { aspect-ratio: 1088 / 608; } }

/* ------------------------------------------------------------------ 4 · inside Highlevel */
.ghl-product { padding: var(--space-4xl) 0 var(--space-3xl); background: var(--color-soft-blue); }
.ghl-product .kicker { margin-bottom: var(--space-md); }
.ghl-product__grid { display: grid; gap: var(--space-2xl); align-items: center; }
.ghl-panels { display: grid; gap: var(--space-md); }
.ghl-panel {
  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-soft);
}
.ghl-panel--client { border: 2px solid var(--color-blue); box-shadow: var(--shadow-lift), var(--shadow-glow); }
.ghl-panel__title { margin-top: var(--space-xs); font: 800 var(--text-xl)/1.15 var(--font-display); letter-spacing: -0.02em; }
.ghl-panel__checks { display: grid; gap: var(--space-xs); margin-top: var(--space-md); }
.ghl-panel__checks li { display: flex; align-items: center; gap: var(--space-xs); font-weight: 700; }
.ghl-panel__checks li::before { content: ""; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--color-teal); }
.ghl-panel__picked { display: flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-md); padding: 10px 14px; border-radius: 12px; background: var(--color-soft-blue); font-weight: 700; color: var(--color-blue-deep); }
.ghl-panel__steps { display: grid; gap: var(--space-xs); margin-top: var(--space-md); counter-reset: step; }
.ghl-panel__steps li { counter-increment: step; display: flex; align-items: center; gap: var(--space-sm); font-weight: 600; color: var(--color-muted); }
.ghl-panel__steps li::before { content: counter(step); display: grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: none; border-radius: 50%; background: var(--color-blue-deep); color: var(--color-surface); font-size: var(--text-sm); font-weight: 800; }
.ghl-handoff { margin-top: var(--space-2xl); }
.ghl-handoff__line { margin-top: var(--space-md); max-width: 44rem; color: var(--color-muted); }
@media (min-width: 760px) {
  .ghl-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .ghl-panel--client { margin-top: var(--space-xl); }
  .ghl-handoff { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 960px) { .ghl-product__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-3xl); } }

/* ------------------------------------------------------------------ 5 · the offer */
.ghl-models { padding: var(--space-4xl) 0 var(--space-3xl); }
.ghl-models__kicker { text-align: center; margin-bottom: var(--space-md); }
.ghl-models__list { position: relative; display: grid; gap: var(--space-md); margin-top: var(--space-2xl); }
.ghl-model {
  display: grid; gap: var(--space-xs); align-content: start; padding: var(--space-xl) 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);
}
.ghl-model__name { font: 800 var(--text-xl)/1.1 var(--font-display); letter-spacing: -0.02em; }
.ghl-model__body { color: var(--color-muted); }
.ghl-model__proof { margin-top: auto; padding-top: var(--space-sm); font-size: var(--text-sm); font-weight: 800; color: var(--color-blue-deep); }
.ghl-foundation {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: var(--space-xs) var(--space-md);
  margin-top: var(--space-md); padding: var(--space-lg); border-radius: var(--radius-card);
  background: var(--color-navy); color: var(--color-on-navy); text-align: center;
}
.ghl-foundation strong { font: 800 var(--text-lg)/1.2 var(--font-display); }
.ghl-foundation span { color: var(--color-on-navy-2); font-weight: 600; }
.ghl-models__link { margin-top: var(--space-lg); text-align: center; }
.ghl-models__link a, .ghl-jess__link a { display: inline-flex; align-items: center; min-height: var(--touch-target); font-weight: 800; color: var(--color-blue-deep); text-underline-offset: 3px; }
@media (min-width: 860px) { .ghl-models__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ------------------------------------------------------------------ 6 · Jess (night) */
.ghl-jess { padding: var(--space-4xl) 0; background: radial-gradient(70% 60% at 30% 50%, var(--color-navy-raised), var(--color-navy-deep) 72%); color: var(--color-on-navy); }
.ghl-jess :focus-visible { outline-color: var(--color-focus-on-navy); }
.ghl-jess__grid { display: grid; gap: var(--space-2xl); align-items: center; }
.ghl-quote { margin: 0; }
.ghl-quote blockquote { margin: 0; font: italic 500 clamp(1.75rem, 2.6vw + 0.75rem, 2.75rem)/1.2 var(--font-editorial); letter-spacing: -0.01em; }
.ghl-quote figcaption { margin-top: var(--space-lg); font-weight: 800; }
.ghl-quote figcaption span { display: block; font-weight: 600; color: var(--color-on-navy-2); }
.ghl-ledger { display: grid; margin: var(--space-xl) 0 0; border-top: var(--rule-hair) solid color-mix(in oklab, var(--color-white) 16%, transparent); }
.ghl-ledger div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--space-md); padding: var(--space-md) 0; border-bottom: var(--rule-hair) solid color-mix(in oklab, var(--color-white) 16%, transparent); }
.ghl-ledger dt { font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-on-navy-2); }
.ghl-ledger dd { margin: 0; font-weight: 700; }
.ghl-ledger__result dd { font: 800 var(--text-xl)/1.1 var(--font-display); color: var(--color-blue-light); }
.ghl-jess__link { margin-top: var(--space-lg); }
.ghl-jess__link a { color: var(--color-blue-light); }
.ghl-jess__link a:hover { color: var(--color-on-navy); }
.ghl-jess__fineprint { margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--color-on-navy-2); }
@media (min-width: 960px) { .ghl-jess__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xl); } }