/* How It Works: page-scoped layout on top of scroll.css (GrowthSystemV2). Prefix: .hiw- */

/* shared bits */
.hiw-circle { display: flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--coral); font: 700 15px/1 var(--font-display); color: var(--coral); }
.hiw-phase { display: inline-flex; align-items: center; gap: 12px; padding: 5px 18px 5px 5px; border: 1px solid rgba(234,165,114,0.35); background: rgba(234,165,114,0.08); border-radius: 999px; font: 600 12px/1.3 var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--coral); }
.hiw-phase b { padding: 5px 12px; border-radius: 999px; background: var(--coral); color: var(--ink); font-weight: 700; }
.hiw-phase-panel { isolation: isolate; }
.hiw-phase-panel > .container { position: relative; z-index: 1; }
.hiw-ghost { position: absolute; right: 36px; top: 28px; z-index: 0; font: 700 340px/.8 var(--font-display); color: rgba(242,241,237,0.035); pointer-events: none; user-select: none; }

/* split header, 7/5 like the board */
.hiw-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 64px; margin-bottom: 56px; }
.hiw-head > p { max-width: none; justify-self: stretch; margin-bottom: 4px; }
.hiw-head--phase { margin-bottom: 64px; }
.hiw-head--phase .section-head__main { gap: 22px; }
.hiw-head-left { margin-bottom: 56px; gap: 18px; }
@media (max-width: 900px) {
  .hiw-head { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .hiw-head > p, .hiw-head > .section-head__aside { justify-self: start; max-width: 640px; }
}

/* ── 1. Hero ── */
.hiw-hero { padding-block: 120px 104px; }
.hiw-hero__content { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; max-width: 900px; }
.hiw-tag { display: inline-flex; align-items: center; gap: 10px; padding: 9px 20px; border: 1px solid rgba(234,165,114,0.35); background: rgba(234,165,114,0.08); border-radius: 999px; font: 600 12px/1.3 var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--coral); }
.hiw-tag span { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
.hiw-hero__title { font-size: clamp(56px, 6.67vw, 96px); line-height: 1; text-wrap: initial; }
.hiw-hero__lead { max-width: 640px; }

.hiw-flowline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.hiw-flowline__step { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 10px; border: 1px solid rgba(149,173,197,0.18); border-radius: 999px; background: rgba(17,17,17,0.5); font: 600 13px/1.2 var(--font-body); letter-spacing: 1.5px; text-transform: uppercase; color: var(--cream); white-space: nowrap; }
.hiw-flowline__step b { padding: 1px 8px; border-radius: 999px; background: var(--coral); font: 700 13px/1.3 var(--font-display); letter-spacing: .5px; color: var(--ink); }
.hiw-flowline__arrow { display: flex; }
.hiw-flowline__arrow svg { width: 28px; height: 14px; fill: none; stroke: var(--coral); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hiw-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 8px; }

.hiw-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 96px; border-top: 1px solid rgba(149,173,197,0.14); }
.hiw-stats__item { display: flex; flex-direction: column; gap: 20px; padding: 44px 32px 0; min-width: 0; }
.hiw-stats__item:first-child { padding-left: 0; }
.hiw-stats__item:last-child { padding-right: 0; }
.hiw-stats__item + .hiw-stats__item { border-left: 1px solid rgba(149,173,197,0.14); }
.hiw-stats__n { font: 700 clamp(64px, calc(8.4vw - 17px), 104px)/.95 var(--font-display); text-transform: uppercase; color: var(--coral); white-space: nowrap; }
.hiw-stats__text { display: flex; flex-direction: column; gap: 10px; }
.hiw-stats__label { font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--white); }
.hiw-stats__meta { font: 600 12px/1.4 var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--slate); }

@media (max-width: 1024px) {
  .hiw-stats { margin-top: 72px; }
  .hiw-stats__item { padding: 36px 24px 0; }
  .hiw-stats__label { font-size: 15px; }
  .hiw-stats__meta { font-size: 11px; letter-spacing: 1.5px; }
}
@media (max-width: 620px) {
  .hiw-hero { padding-block: 64px 56px; }
  .hiw-hero__content { gap: 20px; align-items: stretch; }
  .hiw-tag { align-self: flex-start; padding: 7px 14px; font-size: 11px; letter-spacing: 1.5px; }
  .hiw-hero__title { font-size: clamp(40px, 12.8vw, 50px); line-height: 1.02; }
  .hiw-flowline { flex-direction: column; align-items: flex-start; gap: 4px; }
  .hiw-flowline__step { font-size: 12px; letter-spacing: 1.2px; }
  .hiw-flowline__arrow { padding-left: 14px; }
  .hiw-flowline__arrow svg { transform: rotate(90deg); width: 22px; }
  .hiw-hero__ctas { flex-direction: column; align-items: stretch; margin-top: 4px; }
  .hiw-hero__book { width: 100%; }
  .hiw-stats { grid-template-columns: minmax(0, 1fr); margin-top: 44px; }
  .hiw-stats__item, .hiw-stats__item:first-child, .hiw-stats__item:last-child { flex-direction: row; align-items: center; gap: 16px; padding: 18px 0; }
  .hiw-stats__item + .hiw-stats__item { border-left: 0; border-top: 1px solid rgba(149,173,197,0.14); }
  .hiw-stats__n { flex: none; width: 116px; font-size: 52px; line-height: .9; }
  .hiw-stats__text { gap: 4px; }
  .hiw-stats__label { font-size: 15px; }
}

