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

:root { --ns-teal: #0891b2; --ns-teal-soft: rgba(8,145,178,0.15); --ns-cyan: #22d3ee; }

    .dc-hero--ns,
.ns-hero { margin-top:0; background:var(--c-dark); position:relative; overflow:hidden; min-height:600px; display:flex; align-items:center; }
    .ns-hero-bg { position:absolute; inset:0; background: radial-gradient(ellipse at 65% 40%, rgba(8,145,178,0.2) 0%, transparent 55%), radial-gradient(ellipse at 10% 70%, rgba(34,211,238,0.08) 0%, transparent 45%), var(--c-dark); }
    #nsCanvas { position:absolute; right:0; top:0; width:50%; height:100%; display:block; opacity:0.7; }
    .ns-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;
    }
    .ns-hero-content__inner { max-width: 660px; }
    .ns-badge { display:inline-flex; align-items:center; gap:.5rem; padding:.3rem .9rem; background:rgba(8,145,178,0.15); border:1px solid rgba(8,145,178,0.35); border-radius: var(--r-full); font-size:.72rem; font-weight: var(--fw-semibold); color:#22d3ee; letter-spacing: var(--ls-wide); text-transform:uppercase; margin-bottom:1.5rem; }
    .ns-hero h1 { font-family:'Google Sans Display',sans-serif; font-size:clamp(2.4rem,5vw,3.8rem); font-weight: var(--fw-normal); line-height:1.1; color:#fff; margin-bottom:1.25rem; }
    .ns-hero h1 strong { font-weight: var(--fw-bold); color:#22d3ee; }
    .ns-hero-sub { font-size:1rem; color:rgba(255,255,255,.65); line-height: var(--lh-relaxed); max-width:650px; margin-bottom:2.5rem; }
    .ns-stats { display:flex; gap:2.5rem; flex-wrap:wrap; margin-bottom:2rem; }
    .ns-stat-item { text-align:center; }
    .ns-stat-num { font-family:'Google Sans Display',sans-serif; font-size:1.8rem; font-weight: var(--fw-bold); color:#22d3ee; line-height:1; }
    .ns-stat-label { font-size:.7rem; color:var(--surface-muted); letter-spacing:.06em; text-transform:uppercase; }
    .btn-ns { padding:.8rem 1.8rem; background:#0891b2; 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-ns:hover { background:#0e7490; }
    .ns-ctas { display:flex; gap:.75rem; flex-wrap:wrap; }

    .ns-trust { background:#111827; border-bottom:1px solid rgba(255,255,255,.06); padding:1.25rem 0; }
    .ns-trust-inner { max-width:var(--cw); margin:0 auto; padding:0 var(--cp); display:flex; gap:4rem; flex-wrap:wrap; align-items:center; }
    .ns-trust-item { display:flex; align-items:center; gap:.6rem; font-size:.82rem; color:rgba(255,255,255,.6); }
    .ns-trust-dot { width:6px; height:6px; border-radius:50%; background:#0891b2; }

    .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:#0891b2; }
    .pd-section.dark .section-eyebrow, .pd-section.dark2 .section-eyebrow { color:#22d3ee; }
    .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); }

    /* Breadcrumb */

    /* Challenge cards */
    .challenge-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:2.5rem; }
    .challenge-card { padding:2rem; border:1px solid #e8eaed; border-radius: var(--r-xl); background:#fff; border-top:3px solid; }
    .challenge-card:nth-child(1) { border-top-color:#dc2626; }
    .challenge-card:nth-child(2) { border-top-color:#ea580c; }
    .challenge-card:nth-child(3) { border-top-color:#d97706; }
    .challenge-card:nth-child(4) { border-top-color:#7c3aed; }
    .challenge-title { font-size:1rem; font-weight: var(--fw-semibold); color:#202124; margin-bottom:.5rem; }
    .challenge-body { font-size:.875rem; color:#5f6368; line-height: var(--lh-normal); }

    /* How it works */
    .hiw-steps { display:flex; gap:0; margin-top:2.5rem; position:relative; }
    .hiw-steps::before { content:''; position:absolute; top:2rem; left:4rem; right:4rem; height:1px; background:linear-gradient(90deg, rgba(8,145,178,.4), rgba(34,211,238,.4)); }
    .hiw-step { flex:1; text-align:center; padding:0 1rem; }
    .hiw-num { width:52px; height:52px; border-radius:50%; background:#0891b2; 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; }
    .hiw-step h3 { font-size:.9rem; font-weight: var(--fw-semibold); color:#fff; margin-bottom:.4rem; }
    .hiw-step p { font-size:.8rem; color:rgba(255,255,255,.55); line-height: var(--lh-normal); }

    /* 12 Module grid */
    .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; }
    .module-card { background:#111827; padding:2rem; transition: background var(--t-base); position:relative; overflow:hidden; }
    .module-card::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:#0891b2; transform:scaleX(0); transform-origin:left; transition: transform var(--t-slow); }
    .module-card:hover { background:#1a1f2e; }
    .module-card:hover::after { transform:scaleX(1); }
    .module-icon { width:48px; height:48px; border-radius: var(--r-md); background:rgba(8,145,178,.15); color:#22d3ee; display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
    .module-title { font-size:.875rem; font-weight: var(--fw-semibold); color:#fff; margin-bottom:.5rem; }
    .module-list { list-style:none; padding:0; }
    .module-list li { font-size:.75rem; color:var(--surface-muted); padding:.15rem 0; display:flex; align-items:center; gap:.35rem; }
    .module-list li::before { content:''; width:3px; height:3px; border-radius:50%; background:#0891b2; flex-shrink:0; }

    /* Fault debug */
    .fault-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:2rem; }
    .fault-col { padding:2rem; border-radius: var(--r-xl); }
    .fault-col.green { background:rgba(5,150,105,.08); border:1px solid rgba(5,150,105,.2); }
    .fault-col.red { background:rgba(220,38,38,.08); border:1px solid rgba(220,38,38,.2); }
    .fault-col h3 { font-size:.85rem; font-weight: var(--fw-semibold); margin-bottom:1rem; }
    .fault-col.green h3 { color:#4ade80; }
    .fault-col.red h3 { color:#f87171; }
    .fault-item { display:flex; align-items:flex-start; gap:.6rem; margin-bottom:.65rem; font-size:.82rem; color:rgba(255,255,255,.6); line-height: var(--lh-snug); }
    .fault-dot { width:5px; height:5px; border-radius:50%; margin-top:6px; flex-shrink:0; }
    .fault-col.green .fault-dot { background:#4ade80; }
    .fault-col.red .fault-dot { background:#f87171; }

    /* Comparison table */
    .comp-wrap { overflow-x:auto; margin-top:2.5rem; border-radius: var(--r-xl); border:1px solid rgba(255,255,255,.1); }
    .comp-table { width:100%; border-collapse:collapse; font-size:.82rem; min-width:700px; }
    .comp-table th { padding:.85rem 1rem; background:var(--surface-1); color:rgba(255,255,255,.6); font-weight: var(--fw-medium); text-align:left; border-bottom:1px solid var(--surface-border); white-space:nowrap; }
    .comp-table th.ns-col { color:#22d3ee; font-weight: var(--fw-bold); }
    .comp-table td { padding:.6rem 1rem; color:var(--surface-text); border-bottom:1px solid var(--surface-1); }
    .comp-table tr:last-child td { border-bottom:none; font-weight: var(--fw-bold); }
    .comp-table tr:last-child td:first-child { color:rgba(255,255,255,.5); }
    .comp-table td.ns-col { color:#22d3ee; font-weight: var(--fw-semibold); }
    .check { color:#4ade80; }
    .cross { color:rgba(255,255,255,.2); }
    .partial { color:#fdc010; }
    .score-ns { color:#22d3ee; font-size:1rem; font-weight: var(--fw-bold); }
    .score-other { color:rgba(255,255,255,.35); }

    /* Why section */
    .why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.5rem; }
    .why-card { padding:2rem; background:#fff; border:1px solid #e8eaed; border-radius: var(--r-xl); transition: box-shadow var(--t-base); }
    .why-card:hover { box-shadow:0 4px 20px rgba(0,0,0,.08); }
    .why-icon { width:48px; height:48px; border-radius: var(--r-md); background:rgba(8,145,178,.1); color:#0891b2; display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
    .why-title { font-size:.95rem; font-weight: var(--fw-semibold); color:#202124; margin-bottom:.4rem; }
    .why-body { font-size:.85rem; color:#5f6368; line-height: var(--lh-normal); }

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

    /* Layout breakpoints → assets/css/responsive.css */
    /* Page-specific canvas behaviour */
    @media(max-width:992px){ #nsCanvas { display:none; } }

    /* ═══════════════════════════════════════════════
       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; }
    }