*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      /* Design Spec v2 — Phase 3 tokens */
      --surface-0: #FFFFFF;
      --surface-1: #F7F8F7;
      --surface-2: #EEF0EE;
      --border: #D8DCDA;
      --border-strong: #8E978F;
      --text-900: #141A17;
      --text-600: #5B6560;
      --ink-900: #0E1A14;
      --ink-text-on-dark: #FFFFFF;
      --ink-accent-on-dark: #4ADE80;

      --green-600: #1D9E52;
      --green-700: #145F34;
      --green-100: #E8F5EE;
      /* Accessible text green. --green-600 is only 3.46:1 on white, which fails
         WCAG AA for normal-size text (needs 4.5:1). Use --green-text for any
         TEXT or icon glyph on a light background; keep --green-600 for
         decorative fills, borders and large graphics. 4.86:1 on white. */
      --green-text: #198244;

      --accent-siteiq: #145F34;
      --accent-terrainiq: #3B6E8C;
      --accent-layoutiq: #1F5C52;
      --accent-yieldiq: #8A6A1F;
      --accent-revenueiq: #33395C;
      --accent-report: #0E1A14;

      --radius-sm: 6px;
      --radius-md: 10px;
      --radius-lg: 14px;
      --radius-pill: 999px;
      --shadow-sm: 0 1px 3px rgba(14,26,20,0.06);
      --shadow-md: 0 8px 24px rgba(14,26,20,0.10);

      --font-sans: 'Inter', 'Segoe UI', system-ui, sans-serif;
      --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
      --text-display: clamp(2.375rem, 5vw, 3.75rem);
      --text-h2: clamp(1.625rem, 3vw, 2.25rem);
      --text-h3: 1.5rem;
      --text-body-lg: 1.2rem;
      --text-body: 1.125rem;
      --text-ui: 0.95rem;
      --text-micro: 0.8rem;

      --section-x: clamp(1.25rem, 4vw, 2.5rem);
      --section-y: 5.5rem;
      --section-y-compact: 4rem;
      --leading: 1.65;

      /* Legacy aliases → Spec tokens (call sites keep old names) */
      --green: var(--green-600);
      --green-dk: var(--green-700);
      --green-lt: var(--green-100);
      --green-md: var(--ink-accent-on-dark);
      --bg: var(--surface-0);
      --bg2: var(--surface-1);
      --card: var(--surface-0);
      --text: var(--text-900);
      --muted: var(--text-600);
      --text-sm: var(--text-ui);
      --text-body-legacy: var(--text-body-lg);

      /* Module accent map (was collapsed onto green) */
      --blue: var(--accent-terrainiq);
      --blue-lt: color-mix(in srgb, var(--accent-terrainiq) 12%, white);
      --teal: var(--accent-layoutiq);
      --teal-dk: var(--accent-layoutiq);
      --teal-lt: color-mix(in srgb, var(--accent-layoutiq) 12%, white);
      --amber: var(--accent-yieldiq);
      --amber-lt: color-mix(in srgb, var(--accent-yieldiq) 12%, white);
      --violet: var(--accent-revenueiq);
      --violet-lt: color-mix(in srgb, var(--accent-revenueiq) 12%, white);
      --coral: var(--accent-siteiq);
      --coral-lt: var(--green-100);
    }

    html { scroll-behavior: smooth; }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .hero-badge span.dot { animation: none; }
    }
    body { font-family: var(--font-sans); background: var(--surface-0); color: var(--text-900); font-size: var(--text-body); line-height: var(--leading); }
    :focus-visible { outline: 2px solid var(--green-700); outline-offset: 2px; }
    /* Engineering / data figures only — never headings, nav, body copy, or buttons */
    .eng-num,
    .stat-num,
    .stats-bar-num,
    .price-amount,
    .preview-metrics .metric-value,
    .ba-payoff-before,
    .ba-payoff-after,
    .case-study-facts .eng-num {
      font-family: var(--font-mono);
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.01em;
    }
    body.nav-menu-open { overflow: hidden; }

    /* ── NAV ── */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0.9rem var(--section-x);
      background: rgba(245,247,245,0.96);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--border);
      transition: box-shadow .25s, border-color .25s;
    }
    nav.nav-scrolled {
      box-shadow: 0 4px 24px rgba(0,0,0,.08);
      border-bottom-color: rgba(212,224,212,.85);
    }
    .nav-logo { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
    .nav-logo-mark { display:flex; align-items:center; }
    .nav-brand { font-size: 1.15rem; font-weight: 800; color: var(--text); letter-spacing: -0.02em; }
    .nav-right { display: flex; align-items: center; gap: 1.5rem; }
    .nav-links { display: flex; align-items: center; gap: 1.65rem; }
    .nav-links a { text-decoration: none; color: var(--muted); font-size: 0.95rem; font-weight: 500; transition: color .2s; }
    .nav-links a:hover { color: var(--green-text); }
    .nav-cta {
      background: var(--green); color: #fff !important;
      padding: 0.5rem 1.1rem; border-radius: 7px;
      font-weight: 600 !important; font-size: 0.85rem !important;
      transition: background .2s, box-shadow .2s;
    }
    .nav-cta:hover { background: var(--green-dk) !important; box-shadow: 0 4px 14px rgba(29,158,82,.3); }
    .nav-menu-btn {
      display: none; align-items: center; justify-content: center;
      width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--border);
      border-radius: 9px; background: var(--card); color: var(--text);
      cursor: pointer; flex-shrink: 0;
    }
    .nav-menu-btn svg { width: 22px; height: 22px; }
    .nav-menu-btn .icon-close { display: none; }
    nav.nav-open .nav-menu-btn .icon-open { display: none; }
    nav.nav-open .nav-menu-btn .icon-close { display: block; }

    /* ── LANG SWITCHER ── */
    .lang-switcher { display: flex; gap: 0.35rem; align-items: center; }
    .lang-btn {
      background: none; border: 1.5px solid transparent;
      min-width: 44px; min-height: 44px; padding: 0 0.65rem; border-radius: 8px;
      font-size: 0.82rem; font-weight: 700; color: var(--muted);
      cursor: pointer; font-family: inherit; transition: all .18s;
      letter-spacing: 0.03em;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .lang-btn:hover { color: var(--green-text); border-color: var(--green); }
    .lang-btn.active { color: var(--green-dk); border-color: var(--green); background: var(--green-lt); }

    /* ── HERO ── */
    .hero {
      min-height: auto; display: flex; align-items: center; justify-content: center;
      text-align: center; padding: 6.5rem var(--section-x) 4rem;
      background: var(--green-100);
    }
    .hero-inner { max-width: 1140px; }
    .hero-badge {
      display: inline-flex; align-items: center; gap: 0.5rem;
      background: var(--green-lt); border: 1px solid rgba(29,158,82,.25);
      color: var(--green-dk); font-size: 0.78rem; font-weight: 700;
      letter-spacing: 0.06em; text-transform: uppercase;
      padding: 0.4rem 1rem; border-radius: 100px; margin-bottom: 1.8rem;
    }
    .hero-badge span.dot { width: 6px; height: 6px; background: var(--green); border-radius: 50%; animation: pulse 1.8s infinite; }
    .hero-tagline {
      display: block;
      background: none; border: none; padding: 0;
      font-size: 0.95rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
      color: var(--green-dk); margin: 0 auto 0.85rem; max-width: 720px;
    }

    /* ── UNIFIED PIPELINE (hero + modules) ── */
    .pipeline {
      display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap;
      gap: 0.35rem 0; margin-top: 2rem; max-width: 100%; margin-left: auto; margin-right: auto;
    }
    .pipeline-step { flex: 1 1 88px; min-width: 72px; max-width: 118px; text-align: center; padding: 0 0.15rem; }
    .pipeline-node {
      width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 0.45rem;
      display: flex; align-items: center; justify-content: center;
      color: #fff; font-weight: 800; font-size: 0.8rem;
      box-shadow: 0 2px 8px rgba(0,0,0,.08);
    }
    .pipeline-node.green { background: linear-gradient(135deg, var(--green-text), var(--green-dk)); }
    .pipeline-node.coral { background: linear-gradient(135deg, var(--green-text), var(--green-dk)); }
    .pipeline-node.blue  { background: linear-gradient(135deg, var(--green-text), var(--green-dk)); }
    .pipeline-node.teal  { background: linear-gradient(135deg, var(--green-text), var(--green-dk)); }
    .pipeline-node.amber { background: linear-gradient(135deg, var(--green-text), var(--green-dk)); }
    .pipeline-icon { width: 46px; height: 46px; margin: 0 auto 0.45rem; display: flex; align-items: center; justify-content: center; }
    .pipeline-icon svg { width: 40px; height: 40px; display: block; }
    .pipeline-label { font-size: 0.76rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; }
    .pipeline-label.green { color: var(--green-dk); }
    .pipeline-label.coral { color: var(--green-dk); }
    .pipeline-label.blue  { color: var(--green-dk); }
    .pipeline-label.teal  { color: var(--green-dk); }
    .pipeline-label.amber { color: var(--green-dk); }
    .pipeline-label.violet { color: var(--green-dk); }
    .pipeline-arrow {
      flex: 0 0 auto; align-self: center; color: #b8c8b8; font-size: 1.1rem; font-weight: 700;
      padding: 0 0.1rem; margin-top: -1.1rem;
    }
    .pipeline-report {
      flex: 1 1 100px; min-width: 90px; max-width: 130px; text-align: center;
      background: linear-gradient(135deg, var(--green-lt), #f4faf6);
      border: 1.5px solid rgba(29,158,82,.28); border-radius: 12px;
      padding: 0.65rem 0.5rem 0.7rem; margin-left: 0.25rem;
    }
    .pipeline-report .pipeline-label { color: var(--green-dk); font-size: 0.74rem; }
    .pipeline-report span { display: block; font-size: 0.6rem; color: #3a5a3a; margin-top: 0.2rem; line-height: 1.35; font-weight: 600; }
    .pipeline-modules { margin-top: 0; margin-bottom: 2rem; padding: 1.5rem 1rem; background: var(--bg); border: 1.5px solid var(--border); border-radius: 14px; }
    .pipeline-modules .pipeline-step { max-width: 130px; }
    .pipeline-modules .pipeline-sub { font-size: 0.62rem; color: var(--muted); margin-top: 0.25rem; line-height: 1.4; font-weight: 500; }
    .modules-cta { text-align: center; margin-top: 0.5rem; }
    .modules-cta .btn-primary { display: inline-flex; }
    @media (max-width: 720px) {
      .pipeline-arrow { display: none; }
      .pipeline { gap: 0.75rem; }
      .pipeline-step, .pipeline-report { flex: 1 1 40%; max-width: none; }
      .pipeline-report { margin-left: 0; }
    }
    @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} }
    /* Headline scale is intentionally restrained: 900 weight at 60px read as
       shouting rather than as an engineering tool. Keep this in sync with the
       .hero h1 rule further down — both must carry the same size/weight. */
    .hero h1 { font-size: clamp(2.25rem, 4.2vw, 3.25rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; margin-bottom: 0.65rem; color: var(--text); }
    .hero h1 em { font-style: normal; color: var(--green-text); }
    /* UNUSED since Jul 2026 — the hero sub-line was removed because it listed
       the same seven steps as the pipeline graphic immediately below it (and
       as the paragraph above it). Rules kept so the line can be restored by
       re-adding a single paragraph with class hero-sub if ever wanted. */
    .hero-sub { font-size: clamp(1.35rem, 2.8vw, 1.85rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; color: var(--text); margin: 0 auto 1.1rem; max-width: 720px; }
    .hero-sub em { font-style: normal; color: var(--green-text); }
    .hero p { font-size: 1.2rem; color: var(--muted); max-width: 620px; margin: 0 auto 2.5rem; line-height: var(--leading); }
    .hero-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
    .hero-cta-secondary {
      display: block; margin: 0.9rem 0 0; font-size: 0.85rem; font-weight: 600;
      color: var(--green-dk); text-decoration: none;
    }
    .hero-cta-secondary:hover { text-decoration: underline; }
    .proof-strip {
      background: var(--green-lt); border-top: 1px solid rgba(29,158,82,.18);
      border-bottom: 1px solid rgba(29,158,82,.18); padding: 0.9rem 2rem;
    }
    .btn-primary {
      background: linear-gradient(135deg, var(--green-text), var(--green-dk));
      color: #fff !important; text-decoration: none; padding: 0.85rem 2rem;
      border-radius: 9px; font-weight: 700; font-size: 0.95rem;
      min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 20px rgba(29,158,82,.3); transition: transform .2s, box-shadow .2s;
    }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(29,158,82,.4); color: #fff !important; }
    .btn-outline {
      background: var(--card); color: var(--text); text-decoration: none;
      padding: 0.85rem 2rem; border-radius: 9px; font-weight: 600; font-size: 0.95rem;
      min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
      border: 1.5px solid var(--border); transition: border-color .2s, color .2s;
    }
    .hero-stats {
      display: flex; justify-content: center; gap: 3rem; margin-top: 4rem; padding-top: 3rem;
      border-top: 1px solid var(--border); flex-wrap: wrap;
    }
    .btn-outline:hover { border-color: var(--green); color: var(--green-text); }
    .stat { text-align: center; min-width: 5.5rem; }
    .stat-num { font-size: 2rem; font-weight: 800; color: var(--text); letter-spacing: -0.03em; }
    .stat-word { font-size: 2rem; font-weight: 800; color: var(--text); letter-spacing: -0.03em; font-family: var(--font-sans); }
    .stat-lbl { font-size: var(--text-sm); color: var(--muted); font-weight: 500; margin-top: 0.2rem; }

    /* ── SECTIONS ── */
    section { padding: var(--section-y) var(--section-x); }
    #preview { padding: var(--section-y-compact) var(--section-x); background: var(--card); border-top: 1px solid var(--border); }
    #reviews { padding: 1.25rem var(--section-x) var(--section-y); background: var(--card); }
    .section-label { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--green-text); margin-bottom: 0.8rem; }
    .section-title { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; margin-bottom: 1rem; }
    .section-sub { font-size: var(--text-body); color: var(--muted); max-width: 640px; line-height: var(--leading); }
    .section-header { margin-bottom: 3rem; }
    .section-teaser { font-size: var(--text-body); color: var(--text); font-weight: 600; line-height: var(--leading); max-width: 640px; margin: 0 auto 1.25rem; text-align: center; }
    .container { max-width: 1100px; margin: 0 auto; }

    /* ── MODULES ── */
    #modules { background: var(--card); }
    .modules-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; align-items: stretch; max-width: 900px; margin: 0 auto; }
    .module-card { border: 1.5px solid rgba(29,158,82,.3); border-radius: 14px; padding: 1.5rem 1.35rem; background: var(--card); position: relative; transition: transform .25s, box-shadow .25s, border-color .25s; display: flex; flex-direction: column; height: 100%; }
    .module-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,.08); border-color: var(--green); }
    .module-card.live { border-color: rgba(29,158,82,.3); }
    .module-card.live:hover { border-color: var(--green); }
    .module-card.siteiq { border-color: rgba(29,158,82,.3); }
    .module-card.siteiq:hover { border-color: var(--green); }
    .module-card.revenueiq { border-color: rgba(29,158,82,.3); }
    .module-card.revenueiq:hover { border-color: var(--green); }
    .module-card.soon { border-color: var(--border); opacity: .9; }
    .module-pill { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.32rem 0.8rem; border-radius: 100px; margin-bottom: 0.9rem; width: fit-content; }
    .pill-live { background: var(--green-lt); color: var(--green-dk); }
    .pill-live::before { content:''; width:6px; height:6px; background:var(--green); border-radius:50%; animation: pulse 1.8s infinite; }
    .pill-early { background: var(--green-lt); color: var(--green-dk); border: 1px solid rgba(29,158,82,.25); }
    .pill-soon { background: var(--bg2); color: var(--muted); }
    .module-num { font-size: 0.85rem; font-weight: 700; color: var(--green-text); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem; }
    .module-name { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.45rem; }
    .module-name.green { color: var(--text); }
    .module-name.blue  { color: var(--text); }
    .module-name.teal  { color: var(--text); }
    .module-name.amber { color: var(--text); }
    .module-tagline { font-size: 1.05rem; font-weight: 600; margin: 0.25rem 0 1rem 0; font-style: normal; line-height: 1.45; }
    .module-tagline.coral { color: var(--muted); }
    .module-tagline.blue  { color: var(--muted); }
    .module-tagline.teal  { color: var(--muted); }
    .module-tagline.amber { color: var(--muted); }
    .module-features { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 1.25rem; }
    .module-features li { font-size: 0.98rem; color: var(--muted); display: flex; align-items: flex-start; gap: 0.5rem; line-height: 1.5; }
    .module-features li::before { content:'✓'; color: var(--green-text); font-weight: 700; flex-shrink: 0; margin-top: 0.1rem; }
    .module-features li.soon-item::before { content:'◷'; color: var(--amber); }
    .module-disclaimer { background:var(--bg2); border:1.5px solid var(--border); border-radius:8px; padding:0.65rem 0.85rem; margin-bottom:1rem; display:flex; align-items:flex-start; gap:0.45rem; }
    .module-disclaimer-icon { font-size:1rem; flex-shrink:0; line-height:1.4; color:var(--muted); }
    .module-disclaimer-text { font-size: var(--text-sm); color:var(--muted); line-height: 1.55; font-weight:600; }
    .module-link { display: block; text-align: center; padding: 0.75rem; border-radius: 8px; font-weight: 700; font-size: 1rem; text-decoration: none; transition: all .2s; margin-top: auto; }
    .link-green { background: var(--green); color: #fff; }
    .link-green:hover { background: var(--green-dk); box-shadow: 0 4px 14px rgba(29,158,82,.3); }
    .link-blue { background: var(--green); color: #fff; }
    .link-blue:hover { background: var(--green-dk); box-shadow: 0 4px 14px rgba(29,158,82,.3); }
    .link-teal { background: var(--green); color: #fff; }
    .link-teal:hover { background: var(--green-dk); box-shadow: 0 4px 14px rgba(29,158,82,.3); }
    .link-amber { background: var(--green); color: #fff; }
    .link-amber:hover { background: var(--green-dk); box-shadow: 0 4px 14px rgba(29,158,82,.3); }
    .link-soon { background: var(--bg2); color: var(--muted); cursor: default; border: 1.5px dashed var(--border); }

    /* ── HOW IT WORKS ── */
    #how { background: var(--bg); }
    .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
    .step { text-align: center; padding: 1.5rem; }
    .step-num {
      width: 48px; height: 48px; border-radius: 50%;
      color: #fff; font-weight: 800; font-size: 1.1rem;
      display: flex; align-items: center; justify-content: center; margin: 0 auto 1.2rem;
    }
    .step-num.coral { background: linear-gradient(135deg, var(--green-text), var(--green-dk)); }
    .step-num.blue  { background: linear-gradient(135deg, var(--green-text), var(--green-dk)); }
    .step-num.teal  { background: linear-gradient(135deg, var(--green-text), var(--green-dk)); }
    .step h3 { font-size: var(--text-body); font-weight: 700; margin-bottom: 0.5rem; }
    .step p  { font-size: var(--text-sm); color: var(--muted); line-height: var(--leading); }

    /* ── WHY PVMATH ── */
    #why { background: var(--card); }
    .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
    .why-card { padding: 1.6rem; border-radius: 12px; border: 1px solid var(--border); background: var(--card); transition: transform .25s, box-shadow .25s; }
    .why-card:hover { transform: translateY(-3px); box-shadow: 0 10px 35px rgba(0,0,0,.07); }
    .why-icon { width: 42px; height: 42px; margin-bottom: 0.8rem; display: flex; align-items: center; justify-content: center; border-radius: 10px; flex-shrink: 0; }
    .why-icon svg { width: 24px; height: 24px; display: block; }
    .why-card h4 { font-size: var(--text-body); font-weight: 700; margin-bottom: 0.5rem; }
    .why-card p { font-size: var(--text-sm); color: var(--muted); line-height: var(--leading); }

    /* ── PRICING ── */
    #pricing { background: var(--bg); }
    .pricing-toggle { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 0.35rem 0 1.5rem; }
    /* Anchor defence: states the competing stack cost BEFORE the buyer sees a
       number, so they compare against ~EUR 8,000/engineer rather than against a
       cheap screening tool. Removing this reopens the anchoring problem. */
    .pricing-anchor {
      max-width: 780px; margin: 0 auto 1.25rem; text-align: center;
      font-size: 0.92rem; line-height: 1.65; color: var(--text-900);
      background: var(--green-100); border: 1px solid rgba(29,158,82,.28);
      border-radius: 12px; padding: 0.95rem 1.4rem;
    }
    .pricing-anchor em { font-style: normal; font-weight: 700; color: var(--green-text); }
    /* Trial banner sits ABOVE the plan cards: the first thing a visitor should
       learn is that they can prove it on a real site before paying anything. */
    .trial-banner {
      max-width: 1050px; margin: 0 auto 1.6rem; display: flex; align-items: center;
      justify-content: space-between; gap: 1.2rem; flex-wrap: wrap;
      background: var(--green-100); border: 1.5px solid rgba(29,158,82,.35);
      border-radius: 14px; padding: 1.15rem 1.6rem;
    }
    .trial-banner-text { flex: 1 1 22rem; }
    .trial-banner-title { font-size: 1.05rem; font-weight: 800; color: var(--text-900); margin-bottom: 0.25rem; }
    .trial-banner-sub { font-size: 0.88rem; color: var(--text-600); line-height: 1.6; }
    .trial-banner-btn {
      background: var(--green-text); color: #fff !important; text-decoration: none;
      padding: 0.75rem 1.5rem; border-radius: 9px; font-weight: 700; font-size: 0.9rem;
      white-space: nowrap; flex-shrink: 0; min-height: 44px;
      display: inline-flex; align-items: center; transition: background .2s;
    }
    .trial-banner-btn:hover { background: var(--green-dk); color: #fff !important; }
    .pricing-early-note { text-align: center; font-size: 0.85rem; font-weight: 600; color: var(--green-text); margin: 0 0 2rem; }
    .pricing-instant-note { font-size: 1.05rem; font-weight: 700; }
    .toggle-label { font-size: 1.05rem; font-weight: 700; color: var(--muted); }
    .toggle-switch { width: 52px; height: 28px; border-radius: 100px; position: relative; cursor: pointer; transition: background .25s; border: none; outline: none; }
    .toggle-switch.monthly { background: #b0bcb0; }
    .toggle-switch.annual  { background: var(--green); }
    .toggle-switch::after { content: ''; position: absolute; width: 22px; height: 22px; background: #fff; border-radius: 50%; top: 3px; left: 3px; transition: transform .25s; }
    .toggle-switch.monthly::after { transform: translateX(0); }
    .toggle-switch.annual::after  { transform: translateX(24px); }
    .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
    .price-card { background: var(--card); border: 1.5px solid var(--border); border-radius: 14px; padding: 2rem; position: relative; display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; }
    .price-card:hover { transform: translateY(-3px); box-shadow: 0 10px 35px rgba(0,0,0,.07); }
    .price-card.featured { border-color: var(--green); background: #fff; box-shadow: 0 0 0 4px rgba(29,158,82,.08); }
    .price-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--green); color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.3rem 1rem; border-radius: 100px; white-space: nowrap; }
    .price-tier { font-size: 0.78rem; font-weight: 700; color: var(--green-text); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem; }
    .price-amount { font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
    .price-amount span { font-size: 1rem; font-weight: 400; color: var(--muted); font-family: var(--font-sans); }
    .price-vat-hint { font-size: 0.75rem; font-weight: 600; color: var(--muted); margin-top: 0.35rem; letter-spacing: 0.02em; }
    .price-annual-note { font-size: 0.85rem; color: var(--green-text); font-weight: 600; margin-top: 0.35rem; min-height: 1.2rem; line-height: 1.4; }
    .price-desc { font-size: var(--text-sm); color: var(--muted); margin: 0.8rem 0 1.5rem; line-height: var(--leading); }
    .price-features { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 2rem; flex: 1; }
    .price-features li { font-size: var(--text-sm); display: flex; align-items: center; gap: 0.5rem; }
    .price-features li.yes { color: var(--text); }
    .price-features li.yes::before { content:'✓'; color: var(--green-text); font-weight: 700; }
    /* Add-on seat line: this is a price, not a feature — set it apart so buyers
       see immediately that seats scale one at a time and there is no tier jump. */
    .price-features li.addon {
      background: var(--green-100); border-radius: 7px;
      padding: 0.3rem 0.55rem; margin: 0.15rem 0 0.35rem;
    }
    .price-features li.addon::before { content:'+'; color: var(--green-text); font-weight: 800; }
    .price-features li.addon strong { color: var(--green-text); }
    .price-features li.no  { color: #bbb; }
    .price-features li.no::before  { content:'—'; color: #ddd; }
    .price-btn { display: block; text-align: center; padding: 0.8rem; border-radius: 9px; font-weight: 700; font-size: 0.9rem; text-decoration: none; transition: all .2s; border: 1.5px solid transparent; }
    .price-btn.outline { border-color: var(--border); color: var(--text); }
    .price-btn.outline:hover { border-color: var(--green); color: var(--green-text); }
    .price-btn.solid   { background: linear-gradient(135deg, var(--green-text), var(--green-dk)); color: #fff !important; }
    .price-btn.solid:hover { box-shadow: 0 6px 20px rgba(29,158,82,.35); transform: translateY(-1px); color: #fff !important; }

    /* ── ENTERPRISE STRIP ── */
    .enterprise-strip {
      max-width: 1050px; margin: 1.5rem auto 0;
      background: linear-gradient(135deg, #243828, #3a5540);
      border: 1px solid rgba(29,158,82,.25); border-radius: 14px;
      padding: 1.6rem 2rem; display: flex; align-items: center;
      justify-content: space-between; flex-wrap: wrap; gap: 1rem;
    }
    .enterprise-strip-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #4ade80; margin-bottom: 0.3rem; }
    .enterprise-strip-title { font-size: 1.05rem; font-weight: 800; color: #fff; margin-bottom: 0.25rem; }
    .enterprise-strip-sub { font-size: 0.82rem; color: rgba(255,255,255,.72); line-height: 1.5; }
    .enterprise-strip-btn {
      background: var(--green); color: #fff !important; text-decoration: none;
      padding: 0.75rem 1.6rem; border-radius: 9px; font-weight: 700; font-size: 0.88rem;
      white-space: nowrap; flex-shrink: 0; transition: background .2s, box-shadow .2s;
      min-height: 44px; display: inline-flex; align-items: center;
    }
    .enterprise-strip-btn:hover { background: var(--green-dk); box-shadow: 0 4px 16px rgba(29,158,82,.35); color: #fff !important; }

    /* ── ENTERPRISE PANEL ──
       A EUR 45k commitment cannot be sold from a one-line strip. Above ~10
       seats the buyer is no longer purchasing headcount — they are purchasing
       procurement requirements: data handling, contractual terms, a named human
       and continuity. The four columns below are grouped to answer exactly
       those, in the order a procurement officer works through them.
       ONLY list what can actually be honoured today or committed to in the
       agreement. Nothing aspirational belongs here. */
    .ent-panel {
      max-width: 1050px; margin: 1.5rem auto 0;
      background: linear-gradient(135deg, #1a2c20, #2f4a37);
      border: 1px solid rgba(74,222,128,.22); border-radius: 16px;
      padding: 2rem 2.2rem;
    }
    .ent-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
    .ent-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #4ade80; margin-bottom: 0.4rem; }
    .ent-title { font-size: 1.5rem; font-weight: 800; color: #fff; letter-spacing: -0.02em; line-height: 1.2; }
    .ent-sub { font-size: 0.92rem; color: rgba(255,255,255,.75); line-height: 1.6; margin-top: 0.45rem; max-width: 46rem; }
    .ent-details { margin-top: 1.8rem; }
    .ent-details summary {
      cursor: pointer; list-style: none;
      display: flex; align-items: center; justify-content: center; gap: 0.4rem;
      padding: 1.05rem 0; font-size: 0.85rem; font-weight: 700; color: #4ade80;
      border-top: 1px solid rgba(255,255,255,.13);
    }
    .ent-details summary::-webkit-details-marker { display: none; }
    .ent-details summary::after { content: '↓'; font-weight: 700; }
    .ent-details[open] summary::after { content: '↑'; }
    .ent-details[open] summary {
      border-bottom: 1px solid rgba(255,255,255,.13);
      padding-bottom: 0.9rem; margin-bottom: 0.2rem;
    }
    .ent-details-label-open { display: none; }
    .ent-details[open] .ent-details-label-closed { display: none; }
    .ent-details[open] .ent-details-label-open { display: inline; }
    .ent-grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem;
      margin-top: 1.4rem;
    }
    .ent-col h4 {
      font-size: 0.76rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em;
      color: #4ade80; margin-bottom: 0.7rem;
    }
    .ent-col ul { list-style: none; padding: 0; margin: 0; }
    .ent-col li {
      font-size: 0.85rem; line-height: 1.5; color: rgba(255,255,255,.88);
      padding-left: 1.05rem; position: relative; margin-bottom: 0.5rem;
    }
    .ent-col li::before {
      content: '✓'; position: absolute; left: 0; top: 0;
      color: #4ade80; font-weight: 700; font-size: 0.8rem;
    }
    .ent-foot {
      display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
      flex-wrap: wrap; margin-top: 1.7rem; padding-top: 1.4rem;
      border-top: 1px solid rgba(255,255,255,.13);
    }
    .ent-foot-note { font-size: 0.82rem; color: rgba(255,255,255,.62); line-height: 1.6; max-width: 40rem; }
    @media (max-width: 900px) {
      .ent-grid { grid-template-columns: repeat(2, 1fr); }
      .ent-panel { padding: 1.5rem 1.3rem; }
      .ent-title { font-size: 1.3rem; }
    }
    @media (max-width: 520px) {
      .ent-grid { grid-template-columns: 1fr; }
    }

    /* ── SINGLE PROJECT STRIP ── */
    .single-project-strip {
      max-width: 1050px; margin: 2rem auto 0;
      background: var(--card); border: 1.5px solid var(--border); border-radius: 14px;
      padding: 1.6rem 2rem;
    }
    .single-project-label {
      font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.1em; color: var(--green-text); margin-bottom: 0.35rem;
    }
    .single-project-title {
      font-size: 1.05rem; font-weight: 800; color: var(--text); margin-bottom: 1.25rem;
    }
    .single-project-options {
      display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.25rem; align-items: stretch;
    }
    .single-project-option {
      background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
      padding: 1.25rem 1.35rem; display: flex; flex-direction: column; gap: 0.45rem;
    }
    .single-project-price {
      font-size: 1.65rem; font-weight: 800; color: var(--text); letter-spacing: -0.03em;
    }
    .single-project-price span {
      font-size: 0.72rem; font-weight: 600; color: var(--muted); margin-left: 0.35rem;
    }
    .single-project-name { font-size: 0.92rem; font-weight: 700; color: var(--text); }
    .single-project-desc { font-size: 0.82rem; color: var(--muted); line-height: 1.55; flex: 1; margin-bottom: 0.5rem; }
    .single-project-btn {
      display: inline-flex; align-items: center; justify-content: center;
      padding: 0.65rem 1.2rem; border-radius: 8px; font-weight: 700; font-size: 0.85rem;
      text-decoration: none; min-height: 44px; transition: background .2s, border-color .2s, color .2s;
    }
    .single-project-btn.solid {
      background: linear-gradient(135deg, var(--green-text), var(--green-dk)); color: #fff !important;
    }
    .single-project-btn.solid:hover { box-shadow: 0 4px 14px rgba(29,158,82,.3); transform: translateY(-1px); color: #fff !important; }
    .single-project-btn.outline { border: 1.5px solid var(--border); color: var(--text); background: var(--card); }
    .single-project-btn.outline:hover { border-color: var(--green); color: var(--green-text); }
    .single-project-or {
      display: flex; align-items: center; justify-content: center;
      font-size: 0.78rem; font-weight: 700; color: var(--muted); text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    @media (max-width: 768px) {
      .single-project-options { grid-template-columns: 1fr; }
      .single-project-or { padding: 0.25rem 0; }
    }

    /* ── ABOUT ── */
    #about { background: var(--green-100); }
    .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
    .about-text h2 { font-size: 1.8rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 1rem; }
    .about-text p { font-size: var(--text-sm); color: var(--muted); line-height: var(--leading); margin-bottom: 1rem; }
    .about-cards { display: flex; flex-direction: column; gap: 1rem; }
    .about-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1.2rem 1.4rem; display: flex; gap: 1rem; align-items: flex-start; }
    .about-card-icon { width: 42px; height: 42px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px; }
    .about-card-icon svg { width: 22px; height: 22px; display: block; }
    .about-card h4 { font-size: var(--text-body); font-weight: 700; margin-bottom: 0.25rem; }
    .about-card p { font-size: var(--text-sm); color: var(--muted); line-height: var(--leading); }

    /* ── CONTACT ── */
    #contact { background: var(--card); }
    .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
    .contact-info h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 1rem; }
    .contact-info p { font-size: var(--text-sm); color: var(--muted); line-height: var(--leading); margin-bottom: 1rem; }
    .contact-detail { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; margin-bottom: 0.6rem; }
    .contact-detail a { color: var(--green-text); text-decoration: none; font-weight: 600; }
    form { display: flex; flex-direction: column; gap: 1rem; }
    .form-field { display: flex; flex-direction: column; gap: 0.35rem; }
    .form-field label { font-size: 0.82rem; font-weight: 700; color: var(--muted); letter-spacing: 0.02em; }
    .form-optional { font-weight: 500; color: #657565; font-size: 0.78rem; } /* 4.9:1 — was #9aaa9a at 2.5:1 */
    input, select, textarea { width: 100%; padding: 0.75rem 1rem; border: 1.5px solid var(--border); border-radius: 9px; font-family: inherit; font-size: 0.88rem; background: var(--bg); color: var(--text); transition: border-color .2s; outline: none; box-sizing: border-box; }
    input:focus, select:focus, textarea:focus { border-color: var(--green); }
    textarea { resize: vertical; min-height: 110px; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    .form-submit { background: #145f34; color: #fff; border: none; padding: 0.85rem; border-radius: 9px; font-weight: 700; font-size: 0.95rem; cursor: pointer; font-family: inherit; transition: box-shadow .2s, transform .2s; }
    .form-submit:hover { background: #0f4a28; box-shadow: 0 6px 20px rgba(20,95,52,.35); transform: translateY(-1px); }

    /* ── FOOTER ── */
    footer { background: #0e1a14; color: rgba(255,255,255,.92); padding: 3rem var(--section-x) 2rem; font-size: 0.82rem; }
    .footer-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; }
    .footer-brand { font-size: 1.1rem; font-weight: 800; color: #fff; margin-bottom: 0.6rem; letter-spacing: -0.02em; }
    .footer-tagline { line-height: 1.6; margin-bottom: 1rem; color: rgba(255,255,255,.9); }
    .footer-col h5 { color: #fff; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.9rem; }
    .footer-col a { display: block; color: rgba(255,255,255,.88); text-decoration: none; margin-bottom: 0.45rem; transition: color .2s; }
    .footer-col a:hover { color: #fff; text-decoration: underline; }
    .footer-bottom { max-width: 1100px; margin: 2rem auto 0; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.28); display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; flex-wrap: wrap; gap: 0.75rem; color: rgba(255,255,255,.85); }
    .footer-bottom a { color: rgba(255,255,255,.88); text-decoration: none; }
    .footer-bottom a:hover { color: #fff; text-decoration: underline; }
    .footer-social { display: flex; gap: 0.65rem; margin-bottom: 1.1rem; }
    .footer-social a {
      display: inline-flex; align-items: center; justify-content: center;
      width: 36px; height: 36px; border-radius: 8px;
      background: rgba(255,255,255,.10); color: #fff;
      transition: background .2s, color .2s;
    }
    .footer-social a:hover { background: rgba(29,158,82,.35); color: #fff; }
    .footer-social svg { width: 18px; height: 18px; fill: currentColor; }

    /* ── PRODUCT PREVIEW ── */
    /* Equal height: row follows tallest card (SiteIQ); TerrainIQ/YieldIQ pin footers — no stretch-to-TerrainIQ */
    .preview-slider { position: relative; max-width: 600px; margin: 0 auto; overflow: hidden; transition: height .35s ease; }
    .preview-track { display: flex; align-items: flex-start; transition: transform .5s cubic-bezier(.4,0,.2,1); }
    .preview-track .preview-card { flex: 0 0 100%; max-width: 100%; }
    .preview-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; }
    .preview-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); border: none; padding: 0; cursor: pointer; transition: background .2s, transform .2s; }
    .preview-dot.active { background: var(--green); transform: scale(1.35); }
    .preview-dot:hover { background: var(--green-dk); }
    .preview-card { border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 4px rgba(29,158,82,.08), 0 8px 32px rgba(0,0,0,.1); border: 1.5px solid var(--green); display: flex; flex-direction: column; height: auto; }
    .preview-card-hdr { padding: 0.7rem 0.9rem; display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; background: var(--card); border-bottom: 1.5px solid var(--border); }
    .preview-card-hdr.siteiq,
    .preview-card-hdr.terrainiq,
    .preview-card-hdr.layoutiq,
    .preview-card-hdr.yieldiq,
    .preview-card-hdr.revenueiq { background: var(--card); }
    .preview-actions.teal div { background: var(--teal-lt); color: var(--teal-dk); }
    .preview-card-hdr strong { font-size: 0.72rem; font-weight: 800; color: var(--text); letter-spacing: 0.05em; }
    .preview-card-icon { font-size: 0.82rem; line-height: 1; flex-shrink: 0; color: var(--green-text); }
    .preview-card-body { background: #fff; padding: 0.85rem 0.9rem 0.75rem; display: flex; flex-direction: column; }
    .preview-card-foot { margin-top: 0.35rem; }
    .preview-meta { font-size: 0.68rem; color: #888; margin-bottom: 0.55rem; font-weight: 500; line-height: 1.4; }
    .preview-metrics { margin: 0 0 0.55rem; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.3rem; }
    .preview-metrics li { display: flex; justify-content: space-between; align-items: center; font-size: 0.73rem; gap: 0.4rem; }
    .preview-metrics .metric-label { color: #5a7a5a; font-weight: 500; }
    .preview-metrics .metric-value { margin: 0; font-weight: 700; text-align: right; }
    .metrics-divider { border-top: 1px solid #e0eae0; margin: 0.35rem 0; list-style: none; }
    .preview-badge { border-radius: 4px; padding: 1px 5px; font-size: 0.6rem; font-weight: 700; white-space: nowrap; }
    .preview-badge.pos { background: #d1fae5; color: #065f46; }
    .preview-badge.warn { background: #fef3c7; color: #92400e; }
    .preview-chart-label { font-size: 0.62rem; color: #888; margin-bottom: 0.3rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
    .preview-score { border-radius: 7px; padding: 0.45rem 0.65rem; margin-top: 0; }
    .preview-score.siteiq { background: #d1fae5; color: #065f46; }
    .preview-score-value { font-size: 0.76rem; font-weight: 800; line-height: 1.35; }
    .preview-score-verdict { font-size: 0.76rem; font-weight: 700; }
    .preview-buildable { background: #ecfdf3; border: 1px solid #b7ebc6; border-radius: 8px; padding: 0.5rem 0.65rem; margin-bottom: 0.55rem; display: flex; flex-direction: column; gap: 0.28rem; }
    .preview-buildable div { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.72rem; gap: 0.4rem; }
    .preview-buildable span { color: #5a7a5a; font-weight: 500; }
    .preview-buildable strong { color: #065f46; font-weight: 800; text-align: right; }
    .preview-buildable .pb-score strong { font-size: 0.82rem; }
    .preview-source { margin-top: 0.35rem; font-size: 0.6rem; color: #bbb; text-align: right; }
    .preview-footnote { font-size: 0.58rem; color: #aaa; margin-top: -0.2rem; margin-bottom: 0.35rem; text-align: right; }
    .preview-map { width: 100%; border-radius: 8px; margin-bottom: 0.45rem; display: block; }
    .preview-elev-bar { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem; }
    .preview-elev-bar span { font-size: 0.6rem; color: #888; font-weight: 600; }
    .preview-elev-bar div { flex: 1; height: 6px; border-radius: 4px; background: linear-gradient(to right,#3b82f6,#22c55e,#eab308,#ef4444); }
    .preview-metric-sub { font-size: 0.62rem; font-weight: 600; color: #888; }
    .preview-actions { display: flex; gap: 0.45rem; margin-top: 0; }
    .preview-actions div { flex: 1; background: var(--green-lt); border-radius: 7px; padding: 0.38rem; text-align: center; font-size: 0.68rem; font-weight: 700; color: var(--green-dk); }
    .preview-actions.compact {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.35rem;
    }
    .preview-actions.compact div {
      flex: none;
      padding: 0.26rem 0.2rem;
      font-size: 0.6rem;
      line-height: 1.2;
      font-weight: 600;
    }
    .preview-yield-bars { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.55rem; }
    .preview-yield-row-head { display: flex; justify-content: space-between; font-size: 0.7rem; margin-bottom: 2px; }
    .preview-yield-row-head span:first-child { font-weight: 700; color: var(--text); }
    .preview-yield-track { height: 14px; background: #f0f4f0; border-radius: 4px; overflow: hidden; }
    .preview-yield-track div { height: 100%; border-radius: 4px; }
    .preview-yield-track.tracker div { background: linear-gradient(135deg,#1d9e52,#145f34); }
    .preview-yield-track.fixed div { background: linear-gradient(135deg,#9ab89a,#6a8a6a); }
    .preview-disclaimer { background: var(--bg2); border: 1.5px solid var(--border); border-radius: 7px; padding: 0.42rem 0.6rem; margin-top: 0; font-size: 0.64rem; color: var(--muted); line-height: 1.45; font-weight: 600; }
    .preview-bars { display: flex; align-items: flex-end; gap: 2px; height: 32px; margin-bottom: 0.45rem; }
    .preview-months { display: flex; gap: 2px; margin-bottom: 0.5rem; }
    .preview-months div { flex: 1; text-align: center; font-size: 0.5rem; color: #aaa; }

    /* ── FAQ (progressive disclosure) ── */
    .faq-grid { display: flex; flex-direction: column; gap: 0.65rem; max-width: 820px; margin: 0 auto; }
    .faq-item { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
    .faq-item summary {
      font-size: var(--text-body); font-weight: 700; padding: 1.15rem 1.4rem; cursor: pointer;
      list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after { content: '+'; font-size: 1.25rem; font-weight: 400; color: var(--green-text); flex-shrink: 0; }
    .faq-item[open] summary::after { content: '−'; }
    .faq-item[open] summary { border-bottom: 1px solid var(--border); }
    .faq-item p { font-size: var(--text-sm); color: var(--muted); line-height: var(--leading); margin: 0; padding: 1rem 1.4rem 1.25rem; }

    /* ── WORKFLOW (progressive disclosure) ── */
    .workflow-details { background: var(--card); border: 1.5px solid var(--border); border-radius: 14px; overflow: hidden; }
    .workflow-details summary {
      font-size: var(--text-body); font-weight: 700; padding: 1.25rem 1.5rem; cursor: pointer;
      list-style: none; color: var(--text);
      display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap;
    }
    .workflow-details summary::-webkit-details-marker { display: none; }
    .workflow-details summary::after {
      content: 'Show steps ↓'; float: none; flex-shrink: 0;
      font-size: var(--text-body); font-weight: 700;
      background: var(--green-lt); color: var(--green-dk);
      padding: 0.55rem 1.15rem; border-radius: 8px;
      border: 1.5px solid rgba(29,158,82,.28); white-space: nowrap;
    }
    .workflow-details[open] summary::after { content: 'Hide ↑'; }
    .workflow-details[open] summary { border-bottom: 1px solid var(--border); }
    .workflow-details-body { padding: 1.5rem 1.5rem 2rem; }
    .workflow-setup { background:linear-gradient(135deg,#e8f5ee,#f4faf6);border:1.5px solid #b8ddc8;border-radius:14px;padding:1.8rem 2rem;margin-bottom:3rem; }
    .workflow-setup h3 { margin:0 0 0.45rem 0;font-size:var(--text-body);font-weight:800;color:#1a2e1a; }
    .workflow-setup > div > div > p { margin:0 0 1rem 0;font-size:var(--text-sm);color:#3a5a3a;line-height:var(--leading); }
    .workflow-mode-chip { display:flex;align-items:center;gap:0.5rem;background:#fff;border:1px solid #c8e8d4;border-radius:8px;padding:0.55rem 1rem; }
    .workflow-mode-chip strong { font-size:var(--text-sm);font-weight:800;color:#1a2e1a;display:block; }
    .workflow-mode-chip span { font-size:0.9375rem;color:#5a7a5a;line-height:1.45; }
    .workflow-module-sub { font-size:var(--text-sm);color:var(--muted); }

    /* ── WORKFLOW TIMELINE ── */
    .wf-timeline { position: relative; padding-left: 1.75rem; }
    .wf-timeline::before {
      content: ''; position: absolute; left: 0.65rem; top: 1.25rem; bottom: 1.25rem; width: 2px;
      background: linear-gradient(to bottom, var(--green) 0%, var(--green-dk) 25%, var(--green) 50%, var(--green-dk) 75%, var(--green) 100%);
      border-radius: 2px; opacity: 0.35;
    }
    .wf-stage { display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.15rem; margin-bottom: 1.35rem; position: relative; }
    .wf-stage:last-of-type { margin-bottom: 0.5rem; }
    .wf-marker { display: flex; justify-content: center; padding-top: 0.15rem; }
    .wf-node {
      width: 2rem; height: 2rem; border-radius: 50%; color: #fff; font-weight: 800; font-size: 0.82rem;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
      box-shadow: 0 0 0 3px var(--card);
      position: relative; z-index: 1;
    }
    .wf-node.green { background: linear-gradient(135deg, var(--green-text), var(--green-dk)); }
    .wf-node.coral { background: linear-gradient(135deg, var(--green-text), var(--green-dk)); }
    .wf-node.blue  { background: linear-gradient(135deg, var(--green-text), var(--green-dk)); }
    .wf-node.teal  { background: linear-gradient(135deg, var(--green-text), var(--green-dk)); }
    .wf-node.amber { background: linear-gradient(135deg, var(--green-text), var(--green-dk)); }
    .wf-node.violet { background: linear-gradient(135deg, var(--green-text), var(--green-dk)); }
    .wf-card {
      background: var(--card); border: 1.5px solid var(--border); border-radius: 12px;
      padding: 1.1rem 1.15rem 1.15rem;
      box-shadow: 0 2px 10px rgba(20,95,52,.05);
    }
    .wf-card-head { display: flex; align-items: flex-start; gap: 0.85rem; margin-bottom: 0.65rem; }
    .wf-icon { flex-shrink: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }
    .wf-icon svg { width: 44px; height: 44px; display: block; }
    .wf-stage-name { font-size: 1rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
    .wf-stage-name.green { color: var(--text-900); }
    .wf-stage-name.coral { color: var(--text-900); }
    .wf-stage-name.blue  { color: var(--text-900); }
    .wf-stage-name.teal  { color: var(--text-900); }
    .wf-stage-name.amber { color: var(--text-900); }
    .wf-stage-name.violet { color: var(--text-900); }
    .wf-sub { font-size: 0.82rem; color: var(--muted); margin-top: 0.2rem; font-weight: 500; }
    .wf-does { font-size: var(--text-sm); color: var(--muted); line-height: 1.55; margin: 0 0 0.65rem 0; }
    .wf-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.65rem; }
    .wf-chip {
      font-size: 0.68rem; font-weight: 700; padding: 0.28rem 0.55rem; border-radius: 6px;
      background: var(--bg2); border: 1px solid var(--border); color: var(--text); line-height: 1.3;
    }
    .wf-stage.coral .wf-chip { background: var(--green-lt); border-color: rgba(29,158,82,.2); color: var(--green-dk); }
    .wf-stage.blue  .wf-chip { background: var(--green-lt); border-color: rgba(29,158,82,.2); color: var(--green-dk); }
    .wf-stage.teal  .wf-chip { background: var(--green-lt); border-color: rgba(29,158,82,.2); color: var(--green-dk); }
    .wf-stage.amber .wf-chip { background: var(--green-lt); border-color: rgba(29,158,82,.2); color: var(--green-dk); }
    .wf-stage.violet .wf-chip { background: var(--green-lt); border-color: rgba(29,158,82,.2); color: var(--green-dk); }
    .module-name.violet { color: var(--text); }
    .module-tagline.violet { color: var(--muted); }
    .wf-stage.green .wf-chip { background: var(--green-lt); border-color: rgba(29,158,82,.2); color: var(--green-dk); }
    .wf-mode-row { display: flex; gap: 0.65rem; flex-wrap: wrap; margin-top: 0.15rem; }
    .wf-report {
      margin-top: 1.5rem; margin-left: 0; padding: 1.35rem 1.5rem;
      background: linear-gradient(135deg, var(--green-lt), #f4faf6);
      border: 1.5px solid rgba(29,158,82,.3); border-radius: 14px;
      display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
    }
    .wf-report-body { flex: 1; min-width: 200px; display: flex; align-items: flex-start; gap: 0.85rem; }
    .wf-report h3 { margin: 0 0 0.35rem 0; font-size: 1.05rem; font-weight: 800; color: var(--green-dk); }
    .wf-report p { margin: 0; font-size: var(--text-sm); color: #3a5a3a; line-height: 1.55; }
    .wf-report .wf-chip { background: rgba(255,255,255,.7); border-color: rgba(29,158,82,.25); color: var(--green-dk); }
    .wf-report-cta {
      display: inline-flex; align-items: center; justify-content: center;
      background: linear-gradient(135deg, var(--green-text), var(--green-dk)); color: #fff;
      text-decoration: none; padding: 0.75rem 1.35rem; border-radius: 9px;
      font-weight: 700; font-size: 0.92rem; white-space: nowrap;
      transition: box-shadow .2s, transform .2s;
    }
    .wf-report-cta:hover { box-shadow: 0 4px 16px rgba(29,158,82,.35); transform: translateY(-1px); }
    @media (max-width: 640px) {
      .wf-timeline { padding-left: 0; }
      .wf-timeline::before { display: none; }
      .wf-stage { grid-template-columns: 1fr; gap: 0.55rem; }
      .wf-marker { justify-content: flex-start; }
      .wf-report { flex-direction: column; align-items: stretch; }
      .wf-report-cta { width: 100%; text-align: center; }
    }
    @media (prefers-reduced-motion: reduce) {
      .wf-report-cta:hover { transform: none; }
    }


    /* ── Phase 2 narrative structure (tokens/visual system = Phase 3) ── */
    .trust-strip-meta {
      display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1.5rem;
      max-width: 960px; margin: 0 auto; font-size: 0.82rem; color: var(--muted);
    }
    .trust-strip-meta span strong { color: var(--green-dk); }
    .ba-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; max-width: 960px; margin: 0 auto;
    }
    @media (max-width: 800px) { .ba-grid { grid-template-columns: 1fr; } }
    .ba-col {
      background: var(--card); border: 1.5px solid var(--border); border-radius: 14px; padding: 1.5rem 1.35rem;
    }
    .ba-col h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: 1rem; }
    .ba-col ul { list-style: none; margin: 0; padding: 0; }
    .ba-col li {
      font-size: 0.95rem; padding: 0.55rem 0; border-bottom: 1px solid var(--border); color: var(--text);
    }
    .ba-col li:last-child { border-bottom: none; }
    .ba-col.after { border-color: rgba(29,158,82,.45); }
    .ba-col.after h3 { color: var(--green-dk); }
    .ba-payoff {
      display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center;
      max-width: 960px; margin: 1.5rem auto 0; padding: 1.25rem 1.5rem;
      background: var(--surface-0); border: 2px solid var(--green-700); border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm); text-align: center;
    }
    @media (max-width: 640px) {
      .ba-payoff { grid-template-columns: 1fr; gap: 0.5rem; }
      .ba-payoff-arrow { transform: rotate(90deg); }
    }
    .ba-payoff-before, .ba-payoff-after {
      font-size: clamp(1.35rem, 3vw, 1.85rem);
      font-weight: 800; letter-spacing: -0.02em; line-height: 1.2;
    }
    .ba-payoff-before { color: var(--text-600); text-decoration: line-through; text-decoration-thickness: 2px; }
    .ba-payoff-after { color: var(--green-700); }
    .ba-payoff-arrow {
      font-size: 1.5rem; font-weight: 800; color: var(--green-700); line-height: 1;
    }
    .ba-payoff-label {
      grid-column: 1 / -1; font-size: var(--text-ui); font-weight: 600; color: var(--text-600);
      margin: 0;
    }
    .flagship {
      background: var(--card); border: 1.5px solid var(--border); border-radius: 16px;
      padding: 1.35rem 1.35rem 1.5rem; max-width: 920px; margin: 0 auto;
    }
    .flagship-grid {
      display: grid; grid-template-columns: 1.25fr 1fr; gap: 0.75rem; margin-top: 1rem;
      align-items: stretch;
    }
    @media (max-width: 800px) { .flagship-grid { grid-template-columns: 1fr; } }
    .flagship-col { display: grid; gap: 0.75rem; align-content: start; }
    .flagship-shot, .flagship-output {
      border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-0);
      min-height: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column;
      box-shadow: var(--shadow-sm);
    }
    .flagship-shot picture, .flagship-output picture { display: block; background: #fff; line-height: 0; }
    .flagship-output.flagship-dxf picture { background: #0a0a0a; }
    .flagship-shot img, .flagship-output img {
      display: block; width: 100%; height: auto; max-height: 200px;
      object-fit: cover; object-position: top center; background: #fff;
    }
    .flagship-shot.flagship-ie-card img {
      max-height: 340px; object-fit: cover; object-position: 55% 40%;
    }
    .flagship-shot.flagship-bom img {
      max-height: 260px; object-fit: contain; object-position: top; background: #fff;
    }
    .flagship-output.flagship-dxf img {
      max-height: 300px; object-fit: contain; object-position: center; background: #0a0a0a;
    }
    .flagship-output.flagship-a1 img {
      max-height: 360px; object-fit: contain; background: #f4f4f5;
    }
    .flagship-shot .proof-caption, .flagship-output .proof-caption {
      padding: 0.45rem 0.65rem 0.55rem; margin: 0; font-size: 0.88rem; color: var(--text-600);
      border-top: 1px solid var(--border); background: var(--surface-0); line-height: 1.4;
    }
    .flagship-shot .proof-caption strong, .flagship-output .proof-caption strong {
      display: block; margin-bottom: 0.1rem; color: var(--text-900); font-size: 0.95rem;
    }
    .flagship-ie {
      margin-top: 0.85rem; padding: 0.75rem 0.9rem; background: var(--green-lt);
      border-radius: 10px; border: 1px solid rgba(29,158,82,.25); font-size: 0.85rem; line-height: 1.5;
    }
    .flagship .module-features { margin-top: 0.85rem !important; gap: 0.35rem; }
    .flagship .module-features li { font-size: 0.85rem; }
    .epc-trust {
      background: #0E1A14; color: #fff; padding: var(--section-y) var(--section-x);
    }
    .epc-trust .section-label { color: #4ade80; }
    .epc-trust .section-title { color: #fff; }
    .epc-trust .section-sub { color: rgba(255,255,255,.72); }
    .epc-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 1rem; max-width: 1100px; margin: 2rem auto 0;
    }
    .epc-item {
      background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
      border-radius: 12px; padding: 1.15rem 1.1rem;
    }
    .epc-item h4 { color: #4ade80; font-size: 0.95rem; margin-bottom: 0.4rem; }
    .epc-item p { color: rgba(255,255,255,.78); font-size: 0.88rem; margin: 0; line-height: 1.55; }
    .btn-demo {
      display: inline-flex; align-items: center; justify-content: center;
      text-decoration: none; font-weight: 700; font-size: 0.95rem;
      padding: 0.85rem 1.5rem; min-height: 44px; border: none;
      transition: background .2s, color .2s, box-shadow .2s, transform .2s;
    }
    .demo-cta-band {
      max-width: 820px; margin: 2rem auto 0; padding: 1.5rem 1.6rem;
      background: var(--surface-0); border: 1px solid var(--border);
      border-radius: var(--radius-lg); text-align: center;
      box-shadow: var(--shadow-sm);
    }
    .demo-cta-band p {
      margin: 0 0 1rem; font-size: var(--text-body); color: var(--text-600); line-height: 1.55;
    }
    .final-cta {
      text-align: center; padding: var(--section-y) var(--section-x);
      border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    }
    .final-cta h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; margin-bottom: 0.75rem; }
    .final-cta p { max-width: 560px; margin: 0 auto 1.5rem; color: var(--muted); }


    /* ── Phase 3 — Design Spec tokens applied to components ── */
    nav {
      height: 64px; padding: 0 var(--section-x);
      background: rgba(255,255,255,0.96);
      border-bottom: 1px solid var(--border);
    }
    nav.nav-scrolled { box-shadow: var(--shadow-sm); border-bottom-color: var(--border); }
    .nav-links a { font-size: var(--text-ui); color: var(--text-600); }
    .nav-links a:hover { color: var(--green-700); }
    .nav-cta {
      background: var(--green-700) !important; color: #fff !important;
      border-radius: var(--radius-md); padding: 0.55rem 1.15rem;
      font-size: var(--text-ui) !important; min-height: 44px;
      box-shadow: none;
    }
    .nav-cta:hover { background: var(--green-600) !important; color: var(--ink-900) !important; box-shadow: var(--shadow-sm); }

    .hero {
      background: var(--green-100);
      padding: 7rem var(--section-x) 4.5rem;
    }
    .hero-badge {
      background: #fff; border: 1px solid color-mix(in srgb, var(--green-600) 25%, transparent);
      color: var(--green-700); font-size: var(--text-micro); border-radius: var(--radius-pill);
      margin-bottom: 1rem;
    }
    .hero-tagline { color: var(--green-700); font-size: var(--text-ui); margin-bottom: 1rem; }
    .hero h1 {
      font-size: clamp(2.25rem, 4.2vw, 3.25rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12;
      color: var(--text-900); max-width: 900px; margin-left: auto; margin-right: auto;
    }
    .hero h1 em, .hero-sub em { color: var(--green-700); }
    .hero-sub {
      font-size: var(--text-body-lg); font-weight: 600; letter-spacing: normal; line-height: 1.55;
      color: var(--text-900); max-width: 42rem;
    }
    /* This paragraph now carries the whole supporting role in the hero — the
       .hero-sub arrow line was removed (it repeated the pipeline graphic that
       sits directly below it), so this is nudged up from --text-body. */
    .hero p { font-size: var(--text-body-lg); font-weight: 450; color: var(--text-600); max-width: 40rem; margin-bottom: 1.75rem; }
    .hero-cta-secondary { font-size: var(--text-ui); color: var(--green-700); }
    .btn-primary, .btn-demo, .price-btn.solid, .form-submit, .wf-report-cta, .link-green, .link-blue, .link-teal, .link-amber,
    .enterprise-strip-btn, .single-project-btn.solid {
      background: #145f34 !important;
      color: #fff !important;
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-sm);
      background-image: none !important;
    }
    .btn-primary:hover, .btn-demo:hover, .price-btn.solid:hover, .form-submit:hover, .wf-report-cta:hover,
    .enterprise-strip-btn:hover, .single-project-btn.solid:hover {
      background: var(--green-600) !important;
      color: var(--ink-900) !important;
      box-shadow: var(--shadow-md);
    }
    .btn-outline, .price-btn.outline, .single-project-btn.outline {
      border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); color: var(--text-900);
    }
    .btn-outline:hover, .price-btn.outline:hover { border-color: var(--green-700); color: var(--green-700); }

    .proof-strip {
      background: var(--surface-1); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    }
    .trust-strip-meta span strong { color: var(--green-700); }
    .trust-strip-meta a { font-size: var(--text-ui); color: var(--green-700); }
    .trust-strip-meta { font-size: var(--text-ui); }

    .section-label { font-size: var(--text-micro); color: var(--green-700); letter-spacing: 0.06em; }
    .section-title { font-size: var(--text-h2); color: var(--text-900); letter-spacing: -0.02em; }
    .section-sub { font-size: var(--text-body); color: var(--text-600); }

    #problem, #how, #preview, #modules, #why, #reviews, #pricing, #contact { background: var(--surface-0); }
    #before-after, #about, #layoutiq, #faq, .final-cta { background: var(--green-100); }

    .module-card, .why-card, .price-card, .ba-col, .faq-item, .about-card, .wf-card {
      background: var(--surface-0);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
    }
    .module-card { border-color: var(--border); }
    .module-card:hover, .why-card:hover, .price-card:hover {
      transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong);
    }
    .module-card.siteiq,
    .module-card.revenueiq,
    .module-card.terrainiq,
    .module-card.yieldiq,
    .module-card.report { border-top: 1px solid var(--border); }
    .modules-grid {
      grid-template-columns: repeat(2, 1fr); gap: 1.25rem;
      max-width: 920px; margin: 0 auto; align-items: stretch;
    }

    .module-name,
    .module-name.green,
    .module-name.blue,
    .module-name.teal,
    .module-name.amber,
    .module-name.violet,
    .module-name.report { color: var(--text-900); }
    .module-features li::before { color: var(--text-900); }
    .module-num { color: var(--text-600); font-size: var(--text-micro); }
    .module-features li { font-size: var(--text-ui); }
    .module-features li::before { color: var(--text-900); }
    .module-pill { font-size: var(--text-micro); border-radius: var(--radius-pill); }
    .pill-live { background: var(--green-100); color: var(--green-700); }
    .module-disclaimer-text, .module-tagline { font-size: var(--text-ui); }

    .pipeline-label.coral,
    .pipeline-label.blue,
    .pipeline-label.teal,
    .pipeline-label.amber,
    .pipeline-label.violet,
    .pipeline-label.green { color: var(--green-700); }
    .pipeline-node.coral,
    .pipeline-node.blue,
    .pipeline-node.teal,
    .pipeline-node.amber,
    .pipeline-node.violet,
    .pipeline-node.green { background: var(--green-700); }
    .pipeline-label { font-size: var(--text-ui); }
    .pipeline-modules { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg); }
    .pipeline-report {
      background: var(--surface-1); border: 1px solid var(--border);
    }

    .wf-node.coral,
    .wf-node.blue,
    .wf-node.teal,
    .wf-node.amber,
    .wf-node.violet,
    .wf-node.green { background: var(--green-700); }
    .wf-stage-name.coral,
    .wf-stage-name.blue,
    .wf-stage-name.teal,
    .wf-stage-name.amber,
    .wf-stage-name.violet,
    .wf-stage-name.green { color: var(--text-900); }
    .wf-sub, .wf-does { font-size: var(--text-ui); }
    .wf-chip { font-size: var(--text-micro); border-radius: var(--radius-sm); }
    .wf-stage.coral .wf-chip,
    .wf-stage.blue .wf-chip,
    .wf-stage.teal .wf-chip,
    .wf-stage.amber .wf-chip,
    .wf-stage.violet .wf-chip,
    .wf-stage.green .wf-chip {
      background: var(--green-100); color: var(--green-700);
      border-color: color-mix(in srgb, var(--green-700) 25%, transparent);
    }
    .wf-timeline::before {
      background: linear-gradient(to bottom, var(--green-700), var(--green-600), var(--green-700));
    }

    .wf-report h3 { color: var(--text-900); }

    .flagship {
      border: 1px solid var(--border);
      border-top: 3px solid var(--accent-layoutiq);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
    }
    .flagship-shot, .flagship-output {
      background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--radius-md);
    }
    .flagship-ie {
      background: color-mix(in srgb, var(--accent-layoutiq) 10%, white);
      border: 1px solid color-mix(in srgb, var(--accent-layoutiq) 28%, transparent);
      border-radius: var(--radius-md);
    }
    .flagship-ie a { color: var(--accent-layoutiq) !important; }

    .ba-col.after {
      border-color: color-mix(in srgb, var(--green-600) 40%, var(--border));
      border-top: 3px solid var(--green-700);
    }
    .ba-col.after h3 { color: var(--green-700); }

    .epc-trust { background: var(--ink-900); }
    .epc-trust .section-label { color: var(--ink-accent-on-dark); }
    .epc-item { border-radius: var(--radius-md); }
    .epc-item h4 { color: var(--ink-accent-on-dark); }

    .price-card.featured {
      border-color: var(--green-700);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-600) 12%, transparent), var(--shadow-sm);
    }
    .price-badge { background: var(--green-700); font-size: var(--text-micro); border-radius: var(--radius-pill); }
    .price-tier { color: var(--green-700); font-size: var(--text-micro); }
    .price-features li { font-size: var(--text-ui); }
    .price-features li.yes::before { color: var(--green-700); }
    .pricing-early-note { color: var(--green-700); font-size: var(--text-ui); }
    .toggle-switch.annual { background: var(--green-700); }

    .enterprise-strip { background: var(--ink-900); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); }
    .enterprise-strip-btn { background: var(--green-600) !important; color: var(--ink-900) !important; }
    .enterprise-strip-btn:hover { background: var(--ink-accent-on-dark) !important; color: var(--ink-900) !important; }

    footer { background: #0e1a14; font-size: var(--text-ui); color: rgba(255,255,255,.92); }
    .footer-col a:hover, .footer-bottom a:hover, .footer-social a:hover { color: #fff; }
    .footer-social a {
      background: rgba(255,255,255,.10); color: #fff;
    }
    .footer-social a:hover { background: rgba(29,158,82,.35); color: #fff; }
    .contact-detail a { color: var(--green-700); }

    input, select, textarea {
      background: var(--surface-2); border: 1.5px solid var(--border-strong);
      border-radius: var(--radius-sm); font-size: var(--text-ui);
    }
    input:focus, select:focus, textarea:focus {
      border-color: var(--green-700); background: var(--surface-0);
      outline: 2px solid var(--green-700); outline-offset: 2px;
    }
    .form-field label { font-size: var(--text-ui); color: var(--text-900); }

    .case-study-card {
      background: var(--surface-0); border: 1px solid var(--border);
      box-shadow: var(--shadow-sm); border-top: 3px solid var(--green-700);
    }
    .case-study-facts span { font-size: var(--text-ui); color: var(--green-700); }
    .data-residency-badge { background: var(--surface-1); color: var(--text-900); font-size: var(--text-ui); }
    .data-residency-badge a { color: var(--green-700); }

    .preview-card { border: 1px solid var(--border); box-shadow: var(--shadow-md); border-radius: var(--radius-lg); }
    .preview-card-hdr.siteiq { border-bottom: 2px solid var(--accent-siteiq); }
    .preview-card-hdr.terrainiq { border-bottom: 2px solid var(--accent-terrainiq); }
    .preview-card-hdr.layoutiq { border-bottom: 2px solid var(--accent-layoutiq); }
    .preview-card-hdr.yieldiq { border-bottom: 2px solid var(--accent-yieldiq); }
    .preview-card-hdr.revenueiq { border-bottom: 2px solid var(--accent-revenueiq); }
    .preview-dot.active { background: var(--green-700); }
    .preview-meta, .preview-metrics li, .preview-chart-label { font-size: var(--text-ui); }
    .preview-metrics .metric-label { color: var(--text-600); }
    .preview-disclaimer { font-size: var(--text-ui); }

    .stat-lbl, .stats-bar-lbl { font-size: var(--text-ui); color: var(--text-600); }

    .lang-btn.active { color: var(--green-700); border-color: var(--green-700); background: var(--green-100); }
    .lang-btn:hover { color: var(--green-700); border-color: var(--green-700); }

    /* Lift floor: nothing interactive/readable below 14px except micro badges */
    .pipeline-report .pipeline-label,
    .pipeline-modules .pipeline-sub,
    .preview-badge,
    .preview-source,
    .preview-footnote,
    .preview-months div,
    .preview-elev-bar span,
    .preview-actions div,
    .preview-actions.compact div,
    .preview-score-value,
    .preview-score-verdict,
    .preview-buildable div,
    .preview-card-hdr strong,
    .price-vat-hint,
    .single-project-label,
    .enterprise-strip-label,
    .workflow-mode-chip span { font-size: var(--text-ui) !important; }

    @media (max-width: 640px) {
      .hero h1 { max-width: none; }
      .modules-grid { grid-template-columns: 1fr; }
    }

    /* ── CASE STUDY CARD ── */
    .case-study-card {
      max-width: 640px; margin: 0 auto 2.2rem; background: var(--green-lt);
      border: 1.5px solid var(--border); border-radius: 14px; padding: 2rem 2.2rem; text-align: center;
    }
    .case-study-label {
      font-size: var(--text-sm); font-weight: 700; color: var(--green-dk);
      text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.9rem;
    }
    .case-study-quote {
      margin: 0 0 1.1rem; font-size: 1.08rem; line-height: 1.55; color: var(--text);
      font-weight: 500;
    }
    .case-study-attribution { font-size: var(--text-sm); color: var(--muted); font-weight: 600; margin-bottom: 1.3rem; }
    .case-study-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; }
    .case-study-facts span {
      background: var(--card); border: 1px solid var(--border); border-radius: 999px;
      padding: 0.35rem 0.9rem; font-size: 0.8rem; font-weight: 600; color: var(--green-dk);
    }

    /* ── DATA RESIDENCY BADGE ── */
    .data-residency-badge {
      max-width: 620px; margin: 1.4rem auto 0; display: flex; align-items: center; gap: 0.6rem;
      background: var(--green-lt); border: 1px solid var(--border); border-radius: 10px;
      padding: 0.75rem 1.1rem; font-size: 0.8rem; color: var(--green-dk); line-height: 1.5;
    }
    .data-residency-badge svg { flex-shrink: 0; width: 18px; height: 18px; }
    .data-residency-badge a { color: var(--green-dk); font-weight: 700; text-decoration: underline; }

    /* ── STATS BAR (Early Access) ── */
    .stats-bar {
      background: var(--card); border: 1.5px solid var(--border); border-radius: 14px;
      padding: 1.8rem 2.5rem; display: flex; justify-content: space-around;
      align-items: center; flex-wrap: wrap; gap: 1.5rem; text-align: center;
    }
    .stats-bar-item { padding: 0.25rem 0; flex: 1 1 7rem; min-width: 5.5rem; }
    .stats-bar-num { font-size: 2rem; font-weight: 900; color: var(--text); letter-spacing: -0.03em; }
    .stats-bar-word { font-size: 2rem; font-weight: 900; color: var(--text); letter-spacing: -0.03em; font-family: var(--font-sans); }
    .stats-bar-lbl { font-size: var(--text-sm); color: var(--muted); font-weight: 500; margin-top: 0.2rem; }
    .stats-bar-divider { width: 1px; height: 2.5rem; background: var(--border); flex-shrink: 0; }

    /* ── RESPONSIVE ── */
    @media (max-width: 1080px) and (min-width: 901px) {
      .modules-grid { grid-template-columns: repeat(2, 1fr); }

    }
    @media (max-width: 900px) {
      :root { --section-x: clamp(1.5rem, 4.5vw, 2.25rem); }
      #modules .section-sub { white-space: normal; max-width: 640px; }
      .modules-grid { grid-template-columns: repeat(2, 1fr); }
      .pricing-grid, .steps, .why-grid, .reviews-grid { grid-template-columns: 1fr; }
      .about-grid, .contact-grid { grid-template-columns: 1fr; }
      .footer-inner { grid-template-columns: 1fr 1fr; }
      .form-row { grid-template-columns: 1fr; }
      .nav-menu-btn { display: inline-flex; }
      .nav-links {
        display: none; position: fixed; left: 0; right: 0; top: 64px; z-index: 99;
        flex-direction: column; align-items: stretch; gap: 0;
        background: rgba(245,247,245,.98); backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--border); padding: 0.75rem var(--section-x) 1.25rem;
        box-shadow: 0 12px 32px rgba(0,0,0,.1); max-height: calc(100vh - 64px); overflow-y: auto;
      }
      nav.nav-open .nav-links { display: flex; }
      .nav-links a {
        font-size: var(--text-body); font-weight: 600; color: var(--text);
        padding: 0.85rem 0.5rem; min-height: 44px;
        display: flex; align-items: center; border-bottom: 1px solid var(--border);
      }
      .nav-links a:last-child { border-bottom: none; margin-top: 0.5rem; }
      .nav-links .nav-cta {
        justify-content: center; text-align: center;
        padding: 0.85rem 1.25rem !important; font-size: var(--text-body) !important;
        border-radius: 9px; border-bottom: none !important;
      }
      .hero-stats {
        display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 2rem;
        justify-items: center; max-width: 420px; margin-left: auto; margin-right: auto;
      }
      .stats-bar {
        display: grid; grid-template-columns: 1fr 1fr; padding: 1.5rem 1.25rem; gap: 1.25rem 1rem;
      }
      .stats-bar-item { flex: none; min-width: 0; }
      .stats-bar-divider { display: none; }
      .stats-bar-item:last-child { grid-column: 1 / -1; }
    }
    @media (max-width: 600px) {
      :root { --section-y: 3.5rem; --section-y-compact: 2.5rem; --section-x: clamp(1.25rem, 5vw, 1.75rem); }
      .hero { padding: 5.5rem var(--section-x) 2.75rem; }
      .hero h1 { font-size: clamp(1.85rem, 8vw, 2.35rem); margin-bottom: 0.45rem; }
      .hero-sub { font-size: clamp(1.15rem, 5vw, 1.35rem); margin-bottom: 0.85rem; }
      .hero p { font-size: 1.05rem; margin-bottom: 1.5rem; }
      .hero-stats { display: none; }
      .modules-grid { grid-template-columns: 1fr; }
      .section-header { margin-bottom: 2.5rem; }
      body { font-size: 1.0625rem; padding-bottom: 4.5rem; }
      .stat-lbl, .stats-bar-lbl { font-size: 1rem; }
      .footer-bottom { font-size: var(--text-sm); }
      .footer-col a { padding: 0.35rem 0; min-height: 44px; display: flex; align-items: center; }
      .workflow-details summary::after {
        min-height: 44px; display: inline-flex; align-items: center;
        padding: 0.65rem 1.15rem;
      }
    }

    /* ── MOBILE STICKY CTA ── */
    .mobile-sticky-cta {
      display: none;
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
      padding: 0.65rem var(--section-x) calc(0.65rem + env(safe-area-inset-bottom, 0px));
      background: rgba(245,247,245,.97); backdrop-filter: blur(12px);
      border-top: 1px solid var(--border);
      box-shadow: 0 -8px 24px rgba(0,0,0,.08);
    }
    .mobile-sticky-cta a {
      display: block; text-align: center; width: 100%;
      background: var(--green); color: #fff !important; font-weight: 800; font-size: 0.95rem;
      padding: 0.85rem 1rem; border-radius: 10px; text-decoration: none;
    }
    @media (max-width: 600px) {
      .mobile-sticky-cta { display: block; }
    }

/* ── NAV MODULES DROPDOWN (multi-page restructure, Aug 2026) ── */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: none; border: none; cursor: pointer; font: inherit;
  text-decoration: none; color: var(--muted); font-size: 0.95rem; font-weight: 500;
  padding: 0.35rem 0; transition: color .2s;
}
.nav-dropdown-trigger:hover,
.nav-dropdown:hover .nav-dropdown-trigger,
.nav-dropdown.open .nav-dropdown-trigger { color: var(--green-text); }
.nav-dropdown-trigger .caret { width: 10px; height: 10px; transition: transform .15s; flex-shrink: 0; }
.nav-dropdown:hover .nav-dropdown-trigger .caret,
.nav-dropdown.open .nav-dropdown-trigger .caret { transform: rotate(180deg); }
.nav-dropdown-menu {
  display: none; position: absolute; top: calc(100% - 2px); left: 50%; transform: translateX(-50%);
  margin: 0; padding: 0.55rem 0.35rem 0.35rem; background: transparent;
  min-width: 220px; z-index: 50;
}
/* Invisible hover bridge so the menu does not collapse between trigger and panel */
.nav-dropdown-menu::after {
  content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 14px;
}
.nav-dropdown-menu::before {
  content: ""; position: absolute; top: 0.45rem; left: 0; right: 0; bottom: 0;
  background: var(--surface-0); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md); z-index: -1;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
  display: block; padding: 0.6rem 0.85rem; border-radius: var(--radius-sm);
  font-size: 0.95rem; color: var(--text-900); text-decoration: none; white-space: nowrap;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible { background: var(--surface-1); color: var(--green-700); outline: none; }
.nav-dropdown-menu a.nav-dropdown-overview {
  font-weight: 700; color: var(--green-text);
  border-bottom: 1px solid var(--border); margin-bottom: 0.2rem; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
@media (max-width: 900px) {
  .nav-dropdown-menu {
    display: none; position: static; transform: none; margin: 0.15rem 0 0.35rem 0.5rem;
    border: none; box-shadow: none; padding: 0 0 0 0.5rem; background: transparent;
    border-left: 2px solid var(--border);
  }
  .nav-dropdown.open .nav-dropdown-menu { display: block; }
  .nav-dropdown:hover .nav-dropdown-menu { display: none; }
  .nav-dropdown.open:hover .nav-dropdown-menu { display: block; }
  .nav-dropdown-menu::before, .nav-dropdown-menu::after { display: none; }
  .nav-dropdown-menu a { padding: 0.55rem 0.35rem; color: var(--text-600); }
  .nav-dropdown-trigger .caret { display: inline-block; }
}

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE v3 — Main structure + staging type (Aug 2026)
   ═══════════════════════════════════════════════════════════════ */
.hp-shell {
  width: min(100% - 2.5rem, 1360px);
  margin-inline: auto;
}
.hp-eyebrow {
  font-size: clamp(0.75rem, 0.68rem + 0.25vw, 0.88rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-text);
  margin: 0 0 0.85rem;
}
.hp-hero-copy .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
.hp-hero-copy .hero-tagline {
  display: block;
  text-align: left;
  margin: 0 0 0.75rem;
  max-width: none;
}
.hp-h1 {
  font-size: clamp(1.85rem, 1.35rem + 1.6vw, 2.65rem);
  line-height: 1.18;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--text-900);
  margin: 0 0 1rem;
  max-width: 22ch;
}
.hp-h2 {
  font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.55rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-weight: 800;
  color: var(--text-900);
  margin: 0 0 0.85rem;
  max-width: 28ch;
}
.hp-h2-tight {
  max-width: 42ch;
  white-space: normal;
}
.hp-h2-oneline {
  max-width: none;
  font-size: clamp(1.55rem, 1.2rem + 1.2vw, 2.15rem);
  line-height: 1.25;
  white-space: nowrap;
}
.hp-lead, .hp-sub {
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.55;
  color: var(--text-600);
  max-width: 38rem;
  margin: 0 0 1.35rem;
}
.hp-section-head { margin-bottom: 2rem; }
.hp-section-head .hp-h2 { max-width: 42ch; }
.hp-cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-bottom: 0.85rem; }
.hp-cta-center { justify-content: center; }
.hp-btn { min-height: 2.85rem; padding: 0.75rem 1.35rem; font-size: 1rem; }
.hp-tertiary {
  display: inline-block;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--green-text);
  text-decoration: none;
}
.hp-tertiary:hover { text-decoration: underline; }
.hp-fineprint {
  font-size: 0.88rem;
  color: var(--text-600);
  max-width: 48rem;
  margin: 1.1rem 0 0;
  line-height: 1.45;
}
.hp-fineprint-center { text-align: center; margin-inline: auto; }

/* Hero — green tint + 2-col copy/A1 + 7-step pipeline in first look */
.hp-hero {
  padding: clamp(4.75rem, 7vw, 5.75rem) 0 clamp(1.75rem, 3vw, 2.5rem);
  background: var(--green-100);
}
.hp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  margin-bottom: 1.25rem;
}
.hp-browser {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 16px 40px rgba(14, 26, 20, 0.1);
  max-width: 520px;
  margin-left: auto;
}
.hp-browser-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 0.85rem;
  background: #eef0ee;
  border-bottom: 1px solid var(--border);
  font-size: 0.74rem;
  color: var(--text-600);
  font-weight: 600;
}
.hp-browser-bar span {
  width: 9px; height: 9px; border-radius: 50%; background: #c5cbc6;
}
.hp-browser-bar em { font-style: normal; margin-left: 0.5rem; }
.hp-browser img { display: block; width: 100%; height: auto; }
.hp-hero .pipeline-hero {
  width: 100%;
  max-width: none;
  margin-top: 0.25rem;
  margin-bottom: 1.1rem;
  justify-content: space-between;
  gap: 0.15rem 0;
}
.hp-hero .pipeline-step {
  flex: 1 1 0;
  min-width: 64px;
  max-width: none;
}
.hp-hero .pipeline-report {
  flex: 1 1 0;
  min-width: 72px;
  max-width: none;
}
.hp-workflow-cta {
  margin-top: 1.75rem;
}
.hp-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(29, 158, 82, 0.18);
  text-align: center;
}
.hp-hero-stats .stat-num,
.hp-hero-stats .stat-word {
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-900);
  line-height: 1.15;
}
.hp-hero-stats .stat-lbl {
  margin-top: 0.3rem;
  font-size: 0.88rem;
  color: var(--text-600);
  font-weight: 500;
}

/* Alternating section grounds */
.hp-problem, .hp-workflow, .hp-demo, .hp-outputs, .hp-pricing, .hp-final {
  padding: clamp(3.25rem, 5.5vw, 5.5rem) 0;
}
.hp-ba, .hp-case, .hp-who {
  padding: clamp(3.25rem, 5.5vw, 5.5rem) 0;
  background: var(--green-100);
}
.hp-problem { background: #fff; }
.hp-problem .hp-h2 { max-width: 36ch; margin-bottom: 2rem; }
.hp-problem-grid, .hp-who-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
.hp-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.4rem 1.25rem;
  box-shadow: var(--shadow-sm);
}
.hp-card h3 {
  font-size: clamp(1.1rem, 1rem + 0.35vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 0.45rem;
  color: var(--text-900);
}
.hp-card p {
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--text-600);
  margin: 0;
  max-width: 32ch;
}

.hp-workflow { background: #fff; }
.hp-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.85rem;
}
.hp-flow-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  text-decoration: none;
  color: inherit;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.15rem 1rem 1.25rem;
  min-height: 100%;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.hp-flow-card:hover {
  border-color: var(--green-600);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.hp-flow-step {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--green-text);
}
.hp-flow-card h3 {
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0;
}
.hp-flow-card p {
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--text-600);
  margin: 0;
  flex: 1;
}
.hp-flow-shot {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  margin: 0.25rem 0;
  background: #fff;
}
.hp-flow-shot img { display: block; width: 100%; height: auto; max-height: 110px; object-fit: cover; }
.hp-flow-link {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--green-text);
}
.hp-flow-note {
  margin-top: 1.5rem;
  font-size: 0.98rem;
  color: var(--text-600);
  max-width: min(56rem, 100%);
  white-space: nowrap;
}
@media (max-width: 900px) {
  .hp-flow-note { white-space: normal; }
}

/* Sample Project case — parallel snapshots */
.hp-io {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
  margin-bottom: 1.5rem;
}
.hp-io-col {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem 1.15rem;
}
.hp-io-mid { border-color: rgba(29,158,82,.35); background: #f3faf6; }
.hp-io-col h3 {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 0.65rem;
}
.hp-io-col ul { margin: 0; padding: 0; list-style: none; }
.hp-io-col li {
  font-size: 0.95rem;
  color: var(--text-600);
  padding: 0.3rem 0;
  border-top: 1px solid var(--border);
}
.hp-io-col li:first-of-type { border-top: 0; padding-top: 0; }
.hp-case-visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 0.85rem;
  align-items: stretch;
}
.hp-shot {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  min-height: 100%;
}
.hp-shot picture {
  display: block;
  background: #0b0f0e;
  flex: 1;
}
.hp-shot img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: contain;
  object-position: center;
  background: #0b0f0e;
}
.hp-shot:first-child picture { background: #0b0f0e; }
.hp-shot:last-child picture { background: #fff; }
.hp-shot:last-child img {
  background: #fff;
  padding: 0.35rem;
}
.hp-shot figcaption {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem 0.65rem;
  align-items: baseline;
  padding: 0.7rem 0.9rem;
  border-top: 1px solid var(--border);
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--text-600);
}
.hp-shot figcaption strong {
  color: var(--text-900);
  font-weight: 800;
  white-space: nowrap;
}
.hp-shot figcaption span {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 640px) {
  .hp-shot figcaption { flex-wrap: wrap; }
  .hp-shot figcaption span { white-space: normal; overflow: visible; }
}
.hp-case-actions { display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: center; margin-top: 1rem; }

/* Demo — compact player (Glint-style: not full-bleed) */
.hp-demo {
  background: #0e1a14;
  color: #fff;
  padding: clamp(2.25rem, 3.5vw, 3.25rem) var(--section-x);
}
.hp-demo .hp-shell { max-width: 760px; }
.hp-demo .hp-section-head { margin-bottom: 1.15rem; text-align: center; }
.hp-demo .hp-h2 { font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.95rem); max-width: none; }
.hp-demo .hp-sub { margin-inline: auto; max-width: 36rem; font-size: 0.95rem; }
.hp-demo .hp-h2, .hp-demo .hp-sub { color: #fff; }
.hp-demo .hp-sub { color: rgba(255,255,255,.72); }
.hp-video-wrap {
  position: relative;
  width: min(100%, 680px);
  margin-inline: auto;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: #08110c;
  aspect-ratio: 16 / 9;
  box-shadow: 0 12px 32px rgba(0,0,0,.28);
}
.hp-video {
  position: absolute;
  inset: 0;
  display: block;
  text-decoration: none;
}
.hp-video img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0.88;
}
.hp-video.is-pending img { opacity: 0.72; filter: saturate(0.9); }
.hp-play {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 3.25rem; height: 3.25rem;
  border-radius: 999px;
  background: var(--green-600);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.hp-play.is-pending {
  background: rgba(15, 40, 28, 0.88);
  border: 1.5px solid rgba(255,255,255,.28);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
}
.hp-video-caption {
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.75rem;
  color: #fff;
  font-weight: 600;
  font-size: 0.82rem;
  text-shadow: 0 1px 8px rgba(0,0,0,.45);
}
.hp-video-frame {
  position: absolute;
  inset: 0;
}
.hp-video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Real outputs (Main preview slider) — compact + wide */
#preview {
  background: #fff;
  padding: clamp(2.75rem, 4.5vw, 4rem) var(--section-x);
}
#preview.preview-compact .preview-slider {
  max-width: 920px;
  margin-inline: auto;
}
#preview.preview-compact .preview-intro {
  text-align: center;
  margin-bottom: 1.25rem;
}
#preview.preview-compact .preview-intro-link {
  margin: 0.5rem auto 0;
  font-size: 0.88rem;
}
#preview.preview-compact .preview-intro-link a {
  color: var(--green-dk);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1.5px solid rgba(29,158,82,.35);
}
#preview.preview-compact .preview-intro-note {
  margin: 0.45rem auto 0;
  max-width: 44rem;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.45;
}
#preview.preview-compact .preview-card-body {
  padding: 0.65rem 0.85rem 0.55rem;
}
#preview.preview-compact .preview-map {
  max-height: 72px;
  margin-bottom: 0.35rem;
}
#preview.preview-compact .preview-shot {
  margin: 0 0 0.45rem;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #0b1510;
  aspect-ratio: 16 / 10;
}
#preview.preview-compact .preview-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
#preview.preview-compact .preview-yield-bars {
  gap: 0.35rem;
  margin-bottom: 0.4rem;
}
#preview.preview-compact .preview-yield-track {
  height: 11px;
}
#preview.preview-compact .preview-disclaimer {
  padding: 0.32rem 0.5rem;
  font-size: 0.6rem;
}
#preview.preview-compact .preview-source {
  display: none;
}
#preview.preview-compact .preview-dots {
  margin-top: 0.65rem;
}
#preview.preview-compact .preview-footnote {
  text-align: center;
  margin: 0.5rem auto 0;
  font-size: 0.75rem;
  color: var(--muted);
}
#preview.preview-compact .preview-walkthrough {
  text-align: center;
  margin-top: 1rem;
}
#faq {
  background: var(--green-100);
  padding: clamp(3.25rem, 5.5vw, 5.5rem) var(--section-x);
}
#preview .section-title {
  font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.55rem);
}

/* About — Main grid + staging who row */
.hp-about {
  padding: clamp(3.25rem, 5.5vw, 5.5rem) 0;
  background: var(--green-100);
}
.hp-about .about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  margin-bottom: 2.5rem;
}
.hp-about .about-text .hp-sub { margin-bottom: 1rem; }
.hp-about .about-text .btn-demo { margin-top: 0.25rem; }
.hp-about-who {
  padding-top: 2rem;
  border-top: 1px solid rgba(29, 158, 82, 0.15);
}
.hp-h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 1.1rem;
  color: var(--text-900);
}
.hp-inline-cta {
  text-align: center;
  margin-top: 1.25rem;
}
.hp-workflow-cta,
.hp-pricing-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
}

/* Who */
.hp-who-note { margin-top: 1.75rem; }

/* Pricing — Main cards + staging type scale */
.hp-pricing { background: #fff; text-align: center; }
.hp-pricing .hp-section-head { margin-inline: auto; }
.hp-pricing .hp-h2, .hp-pricing .hp-sub { margin-inline: auto; }
.hp-pricing-grid {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1050px;
  margin: 0 auto;
  text-align: left;
}
.hp-pricing .price-card {
  padding: 1.75rem 1.5rem;
}
.hp-pricing .price-tier {
  font-size: 1.05rem;
}
.hp-pricing .price-amount {
  font-size: clamp(2rem, 1.7rem + 0.8vw, 2.55rem);
}
.hp-pricing .price-desc {
  font-size: 0.98rem;
}
.hp-pricing-cta {
  margin-top: 1.5rem;
}

.hp-final {
  background: var(--green-100);
  text-align: center;
  border-top: 1px solid rgba(29, 158, 82, 0.12);
}
.hp-final .hp-h2, .hp-final .hp-sub { margin-inline: auto; }

/* Restored trust sections — tightened for hp layout */
/* Flagship uses classic .flagship sizes (not crushed) */
.hp-case-merged {
  display: grid;
  gap: 1rem;
  margin-top: 0.35rem;
}
.hp-io-compact { margin-bottom: 0; }
#preview.preview-compact .preview-shot-ui {
  aspect-ratio: 16 / 9;
  background: #fff;
}
#preview.preview-compact .preview-shot-ui img {
  object-fit: contain;
  object-position: center top;
}

.hp-why {
  background: #fff;
  padding: clamp(2.5rem, 4vw, 3.75rem) var(--section-x);
}
.hp-why .hp-sub {
  max-width: 56rem; /* full EN/DE lead on one line at desktop widths */
}
.hp-why-grid { gap: 1rem; }
.hp-why .why-card { padding: 1.15rem 1.2rem; }
.hp-why .why-card h4 { font-size: 0.98rem; }
.hp-why .why-card p { font-size: 0.88rem; line-height: 1.5; }

.preview-ie-note {
  margin: 0.55rem 0 0;
  padding: 0.5rem 0.6rem;
  background: var(--green-lt, #e8f5ee);
  border: 1px solid rgba(29, 158, 82, 0.22);
  border-radius: 8px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-700, #334);
}
.preview-ie-note strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--text-900, #111);
  font-size: 0.8rem;
}
.preview-ie-note a {
  color: var(--green-dk, #145f34);
  font-weight: 700;
  text-decoration: none;
}
.preview-ie-note a:hover { text-decoration: underline; }

.hp-interop {
  padding: clamp(2.75rem, 4.5vw, 4rem) var(--section-x);
}
.hp-interop .hp-section-head-on-dark .hp-eyebrow { color: #4ade80; }
.hp-interop .hp-section-head-on-dark .hp-h2 { color: #fff; }
.hp-interop .hp-section-head-on-dark .hp-sub {
  color: rgba(255, 255, 255, 0.78);
  max-width: 44rem;
}
.hp-interop .epc-grid { margin-top: 1.25rem; gap: 0.85rem; }
.hp-interop .epc-item { padding: 0.85rem 1rem; }
.hp-interop .epc-item h4 { font-size: 0.92rem; }
.hp-interop .epc-item p { font-size: 0.84rem; }
.hp-interop-note {
  text-align: center;
  margin: 1.25rem auto 0;
  max-width: 40rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.55;
}

@media (max-width: 1100px) {
  .hp-flow { grid-template-columns: repeat(2, 1fr); }
  .hp-hero-grid { grid-template-columns: 1fr; }
  .hp-h2-oneline { white-space: normal; }
  .hp-browser { max-width: none; margin-left: 0; }
  .hp-h1 { max-width: none; }
  .hp-hero-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .hp-shell { width: min(100% - 1.5rem, 1360px); }
  .hp-problem-grid,
  .hp-who-grid,
  .hp-io,
  .hp-case-visual,
  .hp-pricing-grid,
  .hp-flow,
  .hp-hero-stats { grid-template-columns: 1fr; }
  .hp-h1 { font-size: clamp(1.7rem, 7vw, 2.15rem); }
  .hp-h2 { font-size: clamp(1.55rem, 6.5vw, 2.1rem); max-width: none; }
  .hp-lead, .hp-sub, .hp-card p { font-size: 1rem; }
  .hp-btn { width: 100%; justify-content: center; text-align: center; }
  .hp-cta-row { flex-direction: column; align-items: stretch; }
  .hp-play { width: 4rem; height: 4rem; }
  .hp-flow { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.85rem; padding-bottom: 0.5rem; }
  .hp-flow-card { flex: 0 0 min(82vw, 300px); scroll-snap-align: start; }
  .hp-shot img { height: 220px; }
  .hp-about .about-grid { grid-template-columns: 1fr; }
  .hp-why-grid { grid-template-columns: 1fr; }
  .hp-workflow-cta,
  .hp-pricing-cta { flex-direction: column; align-items: stretch; }
  .hp-workflow-cta .btn-primary,
  .hp-workflow-cta .btn-demo,
  .hp-pricing-cta .btn-primary,
  .hp-pricing-cta .btn-demo { width: 100%; text-align: center; justify-content: center; }
  .hp-hero .pipeline-hero { margin-top: 0.75rem; }
}
@media (min-width: 1800px) {
  .hp-shell { width: min(100% - 4rem, 1440px); }
}