/* ==========================================================================
   Field Ascend marketing site: shared chrome + design tokens.
   Loaded by every page that carries the stamped header/footer
   (ops/stamp-marketing-chrome.py). Pages keep their own page-specific
   <style> AFTER this link, so page rules win on ties.

   TO RE-SKIN THE WHOLE MARKETING SITE: edit the :root block below, then run
   `python ops/stamp-marketing-chrome.py --stamp` so every page picks up the
   new ?v= content hash (nginx + Cloudflare cache .css for a month otherwise).
   Nothing in this file is used by the logged-in portals (they use header.php,
   compiled Tailwind and the --fa-* theme variables; the prefix here is --fa-m-).
   ========================================================================== */

:root {
    --fa-m-font: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Palette (stone) */
    --fa-m-ink: #1c1917;        /* headings, primary buttons, emphasis */
    --fa-m-ink-2: #292524;      /* primary button hover */
    --fa-m-body: #44403c;       /* nav links, body copy */
    --fa-m-muted: #57534e;      /* secondary copy, footer text */
    --fa-m-faint: #a8a29e;      /* hints, breadcrumb separators */
    --fa-m-line: #e7e5e4;       /* borders */
    --fa-m-line-2: #d6d3d1;     /* hover borders */
    --fa-m-panel: #fafaf9;      /* alternate sections, tinted cards */
    --fa-m-bg: #ffffff;
    --fa-m-on-ink: #ffffff;     /* text on ink buttons */

    /* Shape */
    --fa-m-radius: 12px;
    --fa-m-radius-sm: 8px;

    /* Chrome */
    --fa-m-nav-bg: rgba(255, 255, 255, 0.92);
    --fa-m-nav-h: 70px;
    --fa-m-container: 1200px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, h5, h6 { font-family: var(--fa-m-font); }
body { color: var(--fa-m-ink); line-height: 1.7; background: var(--fa-m-bg); }
.container { max-width: var(--fa-m-container); margin: 0 auto; padding: 0 20px; }

/* --------------------------------------------------------------------------
   Header / nav (stamped block: ops/marketing-chrome/nav.html)
   -------------------------------------------------------------------------- */
nav#nav { position: fixed; top: 0; width: 100%; background: var(--fa-m-nav-bg); backdrop-filter: blur(8px); z-index: 1000; box-shadow: none; border-bottom: 1px solid var(--fa-m-line); }
nav#nav .container { max-width: var(--fa-m-container); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fa-m-ink); }
.logo img { height: 40px; width: 40px; }
.logo-text { font-weight: 650; font-size: 1.2rem; letter-spacing: -0.02em; }
.nav-links { display: flex; list-style: none; gap: 20px; align-items: center; margin: 0; padding: 0; }
.nav-links a { text-decoration: none; color: var(--fa-m-body); font-weight: 500; font-size: .95rem; transition: color .3s; }
.nav-links a:hover { color: var(--fa-m-ink); }
nav#nav .nav-links a.btn-primary { background: var(--fa-m-ink); color: var(--fa-m-on-ink) !important; -webkit-text-fill-color: var(--fa-m-on-ink); padding: 9px 16px; font-size: 15px; border-radius: var(--fa-m-radius-sm); font-weight: 600; text-decoration: none; display: inline-block; border: 1px solid var(--fa-m-ink); cursor: pointer; }
nav#nav .nav-links a.btn-primary:hover { color: var(--fa-m-on-ink) !important; -webkit-text-fill-color: var(--fa-m-on-ink); background: var(--fa-m-ink-2); transform: none; box-shadow: none; }
.mobile-menu-btn { display: none; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--fa-m-ink); }

/* The nav collapses at 991px (not 768px): nine items plus the region globe do
   not fit a 800px tablet in one row. */
@media (max-width: 991px) {
    nav#nav .nav-links { display: none; }
    .mobile-menu-btn { display: block; }
    nav#nav.mobile-open .nav-links { display: flex; flex-direction: column; position: absolute; top: var(--fa-m-nav-h); left: 0; right: 0; background: var(--fa-m-bg); padding: 20px; gap: 15px; border-bottom: 1px solid var(--fa-m-line); box-shadow: 0 4px 20px rgba(0, 0, 0, .1); }
}

