/* UpHex local-business pages · shared layer (base, nav, forms, pricing, close, footer)
 * Loaded by layouts/base_marketing for both /pack and /pack/optimize; page layers are pack_start.css and pack_optimize.css.
 * Hallmark · theme: UpHex brand (locked) · nav: N5 floating pill · footer: Ft5 statement
 */
/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-navy);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
em { font-family: var(--font-editorial); font-style: italic; font-weight: 500; color: var(--color-blue); letter-spacing: -0.01em; }
sup a { color: var(--color-muted); text-decoration: none; font-size: 0.7em; margin-left: 2px; }
.u-figure { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.shell { width: min(100% - 2rem, var(--shell)); margin-inline: auto; }
:focus-visible { outline: var(--rule-focus) solid var(--color-focus); outline-offset: 3px; border-radius: 6px; }
/* On navy surfaces the blue ring sits too close to the background, so it switches to the light one. */
:is(.close, .footer, .watch, .catch, .go, .tape) :focus-visible { outline-color: var(--color-focus-on-navy); }
.br-wide { display: none; }
@media (min-width: 760px) { .br-wide { display: inline; } }

/* ------------------------------------------------------------------ buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 52px; padding: 0 var(--space-lg);
  border: 0; border-radius: var(--radius-pill);
  background: var(--color-action); color: var(--color-surface);
  font: 700 var(--text-action)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer;
  box-shadow: 0 10px 24px -12px var(--color-blue-deep);
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.button:hover { background: var(--color-blue-deep); }
.button:active { transform: translateY(1px); }
.button:disabled { opacity: .5; cursor: not-allowed; }
/* Smaller label, so it rests on the deep blue (6:1 with white) instead of the large-text-only action blue. */
.button--small { min-height: var(--touch-target); padding: 0 var(--space-md); font-size: var(--text-sm); background: var(--color-blue-deep); }
.button--small:hover { background: var(--color-navy); }

/* ------------------------------------------------------------------ nav (N5 floating pill) */
.nav {
  position: fixed; z-index: 50; top: var(--space-sm); left: 50%; transform: translateX(-50%);
  width: min(100% - 1rem, 1080px);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: 6px 6px 6px var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--color-white) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: var(--shadow-soft);
}
.nav__brand { display: inline-flex; align-items: center; min-height: var(--touch-target); }
.nav__brand img { width: 112px; height: auto; }
.nav__links { display: none; gap: var(--space-lg); }
.nav__links a, .nav__signin { display: inline-flex; align-items: center; min-height: var(--touch-target); font-size: var(--text-sm); font-weight: 600; text-decoration: none; color: var(--color-muted); white-space: nowrap; padding: 0 4px; }
.nav__links a:hover, .nav__signin:hover { color: var(--color-navy); }
.nav__actions { display: flex; align-items: center; gap: var(--space-sm); }
@media (min-width: 760px) { .nav__links { display: flex; } .nav__brand img { width: 124px; } }

/* ------------------------------------------------------------------ section type */
.section-title {
  font: 800 var(--text-3xl)/1.02 var(--font-display);
  letter-spacing: -0.035em;
  overflow-wrap: anywhere; min-width: 0;
}
.section-title em { font-weight: 500; }
.section-title--center, .section-lede--center { text-align: center; margin-inline: auto; }
.section-lede { margin-top: var(--space-md); max-width: 38rem; font-size: var(--text-md); color: var(--color-muted); }
.section-title--on-navy { color: var(--color-on-navy); }
.section-title--on-navy em, .close__title em, .go__title em { color: var(--color-blue-light); }
.section-lede--on-navy { color: var(--color-on-navy-2); }


/* ------------------------------------------------------------------ start form (both pages) */
.start-form { margin-top: var(--space-xl); display: grid; gap: var(--space-sm); max-width: 36rem; }
.start-form__input {
  min-height: 56px; width: 100%; padding: 0 var(--space-lg);
  border: 1.5px solid var(--color-field-border); border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-navy);
  font: 600 var(--text-md) var(--font-body);
  transition: border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.start-form__input::placeholder { color: var(--color-muted); font-weight: 500; }
