/* Copy column + validation plan. Gold is the name, the selected tab, Copy, the verified path and the seal. */
.pitch-home {
  background:
    radial-gradient(70% 60% at 88% 38%, rgba(122, 31, 92, .30), transparent 72%),
    var(--purple);
}
.pitch-home .home-main {
  flex: 1;
  width: min(1120px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  padding-block: clamp(28px, 6svh, 64px) clamp(40px, 8svh, 96px);
}
.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
  padding-top: clamp(8px, 4svh, 48px);
}
.home-art, .crew-art {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 14px;
  image-rendering: pixelated;
}
.home-art { box-shadow: 0 30px 80px -40px rgba(122, 31, 92, .7); }
.home-artwork, .crew-artwork { position: relative; min-width: 0; border-radius: 14px; overflow: hidden; }
.art-live { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 1px solid var(--line); border-radius: inherit; pointer-events: none; }
[data-enhanced="true"] > img { opacity: 0; }
.art-motion { position: absolute; right: 8px; bottom: 8px; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 100px; background: #21162b; color: var(--muted); cursor: pointer; }
.art-motion svg { display: block; margin: auto; }
.art-play-icon, [data-paused="true"] .art-pause-icon { display: none; }
[data-paused="true"] .art-play-icon { display: block; }
.art-motion:hover { color: var(--gold); background: #382442; }
.art-motion:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .art-live .scene-ship { animation: art-bob 4s ease-in-out infinite; }
  .art-live .scene-ship-1 { animation-duration: 4.64s; animation-delay: -1.44s; }
  .art-live .scene-ship-2 { animation-duration: 3.76s; animation-delay: -2.48s; }
  .art-live .scene-captain { transform-origin: 73px 158px; animation: art-sway 4.8s ease-in-out infinite; }
  .art-live .scene-clouds { animation: art-drift 14.4s ease-in-out infinite; }
  .art-live .scene-waves { animation: art-water 5.6s ease-in-out infinite; }
  .art-live .scene-reflection { animation: art-shimmer 4s ease-in-out infinite; }
  .art-live .scene-stars { animation: art-shimmer 7.2s ease-in-out infinite; }
  [data-artwork] .art-live > g { animation-play-state: paused; }
  [data-playing="true"] .art-live > g { animation-play-state: running; }
}
@keyframes art-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes art-sway { 0%, 100% { transform: rotate(-.6deg); } 50% { transform: rotate(.6deg); } }
@keyframes art-drift { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(4px); } }
@keyframes art-water { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(3px); } }
@keyframes art-shimmer { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
.home-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  margin-top: clamp(64px, 12svh, 128px);
  padding-top: clamp(48px, 8svh, 80px);
  border-top: 1px solid var(--line);
}
.home-crew { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); }
.home-band h2 { margin: 0; color: var(--text); font-size: clamp(28px, 3.2vw, 40px); font-weight: 600; line-height: 1.1; letter-spacing: -.025em; }
.band-copy p { margin: 12px 0 0; max-width: 34ch; color: var(--muted); font-size: 17px; line-height: 1.5; }
.band-link {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 16px;
  color: var(--gold); font-size: 15px; font-weight: 600;
  text-decoration: underline; text-decoration-color: rgba(230, 196, 128, .45); text-underline-offset: 5px;
}
.band-link:hover { color: var(--gold-high); text-decoration-color: var(--gold-high); }
.pitch-home h1 {
  max-width: 15ch;
  margin: 0;
  color: var(--text);
  font-size: clamp(34px, min(4.4vw, 8svh), 56px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.home-install { margin: clamp(24px, 4svh, 40px) 0 0; padding: 0; border: 0; min-width: 0; }
.os-tabs { display: inline-flex; gap: 2px; margin-bottom: 10px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; }
.os-tabs label {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px;
  border-radius: 999px; color: var(--muted); font-size: 14px; cursor: pointer;
}
.os-tabs label:hover { color: var(--text); }
#os-unix:checked ~ .os-tabs [for="os-unix"],
#os-windows:checked ~ .os-tabs [for="os-windows"],
#os-npm:checked ~ .os-tabs [for="os-npm"] { background: var(--surface); color: var(--gold-high); }
#os-unix:focus-visible ~ .os-tabs [for="os-unix"],
#os-windows:focus-visible ~ .os-tabs [for="os-windows"],
#os-npm:focus-visible ~ .os-tabs [for="os-npm"] { outline: 2px solid var(--gold); outline-offset: 2px; }
#os-unix:checked ~ .command:not([data-os="unix"]),
#os-windows:checked ~ .command:not([data-os="windows"]),
#os-npm:checked ~ .command:not([data-os="npm"]) { display: none; }
.pitch-home .command { max-width: 100%; gap: 12px; }
@media (max-width: 480px) {
  /* A URL wider than the box must still wrap (break after the domain via
     <wbr>, else anywhere) or it runs under Copy and widens the page. */
  .pitch-home .command code { overflow-wrap: anywhere; word-break: normal; }
  .os-tabs label { padding: 0 11px; font-size: 13px; }
}
.home-install p { margin: 12px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.home-install p code { color: var(--text); font: 13px/1 var(--mono); }
.home-install a, .home-provider a { color: var(--text); text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.home-install a:hover { color: var(--gold); text-decoration-color: var(--gold); }
.home-provider { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
.home-provider a, .home-install a { padding-block: 13px; margin-block: -13px; }
.home-provider { margin-top: 18px; font-size: 15px; }
.home-provider a:hover { color: var(--gold); text-decoration-color: var(--gold); }

/* Validation plan: a D2-style diagram drawn as inline SVG text (selectable,
   readable by assistive tech via <title>/<desc>), one entrance, static under
   reduced motion. Tyrian glow, gold only for the verified path and seal. */
.home-plan { width: 100%; max-width: 520px; margin: 0; justify-self: center; }
.plan { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 30px 60px rgba(122, 31, 92, .45)); }
.plan text { font-family: var(--mono); }
.plan-box { fill: rgba(12, 7, 18, .78); stroke: var(--line); stroke-width: 1.5; }
.plan-label { fill: var(--gold); font: 600 12px var(--sans) !important; letter-spacing: .12em; text-transform: uppercase; }
.plan-goal { fill: var(--gold-high); font-size: 12px; }
.plan-node { fill: #21162b; stroke: #5a4361; stroke-width: 1.5; }
.plan-node.loop { fill: #1b1224; stroke-dasharray: 4 3; }
.plan-node.blocked { fill: rgba(122, 31, 92, .22); stroke: #a0507f; }
.plan-crit { fill: var(--text); font: 500 13.5px var(--sans) !important; }
.plan-check { fill: var(--faint); font-size: 12.5px; }
.plan-chip { stroke-width: 1; }
.plan-chip.pass { fill: rgba(207, 227, 176, .1); stroke: rgba(207, 227, 176, .45); }
.plan-chip.stale { fill: rgba(230, 196, 128, .1); stroke: rgba(230, 196, 128, .55); }
.plan-chip-text { font-size: 12.5px; }
.plan-chip-text.pass { fill: #cfe3b0; }
.plan-chip-text.stale { fill: var(--gold); }
.plan-edge { fill: none; stroke: var(--faint); stroke-width: 1.5; }
.plan-edge.loop { stroke-dasharray: 4 3; }
.plan-edge.gold { stroke: var(--gold); }
.plan-edge-label { fill: var(--faint); font: italic 13px var(--sans) !important; }
.plan-pill { fill: #2b1c36; stroke: var(--water); stroke-width: 1.5; }
.plan-pill-text { fill: var(--text); font: 600 14px var(--sans) !important; }
.plan-blocked { fill: #e8a9c9; font: italic 600 14px var(--sans) !important; }
.plan-verified { fill: var(--gold); font: italic 500 24px var(--sans) !important; }
.plan-sub { fill: var(--muted); font: 13px var(--sans) !important; }
@media (prefers-reduced-motion: no-preference) {
  .plan-step, .plan-finish { animation: session-in .32s ease-out both; }
  .plan-step:nth-of-type(1) { animation-delay: .1s; }
  .plan-step:nth-of-type(2) { animation-delay: .3s; }
  .plan-step:nth-of-type(3) { animation-delay: .45s; }
  .plan-step:nth-of-type(4) { animation-delay: .6s; }
  .plan-step:nth-of-type(5) { animation-delay: .85s; }
  .plan-step:nth-of-type(6) { animation-delay: 1.05s; }
  .plan-step:nth-of-type(7) { animation-delay: 1.25s; }
  .plan-finish { animation-delay: 1.5s; }
  .plan-finish .seal { transform-box: fill-box; transform-origin: center; animation: seal-press .36s cubic-bezier(.2, .8, .3, 1.2) 1.55s both; }
}
@keyframes session-in { from { opacity: 0; transform: translateY(3px); } }
@keyframes seal-press { from { opacity: 0; transform: scale(1.25) rotate(-12deg); } }

.home-footer { display: flex; gap: 24px; width: min(1120px, 100% - 2 * var(--gutter)); margin: 0 auto; padding-bottom: 20px; }
.home-footer nav { display: flex; gap: 24px; }
.home-footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 12px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--faint); }
.home-footer a:hover { color: var(--gold); }
@media (max-width: 960px) {
  .home-hero, .home-band, .home-crew { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .home-crew .crew-artwork { order: 2; }
}
@media (max-width: 700px) {
  .pitch-home .home-main { padding-block: 24px 48px; }
  .pitch-home h1 { font-size: clamp(34px, 9vw, 48px); }
}
@media (max-width: 480px) {
  /* Use the gutters so the smallest diagram text stays legible on phones. */
  .home-plan { width: calc(100% + 24px); max-width: none; margin-inline: -12px; }
}
@media (max-height: 760px) and (min-width: 961px) {
  .home-hero { min-height: 0; }
}
.pitch-home .copy { min-width: 76px; font-size: 14px; }