/* Overview: pitch-led, restrained, and aligned to the DevCaleo system. */
:root {
  --overview-canvas: #f3f6f8;
  --overview-paper: #fefefe;
  --overview-ink: #102a3d;
  --overview-muted: #395568;
  --overview-line: rgb(45 73 89 / 14%);
  --overview-blue: #e6f1f8;
  --overview-blue-soft: #eef5f9;
}

.overview-page {
  overflow: clip;
  background-color: var(--overview-canvas);
  background-image:
    linear-gradient(rgb(73 126 163 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(73 126 163 / 4%) 1px, transparent 1px);
  background-size: 52px 52px;
  color: var(--overview-ink);
}
.overview-container { width: min(calc(100% - 4rem), 84rem); margin-inline: auto; padding-block: clamp(4.5rem, 6.5vw, 7rem); }
.overview-page h1, .overview-page h2, .overview-page h3 { color: var(--overview-ink); font-family: "Aptos Display", "Aptos", "Segoe UI Variable Display", "Segoe UI", sans-serif; letter-spacing: -.045em; text-wrap: balance; }
.overview-page h1 { max-width: 13ch; margin: 0; font-size: clamp(3.25rem, 4.75vw, 5.25rem); line-height: .95; }
.overview-page h2 { max-width: 16ch; margin: 0; font-size: clamp(2.4rem, 4vw, 4.25rem); line-height: .98; }
.overview-page h3 { margin: 0; font-size: clamp(1.35rem, 2vw, 1.85rem); line-height: 1.05; }
.overview-kicker { margin: 0 0 1rem; color: var(--overview-muted); font-family: "Cascadia Mono", "SFMono-Regular", monospace; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.overview-lead, .overview-muted { max-width: 56ch; min-width: 0; margin: 1.5rem 0 0; color: var(--overview-muted); font-size: clamp(1rem, .35vw + .94rem, 1.12rem); line-height: 1.65; white-space: normal; overflow-wrap: anywhere; }

.overview-hero { border-bottom: 1px solid var(--overview-line); }
.overview-hero-grid { display: grid; grid-template-columns: minmax(29rem, .92fr) minmax(25rem, 1.08fr); align-items: center; gap: clamp(2.5rem, 4.5vw, 5rem); min-height: min(44rem, calc(100svh - 4.65rem)); padding-top: clamp(4.5rem, 7vw, 6.75rem); padding-bottom: clamp(5.25rem, 7.5vw, 7.75rem); }
.overview-hero-copy { min-width: 0; }
.overview-hero-copy .overview-lead { max-width: 35ch; }
.overview-actions { margin-top: 2rem; }
.overview-page .btn:not(.primary) { min-height: auto; padding: .65rem 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--overview-ink); text-decoration: underline; text-decoration-color: rgb(57 119 175 / 42%); text-underline-offset: .32rem; }
.overview-page .btn:not(.primary):hover, .overview-page .btn:not(.primary):focus-visible { transform: translateX(.18rem); border-color: transparent; background: transparent; box-shadow: none; color: var(--signal-deep); }
.overview-hero-visual { margin: 0; padding: .35rem; border: 1px solid rgb(28 69 97 / 10%); border-radius: 1rem; background: var(--overview-paper); box-shadow: 0 22px 52px rgb(35 91 128 / 13%); transition: transform .35s cubic-bezier(.16, 1, .3, 1), border-color .35s ease, box-shadow .35s ease; }
.overview-hero-visual:hover { transform: translateY(-4px); border-color: rgb(57 119 175 / 28%); box-shadow: 0 28px 60px rgb(35 91 128 / 18%); }
.overview-hero-visual img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: calc(1rem - .35rem); object-fit: cover; object-position: center; filter: saturate(.78) contrast(.97); }

