// Marketing sections — content for each navigable destination
const sectionCSS = `
/* ── Overview hero ── */
.hero-grid {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px;
  align-items: start; margin-bottom: 40px;
}
@media (max-width: 1080px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-bullets { display: grid; gap: 10px; margin-top: 18px; padding-top: 22px; border-top: 1px solid var(--line); }
.hero-bullet {
  display: grid; grid-template-columns: 16px 1fr; gap: 14px;
  font-size: 14px; color: var(--steel); align-items: baseline;
}
.hero-bullet .mark { font-family: var(--mono); color: var(--cyan); font-size: 12px; }
.hero-bullet b { color: var(--ink); font-weight: 600; }

/* Diagnostic visual */
.diag {
  background: linear-gradient(180deg, rgba(20,40,56,0.5), rgba(16,31,44,0.85));
  border: 1px solid rgba(139,211,234,0.16); border-radius: 14px;
  padding: 22px; font-family: var(--mono); font-size: 11.5px; position: relative;
  box-shadow: 0 18px 48px rgba(0,0,0,0.18);
}
.diag-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(139,211,234,0.1);
}
.diag-head .live { display: inline-flex; align-items: center; gap: 6px; color: var(--green); }
.diag-head .live::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 8px var(--green);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(1.4); }
}
.diag-row {
  display: grid; grid-template-columns: 110px 1fr 70px; gap: 12px;
  align-items: center; padding: 8px 0; border-bottom: 1px dashed rgba(139,211,234,0.08);
}
.diag-row:last-child { border-bottom: 0; }
.diag-row .lbl { color: var(--muted); }
.diag-row .bar { height: 6px; border-radius: 3px; background: rgba(139,211,234,0.1); position: relative; overflow: hidden; }
.diag-row .bar > i { position: absolute; inset: 0; right: auto; border-radius: 3px; }
.diag-row .val { text-align: right; }
.bar-cyan > i  { background: linear-gradient(90deg, var(--cyan), var(--haze)); }
.bar-green > i { background: var(--green); }
.bar-amber > i { background: var(--amber); }
.bar-rose > i  { background: var(--rose); }
.val-cyan  { color: var(--cyan); }
.val-green { color: var(--green); }
.val-amber { color: var(--amber); }
.val-rose  { color: var(--rose); }
.diag-footer {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(139,211,234,0.1);
  display: flex; justify-content: space-between; font-size: 10px;
  color: var(--muted); letter-spacing: 0.06em;
}
.diag-footer .deep-link {
  color: var(--cyan); cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: rgba(0,180,216,0.4);
}

/* ── Modules ── */
.modules-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 8px 0 24px; }
@media (max-width: 880px) { .modules-grid { grid-template-columns: 1fr; } }
.module-card .mod-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.module-card .mod-tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 4px;
  border: 1px solid; background: rgba(255,255,255,0.02);
}
.tag-cyan   { color: var(--cyan);   border-color: rgba(0,180,216,0.4)   !important; background: rgba(0,180,216,0.06)   !important; }
.tag-violet { color: var(--violet); border-color: rgba(182,156,255,0.4) !important; background: rgba(182,156,255,0.06) !important; }
.tag-green  { color: var(--green);  border-color: rgba(89,217,157,0.4)  !important; background: rgba(89,217,157,0.06)  !important; }
.tag-amber  { color: var(--amber);  border-color: rgba(255,189,90,0.4)  !important; background: rgba(255,189,90,0.06)  !important; }
.module-card .mod-num { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.module-card h3 { font-family: var(--serif); font-weight: 600; font-size: 26px; line-height: 1.15; margin-bottom: 6px; color: var(--ink); }
.module-card .mod-desc { font-size: 14px; color: var(--muted); margin-bottom: 16px; }
.module-card .mod-output { font-family: var(--mono); font-size: 11px; color: var(--green); padding-top: 12px; border-top: 1px dashed rgba(89,217,157,0.18); }
.module-card .mod-output b { color: var(--ink); font-weight: 500; }

/* ── Storyline stepper ── */
.storyline {
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(9,21,31,0.6); border: 1px solid rgba(139,211,234,0.18);
  border-radius: 12px; overflow: hidden; margin: 22px 0 16px;
}
@media (max-width: 1080px) { .storyline { grid-template-columns: repeat(2, 1fr); } }
.story-step { padding: 22px 20px; min-height: 220px; border-left: 1px solid rgba(139,211,234,0.16); position: relative; }
.story-step:first-child { border-left: 0; }
.story-step .step-num { font-family: var(--mono); font-size: 11px; color: var(--cyan); letter-spacing: 0.18em; margin-bottom: 12px; }
.story-step .step-h { font-family: var(--serif); font-weight: 600; font-size: 19px; color: var(--ink); margin-bottom: 6px; line-height: 1.2; }
.story-step .step-body { font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.story-step .step-foot { position: absolute; bottom: 16px; left: 20px; right: 20px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--haze); opacity: 0.85; }

/* ── Comparison matrix ── */
.matrix { background: rgba(9,21,31,0.66); border: 1px solid rgba(139,211,234,0.18); border-radius: 12px; overflow: hidden; margin: 18px 0 8px; font-size: 13px; }
.matrix-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); }
.matrix-grid > * { padding: 14px 16px; border-bottom: 1px solid rgba(139,211,234,0.14); border-right: 1px solid rgba(139,211,234,0.14); }
.matrix-grid > *:nth-child(4n) { border-right: 0; }
.matrix-grid .mh { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); background: rgba(20,40,56,0.5); }
.matrix-grid .mh.sg { color: var(--cyan); background: linear-gradient(180deg, rgba(0,180,216,0.15), rgba(0,180,216,0.03)); text-transform: none; }
.matrix-grid .mlabel { color: var(--ink); font-weight: 500; }
.matrix-grid .mcell { color: var(--steel); text-align: center; }
.matrix-grid .mh { text-align: center; }
.matrix-grid .mlabel { text-align: left; }
.matrix-grid .mcell.sg { color: var(--ink); background: linear-gradient(180deg, rgba(0,180,216,0.08), rgba(0,180,216,0.01)); font-weight: 500; }
.matrix-grid .mcell.weak { color: var(--rose); }
.matrix-grid .mcell.mid  { color: var(--amber); }
.matrix-grid .mcell.strong { color: var(--green); }
.matrix-grid > *:nth-last-child(-n+4) { border-bottom: 0; }

/* ── Beat list ── */
.beats { background: rgba(9,21,31,0.6); border: 1px solid rgba(139,211,234,0.16); border-radius: 12px; padding: 4px 0; margin: 16px 0; }
.beat { display: grid; grid-template-columns: 56px 1fr; padding: 16px 20px; border-bottom: 1px dashed rgba(139,211,234,0.12); gap: 18px; }
.beat:last-child { border-bottom: 0; }
.beat .beat-num { font-family: var(--mono); font-size: 11px; color: var(--haze); letter-spacing: 0.15em; }
.beat .beat-title { font-family: var(--serif); font-weight: 600; font-size: 19px; color: var(--ink); margin-bottom: 4px; }
.beat .beat-body { font-size: 13.5px; color: var(--muted); }

/* ── Audience cards ── */
.audience-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 18px 0 24px; }
@media (max-width: 880px) { .audience-grid { grid-template-columns: 1fr; } }
.aud-card .aud-role { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 12px; }
.aud-card h3 { font-family: var(--serif); font-weight: 600; font-size: 22px; line-height: 1.2; margin-bottom: 8px; color: var(--ink); }
.aud-card .aud-pain { font-size: 13.5px; color: var(--muted); margin-bottom: 14px; }
.aud-card .aud-fix { font-family: var(--mono); font-size: 11px; color: var(--haze); padding-top: 12px; border-top: 1px solid rgba(139,211,234,0.12); }
.aud-card .aud-fix b { color: var(--ink); font-weight: 500; }

/* ── Outputs ── */
.outputs-list { display: grid; gap: 12px; }
.output-row {
  display: grid; grid-template-columns: 56px 1.1fr 1.6fr auto; gap: 16px; align-items: center;
  padding: 16px 20px; background: rgba(16,31,44,0.6); border: 1px solid var(--line); border-radius: 10px;
}
.output-row .o-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; color: var(--cyan); }
.output-row .o-name { font-family: var(--serif); font-weight: 600; font-size: 19px; color: var(--ink); }
.output-row .o-desc { font-size: 13px; color: var(--muted); }
.output-row .o-tag { font-family: var(--mono); font-size: 10px; padding: 3px 8px; border-radius: 4px; border: 1px solid rgba(139,211,234,0.2); color: var(--haze); background: rgba(139,211,234,0.04); letter-spacing: 0.1em; }
@media (max-width: 760px) {
  .output-row { grid-template-columns: 56px 1fr; }
  .output-row .o-desc, .output-row .o-tag { grid-column: 2; }
}

/* ── FAQ ── */
.faq-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 8px 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.faq-toolbar .ft-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.faq-chip { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 12px; border-radius: 6px; background: rgba(16,31,44,0.6); border: 1px solid var(--line); color: var(--steel); cursor: pointer; transition: color .12s, background .12s, border-color .12s; }
.faq-chip:hover { color: var(--ink); border-color: rgba(139,211,234,0.32); }
.faq-chip.on { color: var(--ink); }
.faq-chip.on.cat-all   { background: rgba(139,211,234,0.10); border-color: rgba(139,211,234,0.45); }
.faq-chip.on.cat-geo   { color: var(--cyan);   background: rgba(0,180,216,0.10);   border-color: rgba(0,180,216,0.45); }
.faq-chip.on.cat-aeo   { color: var(--green);  background: rgba(89,217,157,0.10);  border-color: rgba(89,217,157,0.45); }
.faq-chip.on.cat-ready { color: var(--violet); background: rgba(182,156,255,0.10); border-color: rgba(182,156,255,0.45); }
.faq-chip.on.cat-read  { color: var(--amber);  background: rgba(255,189,90,0.10);  border-color: rgba(255,189,90,0.45); }
.faq-chip.on.cat-tech  { color: var(--rose);   background: rgba(246,120,141,0.10); border-color: rgba(246,120,141,0.45); }
.faq-chip .ct-count { margin-left: 6px; font-size: 9px; opacity: 0.7; font-weight: 500; }

.faq-list { display: grid; gap: 10px; margin-bottom: 36px; }
.faq-row { background: rgba(16,31,44,0.6); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; transition: border-color .15s, background .15s; }
.faq-row.open { background: rgba(16,31,44,0.83); border-color: rgba(139,211,234,0.28); box-shadow: 0 12px 32px rgba(0,0,0,0.18); }
.faq-q {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center;
  padding: 16px 22px; background: none; border: 0; color: var(--ink); font-family: var(--sans);
  font-size: 15.5px; font-weight: 500; text-align: left; cursor: pointer; line-height: 1.35;
}
.faq-q:hover { background: rgba(20,40,56,0.4); }
.faq-row.open .faq-q { padding-bottom: 12px; }
.faq-cat { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; background: rgba(255,255,255,0.02); border: 1px solid; white-space: nowrap; }
.faq-cat.cat-geo   { color: var(--cyan);   border-color: rgba(0,180,216,0.45);   background: rgba(0,180,216,0.06); }
.faq-cat.cat-aeo   { color: var(--green);  border-color: rgba(89,217,157,0.45);  background: rgba(89,217,157,0.06); }
.faq-cat.cat-ready { color: var(--violet); border-color: rgba(182,156,255,0.45); background: rgba(182,156,255,0.06); }
.faq-cat.cat-read  { color: var(--amber);  border-color: rgba(255,189,90,0.45);  background: rgba(255,189,90,0.06); }
.faq-cat.cat-tech  { color: var(--rose);   border-color: rgba(246,120,141,0.45); background: rgba(246,120,141,0.06); }
.faq-q .faq-chev { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-family: var(--mono); font-size: 14px; transition: transform .2s, color .15s; }
.faq-row.open .faq-q .faq-chev { transform: rotate(45deg); color: var(--ink); }
.faq-a { padding: 0 22px 18px; font-size: 14px; color: var(--steel); line-height: 1.7; border-top: 1px dashed rgba(139,211,234,0.16); padding-top: 14px; animation: faqfade .22s ease-out both; }
@keyframes faqfade { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }
.faq-a p { color: var(--steel); margin-bottom: 12px; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a b { color: var(--ink); font-weight: 600; }
.faq-fix { margin-top: 14px; padding: 10px 14px; border-radius: 7px; background: rgba(0,180,216,0.05); border: 1px dashed rgba(0,180,216,0.3); display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; font-size: 12.5px; cursor: pointer; transition: border-color .15s, background .15s; }
.faq-fix:hover { border-color: rgba(139,211,234,0.55); background: rgba(0,180,216,0.08); }
.faq-fix .ff-tag { font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); border: 1px solid rgba(0,180,216,0.4); border-radius: 4px; padding: 2px 6px; }
.faq-fix .ff-text { color: var(--steel); }
.faq-fix .ff-text b { color: var(--ink); }
.faq-fix .ff-go { font-family: var(--mono); font-size: 10px; color: var(--haze); letter-spacing: 0.12em; }

/* Schema preview */
.schema-block { background: rgba(9,21,31,0.7); border: 1px solid rgba(139,211,234,0.18); border-radius: 12px; margin: 22px 0 28px; overflow: hidden; }
.schema-block .sb-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; background: rgba(20,40,56,0.5); border-bottom: 1px solid rgba(139,211,234,0.16); font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.schema-block .sb-head .sb-emit { color: var(--green); display: inline-flex; align-items: center; gap: 6px; }
.schema-block .sb-head .sb-emit::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); }
.schema-block pre { margin: 0; padding: 18px 22px; overflow-x: auto; font-family: var(--mono); font-size: 11.5px; line-height: 1.65; color: var(--steel); }
.schema-block .sk { color: var(--haze); }
.schema-block .sv { color: var(--green); }
.schema-block .sp { color: var(--cyan); }
.schema-block .sc { color: var(--muted); font-style: italic; }

/* ── About / founders ── */
.founders-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 6px 0 36px; }
@media (max-width: 1080px) { .founders-grid { grid-template-columns: 1fr; } }
.founder-card { padding: 28px 28px 26px; position: relative; }
.founder-portrait { width: 92px; height: 92px; border-radius: 50%; border: 1px solid rgba(139,211,234,0.3); margin-bottom: 16px; box-shadow: 0 0 0 3px rgba(0,180,216,0.14), inset 0 1px 0 rgba(255,255,255,0.18); object-fit: cover; display: block; }
.founder-card .f-role { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan); margin-bottom: 6px; }
.founder-card h3 { font-family: var(--serif); font-weight: 600; font-size: 28px; color: var(--ink); line-height: 1.1; margin-bottom: 16px; letter-spacing: -0.01em; }
.founder-card p { font-size: 14px; color: var(--steel); line-height: 1.65; margin-bottom: 12px; }
.founder-card p:last-child { margin-bottom: 0; }
.founder-card .f-links { margin-top: 16px; display: flex; gap: 14px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.founder-card .f-links a { color: var(--haze); }
.founder-card .f-links a:hover { color: var(--ink); }
.pov-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 14px 0 32px; }
@media (max-width: 1080px) { .pov-grid { grid-template-columns: 1fr; } }
.pov-card h3 { font-family: var(--serif); font-weight: 600; font-size: 22px; line-height: 1.2; margin-bottom: 12px; color: var(--ink); }
.pov-card p { font-size: 14px; color: var(--steel); line-height: 1.65; }
.pov-kicker { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--haze); margin-bottom: 8px; }
.about-contact { margin-top: 8px; padding: 22px 26px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; background: linear-gradient(160deg, rgba(0,180,216,0.12), rgba(16,31,44,0.95)); border: 1px solid rgba(0,180,216,0.32); border-radius: 14px; }
.about-contact h3 { font-family: var(--serif); font-weight: 600; font-size: 22px; color: var(--ink); margin-bottom: 6px; line-height: 1.2; }
.about-contact p { font-size: 13.5px; color: var(--steel); margin: 0; }
.about-contact .ac-email { font-family: var(--mono); font-size: 11.5px; color: var(--haze); margin-top: 8px; display: inline-block; }
.about-contact .ac-cta { font-family: var(--sans); font-weight: 600; font-size: 13.5px; padding: 11px 20px; border-radius: 7px; background: linear-gradient(180deg, #2dd4ee, var(--cyan)); color: var(--bg); border: 1px solid rgba(0,180,216,0.4); cursor: pointer; white-space: nowrap; }
@media (max-width: 760px) { .about-contact { grid-template-columns: 1fr; } }

/* ── Services / pricing ── */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0 24px; align-items: stretch; }
@media (max-width: 1080px) { .services-grid { grid-template-columns: 1fr; } }
.svc-card { display: flex; flex-direction: column; }
.svc-card.featured { border-color: rgba(0,180,216,0.4); background: linear-gradient(180deg, rgba(0,180,216,0.06), rgba(16,31,44,0.85)); }
.svc-card .svc-name { font-family: var(--serif); font-weight: 600; font-size: 24px; color: var(--ink); margin-bottom: 4px; }
.svc-card .svc-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.svc-card.featured .svc-tag { color: var(--cyan); }
.svc-card .svc-price { font-family: var(--serif); font-size: 36px; font-weight: 600; color: var(--ink); margin-bottom: 4px; letter-spacing: -0.01em; }
.svc-card .svc-price small { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-left: 4px; letter-spacing: 0.12em; }
.svc-card .svc-line { height: 1px; background: rgba(139,211,234,0.14); margin: 16px 0; }
.svc-card ul { list-style: none; }
.svc-card li { font-size: 13px; color: var(--steel); padding: 4px 0; display: grid; grid-template-columns: 14px 1fr; gap: 10px; }
.svc-card li::before { content: '✓'; color: var(--green); font-family: var(--mono); font-size: 11px; }
.svc-card .svc-cta { margin-top: auto; width: 100%; padding: 10px; border: 1px solid rgba(139,211,234,0.3); background: rgba(20,40,56,0.5); border-radius: 7px; color: var(--ink); font-family: var(--sans); font-size: 13.5px; font-weight: 500; cursor: pointer; }
.svc-card.featured .svc-cta { background: linear-gradient(180deg, #2dd4ee, var(--cyan)); color: var(--bg); border-color: rgba(0,180,216,0.4); font-weight: 600; }
.svc-card .svc-sub { font-size: 11.5px; font-family: var(--mono); letter-spacing: 0.05em; color: var(--muted); margin-top: 4px; }
.svc-card .svc-blurb { font-size: 13px; color: var(--steel); margin-bottom: 14px; line-height: 1.5; }
.svc-card.featured { position: relative; }
.svc-card .svc-flag { position: absolute; top: -10px; right: 16px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; background: linear-gradient(180deg, #2dd4ee, var(--cyan)); color: var(--bg); box-shadow: 0 6px 16px -6px rgba(0,180,216,0.6); font-weight: 600; }
.svc-tier-toggle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: rgba(11,23,34,0.6); border: 1px solid rgba(139,211,234,0.16); border-radius: 7px; padding: 3px; margin: 0 0 16px; }
.svc-tier-toggle .stt { background: transparent; border: 0; font-family: var(--sans); font-size: 11.5px; color: var(--steel); padding: 7px 4px; border-radius: 5px; cursor: pointer; letter-spacing: 0.02em; transition: background .15s, color .15s; }
.svc-tier-toggle .stt:hover { color: var(--ink); }
.svc-tier-toggle .stt.on { background: rgba(0,180,216,0.18); color: var(--cyan); font-weight: 600; }
.svc-card .svc-cta.ghost { background: rgba(20,40,56,0.5); color: var(--ink); border: 1px solid rgba(139,211,234,0.3); font-weight: 500; }
.svc-credit { margin-top: 24px; padding: 14px 18px; display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; background: rgba(89,217,157,0.05); border: 1px dashed rgba(89,217,157,0.32); border-radius: 10px; cursor: pointer; }
.svc-credit:hover { border-color: rgba(89,217,157,0.55); background: rgba(89,217,157,0.08); }
.svc-credit .db-tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); border: 1px solid rgba(89,217,157,0.4); border-radius: 4px; padding: 3px 7px; }
.svc-credit .db-text { font-size: 13.5px; color: var(--steel); }
.svc-credit .db-text b { color: var(--ink); }
.svc-credit .db-go { font-family: var(--mono); font-size: 11px; color: var(--green); letter-spacing: 0.12em; }
.soon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0 8px; }
@media (max-width: 880px) { .soon-grid { grid-template-columns: 1fr; } }
.soon-card { background: rgba(16,31,44,0.55); border: 1px solid var(--line); }
.soon-card .soon-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--violet); margin-bottom: 10px; }
.soon-card .soon-name { font-family: var(--serif); font-weight: 600; font-size: 22px; color: var(--ink); margin-bottom: 8px; }
.soon-card p { font-size: 13px; color: var(--muted); margin-bottom: 14px; line-height: 1.55; }

/* ── Get started ── */
.start-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 20px; }
@media (max-width: 880px) { .start-grid { grid-template-columns: 1fr; } }
.start-checks { margin: 28px 0 24px; display: grid; gap: 10px; }
.start-check {
  display: grid; grid-template-columns: 20px 1fr; gap: 14px;
  align-items: baseline; font-size: 14px; color: var(--steel);
  padding: 12px 16px; background: rgba(16,31,44,0.5);
  border: 1px solid var(--line); border-radius: 8px;
}
.start-check .sc-mark { font-family: var(--mono); font-size: 11px; color: var(--green); }
.start-check b { color: var(--ink); }
.start-callout {
  margin: 8px 0 28px; padding: 14px 18px;
  background: rgba(0,180,216,0.05); border: 1px dashed rgba(0,180,216,0.3); border-radius: 8px;
  font-size: 13.5px; color: var(--steel); line-height: 1.6;
}
.start-callout b { color: var(--ink); }
.start-card { padding: 28px; background: rgba(16,31,44,0.83); border: 1px solid rgba(139,211,234,0.16); border-radius: 14px; position: relative; overflow: hidden; }
.start-card.primary { background: linear-gradient(160deg, rgba(0,180,216,0.16), rgba(16,31,44,0.95)); border-color: rgba(0,180,216,0.4); }
.start-card h3 { font-family: var(--serif); font-weight: 600; font-size: 26px; color: var(--ink); margin-bottom: 10px; line-height: 1.2; }
.start-card p { font-size: 14px; color: var(--steel); margin-bottom: 18px; line-height: 1.6; }
.start-card .scta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 7px; font-family: var(--sans); font-weight: 600; font-size: 13.5px; cursor: pointer; border: 1px solid rgba(139,211,234,0.3); background: rgba(20,40,56,0.5); color: var(--ink); }
.start-card.primary .scta { background: linear-gradient(180deg, #2dd4ee, var(--cyan)); color: var(--bg); border-color: rgba(0,180,216,0.4); }
.start-card .scta-meta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; color: var(--muted); margin-top: 14px; }

/* ── Docs bridge ── */
.docs-bridge { margin-top: 28px; padding: 16px 20px; border-radius: 10px; border: 1px dashed rgba(139,211,234,0.32); background: rgba(0,180,216,0.04); display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; cursor: pointer; transition: border-color .15s, background .15s; }
.docs-bridge:hover { border-color: rgba(139,211,234,0.55); background: rgba(0,180,216,0.07); }
.docs-bridge .db-tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); border: 1px solid rgba(0,180,216,0.3); border-radius: 4px; padding: 3px 7px; }
.docs-bridge .db-text { font-size: 13.5px; color: var(--steel); }
.docs-bridge .db-text b { color: var(--ink); }
.docs-bridge .db-go { font-family: var(--mono); font-size: 11px; color: var(--haze); letter-spacing: 0.12em; }
@media (max-width: 640px) { .docs-bridge { grid-template-columns: 1fr; gap: 10px; } .docs-bridge .db-go { text-align: right; } }

/* ── Concepts (folded-in docs content) ── */
.concepts-toc {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px;
  margin: 4px 0 32px; padding-bottom: 22px; border-bottom: 1px solid var(--line);
}
.concepts-toc a {
  display: block; padding: 12px 14px; border-radius: 8px;
  background: rgba(16,31,44,0.5); border: 1px solid var(--line);
  text-decoration: none; transition: border-color .15s, transform .15s;
}
.concepts-toc a:hover { border-color: rgba(139,211,234,0.45); transform: translateY(-1px); }
.concepts-toc .ct-num { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; display: block; margin-bottom: 4px; }
.concepts-toc .ct-num.cat-geo   { color: var(--cyan); }
.concepts-toc .ct-num.cat-aeo   { color: var(--green); }
.concepts-toc .ct-num.cat-ready { color: var(--violet); }
.concepts-toc .ct-num.cat-llms  { color: var(--amber); }
.concepts-toc .ct-num.cat-loop  { color: var(--rose); }
.concepts-toc .ct-name { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--ink); }

.concept-card { padding: 28px 30px; margin-bottom: 16px; scroll-margin-top: 80px; width: 100%; box-sizing: border-box; }
.concept-card .cc-eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 10px; display: inline-flex; align-items: center; gap: 10px;
}
.concept-card .cc-eyebrow .cc-num { font-family: var(--mono); font-size: 10px; opacity: 0.6; }
.concept-card.accent-cyan   .cc-eyebrow { color: var(--cyan); }
.concept-card.accent-green  .cc-eyebrow { color: var(--green); }
.concept-card.accent-violet .cc-eyebrow { color: var(--violet); }
.concept-card.accent-amber  .cc-eyebrow { color: var(--amber); }
.concept-card.accent-rose   .cc-eyebrow { color: var(--rose); }
.concept-card h3 { font-family: var(--serif); font-weight: 600; font-size: 30px; line-height: 1.12; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 14px; }
.concept-card p { font-size: 14.5px; color: var(--steel); line-height: 1.7; margin-bottom: 12px; max-width: none; width: 100%; }
.concept-card p:last-child { margin-bottom: 0; }
.concept-card p b { color: var(--ink); font-weight: 600; }
.concept-card ul { list-style: none; margin: 8px 0 12px; padding: 0; width: 100%; }
.concept-card li { display: grid; grid-template-columns: 14px 130px 1fr; column-gap: 8px; align-items: start; padding: 8px 0; font-size: 14px; color: var(--steel); line-height: 1.6; width: 100%; }
.concept-card li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; margin-top: 9px; display: block; }
@media (max-width: 480px) { .concept-card li { grid-template-columns: 14px 100px 1fr; } }
.concept-card.accent-cyan   li::before { background: var(--cyan); }
.concept-card.accent-green  li::before { background: var(--green); }
.concept-card.accent-violet li::before { background: var(--violet); }
.concept-card.accent-amber  li::before { background: var(--amber); }
.concept-card.accent-rose   li::before { background: var(--rose); }
.concept-card li b { color: var(--ink); font-weight: 600; }
.concepts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 0; }
.concepts-grid .concept-card { margin-bottom: 0; }
.concepts-divider { border: none; border-top: 1px solid rgba(255,255,255,0.08); margin: 32px 0 24px; }
@media (max-width: 768px) { .concepts-grid { grid-template-columns: 1fr; } }
.concept-card .cc-tip {
  margin-top: 16px; padding: 12px 14px; border-radius: 8px;
  background: rgba(89,217,157,0.05); border-left: 3px solid var(--green);
  font-size: 13px; color: var(--steel);
}
.concept-card .cc-tip .cc-tip-label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); margin-bottom: 4px; display: block; }
`;

