/* === Interior pages — product, platform, solutions, security, company, demo ===
   The section patterns themselves live in components.css. This file carries
   only what those pages add on top. */

/* --- Shared section typography --- */
.section-head {
  max-width: 820px;
}

.section-lead {
  margin-top: var(--space-6);
  font-size: var(--text-lg);
  line-height: 1.65;
  color: var(--color-gray-700);
  max-width: 760px;
}

.section-ink .section-lead,
.section-ink-deep .section-lead {
  color: var(--color-gray-300);
}

.section-body {
  margin-top: var(--space-5, 1.25rem);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-gray-700);
}

.section-body-dark {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-gray-300);
}

.section-claim {
  margin-top: var(--space-4);
  font-size: var(--text-base);
  line-height: 1.65;
  font-weight: var(--weight-semibold);
  color: var(--color-gray-900);
}

.section-claim-dark {
  color: var(--color-white) !important;
}

/* Capability-claim guard rail — spec section 17. Visually quieter than
   body copy so it reads as scope, not as a feature. */
.scope-note {
  margin-top: var(--space-4);
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-gray-200);
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-gray-500);
}

.scope-note-dark {
  border-left-color: var(--line-dark-strong);
  color: var(--color-gray-400) !important;
}

.scope-note strong {
  color: var(--color-gray-900);
}

.scope-note-dark strong {
  color: var(--color-white);
}

/* Dark grounds are also matched on context, not only on the -dark modifier.
   .section-ink p already covers the note's own body copy, but nothing covered
   the nested <strong>, so a forgotten modifier rendered gray-900 on ink —
   invisible. Belt and braces: the modifier stays, and context backs it up. */
.section-ink .scope-note,
.section-ink-deep .scope-note {
  border-left-color: var(--line-dark-strong);
  color: var(--color-gray-400);
}

.section-ink .scope-note strong,
.section-ink-deep .scope-note strong {
  color: var(--color-white);
}

/* --- Page hero extras --- */
.page-hero-claim {
  margin-top: var(--space-5, 1.25rem);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  color: var(--color-accent);
  max-width: 680px;
}

.page-hero-todo {
  margin-top: var(--space-6);
  max-width: 680px;
}

/* --- Diagram spacing --- */
.ingest-diagram,
.assetspec-diagram {
  margin-top: var(--space-12);
}

.assetspec-diagram {
  max-width: 1000px;
}

/* --- PRODUCT 6 — interaction cards --- */
.interactions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-12);
}

.interaction-n {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--color-accent);
}

.interaction h3 {
  margin-top: var(--space-3);
  font-size: var(--text-xl);
  color: var(--color-white);
}

.interaction p {
  margin-top: var(--space-3);
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-gray-400);
}

.interaction .slot {
  margin-top: var(--space-6);
}

.interactions + .todo {
  margin-top: var(--space-10);
  display: block;
}

/* --- SOLUTIONS 5 — tick list --- */
.ticklist {
  list-style: none;
  margin: var(--space-5, 1.25rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-6);
}

.ticklist li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: 15.5px;
  color: var(--color-gray-700);
}

.ticklist li::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--color-accent-ink);
  flex-shrink: 0;
}

/* --- SECURITY — question blocks --- */
.qa-list {
  columns: 2;
  column-gap: var(--space-8);
  margin-top: var(--space-12);
}

/* Blocks flow down the columns and fill. A grid would align them in rows,
   leaving a gap above every block that sits under a taller neighbour. */
.qa {
  break-inside: avoid;
  margin-bottom: var(--space-8);
}

.qa h3 {
  font-size: var(--text-lg);
  color: var(--color-gray-900);
  margin-bottom: var(--space-4);
}

.section-ink .qa h3,
.section-ink-deep .qa h3 {
  color: var(--color-white);
}

.qa .todo {
  display: block;
}

/* --- SECURITY — FAQ --- */
.faq {
  margin-top: var(--space-10);
  border-top: 1px solid var(--line-light);
}

.faq-item {
  border-bottom: 1px solid var(--line-light);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5, 1.25rem) 0;
  list-style: none;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-gray-900);
  cursor: pointer;
}

.faq-q::-webkit-details-marker {
  display: none;
}

/* Plus / minus drawn rather than typed, so it flips with [open]. */
.faq-icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background: var(--color-accent-ink);
  transition: opacity var(--transition-fast);
}

.faq-icon::before {
  top: 6px;
  left: 0;
  width: 14px;
  height: 2px;
}

.faq-icon::after {
  top: 0;
  left: 6px;
  width: 2px;
  height: 14px;
}

.faq-item[open] .faq-icon::after {
  opacity: 0;
}

.faq-a {
  padding-bottom: var(--space-5, 1.25rem);
}

/* --- SECURITY — legal links --- */
.legal-links {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.legal-links a {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-accent-ink);
}

