/* Product page only: map hero and the feature showcase. Tokens come from site.css. */

/* ---------- hero: text left, ASCII map right ---------- */
.p-hero { padding-top: 68px; }
.p-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); align-items: center; padding-top: var(--s-8); padding-bottom: var(--s-8); min-height: min(calc(100vh - 68px), 820px); min-height: min(calc(100svh - 68px), 820px); }
.p-hero h1 { font-size: var(--t-display); line-height: 1.04; letter-spacing: -0.04em; max-width: 12em; }
.p-hero p { margin-top: var(--s-5); color: var(--muted); max-width: 30em; font-size: 19px; }
.p-hero .actions { margin-top: var(--s-6); }
.map-box { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 580px; justify-self: end; }
.map-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.js .map-box canvas { opacity: 0; transform: scale(.94); transition: opacity 1.6s var(--ease), transform 2.2s var(--ease); }
.js .map-box canvas.on { opacity: 1; transform: none; }

/* ---------- features ---------- */
.fx-list { display: grid; gap: var(--s-9); margin-top: var(--s-8); }
.fx { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: center; }
.fx.rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.fx.rev .fx-text { order: 2; }
.fx h3 { font-size: 26px; line-height: 1.15; letter-spacing: -0.03em; margin-top: var(--s-4); }
.fx .lead { margin-top: var(--s-3); color: var(--muted); }
.fx .dots { margin-top: var(--s-5); }
.fx .dots li { color: var(--fg); }
.fx .note { margin-top: var(--s-4); font-size: var(--t-small); color: var(--subtle); }
.fx .note a, .fx .dots a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 3px; transition: color .25s; }
.fx .note a:hover, .fx .dots a:hover { color: var(--fg-strong); }

/* status: shape tells the state (filled, half, hollow); never red */
.status { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 12px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--fg); font: 500 12px/1 var(--font-mono); letter-spacing: .04em; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fg-strong); }
.status.rolling::before { background: linear-gradient(90deg, var(--fg-strong) 50%, transparent 50%); box-shadow: inset 0 0 0 1px var(--fg-strong); }
.status.early { color: var(--muted); }
.status.early::before { background: transparent; box-shadow: inset 0 0 0 1px var(--muted); }

/* mono mock: a terminal, a pull request, a campaign log */
.fx-mock { min-width: 0; border-radius: var(--r-card); background: var(--surface); overflow: hidden; box-shadow: 0 40px 80px -48px rgba(255,255,255,.06); }
.fx-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 14px var(--s-5) 0; font: 12px/1 var(--font-mono); color: var(--subtle); white-space: nowrap; overflow: hidden; }
.fx-bar span:last-child { overflow: hidden; text-overflow: ellipsis; }
.fx-mock pre { margin: 0; padding: var(--s-4) var(--s-5) var(--s-5); overflow-x: auto; font: var(--t-mono)/1.75 var(--font-mono); color: var(--muted); scrollbar-width: none; }
.fx-mock pre::-webkit-scrollbar { display: none; }
.fx-mock .l { display: block; min-height: 1.75em; }
.fx-mock .s { color: var(--fg-strong); }
.fx-mock .d { color: var(--subtle); }
.fx-mock .c { color: var(--critical); }
.fx-mock .box { display: block; min-width: max-content; margin: 6px 0; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); }
.js .fx-mock .l { opacity: 0; transform: translateY(4px); transition: opacity .6s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js .fx-mock.play .l { opacity: 1; transform: none; }

@media (max-width: 960px) {
  .p-hero .wrap { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: var(--s-8); gap: var(--s-6); }
  .map-box { justify-self: center; max-width: 520px; }
  .fx, .fx.rev { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .fx.rev .fx-text { order: 0; }
  .fx-list { gap: var(--s-8); }
}
@media (max-width: 560px) {
  .p-hero .wrap { padding-top: var(--s-7); padding-bottom: var(--s-5); }
  .p-hero p { font-size: 17px; }
  .map-box { max-width: 100%; }
  .fx h3 { font-size: 23px; }
  .fx-mock pre { font-size: 10.5px; padding: var(--s-3) var(--s-4) var(--s-4); }
  .fx-mock .box { padding: 8px 12px; }
  .fx-bar { padding: 12px var(--s-4) 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js .map-box canvas, .js .fx-mock .l { opacity: 1; transform: none; }
}