/*
 * ATPX public site — marketing surface. Loaded alongside design-system.css
 * (never instead of it) so the public site shares every colour/type/space
 * token with the product itself - a visitor sees one ATPX, not a marketing
 * skin bolted onto a different-looking app. Only adds components the app
 * shell doesn't need: nav bar, hero, feature grid, pricing cards, FAQ,
 * legal-doc rendering.
 */

body.site-body { overflow-x: hidden; }

/* ---- site nav ---- */
.site-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  padding-left: calc(var(--space-6) + env(safe-area-inset-left));
  padding-right: calc(var(--space-6) + env(safe-area-inset-right));
  border-bottom: 1px solid var(--line);
  max-width: 1200px; margin: 0 auto;
}
.site-nav .brand {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
  color: var(--text); font-weight: 700; font-size: var(--text-md); letter-spacing: -0.01em;
}
.site-nav .brand .mark {
  width: 22px; height: 22px; border-radius: 6px; flex: none;
  background: linear-gradient(135deg, var(--data-blue), var(--data-purple));
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 800;
}
.site-nav .links {
  display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap;
}
.site-nav .links a {
  color: var(--text-muted); text-decoration: none; font-size: var(--text-sm); font-weight: 500;
}
.site-nav .links a:hover { color: var(--text); }
.site-nav .actions { display: flex; align-items: center; gap: var(--space-3); }
.site-nav-wrap { border-bottom: 1px solid var(--line); }

/* mobile nav: links collapse into a simple stacked sheet via <details> -
   zero JS required, works with reduced-motion/no-JS visitors too. */
.site-nav-toggle { display: none; }
@media (max-width: 860px) {
  .site-nav { flex-wrap: wrap; }
  .site-nav .links {
    display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: var(--space-3);
    padding-top: var(--space-4); margin-top: var(--space-3); border-top: 1px solid var(--line);
  }
  .site-nav .links.open { display: flex; }
  .site-nav-toggle {
    display: inline-flex; background: none; border: 1px solid var(--line-strong); color: var(--text);
    border-radius: var(--radius-sm); padding: 8px 12px; font-size: var(--text-sm); cursor: pointer;
  }
}

/* ---- hero ---- */
.site-hero {
  max-width: 880px; margin: 0 auto; padding: var(--space-10) var(--space-6) var(--space-8);
  text-align: center;
}
.site-hero .eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--data-blue); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--space-4);
  background: var(--data-blue-soft); padding: 5px 12px; border-radius: 999px;
}
.site-hero h1 {
  font-size: clamp(28px, 5vw, 46px); line-height: 1.12; margin: 0 0 var(--space-5);
  letter-spacing: -0.02em; font-weight: 700;
}
.site-hero h1 .accent { color: var(--data-blue); }
.site-hero p.tagline { color: var(--text-muted); font-size: var(--text-lg); line-height: 1.55; margin: 0 auto var(--space-8); max-width: 620px; }
.cta-row { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-3); }
.cta-row .btn { padding: 12px 22px; font-size: var(--text-md); }
.cta-note { color: var(--text-faint); font-size: var(--text-xs); }

/* ---- section shell ---- */
.site-section { max-width: 1080px; margin: 0 auto; padding: var(--space-10) var(--space-6); }
.site-section.narrow { max-width: 760px; }
.site-section .section-eyebrow {
  color: var(--data-purple); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: var(--space-2); text-align: center;
}
.site-section h2 {
  font-size: clamp(22px, 3vw, 32px); text-align: center; margin: 0 0 var(--space-3); letter-spacing: -0.01em;
}
.site-section > p.lede { text-align: center; color: var(--text-muted); font-size: var(--text-md); max-width: 640px; margin: 0 auto var(--space-8); }
.site-section.alt { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.site-section.alt > div { max-width: 1080px; margin: 0 auto; }

/* ---- pipeline strip (goal -> observe -> ... -> learn) ---- */
.pipeline-strip {
  display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding-bottom: var(--space-2);
  -webkit-overflow-scrolling: touch;
}
.pipeline-step {
  flex: 1 0 128px; padding: var(--space-4); text-align: center; position: relative;
}
.pipeline-step .ps-num {
  width: 30px; height: 30px; border-radius: 50%; background: var(--panel-raised); border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; color: var(--data-blue);
}
.pipeline-step .ps-label { font-size: var(--text-sm); font-weight: 600; margin-bottom: 4px; }
.pipeline-step .ps-desc { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.4; }
.pipeline-step:not(:last-child)::after {
  content: ''; position: absolute; top: 15px; right: -50%; width: 100%; height: 1px; background: var(--line);
  z-index: 0;
}

/* ---- feature grid ---- */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-5); }
.feature-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: var(--shadow-card);
}
.feature-card .fc-icon {
  width: 40px; height: 40px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center;
  font-size: 18px; margin-bottom: var(--space-4);
}
.feature-card h3 { font-size: var(--text-md); margin: 0 0 var(--space-2); }
.feature-card p { font-size: var(--text-sm); color: var(--text-muted); margin: 0; line-height: 1.55; }