/* ── 2. Core idea pillars ── */
.hiw-pillar { padding: 34px 32px 36px; }
.hiw-pillar__id { display: flex; align-items: center; gap: 14px; }
.hiw-pillar__no { font: 700 14px/1 var(--font-display); letter-spacing: .5px; color: var(--meta); }
.hiw-pillar__stat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(149,173,197,0.1); }
.hiw-pillar__n { font: 700 44px/1 var(--font-display); letter-spacing: 0; color: var(--coral); }
@media (max-width: 620px) {
  .hiw-pillar { padding: 22px 20px 24px; }
  .hiw-pillar__stat { margin-top: 6px; }
  .hiw-pillar__n { font-size: 38px; }
}

/* ── 3. Phase 1: model visual ── */
.hiw-model { display: grid; grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1fr) 80px minmax(0, 1.2fr); align-items: center; margin-bottom: 24px; padding: 56px 56px 52px; background: var(--ground); border: 1px solid rgba(149,173,197,0.1); border-radius: 20px; }
.hiw-model__item { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; text-align: center; }
.hiw-model__n { font: 700 clamp(120px, 12.8vw, 184px)/.82 var(--font-display); color: var(--white); }
.hiw-model__text { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 10px; }
.hiw-model__label { font: 700 13px/1.2 var(--font-body); letter-spacing: 3px; text-transform: uppercase; color: var(--coral); }
.hiw-model__desc { font-size: 16px; line-height: 1.5; color: var(--slate); }
.hiw-model__item--total { margin: -34px 0 -32px; padding: 34px 16px 32px; border-radius: 16px; background: rgba(234,165,114,0.07); border: 1px solid rgba(234,165,114,0.28); }
.hiw-model__item--total .hiw-model__n { color: var(--coral); }
.hiw-model__formats { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 4px 10px; font-size: 16px; line-height: 1.5; color: var(--soft); }
.hiw-model__formats span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.hiw-model__formats i { font-style: normal; color: var(--meta); }
.hiw-model__formats svg { width: 15px; height: 15px; fill: none; stroke: var(--coral); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.hiw-model__times { display: flex; justify-content: center; padding-bottom: 76px; }
.hiw-model__times span { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid rgba(234,165,114,0.5); font: 600 24px/1 var(--font-display); color: var(--coral); white-space: nowrap; }

/* layers */
.hiw-layer { --c-card: var(--placeholder); padding: 32px 30px 34px; }
.hiw-layer__no { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--coral); color: var(--ink); font: 700 18px/1 var(--font-display); }
.hiw-layer__bars { display: flex; gap: 4px; }
.hiw-layer__bars i { width: 18px; height: 6px; border-radius: 3px; background: rgba(149,173,197,0.2); }
.hiw-layer__bars i.is-on { background: var(--coral); }
.hiw-layer h3 { margin-top: 8px; font-size: 22px; }

/* Caption under the ladder. The section now defines offer, angle and format
   first and lets 3 x 9 x 27 land as the payoff, so the quarterly cadence that
   used to open the section sits here instead, after the maths means something. */
.hiw-model__note { margin-top: 22px; text-align: center; font-size: 15px; line-height: 1.6; color: var(--meta); }
.hiw-rule { display: flex; align-items: center; gap: 28px; margin-top: 48px; }
.hiw-rule::before, .hiw-rule::after { content: ''; flex: 1; min-width: 32px; height: 1px; background: rgba(149,173,197,0.14); }
.hiw-rule span { flex: 0 1 auto; max-width: none; white-space: nowrap; text-align: center; font-size: 18px; line-height: 1.6; font-weight: 500; color: var(--cream); }

@media (max-width: 1100px) {
  .hiw-model { padding: 48px 36px 44px; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr) 64px minmax(0, 1.2fr); }
  .hiw-model__times span { width: 52px; height: 52px; font-size: 20px; }
  .hiw-model__formats { flex-wrap: wrap; }
  .hiw-rule span { max-width: 640px; white-space: normal; }
}
@media (max-width: 900px) {
  .hiw-model { grid-template-columns: minmax(0, 1fr); padding: 32px; gap: 12px; }
  .hiw-model__item { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center; gap: 24px; text-align: left; }
  .hiw-model__n { font-size: 104px; line-height: .85; text-align: center; }
  .hiw-model__text { align-items: flex-start; gap: 6px; margin-top: 0; }
  .hiw-model__times { justify-content: flex-start; padding: 0 0 0 40px; }
  .hiw-model__item--total { margin: 8px -12px -12px; padding: 20px 12px; }
  .hiw-model__formats { justify-content: flex-start; }
  .hiw-layers.grid--3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .hiw-ghost { right: 12px; top: 16px; font-size: 150px; }
  .hiw-model { padding: 22px 18px; border-radius: 16px; gap: 8px; }
  .hiw-model__item { grid-template-columns: 76px minmax(0, 1fr); gap: 16px; }
  .hiw-model__n { font-size: 68px; }
  .hiw-model__label { font-size: 12px; letter-spacing: 2.5px; }
  .hiw-model__desc, .hiw-model__formats { font-size: 14px; }
  .hiw-model__times { padding-left: 16px; }
  .hiw-model__times span { width: 44px; height: 44px; font-size: 17px; }
  .hiw-model__item--total { margin: 6px -8px -8px; padding: 16px 8px; }
  .hiw-layer { padding: 22px 20px 24px; }
  .hiw-layer h3 { font-size: 20px; margin-top: 4px; }
  .hiw-rule { margin-top: 32px; }
  .hiw-rule::before, .hiw-rule::after { display: none; }
  .hiw-rule span { text-align: left; font-size: 16px; padding-left: 14px; border-left: 2px solid var(--coral); }
}