if (!document.getElementById('section-css')) {
  const s = document.createElement('style');
  s.id = 'section-css'; s.textContent = sectionCSS;
  document.head.appendChild(s);
}

/* ── FAQ data (with id slugs and plain-text answers for JSON-LD) ─────── */
const FAQ_DATA = [
  {
    id: 'improve-geo-performance',
    cat: 'geo', catLabel: 'GEO',
    q: "How do I improve my website's GEO performance for AI-generated search results?",
    text: "Start by auditing whether your brand appears in relevant AI-generated answers, then repair the pages that lack clear entities, extractable answers, citations, and topical depth. GEO improvement depends on making authoritative content easy for generative systems to retrieve, summarize, and attribute. The work splits into two failure modes: retrieval gaps (the engine never fetched the right page) and interpretation gaps (it fetched and misread). They need different fixes.",
    a: <>
      <p>Start by <b>auditing whether your brand appears in relevant AI-generated answers</b>, then repair the pages that lack clear entities, extractable answers, citations, and topical depth.</p>
      <p>GEO improvement depends on making authoritative content easy for generative systems to retrieve, summarize, and attribute. The work splits into two failure modes: <b>retrieval gaps</b> (the engine never fetched the right page) and <b>interpretation gaps</b> (it fetched and misread). They need different fixes.</p>
    </>,
    fix: { tag: 'how SurfaceGX repairs this', text: <>The <b>Surface Audit</b> module benchmarks visibility across AI engines and produces a prioritized repair plan.</>, target: 'modules' },
  },
  {
    id: 'improve-aeo-citations',
    cat: 'aeo', catLabel: 'AEO',
    q: "How can my company improve AEO so answer engines cite our content?",
    text: "Build answer-first content that directly resolves specific user questions, supported by structured data, expert validation, and internal links to deeper resources. AEO works best when each page provides concise, factual, and reusable answers: a paragraph an engine can lift verbatim, backed by evidence the engine can verify.",
    a: <>
      <p>Build <b>answer-first content</b> that directly resolves specific user questions, supported by structured data, expert validation, and internal links to deeper resources.</p>
      <p>AEO works best when each page provides concise, factual, and reusable answers: a paragraph an engine can lift verbatim, backed by evidence the engine can verify.</p>
    </>,
    fix: { tag: 'how SurfaceGX repairs this', text: <>The <b>Content Brief Empower</b> module ships writer-ready briefs that target each engine's interpretation failure with cited evidence.</>, target: 'modules' },
  },
  {
    id: 'check-ai-readiness',
    cat: 'ready', catLabel: 'Readiness',
    q: "How do I know if my site is AI-ready for chatbots and generative search?",
    text: "Your site is AI-ready when key pages are crawlable, renderable, indexable, semantically structured, and supported by accurate schema and entity signals. Test whether important content can be extracted from the HTML without relying on blocked scripts or inaccessible assets. If a curl request doesn't return your value prop, neither does an AI engine.",
    a: <>
      <p>Your site is AI-ready when key pages are <b>crawlable, renderable, indexable, semantically structured</b>, and supported by accurate schema and entity signals.</p>
      <p>Test whether important content can be extracted from the HTML without relying on blocked scripts or inaccessible assets. If a curl request doesn't return your value prop, neither does an AI engine.</p>
    </>,
    fix: { tag: 'how SurfaceGX repairs this', text: <>The <b>Surface Audit</b> runs all five readiness checks and ships fix cards for any failures.</>, target: 'modules' },
  },
  {
    id: 'improve-ai-readability',
    cat: 'read', catLabel: 'Readability',
    q: "What changes improve my site's AI readability for LLMs and search crawlers?",
    text: "Use descriptive headings, concise definitions, schema markup, tables, FAQs, author information, and consistent terminology. Remove ambiguity by clearly connecting claims, entities, products, services, and supporting evidence. Engines reward pages that read like a structured argument, not a brochure.",
    a: <>
      <p>Use <b>descriptive headings, concise definitions, schema markup, tables, FAQs, author information, and consistent terminology</b>.</p>
      <p>Remove ambiguity by clearly connecting claims, entities, products, services, and supporting evidence. Engines reward pages that read like a structured argument, not a brochure.</p>
    </>,
    fix: { tag: 'how SurfaceGX repairs this', text: <>The <b>Engineering Handoff</b> module ships brand manifests, llms.txt, and schema patches as deployable PRs.</>, target: 'modules' },
  },
  {
    id: 'javascript-pdf-gated',
    cat: 'tech', catLabel: 'Technical',
    q: "Can AI chatbots read my site if it uses JavaScript, PDFs, or gated content?",
    text: "AI systems may miss content that is only available through heavy JavaScript, PDFs, forms, logins, or blocked resources. Publish critical information in accessible HTML and ensure crawlers are not restricted from essential page elements. SSR or hydration-safe HTML is a baseline; PDFs should be paired with HTML equivalents; gated content needs a public summary engines can ingest.",
    a: <>
      <p>AI systems may miss content that is only available through <b>heavy JavaScript, PDFs, forms, logins, or blocked resources</b>.</p>
      <p>Publish critical information in accessible HTML and ensure crawlers are not restricted from essential page elements. SSR or hydration-safe HTML is a baseline; PDFs should be paired with HTML equivalents; gated content needs a public summary engines can ingest.</p>
    </>,
    fix: { tag: 'how SurfaceGX repairs this', text: <>The <b>Engine Diagnosis</b> module pinpoints which assets your visibility-critical pages actually depend on, and which engines can't reach them.</>, target: 'modules' },
  },
  {
    id: 'improve-geo-generative-search',
    cat: 'geo', catLabel: 'GEO',
    q: "How do I improve my GEO and visibility in generative search?",
    text: "Focus on source attribution: cite authoritative data and use industry-specific terminology that aligns with the training and retrieval surfaces of major LLMs. Generative engines prefer pages with information density over keyword density. A page with three crisp definitions, two charts, and a citation outranks a page with the same word stuffed twenty times.",
    a: <>
      <p>Focus on <b>source attribution</b>: cite authoritative data and use industry-specific terminology that aligns with the training and retrieval surfaces of major LLMs.</p>
      <p>Generative engines prefer pages with information density over keyword density. A page with three crisp definitions, two charts, and a citation outranks a page with the same word stuffed twenty times.</p>
    </>,
    fix: { tag: 'how SurfaceGX repairs this', text: <>The <b>Surface Audit</b> scores source attribution against authoritative-citation weights tuned per engine.</>, target: 'modules' },
  },
  {
    id: 'improve-aeo-voice-chat',
    cat: 'aeo', catLabel: 'AEO',
    q: "How do I improve my company's AEO for voice and chat results?",
    text: "Optimize for question-based queries and supply direct, data-backed answers within your HTML to become the preferred source for LLM-generated responses. Voice and chat surfaces strongly prefer 40–60 word answers with a single supporting clause. Structure your content so the first paragraph of every section is the extractable answer.",
    a: <>
      <p>Optimize for <b>question-based queries</b> and supply direct, data-backed answers within your HTML to become the preferred source for LLM-generated responses.</p>
      <p>Voice and chat surfaces strongly prefer 40–60 word answers with a single supporting clause. Structure your content so the first paragraph of every section <i>is</i> the extractable answer.</p>
    </>,
    fix: { tag: 'how SurfaceGX repairs this', text: <>Content briefs include voice-and-chat optimized snippets per page, cited to the engine that demanded them.</>, target: 'modules' },
  },
  {
    id: 'ai-ready-next-gen-search',
    cat: 'ready', catLabel: 'Readiness',
    q: "How do I know if my site is AI-ready for the next generation of search?",
    text: "Conduct a semantic audit to ensure your content is entity-mapped and that your technical stack permits low-latency access for AI crawlers like GPTBot or OAI-SearchBot. The next generation of engines query crawl-on-demand. If your TTFB is high or you rate-limit AI user agents, you're invisible, even with perfect schema.",
    a: <>
      <p>Conduct a <b>semantic audit</b> to ensure your content is entity-mapped and that your technical stack permits low-latency access for AI crawlers like <code style={{fontFamily:'var(--mono)',color:'var(--haze)',fontSize:'12px'}}>GPTBot</code> or <code style={{fontFamily:'var(--mono)',color:'var(--haze)',fontSize:'12px'}}>OAI-SearchBot</code>.</p>
      <p>The next generation of engines query crawl-on-demand. If your TTFB is high or you rate-limit AI user agents, you're invisible, even with perfect schema.</p>
    </>,
    fix: { tag: 'how SurfaceGX repairs this', text: <>The Surface Audit explicitly tests <b>GPTBot / OAI-SearchBot / ClaudeBot / Google-Extended</b> access and latency, per page.</>, target: 'modules' },
  },
];

const CATS = [
  { id: 'all',   label: 'All' },
  { id: 'geo',   label: 'GEO' },
  { id: 'aeo',   label: 'AEO' },
  { id: 'ready', label: 'Readiness' },
  { id: 'read',  label: 'Readability' },
  { id: 'tech',  label: 'Technical' },
];

/* ── Section: Overview ────────────────────────────────────────────────── */
function SectionOverview({ setActive }) {
  return (
    <div className="section-wrap">
      <div className="page-eyebrow">Platform · Overview</div>
      <h1 className="page-title">
        AI engines are <em>misreading</em> your brand.<br/>
        Repair the input layer they read.
      </h1>
      <div className="hero-grid">
        <div>
          <p className="page-lead">
            SurfaceGX is AI visibility repair infrastructure. We verify the technical input layer
            AI engines read (fetchability, schema, headings, canonicals, robots, sitemap, llms.txt)
            and use LLMs only where model interpretation is required.
          </p>
          <div className="hero-bullets">
            <div className="hero-bullet">
              <span className="mark">01</span>
              <span><b>Diagnose</b> where the breakdown is happening across owned pages, third-party sources, and retrieval surfaces.</span>
            </div>
            <div className="hero-bullet">
              <span className="mark">02</span>
              <span><b>Separate</b> verified technical evidence from LLM interpretation. Your team knows which fixes are infrastructure and which require judgment.</span>
            </div>
            <div className="hero-bullet">
              <span className="mark">03</span>
              <span><b>Ship</b> repairs as Fix Cards, manifests, dev handoffs, and GitHub PR workflows, not screenshots.</span>
            </div>
          </div>
        </div>
        <div className="diag">
          <div className="diag-head">
            <span>brand-audit · acme.com</span>
            <span className="live">live</span>
          </div>
          <div className="diag-row">
            <span className="lbl">Fetchability</span>
            <span className="bar bar-green"><i style={{width:'94%'}}></i></span>
            <span className="val val-green">94 / 100</span>
          </div>
          <div className="diag-row">
            <span className="lbl">Schema cov.</span>
            <span className="bar bar-amber"><i style={{width:'62%'}}></i></span>
            <span className="val val-amber">62 / 100</span>
          </div>
          <div className="diag-row">
            <span className="lbl">llms.txt</span>
            <span className="bar bar-rose"><i style={{width:'18%'}}></i></span>
            <span className="val val-rose">18 / 100</span>
          </div>
          <div className="diag-row">
            <span className="lbl">Canonicals</span>
            <span className="bar bar-green"><i style={{width:'88%'}}></i></span>
            <span className="val val-green">88 / 100</span>
          </div>
          <div className="diag-row">
            <span className="lbl">3p sources</span>
            <span className="bar bar-amber"><i style={{width:'54%'}}></i></span>
            <span className="val val-amber">54 / 100</span>
          </div>
          <div className="diag-row">
            <span className="lbl">Model recall</span>
            <span className="bar bar-cyan"><i style={{width:'71%'}}></i></span>
            <span className="val val-cyan">71 / 100</span>
          </div>
          <div className="diag-footer">
            <span>9 fix cards generated</span>
            <span className="deep-link" onClick={() => setActive('modules')}>view modules →</span>
          </div>
        </div>
      </div>

      <h2 className="section-h">The problem SurfaceGX solves</h2>
      <p className="sub">
        When someone asks an AI assistant about your category, your brand may be invisible,
        inaccurately described, or missing from the answer entirely. Traditional SEO tools and
        AEO monitoring dashboards were not built to repair this. <b style={{color:'var(--ink)'}}>Tracking the output
        does not fix the input layer.</b>
      </p>

      <div className="docs-bridge" onClick={() => setActive('concepts')}>
        <span className="db-tag">deeper read</span>
        <span className="db-text">
          Want the precise definitions of <b>GEO, AEO, retrieval surface</b> and how llms.txt
          changes ingestion? They live in Key Concepts.
        </span>
        <span className="db-go">Key Concepts →</span>
      </div>

      <PageEndNav active="overview" setActive={setActive} />
    </div>
  );
}

/* ── Section: Modules ─────────────────────────────────────────────────── */
function SectionModules({ setActive }) {
  const modules = [
    { num: '01', tag: 'Audit',   tagCls: 'cyan',   accent: 'cyan',
      title: 'Surface Audit',
      desc: 'Crawl owned pages, retrieval surfaces, and third-party mentions. Score fetchability, schema coverage, canonicals, robots/sitemap, llms.txt, and structural clarity.',
      output: 'Outputs: full evidence ledger + score matrix' },
    { num: '02', tag: 'Diagnose', tagCls: 'violet', accent: 'violet',
      title: 'Engine Diagnosis',
      desc: 'Ask the answer engines what they actually retrieved. Differentiate retrieval failures from interpretation failures using model-specific probes.',
      output: 'Outputs: model-vs-truth deltas, source heatmap' },
    { num: '03', tag: 'Empower',  tagCls: 'green',  accent: 'green',
      title: 'Content Brief Empower',
      desc: 'For interpretation gaps, generate prescriptive content briefs your writers can act on. Each brief cites the engine that misread you and why.',
      output: 'Outputs: writer-ready briefs, evidence pins' },
    { num: '04', tag: 'Repair',   tagCls: 'amber',  accent: 'amber',
      title: 'Engineering Handoff',
      desc: "For infrastructure gaps, ship Fix Cards, generated manifests, and GitHub PRs against your repos. Your engineers merge — they don't translate.",
      output: 'Outputs: Fix Cards, manifests, PR diffs' },
  ];
  return (
    <div className="section-wrap">
      <div className="page-eyebrow">Platform · Modules</div>
      <h1 className="page-title">Four modules, <em>one repair loop</em></h1>
      <p className="page-lead">
        Each module produces durable artifacts your team can act on. No dashboard-only insights.
        Every score has evidence; every recommendation has a deployable output.
      </p>

      <div className="modules-grid">
        {modules.map(m => (
          <div className={`card with-accent module-card accent-${m.accent}`} key={m.tag}>
            <div className="mod-head">
              <span className={`mod-tag tag-${m.tagCls}`}>{m.tag}</span>
              <span className="mod-num">M.{m.num}</span>
            </div>
            <h3>{m.title}</h3>
            <p className="mod-desc">{m.desc}</p>
            <div className="mod-output">→ {m.output}</div>
          </div>
        ))}
      </div>

      <div className="docs-bridge" onClick={() => setActive('concepts')}>
        <span className="db-tag">definitions</span>
        <span className="db-text">
          <b>GEO, AEO, retrieval surfaces, llms.txt</b> — the public concepts each module
          operates against live in Key Concepts.
        </span>
        <span className="db-go">Key concepts →</span>
      </div>

      <PageEndNav active="modules" setActive={setActive} />
    </div>
  );
}

/* ── Section: Outputs ─────────────────────────────────────────────────── */
function SectionOutputs({ setActive }) {
  const outputs = [
    { num: 'O.01', name: 'Fix Card',       desc: "A single repair: what's broken, evidence, recommended diff, owner, effort. Filterable, exportable, mergeable.", tag: 'JSON · MD · PR' },
    { num: 'O.02', name: 'Brand Manifest', desc: 'Canonical description AI engines should read. Versioned, signed, served at /brand-manifest.json.', tag: 'JSON-LD' },
    { num: 'O.03', name: 'llms.txt',       desc: 'Generated and validated llms.txt + llms-full.txt for your domain, scoped to what engines should actually ingest.', tag: 'TEXT' },
    { num: 'O.04', name: 'GitHub PR',      desc: 'Repair patches opened directly against your repos with full evidence in the PR body. CI-friendly.', tag: 'GIT' },
    { num: 'O.05', name: 'Content Brief',  desc: "Writer-ready brief targeting one engine's interpretation failure. Includes citations, voice notes, and structure.", tag: 'MD · DOCX' },
    { num: 'O.06', name: 'Evidence Ledger',desc: 'Append-only log of every check, score, and source. Court-of-record for the program — auditable by anyone.', tag: 'JSONL' },
  ];
  return (
    <div className="section-wrap">
      <div className="page-eyebrow">Platform · Outputs</div>
      <h1 className="page-title">What it ships, <em>not what it shows</em></h1>
      <p className="page-lead">
        Dashboards report. SurfaceGX repairs. Every module produces deployable artifacts: Fix Cards,
        manifests, and PRs your team can review, version, and merge.
      </p>

      <div className="outputs-list">
        {outputs.map(o => (
          <div className="output-row" key={o.num}>
            <span className="o-num">{o.num}</span>
            <span className="o-name">{o.name}</span>
            <span className="o-desc">{o.desc}</span>
            <span className="o-tag">{o.tag}</span>
          </div>
        ))}
      </div>

      <PageEndNav active="outputs" setActive={setActive}
        docsLink={{ id: 'concepts', label: 'Key Concepts' }} />
    </div>
  );
}

/* ── Section: Storyline ───────────────────────────────────────────────── */
function SectionStoryline({ setActive }) {
  const steps = [
    { num: 'STEP 01', h: 'Evidence first',       body: 'Crawl the surfaces engines actually retrieve. Capture fetchability, schema, robots, sitemap, llms.txt as ground truth.', foot: 'no models yet' },
    { num: 'STEP 02', h: 'Ask the engines',       body: 'Query GPT, Claude, Gemini and others with brand-relevant prompts. Compare the answer to the evidence: what did they get wrong?', foot: 'model-as-witness' },
    { num: 'STEP 03', h: 'Classify the failure',  body: "Each gap is either an infrastructure failure (page wasn't fetched cleanly) or an interpretation failure (page was read but misjudged).", foot: 'infra vs interp' },
    { num: 'STEP 04', h: 'Generate the repair',   body: 'Infra failures become Fix Cards + PRs. Interp failures become content briefs. Each repair cites the engine that flagged it.', foot: 'artifacts, not advice' },
    { num: 'STEP 05', h: 'Re-scan and verify',    body: 'After deploy, re-run the same probes. Score the delta. Close the Fix Card with evidence. Repeat for the next quarter.', foot: 'measurable loop' },
  ];
  return (
    <div className="section-wrap">
      <div className="page-eyebrow">Strategy · How it works</div>
      <h1 className="page-title">A five-step <em>repair loop</em></h1>
      <p className="page-lead">
        SurfaceGX is opinionated about sequence. Evidence before model interpretation. Classification before
        recommendation. Repair before re-measurement. The loop is the product.
      </p>

      <div className="storyline">
        {steps.map(s => (
          <div className="story-step" key={s.num}>
            <div className="step-num">{s.num}</div>
            <div className="step-h">{s.h}</div>
            <div className="step-body">{s.body}</div>
            <div className="step-foot">— {s.foot}</div>
          </div>
        ))}
      </div>

      <h2 className="section-h">Why this order matters</h2>
      <div className="beats">
        <div className="beat">
          <span className="beat-num">01</span>
          <div>
            <div className="beat-title">Models can't witness their own ingestion.</div>
            <div className="beat-body">If you ask a model what it knows, you get its memory, not what's currently fetchable. Crawl first, ask second.</div>
          </div>
        </div>
        <div className="beat">
          <span className="beat-num">02</span>
          <div>
            <div className="beat-title">Interpretation gaps and infra gaps look identical from a dashboard.</div>
            <div className="beat-body">Both show "the AI got it wrong." Repairing the wrong layer wastes a quarter. Classification is the unlock.</div>
          </div>
        </div>
        <div className="beat">
          <span className="beat-num">03</span>
          <div>
            <div className="beat-title">A repair only counts when it merges.</div>
            <div className="beat-body">Insights die in dashboards. PRs ship. The platform optimizes for deployable artifacts, not screenshot-able charts.</div>
          </div>
        </div>
      </div>

      <PageEndNav active="storyline" setActive={setActive} />
    </div>
  );
}

/* ── Section: Why ─────────────────────────────────────────────────────── */
function SectionWhy({ setActive }) {
  const rows = [
    { label: 'Primary surface',           seo: 'SERP rankings',        aeo: 'AI answer mentions',   sg: 'Input layer + Answer layer' },
    { label: 'Fixes the cause',           seo: 'Partial',              aeo: 'No',                   sg: 'Yes',                       seoCls:'mid', aeoCls:'weak', sgCls:'strong' },
    { label: 'Ships deployable repairs',  seo: 'No',                   aeo: 'No',                   sg: 'Fix Cards, Manifests, PRs', seoCls:'weak', aeoCls:'weak', sgCls:'strong' },
    { label: 'Separates infra vs interp', seo: 'No',                   aeo: 'No',                   sg: 'Core to the loop',          seoCls:'weak', aeoCls:'weak', sgCls:'strong' },
    { label: 'Evidence ledger',           seo: 'Crawl Logs',           aeo: 'Mention Logs',         sg: 'Append-only, Auditable' },
    { label: 'Workflow handoff',          seo: 'Spreadsheet',          aeo: 'Dashboard',            sg: 'GitHub PR + Writer Brief',  sgCls:'strong' },
  ];
  return (
    <div className="section-wrap">
      <div className="page-eyebrow">Strategy · Why <span style={{textTransform:'none'}}>SurfaceGX</span></div>
      <h1 className="page-title">SEO ranks. AEO watches.<br/><em>SurfaceGX repairs.</em></h1>
      <p className="page-lead">
        SurfaceGX helps teams move from measurement to repair. The platform diagnoses the underlying technical, content, and authority signals that determine whether AI engines can discover, parse, trust, and cite a brand, then turns those findings into deployable fixes for marketing, SEO, and engineering teams.
      </p>

      <div className="matrix">
        <div className="matrix-grid">
          <div className="mh"></div>
          <div className="mh">SEO PLATFORMS</div>
          <div className="mh">AEO MONITORS</div>
          <div className="mh sg">SurfaceGX</div>
          {rows.map((r, i) => (
            <React.Fragment key={i}>
              <div className="mlabel">{r.label}</div>
              <div className={`mcell ${r.seoCls || ''}`}>{r.seo}</div>
              <div className={`mcell ${r.aeoCls || ''}`}>{r.aeo}</div>
              <div className={`mcell sg ${r.sgCls || ''}`}>{r.sg}</div>
            </React.Fragment>
          ))}
        </div>
      </div>

      <div className="docs-bridge" onClick={() => setActive('overview')}>
        <span className="db-tag">comparison</span>
        <span className="db-text">
          A vendor-by-vendor breakdown (Meltwater GenAI Lens, Profound, SE Ranking, AthenaHQ)
          lives in the platform overview.
        </span>
        <span className="db-go">Platform overview →</span>
      </div>

      <PageEndNav active="why" setActive={setActive} />
    </div>
  );
}

/* ── Section: Teams ───────────────────────────────────────────────────── */
function SectionTeams({ setActive }) {
  const aud = [
    { role: 'CMO / Marketing leader', cls: 'tag-cyan',   accent: 'cyan',
      title: 'Move beyond AI visibility reporting.',
      pain: "You can see you're losing mentions. You can't see where the input layer broke. Quarterly review needs a repair plan, not another dashboard.",
      fix: 'Quarterly repair plan → Fix Cards with owners, effort, and merge status.' },
    { role: 'Content lead', cls: 'tag-green', accent: 'green',
      title: 'Stop guessing what to write next.',
      pain: "AEO tools say \"you're not mentioned in answers.\" They don't tell your writers what page to rebuild or what angle to take.",
      fix: 'Engine-specific briefs → cited interpretation gaps, voice notes, structural skeleton.' },
    { role: 'SEO / Digital team', cls: 'tag-violet', accent: 'violet',
      title: 'Extend ranking work into the input layer.',
      pain: "You've already optimized crawl. Now half your traffic is mediated by AI. The work isn't the same and the tools don't cover it.",
      fix: 'Manifest + llms.txt + schema gaps shipped as PRs your dev already trusts.' },
    { role: 'Agency / Multi-brand', cls: 'tag-amber', accent: 'amber',
      title: 'Run GEO/AEO programs at scale.',
      pain: "Per-client dashboards don't compare. Your team can't demonstrate program ROI across a portfolio without a unified output format.",
      fix: 'Workspace-per-client + cross-portfolio repair ledger + white-label PRs.' },
  ];
  return (
    <div className="section-wrap">
      <div className="page-eyebrow">Go-to-market · Teams</div>
      <h1 className="page-title">Built for the teams who <em>own the fix</em></h1>
      <p className="page-lead">
        SurfaceGX is one platform with four working surfaces. Each role gets artifacts shaped for
        their workflow, not a dashboard everyone has to translate from.
      </p>

      <div className="audience-grid">
        {aud.map(a => (
          <div className={`card with-accent aud-card accent-${a.accent}`} key={a.role}>
            <div className={`aud-role ${a.cls}`}>{a.role}</div>
            <h3>{a.title}</h3>
            <p className="aud-pain">{a.pain}</p>
            <div className="aud-fix"><b>What they get →</b> {a.fix}</div>
          </div>
        ))}
      </div>

      <PageEndNav active="teams" setActive={setActive} />
    </div>
  );
}

/* ── Section: Services / pricing ──────────────────────────────────────── */
function SectionServices({ setActive }) {
  const [retainerTier, setRetainerTier] = React.useState('Standard');

  const retainer = {
    Essentials: {
      price: '$3,500', per: '/ mo',
      bullets: ['Quarterly audit refresh','Monthly Fix Cards','Async repair guidance'],
    },
    Standard: {
      price: '$5,500', per: '/ mo',
      bullets: ['Monthly audit','Fix Card delivery + implementation guidance','Biweekly working sessions','Hallucination monitoring','Narrative refresh'],
    },
    Strategic: {
      price: '$9,500', per: '/ mo',
      bullets: ['Weekly cadence','Founder-led implementation','Full-stack repair (content + technical + GitHub)','Priority access'],
    },
  };

  const free = {
    name: 'Free preview scan', tag: 'free · always',
    price: '$0', sub: 'No credit card required',
    blurb: 'See the obvious gaps before you invest in a deeper audit. Takes five minutes.',
    bullets: ['Crawler-based preview scan','Surface-level crawlability, metadata, and technical signals','llms.txt and AI agent readiness signal','AI visibility scorecard at a glance'],
    cta: 'Run your Free Scan',
  };

  const audit = {
    name: 'AI Visibility Audit', tag: 'one-time · founder-delivered',
    price: 'From $4,500', sub: 'Scoped to up to 25 priority URLs',
    blurb: 'A complete AI visibility diagnostic and repair roadmap. Founder-delivered.',
    bullets: ['Everything in the free scan','Deep hallucination scan vs. your fact sheet','Narrative alignment audit (6 dimensions)','Technical authority scoring across your domain','Buyer journey + source intelligence analysis','Content gap mapping','llms.txt + llms-full.txt generation','Fix Cards for content + engineering teams','60-min founder findings presentation'],
    cta: 'Book an AI Visibility Audit',
  };

  return (
    <div className="section-wrap">
      <div className="page-eyebrow">Go-to-market · Services</div>
      <h1 className="page-title">Start with a scan. <em>Get the fix.</em></h1>
      <p className="page-lead">
        SurfaceGX delivers through founder-led engagements. Run a free scan to see where AI engines
        are missing or misrepresenting your brand, then pick the depth of repair that fits.
      </p>

      <div className="services-grid">
        <div className="card svc-card">
          <div className="svc-tag">{free.tag}</div>
          <div className="svc-name">{free.name}</div>
          <div className="svc-price">{free.price}</div>
          <div className="svc-sub">{free.sub}</div>
          <div className="svc-line"></div>
          <p className="svc-blurb">{free.blurb}</p>
          <ul>{free.bullets.map(b => <li key={b}>{b}</li>)}</ul>
          <a href="https://portal.surfacegx.com/taster" className="svc-cta" style={{display:'block',textAlign:'center',textDecoration:'none'}}>{free.cta} →</a>
        </div>

        <div className="card svc-card">
          <div className="svc-tag">{audit.tag}</div>
          <div className="svc-name">{audit.name}</div>
          <div className="svc-price">{audit.price}</div>
          <div className="svc-sub">{audit.sub}</div>
          <div className="svc-line"></div>
          <p className="svc-blurb">{audit.blurb}</p>
          <ul>{audit.bullets.map(b => <li key={b}>{b}</li>)}</ul>
          <button className="svc-cta" onClick={() => setActive('start')}>{audit.cta} →</button>
        </div>

        <div className="card svc-card featured">
          <div className="svc-flag">Most engagements</div>
          <div className="svc-tag">monthly retainer</div>
          <div className="svc-name">Managed AI Visibility Program</div>
          <div className="svc-tier-toggle">
            {['Essentials','Standard','Strategic'].map(t => (
              <button key={t} className={`stt ${retainerTier === t ? 'on' : ''}`} onClick={() => setRetainerTier(t)}>{t}</button>
            ))}
          </div>
          <div className="svc-price">{retainer[retainerTier].price}<small>{retainer[retainerTier].per}</small></div>
          <div className="svc-sub">Ongoing repair with the founders in your corner.</div>
          <div className="svc-line"></div>
          <ul>{retainer[retainerTier].bullets.map(b => <li key={b}>{b}</li>)}</ul>
          <button className="svc-cta" onClick={() => setActive('start')}>Apply for Managed Program →</button>
        </div>
      </div>

      <div className="svc-credit">
        <span className="db-tag">credit</span>
        <div className="db-text">
          <b>Audit-to-retainer credit.</b> Apply <b>50% of your full audit fee</b> toward
          your first month of retainer if you engage within 30 days of delivery.
        </div>
        <span className="db-go">Apply →</span>
      </div>

      <h2 className="section-h">Also in motion</h2>
      <div className="soon-grid">
        <div className="card soon-card">
          <div className="soon-tag">Self-serve · coming soon</div>
          <div className="soon-name">SurfaceGX SaaS</div>
          <p>Full access to the SurfaceGX diagnostic and repair stack as a self-serve platform. Currently in final development.</p>
          <button className="svc-cta ghost">Join waitlist →</button>
        </div>
        <div className="card soon-card">
          <div className="soon-tag">Agency partner program</div>
          <div className="soon-name">White-label & co-sell</div>
          <p>Built for technical SEO, content, and PR teams that need a credible path from monitoring report to shipped infrastructure fix.</p>
          <button className="svc-cta ghost">Apply for partner access →</button>
        </div>
      </div>

      <PageEndNav active="services" setActive={setActive} />
    </div>
  );
}

/* ── Section: Get started ─────────────────────────────────────────────── */
function SectionStart({ setActive }) {
  return (
    <div className="section-wrap">
      <div className="page-eyebrow">Go-to-market · Get started</div>
      <h1 className="page-title">Where do you want to <em>start</em>?</h1>
      <p className="page-lead">
        Start with a free scan to see where AI engines are missing, misreading, or skipping your brand.
        Use it to decide whether you need a fixed-scope audit or an ongoing managed program.
      </p>

      <h2 className="section-h">What the free scan checks</h2>
      <p className="sub">The preview scan gives you a fast read on the parts of the site that most often affect AI visibility.</p>

      <div className="start-checks">
        <div className="start-check">
          <span className="sc-mark">✓</span>
          <span><b>Crawlability</b> — whether the page can be reached cleanly by AI-facing crawlers.</span>
        </div>
        <div className="start-check">
          <span className="sc-mark">✓</span>
          <span><b>Metadata and page-level signals</b> — the signals that shape how the brand is interpreted by AI engines.</span>
        </div>
        <div className="start-check">
          <span className="sc-mark">✓</span>
          <span><b>llms.txt and AI agent readiness</b>: whether the files AI engines depend on are present and correctly structured.</span>
        </div>
        <div className="start-check">
          <span className="sc-mark">✓</span>
          <span><b>AI visibility scorecard</b> — the biggest gaps surfaced first, ready to share with your team.</span>
        </div>
      </div>

      <div className="start-callout">
        If the free scan shows meaningful gaps, move into a <b>fixed-scope AI Visibility Audit</b> for deeper analysis or a <b>Managed Program</b> for ongoing remediation support.
      </div>

      <h2 className="section-h">Choose your path</h2>
      <div className="start-grid">
        <div className="start-card primary">
          <h3>Run a free Surface Audit</h3>
          <p>One URL. Full module-by-module score. Top 5 Fix Cards exportable as JSON or PR-ready
            diffs. No account required for the first run.</p>
          <a href="https://portal.surfacegx.com/taster" className="scta" style={{textDecoration:'none'}}>Run free scan →</a>
          <div className="scta-meta">avg. completion · 4–6 min</div>
        </div>
        <div className="start-card">
          <h3>Talk to the founders</h3>
          <p>Twenty minutes with Jeanine or John. They'll walk you through how the loop actually
            runs on a portfolio like yours, and what'd ship in the first 30 days.</p>
          <button className="scta" onClick={() => setActive('about')}>Book a call →</button>
          <div className="scta-meta">founder-led · ~20 min</div>
        </div>
      </div>

      <PageEndNav active="start" setActive={setActive}
        docsLink={{ id: 'concepts', label: 'Key Concepts' }} />
    </div>
  );
}

/* ── Section: About ───────────────────────────────────────────────────── */
function SectionAbout({ setActive }) {
  return (
    <div className="section-wrap">
      <div className="page-eyebrow">Company · About <span style={{textTransform:'none'}}>SurfaceGX</span></div>
      <h1 className="page-title">
        Built to repair the infrastructure<br/>
        AI engines <em>read</em>
      </h1>
      <p className="page-lead">
        SurfaceGX was founded by operators who saw the same pattern across brands: AI visibility
        problems were being measured after the fact, but the machine-readable source layer was
        still broken.
      </p>

      <h2 className="section-h">The founders</h2>
      <p className="sub">Two operators, one platform. Communications strategy meets data infrastructure.</p>

      <div className="founders-grid">
        <div className="card with-accent founder-card accent-cyan">
          <img src="/about/jeanine.jpg" alt="Jeanine Morgan" className="founder-portrait" />
          <div className="f-role">Co-founder &amp; CEO</div>
          <h3>Jeanine Morgan</h3>
          <p>Jeanine brings <b style={{color:'var(--ink)'}}>20 years of expertise in communications, media relations, and content
            strategy</b>, having built and led PR and earned media programs for some of the most
            reputation-sensitive brands in business.</p>
          <p>She envisioned and co-founded SurfaceGX after experiencing firsthand how AI was
            distorting brand narratives in ways no traditional communications measurement tool
            could detect or explain.</p>
          <div className="f-links">
            <a href="https://www.linkedin.com/in/jeanine-morgan-5955923/" target="_blank" rel="noopener noreferrer">LinkedIn ↗</a>
            <a href="mailto:jmorgan@surfacegx.com">Email ↗</a>
          </div>
        </div>

        <div className="card with-accent founder-card accent-violet">
          <img src="/about/john.jpg" alt="John Canneto" className="founder-portrait" />
          <div className="f-role">Co-founder &amp; CPO, Product Engineering</div>
          <h3>John Canneto</h3>
          <p>John leads the product architecture behind the platform's <b style={{color:'var(--ink)'}}>audit, diagnostic, and
            repair workflows</b>.</p>
          <p>John's background spans product development in AI, data infrastructure, enterprise
            access layers, machine learning visualization, and hands-on product engineering. At
            SurfaceGX, he focuses on making complex technical signals actionable for the teams
            responsible for shipping the fix.</p>
          <div className="f-links">
            <a href="https://www.linkedin.com/in/john-canneto/" target="_blank" rel="noopener noreferrer">LinkedIn ↗</a>
            <a href="mailto:john@surfacegx.com">Email ↗</a>
          </div>
        </div>
      </div>

      <h2 className="section-h">Our point of view</h2>
      <p className="sub">Two beliefs that shape every module we ship.</p>

      <div className="pov-grid">
        <div className="card with-accent pov-card accent-cyan">
          <div className="pov-kicker">POV · 01</div>
          <h3>Visibility starts before the model response.</h3>
          <p>Most AI visibility platforms help teams monitor where a brand appears in generated
            answers. SurfaceGX focuses on the layer <i>before</i> that answer exists: schema,
            crawlability, canonical signals, source authority, page structure, and AI-readable
            manifests.</p>
        </div>
        <div className="card with-accent pov-card accent-green">
          <div className="pov-kicker">POV · 02</div>
          <h3>The goal is practical repair.</h3>
          <p>Diagnose what AI systems cannot read, explain why it matters, and produce work that
            content, SEO, and engineering teams can ship. No dashboards that only document
            decline; every output is something a team can merge, publish, or hand off.</p>
        </div>
      </div>

      <h2 className="section-h">Start with a managed audit</h2>
      <div className="about-contact">
        <div>
          <h3>See what AI systems are reading today.</h3>
          <p>Use a fixed-scope audit to see what AI systems are reading today, then decide whether
            your team needs one-time remediation or an ongoing managed program.</p>
          <a href="mailto:hello@surfacegx.com" className="ac-email">hello@surfacegx.com ↗</a>
        </div>
        <button className="ac-cta" onClick={() => setActive('services')}>Request an audit →</button>
      </div>

      <PageEndNav active="about" setActive={setActive} />
    </div>
  );
}

/* ── Section: FAQ (SGX-001 implemented) ───────────────────────────────── */
function SectionFAQ({ setActive, filter, setFilter, openId, setOpenId }) {
  // SGX-001: emit FAQPage JSON-LD on mount, remove on unmount
  React.useEffect(() => {
    const existing = document.querySelector('script[type="application/ld+json"][data-emit="faq"]');
    if (existing) existing.remove();
    const schema = {
      "@context": "https://schema.org",
      "@type": "FAQPage",
      "mainEntity": FAQ_DATA.map(f => ({
        "@type": "Question",
        "name": f.q,
        "acceptedAnswer": { "@type": "Answer", "text": f.text },
      })),
    };
    const el = document.createElement('script');
    el.type = 'application/ld+json';
    el.setAttribute('data-emit', 'faq');
    el.textContent = JSON.stringify(schema, null, 2);
    document.head.appendChild(el);
    return () => {
      document.querySelector('script[type="application/ld+json"][data-emit="faq"]')?.remove();
    };
  }, []);

  const items = filter === 'all' ? FAQ_DATA : FAQ_DATA.filter(f => f.cat === filter);

  // If openId doesn't exist in current filtered list, clear it
  React.useEffect(() => {
    if (openId && !items.find(f => f.id === openId)) {
      setOpenId(null);
    }
  }, [filter]);

  const counts = CATS.reduce((m, c) => {
    m[c.id] = c.id === 'all' ? FAQ_DATA.length : FAQ_DATA.filter(f => f.cat === c.id).length;
    return m;
  }, {});

  return (
    <div className="section-wrap">
      <div className="page-eyebrow">Resources · FAQ</div>
      <h1 className="page-title">
        How do I make my brand <em>visible to AI?</em>
      </h1>
      <p className="page-lead">
        Eight questions Marketing Leaders and Digital Marketing Teams ask before they invest in AI
        visibility repair, answered without dashboard hand-waving. Each answer maps to the
        SurfaceGX module that ships the fix.
      </p>

      <div className="faq-toolbar">
        <span className="ft-label">Filter</span>
        {CATS.map(c => (
          <button
            key={c.id}
            className={`faq-chip cat-${c.id} ${filter === c.id ? 'on' : ''}`}
            onClick={() => setFilter(c.id)}
          >
            {c.label}<span className="ct-count">·{counts[c.id]}</span>
          </button>
        ))}
      </div>

      <div className="faq-list">
        {items.map(f => (
          <div className={`faq-row ${openId === f.id ? 'open' : ''}`} key={f.id}>
            <button className="faq-q" onClick={() => setOpenId(openId === f.id ? null : f.id)}>
              <span className={`faq-cat cat-${f.cat}`}>{f.catLabel}</span>
              <span>{f.q}</span>
              <span className="faq-chev">+</span>
            </button>
            {openId === f.id && (
              <div className="faq-a">
                {f.a}
                {f.fix && (
                  <div className="faq-fix" onClick={() => setActive(f.fix.target)}>
                    <span className="ff-tag">{f.fix.tag}</span>
                    <span className="ff-text">{f.fix.text}</span>
                    <span className="ff-go">open →</span>
                  </div>
                )}
              </div>
            )}
          </div>
        ))}
      </div>

      <h2 className="section-h">What AI engines see on this page</h2>
      <p className="sub">
        FAQ content is only half the work. The other half is making sure engines can parse it
        without ambiguity. This page emits <code style={{fontFamily:'var(--mono)',color:'var(--haze)',fontSize:'12px'}}>FAQPage</code> structured data. Here's what they ingest:
      </p>

      <div className="schema-block">
        <div className="sb-head">
          <span>application/ld+json · FAQPage</span>
          <span className="sb-emit">emitted on load</span>
        </div>
        <pre>{`{
  `}<span className="sk">"@context"</span>{`: `}<span className="sv">"https://schema.org"</span>{`,
  `}<span className="sk">"@type"</span>{`: `}<span className="sv">"FAQPage"</span>{`,
  `}<span className="sk">"mainEntity"</span>{`: [
    {
      `}<span className="sk">"@type"</span>{`: `}<span className="sv">"Question"</span>{`,
      `}<span className="sk">"name"</span>{`: `}<span className="sv">"How do I improve GEO performance for AI search?"</span>{`,
      `}<span className="sk">"acceptedAnswer"</span>{`: {
        `}<span className="sk">"@type"</span>{`: `}<span className="sv">"Answer"</span>{`,
        `}<span className="sk">"text"</span>{`: `}<span className="sv">"Start by auditing whether your brand appears…"</span>{`
      }
    },
    `}<span className="sc">// + 7 more questions, emitted from FAQ_DATA</span>{`
  ]
}`}</pre>
      </div>

      <div className="docs-bridge" onClick={() => setActive('concepts')}>
        <span className="db-tag">deeper</span>
        <span className="db-text">
          Definitions for <b>GEO, AEO, the input layer, retrieval surfaces, and llms.txt</b>,
          the vocabulary these answers operate on, live in Key Concepts.
        </span>
        <span className="db-go">Key concepts →</span>
      </div>

      <PageEndNav active="faq" setActive={setActive}
        docsLink={{ id: 'concepts', label: 'Key concepts' }} />
    </div>
  );
}

/* ── Section: Concepts (folded-in from /docs/concepts/) ──────────────── */
const CONCEPTS = [
  {
    id: 'geo', num: '01', cat: 'geo', accent: 'cyan', tag: 'GEO',
    title: 'Generative Engine Optimization',
    body: <>
      <p><b>Generative Engine Optimization (GEO)</b> is the practice of making a brand consistently present, accurately described, and authoritatively cited by large language models when they generate responses about a category, topic, or problem.</p>
      <p>Unlike traditional SEO, which focuses on ranking in a list of links, GEO focuses on being part of the synthesized narrative an AI produces. When someone asks ChatGPT "what are the best tools for X," GEO determines whether your brand appears in that paragraph, what it says about you, and whether it sounds authoritative or vague.</p>
      <p>GEO is shaped by three factors:</p>
      <ul>
        <li><b>Source authority</b> Whether the sources that discuss your brand are high-quality, frequently cited, and varied.</li>
        <li><b>Entity clarity</b> Whether AI engines have a clear, consistent understanding of what your brand is, what it does, who leads it, and what makes it distinct.</li>
        <li><b>Content structure</b> Whether your pages are written and structured in ways that AI can extract, cite, and synthesize from.</li>
      </ul>
    </>,
  },
  {
    id: 'aeo', num: '02', cat: 'aeo', accent: 'green', tag: 'AEO',
    title: 'Answer Engine Optimization',
    body: <>
      <p><b>Answer Engine Optimization (AEO)</b> is the practice of structuring your content so that AI-powered answer engines (voice assistants, featured snippets, direct-answer interfaces) can extract your brand's information accurately and present it as a definitive response.</p>
      <p>Where GEO focuses on brand presence in AI-generated narratives, AEO focuses on question-and-answer precision. AEO asks: when a buyer types "what does [Brand] do" or "how does [Brand] compare to X," can the AI produce a clear, factual, on-brand answer?</p>
      <p>Strong AEO requires:</p>
      <ul>
        <li><b>Clear heading hierarchy</b> H1, H2, H3 structure that maps naturally to questions and answers.</li>
        <li><b>Structured data</b> Schema.org markup, especially FAQPage and HowTo, signaling content format to AI crawlers.</li>
        <li><b>Authoritative bylines</b> Author credentials and organizational affiliation that establish why your content is trustworthy on this topic.</li>
        <li><b>Direct answer language</b> Content written in plain, declarative sentences that answer specific questions without ambiguity.</li>
      </ul>
    </>,
  },
  {
    id: 'readiness', num: '03', cat: 'ready', accent: 'violet', tag: 'AI Visibility',
    title: 'What page readiness means',
    body: <>
      <p>A page is ready for AI visibility work when it can be <b>read clearly, communicates meaningful brand information, and supports accurate citation</b>.</p>
      <p>SurfaceGX looks at whether a page gives AI systems enough clear, trustworthy, and accessible information to understand how it should be used.</p>
      <ul>
        <li><b>Clarity</b> The page explains the topic directly and avoids burying important facts.</li>
        <li><b>Trust</b> The page gives AI systems enough confidence that the brand is a credible source.</li>
        <li><b>Accessibility</b> The page can be read and interpreted without unnecessary friction.</li>
      </ul>
      <p>SurfaceGX evaluates pages and turns visibility gaps into prioritized repair work inside the authenticated portal.</p>
    </>,
  },
  {
    id: 'llmstxt', num: '04', cat: 'llms', accent: 'amber', tag: 'llms.txt',
    title: 'How llms.txt works',
    body: <>
      <p><b>llms.txt</b> is an emerging way to make important website content easier for AI systems to understand. Placed at a domain root, it gives AI tools a concise map of the pages a brand wants represented clearly.</p>
      <p>SurfaceGX helps teams prepare AI-readable manifests as part of a broader repair workflow.</p>
      <ul>
        <li><b>llms.txt</b> A concise index of priority pages.</li>
        <li><b>llms-full.txt</b> An expanded companion file for richer context when appropriate.</li>
      </ul>
      <p>Both files are reviewed before deployment so the approved output reflects how the brand should be represented.</p>
      <div className="cc-tip">
        <span className="cc-tip-label">Tip</span>
        Manifest generation works best after the underlying pages have been cleaned up, clarified, and aligned with the brand's source of truth.
      </div>
    </>,
  },
  {
    id: 'workflow', num: '05', cat: 'loop', accent: 'rose', tag: 'Workflow',
    title: 'Continuous AI visibility improvement',
    body: <>
      <p>SurfaceGX is designed as a <b>continuous improvement system</b>, not a one-time report. Teams establish a baseline, identify the causes behind visibility gaps, prioritize the work, and measure whether changes improve AI understanding over time.</p>
      <p>Detailed module-level workflows are available inside the authenticated SurfaceGX portal for approved customers and partners.</p>
    </>,
  },
];

function SectionConcepts({ setActive }) {
  return (
    <div className="section-wrap">
      <div className="page-eyebrow">Resources · Key concepts</div>
      <h1 className="page-title">
        The vocabulary of <em>AI brand visibility</em>
      </h1>
      <p className="page-lead">
        Five concepts that anchor every SurfaceGX module. Understanding them helps you get more
        from the platform and communicate findings clearly to your team.
      </p>

      <div className="concepts-toc">
        {CONCEPTS.map(c => (
          <a key={c.id} href={`#concept-${c.id}`}>
            <span className={`ct-num cat-${c.cat}`}>{c.num} · {c.tag}</span>
            <span className="ct-name">{c.title}</span>
          </a>
        ))}
      </div>

      <hr className="concepts-divider" />
      <div className="concepts-grid">
        {CONCEPTS.map(c => (
          <div key={c.id} id={`concept-${c.id}`} className={`card with-accent concept-card accent-${c.accent}`}>
            <div className="cc-eyebrow">
              <span>{c.tag}</span>
              <span className="cc-num">· {c.num}</span>
            </div>
            <h3>{c.title}</h3>
            {c.body}
          </div>
        ))}
      </div>

      <div className="docs-bridge" onClick={() => setActive('modules')}>
        <span className="db-tag">apply these</span>
        <span className="db-text">
          Each concept maps to a SurfaceGX module. See <b>Surface Audit, Engine Diagnosis,
          Content Brief Empower, and Engineering Handoff</b> in the Platform section.
        </span>
        <span className="db-go">Platform modules →</span>
      </div>

      <PageEndNav active="concepts" setActive={setActive} />
    </div>
  );
}

Object.assign(window, {
  FAQ_DATA, CONCEPTS,
  SectionOverview, SectionModules, SectionOutputs,
  SectionStoryline, SectionWhy,
  SectionTeams, SectionServices, SectionStart,
  SectionAbout, SectionConcepts, SectionFAQ,
});