/* --------------------------------------------------------------------------
   Breadcrumb (page-owned markup, shared look)
   -------------------------------------------------------------------------- */
.breadcrumb { background: var(--fa-m-bg); padding: 15px 20px; margin-top: var(--fa-m-nav-h); border-bottom: 1px solid var(--fa-m-line); }
.breadcrumb .container { display: flex; align-items: center; gap: 8px; font-size: .9rem; flex-wrap: wrap; }
.breadcrumb a { color: var(--fa-m-body); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { color: var(--fa-m-faint); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn-primary, .btn-secondary, .btn-white, .btn-outline { display: inline-block; padding: 12px 20px; border-radius: var(--fa-m-radius-sm); font-weight: 600; text-decoration: none; transition: background .2s, border-color .2s; cursor: pointer; }
.btn-primary { color: var(--fa-m-on-ink); background: var(--fa-m-ink); border: 1px solid var(--fa-m-ink); }
.btn-secondary, .btn-outline { color: var(--fa-m-ink); background: var(--fa-m-bg); border: 1px solid var(--fa-m-line); }
.btn-white { color: var(--fa-m-on-ink); background: var(--fa-m-ink); border: 1px solid var(--fa-m-ink); }
.btn-primary:hover, .btn-white:hover { background: var(--fa-m-ink-2); box-shadow: none; transform: none; }
.btn-secondary:hover, .btn-outline:hover { background: var(--fa-m-panel); border-color: var(--fa-m-line-2); box-shadow: none; transform: none; }

/* --------------------------------------------------------------------------
   Section primitives (from the Core page design)
   -------------------------------------------------------------------------- */
.section { padding: 72px 20px; }
.section.alt { background: var(--fa-m-panel); }
.section.dark { color: var(--fa-m-ink); background: var(--fa-m-bg); }
.section h2 { text-align: center; font-size: 2rem; line-height: 1.18; letter-spacing: -0.03em; font-weight: 650; margin-bottom: 18px; }
.section h2 span { color: var(--fa-m-ink); }
.section-intro { max-width: 640px; margin: 0 auto 32px; color: var(--fa-m-muted); text-align: center; font-size: 1.05rem; }
.dark .section-intro { color: var(--fa-m-muted); }

.answer-box { max-width: 1040px; margin: 0 auto; padding: 30px; border-radius: var(--fa-m-radius); border: 1px solid var(--fa-m-line); background: var(--fa-m-panel); }
.answer-box h2 { text-align: left; font-size: 1.55rem; margin-bottom: 9px; }
.answer-box p { color: var(--fa-m-muted); margin-bottom: 10px; }
.answer-box p:last-child { margin-bottom: 0; }

.grid-3, .status-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card { padding: 26px; border-radius: var(--fa-m-radius); border: 1px solid var(--fa-m-line); background: var(--fa-m-bg); box-shadow: none; }
.card .icon { font-size: 2rem; margin-bottom: 11px; }
.card h3 { font-size: 1.22rem; margin-bottom: 9px; }
.card p { color: var(--fa-m-muted); }

.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-bottom: 68px; }
.feature-row:last-child { margin-bottom: 0; }
.feature-row.reverse { direction: rtl; }
.feature-row.reverse > * { direction: ltr; }
.feature-copy h3 { font-size: 1.76rem; letter-spacing: -0.03em; margin-bottom: 12px; }
.feature-copy p { color: var(--fa-m-muted); margin-bottom: 14px; }
.feature-copy ul { list-style: none; margin-top: 16px; }
.feature-copy li { position: relative; padding: 7px 0 7px 28px; color: var(--fa-m-muted); }
.feature-copy li::before { content: "\2713"; position: absolute; left: 0; color: var(--fa-m-ink); font-weight: 700; }
.feature-copy a, .faq-card a { color: var(--fa-m-ink); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.feature-image { padding: 0; border-radius: var(--fa-m-radius); border: 1px solid var(--fa-m-line); background: var(--fa-m-bg); overflow: hidden; }
.feature-image img { display: block; width: 100%; height: auto; border-radius: var(--fa-m-radius); box-shadow: none; }

.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.process-step { text-align: left; padding: 14px 0 0; border: 0; border-top: 1px solid var(--fa-m-line); border-radius: 0; background: transparent; }
.process-step strong { display: block; margin-bottom: 6px; color: var(--fa-m-ink); font-size: .9rem; }

.guard-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.guard-card { padding: 23px; border-radius: var(--fa-m-radius); border: 1px solid var(--fa-m-line); background: var(--fa-m-bg); }
.guard-card h3 { color: var(--fa-m-ink); margin-bottom: 8px; font-size: 1.16rem; }
.guard-card p { color: var(--fa-m-muted); }

.status-card { padding: 28px; border-radius: var(--fa-m-radius); background: var(--fa-m-bg); border: 1px solid var(--fa-m-line); }
.status-card .label { display: inline-block; margin-bottom: 12px; font-size: .76rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--fa-m-muted); }
.status-card h3 { margin-bottom: 10px; }
.status-card p, .status-card li { color: var(--fa-m-muted); }
.status-card ul { margin: 12px 0 0 20px; }

.faq-grid, .related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.faq-card, .related-card { padding: 24px; border: 1px solid var(--fa-m-line); border-radius: var(--fa-m-radius); background: var(--fa-m-bg); box-shadow: none; }
.faq-card h3 { margin-bottom: 8px; font-size: 1.15rem; }
.faq-card p { color: var(--fa-m-muted); }
.related-card { color: inherit; text-decoration: none; transition: border-color .2s; }
.related-card:hover { border-color: var(--fa-m-ink); }
.related-card strong { display: block; color: var(--fa-m-ink); margin-bottom: 5px; }
.related-card span { color: var(--fa-m-muted); }

.cta-section { padding: 64px 20px; color: var(--fa-m-ink); text-align: center; background: var(--fa-m-panel); border-top: 1px solid var(--fa-m-line); }
.cta-section h2 { font-size: 2rem; letter-spacing: -0.03em; margin-bottom: 16px; }
.cta-section p { max-width: 640px; margin: 0 auto 27px; font-size: 1.05rem; color: var(--fa-m-muted); }

@media (max-width: 960px) {
    .hero-grid, .feature-row, .grid-3, .status-grid { grid-template-columns: 1fr; }
    .feature-row.reverse { direction: ltr; }
    .process { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .section h2, .cta-section h2 { font-size: 1.95rem; }
    .process, .guard-grid, .faq-grid, .related-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Footer (stamped block: ops/marketing-chrome/footer.html)
   -------------------------------------------------------------------------- */
footer.fa-footer { background: var(--fa-m-bg); color: var(--fa-m-ink); padding: 48px 20px 36px; text-align: center; border-top: 1px solid var(--fa-m-line); }
footer.fa-footer p { margin-bottom: 5px; color: var(--fa-m-muted); opacity: 1; }
footer.fa-footer .fa-footer-note { font-size: 12px; margin-top: 10px; color: var(--fa-m-faint); }
footer.fa-footer .fa-footer-social { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; margin: 18px 0 10px; }
.social-link { display: inline-flex; align-items: center; gap: 8px; color: var(--fa-m-ink); text-decoration: none; padding: 8px 16px; border: 1px solid var(--fa-m-line); border-radius: var(--fa-m-radius-sm); font-size: .9rem; transition: background .2s, border-color .2s; }
.social-link svg { fill: currentColor; }
.social-link:hover { background: var(--fa-m-panel); border-color: var(--fa-m-line-2); }
footer.fa-footer .fa-footer-badges { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin: 20px 0 10px; }
footer.fa-footer .fa-footer-badges .sf-root { width: 80px; }
footer.fa-footer .fa-footer-links { margin-top: 20px; display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
footer.fa-footer .fa-footer-links a { color: var(--fa-m-muted); text-decoration: none; font-size: 14px; }
footer.fa-footer .fa-footer-links a:hover { color: var(--fa-m-ink); text-decoration: underline; }