/* Page styles for products/ai4foi.html — extracted by design system refactor */
/* All tokens from /assets/css/styles.css apply. */

:root { --foi-green: #059669; --foi-green-soft: rgba(5,150,105,0.15); --foi-emerald: #34d399; }

    .dc-hero--foi,
.foi-hero { margin-top:0; background:var(--c-dark); position:relative; overflow:hidden; min-height:600px; display:flex; align-items:center; }
    .foi-hero-bg { position:absolute; inset:0; background:radial-gradient(ellipse at 60% 35%, rgba(5,150,105,0.2) 0%, transparent 55%), radial-gradient(ellipse at 5% 75%, rgba(52,211,153,0.08) 0%, transparent 45%), var(--c-dark); }
    .foi-hero-visual { position:absolute; right:5%; top:50%; transform:translateY(-50%); width:340px; height:380px; display:block; }
    .foi-hero-content {
      position: relative; z-index: 2;
      width: 100%;
      max-width: var(--cw); margin: 0 auto;
      padding: calc(var(--nav-h) + 5rem) var(--cp) 4rem;
    }
    .foi-hero-content__inner { max-width: 660px; }
    .foi-badge { display:inline-flex; align-items:center; gap:.5rem; padding:.3rem .9rem; background:rgba(5,150,105,0.15); border:1px solid rgba(5,150,105,0.4); border-radius: var(--r-full); font-size:.72rem; font-weight: var(--fw-semibold); color:#34d399; letter-spacing: var(--ls-wide); text-transform:uppercase; margin-bottom:1.5rem; }
    .enigma-tag { display:inline-flex; align-items:center; gap:.4rem; padding:.2rem .6rem; background:rgba(253,192,16,0.12); border:1px solid rgba(253,192,16,0.3); border-radius:4px; font-size:.7rem; font-weight: var(--fw-semibold); color:#fdc010; margin-left:.5rem; vertical-align:middle; }
    .foi-hero h1 { font-family:'Google Sans Display',sans-serif; font-size:clamp(2.2rem,4.5vw,3.6rem); font-weight: var(--fw-normal); line-height:1.1; color:#fff; margin-bottom:1.25rem; }
    .foi-hero h1 strong { font-weight: var(--fw-bold); color:#34d399; }
    .foi-hero-sub { font-size:1rem; color:rgba(255,255,255,.65); line-height: var(--lh-relaxed); max-width:650px; margin-bottom:1.75rem; }
    .foi-stats { display:flex; gap:2rem; flex-wrap:wrap; margin-bottom:2rem; }
    .foi-stat-item { text-align:center; }
    .foi-stat-num { font-family:'Google Sans Display',sans-serif; font-size:1.5rem; font-weight: var(--fw-bold); color:#34d399; line-height:1; }
    .foi-stat-label { font-size:.68rem; color:rgba(255,255,255,.4); letter-spacing:.06em; text-transform:uppercase; }
    .btn-foi { padding:.8rem 1.8rem; background:#059669; color:#fff; font-size:.9rem; font-weight: var(--fw-semibold); text-decoration:none; border-radius: var(--r-full); transition: background var(--t-fast); display:inline-flex; align-items:center; gap:.4rem; }
    .btn-foi:hover { background:#047857; }
    .foi-ctas { display:flex; gap:.75rem; flex-wrap:wrap; }
    .foi-trust { background:#111827; border-bottom:1px solid rgba(255,255,255,.06); padding:1.25rem 0; }
    .foi-trust-inner { max-width:var(--cw); margin:0 auto; padding:0 var(--cp); display:flex; gap:3rem; flex-wrap:wrap; align-items:center; }
    .foi-trust-item { display:flex; align-items:center; gap:.6rem; font-size:.82rem; color:rgba(255,255,255,.6); }
    .foi-trust-dot { width:6px; height:6px; border-radius:50%; background:#059669; }

    /* Document flow viz */
    .foi-doc-flow { display:flex; flex-direction:column; gap:.75rem; }
    .foi-doc { display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem; background:var(--surface-1); border:1px solid var(--surface-2); border-radius: var(--r-lg); }
    .foi-doc-icon { width:30px; height:30px; border-radius: var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:.8rem; flex-shrink:0; }
    .foi-doc-name { font-size:.8rem; color:var(--surface-text); font-weight: var(--fw-medium); }
    .foi-doc-type { font-size:.65rem; color:rgba(255,255,255,.35); }
    .foi-doc-status { margin-left:auto; padding:.15rem .5rem; border-radius: var(--r-full); font-size:.62rem; font-weight: var(--fw-semibold); }
    .status-parsed { background:rgba(52,211,153,.15); color:#34d399; }
    .status-indexed { background:rgba(253,192,16,.15); color:#fdc010; }
    .status-found { background:rgba(26,115,232,.15); color:#60a5fa; }
    .foi-ai-bar { padding:.6rem 1rem; background:rgba(5,150,105,.1); border:1px solid rgba(5,150,105,.25); border-radius: var(--r-lg); font-size:.75rem; font-weight: var(--fw-semibold); color:#34d399; margin-top:.25rem; }

    .pd-section { padding: var(--sv) 0; }
    .pd-section.gray { background:#f8f9fa; }
    .pd-section.dark { background:var(--c-dark); color:white; }
    .pd-section.dark2 { background:#111827; color:white; }
    /* pd-container → styles.css */
    .section-eyebrow { font-size:.7rem; font-weight: var(--fw-semibold); letter-spacing: var(--ls-wider); text-transform:uppercase; margin-bottom:.75rem; color:#059669; }
    .pd-section.dark .section-eyebrow, .pd-section.dark2 .section-eyebrow { color:#34d399; }
    .pd-h2 { font-family:'Google Sans Display',sans-serif; font-size:clamp(1.8rem,3.5vw,2.6rem); font-weight: var(--fw-normal); color:#202124; line-height:1.15; margin-bottom:1rem; }
    .pd-section.dark .pd-h2, .pd-section.dark2 .pd-h2 { color:#fff; }
    .pd-lead { font-size:1rem; color:#3c4043; line-height: var(--lh-relaxed); max-width:680px; margin-bottom:2rem; }
    .pd-section.dark .pd-lead, .pd-section.dark2 .pd-lead { color:rgba(255,255,255,.65); }

    /* Problem */
    .problem-2col { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
    .problem-pains { display:flex; flex-direction:column; gap:.85rem; margin-top:1.5rem; }
    .pain-item { display:flex; align-items:flex-start; gap:.75rem; padding:1.5rem; background:#fff; border:1px solid #e8eaed; border-radius: var(--r-xl); border-left:3px solid #dc2626; }
    .pain-icon { font-size:1.1rem; flex-shrink:0; }
    .pain-title { font-size:.875rem; font-weight: var(--fw-semibold); color:#202124; margin-bottom:.2rem; }
    .pain-body { font-size:.8rem; color:#5f6368; line-height: var(--lh-snug); }

    /* EnigmaAI Section */
    .enigma-section { padding: var(--sv) 0; background:linear-gradient(135deg, var(--c-dark) 0%, #0a1628 100%); border-top:1px solid rgba(253,192,16,.15); border-bottom:1px solid rgba(253,192,16,.15); }
    .enigma-inner { max-width:var(--cw); margin:0 auto; padding:0 var(--cp); }
    .enigma-header { display:flex; align-items:center; gap:1rem; margin-bottom:.75rem; }
    .enigma-logo { width:52px; height:52px; background:linear-gradient(135deg, #fdc010, #f59e0b); border-radius: var(--r-md); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1rem; color:var(--c-dark); }
    .enigma-name { font-family:'Google Sans Display',sans-serif; font-size:1.6rem; font-weight: var(--fw-normal); color:#fff; }
    .enigma-name span { color:#fdc010; font-weight: var(--fw-bold); }
    .enigma-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; margin-top:2rem; }
    .enigma-features { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
    .enigma-feat { padding:1.5rem; background:var(--surface-1); border:1px solid rgba(253,192,16,.12); border-radius: var(--r-xl); }
    .enigma-feat-title { font-size:.8rem; font-weight: var(--fw-semibold); color:#fdc010; margin-bottom:.25rem; }
    .enigma-feat-body { font-size:.75rem; color:rgba(255,255,255,.55); line-height: var(--lh-snug); }
    .enigma-benefits { list-style:none; padding:0; }
    .enigma-benefits li { display:flex; align-items:flex-start; gap:.65rem; padding:.5rem 0; border-bottom:1px solid rgba(255,255,255,.05); font-size:.875rem; color:var(--surface-text); }
    .enigma-benefits li:last-child { border-bottom:none; }
    .eb-dot { width:18px; height:18px; border-radius:50%; background:rgba(253,192,16,.15); flex-shrink:0; display:flex; align-items:center; justify-content:center; margin-top:1px; }

    /* Feature modules */
    .foi-modules-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.06); margin-top:3rem; }
    .foi-module { background:#111827; padding:2rem; position:relative; overflow:hidden; transition: background var(--t-base); }
    .foi-module::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:#059669; transform:scaleX(0); transform-origin:left; transition: transform var(--t-slow); }
    .foi-module:hover { background:#1a1f2e; }
    .foi-module:hover::after { transform:scaleX(1); }
    .foi-mod-num { font-family:'Google Sans Display',sans-serif; font-size:2.5rem; color:rgba(5,150,105,.2); line-height:1; margin-bottom:.5rem; }
    .foi-mod-title { font-size:.875rem; font-weight: var(--fw-semibold); color:#fff; margin-bottom:.5rem; }
    .foi-mod-body { font-size:.77rem; color:var(--surface-muted); line-height: var(--lh-normal); }

    /* Repositories */
    .repos-section { padding: var(--sv) 0; background:#fff; border-top:1px solid #e8eaed; }
    .repos-grid { display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem; }
    .repo-pill { display:inline-flex; align-items:center; gap:.6rem; padding:.9rem 1.5rem; background:#f8f9fa; border:1px solid #e8eaed; border-radius: var(--r-full); font-size:.85rem; font-weight: var(--fw-medium); color:#3c4043; transition: border-color var(--t-fast), color var(--t-fast); }
    .repo-pill:hover { border-color:#059669; color:#059669; }
    .repo-dot { width:8px; height:8px; border-radius:50%; background:#059669; flex-shrink:0; }

    /* 4-step flow */
    .foi-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:2.5rem; position:relative; }
    .foi-steps::before { content:''; position:absolute; top:2rem; left:4rem; right:4rem; height:1px; background:linear-gradient(90deg, rgba(5,150,105,.4), rgba(52,211,153,.4)); }
    .foi-step { text-align:center; padding:0 1rem; }
    .foi-step-num { width:52px; height:52px; border-radius:50%; background:#059669; color:#fff; font-family:'Google Sans Display',sans-serif; font-size:1.2rem; font-weight: var(--fw-bold); display:flex; align-items:center; justify-content:center; margin:0 auto 1.25rem; position:relative; z-index:1; }
    .foi-step h3 { font-size:.9rem; font-weight: var(--fw-semibold); color:#fff; margin-bottom:.4rem; }
    .foi-step p { font-size:.8rem; color:rgba(255,255,255,.5); line-height: var(--lh-normal); }

    /* Value */
    .value-list { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2rem; }
    .value-item { display:flex; align-items:flex-start; gap:.85rem; padding:1.5rem; background:#fff; border:1px solid #e8eaed; border-radius: var(--r-xl); }
    .value-check { width:22px; height:22px; border-radius:50%; background:rgba(5,150,105,.1); flex-shrink:0; display:flex; align-items:center; justify-content:center; margin-top:1px; color:#059669; }
    .value-text { font-size:.875rem; color:#3c4043; line-height:1.55; }

    /* CTA */
    .foi-value-grid {
      display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; margin-top: 2.5rem;
    }
    .foi-value-card {
      background: #fff; border: 1px solid #e8eaed; border-radius: var(--r-md);
      padding: 1.75rem; display: flex; flex-direction: column;
      transition: box-shadow var(--t-base), transform .2s;
    }
    .foi-value-card:hover { box-shadow: 0 4px 24px rgba(0,0,0,.07); transform: translateY(-2px); }
    .foi-value-icon {
      width: 46px; height: 46px; border-radius: var(--r-md);
      background: rgba(5,150,105,.08); color: #059669;
      display: flex; align-items: center; justify-content: center; margin-bottom: 1rem;
    }
    .foi-value-num { font-family: 'Google Sans Display', sans-serif; font-size: 1.5rem; font-weight: var(--fw-bold); color: #202124; margin-bottom: .25rem; line-height: 1; }
    .foi-value-title { font-size: .82rem; font-weight: var(--fw-semibold); color: #5f6368; text-transform: uppercase; letter-spacing: var(--ls-tight); margin-bottom: .6rem; }
    .foi-value-body { font-size: .82rem; color: #5f6368; line-height: var(--lh-normal); }
    @media (max-width: 992px) { .foi-value-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 600px)  { .foi-value-grid { grid-template-columns: 1fr; } }

    .foi-cta-section {
      text-align: center; padding: var(--sv) 0;
      background: var(--c-dark);
      position: relative; overflow: hidden;
    }
    .foi-cta-section h2 { font-family:'Google Sans Display',sans-serif; font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: var(--fw-bold); color:#fff; line-height: 1.12; letter-spacing: -.01em; margin-bottom:1rem; }
    .foi-cta-section p { font-size:1rem; color:rgba(255,255,255,.6); max-width: 520px; margin: 0 auto 2.25rem; line-height:1.7; }
    .foi-cta-btns { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }

    /* Layout breakpoints → assets/css/responsive.css */

    /* ═══════════════════════════════════════════════
       MOBILE REDESIGN — product page
    ═══════════════════════════════════════════════ */
    @media (max-width: 768px) {
      /* Hero */
      .dh-hero, .ns-hero, .foi-hero { min-height: auto; }
      .dh-hero-content, .ns-hero-content, .foi-hero-content {
        padding-top: calc(var(--nav-h) + 2.75rem);
        padding-bottom: 3rem;
      }
      /* Challenge/pain cards — 1 col */
      .challenge-grid { grid-template-columns: 1fr !important; gap: 1rem; }
      /* Comparison table */
      .comparison-table { font-size: .78rem; }
      .comparison-table th, .comparison-table td { padding: .6rem .75rem; }
    }

    @media (max-width: 600px) {
      /* Hero text */
      .dh-hero-content h1,
      .ns-hero-content h1,
      .foi-hero-content h1 {
        font-size: clamp(1.8rem, 7.5vw, 2.4rem);
        line-height: 1.15;
      }

      /* Capability grid → 1 col */
      .caps-grid, .modules-grid, .foi-modules-grid {
        grid-template-columns: 1fr !important;
        gap: .75rem;
      }
      .cap-card, .module-card {
        padding: 1.1rem;
        border-radius: var(--r-md);
      }

      /* Challenge cards */
      .challenge-grid { grid-template-columns: 1fr !important; gap: .75rem; }
      .challenge-card {
        padding: 1.1rem;
        border-radius: var(--r-md);
      }
      .challenge-icon { width: 40px; height: 40px; border-radius: var(--r-sm,10px); margin-bottom: .75rem; }

      /* Benefit/value cards */
      .dh-benefit-grid, .foi-value-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: .75rem;
      }
      .dh-benefit-card, .foi-value-card { padding: 1.1rem; border-radius: var(--r-md); }
      .dh-benefit-num, .foi-value-num { font-size: 1.3rem; }

      /* FOI steps */
      .foi-steps { grid-template-columns: 1fr !important; gap: .75rem; }
      .foi-steps::before { display: none; }

      /* Comparison table — horizontal scroll */
      .comparison-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
      .comparison-table { min-width: 480px; font-size: .75rem; }
      .comparison-table th, .comparison-table td { padding: .5rem .65rem; }

      /* Pain items */
      .problem-pains { gap: .65rem; }
      .pain-item { gap: .65rem; padding: .85rem; border-radius: var(--r-md); }
      .pain-svg-icon { width: 34px; height: 34px; border-radius: var(--r-sm); }
      .pain-title { font-size: .82rem; }
      .pain-body  { font-size: .75rem; }

      /* CTA buttons */
      .dh-cta, .ns-cta, .foi-cta { text-align: center; }
      .dh-cta .dh-cta-btns,
      .ns-cta .ns-cta-btns,
      .foi-cta .foi-cta-btns,
      .dh-cta-btns, .ns-cta-btns, .foi-cta-section .foi-cta-btns {
        flex-wrap: wrap !important;
        gap: .5rem !important;
        justify-content: center !important;
      }
      .dh-cta-btns a, .ns-cta-btns a, .foi-cta-btns a {
        flex: 1; min-width: 140px;
        text-align: center !important;
        justify-content: center !important;
      }
    }

    @media (max-width: 390px) {
      .dh-benefit-grid, .foi-value-grid { grid-template-columns: 1fr !important; }
      .cap-card, .module-card, .challenge-card { padding: .9rem; }
    }