/* #features — Live vs Coming bento grid (#334) */
#features .ft-head { display: grid; gap: var(--s3); margin-bottom: var(--s5); }
#features .ft-head .eyebrow { margin: 0; }
#features .ft-head h2 { font-size: clamp(2.4rem, 7vw, 5.5rem); }
#features .ft-hl { color: var(--accent-ink); }
#features .ft-tally { margin: 0; font: 600 .95rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; align-items: baseline; gap: .5em; }
#features .ft-num { font: 900 2.4rem/1 var(--font-display); font-stretch: 125%; font-variation-settings: "wdth" 125; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
#features .ft-num-soon { color: var(--accent-ink); }
#features .ft-sep { color: var(--line); font-size: 1.6rem; }

#features .ft-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#features .ft-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s4);
  min-height: 210px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 2px solid var(--line);
  /* reveal uses transform; hover lift uses translate so the two never fight */
  transition: opacity var(--dur) var(--ease-out) var(--delay, 0s), transform var(--dur) var(--ease-out) var(--delay, 0s),
              translate .45s var(--ease-spring), box-shadow .4s var(--ease-out), border-color .3s;
}
/* pointer-following spotlight; features.js sets --mx/--my */
#features .ft-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--fg) 7%, transparent), transparent 70%);
  opacity: 0; transition: opacity .35s;
}
#features .ft-card:hover { translate: 0 -6px; border-color: var(--fg); box-shadow: 0 24px 60px -24px var(--shadow); }
#features .ft-card:hover::before { opacity: 1; }

#features .ft-card h3 { margin: auto 0 0; font: 800 1.35rem/1.1 var(--font-display); font-stretch: 112%; font-variation-settings: "wdth" 112; text-transform: uppercase; letter-spacing: -.01em; }
#features .ft-card p { margin: 0; color: var(--muted); font-size: .98rem; line-height: 1.45; }

#features .ft-ico {
  width: 44px; height: 44px; padding: 9px; border-radius: 12px;
  fill: none; stroke: var(--fg); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  background: var(--surface-2);
  transition: transform .5s var(--ease-spring), background-color .3s, stroke .3s;
}
#features .ft-card:hover .ft-ico { transform: rotate(-8deg) scale(1.1); background: var(--fg); stroke: var(--bg); }
#features .ft-trail { stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset 1.2s var(--ease-out) .4s; }
#features .in-view .ft-trail { stroke-dashoffset: 0; }

#features .ft-badge {
  position: absolute; top: var(--s4); right: var(--s4);
  display: inline-flex; align-items: center; gap: .45em;
  padding: .45em .8em; border-radius: 999px;
  font: 700 .7rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  border: 1.5px dashed var(--muted); color: var(--muted);
}
#features .ft-live { border: 1.5px solid var(--accent); background: var(--accent); color: var(--on-accent); }
#features .ft-coming { border: 1.5px solid var(--accent); color: var(--accent-ink); }
#features .ft-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: ft-pulse 1.8s ease-in-out infinite; }
@keyframes ft-pulse { 50% { opacity: .25; transform: scale(.7); } }

/* the big why card: neutral, the 8-ball carries it; orange kicker + punchline */
#features .ft-big {
  grid-column: span 2; grid-row: span 2;
  min-height: 440px; justify-content: flex-end;
  background: var(--surface-2); border-color: var(--line); color: var(--fg);
}
#features .ft-big::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--fg) 8%, transparent), transparent 70%); }
#features .ft-big:hover { border-color: var(--fg); }
#features .ft-big h3 { margin: 0; font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: .95; max-width: 11ch; }
#features .ft-big p { color: var(--muted); font-size: 1.1rem; max-width: 34ch; }
#features .ft-big p b { color: var(--accent-ink); }
#features .ft-big .ft-kicker { font: 700 .75rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; margin-bottom: auto; opacity: 1; color: var(--accent-ink); }
#features .ft-ball { position: absolute; z-index: -1; width: 44%; top: -10%; right: -10%; transition: rotate 1.2s var(--ease-out); rotate: -25deg; }
#features .ft-ball circle { fill: var(--rail); }
#features .ft-ball .ft-ball-spot { fill: var(--ball); }
#features .ft-ball text { font: 900 64px/1 var(--font-display); fill: var(--rail); }
#features .ft-big.in-view .ft-ball { rotate: 0deg; animation: ft-float 6s ease-in-out 1.2s infinite; }
@keyframes ft-float { 50% { translate: -6px 10px; } }

#features .ft-wide { grid-column: span 2; min-height: 180px; }

#features .ft-divider { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s3); margin-top: var(--s4); font: 600 .8rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
#features .ft-divider::before, #features .ft-divider::after { content: ""; height: 2px; flex: 1; background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px); }


@media (max-width: 900px) {
  #features .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #features .ft-big { min-height: 360px; grid-row: auto; }
}
@media (max-width: 560px) {
  #features .ft-grid { grid-template-columns: minmax(0, 1fr); }
  #features .ft-big, #features .ft-wide { grid-column: auto; }
  #features .ft-card { min-height: 0; padding: var(--s4) var(--s3) var(--s3); }
  #features .ft-big { min-height: 380px; padding: var(--s4); }
  #features .ft-card h3 { margin-top: var(--s2); }
  #features .ft-big h3 { margin-top: 0; }
  #features .ft-badge { top: var(--s3); right: var(--s3); }
}

@media (prefers-reduced-motion: reduce) {
  #features .ft-card:hover { translate: none; }
  #features .ft-trail { stroke-dashoffset: 0; }
  #features .ft-ball { rotate: 0deg; }
}
#features .ft-coming::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; }
#features .ft-big .ft-ball > circle:first-child { stroke: var(--line); stroke-width: 3; }