/* ==========================================================================
   styles.css — Syndicate Systems
   --------------------------------------------------------------------------
   Loaded AFTER family.css, which owns the palette, type, spacing, and the
   base components (container, buttons, header, nav, footer, focus, motion).
   This file only sets what is specific to this site:

     1. the accent pair
     2. the navy-led background rhythm
     3. the legacy class names this site's HTML already uses, remapped onto
        the family system so the markup did not have to be rewritten

   Inter and Sora are gone; family.css uses Archivo and IBM Plex Sans.
   If a rule here would be useful to both sites, it belongs in family.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Accent — steel blue
   -------------------------------------------------------------------------- */

:root {
  --accent-on-light: #1d5f8c; /* 6.1:1 on steel, 6.9:1 on paper */
  --accent-on-navy: #8cc3ec;  /* 9.2:1 on ink, 7.8:1 on ink-2 */
}

/* A steel band inside the navy-led page. Declared here rather than adding
   .on-steel to every section, so the existing class names keep working. */
.section-alt {
  --bg: var(--steel);
  --surface: var(--paper);
  --surface-2: var(--steel);
  --fg: var(--ink);
  --fg-muted: var(--muted);
  --border: var(--line);
  --accent: var(--accent-on-light);
  --accent-fg: var(--paper);
}

/* --------------------------------------------------------------------------
   2. Brand and buttons the existing markup asks for
   -------------------------------------------------------------------------- */

.brand-mark {
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: var(--radius-btn);
  background: var(--accent);
}

.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--fg);
}

.btn-ghost:hover {
  border-color: var(--accent);
}

.btn-lg {
  min-height: 52px;
  padding: 14px 26px;
  font-size: 1.0625rem;
}

/* --------------------------------------------------------------------------
   3. Hero
   --------------------------------------------------------------------------
   The decorative .hero-glow element and its radial gradient are gone.
   -------------------------------------------------------------------------- */

.hero {
  padding-block: 88px 104px;
}

.hero-inner {
  max-width: 900px;
}

.hero .lede {
  margin-top: 22px;
}

.lede-2 {
  margin-top: 14px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

/* Commented-out proof slot in index.html. Kept so uncommenting it just works. */
.proof {
  margin-top: 26px;
  font-size: 0.9375rem;
  color: var(--fg-muted);
}

/* --------------------------------------------------------------------------
   4. Sections, cards, and prose
   -------------------------------------------------------------------------- */

.split-text > h2 {
  margin-bottom: 18px;
}

.cards {
  display: grid;
  gap: 24px;
  align-items: start;
}

.cards-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cards-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  padding: 30px 28px;
}

.card > h3 {
  margin-bottom: 12px;
}

.card > p {
  color: var(--fg-muted);
}

/* Marks the three service lines. */
.card-outline {
  box-shadow: inset 3px 0 0 var(--accent);
}

.service-tag {
  margin: 0 0 10px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--fg-muted);
}

/* "View on Azure Marketplace", pinned to the bottom of each service card. */
.card-link {
  margin-top: auto;
  padding-top: 20px;
  font-size: 0.9375rem;
  font-weight: 600;
}

/* The AI Data Agent block closing the analytics card. */
.addon {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  color: var(--fg-muted);
}

.prose > h2 {
  margin-top: 44px;
  margin-bottom: 14px;
}

.prose > h2:first-child,
.prose > h2:first-of-type {
  margin-top: 0;
}

.prose > h3 {
  margin-top: 30px;
  margin-bottom: 10px;
}

.prose-strong {
  font-weight: 600;
  color: var(--fg);
}

/* --------------------------------------------------------------------------
   5. Terms pages
   -------------------------------------------------------------------------- */

.toc {
  margin: 0 0 40px;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
}

.toc p {
  margin: 0 0 12px;
  font-weight: 600;
  color: var(--fg);
}

.toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

/* Keeps a wide schedule table from forcing the whole page to scroll sideways. */
.terms-table-wrap {
  overflow-x: auto;
  margin: 0 0 26px;
}

.terms-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.9375rem;
  text-align: left;
}

.terms-table th,
.terms-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--fg-muted);
  vertical-align: top;
}

.terms-table thead th {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--fg);
  border-bottom: 1px solid var(--accent);
}

.terms-table tbody th {
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
}

.terms-table tbody tr:last-child td,
.terms-table tbody tr:last-child th {
  border-bottom: 0;
}

.version-banner {
  margin: 0 0 32px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-panel);
  font-size: 0.9375rem;
  color: var(--fg-muted);
}

/* --------------------------------------------------------------------------
   6. Table-stakes pill list
   -------------------------------------------------------------------------- */

.pill-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: flex-start;
}

.pill-list li {
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  font-size: 0.9375rem;
  color: var(--fg-muted);
}

/* --------------------------------------------------------------------------
   7. Fit check
   -------------------------------------------------------------------------- */

.fit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.fit-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  padding: 30px 28px;
}

.fit-col > h3 {
  margin-bottom: 16px;
}

.fit-good {
  border-top: 3px solid var(--accent);
}

.fit-bad {
  border-top: 3px solid var(--border);
}

/* Also used for the bulleted lists in privacy.html and the terms pages. */
.fit-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fit-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 12px;
  color: var(--fg-muted);
}

.fit-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.fit-bad .fit-list li::before {
  background: var(--fg-muted);
}

.fit-list li:last-child {
  margin-bottom: 0;
}

.fit-note {
  margin-top: 18px;
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   8. Cross-link to Fractional Syndicate
   -------------------------------------------------------------------------- */

.crosslink {
  margin-top: 24px;
  background: var(--ink);
}

.crosslink-note {
  margin-top: 18px;
  font-size: 0.9375rem;
  color: var(--fg-muted);
}

/* --------------------------------------------------------------------------
   9. Close / CTA
   -------------------------------------------------------------------------- */

.cta-inner {
  max-width: 800px;
}

.cta-actions {
  margin-top: 32px;
}

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px 40px;
}

.footer-brand {
  max-width: 460px;
}

.footer-tagline {
  margin: 14px 0 0;
  font-size: 0.9375rem;
  color: var(--fg-muted);
}

.footer-badges {
  margin: 8px 0 0;
  font-size: 0.9375rem;
  color: var(--fg-muted);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-legal {
  flex-basis: 100%;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

/* --------------------------------------------------------------------------
   11. Responsive
   --------------------------------------------------------------------------
   family.css handles the nav collapse, section spacing, and reduced motion.
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {
  .cards-3,
  .cards-2,
  .fit-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero {
    padding-block: 56px 72px;
  }
}

@media (max-width: 720px) {
  .card,
  .fit-col,
  .toc {
    padding: 24px 20px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .footer-links {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 22px;
  }
}