/* HarperCo brand system — the final, shared identity layer. */
:root {
  --muted-2: #626a62;
  --radius-control: 12px;
  --radius-nav: 18px;
  --brand-rule: #33547e;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Bricolage Grotesque", "Arial Nova", Arial, sans-serif;
  --font-editorial: "Fraunces", Georgia, serif;
}

body {
  font-family: var(--font-sans);
}

h1,
h2,
.page-hero h1,
.section-title,
.timeback-title,
.fn-lead {
  font-family: var(--font-display);
  font-weight: 650;
  letter-spacing: -0.025em;
}

.caveat,
h1 .caveat,
h2 .caveat,
.section-title .caveat,
.pull-quote {
  position: relative;
  top: 0;
  display: inline-block;
  margin: 0;
  transform: none;
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.022em;
}

/* Calibrated live wordmark. Set alone: the eyebrow dash was retired Sept 2026. */
.brand-wm {
  line-height: 1;
}

.wm-top {
  column-gap: 0.045em;
}

.wm-harper {
  font-weight: 650;
  letter-spacing: 0.035em;
}

.wm-co {
  position: relative;
  top: 0.005em;
  font-size: 0.99em;
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.founder-note-sig {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 500;
  transform: none;
}


/* Less UI-kit, more editorial object. */
nav {
  border-radius: var(--radius-nav);
  background: rgba(244, 241, 234, 0.96);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 10px 30px -22px rgba(20, 24, 31, 0.42);
}

.highlight-lime {
  padding: 0 0.14em 0.04em;
  border-radius: 3px;
  transform: none;
  box-shadow: none;
}

.btn {
  border-radius: var(--radius-control);
}

button.btn-submit {
  border-radius: var(--radius-control);
}

.radio-group {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Homepage chapters space from their leading edge so adjacent sections do not
   double the intended gap. The element-qualified selector intentionally wins
   over the legacy page-local `section.content` rule. */
section.content.section-space {
  padding: 76px 0 0;
}

section.content.section-space-first {
  padding-top: 0;
}

main > section.content.section-space:last-of-type {
  padding-bottom: 88px;
}

.editorial-center {
  text-align: center;
}

.editorial-copy {
  max-width: 680px;
  margin: 20px auto 0;
}

.editorial-copy + .editorial-copy {
  margin-top: 18px;
}

.oa-note-centered {
  max-width: 640px;
  margin: 30px auto 0;
  text-align: center;
}

.oa-inline-link {
  color: inherit;
  font-weight: 700;
}

.required-key {
  color: var(--warm);
}

.honeypot {
  display: none;
}

.form-success.is-visible {
  display: block;
}

.checkup-hero-cta {
  margin-top: 24px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-delay: 0ms !important;
  }
}

/* Plans present client problems first; service tiers stay behind the diagnosis. */
.sp-hero > .btn {
  margin-top: 30px;
}

.sp-section-head {
  max-width: 1000px;
  margin: 76px auto 0;
}

.sp-section-head h2 {
  max-width: 720px;
  margin: 0;
}

.sp-callout a {
  color: inherit;
  font-weight: 700;
}

.sp-pricing {
  max-width: 1000px;
  margin: 28px auto 0;
  border-top: 1px solid var(--line-2);
}

.sp-pricing > div {
  display: grid;
  grid-template-columns: minmax(180px, 0.35fr) minmax(0, 1fr);
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-2);
}

.sp-pricing strong {
  color: var(--ink);
}

.sp-pricing span {
  color: var(--muted);
  line-height: 1.55;
}

/* Checkup narrative: one concise argument followed by a decision ledger. */
.checkup-story {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(44px, 7vw, 88px);
  max-width: 1080px;
  margin: 92px auto 0;
  padding: 64px 0;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  align-items: center;
}

.checkup-story .section-title {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(35px, 4.7vw, 58px);
}

.checkup-story-copy {
  padding-left: clamp(28px, 4vw, 52px);
  border-left: 2px solid var(--brand-rule);
}

.checkup-story-copy p {
  max-width: 54ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(17px, 1.55vw, 19px);
  line-height: 1.65;
}

.checkup-story-copy p + p {
  margin-top: 20px;
}

.checkup-story-copy .story-credential {
  color: var(--ink);
  font-weight: 650;
}

.checkup-outcomes {
  max-width: 1040px;
  margin-top: 88px;
  padding: 0;
}

.checkup-outcomes .section-title {
  margin-bottom: 16px;
}

.outcome-intro {
  max-width: 650px;
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
}

.outcome-ledger {
  margin-top: 38px;
  border-top: 1px solid var(--line-2);
}

.outcome-row {
  display: grid;
  grid-template-columns: 52px minmax(230px, 0.9fr) minmax(250px, 1.1fr) 28px;
  gap: 24px;
  align-items: center;
  padding: 25px 4px;
  border-bottom: 1px solid var(--line-2);
  color: inherit;
  text-decoration: none;
  transition: padding-left 0.2s ease, background 0.2s ease;
}

