/* ============================================================
   Homepage hub — full navigation header + editorial sections.
   Builds on site.css tokens; nothing here touches product pages.
   ============================================================ */

/* Full nav inside the shared .topbar (product pages keep a focused
   logo + buy link header so the sales page has one exit: the purchase) */
.hub-nav { display: flex; align-items: center; gap: 2rem; }
.hub-nav a:not(.btn) {
  font: 600 0.98rem/1 var(--body); text-decoration: none; color: var(--muted);
  transition: color 150ms ease;
}
.hub-nav a:not(.btn):hover { color: var(--ink); }
@media (max-width: 899px) { .hub-nav a:not(.btn) { display: none; } }
@media (max-width: 599px) { .hub-nav .btn { padding: 0.7rem 1rem; font-size: 0.9rem; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 0.95rem/1 var(--body); text-decoration: none; white-space: nowrap;
  padding: 0.75rem 1.35rem; border-radius: 6px; transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.btn-primary { background: var(--ink); color: var(--panel); }
.btn-primary:hover { background: var(--low); }

/* One text-link treatment for every secondary/product CTA.
   text-decoration (not border) so the arrow pseudo-element isn't underlined. */
.text-link {
  font: 600 0.98rem/1.2 var(--body); color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
  text-decoration-color: var(--rule); transition: text-decoration-color 150ms ease, color 150ms ease;
}
.text-link:hover { text-decoration-color: currentColor; }
.text-link-arrow { color: var(--low); }
.text-link-arrow::after { content: "\2192"; display: inline-block; margin-left: 0.45em; transition: transform 150ms ease; }
.text-link-arrow:hover::after { transform: translateX(3px); }

/* Shared editorial rhythm */
.section { padding: clamp(4rem, 7vw, 6rem) 0; }
/* Two white sections in a row share one gap instead of stacking two paddings */
.section:not(.tone-subtle) + .section:not(.tone-subtle) { padding-top: 0; }
.section-tight { padding: clamp(3rem, 5vw, 4.5rem) 0; }
.section-head { max-width: 20ch; margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.eyebrow {
  display: flex; align-items: center; gap: 0.85rem;
  font: 600 0.82rem/1 var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--low);
  margin-bottom: 1.35rem;
}
.eyebrow::before { content: ""; width: 2.25rem; height: 2px; background: var(--low); flex: none; }

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */
.hub-hero { padding: clamp(3.5rem, 7vw, 5.75rem) 0 clamp(3.5rem, 7vw, 5.75rem); overflow: hidden; }
.hub-hero-grid { display: grid; gap: 3.5rem; align-items: center; }
@media (min-width: 1020px) { .hub-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(3.5rem, 6vw, 5.5rem); } }

/* One headline, three set lines: each line is a block, no <br>s, so
   line-height alone controls the spacing between them. */
.hub-hero h1 { font-size: clamp(2.6rem, 1.1rem + 5vw, 4.75rem); line-height: 0.98; letter-spacing: -0.015em; }
.hub-hero h1 .line { display: block; }
.hub-hero h1 .accent { color: var(--low); }
.hub-hero .lede { font-size: 1.2rem; max-width: 44ch; margin: 1.6rem 0 2.25rem; }

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.hero-actions .btn-primary { padding: 0.95rem 1.6rem; font-size: 1rem; }

.credential-line {
  margin: 2.75rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--hair); max-width: 36rem;
  font: 600 0.82rem/1 var(--body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 0.6rem 0.6rem;
}
.credential-line .sep { color: var(--rule); }

/* Hero visual: real product artwork, offset, with a diagonal brand stripe behind it */
.hero-visual { position: relative; }
.hero-visual .diagonal {
  position: absolute; top: -2.5rem; right: 12%; width: 22%; height: calc(100% + 5rem);
  background: var(--low); transform: skewX(-12deg); z-index: 0;
}
.hero-visual .diagonal::after {
  content: ""; position: absolute; inset: 0; left: 70%;
  background: var(--blue-light);
}
.hero-visual figure {
  position: relative; z-index: 1; margin: 0 8% 0 0;
  border: 1px solid var(--rule); border-radius: 10px; overflow: hidden;
  box-shadow: var(--lift); background: var(--panel);
  container-type: inline-size;
}

/* Vector rebuild of the chart on the Cash Flow cover (same data, colors and
   proportions), so it stays sharp at any size or pixel density. Sizes use
   container units so the chart scales with its card like the artwork did. */
.hero-chart { padding: 1.6rem 1.6rem 1.4rem; padding: 6.5cqi 6.5cqi 5.5cqi; }
.hc-title {
  margin: 0; color: var(--muted); text-transform: uppercase; letter-spacing: 0.01em;
  font: 600 1.1rem/1.2 var(--body); font-size: clamp(0.85rem, 4.7cqi, 1.3rem);
}
.hc-sub { margin: 0.2em 0 0; color: var(--muted); opacity: 0.85; font: 400 1rem/1.3 var(--body); font-size: clamp(0.8rem, 4.2cqi, 1.15rem); }
.hc-plot { display: block; width: 100%; height: auto; margin-top: 1.2rem; margin-top: 5cqi; overflow: visible; }
.hc-grid { stroke: var(--hair); stroke-width: 1; }
.hc-zero { stroke: var(--muted); stroke-opacity: 0.4; stroke-width: 2.5; }
.hc-base { stroke: var(--rule); stroke-width: 1.5; }
.hc-line { fill: none; stroke-width: 4; stroke-linejoin: miter; stroke-linecap: butt; }
.hc-line.red { stroke: #C93732; }
.hc-line.blue { stroke: #137BD7; }
.hc-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; margin-top: 1rem; margin-top: 4.5cqi; }
.hc-key {
  margin: 0; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 0.55em;
  color: var(--ink); font: 500 1.05rem/1.2 var(--body); font-size: clamp(0.85rem, 4.5cqi, 1.25rem);
}
.hc-swatch { width: 1.1em; height: 0.3em; border-radius: 1px; }
.hc-val { grid-column: 1 / -1; margin-top: 0.4em; font: 700 1.6rem/1 var(--display); font-size: clamp(1.2rem, 6.8cqi, 2rem); letter-spacing: -0.005em; }
.hc-key.red .hc-swatch { background: #C93732; }
.hc-key.red .hc-val { color: #C93732; }
.hc-key.blue .hc-swatch { background: #137BD7; }
.hc-key.blue .hc-val { color: #137BD7; }
.hero-visual figcaption {
  padding: 0.9rem 1.2rem; font-size: 0.85rem; color: var(--muted); border-top: 1px solid var(--hair);
}
@media (max-width: 1019px) {
  .hero-visual { max-width: 30rem; }
  .hero-visual .diagonal { display: none; }
  .hero-visual figure { margin: 0; }
}

/* ---------------------------------------------------------------
   Positioning (problem) — editorial rule list
   --------------------------------------------------------------- */
.positioning-grid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .positioning-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 4rem; } }
.positioning-head h2 { max-width: 13ch; }
.positioning-head p { color: var(--muted); margin-top: 1.25rem; max-width: 36ch; }

.problem-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.problem-list li {
  display: grid; grid-template-columns: 1fr; gap: 0.35rem;
  padding: 1.5rem 0; border-bottom: 1px solid var(--rule);
}
@media (min-width: 700px) { .problem-list li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 0 2rem; align-items: baseline; } }
.problem-list strong { font: 700 1.2rem/1.3 var(--display); }
.problem-list span { color: var(--muted); max-width: 46ch; }

/* ---------------------------------------------------------------
   Resources — alternating editorial rows, real artwork.
   The two covers have different aspect ratios (16:9 vs ~2.7:1), so equal
   column widths would make the wide banner read as a thumbnail. The
   reversed row gives its media a wider column so both covers occupy a
   comparable area (~equal visual weight) rather than equal width.
   --------------------------------------------------------------- */
.resource-row { display: grid; gap: 2rem; align-items: center; }
.resource-row + .resource-row { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
@media (min-width: 940px) {
  .resource-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 5vw, 4.5rem); }
  .resource-row.reverse { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .resource-row.reverse .resource-media { order: 2; }
  .resource-row.reverse .resource-copy { order: 1; }
}

/* Stacked (tablet): both covers span the column, so trim the taller 16:9 one
   to keep the two at comparable area. On phones both simply go full width. */
@media (min-width: 600px) and (max-width: 939px) {
  .resource-row:not(.reverse) .resource-media { max-width: 82%; }
}
.resource-media { border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; box-shadow: var(--lift); background: var(--panel); }
.resource-media img { display: block; width: 100%; height: auto; }

.resource-copy .kicker { font: 600 0.82rem/1 var(--body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--low); margin-bottom: 0.85rem; }
.resource-copy h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.02; margin-bottom: 0.9rem; }
.resource-copy p { color: var(--muted); max-width: 44ch; margin-bottom: 1.5rem; }

/* ---------------------------------------------------------------
   Business areas — numbered index, not cards
   --------------------------------------------------------------- */
.areas-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.areas-list li {
  display: grid; grid-template-columns: 3rem 1fr; gap: 0 1.25rem;
  padding: 1.4rem 0; border-bottom: 1px solid var(--rule);
}
.areas-list .num { font: 700 1.2rem/1.4 var(--display); color: var(--low); font-variant-numeric: tabular-nums; }
.areas-list h3 { font-size: 1.3rem; line-height: 1.4; margin-bottom: 0.3rem; }
.areas-list p { color: var(--muted); margin: 0; max-width: 58ch; grid-column: 1 / -1; }
@media (min-width: 700px) {
  .areas-list li { grid-template-columns: 3.5rem minmax(0, 16rem) minmax(0, 1fr); align-items: baseline; }
  .areas-list h3 { margin-bottom: 0; }
  .areas-list p { grid-column: 3; }
}

/* ---------------------------------------------------------------
   Why section
   --------------------------------------------------------------- */
.why-grid { display: grid; gap: 1.75rem; }
@media (min-width: 900px) { .why-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; } }
.why-grid h2 { max-width: 14ch; }
.why-copy p { color: var(--muted); font-size: 1.08rem; max-width: 60ch; }
.why-copy p + p { margin-top: 1.1rem; }

/* ---------------------------------------------------------------
   Email capture
   --------------------------------------------------------------- */
.capture-grid { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 860px) { .capture-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; } }
.capture-grid h2 { font-size: clamp(1.8rem, 3vw, 2.3rem); }
.capture-grid > div:first-child p { color: var(--muted); margin: 0.75rem 0 0; max-width: 46ch; }
.capture-form { display: flex; flex-wrap: wrap; gap: 0.9rem; }
@media (min-width: 860px) { .capture-form { justify-content: flex-end; } }
.capture-form .btn-primary { padding: 0.95rem 1.6rem; font-size: 1rem; }