/* ── 4. Example (cream) ── */
.hiw-note { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px; border: 1px dashed rgba(169,87,31,0.45); border-radius: 12px; background: rgba(234,165,114,0.08); }
.hiw-note svg { flex: none; width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--coral-ink); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.hiw-note p { font-size: 14px; line-height: 1.55; color: var(--ink-body); }
.hiw-note strong { color: var(--ink); font-weight: 700; }

.hiw-offers { --grid-gap: 20px; }
.hiw-offer { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--white); border: 1px solid rgba(26,26,26,0.08); border-radius: var(--radius-card); }
.hiw-offer__head { display: flex; flex-direction: column; gap: 12px; padding: 26px 28px 24px; border-bottom: 1px solid rgba(26,26,26,0.08); }
.hiw-offer__tags { display: flex; align-items: center; gap: 10px; }
.hiw-offer__pill { padding: 4px 11px; border-radius: 999px; background: var(--ink); color: var(--cream); font: 700 11px/1.3 var(--font-body); letter-spacing: 1.5px; text-transform: uppercase; }
.hiw-offer__type { font: 600 12px/1.3 var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--coral-ink); }
.hiw-offer__title { font-size: 24px; line-height: 1.15; }
.hiw-angles { list-style: none; margin: 0; padding: 0; }
.hiw-angle { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; padding: 20px 28px; }
.hiw-angle + .hiw-angle { border-top: 1px solid rgba(26,26,26,0.06); }
.hiw-angle:last-child { padding-bottom: 24px; }
.hiw-angle__key { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: rgba(234,165,114,0.2); font: 700 16px/1 var(--font-display); color: var(--coral-ink); }
.hiw-angle p { font-size: 14px; line-height: 1.5; color: var(--ink-body); }
.hiw-angle b { display: block; margin-bottom: 3px; font-weight: 700; color: var(--ink); }
.hiw-angle.is-active { padding-left: 25px; background: rgba(234,165,114,0.12); border-left: 3px solid var(--coral); }
.hiw-angle.is-active .hiw-angle__key { background: var(--coral); color: var(--ink); }

.hiw-formats { margin-top: 64px; padding-top: 56px; border-top: 1px solid rgba(26,26,26,0.1); }
.hiw-formats__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-bottom: 32px; }
.hiw-formats__title { font-size: 32px; line-height: 1.1; letter-spacing: 0; }
.hiw-formats__chip { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; background: var(--white); border: 1px solid rgba(26,26,26,0.1); border-radius: 999px; font: 600 13px/1.2 var(--font-body); color: var(--ink); }
.hiw-formats__chip span { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--coral); font: 700 13px/1 var(--font-display); color: var(--ink); }
.hiw-formats__grid { --grid-gap: 20px; }
.hiw-format { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 14px 14px 26px; background: var(--white); border: 1px solid rgba(26,26,26,0.08); border-radius: var(--radius-card); }
.hiw-format__media { position: relative; aspect-ratio: 4 / 3.4; border-radius: 10px; overflow: hidden; background: var(--charcoal); }
.hiw-format__media img { width: 100%; height: 100%; object-fit: cover; }
.hiw-format__play { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(17,17,17,0.7); }
.hiw-format__play svg { width: 14px; height: 14px; fill: var(--coral); }
.hiw-format__body { display: flex; flex-direction: column; gap: 8px; padding: 0 12px; }
.hiw-format__title { display: flex; align-items: center; gap: 10px; font-size: 20px; line-height: 1.15; }
.hiw-format__title svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--coral-ink); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.hiw-format__body p { font-size: 15px; line-height: 1.6; color: var(--ink-body); }
/* static ad mock (sizes track the card width) */
.hiw-format__media--static {
  container-type: inline-size;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(18px, 7.6cqw, 26px);
  background-color: var(--placeholder);
  background-image: radial-gradient(rgba(242,241,237,0.10) 1px, transparent 1.6px), radial-gradient(rgba(234,165,114,0.16) 1px, transparent 1.6px), linear-gradient(160deg, #2d2d2d 0%, #1a1a1a 100%);
  background-size: 13px 13px, 21px 21px, 100% 100%;
  background-position: 0 0, 6px 10px, 0 0;
}
.hiw-static__co { align-self: flex-start; padding: 3px 9px; border: 1px solid rgba(149,173,197,0.3); border-radius: 999px; font: 700 10px/1.3 var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--slate); }
.hiw-static__copy { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; }
.hiw-static__l1 { font-size: clamp(18px, 8.7cqw, 30px); line-height: 1.02; color: var(--white); }
.hiw-static__l2 { font-size: clamp(28px, 12.8cqw, 44px); line-height: 1; color: var(--coral); }
.hiw-static__l3 { font-size: clamp(14px, 5.8cqw, 20px); font-weight: 600; line-height: 1.1; letter-spacing: .5px; color: var(--cream); }
.hiw-static__cta { align-self: flex-start; padding: 9px 16px; border-radius: 4px; background: var(--coral); font: 700 12px/1.1 var(--font-body); letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink); }

