/* ==========================================================================
   TYTEN v2 — long-form pages: /platform/* and /guides/*
   Prose, capability cards, comparison tables, proof stats, FAQ accordion.
   Shared tokens/components live in /assets/v2/tyten-v2.css; every colour here
   is a --v2-* token so day and night both work.
   ========================================================================== */

/* Hero -------------------------------------------------------------------- */
.art-hero__inner {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1vw, 1.875rem);   /* 20 → 30 */
  justify-items: start;
}
.art-hero__title { max-width: 1100px; text-wrap: balance; }
.art-hero__sub2 {
  max-width: 820px;
  font-size: var(--v2-fs-sub);
  line-height: 1.5;
  color: var(--v2-text-muted);
}

/* Section content column -------------------------------------------------- */
.art-inner {
  display: grid;
  gap: 20px;
  align-content: start;
}
.art-h2 {
  font-size: clamp(1.875rem, 1.6rem + 1.15vw, 2.875rem);   /* 30 → 46 */
  line-height: var(--v2-lh-heading);
  max-width: 900px;
  text-wrap: balance;
}
.art-p {
  max-width: 760px;
  font-size: var(--v2-fs-body);
  line-height: 1.65;
  color: var(--v2-text-body);
}
.art-p a,
.faq-a-inner a {
  color: var(--v2-accent-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--v2-dur) ease;
}
.art-p a:hover,
.faq-a-inner a:hover { text-decoration-thickness: 2px; }
.art-center { text-align: center; margin-inline: auto; }

/* Capability cards (always a symmetric 2 × 2) ----------------------------- */
.art-cards {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: 980px;
  margin: 16px auto 0;
}
@media (min-width: 700px) { .art-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.art-card { padding: clamp(24px, 2.4vw, 32px) clamp(22px, 2.2vw, 30px); }
.art-card__title {
  margin: 0;
  font-family: var(--v2-font-display);
  font-weight: 500;
  font-size: var(--v2-fs-h4);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.art-card__body { font-size: var(--v2-fs-ui); line-height: 1.6; }

/* Comparison tables ------------------------------------------------------- */
.art-table-wrap {
  width: 100%;
  margin-block: 8px;
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-r-card);
  background: var(--v2-card-bg);
  overflow: hidden;
}
.art-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--v2-fs-ui);
  line-height: 1.5;
  text-align: left;
}
.art-table th,
.art-table td {
  padding: 18px 22px;
  vertical-align: top;
  border-top: 1px solid var(--v2-line-soft);
}
.art-table thead th {
  border-top: 0;
  padding-block: 16px;
  font-size: var(--v2-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v2-text-muted);
  background: var(--v2-banner-bg);
}
.art-table tbody th {
  width: 22%;
  font-family: var(--v2-font-display);
  font-weight: 600;
  color: var(--v2-text);
}
.art-table td { color: var(--v2-text-body); }
.art-table .art-win {
  color: var(--v2-accent-ink);
  background: var(--v2-accent-tint);
  font-weight: 500;
}
.art-table tbody th.art-win { font-weight: 700; }

/* Phone: each row becomes a small card, cells labelled from the column head */
@media (max-width: 699px) {
  .art-table-wrap { border: 0; border-radius: 0; background: none; overflow: visible; }
  .art-table,
  .art-table tbody,
  .art-table tr,
  .art-table th,
  .art-table td { display: block; width: auto; }
  .art-table thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .art-table tbody { display: grid; gap: 14px; }
  .art-table tr {
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-r-banner);
    background: var(--v2-card-bg);
    overflow: hidden;
  }
  .art-table th,
  .art-table td { padding: 14px 18px; }
  .art-table tbody th { width: auto; border-top: 0; font-size: 1.0625rem; }
  .art-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: var(--v2-fs-eyebrow);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--v2-text-muted);
  }
}

/* Proof stats ------------------------------------------------------------- */
.art-proof__grid {
  display: grid;
  gap: var(--v2-stack);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .art-proof__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.art-stat__num { color: var(--v2-accent-ink); }
.art-stat__lbl { font-size: var(--v2-fs-ui); color: var(--v2-text-muted); }
.art-proof__tag {
  max-width: 760px;
  margin-top: 8px;
  font-size: var(--v2-fs-small);
  line-height: 1.5;
  color: var(--v2-text-muted);
}
.art-quote {
  display: grid;
  gap: 14px;
  max-width: 900px;
  margin-top: clamp(16px, 2vw, 28px);
  padding-left: clamp(18px, 2vw, 28px);
  border-left: 3px solid var(--v2-accent);
}
.art-quote__attr {
  font-size: var(--v2-fs-eyebrow);
  letter-spacing: var(--v2-ls-eyebrow);
  text-transform: uppercase;
  color: var(--v2-text-muted);
}

/* FAQ accordion (faq-* hooks are read by scripts/faq_schema.py) ------------ */
.art-faq {
  margin-top: 12px;
  border-bottom: 1px solid var(--v2-line-soft);
}
.faq-item { border-top: 1px solid var(--v2-line-soft); }
.faq-q {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--v2-font-display);
  font-weight: 500;
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);   /* 18 → 21 */
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--v2-text);
  transition: color var(--v2-dur) ease;
}
.faq-q:hover { color: var(--v2-accent-ink); }
.faq-q:focus-visible { outline: 2px solid var(--v2-focus); outline-offset: 4px; border-radius: 4px; }
.faq-icon {
  flex: none;
  font-family: var(--v2-font-text);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1;
  color: var(--v2-text-muted);
  transition: transform 400ms ease, color 400ms ease;
}
.faq-icon::before { content: "+"; content: "+" / ""; }   /* decorative; the "+" is CSS so it is not part of the button's name */
.faq-item.is-open .faq-icon { transform: rotate(45deg); color: var(--v2-accent); }
.faq-a-inner {
  max-width: 720px;
  padding: 0 0 22px;
  font-size: var(--v2-fs-ui);
  line-height: 1.7;
  color: var(--v2-text-body);
}
.art-faq--js .faq-a { display: none; }
.art-faq--js .faq-item.is-open .faq-a { display: block; }
.art-faq--js .faq-item:not(.is-open) .faq-icon { transform: none; }
.art-faq:not(.art-faq--js) .faq-icon { visibility: hidden; }