/* ---------------------------------------------------------------
   Final CTA — dark navy band with diagonal brand geometry
   --------------------------------------------------------------- */
.final-cta { position: relative; background: var(--band); color: var(--band-ink); overflow: hidden; padding: clamp(4rem, 7vw, 5.5rem) 0; }
.final-cta::before {
  content: ""; position: absolute; top: -20%; right: -4%; width: 26%; height: 160%;
  background: var(--low); transform: skewX(-12deg); opacity: 0.9;
}
.final-cta::after {
  content: ""; position: absolute; top: -20%; right: -12%; width: 10%; height: 160%;
  background: var(--blue-light); transform: skewX(-12deg); opacity: 0.85;
}
.final-cta-in { position: relative; z-index: 1; display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .final-cta-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.final-cta h2 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); max-width: 14ch; }
.final-cta p { color: var(--band-muted); margin: 1rem 0 0; max-width: 38ch; font-size: 1.08rem; }
.final-cta .btn-primary { background: var(--panel); color: var(--ink); padding: 0.95rem 1.6rem; font-size: 1rem; }
.final-cta .btn-primary:hover { background: var(--blue-light); color: var(--band); }
@media (min-width: 900px) { .final-cta-actions { justify-self: end; margin-right: 18%; } }
@media (max-width: 599px) { .final-cta::before, .final-cta::after { opacity: 0.45; } }