.overview-problem-head { max-width: 52rem; }
.overview-problem-head .overview-muted { max-width: 60ch; }
.overview-problem-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.overview-problem-card { display: grid; align-content: start; gap: .5rem; min-width: 0; padding: 1.5rem 1.35rem 1.6rem; border: 1px solid var(--overview-line); border-radius: .9rem; background: var(--overview-paper); box-shadow: 0 10px 28px rgb(35 91 128 / 6%); transition: transform .28s cubic-bezier(.16, 1, .3, 1), box-shadow .28s ease; }
.overview-problem-card:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgb(35 91 128 / 12%); }
.overview-problem-card .pi { display: block; width: 4rem; height: 3rem; margin-bottom: .55rem; color: var(--overview-ink); overflow: visible; }
.overview-problem-card h3 { font-size: clamp(1.12rem, 1.45vw, 1.32rem); line-height: 1.15; }
.overview-problem-card p { margin: .35rem 0 0; color: var(--overview-muted); font-size: .93rem; line-height: 1.55; }

.overview-solution { position: relative; }
.overview-solution::before { content: ""; position: absolute; z-index: 0; top: 0; left: 50%; width: 100vw; border-top: 1px solid var(--overview-line); translate: -50% 0; }

.spine { max-width: 68rem; margin: clamp(2rem, 3.5vw, 2.8rem) auto 0; }

/* Six compact stations follow one continuous route from left to right and back. */
.spine-track { position: relative; display: grid; }
.spine-row { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 8rem; }
.spine-row:nth-child(odd) .spine-card { grid-column: 1; margin-right: clamp(2.5rem, 6vw, 5rem); }
.spine-row:nth-child(even) .spine-card { grid-column: 2; margin-left: clamp(2.5rem, 6vw, 5rem); }
.spine-row:not(:last-child)::after { content: ""; position: absolute; z-index: 0; top: 50%; left: 25%; width: 50%; height: 100%; border-top: 2px solid rgb(57 119 175 / 30%); pointer-events: none; }
.spine-row:nth-child(odd):not(:last-child)::after { border-right: 2px solid rgb(57 119 175 / 30%); border-radius: 0 2rem 0 0; }
.spine-row:nth-child(even):not(:last-child)::after { border-left: 2px solid rgb(57 119 175 / 30%); border-radius: 2rem 0 0; }