.outcome-row:hover,
.outcome-row:focus-visible {
  padding-left: 14px;
  background: rgba(110, 147, 189, 0.06);
}

.outcome-row-static {
  cursor: default;
}

.outcome-row-static:hover {
  padding-left: 4px;
  background: transparent;
}

.outcome-row-static:hover .outcome-arrow {
  transform: none;
}

.monthly-range .amt {
  font-size: clamp(24px, 3vw, 30px);
  white-space: nowrap;
}

.outcome-no,
.outcome-plan small {
  color: var(--sea-deep);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.outcome-fit,
.outcome-plan {
  display: grid;
  gap: 5px;
}

.outcome-fit strong,
.outcome-plan strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.2;
}

.outcome-fit span,
.outcome-plan span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.outcome-arrow {
  color: var(--sea-deep);
  font-size: 24px;
  transition: transform 0.2s ease;
}

.outcome-row:hover .outcome-arrow {
  transform: translateX(4px);
}

.fld-tab,
.fld-price .amt small,
.fld-price .sub,
.fld-feats span,
.cmp-head p,
.cmp-feature small,
.cmp-price {
  color: var(--muted-2);
}

@media (max-width: 560px) {
  .radio-group {
    grid-template-columns: 1fr;
  }

  .sp-pricing > div {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

@media (max-width: 900px) {
  section.content.section-space {
    padding-top: 60px;
  }

  section.content.section-space-first {
    padding-top: 0;
  }

  main > section.content.section-space:last-of-type {
    padding-bottom: 68px;
  }

  .checkup-story {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 68px;
    padding: 50px 0;
  }

  .checkup-story .section-title {
    max-width: 16ch;
  }

  .checkup-story-copy {
    padding: 24px 0 0;
    border-top: 2px solid var(--brand-rule);
    border-left: 0;
  }

  .checkup-outcomes {
    margin-top: 68px;
  }

  .outcome-row {
    grid-template-columns: 36px minmax(0, 1fr) 24px;
    gap: 8px 16px;
    padding: 22px 2px;
  }

  .outcome-plan {
    grid-column: 2;
  }

  .outcome-arrow {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
  }
}

.photo-hero-cap,
.hero-photocap {
  padding: 7px 0 5px;
  border-radius: 0;
  border-top: 2px solid rgba(201, 217, 236, 0.9);
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (prefers-color-scheme: dark) {
  :root {
    --muted-2: #aaa59b;
    --brand-rule: #86a8cc;
  }

  .wm-harper {
    color: #ecf2f9;
  }

  .wm-co {
    color: var(--brand-rule);
  }


  nav {
    background: rgba(24, 27, 34, 0.97);
  }

  .outcome-no,
  .outcome-plan small,
  .outcome-arrow {
    color: #aecbe8;
  }
}

@media (max-width: 420px) {
  nav .brand-wm {
    font-size: 18px;
  }
}

/* Three offer-page archetypes: shared foundations, different choreography. */
@media (min-width: 701px) {
  /* Full-bleed like every other photo hero (the inset rounded card is retired).
     Explicit height rather than aspect-ratio + max-height: see the Safari note below. */
  .archetype-monthly .photo-hero-fig {
    aspect-ratio: auto;
    height: min(620px, calc(100vw * 8.5 / 16));
  }

  /* The text box's side padding is the page gutter (border-box), so cap the h1, not the box. */
  .archetype-monthly .photo-hero-text {
    max-width: none;
  }

  .archetype-monthly .photo-hero-text h1 {
    max-width: none;
    text-wrap: balance;
  }

  /* Explicit height, not aspect-ratio + max-height: Safari transfers the height cap
     through the ratio into a width cap (580 x 2.15 = 1247px), clipping the full-bleed
     figure short on the right at wide viewports. */
  .archetype-project .photo-hero-fig {
    aspect-ratio: auto;
    height: min(580px, calc(100vw / 2.15));
  }

  .archetype-project .photo-hero-text {
    max-width: none;
  }

  .archetype-project .photo-hero-text h1 {
    text-wrap: balance;
  }

  .archetype-sector .photo-hero-fig {
    min-height: 620px;
    aspect-ratio: 3 / 2;
  }

  .archetype-sector .photo-hero-text {
    max-width: 720px;
    padding-bottom: 64px;
  }

  .archetype-gateway .photo-hero-fig {
    aspect-ratio: 16 / 7.5;
  }
}

@media (min-width: 681px) {
  .hero-proof-label {
    font-size: 14.5px;
  }

  .fld-feats span,
  .fld-reassure {
    font-size: 15px;
  }

  .fld-cap,
  .sp-fine {
    font-size: 14px;
  }

  .sp-note {
    font-size: 16px;
  }
}

@media (max-width: 350px) {
  .post-cta .btn {
    max-width: 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }
}