@media (max-width: 1024px) {
  .hiw-offer__head { padding: 22px 22px 20px; }
  .hiw-angle { padding: 16px 22px; }
  .hiw-angle.is-active { padding-left: 19px; }
  .hiw-offer__title { font-size: 21px; }
  .hiw-format__title { font-size: 18px; }
}
@media (max-width: 900px) {
  .hiw-formats__grid.grid--3 { --grid-gap: 14px; }
  .hiw-format { padding: 10px 10px 20px; gap: 14px; }
  .hiw-format__body { padding: 0 6px; }
  .hiw-format__title { font-size: 16px; gap: 8px; }
  .hiw-format__title svg { width: 16px; height: 16px; }
  .hiw-format__body p { font-size: 14px; }
}
@media (max-width: 620px) {
  .hiw-note { padding: 14px 16px; }
  .hiw-offer__head { padding: 20px 20px 18px; }
  .hiw-offer__title { font-size: 20px; }
  .hiw-angle { padding: 14px 20px; gap: 12px; grid-template-columns: 28px minmax(0, 1fr); }
  .hiw-angle.is-active { padding-left: 17px; }
  .hiw-angle__key { width: 28px; height: 28px; font-size: 14px; }
  .hiw-formats { margin-top: 44px; padding-top: 36px; }
  .hiw-formats__head { margin-bottom: 20px; }
  .hiw-formats__title { font-size: 26px; }
  .hiw-format { padding: 12px 12px 22px; gap: 16px; }
  .hiw-format__media { aspect-ratio: 4 / 3; }
  .hiw-format__title { font-size: 19px; }
  .hiw-format__body { padding: 0 8px; }
}

/* ── 5. Production cadence ── */

@media (max-width: 620px) {
  .hiw-head-left { margin-bottom: 28px; }
}

/* ── 6. Phase 2: deployment ── */
.hiw-deploy { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 64px; align-items: center; margin-bottom: 72px; }
.hiw-deploy__copy { --flow-gap: 22px; }
.hiw-deploy__copy .lead { max-width: 560px; }
.hiw-library { margin: 0; padding: 28px 28px 24px; background: var(--ground); border: 1px solid rgba(149,173,197,0.1); border-radius: 18px; }
.hiw-library__grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; }
.hiw-library__grid i { aspect-ratio: 9 / 14; border-radius: 6px; background: rgba(149,173,197,0.1); border: 1px solid rgba(149,173,197,0.12); }
.hiw-library__grid i.is-live { background: var(--coral); border-color: var(--coral); box-shadow: 0 0 18px rgba(234,165,114,0.45); }
.hiw-library__legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(149,173,197,0.1); font: 600 12px/1.3 var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--slate); }
.hiw-library__legend span { display: inline-flex; align-items: center; gap: 10px; }
.hiw-library__legend i { width: 12px; height: 16px; border-radius: 3px; background: rgba(149,173,197,0.16); border: 1px solid rgba(149,173,197,0.2); }
.hiw-library__legend .is-live { color: var(--coral); }
.hiw-library__legend .is-live i { background: var(--coral); border-color: var(--coral); }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .hiw-library.is-visible .hiw-library__grid i.is-live { animation: hiw-live 3.2s var(--ease-std) infinite; }
  .hiw-library.is-visible .hiw-library__grid i.is-live:nth-child(14) { animation-delay: .8s; }
  .hiw-library.is-visible .hiw-library__grid i.is-live:nth-child(17) { animation-delay: 1.6s; }
  .hiw-library.is-visible .hiw-library__grid i.is-live:nth-child(20) { animation-delay: 2.4s; }
}
@keyframes hiw-live { 0%, 100% { box-shadow: 0 0 18px rgba(234,165,114,0.45); } 50% { box-shadow: 0 0 26px rgba(234,165,114,0.75); } }