.start-form__input:hover { border-color: var(--color-navy); }
.start-form__input:focus-visible { outline: var(--rule-focus) solid var(--color-focus); outline-offset: 2px; border-color: var(--color-blue); box-shadow: var(--shadow-glow); }
.start-form__input[aria-invalid="true"] { border-color: var(--color-error); }
.start-form__button { min-height: 56px; }
.start-form__note { font-size: var(--text-sm); color: var(--color-muted); padding-left: var(--space-lg); }
.start-form__error { font-size: var(--text-sm); font-weight: 700; color: var(--color-error); padding-left: var(--space-lg); }
/* Empty until a rejection; kept rendered (not display: none) so screen readers register the live region. */
.start-form__error:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.start-form--night .start-form__error { color: var(--color-on-navy); }
/* The quiet link under a hero form that swaps Google (/pack) for Facebook & Instagram (/pack/facebook). */
.path-switch { position: relative; margin-top: var(--space-sm); padding-left: var(--space-lg); font-size: var(--text-sm); font-weight: 700; }
.path-switch a { display: inline-flex; align-items: center; min-height: var(--touch-target); color: var(--color-blue-deep); text-underline-offset: 3px; }
.path-switch a:hover { color: var(--color-navy); }
@media (min-width: 560px) {
  .start-form { grid-template-columns: minmax(0, 1fr) auto; }
  .start-form__note, .start-form__error { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ route overlay (town scenes) */
.route { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.route--ghost { stroke: color-mix(in oklab, var(--color-white) 55%, transparent); stroke-width: 7; stroke-dasharray: 2 16; }
.route--live { stroke: var(--color-blue); stroke-width: 9; filter: drop-shadow(0 0 10px color-mix(in oklab, var(--color-blue) 75%, transparent)); }
.route__spark { fill: var(--color-surface); stroke: var(--color-blue); stroke-width: 5; }
.pulse circle { fill: none; stroke: var(--color-blue); stroke-width: 4; opacity: 0; }


/* ------------------------------------------------------------------ shared small parts */
.kicker, .receipt__kicker, .report__kicker, .contract__kicker, .artifact__label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
.status__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-muted); box-shadow: 0 0 0 4px var(--color-rule); }
.status__dot--teal { width: 8px; height: 8px; border-radius: 50%; background: var(--color-teal); box-shadow: none; flex: none; }
.msg { max-width: 88%; padding: 12px 16px; border-radius: 20px; font-weight: 600; line-height: 1.45; }
.msg--owner { justify-self: end; background: var(--color-blue-deep); color: var(--color-surface); border-bottom-right-radius: 6px; }
.msg--uphex { justify-self: start; background: var(--color-navy-raised); color: var(--color-on-navy); border-bottom-left-radius: 6px; }
.msg--done { display: flex; align-items: center; gap: var(--space-xs); }

/* ------------------------------------------------------------------ pricing stairs (both pages) */
.pricing { padding: var(--space-3xl) 0 var(--space-4xl); background: linear-gradient(to bottom, var(--color-canvas), var(--color-soft-blue)); }
.stairs { display: grid; gap: var(--space-sm); margin-top: var(--space-2xl); }
.step {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-md);
  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);
}
.step__budget { font-size: var(--text-base); color: var(--color-muted); }
.step__budget::before { content: "Ad budget"; display: block; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 2px; }
.step__budget strong { color: var(--color-navy); }
.step__price { font: 800 var(--text-2xl)/1 var(--font-display); letter-spacing: -0.04em; white-space: nowrap; }
.step__per { font-size: 0.45em; color: var(--color-muted); letter-spacing: 0; margin-left: 2px; }
.pricing__note { margin: var(--space-xl) auto 0; max-width: 36rem; text-align: center; color: var(--color-muted); font-weight: 600; }
@media (min-width: 860px) {
  .stairs { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: var(--space-md); }
  .step {
    flex-direction: column-reverse; align-items: flex-start; justify-content: space-between;
    min-height: calc(11rem + var(--h) * 3.5rem);
    padding: var(--space-xl) var(--space-lg);
  }
  .step:nth-child(4) { background: var(--color-navy); border-color: var(--color-navy); }
  .step:nth-child(4) .step__price { color: var(--color-on-navy); }
  .step:nth-child(4) .step__budget, .step:nth-child(4) .step__per { color: var(--color-on-navy-2); }
  .step:nth-child(4) .step__budget strong { color: var(--color-on-navy); }
  .step__price { font-size: var(--text-3xl); }
}

/* ------------------------------------------------------------------ close (night town, both pages) */
.close { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden; background: var(--color-navy-deep); color: var(--color-on-navy); }
.close__scene { position: absolute; inset: 0; }
.close__scene img, .close__overlay { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.close__scene img { filter: brightness(0.38) saturate(1.25) hue-rotate(-12deg); transform: scale(1.06); }
.close__scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--color-navy-deep) 0%, color-mix(in oklab, var(--color-navy-deep) 55%, transparent) 55%, color-mix(in oklab, var(--color-navy-deep) 20%, transparent) 100%); }
.route--night { stroke: var(--color-blue); stroke-width: 8; filter: drop-shadow(0 0 14px color-mix(in oklab, var(--color-blue) 90%, transparent)); }
.close__content { position: relative; z-index: 2; padding: var(--space-4xl) 0; }
.close__title { font: 800 var(--text-display)/0.95 var(--font-display); letter-spacing: -0.045em; max-width: 12ch; overflow-wrap: anywhere; min-width: 0; }
.close__lede { margin-top: var(--space-lg); max-width: 30rem; font-size: var(--text-md); color: var(--color-on-navy-2); }
.start-form--night .start-form__input { border-color: transparent; }

/* ------------------------------------------------------------------ footer (Ft5 statement) */
.footer { background: var(--color-navy-deep); color: var(--color-on-navy-2); padding: var(--space-2xl) 0 var(--space-xl); border-top: 1px solid color-mix(in oklab, var(--color-white) 8%, transparent); }
.footer__inner { display: grid; gap: var(--space-lg); }
.footer__logo { width: 120px; height: auto; }
.footer__line { font: italic 500 var(--text-lg)/1.35 var(--font-editorial); color: var(--color-on-navy); max-width: 34rem; }
.footer__links { display: flex; gap: var(--space-lg); }
.footer__links a { display: inline-flex; align-items: center; min-height: var(--touch-target); font-weight: 700; text-decoration: none; white-space: nowrap; }
.footer__links a:hover { color: var(--color-on-navy); }
.footer__sources { display: grid; gap: var(--space-2xs); padding-top: var(--space-md); border-top: 1px solid color-mix(in oklab, var(--color-white) 8%, transparent); font-size: var(--text-xs); list-style: decimal inside; }

/* ------------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .start-form__input { transition: none; }
}