/* The "alternative to X" pages: the landing page's look (glowing blue brand line,
   red shouty catchline, red and blue glow rising from the bottom, chunky blue and
   red buttons) on a page that scrolls. Shared by every page in /alternatives/. */
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2'); }

/* Same palette as the landing page and the app */
:root {
  --bg: #141414;
  --surface: #1f1f1f;
  --border: #2a2a2a;
  --border-strong: #4a4a4a;
  --text: #e6e6e6;
  --body: #cfcfcf;
  --muted: #8a8a8a;
  --attention: #3f7bd6;
  --attention-rgb: 63, 123, 214;
  --attention-hover: #4f8ae0;
  --apocalyptic: #e5484d;
  --apocalyptic-rgb: 229, 72, 77;
  --apocalyptic-hover: #ec5d62;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  isolation: isolate;
}

/* The landing page's glow: a red core with a blue wash, fixed to the bottom of
   the screen, breathing slowly. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 45% at 50% 115%, rgba(var(--apocalyptic-rgb), 0.55) 0%, rgba(var(--apocalyptic-rgb), 0.28) 40%, transparent 75%),
    radial-gradient(ellipse 170% 120% at 50% 125%, rgba(var(--attention-rgb), 0.45) 0%, rgba(var(--attention-rgb), 0.25) 35%, rgba(var(--attention-rgb), 0.08) 68%, transparent 90%);
  transform-origin: 50% 100%;
  animation: breathe 6s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}

/* Load: the glow swells up from the bottom, the darts fly in from the left,
   then the headline, lede and buttons rise in one after another. Each hero
   part wraps its float in a .rise so the two animations don't fight. */
.rise { animation: rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: var(--at, 0s); }
@keyframes rise { from { opacity: 0; transform: translateY(34px); filter: blur(6px); } }
body::before { animation: glow-up 1.4s ease-out both, breathe 6s ease-in-out 1.4s infinite; }
@keyframes glow-up { from { opacity: 0; transform: scaleY(0.5); } }
.logo .dart-red  { animation: dart-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both; }
.logo .dart-blue { animation: dart-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.25s both; }
@keyframes dart-in { from { opacity: 0; transform: translateX(-120px); } }

/* Everything readable sits above the glow. */
main { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; padding: 40px 20px 120px; }

/* Afterwards the hero floats, each part on its own clock (as on the landing
   page). Float uses `translate` so it stacks with the buttons' hover lift. */
.hero .logo, .hero .brand, .hero .btn, .final .btn { animation: float var(--float-dur) ease-in-out var(--float-delay) infinite; }
.hero .logo   { --float-dur: 4.8s; --float-delay: 0.5s; --float-y: -8px; }
.hero .brand  { --float-dur: 4.2s; --float-delay: 0.6s; --float-y: -10px; }
.banger       { --float-dur: 3.6s; --float-delay: 0.9s; --float-y: -12px; }
.btn.blue     { --float-dur: 4.6s; --float-delay: 0.7s; --float-y: -8px; }
.btn.red      { --float-dur: 4.0s; --float-delay: 1.1s; --float-y: -9px; }
@keyframes float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 var(--float-y); }
}

/* Sections rise in as they scroll into view (alt.js adds .in). */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.reveal.in { opacity: 1; transform: none; }
.versus .card.reveal:nth-child(2) { transition-delay: 0.12s; }