.hiw-flow-eyebrow { display: flex; margin-bottom: 20px; }
.hiw-setup { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; margin: 0 0 64px; padding: 0; list-style: none; }
.hiw-setup__step { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 24px 22px 26px; background: var(--placeholder); border: 1px solid var(--hair); border-radius: 14px; }
.hiw-setup__step > div { display: flex; flex-direction: column; gap: 12px; }
.hiw-setup__step .hiw-circle { width: 36px; height: 36px; font-size: 16px; }
.hiw-setup__title { font-size: 19px; line-height: 1.15; }
.hiw-setup__step p { font-size: 14px; line-height: 1.55; color: var(--slate); }
.hiw-setup__step:not(:last-child)::after {
  content: ''; position: absolute; right: -24px; top: 32px; width: 20px; height: 20px; background: var(--coral);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hiw-setup__step.is-final { background: rgba(234,165,114,0.08); border-color: rgba(234,165,114,0.4); }
.hiw-setup__step.is-final .hiw-circle { background: var(--coral); color: var(--ink); }
.hiw-setup__step.is-final p { color: var(--soft); }

.hiw-run { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: stretch; }
.hiw-budget { display: flex; flex-direction: column; overflow: hidden; background: var(--charcoal); border: 1px solid rgba(149,173,197,0.12); border-radius: var(--radius-card); }
.hiw-budget__table { flex: 1; width: 100%; height: 100%; table-layout: fixed; }
.hiw-budget__c1 { width: 33.3%; } .hiw-budget__c2 { width: 40%; } .hiw-budget__c3 { width: 26.7%; }
.hiw-budget__table thead tr { background: var(--charcoal-mid); border-bottom: 1px solid rgba(149,173,197,0.1); }
.hiw-budget__table thead th { padding: 20px 22px; text-align: left; font: 600 12px/1.3 var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--slate); }
.hiw-budget__table thead th:first-child { padding-left: 26px; }
.hiw-budget__table thead th.is-active { color: var(--coral); background: rgba(234,165,114,0.08); }
.hiw-budget__table tbody tr + tr { border-top: 1px solid rgba(149,173,197,0.08); }
.hiw-budget__table tbody th { padding: 24px 12px 24px 26px; text-align: left; vertical-align: middle; font: 700 21px/1.15 var(--font-display); letter-spacing: .5px; text-transform: uppercase; color: var(--cream); white-space: nowrap; }
.hiw-budget__table td { padding: 24px 22px; vertical-align: middle; font-size: 15px; line-height: 1.45; color: var(--soft); }
.hiw-budget__table td.is-active { background: rgba(234,165,114,0.05); white-space: nowrap; }
.hiw-budget__table td b { font: 700 26px/1 var(--font-display); color: var(--coral); }
.hiw-budget__table td span { margin-left: 4px; font-size: 13px; color: var(--slate); }
.hiw-budget__cell { display: flex; align-items: center; gap: 12px; }
.hiw-bars { display: flex; flex: none; gap: 3px; }
.hiw-bars i { width: 10px; height: 18px; border-radius: 3px; background: var(--coral); }
.hiw-bars i.is-dim { background: rgba(234,165,114,0.4); }
.hiw-bars i.is-dash { background: transparent; border: 1px dashed rgba(234,165,114,0.6); }
.hiw-budget__rule { display: flex; align-items: center; gap: 14px; padding: 22px 26px; background: rgba(234,165,114,0.1); border-top: 1px solid rgba(234,165,114,0.3); font-size: 16px; line-height: 1.5; color: var(--soft); }
.hiw-budget__rule strong { font-weight: 700; color: var(--white); }
.hiw-budget__rule svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--coral); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.hiw-loop { display: flex; flex-direction: column; padding: 28px 28px 30px; background: var(--placeholder); border: 1px solid var(--hair); border-radius: var(--radius-card); }
.hiw-loop__eyebrow { display: flex; margin-bottom: 20px; }
.hiw-loop__grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); grid-template-rows: 1fr 30px 1fr; margin: 0; padding: 0; list-style: none; }
.hiw-loop__step { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px 16px 18px; background: var(--charcoal); border: 1px solid rgba(149,173,197,0.1); border-radius: 12px; }
.hiw-loop__step b { font: 700 13px/1 var(--font-display); color: var(--coral); }
.hiw-loop__step h3 { font-size: 18px; line-height: 1.1; }
.hiw-loop__step p { font-size: 13px; line-height: 1.5; color: var(--slate); }
.hiw-loop__step.is-win { background: rgba(88,180,110,0.08); border-color: rgba(88,180,110,0.35); }
.hiw-loop__step.is-win b { color: var(--green); }
.hiw-loop__step.is-win p { color: var(--soft); }
.hiw-loop__step--1 { grid-area: 1 / 1; } .hiw-loop__step--2 { grid-area: 1 / 3; } .hiw-loop__step--3 { grid-area: 3 / 3; } .hiw-loop__step--4 { grid-area: 3 / 1; }
.hiw-loop__a { display: flex; align-items: center; justify-content: center; }
.hiw-loop__a svg { width: 18px; height: 18px; fill: none; stroke: var(--coral); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.hiw-loop__a--r { grid-area: 1 / 2; } .hiw-loop__a--d { grid-area: 2 / 3; } .hiw-loop__a--l { grid-area: 3 / 2; } .hiw-loop__a--u { grid-area: 2 / 1; }
.hiw-loop__c { grid-area: 2 / 2; }
.hiw-loop__c svg { width: 22px; height: 22px; stroke: var(--meta); stroke-width: 1.75; }

.hiw-live { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 48px; align-items: center; margin-top: 24px; padding: 36px 44px; border-radius: var(--radius-card); background: linear-gradient(90deg, rgba(234,165,114,0.14) 0%, rgba(234,165,114,0.04) 100%); border: 1px solid rgba(234,165,114,0.4); }
.hiw-live__nums { display: flex; flex-direction: column; gap: 10px; padding-right: 40px; border-right: 1px solid rgba(234,165,114,0.25); }
.hiw-live__row { display: flex; align-items: center; gap: 16px; }
.hiw-live__a, .hiw-live__b { font: 700 60px/1 var(--font-display); color: var(--slate); }
.hiw-live__b { color: var(--coral); }
.hiw-live__row svg { width: 40px; height: 24px; fill: none; stroke: var(--coral); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hiw-live__text { font-size: 18px; line-height: 1.7; color: var(--soft); }
.hiw-live__text strong { font-weight: 700; color: var(--coral); }

@media (max-width: 1100px) {
  .hiw-setup { gap: 22px; }
  .hiw-setup__step { padding: 20px 16px 22px; }
  .hiw-setup__step:not(:last-child)::after { right: -20px; width: 18px; height: 18px; }
  .hiw-setup__title { font-size: 17px; }
  .hiw-budget__table tbody th { font-size: 18px; padding-left: 20px; }
  .hiw-budget__table thead th:first-child { padding-left: 20px; }
  .hiw-budget__table td, .hiw-budget__table thead th { padding-inline: 16px; }
}
@media (max-width: 1024px) {
  .hiw-deploy { grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; }
  .hiw-run { grid-template-columns: minmax(0, 1fr); }
  .hiw-loop__grid { grid-template-rows: auto 30px auto; }
  .hiw-live { grid-template-columns: 280px minmax(0, 1fr); gap: 36px; padding: 32px 36px; }
  .hiw-live__nums { padding-right: 32px; }
}
@media (max-width: 900px) {
  .hiw-deploy { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-bottom: 56px; }
  .hiw-library { max-width: 520px; }
  .hiw-setup { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-bottom: 48px; }
  .hiw-setup__step { flex-direction: row; align-items: flex-start; gap: 16px; padding: 18px 20px; }
  .hiw-setup__step > div { gap: 4px; padding-top: 6px; }
  .hiw-setup__step:not(:last-child)::after { right: auto; left: 30px; top: auto; bottom: -20px; transform: rotate(90deg); }
  .hiw-live { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .hiw-live__nums { padding: 0 0 20px; border-right: 0; border-bottom: 1px solid rgba(234,165,114,0.25); }
}
@media (max-width: 620px) {
  .hiw-deploy__copy { --flow-gap: 16px; }
  .hiw-library { padding: 18px 16px 16px; border-radius: 14px; }
  .hiw-library__grid { gap: 5px; }
  .hiw-library__grid i { border-radius: 4px; }
  .hiw-library__legend { font-size: 11px; letter-spacing: 1.5px; margin-top: 16px; padding-top: 14px; }
  .hiw-setup__title { font-size: 18px; }
  /* budget table → stacked rows */
  .hiw-budget__table, .hiw-budget__table tbody, .hiw-budget__table tr, .hiw-budget__table th, .hiw-budget__table td { display: block; }
  .hiw-budget__table colgroup { display: none; }
  .hiw-budget__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hiw-budget__table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 16px; padding: 18px 18px; }
  .hiw-budget__table tbody th { grid-column: 1 / -1; padding: 0; font-size: 19px; white-space: normal; }
  .hiw-budget__table td { padding: 0; font-size: 14px; }
  .hiw-budget__table td.is-active { background: none; text-align: right; }
  .hiw-budget__table td b { font-size: 24px; }
  .hiw-budget__rule { padding: 18px; font-size: 15px; align-items: flex-start; }
  .hiw-loop { padding: 20px 14px 18px; }
  .hiw-loop__grid { grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); grid-template-rows: auto 26px auto; }
  .hiw-loop__step { padding: 12px 12px 14px; gap: 4px; }
  .hiw-loop__step h3 { font-size: 16px; }
  .hiw-loop__step p { font-size: 12.5px; line-height: 1.45; }
  .hiw-loop__a svg { width: 15px; height: 15px; }
  .hiw-loop__c svg { width: 18px; height: 18px; }
  .hiw-live { padding: 24px 20px; }
  .hiw-live__a, .hiw-live__b { font-size: 48px; }
  .hiw-live__text { font-size: 16px; line-height: 1.65; }
}

/* ── 7. Reading the numbers ── */
.hiw-read-head { margin-bottom: 40px; }
.hiw-ladder { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin: 0 0 48px; padding: 0; list-style: none; font: 700 13px/1 var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--ink); }
.hiw-ladder li:not(.hiw-ladder__arrow) { display: inline-flex; align-items: center; gap: 10px; padding: 7px 18px 7px 7px; background: var(--white); border: 1px solid rgba(26,26,26,0.1); border-radius: 999px; }
.hiw-ladder li > span { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--coral); font: 700 13px/1 var(--font-display); letter-spacing: 0; }
.hiw-ladder__arrow { display: flex; }
.hiw-ladder__arrow svg { width: 34px; height: 14px; fill: none; stroke: var(--coral-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.hiw-diag { --grid-gap: 20px; }
.hiw-case { gap: 16px; padding: 28px 24px 30px; border-top: 2px solid var(--coral); }
.hiw-case--win { border-top-color: #58B46E; }
.hiw-case__head { display: flex; align-items: flex-start; justify-content: space-between; }
.hiw-case__no { font: 700 40px/.9 var(--font-display); color: var(--coral-ink); }
.hiw-case--win .hiw-case__no { color: var(--green-ink); }
.hiw-cells { display: grid; grid-template-columns: repeat(3, 18px); gap: 5px; }
.hiw-cells i { width: 18px; height: 18px; border-radius: 4px; background: #E4E1D8; }
.hiw-cells i.is-hit { background: #C77A45; }
.hiw-cells i.is-win { background: #58B46E; }
.hiw-steps { display: flex; align-items: center; gap: 4px; font: 700 10px/1 var(--font-body); letter-spacing: 1.5px; text-transform: uppercase; }
.hiw-steps span { flex: 1; padding: 6px 0; text-align: center; border-radius: 6px; background: var(--cream); border: 1px solid transparent; color: #6b757e; }
.hiw-steps span.is-on { background: var(--coral); color: var(--ink); }
.hiw-steps span.is-win { background: rgba(88,180,110,0.18); border-color: rgba(88,180,110,0.45); color: var(--green-ink); }
.hiw-steps i { flex: none; width: 10px; height: 10px; background: #b5b0a4;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E") center / contain no-repeat; }
.hiw-case h3 { margin-top: 4px; }
.hiw-case > p:last-child { font-size: 15px; line-height: 1.6; }
@media (max-width: 620px) {
  .hiw-read-head { margin-bottom: 24px; }
  .hiw-ladder { justify-content: flex-start; flex-wrap: nowrap; gap: 4px; margin-bottom: 28px; font-size: 11px; letter-spacing: 1px; }
  .hiw-ladder li:not(.hiw-ladder__arrow) { gap: 7px; padding: 4px 10px 4px 4px; }
  .hiw-ladder li > span { width: 20px; height: 20px; font-size: 11px; }
  .hiw-ladder__arrow svg { width: 16px; }
  .hiw-case { padding: 20px 20px 22px; gap: 12px; }
  .hiw-case__no { font-size: 34px; }
}

/* ── 8. Phase 3: lead conversion ── */
.hiw-convert { display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 56px; align-items: start; }
ol.hiw-path { display: flex; flex-direction: column; margin: 0; padding: 36px 36px 36px 32px; list-style: none; background: var(--placeholder); border: 1px solid var(--hair); border-radius: 18px; }
.hiw-path__step { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) 24px; gap: 20px; align-items: start; padding-bottom: 30px; }
.hiw-path__step:last-child { padding-bottom: 0; }
.hiw-path__step:not(:last-child)::before { content: ''; position: absolute; left: 23px; top: 50px; bottom: -14px; width: 2px; background: linear-gradient(180deg, rgba(234,165,114,0.55), rgba(234,165,114,0.15)); }
.hiw-path__no { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--charcoal); border: 1.5px solid var(--coral); font: 700 19px/1 var(--font-display); color: var(--coral); }
.hiw-path__step > div { display: flex; flex-direction: column; gap: 4px; padding-top: 3px; }
.hiw-path__step h3 { font-size: 21px; }
.hiw-path__step p { font-size: 15px; line-height: 1.55; color: var(--slate); }
.hiw-path__icon { width: 22px; height: 22px; margin-top: 6px; fill: none; stroke: var(--meta); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.hiw-path__step.is-hot .hiw-path__no { background: var(--coral); color: var(--ink); }
.hiw-path__step.is-hot h3 { color: var(--coral); }

.hiw-convert__side { display: flex; flex-direction: column; gap: 20px; }
.hiw-lead { gap: 16px; padding: 22px; }
.hiw-lead__top { display: flex; align-items: center; justify-content: space-between; }
.hiw-lead__pill { padding: 4px 11px; border-radius: 999px; background: rgba(234,165,114,0.18); color: var(--coral-ink); font: 700 11px/1.3 var(--font-body); letter-spacing: 1.5px; text-transform: uppercase; }
.hiw-lead__text { font-size: 15px; line-height: 1.6; color: var(--ink-body); }
.hiw-thread { display: flex; flex-direction: column; gap: 14px; padding: 14px 16px 16px; background: #F6F6F4; border: 1px solid rgba(26,26,26,0.06); border-radius: 12px; }
.hiw-thread__head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid rgba(26,26,26,0.08); }
.hiw-thread__head .icon { width: 18px; height: 18px; color: #9aa4ad; }
.hiw-thread__avatar { display: flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); font: 700 15px/1 var(--font-display); color: var(--coral); }
.hiw-thread__who { display: flex; flex: 1; flex-direction: column; gap: 5px; }
.hiw-thread__who b { font-size: 14px; font-weight: 600; line-height: 1.1; color: var(--ink); }
.hiw-thread__who i { display: block; width: 34%; height: 6px; border-radius: 3px; background: #E3E6E9; }
.hiw-thread__form { display: flex; align-self: flex-start; align-items: center; gap: 6px; padding: 9px 12px; border-radius: 14px 14px 14px 4px; background: #EAEDEF; font: 600 11px/1.2 var(--font-body); letter-spacing: 1px; text-transform: uppercase; color: var(--ink-muted); }
.hiw-thread__form svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hiw-thread .ui-bubble--out { max-width: 88%; font-size: 14px; line-height: 1.5; }
.hiw-thread .ui-typing { background: #EAEDEF; }
.hiw-pause { display: flex; align-items: flex-start; gap: 16px; padding: 22px 24px; border-radius: 14px; background: rgba(234,165,114,0.1); border: 1px solid rgba(234,165,114,0.4); font-size: 16px; line-height: 1.6; color: var(--cream); }
.hiw-pause strong { font-weight: 700; color: var(--white); }
.hiw-pause__icon { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--coral); }
.hiw-pause__icon svg { width: 18px; height: 18px; fill: var(--ink); }

/* three steps, three columns. There were four column tracks against three items,
   so a 2.4fr track sat empty on the right and squashed the row into the left. */
ol.hiw-timeline { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 2.6fr); gap: 6px; margin: 24px 0 0; padding: 34px 40px 36px; list-style: none; background: var(--ground); border: 1px solid rgba(149,173,197,0.1); border-radius: 18px; }
.hiw-timeline li { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hiw-timeline__when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 13px; font-weight: 600; color: var(--cream); white-space: nowrap; }
.hiw-timeline__when b { font: 700 22px/1 var(--font-display); text-transform: uppercase; color: var(--coral); }
.hiw-timeline__bar { position: relative; display: block; height: 10px; border-radius: 5px; background: var(--coral); }
.hiw-timeline__bar::before { content: ''; position: absolute; left: -1px; top: -5px; width: 3px; height: 20px; border-radius: 2px; background: var(--cream); }
.hiw-timeline__bar--grad { background: linear-gradient(90deg, #EAA572, #d99461); }
.hiw-timeline__bar--dash { background: repeating-linear-gradient(90deg, rgba(234,165,114,0.75) 0 26px, rgba(234,165,114,0.18) 26px 52px); }
.hiw-timeline__what { font-size: 14px; line-height: 1.5; color: var(--slate); }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .hiw-timeline__bar { transform-origin: left center; transition: transform .9s var(--ease-out) .2s; }
  .hiw-timeline:not(.is-visible) .hiw-timeline__bar { transform: scaleX(0); }
}

.hiw-tie { display: grid; grid-template-columns: minmax(0, 1fr) 600px; gap: 56px; align-items: center; margin-top: 72px; }
.hiw-tie__line { font-size: 40px; line-height: 1.1; color: var(--white); }
.hiw-tie__line em { font-style: normal; color: var(--coral); }
.hiw-tie__card { position: relative; display: grid; grid-template-columns: 220px minmax(0, 1fr); overflow: hidden; background: var(--charcoal-mid); border: 1px solid rgba(149,173,197,0.1); border-radius: var(--radius-card); transition: border-color .25s ease, transform .25s var(--ease-out); }
.hiw-tie__card:hover { border-color: rgba(234,165,114,0.35); transform: translateY(-3px); }
.hiw-tie__media { position: relative; min-height: 230px; }
.hiw-tie__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hiw-tie__body { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 30px; }
.hiw-tie__title { font-size: 24px; line-height: 1.12; }
.hiw-tie__body p { font-size: 15px; line-height: 1.6; color: var(--slate); }
.hiw-tie__body .link-card { align-self: flex-start; margin-top: 4px; }

@media (max-width: 1100px) {
  .hiw-convert { grid-template-columns: minmax(0, 1fr) 420px; gap: 36px; }
  ol.hiw-timeline { padding: 28px; gap: 12px; }
  .hiw-timeline__when { white-space: normal; }
  .hiw-timeline__when b { font-size: 19px; }
  .hiw-tie { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hiw-tie__line { max-width: 820px; font-size: 36px; }
}
@media (max-width: 900px) {
  .hiw-convert { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .hiw-convert__side { max-width: 560px; }
  ol.hiw-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
}
@media (max-width: 620px) {
  ol.hiw-path { padding: 24px 18px; border-radius: 16px; }
  .hiw-path__step { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding-bottom: 22px; }
  .hiw-path__step:not(:last-child)::before { left: 19px; top: 42px; bottom: -6px; }
  .hiw-path__no { width: 40px; height: 40px; font-size: 17px; }
  .hiw-path__icon { display: none; }
  .hiw-path__step > div { padding-top: 2px; }
  .hiw-path__step h3 { font-size: 19px; }
  .hiw-path__step p { font-size: 14px; }
  .hiw-lead { padding: 18px; }
  .hiw-thread { padding: 12px; }
  .hiw-pause { padding: 18px; font-size: 15px; gap: 14px; }
  ol.hiw-timeline { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 24px 20px; border-radius: 16px; }
  .hiw-tie { margin-top: 48px; gap: 24px; }
  .hiw-tie__line { font-size: clamp(26px, 7.7vw, 30px); line-height: 1.05; }
  .hiw-tie__card { grid-template-columns: minmax(0, 1fr); }
  .hiw-tie__media { min-height: 180px; }
  .hiw-tie__body { padding: 22px 20px 24px; gap: 10px; }
  .hiw-tie__title { font-size: 21px; }
}

/* ── 9. At a glance (container yard) ── */
.hiw-glance__head { --flow-gap: 18px; }
.hiw-glance__list { margin: 36px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(26,26,26,0.12); }
.hiw-glance__list li { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: baseline; padding: 20px 0; border-bottom: 1px solid rgba(26,26,26,0.12); }
.hiw-glance__n { font: 700 36px/1 var(--font-display); color: var(--coral-ink); }
.hiw-glance__list li > div { display: flex; flex-direction: column; gap: 6px; }
.hiw-glance__t { font: 600 18px/1.3 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--ink); }
.hiw-glance__list p { font-size: 15px; line-height: 1.55; color: var(--ink-body); }
.hiw-glance__sum { margin-top: 32px; font-size: 17px; line-height: 1.65; color: var(--ink-body); }
@media (max-width: 1024px) {
  .hiw-glance .yard__content { max-width: calc(720px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
  .hiw-glance .yard__band { margin-top: 40px; margin-bottom: calc(-1 * var(--pad-y)); }
}
@media (max-width: 620px) {
  .hiw-glance__list { margin-top: 24px; }
  .hiw-glance__list li { grid-template-columns: 48px minmax(0, 1fr); padding: 16px 0; }
  .hiw-glance__n { font-size: 28px; }
  .hiw-glance__t { font-size: 16px; }
  .hiw-glance__list p { font-size: 14px; }
  .hiw-glance__list .nowrap { white-space: normal; }
  .hiw-glance__sum { margin-top: 22px; font-size: 15px; }
  .hiw-glance .yard__band { margin-top: 24px; }
}

/* ── 11. Final CTA ── */
.hiw-cta__copy { --flow-gap: 26px; }
.hiw-cta__lead { max-width: 560px; color: var(--light-blue); }
.hiw-cta__copy .btn { margin-top: 4px; }
@media (min-width: 901px) {
  .hiw-cta__copy { position: sticky; top: calc(var(--navh) + 48px); padding-top: 32px; }
}
@media (max-width: 620px) {
  .hiw-cta__copy { --flow-gap: 18px; }
  .hiw-cta__lead { color: var(--slate); }
}

/* mobile header spacing (page headers set desktop margins above) */
@media (max-width: 620px) {
  .hiw-head, .hiw-head--phase { margin-bottom: 28px; gap: 16px; }
  .hiw-head--phase .section-head__main { gap: 16px; }
  .hiw-head-left { margin-bottom: 28px; gap: 12px; }
}