.spine-card { position: relative; z-index: 1; display: grid; grid-template-columns: 2.35rem minmax(0, 1fr); align-items: start; gap: 1rem; min-width: 0; align-self: center; padding: 1.05rem 1.15rem; border: 1px solid var(--overview-line); border-radius: 1rem; background: var(--overview-paper); box-shadow: 0 12px 28px rgb(35 91 128 / 8%); transition: transform .28s cubic-bezier(.16, 1, .3, 1), box-shadow .28s ease, border-color .28s ease; }
.spine-card h3 { margin: .05rem 0 .28rem; font-size: clamp(1.05rem, 1.3vw, 1.22rem); line-height: 1.15; }
.spine-card p { margin: 0; color: var(--overview-muted); font-size: clamp(.86rem, .2vw + .83rem, .93rem); line-height: 1.45; }
.spine-node { position: relative; z-index: 2; display: inline-flex; width: 2.35rem; height: 2.35rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--overview-ink); box-shadow: 0 6px 14px rgb(16 42 61 / 20%); color: #fff; font-family: "Cascadia Mono", "SFMono-Regular", monospace; font-size: .7rem; font-weight: 700; letter-spacing: .04em; transition: background .28s ease, scale .28s cubic-bezier(.16, 1, .3, 1); }
.spine-row:nth-child(3n + 2) .spine-card { background: var(--overview-blue-soft); }
.spine-row:nth-child(3n) .spine-card { background: var(--overview-blue); }
.spine-row:hover .spine-node { background: var(--signal); scale: 1.08; }
.spine-row:hover .spine-card { transform: translateY(-3px); border-color: rgb(57 119 175 / 28%); box-shadow: 0 18px 34px rgb(35 91 128 / 14%); }
.overview-who { border-block: 1px solid var(--overview-line); background: var(--overview-paper); }
.overview-who-head { max-width: 52rem; }
.overview-who-head .overview-muted { max-width: 60ch; }
.overview-who-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: clamp(2.75rem, 5vw, 4.5rem); }
.overview-who-card { display: grid; overflow: hidden; align-content: start; gap: .7rem; min-width: 0; padding: 0 0 2rem; border: 1px solid var(--overview-line); border-radius: .9rem; background: var(--overview-canvas); box-shadow: 0 14px 34px rgb(35 91 128 / 8%); }
.overview-who-photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; margin-bottom: 1.75rem; border-bottom: 1px solid var(--overview-line); object-fit: cover; object-position: center; filter: saturate(.8) contrast(.97); }
.overview-who-card > :not(.overview-who-photo) { margin-inline: 1.85rem; }
.overview-who-card:nth-child(2) { background: var(--overview-blue-soft); }
.overview-who-card:nth-child(3) { background: var(--overview-blue); }
.overview-who-tag { margin-block: 0 .5rem; color: var(--overview-muted); font-family: "Cascadia Mono", "SFMono-Regular", monospace; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.overview-who-card p:not(.overview-who-tag) { margin-block: .45rem 0; color: var(--overview-muted); font-size: .96rem; line-height: 1.68; }

/* impact charts */
.impact-chart { display: block; width: clamp(7.5rem, 9vw, 9rem); height: auto; margin-bottom: 1.15rem; overflow: visible; }
.impact-chart .dim { fill: rgb(255 255 255 / 20%); }
.impact-chart .on { fill: #5aa6e8; }
.impact-chart .arrow { fill: none; stroke: #5aa6e8; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

.overview-setup { position: relative; }
.overview-setup::after { content: ""; position: absolute; z-index: 0; bottom: 0; left: 50%; width: 100vw; border-bottom: 1px solid var(--overview-line); translate: -50% 0; }
.overview-setup-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: clamp(2.5rem, 5vw, 4.25rem) 0 0; padding: 0; list-style: none; }
.overview-setup-list li { position: relative; display: grid; align-content: start; gap: .5rem; min-height: 7rem; padding: 0 2rem 0 1.75rem; border-left: 1px solid var(--overview-line); }
.overview-setup-list li + li::before { content: ""; position: absolute; top: -.1rem; left: 0; width: 1.65rem; height: 1.65rem; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 5px var(--overview-canvas), 0 6px 14px rgb(15 98 254 / 28%); translate: -50% 0; }
.overview-setup-list li + li::after { content: ""; position: absolute; top: .725rem; left: 0; width: .36rem; height: .36rem; border-top: 2px solid #fff; border-right: 2px solid #fff; translate: calc(-50% - .1rem) -50%; rotate: 45deg; }
.overview-setup-list li:first-child { padding-left: 0; border-left: 0; }
.overview-setup-list li:last-child { padding-right: 0; }
.overview-setup-list .setup-num { color: var(--signal); font-family: "Cascadia Mono", "SFMono-Regular", monospace; font-size: .72rem; font-weight: 700; letter-spacing: .12em; }
.overview-setup-list strong { font-size: clamp(1.12rem, 1.4vw, 1.28rem); letter-spacing: -.022em; line-height: 1.2; }
.overview-setup-list li > span:not(.setup-num) { max-width: 34ch; color: var(--overview-muted); font-size: .95rem; line-height: 1.62; }

.overview-impact { background: var(--ink-900); color: #fff; }
.overview-impact .overview-kicker { color: #b6cede; }
.overview-impact h2 { color: #fff; }
.overview-impact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: clamp(2.6rem, 5vw, 4.5rem); border-block: 1px solid rgb(255 255 255 / 20%); }
.overview-impact-grid article { display: grid; gap: .6rem; min-height: 9rem; align-content: start; padding: 1.75rem 1.45rem 1.6rem; border-left: 1px solid rgb(255 255 255 / 20%); }
.overview-impact-grid article:first-child { padding-left: 0; border-left: 0; }
.overview-impact-grid article:last-child { padding-right: 0; }
.overview-impact-grid strong { font-family: "Aptos Display", "Aptos", "Segoe UI Variable Display", "Segoe UI", sans-serif; font-size: clamp(1.45rem, 1.9vw, 1.85rem); letter-spacing: -.03em; line-height: 1.1; text-wrap: balance; }
.overview-impact-grid span { max-width: 32ch; color: #b6cede; font-size: .95rem; line-height: 1.6; }
.overview-impact-note { max-width: 70ch; margin: 1.25rem 0 0; color: #b6cede; font-size: .78rem; line-height: 1.5; }

.overview-cta { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.overview-cta h2 { max-width: 15ch; }
.overview-cta-actions { flex: 0 0 auto; margin: 0; }

@media (max-width: 1400px) {
  .overview-hero-grid { grid-template-columns: 1fr; min-height: 0; gap: 2.75rem; padding-top: 4.5rem; }
}

@media (max-width: 800px) {
  .spine-track::before { content: ""; position: absolute; z-index: 0; top: 1.2rem; bottom: 1.2rem; left: 1.18rem; width: 2px; background: rgb(57 119 175 / 30%); }
  .spine-row { display: block; min-height: 0; padding-bottom: 1rem; }
  .spine-row:nth-child(odd) .spine-card, .spine-row:nth-child(even) .spine-card { margin: 0; }
  .spine-row:not(:last-child)::after { display: none; }
  .spine-card { grid-template-columns: 2.35rem minmax(0, 1fr); }
  .spine-row:hover .spine-card { transform: none; }
  .overview-container { width: min(calc(100% - 2rem), 42rem); padding-block: 4.5rem; }
  .overview-problem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-who-grid { grid-template-columns: 1fr; }
  .overview-cta { align-items: start; flex-direction: column; }
}

@media (max-width: 560px) {
  .overview-container { width: min(calc(100% - 1.5rem), 36rem); padding-block: 3.75rem; }
  .overview-page h1 { max-width: 13ch; font-size: clamp(2.2rem, 9.5vw, 3rem); }
  .overview-page h2 { font-size: clamp(2.2rem, 11vw, 3rem); }
  .overview-actions, .overview-cta-actions { width: 100%; }
  .overview-actions .btn, .overview-cta-actions .btn { flex: 1 1 100%; justify-content: center; }
  .overview-problem-grid, .overview-setup-list, .overview-impact-grid { grid-template-columns: 1fr; }
  .overview-setup-list { gap: 0; border-top: 1px solid var(--overview-line); }
  .overview-setup-list li, .overview-setup-list li:first-child, .overview-setup-list li:last-child { min-height: 0; padding: 1.25rem 0; border-left: 0; border-bottom: 1px solid var(--overview-line); }
  .overview-setup-list li + li, .overview-setup-list li + li:last-child { padding-top: 2.9rem; }
  .overview-setup-list li + li::before { top: .62rem; left: 0; translate: 0 0; }
  .overview-setup-list li + li::after { top: 1.445rem; left: .825rem; translate: -50% calc(-50% - .1rem); rotate: 135deg; }
  .overview-impact-grid article, .overview-impact-grid article:first-child, .overview-impact-grid article:last-child { min-height: 0; padding: 1.45rem 0; border-left: 0; border-bottom: 1px solid rgb(255 255 255 / 20%); }
  .overview-impact-grid article:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .overview-page .btn, .spine-node, .spine-card, .overview-problem-card { transition: none; }
  .overview-problem-card:hover { transform: none; }
  .spine-row:hover .spine-card { transform: none; }
  .spine-row:hover .spine-node { scale: 1; }
}