.legal-links a:hover {
  color: var(--color-primary);
}

/* --- COMPANY --- */
.cta-band-alt {
  margin-top: var(--space-6);
}

/* --- DEMO --- */
.demo-hero {
  padding-bottom: var(--space-16);
}

.demo-hero-note {
  margin-top: var(--space-5);
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-gray-400);
  max-width: 680px;
}

.demo-layout {
  display: flex;
  gap: var(--space-16);
  align-items: flex-start;
}

.demo-aside {
  width: 420px;
  flex-shrink: 0;
}

.demo-aside-head {
  font-size: var(--text-2xl);
  letter-spacing: -0.015em;
}

.demo-steps {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
}

.demo-steps li {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5, 1.25rem) 0;
  border-top: 1px solid var(--line-light);
}

.demo-steps li:last-child {
  border-bottom: 1px solid var(--line-light);
}

.demo-n {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-accent-ink);
  padding-top: 4px;
  flex-shrink: 0;
}

.demo-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-gray-500);
}

.demo-step strong {
  font-size: var(--text-base);
  color: var(--color-gray-900);
}

.demo-note {
  margin-top: var(--space-6);
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-gray-500);
}

.demo-form-wrap {
  flex: 1;
  min-width: 0;
  background: var(--color-white);
  border: 1px solid var(--line-light);
  border-radius: var(--border-radius-lg);
  padding: var(--space-10);
  box-shadow: var(--shadow-sm);
}

.demo-form-header h2 {
  font-size: var(--text-3xl);
  letter-spacing: -0.02em;
}

.demo-form-header p {
  margin-top: var(--space-3);
  font-size: 15.5px;
  color: var(--color-gray-500);
}

.demo-form-wrap .todo {
  margin-top: var(--space-6);
  display: block;
}

.demo-form-embed {
  margin-top: var(--space-8);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .interactions {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }
}

@media (max-width: 900px) {
  .qa-list {
    columns: 1;
  }

  .ticklist {
    grid-template-columns: 1fr;
  }

  .demo-layout {
    flex-direction: column;
    gap: var(--space-12);
  }

  .demo-aside {
    width: 100%;
  }

  .demo-form-wrap {
    padding: var(--space-8) var(--space-6);
  }

  .ingest-diagram,
  .assetspec-diagram {
    margin-top: var(--space-10);
  }
}

/* ============================================================
   Security page — sourced answers
   Every claim cites the document it came from, so the page can
   be audited against the EULA / Privacy Policy line by line.
   ============================================================ */
.source-banner {
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-5, 1.25rem);
  border-left: 2px solid var(--color-accent);
  background: rgba(0, 224, 240, 0.05);
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-gray-300);
  max-width: 720px;
}

.source-banner a {
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
}

.qa-src {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--color-gray-500);
}

.section-ink .qa-src,
.section-ink-deep .qa-src {
  color: var(--color-gray-400);
}

.qa p {
  font-size: 15.5px;
  line-height: 1.7;
}

.qa .todo {
  margin-top: var(--space-4);
}

.sub-head {
  margin-top: var(--space-12);
  font-size: var(--text-xl);
  color: var(--color-gray-900);
}

.ticklist-wide {
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.ticklist-wide li {
  line-height: 1.6;
}

.legal-lead {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--color-gray-500);
  margin-bottom: var(--space-6);
  max-width: 640px;
}

/* --- Retention table --- */
.rtable {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-10);
  font-size: 15px;
}

.rtable th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gray-500);
  border-bottom: 1px solid var(--color-gray-900);
}

.rtable td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--line-light);
  color: var(--color-gray-700);
  line-height: 1.6;
  vertical-align: top;
}

.rtable td:first-child {
  font-weight: var(--weight-semibold);
  color: var(--color-gray-900);
  white-space: nowrap;
}

.rt-no { color: var(--color-accent-ink) !important; font-weight: var(--weight-semibold); }
.rt-yes { color: var(--color-gray-700) !important; }

/* --- AI data-flow stacked fallback --- */
.flow-stack li {
  align-items: flex-start;
  font-weight: var(--weight-regular);
  line-height: 1.6;
}

.flow-stack .fw-n {
  padding-top: 3px;
}

.flow-stack strong {
  color: var(--color-white);
}

@media (max-width: 768px) {
  .rtable,
  .rtable tbody,
  .rtable tr,
  .rtable td {
    display: block;
    width: 100%;
  }

  .rtable thead { display: none; }

  .rtable tr {
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--line-light);
  }

  .rtable td {
    border: 0;
    padding: 2px 0;
    white-space: normal;
  }

  .rtable td:first-child {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-gray-500);
    margin-bottom: var(--space-2);
  }
}

.table-note {
  margin-top: var(--space-4);
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-gray-500);
  max-width: 760px;
}