/* ════════════════════════════════════════════════════════════════════
   Feature-page kit — Linear/Raycast-class product pages in MetaWhisp's
   own identity (black, Space Grotesk headings, terminal-green accent).
   Every visual is an HTML product simulation, not an image.
   ════════════════════════════════════════════════════════════════════ */

.fx { --fx-bg:#0d0e0d; --fx-line:#1b1d1b; --fx-ink:#ececec; --fx-dim:#8a8f8a;
      --fx-mut:#565b56; --fx-grn:#4ade80; --fx-blu:#60a5fa; --fx-amb:#fbbf24; }

/* ── chapter scaffolding ─────────────────────────────────────────── */
.fx-wrap { max-width:1380px; margin:0 auto; padding:0 clamp(1.5rem,4vw,3.5rem); }
.fx-chapter { margin:7rem auto 0; }
.fx-kicker { display:flex; align-items:baseline; gap:14px; margin-bottom:10px; }
.fx-num { font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:.85rem; color:var(--fx-grn); letter-spacing:.08em; }
.fx-kicker h2 { font-family:var(--font-heading); font-weight:700; font-size:clamp(1.5rem,3.2vw,2.2rem);
  color:var(--fx-ink); margin:0; letter-spacing:-.01em; }
.fx-lede { max-width:56ch; color:var(--fx-dim); font-size:1.02rem; line-height:1.65; margin:0 0 2.2rem; }
.fx-lede strong { color:var(--fx-ink); font-weight:600; }
.fx-lede a { color:var(--fx-grn); }

/* ── app window frame (modeled on the real BLOCKS-style app) ─────── */
.fx-win { background:var(--fx-bg); border:1px solid var(--fx-line); border-radius:14px; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.03); }
.fx-bar { display:flex; align-items:center; gap:6px; padding:12px 16px; border-bottom:1px solid #141614; }
.fx-bar i { width:11px; height:11px; border-radius:50%; background:#232523; }
.fx-bar span { margin-left:10px; font-family:var(--font-heading); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fx-mut); }
.fx-bar .fx-live { margin-left:auto; display:flex; align-items:center; gap:7px; font-family:ui-monospace,monospace;
  font-size:.68rem; color:var(--fx-grn); letter-spacing:.06em; }
.fx-body { padding:20px 22px; }
.fx-cap { text-align:left; font-size:.7rem; color:var(--fx-mut); letter-spacing:.1em; text-transform:uppercase; margin-top:1rem; }

/* window with sidebar (Library view) */
.fx-cols { display:grid; grid-template-columns:168px 1fr; min-height:340px; }
.fx-side { border-right:1px solid #141614; padding:14px 0; background:#0b0c0b; }
.fx-side a { display:flex; align-items:center; gap:9px; padding:8px 16px; font-size:.8rem; color:var(--fx-dim);
  text-decoration:none; border-left:2px solid transparent; }
.fx-side .on { color:var(--fx-ink); background:#121412; border-left-color:var(--fx-grn); }
.fx-side i { width:13px; height:13px; opacity:.6; flex:0 0 13px; }
.fx-side i svg { display:block; width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.6; }

/* ── product sims ─────────────────────────────────────────────────── */
.fx-doc-title { font-family:var(--font-heading); font-weight:700; font-size:1.12rem; color:var(--fx-ink); margin:2px 0 4px; }
.fx-doc-meta { font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--fx-mut); margin-bottom:14px; }
.fx-doc-meta b { color:var(--fx-grn); font-weight:600; }
.fx-tabs { display:flex; gap:2px; border-bottom:1px solid var(--fx-line); margin-bottom:12px; }
.fx-tabs span { font-family:var(--font-heading); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fx-mut); padding:7px 13px; }
.fx-tabs .on { color:var(--fx-ink); box-shadow:inset 0 -2px 0 var(--fx-grn); }

.fx-row { display:flex; gap:12px; padding:8px 0; border-bottom:1px solid #131513; font-size:.86rem; }
.fx-row:last-child { border-bottom:0; }
.fx-who { flex:0 0 50px; font-family:var(--font-heading); font-size:.66rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; padding-top:3px; }
.fx-who.you { color:var(--fx-grn); } .fx-who.them { color:var(--fx-blu); }
.fx-ts { flex:0 0 42px; font-family:ui-monospace,monospace; font-size:.7rem; color:var(--fx-mut); padding-top:3px; }
.fx-say { color:#d6d8d6; line-height:1.55; }

/* toggle rows (settings truth: defaults shown honestly) */
.fx-toggles { display:flex; flex-direction:column; }
.fx-tgl { display:flex; align-items:center; gap:12px; padding:11px 2px; border-bottom:1px solid #131513; }
.fx-tgl:last-child { border-bottom:0; }
.fx-tgl-label { font-size:.86rem; color:#d6d8d6; }
.fx-tgl-sub { font-size:.72rem; color:var(--fx-mut); margin-top:2px; }
.fx-sw { margin-left:auto; width:34px; height:20px; border-radius:10px; background:#1e211e; position:relative; flex:0 0 34px; }
.fx-sw::after { content:''; position:absolute; top:3px; left:4px; width:14px; height:14px; border-radius:50%; background:#4a4f4a; }
.fx-sw.on { background:rgba(74,222,128,.25); }
.fx-sw.on::after { left:auto; right:4px; background:var(--fx-grn); }

/* waveform tracks */
.fx-track { display:flex; align-items:center; gap:14px; padding:9px 0; }
.fx-track-tag { flex:0 0 92px; font-family:var(--font-heading); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; }
.fx-wavebar { flex:1; display:flex; align-items:center; gap:3px; height:32px; }
.fx-wavebar i { display:block; width:4px; border-radius:2px; }

/* recap card */
.fx-recap h5 { font-family:var(--font-heading); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fx-mut); margin:14px 0 6px; }
.fx-recap h5:first-child { margin-top:0; }
.fx-recap ul { list-style:none; margin:0; padding:0; }
.fx-recap li { position:relative; padding:4px 0 4px 18px; font-size:.85rem; color:#d6d8d6; line-height:1.5; }
.fx-recap li::before { content:''; position:absolute; left:2px; top:11px; width:6px; height:6px; border-radius:2px; background:var(--fx-grn); }
.fx-recap li.wait::before { background:var(--fx-amb); }
.fx-chip { display:inline-block; font-family:var(--font-heading); font-size:.6rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fx-amb); border:1px solid rgba(251,191,36,.35); border-radius:9999px;
  padding:2px 9px; vertical-align:2px; margin-left:8px; }
.fx-chip.free { color:var(--fx-grn); border-color:rgba(74,222,128,.35); }

/* copilot floating hint */
.fx-hintcard { border:1px solid #223022; background:linear-gradient(180deg,#101410,#0c0e0c); border-radius:12px;
  padding:14px 16px; box-shadow:0 18px 50px rgba(0,0,0,.5); }
.fx-hintcard .tag { display:flex; align-items:center; gap:8px; font-family:var(--font-heading); font-size:.62rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--fx-grn); margin-bottom:7px; }
.fx-hintcard p { font-size:.84rem; color:#d6d8d6; line-height:1.55; margin:0; }
.fx-dot { width:7px; height:7px; border-radius:50%; background:var(--fx-grn); box-shadow:0 0 10px rgba(74,222,128,.7); }

/* ── detection pills ──────────────────────────────────────────────── */
.fx-pills { display:flex; flex-wrap:wrap; gap:10px; }
.fx-pills span { display:flex; align-items:center; gap:8px; border:1px solid #232623; border-radius:9999px;
  padding:9px 18px; font-family:var(--font-heading); font-size:.82rem; color:#c9ccc9; background:#0f110f; }
.fx-pills .dot { width:7px; height:7px; border-radius:50%; background:var(--fx-grn); }

/* ── claim chips around a visual ──────────────────────────────────── */
.fx-claims { display:flex; flex-wrap:wrap; gap:10px; margin-top:1.2rem; }
.fx-claims span { font-family:ui-monospace,monospace; font-size:.74rem; letter-spacing:.04em; color:var(--fx-dim);
  border:1px solid var(--fx-line); border-radius:8px; padding:7px 12px; background:#0d0f0d; }
.fx-claims b { color:var(--fx-grn); font-weight:600; }

/* ── split & bento layouts ────────────────────────────────────────── */
.fx-split { display:grid; grid-template-columns:minmax(280px,5fr) minmax(300px,7fr); gap:2.6rem; align-items:center; }
.fx-split.rev { grid-template-columns:minmax(300px,7fr) minmax(280px,5fr); }
.fx-bento { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.fx-cell { grid-column:span 2; background:var(--fx-bg); border:1px solid var(--fx-line); border-radius:14px; padding:20px; }
.fx-cell.w3 { grid-column:span 3; } .fx-cell.w4 { grid-column:span 4; } .fx-cell.w6 { grid-column:span 6; }
.fx-cell h3 { font-family:var(--font-heading); font-size:1rem; font-weight:700; color:var(--fx-ink); margin:0 0 6px; }
.fx-cell > p { font-size:.86rem; color:var(--fx-dim); line-height:1.6; margin:0 0 14px; }
.fx-cell .sim { border-top:1px solid #141614; padding-top:12px; }

@media (max-width:840px) {
  .fx-split, .fx-split.rev { grid-template-columns:1fr; gap:1.6rem; }
  .fx-cell, .fx-cell.w3, .fx-cell.w4 { grid-column:span 6; }
  .fx-cols { grid-template-columns:1fr; }
  .fx-side { display:none; }
  .fx-chapter { margin-top:4.5rem; }
}

/* left-anchored overrides inside feature pages (no floating center columns) */
.fx .section-title { text-align:left; }
.fx .faq-item { max-width:78ch; }
.fx .comparison-table { max-width:1000px; }

/* the blog.css .feature-page shell is an 800px centered column — kill it for fx pages */
.feature-page.fx { max-width:none; margin:0; padding:5.5rem 0 0; }
.fx .breadcrumbs { justify-content:flex-start !important; padding:0 clamp(1.5rem,4vw,3.5rem) !important; max-width:1380px !important; margin:0 auto 0 !important; }

/* ════════════════════════════════════════════════════════════════════
   GRID SYSTEM v2 — one rail, 12 columns.
   Audit found 4 competing left rails (30/54/86/119px) on a 1440 viewport;
   Linear runs 1 dominant rail + a fixed split column, Vercel runs 1 rail
   + a 12-col grid. This block collapses everything onto one rail and puts
   every second column on a fixed grid line. Geometry only — no colour,
   type, or component styling is touched here.
   ════════════════════════════════════════════════════════════════════ */
.fx {
  --fx-max: 1200px;                        /* = the nav pill's max-width */
  --fx-gut: clamp(24px, 5.8vw, 83px);      /* = the pill's inner padding, so the
                                              content rail lands exactly under
                                              the MetaWhisp logo (203px @1440) */
  --fx-gap: clamp(24px, 3vw, 44px);        /* column gap               */
  --fx-sec: clamp(72px, 9vw, 128px);       /* section rhythm           */
}
.fx .fx-wrap { max-width: var(--fx-max); margin-inline: auto; padding-inline: var(--fx-gut); }
.fx .breadcrumbs { max-width: var(--fx-max) !important; margin: 0 auto !important;
  padding: 1.4rem var(--fx-gut) 0 !important; }
.fx .fx-chapter { margin-top: var(--fx-sec); }

/* chapter number sits ABOVE the heading (Linear's FIG pattern) so the
   heading itself starts on the rail instead of being pushed by flex gap */
.fx .fx-kicker { display: block; margin-bottom: 14px; }
.fx .fx-num { display: block; margin-bottom: 7px; }

/* hero: sub-copy and claim chips on fixed grid lines, not floating flex */
.fx .fx-herorow { display: grid; grid-template-columns: repeat(12, 1fr);
  gap: var(--fx-gap); align-items: end; margin-top: 1.6rem; }
.fx .fx-herorow > p { grid-column: 1 / 7; max-width: none; margin: 0; }
.fx .fx-herorow > .fx-claims { grid-column: 7 / 13; margin: 0; align-content: end; }

/* splits and bento share the same 12-col grid → second column is a rail too */
.fx .fx-split { grid-template-columns: repeat(12, 1fr); gap: var(--fx-gap); }
.fx .fx-split > *:first-child { grid-column: 1 / 6; }
.fx .fx-split > *:last-child  { grid-column: 6 / 13; }
.fx .fx-split.rev > *:first-child { grid-column: 1 / 8; }
.fx .fx-split.rev > *:last-child  { grid-column: 8 / 13; }
.fx .fx-bento { grid-template-columns: repeat(12, 1fr); gap: var(--fx-gap); }
.fx .fx-cell     { grid-column: span 4; }
.fx .fx-cell.w3  { grid-column: span 6; }
.fx .fx-cell.w4  { grid-column: span 8; }
.fx .fx-cell.w6  { grid-column: span 12; }

/* full-width elements stop truncating short of the rail */
.fx .comparison-table { max-width: none; }
.fx .comparison-table table { width: 100%; }
.fx .faq-item { max-width: 74ch; }
.fx .section-title { text-align: left; }
.fx .fx-cap { text-align: left; }

@media (max-width: 900px) {
  .fx .fx-herorow > p, .fx .fx-herorow > .fx-claims,
  .fx .fx-split > *:first-child, .fx .fx-split > *:last-child,
  .fx .fx-split.rev > *:first-child, .fx .fx-split.rev > *:last-child,
  .fx .fx-cell, .fx .fx-cell.w3, .fx .fx-cell.w4 { grid-column: 1 / -1; }
}

/* ════════════════════════════════════════════════════════════════════
   LAYOUT v3 — full-page review fixes.
   Findings on the 1440 audit: (1) chapter headings + ledes occupied only
   40-56% of the row, leaving the right half empty; (2) FAQ ran 1431px as
   a single 731px column — a text wall with dead space beside it; (3) the
   section-divider sat at L120/W1200, off the 203 rail; (4) the comparison
   table gave our own column no visual weight; (5) rhythm around FAQ/CTA
   was 96/48/12/48 instead of the systematic 128.
   ════════════════════════════════════════════════════════════════════ */

/* 1 — chapter header becomes a two-column row: heading left, lede right.
       Fills the line instead of trailing off into empty space. */
.fx .fx-chapter { display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 0 var(--fx-gap); align-items: end; }
.fx .fx-chapter > * { grid-column: 1 / -1; }
.fx .fx-chapter > .fx-kicker { grid-column: 1 / 8; margin-bottom: 0; }
.fx .fx-chapter > .fx-lede   { grid-column: 8 / 13; margin: 0 0 4px; max-width: none;
  font-size: .97rem; }
.fx .fx-chapter > .fx-kicker + .fx-lede + * { margin-top: 2.4rem; }
.fx .fx-chapter > .fx-kicker + * { margin-top: 2.4rem; }

/* 2 — FAQ as a two-column grid: halves the block, uses the right side */
.fx .fx-faq { display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem var(--fx-gap); align-items: start; }
.fx .fx-faq > .section-title, .fx .fx-faq > .fx-kicker { grid-column: 1 / -1; }
.fx .fx-faq .faq-item { max-width: none; margin: 0; }

/* 3 — dividers were off-rail; chapter rhythm already separates sections */
.fx .section-divider { display: none; }

/* 4 — give our own column weight so the comparison reads at a glance */
.fx .comparison-table th:nth-child(2),
.fx .comparison-table td:nth-child(2) {
  background: rgba(74, 222, 128, .045);
  color: var(--fx-ink);
  box-shadow: inset 1px 0 0 rgba(74,222,128,.18), inset -1px 0 0 rgba(74,222,128,.18);
}
.fx .comparison-table th:nth-child(2) { box-shadow: inset 1px 0 0 rgba(74,222,128,.18),
  inset -1px 0 0 rgba(74,222,128,.18), inset 0 1px 0 rgba(74,222,128,.28); }

/* 5 — one rhythm for every section, including FAQ and CTA */
.fx .fx-faq, .fx .fx-cta { margin-top: var(--fx-sec); }
.fx .fx-cta { padding-bottom: var(--fx-sec); }

@media (max-width: 900px) {
  .fx .fx-chapter > .fx-kicker, .fx .fx-chapter > .fx-lede { grid-column: 1 / -1; }
  .fx .fx-chapter > .fx-lede { margin: .9rem 0 0; }
  .fx .fx-faq { grid-template-columns: 1fr; }
}

/* FAQ: answer was indented 24px from its own question — one card, two rails. */
.fx .fx-faq .faq-item p { padding-left: 0; }
/* Cards size to their own content. Forcing equal heights (height:100% +
   stretch) padded short answers with 100px of dead space under the text —
   worse than the ragged bottom edge it was meant to fix. */
.fx .fx-faq { align-items: start; }
.fx .fx-faq .faq-item { height: auto; }

/* Layout-owned blocks (About/AI-context + footer) ship their own rails —
   252 and 168 against our 203 — so the page ends on three vertical lines.
   Pull them onto the content rail, scoped to fx pages only so the blog and
   the older feature pages keep their existing geometry untouched. */
.fx-page .ai-context, .fx-page footer { max-width: none !important;
  padding-left: 0 !important; padding-right: 0 !important; }
.fx-page .ai-context-inner,
.fx-page footer > div { max-width: var(--fx-max, 1200px) !important;
  margin-inline: auto !important; padding-inline: var(--fx-gut, clamp(24px,5.8vw,83px)) !important; }
.fx-page { --fx-max: 1200px; --fx-gut: clamp(24px, 5.8vw, 83px); }

/* ════════════════════════════════════════════════════════════════════
   SIM COMPONENTS — classes the page authors used that had NO css rule,
   so those product simulations rendered as flat unstyled text (22 class
   names, 110+ usages found by audit). Same visual language as the rest
   of the kit: no new colours, no new type scale.
   ════════════════════════════════════════════════════════════════════ */

/* comparison verdicts (used in every comparison table) */
.fx .comp-yes { color: var(--fx-grn); }
.fx .comp-no  { color: var(--fx-mut); }

/* second brain — memories, sources, goals */
.fx .fx-tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fx .fx-tri > * { min-width: 0; }
.fx .fx-memgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.fx .fx-mem { border: 1px solid var(--fx-line); border-radius: 10px; padding: 11px 13px;
  background: #0f110f; font-size: .84rem; color: #d6d8d6; line-height: 1.5; }
.fx .fx-mem .src, .fx .src { display: block; margin-top: 6px; font-family: ui-monospace, monospace;
  font-size: .7rem; letter-spacing: .04em; color: var(--fx-mut); text-transform: none; }
.fx .fx-mem.gone { opacity: .55; }
.fx .fx-mem.gone > :first-child { text-decoration: line-through; text-decoration-color: var(--fx-mut); }
.fx .fx-goal { border: 1px solid var(--fx-line); border-radius: 10px; padding: 12px 13px; background: #0f110f; }
.fx .fx-goal-bar { position: relative; height: 5px; border-radius: 3px; background: #1b1f1b;
  margin: 9px 0 7px; overflow: hidden; }
.fx .fx-goal-bar::after { content: ''; position: absolute; inset: 0 22% 0 0; background: var(--fx-grn);
  border-radius: 3px; }

/* metachat — actions, undo, citation */
.fx .fx-act { display: flex; align-items: center; gap: 10px; padding: 9px 0;
  font-size: .85rem; color: var(--fx-grn); }
.fx .fx-undo { font-family: var(--font-heading); font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fx-dim); border: 1px solid var(--fx-line);
  border-radius: 9999px; padding: 3px 10px; margin-left: auto; }
.fx .fx-cite { display: block; margin-top: 5px; font-family: ui-monospace, monospace;
  font-size: .68rem; color: var(--fx-mut); letter-spacing: .03em; }
.fx .fx-row .meta, .fx .meta { font-family: ui-monospace, monospace; font-size: .68rem;
  color: var(--fx-mut); letter-spacing: .03em; }

/* no-bot page — participant lists */
.fx .fx-plist { display: flex; flex-direction: column; }
.fx .fx-prow { display: flex; align-items: center; gap: 11px; padding: 10px 2px;
  border-bottom: 1px solid #131513; font-size: .86rem; color: #d6d8d6; }
.fx .fx-prow:last-child { border-bottom: 0; }
.fx .fx-av { flex: 0 0 26px; height: 26px; border-radius: 50%; background: #1a1d1a;
  display: grid; place-items: center; font-family: var(--font-heading); font-size: .6rem;
  letter-spacing: .04em; color: var(--fx-dim); }
.fx .fx-prole { margin-left: auto; font-family: var(--font-heading); font-size: .6rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fx-mut); }
.fx .fx-prow.bot { color: var(--fx-amb); }
.fx .fx-prow.bot .fx-av { background: rgba(251,191,36,.12); color: var(--fx-amb); }
.fx .fx-prow.bot .fx-prole { color: var(--fx-amb); }

/* hub — dictation line sim + tile links */
.fx .hub-line { border: 1px solid var(--fx-line); border-radius: 10px; padding: 11px 13px;
  background: #0f110f; font-size: .84rem; color: #d6d8d6; line-height: 1.5; }
.fx .hub-cur { display: inline-block; width: 2px; height: 1em; background: var(--fx-grn);
  vertical-align: -2px; margin-left: 2px; }
.fx .hub-hint { display: flex; align-items: center; gap: 8px; margin-top: 9px;
  font-family: ui-monospace, monospace; font-size: .7rem; color: var(--fx-mut); letter-spacing: .04em; }
.fx .hub-more { display: inline-block; margin-top: 10px; font-size: .8rem; color: var(--fx-grn); }

@media (max-width: 900px) {
  .fx .fx-tri, .fx .fx-memgrid { grid-template-columns: 1fr; }
}

/* Direct children of a bento that carry no .fx-cell class were falling back to
   grid-column:auto — one 46px column out of twelve — which squeezed whole
   product windows into a 226px sliver. Give them a sane default span. */
.fx .fx-bento > *:not(.fx-cell) { grid-column: span 6; min-width: 0; }
.fx .fx-bento > .fx-win { grid-column: span 6; }

/* Audit flagged 18 text nodes at 9.6–10.9px — below the readable floor for UI
   labels. Raise the smallest tiers to 11px. Scale/型 unchanged elsewhere. */
.fx .fx-chip { font-size: .69rem; }          /* was .6rem  → 9.6px  */
.fx .fx-track-tag { font-size: .7rem; }      /* was .64rem → 10.2px */
.fx .fx-recap h5 { font-size: .7rem; }       /* was .64rem → 10.2px */
.fx .fx-who { font-size: .69rem; }           /* was .66rem → 10.6px */
.fx .fx-tabs span { font-size: .69rem; }
.fx .fx-bar span { font-size: .7rem; }
.fx .fx-av { font-size: .64rem; }
.fx .fx-prole, .fx .fx-undo, .fx .fx-hintcard .tag { font-size: .66rem; }

/* Grid default (align-items:stretch) pulled short bento tiles up to the tallest
   sibling's height, leaving up to 150px of dead space under their content.
   Tiles size to what's in them. */
.fx .fx-bento { align-items: start; }

/* .src inside .fx-goal inherited a smaller parent size (10.08px). Pin it. */
.fx .fx-goal .src { font-size: .7rem; }

/* .faq-item in blog.css is built for <details><summary> accordions: zero padding
   on the card itself, padding living on summary/inner. Our pages use plain
   h4 + p, so the card had no inner padding and the last <p> kept its 19.2px
   bottom margin — text touching the top border, a gap under the last line. */
.fx .fx-faq .faq-item { padding: 1.15rem 1.35rem 1.25rem; }
.fx .fx-faq .faq-item > *:last-child { margin-bottom: 0; }
.fx .fx-faq .faq-item h4 { margin-top: 0; margin-bottom: .5rem; }

/* ════════════════════════════════════════════════════════════════════
   ANSWERS — replaces the FAQ card wall.
   Why the wall failed: 7 open cards = ~500 words of flat grey; two columns
   broke the reading order of what is inherently a sequential list; the
   verdict ("Never", "No", "Free") drowned inside the paragraph; and it
   repeated what the chapters above already said.
   This reads as one column, verdict-first: the eye lands on the answer
   word, then the sentence explains it. Nothing to click open, nothing
   hidden from crawlers, FAQPage JSON-LD untouched.
   ════════════════════════════════════════════════════════════════════ */
.fx .fx-answers { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fx-line); }
.fx .fx-answers > li { display: grid; grid-template-columns: minmax(120px, 1.6fr) minmax(0, 6fr);
  gap: var(--fx-gap); padding: 1.6rem 0; border-bottom: 1px solid var(--fx-line); align-items: start; }
.fx .fx-verdict { font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.25rem, 2.1vw, 1.75rem); line-height: 1.1; letter-spacing: -.01em;
  color: var(--fx-grn); }
.fx .fx-verdict.warn { color: var(--fx-amb); }
.fx .fx-verdict small { display: block; margin-top: 7px; font-family: ui-monospace, monospace;
  font-size: .7rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fx-mut); }
.fx .fx-answers h4 { margin: 0 0 6px; font-family: var(--font-heading); font-weight: 600;
  font-size: 1rem; color: var(--fx-ink); }
.fx .fx-answers p { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--fx-dim); max-width: 68ch; }
.fx .fx-answers a { color: var(--fx-grn); }
@media (max-width: 760px) {
  .fx .fx-answers > li { grid-template-columns: 1fr; gap: .6rem; padding: 1.3rem 0; }
  .fx .fx-verdict { font-size: 1.15rem; }
  .fx .fx-verdict small { display: inline; margin-left: 10px; }
}

/* ════════════════════════════════════════════════════════════════════
   LIGHT — per Kimi K3 Max's review of this page: "нет света, поэтому
   плоско. Чистый #000, все карточки — одинаковые 1px hairline-бордеры,
   зелёный существует только как цвет текста, никогда — как свет."
   Adds a light source: gradient borders, top inner highlight, radial glow
   behind the hero mock and the CTA. Same palette, nothing recoloured.
   ════════════════════════════════════════════════════════════════════ */

/* gradient border + top highlight instead of a flat hairline */
.fx .fx-win,
.fx .fx-cell,
.fx .fx-hintcard {
  border: 1px solid transparent;
  background:
    linear-gradient(#0d0e0d, #0d0e0d) padding-box,
    linear-gradient(180deg, rgba(74,222,128,.22), rgba(74,222,128,.02) 55%, rgba(255,255,255,.04)) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 24px 60px rgba(0,0,0,.55);
}
.fx .fx-mem, .fx .fx-goal, .fx .hub-line {
  border: 1px solid transparent;
  background:
    linear-gradient(#0f110f, #0f110f) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

/* the room the objects sit in: a soft green light behind the hero mock */
.fx .fx-heroshot, .fx .fx-wrap > .fx-win { position: relative; }
.fx .fx-wrap > .fx-win::before {
  content: ''; position: absolute; inset: -18% -6% auto -6%; height: 62%;
  background: radial-gradient(60% 100% at 50% 0%, rgba(74,222,128,.10), transparent 70%);
  filter: blur(20px); pointer-events: none; z-index: -1;
}
/* and one under the closing CTA */
.fx .fx-cta { position: relative; }
.fx .fx-cta::before {
  content: ''; position: absolute; left: 50%; top: -10%; width: min(780px, 80%); height: 260px;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(74,222,128,.09), transparent 72%);
  filter: blur(26px); pointer-events: none; z-index: 0;
}
.fx .fx-cta > * { position: relative; z-index: 1; }

/* key numbers stop being flat text and start emitting */
.fx .fx-claims b, .fx .fx-verdict { text-shadow: 0 0 22px rgba(74,222,128,.32); }
.fx .fx-verdict.warn { text-shadow: 0 0 22px rgba(251,191,36,.28); }

/* the live dot actually pulses */
@keyframes fx-pulse { 0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(74,222,128,.45); }
                      50% { opacity:.72; box-shadow:0 0 0 5px rgba(74,222,128,0); } }
.fx .fx-dot, .fx .fx-live .fx-dot { animation: fx-pulse 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .fx .fx-dot { animation: none; } }

/* section headings get a hair of light so they read as lit, not painted */
.fx .fx-kicker h2 { text-shadow: 0 1px 24px rgba(255,255,255,.07); }

/* ════════════════════════════════════════════════════════════════════
   WISPR-FLOW PLAYBOOK, our palette.
   What their page does that ours didn't: one idea per screen, a
   before/after demo as the SECOND thing you see (raw speech vs finished
   text — value legible in one second), and headlines at 96px instead of
   35px. Same black/green language here; only scale and staging change.
   ════════════════════════════════════════════════════════════════════ */

/* type scale: their h1 is 96px, ours was 57px max */
.fx h1 { font-size: clamp(2.6rem, 7vw, 5rem) !important; line-height: 1.02 !important;
  letter-spacing: -.03em !important; }
.fx .fx-kicker h2 { font-size: clamp(1.9rem, 4.4vw, 3.1rem); letter-spacing: -.02em; line-height: 1.06; }
.fx .fx-lede { font-size: 1.05rem; }

/* ── the before/after demo ─────────────────────────────────────────── */
.fx-demo { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--fx-gap); align-items: stretch; }
.fx-demo > * { grid-column: span 6; }
.fx-demo-side { border: 1px solid transparent; border-radius: 16px; padding: 22px 24px 24px;
  background: linear-gradient(#0c0d0c,#0c0d0c) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)) border-box; }
.fx-demo-side.out {
  background: linear-gradient(#0d100d,#0d100d) padding-box,
    linear-gradient(180deg, rgba(74,222,128,.3), rgba(74,222,128,.03)) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 26px 60px rgba(0,0,0,.5); }
.fx-demo-tag { font-family: ui-monospace, monospace; font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fx-mut); margin-bottom: 14px; display: flex; gap: 9px; align-items: center; }
.fx-demo-side.out .fx-demo-tag { color: var(--fx-grn); }
.fx-raw { font-size: .93rem; line-height: 1.75; color: #7e847e; }
.fx-raw i { font-style: normal; color: #4a4f4a; }          /* filler words fade out */
.fx-demo-arrow { grid-column: 1 / -1; display: flex; justify-content: center; align-items: center;
  gap: 12px; color: var(--fx-mut); font-family: ui-monospace, monospace; font-size: .7rem;
  letter-spacing: .14em; text-transform: uppercase; padding: 4px 0; }
.fx-demo-arrow::before, .fx-demo-arrow::after { content: ''; height: 1px; width: 70px;
  background: linear-gradient(90deg, transparent, var(--fx-line)); }
.fx-demo-arrow::after { background: linear-gradient(270deg, transparent, var(--fx-line)); }

@media (max-width: 900px) { .fx-demo > * { grid-column: 1 / -1; } }