/* ---- portal cards (sign in to which console) ---- */
.portal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); }
.portal-card {
  display: block; text-decoration: none; color: inherit; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-5); transition: border-color 0.12s ease;
}
.portal-card:hover { border-color: var(--data-blue); }
.portal-card h3 { font-size: var(--text-md); margin: 0 0 var(--space-1); color: var(--text); }
.portal-card p { font-size: var(--text-sm); color: var(--text-muted); margin: 0; }

/* ---- pricing ---- */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-5); align-items: stretch; }
.pricing-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-6); display: flex; flex-direction: column;
}
.pricing-card.featured { border-color: var(--data-blue); box-shadow: 0 0 0 1px var(--data-blue), var(--shadow-raised); }
.pricing-card .pc-name { font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--data-blue); }
.pricing-card .pc-price { font-size: var(--text-2xl); font-weight: 700; margin: var(--space-2) 0; }
.pricing-card .pc-price .unit { font-size: var(--text-sm); color: var(--text-muted); font-weight: 400; }
.pricing-card .pc-desc { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-5); min-height: 40px; }
.pricing-card ul { list-style: none; padding: 0; margin: 0 0 var(--space-6); flex: 1; }
.pricing-card li { display: flex; gap: 8px; font-size: var(--text-sm); padding: 6px 0; }
.pricing-card li::before { content: '✓'; color: var(--data-green); font-weight: 700; flex: none; }

/* ---- trust/security ---- */
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
.trust-item { display: flex; gap: var(--space-3); padding: var(--space-4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.trust-item .ti-icon { color: var(--data-green); flex: none; font-size: 16px; }
.trust-item h4 { margin: 0 0 4px; font-size: var(--text-sm); }
.trust-item p { margin: 0; font-size: var(--text-xs); color: var(--text-muted); line-height: 1.5; }
.limitation-box {
  background: var(--data-orange-soft); border: 1px solid rgba(242,166,90,0.35); border-radius: var(--radius);
  padding: var(--space-4) var(--space-5); font-size: var(--text-sm); margin-top: var(--space-6);
}
.limitation-box h4 { margin: 0 0 var(--space-2); color: var(--warn); font-size: var(--text-sm); }

/* ---- FAQ ---- */
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer; padding: var(--space-4) 0; font-weight: 600; font-size: var(--text-md);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; color: var(--text-faint); font-size: 20px; flex: none; }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { color: var(--text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-4); line-height: 1.6; }

/* ---- draft/legal banner ---- */
.draft-banner {
  background: var(--data-orange-soft); border: 1px solid rgba(242,166,90,0.4); color: var(--text);
  border-radius: var(--radius); padding: var(--space-4) var(--space-5); font-size: var(--text-sm);
  max-width: 760px; margin: 0 auto var(--space-6); line-height: 1.6;
}
.draft-banner strong { color: var(--warn); }
.legal-doc { max-width: 760px; margin: 0 auto; font-size: var(--text-sm); line-height: 1.7; }
.legal-doc h1 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.legal-doc h2 { font-size: var(--text-md); text-transform: none; letter-spacing: 0; color: var(--text); margin: var(--space-8) 0 var(--space-3); }
.legal-doc p { margin: 0 0 var(--space-4); color: var(--text-muted); }
.legal-doc ul, .legal-doc ol { color: var(--text-muted); padding-left: 22px; margin: 0 0 var(--space-4); }
.legal-doc li { margin-bottom: 6px; }
.legal-doc table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; font-size: var(--text-xs); }
.legal-doc th, .legal-doc td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.legal-doc th { color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; font-size: 10.5px; }
.legal-doc blockquote { border-left: 3px solid var(--data-orange); margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); background: var(--data-orange-soft); border-radius: 0 var(--radius) var(--radius) 0; }
.legal-doc blockquote p { margin: 0; color: var(--text); }
.legal-doc code { background: var(--panel-raised); }
.legal-placeholder { background: var(--data-orange-soft); color: var(--warn); padding: 1px 6px; border-radius: 4px; font-weight: 600; }

/* ---- status page ---- */
.status-row { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: var(--space-3); }
.status-row .sr-name { font-weight: 600; font-size: var(--text-sm); }
.status-row .sr-detail { font-size: var(--text-xs); color: var(--text-faint); margin-top: 2px; }

/* ---- footer ---- */
footer.site-footer {
  border-top: 1px solid var(--line); padding: var(--space-8) var(--space-6);
  padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom));
}
footer.site-footer .footer-inner {
  max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-6);
}
footer.site-footer h5 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin: 0 0 var(--space-3); }
footer.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
footer.site-footer a { color: var(--text-muted); text-decoration: none; font-size: var(--text-sm); }
footer.site-footer a:hover { color: var(--text); }
footer.site-footer .footer-bottom {
  max-width: 1080px; margin: var(--space-8) auto 0; padding-top: var(--space-5); border-top: 1px solid var(--line);
  color: var(--text-faint); font-size: var(--text-xs); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3);
}

@media (max-width: 640px) {
  .site-hero { padding: var(--space-8) var(--space-4) var(--space-6); }
  .site-section { padding: var(--space-8) var(--space-4); }
  .pricing-card.featured { order: -1; }
}