/* Back: a small pill, quiet until hovered, then it lights blue. */
.back {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px 8px 12px;
  border: 1px solid var(--border-strong); border-radius: 999px;
  background: rgba(28, 28, 28, 0.9);
  color: var(--body); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  transition: color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.back svg { width: 14px; height: 14px; transition: transform 0.15s; }
.back:hover { color: var(--text); border-color: var(--attention); box-shadow: 0 0 18px rgba(var(--attention-rgb), 0.45); }
.back:hover svg { transform: translateX(-3px); }

/* Hero: logo, then the blue brand line and the red catchline, like the landing page. */
.hero { text-align: center; padding: 48px 0 24px; }
.logo {
  display: block;
  height: 72px;
  margin: 0 auto 28px;
  overflow: visible;
  filter: drop-shadow(0 0 8px rgba(var(--apocalyptic-rgb), 0.7)) drop-shadow(0 0 24px rgba(var(--attention-rgb), 0.55));
}
.dart-blue { fill: var(--attention); }
.dart-red  { fill: var(--apocalyptic); }

h1 {
  margin: 0 0 28px;
  font-size: clamp(34px, 6.4vw, 68px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.brand, .banger { display: block; }
.brand.long { font-size: 0.84em; } /* build.mjs marks brand lines over 24 characters, so they stay on one line */
.brand {
  color: var(--attention);
  text-shadow: 0 0 6px rgba(var(--attention-rgb), 0.9), 0 0 24px rgba(var(--attention-rgb), 0.85), 0 0 60px rgba(var(--attention-rgb), 0.6);
}
.banger {
  margin-top: 0.15em;
  color: var(--apocalyptic);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.82em;
  animation: ember 1.7s ease-in-out infinite, float var(--float-dur) ease-in-out var(--float-delay) infinite;
}
@keyframes ember {
  0%, 100% { text-shadow: 0 0 6px rgba(var(--apocalyptic-rgb), 0.85), 0 0 24px rgba(var(--apocalyptic-rgb), 0.8), 0 0 50px rgba(var(--apocalyptic-rgb), 0.5); }
  50% { text-shadow: 0 0 8px rgba(var(--apocalyptic-rgb), 1), 0 0 40px rgba(var(--apocalyptic-rgb), 1), 0 0 90px rgba(var(--apocalyptic-rgb), 0.75); }
}

.lede { max-width: 680px; margin: 0 auto 36px; font-size: 19px; line-height: 1.6; color: var(--body); }
.lede strong { color: var(--text); }

/* Buttons: blue like the brand line, red like the catchline. */
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  padding: 20px 36px;
  border-radius: 16px;
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.15s;
}
.btn:hover { transform: translateY(-2px); }
.btn.blue { background: var(--attention); box-shadow: 0 0 32px rgba(var(--attention-rgb), 0.45); }
.btn.blue:hover { background: var(--attention-hover); }
.btn.red { background: var(--apocalyptic); box-shadow: 0 0 32px rgba(var(--apocalyptic-rgb), 0.45); }
.btn.red:hover { background: var(--apocalyptic-hover); }
.btn:focus-visible, .back:focus-visible, a:focus-visible { outline: 2px solid var(--attention); outline-offset: 3px; }

h2 {
  margin: 72px 0 16px;
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
h2 .hot { color: var(--apocalyptic); text-shadow: 0 0 18px rgba(var(--apocalyptic-rgb), 0.7); }
h2 .cool { color: var(--attention); text-shadow: 0 0 18px rgba(var(--attention-rgb), 0.7); }

p, li { font-size: 16.5px; line-height: 1.65; color: var(--body); }
a { color: #7aa7ea; }
strong { color: var(--text); font-weight: 600; }

/* Two cards side by side: the competitor quiet, us lit. */
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.card {
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(28, 28, 28, 0.97);
}
.card h3 { margin: 0 0 8px; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.card p { margin: 0; }
.card.us { border-color: rgba(var(--attention-rgb), 0.8); box-shadow: 0 0 36px rgba(var(--attention-rgb), 0.25), inset 0 0 24px rgba(var(--attention-rgb), 0.08); }
.card.us h3 { color: var(--attention); text-shadow: 0 0 12px rgba(var(--attention-rgb), 0.8); }
.card ul { margin: 0; padding-left: 20px; }
.card.hot { border-color: rgba(var(--apocalyptic-rgb), 0.8); box-shadow: 0 0 36px rgba(var(--apocalyptic-rgb), 0.25), inset 0 0 24px rgba(var(--apocalyptic-rgb), 0.08); }
.card.hot h3 { color: var(--apocalyptic); text-shadow: 0 0 12px rgba(var(--apocalyptic-rgb), 0.8); }

/* The comparison table: our column glows blue. */
.table-wrap {
  overflow-x: auto;
  margin: 20px 0 8px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(20, 20, 20, 0.97);
}
table { width: 100%; border-collapse: collapse; min-width: 600px; }
th, td { text-align: left; vertical-align: top; padding: 14px 16px; font-size: 15px; line-height: 1.5; border-bottom: 1px solid var(--border); color: var(--body); }
tr:last-child td { border-bottom: 0; }
th { font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
th.us { color: var(--attention); text-shadow: 0 0 12px rgba(var(--attention-rgb), 0.8); }
td.us { color: var(--text); background: rgba(var(--attention-rgb), 0.08); }
td:first-child { color: var(--text); font-weight: 600; width: 20%; }
.note { color: var(--muted); font-size: 13.5px; }

/* Diagrams: the competitor's flow drawn grey, ours lit and moving. */
figure { margin: 0; }
.diagram svg { display: block; width: 100%; height: auto; margin: 6px 0 10px; overflow: visible; }
.diagram figcaption { color: var(--body); font-size: 15px; }
/* Labels sit on their box's centre line: build.mjs puts y at the centre. */
.diagram text { font: 600 13px 'IBM Plex Sans', system-ui, sans-serif; text-anchor: middle; dominant-baseline: central; }

/* Theirs: grey. The flow's packet is drawn under the boxes, so it slides behind them. */
.flow .node rect { fill: #1a1a1a; stroke: var(--border-strong); }
.flow .node text { fill: var(--muted); }
.flow .wire { fill: none; stroke: var(--border-strong); stroke-width: 2; stroke-dasharray: 4 4; }
.flow .packet { fill: var(--muted); }
.chat .bubble rect { fill: #1a1a1a; stroke: var(--border-strong); }
.chat .bubble.you rect { fill: #222; }
.chat .bubble text { fill: var(--muted); }
.chat .wait circle { fill: var(--muted); animation: typing 1.2s ease-in-out infinite; }
.chat .wait circle:nth-of-type(2) { animation-delay: 0.2s; }
.chat .wait circle:nth-of-type(3) { animation-delay: 0.4s; }
@keyframes typing { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }
.chat .hint { fill: var(--muted); font-weight: 400; font-style: italic; text-anchor: start; }
.code .editor { fill: #161616; stroke: var(--border-strong); }
.code text { fill: var(--muted); font: 400 12.5px ui-monospace, 'Cascadia Code', Consolas, monospace; text-anchor: start; }
.code .cursor { fill: var(--muted); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* Ours: under the orbit, a live count - lots done, almost nothing asked of you. */
.stats { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 10px; font-size: 13.5px; color: var(--body); }
.stats b { display: block; font-size: 24px; line-height: 1.2; color: var(--text); font-variant-numeric: tabular-nums; }
.stats span:first-child b { color: var(--attention); text-shadow: 0 0 14px rgba(var(--attention-rgb), 0.8); }
.stats span:last-child { text-align: right; }
.orbit .ring { fill: none; stroke: rgba(var(--attention-rgb), 0.45); stroke-width: 2; stroke-dasharray: 6 8; }
.orbit .spin { transform-origin: 180px 100px; animation: spin 6s linear infinite; }
.orbit .spark { fill: var(--attention); filter: drop-shadow(0 0 6px var(--attention)); }
.orbit .spark.red { fill: var(--apocalyptic); filter: drop-shadow(0 0 6px var(--apocalyptic)); }
@keyframes spin { to { transform: rotate(360deg); } }
.orbit .core circle { fill: rgba(var(--attention-rgb), 0.18); stroke: var(--attention); stroke-width: 2; filter: drop-shadow(0 0 12px rgba(var(--attention-rgb), 0.8)); animation: pulse 2.4s ease-in-out infinite; transform-origin: 180px 100px; }
.orbit .core text { fill: var(--text); }
.orbit .core .small { fill: var(--body); font-size: 10px; font-weight: 400; }
@keyframes pulse { 50% { transform: scale(1.08); } }
.orbit .task rect { fill: #161d29; stroke: rgba(var(--attention-rgb), 0.7); }
.orbit .task text { fill: var(--text); }
.orbit .task.hot rect { fill: #2a1415; stroke: rgba(var(--apocalyptic-rgb), 0.8); filter: drop-shadow(0 0 8px rgba(var(--apocalyptic-rgb), 0.6)); }
/* Tasks are drawn after the sparks and stay solid, so a spark passes behind a
   pill, never through it. Each lights up in turn: outline and label brighten. */
.orbit .task rect, .orbit .task text { animation: lit 4s ease-in-out infinite; }
.orbit .t2 rect, .orbit .t2 text { animation-delay: 1s; }
.orbit .t3 rect, .orbit .t3 text { animation-delay: 2s; }
.orbit .t4 rect, .orbit .t4 text { animation-delay: 3s; }
@keyframes lit { 0%, 100% { stroke-opacity: 0.45; fill-opacity: 1; filter: none; } 12%, 30% { stroke-opacity: 1; filter: drop-shadow(0 0 8px rgba(var(--attention-rgb), 0.9)); } }
.orbit .task text { animation-name: lit-text; }
@keyframes lit-text { 0%, 100% { opacity: 0.6; } 12%, 30% { opacity: 1; } }

/* The real app, framed and lit. */
.shot { margin-top: 20px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(var(--attention-rgb), 0.6); box-shadow: 0 0 60px rgba(var(--apocalyptic-rgb), 0.3), 0 0 120px rgba(var(--attention-rgb), 0.2); }
.shot img { display: block; width: 100%; height: auto; }

.yes { color: #3fb27f; font-weight: 700; }
.no { color: var(--apocalyptic); font-weight: 700; }

/* Questions stay folded: the page is for looking, the answers are there if wanted. */
.faq { margin-top: 64px; border: 1px solid var(--border); border-radius: 16px; background: rgba(28, 28, 28, 0.97); padding: 18px 22px; }
.faq summary { cursor: pointer; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }
.faq p { margin: 14px 0 0; }

.final { text-align: center; margin-top: 80px; }
.final .banger { font-size: clamp(28px, 5vw, 52px); font-weight: 600; margin-bottom: 28px; }

@media (max-width: 640px) {
  .versus { grid-template-columns: 1fr; }
  .btn { min-width: 0; width: 100%; font-size: 18px; padding: 18px 24px; }
  .logo { height: 56px; }
  main { padding: 28px 16px 96px; }
  h2 { margin-top: 56px; }
}

/* The hub: one lit card per comparison page. */
.picks { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.card.pick { display: block; text-decoration: none; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; }
.card.pick h3 { color: var(--attention); font-size: 22px; letter-spacing: 0.04em; text-shadow: 0 0 12px rgba(var(--attention-rgb), 0.8); }
.card.pick:hover { transform: translateY(-3px); border-color: rgba(var(--apocalyptic-rgb), 0.8); box-shadow: 0 0 36px rgba(var(--apocalyptic-rgb), 0.3); }

@media (prefers-reduced-motion: reduce) {
  body::before, .banger, .hero .logo, .hero .brand, .hero .btn, .final .btn,
  .rise, .logo polygon, .orbit .spin, .orbit .core circle, .orbit .task { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}