*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --ink: #16211c;
  --ink2: #2a3831;
  --ink3: #5a5a54;
  --ink4: #6e6e66;
  --ink4-dk: #a8aca6;   /* muted text on dark surfaces */
  --paper: #f5f3ee;
  --paper2: #edeae2;
  --paper3: #e3e0d8;
  --white: #ffffff;
  --green: #1A4A38;
  --green2: #1A4A38;
  --green3: #E5EDE9;
  --green-lt: #5FBF8F;      /* green accent on dark backgrounds */
  --amber-lt: #F0C674;      /* amber accent on dark backgrounds */
  --on-dark: rgba(245,243,238,0.92);
  --on-dark-2: rgba(245,243,238,0.72);
  --on-dark-3: rgba(245,243,238,0.6);
  --amber: #b86b0a;
  --amber2: #fdf0e0;
  --rule: rgba(22,33,28,0.12);
  --serif: 'DM Serif Display', Georgia, serif;
  --sans: 'Instrument Sans', -apple-system, sans-serif;
  --mono: 'DM Mono', 'Courier New', monospace;
}
html { scroll-behavior: smooth; }
body { font-family: var(--sans); background: var(--paper); color: var(--ink); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; }

/* NAV */
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 48px; background: rgba(245,243,238,0.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
.logo { font-family: var(--serif); font-size: 21px; color: var(--ink); text-decoration: none; letter-spacing: -0.02em; }
.logo span { color: var(--green2); font-style: italic; }
.nav-links { display: flex; gap: 24px; align-items: center; }
.nav-link { font-size: 13px; font-weight: 500; color: var(--ink3); text-decoration: none; }
.nav-link:hover { color: var(--ink); }
.nav-dropdown { position: relative; }
.nav-dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: var(--white); border: 1px solid var(--rule); border-radius: 4px; padding: 8px 0; min-width: 200px; box-shadow: 0 8px 24px rgba(14,14,12,0.08); }
.nav-dropdown:hover .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a { display: block; padding: 9px 16px; font-size: 13px; color: var(--ink3); text-decoration: none; }
.nav-dropdown-menu a:hover { background: var(--paper2); color: var(--ink); }
.nav-btn { background: var(--ink); color: var(--paper); padding: 8px 18px; border-radius: 3px; font-size: 13px; font-weight: 500; text-decoration: none; }
.nav-btn:hover { background: var(--green); color: var(--paper); }

/* HAMBURGER */
.nav-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; background: none; border: none; cursor: pointer; padding: 4px; }
.nav-hamburger span { display: block; width: 22px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* MOBILE MENU OVERLAY */
.nav-mobile { display: none; position: fixed; top: 60px; left: 0; right: 0; bottom: 0; background: var(--paper); z-index: 99; overflow-y: auto; padding: 24px 32px 48px; }
.nav-mobile.open { display: block; }
.nav-mobile-section { margin-bottom: 32px; }
.nav-mobile-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink4); margin-bottom: 12px; }
.nav-mobile a { display: block; font-size: 18px; font-weight: 500; color: var(--ink); text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.nav-mobile a:last-child { border-bottom: none; }
.nav-mobile a:hover { color: var(--green2); }
.nav-mobile-cta { margin-top: 32px; }
.nav-mobile-cta a { display: block; background: var(--ink); color: var(--paper); padding: 14px 24px; border-radius: 3px; font-size: 15px; font-weight: 500; text-align: center; text-decoration: none; }
.nav-mobile-cta a:hover { background: var(--green); color: var(--paper); }

/* BUTTONS */
.btn-dark { background: var(--green); color: var(--paper); padding: 13px 26px; border-radius: 3px; font-size: 14px; font-weight: 600; text-decoration: none; display: inline-block; border: 1px solid var(--green); }
.btn-dark:hover { background: #123528; border-color: #123528; }
.btn-outline { border: 1px solid var(--ink3); color: var(--ink2); background: transparent; padding: 13px 26px; border-radius: 3px; font-size: 14px; font-weight: 600; text-decoration: none; display: inline-block; }
.btn-outline:hover { border-color: var(--ink); background: rgba(22,33,28,0.05); }
.btn-green { background: var(--green); color: var(--paper); padding: 13px 26px; border-radius: 3px; font-size: 14px; font-weight: 500; text-decoration: none; display: inline-block; }
.btn-green:hover { background: var(--ink); }
.btn-ghost-green { border: 1px solid var(--green2); color: var(--green2); padding: 13px 26px; border-radius: 3px; font-size: 14px; font-weight: 500; text-decoration: none; display: inline-block; }
.btn-ghost-green:hover { background: var(--green3); }
.btn-amber { background: var(--amber); color: var(--paper); padding: 13px 26px; border-radius: 3px; font-size: 14px; font-weight: 500; text-decoration: none; display: inline-block; }
.btn-amber:hover { background: var(--ink); }
.btn-ghost-amber { border: 1px solid var(--amber); color: var(--amber); padding: 13px 26px; border-radius: 3px; font-size: 14px; font-weight: 500; text-decoration: none; display: inline-block; }
.btn-ghost-amber:hover { background: var(--amber2); }

/* BADGES */
.badge { font-family: var(--mono); font-size: 11px; padding: 5px 10px; border-radius: 2px; }
.badge-green { background: var(--green3); color: var(--green); }
.badge-amber { background: var(--amber2); color: var(--amber); }
.badge-gray { background: var(--paper3); color: var(--ink3); }
.tag-green { background: var(--green3); color: var(--green); font-family: var(--mono); font-size: 11px; padding: 5px 10px; border-radius: 2px; font-weight: 500; }
.tag-amber { background: var(--amber2); color: var(--amber); font-family: var(--mono); font-size: 11px; padding: 5px 10px; border-radius: 2px; font-weight: 500; }
.tag-link { font-size: 13px; color: var(--green2); text-decoration: none; font-weight: 500; }
.tag-link:hover { color: var(--ink); }

/* SECTION UTILITIES */
.section-tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px; }
.section-tag.light { color: #5ecb8a; }
.section-tag.dark { color: var(--green2); }
.section-tag.amber { color: var(--amber); }
.section-h2 { font-family: var(--serif); font-size: clamp(32px, 3.5vw, 46px); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 16px; }
.section-h2.on-dark { color: var(--paper); }
.section-h2.on-light { color: var(--ink); }
.section-lead { font-size: 17px; line-height: 1.7; max-width: 580px; margin-bottom: 48px; }
.section-lead.on-dark { color: rgba(245,243,238,0.75); }
.section-lead.on-light { color: var(--ink3); }

/* HERO */
.hero { padding: 110px 80px 80px; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.hero-tag { font-family: var(--mono); font-size: 11px; color: var(--green-lt); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.hero-tag::before { content: ''; display: block; width: 20px; height: 1px; background: var(--green-lt); }
.hero h1 { font-family: var(--serif); font-size: clamp(40px, 4.5vw, 56px); line-height: 1.06; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 20px; }
.hero h1 em { font-style: italic; color: var(--green-lt); }
.hero-sub { font-size: 17px; color: var(--ink3); line-height: 1.7; margin-bottom: 32px; max-width: 440px; }
.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 36px; }
.hero-badges { display: flex; gap: 8px; flex-wrap: wrap; }

/* HERO CARD */
.hero-card { background: var(--white); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; box-shadow: 0 4px 24px rgba(14,14,12,0.07); }
.hc-header { padding: 12px 18px; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; background: var(--paper2); }
.hc-title { font-family: var(--mono); font-size: 11px; color: var(--ink4); letter-spacing: 0.06em; }
.hc-pill { font-family: var(--mono); font-size: 10px; background: var(--green3); color: var(--green); padding: 3px 8px; border-radius: 2px; }
.hc-body { padding: 12px 18px; }
.hc-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--rule); }
.hc-row:last-of-type { border-bottom: none; }
.hc-row.faded { opacity: 0.4; }
.hc-name { font-size: 13px; font-weight: 500; color: var(--ink); }
.hc-type { font-family: var(--mono); font-size: 10px; color: var(--ink4); background: var(--paper2); padding: 2px 6px; border-radius: 2px; }
.hc-dot { width: 6px; height: 6px; border-radius: 50%; background: #4aab76; flex-shrink: 0; }
.hc-dot.csv { background: var(--amber); }
.hc-write-back { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink3); background: var(--paper2); border-top: 1px solid var(--rule); padding: 9px 18px; }
.hc-write-back::before { content: '↩'; color: var(--green2); font-size: 14px; }
.hc-footer { padding: 12px 18px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: baseline; }
.hc-foot-label { font-size: 12px; color: var(--ink4); }
.hc-foot-sub { font-family: var(--mono); font-size: 10px; color: var(--ink4); margin-top: 2px; }
.hc-foot-val { font-family: var(--serif); font-size: 26px; color: var(--green2); letter-spacing: -0.02em; }

/* LOGOS */
.logos { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--paper2); padding: 14px 80px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.logos-label { font-family: var(--mono); font-size: 10px; color: var(--ink4); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; }
.logos-list { display: flex; gap: 28px; flex-wrap: wrap; }
.logos-list span { font-size: 13px; font-weight: 600; color: var(--ink4); }

/* PROBLEM */
.problem { background: var(--ink); padding: 80px; }
.problem-inner { max-width: 1200px; margin: 0 auto; }
.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(245,243,238,0.08); border: 1px solid rgba(245,243,238,0.08); border-radius: 6px; overflow: hidden; }
.problem-item { background: var(--ink); padding: 36px 32px; }
.problem-num { font-family: var(--serif); font-size: 52px; color: rgba(245,243,238,0.22); line-height: 1; margin-bottom: 16px; }
.problem-item h3 { font-size: 15px; font-weight: 600; color: var(--paper); margin-bottom: 10px; }
.problem-item p { font-size: 14px; color: rgba(245,243,238,0.8); line-height: 1.65; }

/* ICP */
.icp-section { padding: 80px; max-width: 1200px; margin: 0 auto; }
.icp-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; }
.icp-card { background: var(--white); padding: 44px 40px; border-right: 1px solid var(--rule); }
.icp-card:last-child { border-right: none; }
.icp-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 16px; padding: 4px 10px; border-radius: 2px; display: inline-block; }
.icp-eyebrow.green { background: var(--green3); color: var(--green); }
.icp-eyebrow.amber { background: var(--amber2); color: var(--amber); }
.icp-card h3 { font-family: var(--serif); font-size: 27px; color: var(--ink); letter-spacing: -0.02em; margin-bottom: 12px; line-height: 1.15; }
.icp-card > p { font-size: 15px; color: var(--ink3); line-height: 1.7; margin-bottom: 20px; }
.icp-pains { list-style: none; margin-bottom: 24px; }
.icp-pains li { font-size: 14px; color: var(--ink3); padding: 8px 0; border-bottom: 1px solid var(--rule); display: flex; gap: 10px; line-height: 1.5; }
.icp-pains li:last-child { border-bottom: none; }
.icp-pains li::before { content: '→'; color: var(--ink4); flex-shrink: 0; font-size: 13px; margin-top: 1px; }
.icp-product { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* PRODUCTS */
.products-section { background: var(--paper2); padding: 80px; }
.products-inner { max-width: 1200px; margin: 0 auto; }
.products-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
.product-card { background: var(--white); border: 1px solid var(--rule); border-radius: 6px; padding: 40px; position: relative; overflow: hidden; }
.product-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.product-card.automate::before { background: var(--green2); }
.product-card.intelligence::before { background: var(--amber); }
.product-tier { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 10px; }
.product-tier.green { color: var(--green2); }
.product-tier.amber { color: var(--amber); }
.product-card h3 { font-family: var(--serif); font-size: 28px; color: var(--ink); letter-spacing: -0.02em; margin-bottom: 4px; }
.product-desc-label { font-family: var(--mono); font-size: 12px; color: var(--ink4); margin-bottom: 16px; }
.product-card > p { font-size: 15px; color: var(--ink3); line-height: 1.7; margin-bottom: 24px; }
.feature-list { list-style: none; margin-bottom: 28px; }
.feature-list li { font-size: 14px; color: var(--ink3); padding: 7px 0; border-bottom: 1px solid var(--rule); display: flex; gap: 10px; line-height: 1.5; }
.feature-list li:last-child { border-bottom: none; }
.feature-list li::before { content: '✓'; font-size: 12px; flex-shrink: 0; margin-top: 1px; }
.product-card.automate .feature-list li::before { color: var(--green2); }
.product-card.intelligence .feature-list li::before { color: var(--amber); }
.product-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 20px; }
.price-from { font-family: var(--mono); font-size: 11px; color: var(--ink4); }
.price-num { font-family: var(--serif); font-size: 36px; color: var(--ink); letter-spacing: -0.03em; }
.price-unit { font-size: 13px; color: var(--ink4); }

/* HOW IT WORKS */
.how-section { padding: 80px; max-width: 1200px; margin: 0 auto; }
.how-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; margin-top: 48px; }
.step { display: grid; grid-template-columns: 36px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.step:first-child { padding-top: 0; }
.step:last-child { border-bottom: none; }
.step-num { font-family: var(--mono); font-size: 11px; color: var(--ink4); padding-top: 2px; }
.step h4 { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.step p { font-size: 14px; color: var(--ink3); line-height: 1.6; }

/* TERMINAL */
.terminal { background: #17170f; border-radius: 8px; overflow: hidden; position: sticky; top: 80px; }
.term-bar { background: #222218; padding: 10px 16px; display: flex; align-items: center; gap: 7px; }
.td { width: 10px; height: 10px; border-radius: 50%; }
.td1 { background: #ff5f57; } .td2 { background: #febc2e; } .td3 { background: #28c840; }
.term-label { font-family: var(--mono); font-size: 11px; color: rgba(245,243,238,0.62); margin-left: auto; }
.term-body { padding: 20px 20px 24px; font-family: var(--mono); font-size: 12px; line-height: 1.9; }
.tc { color: rgba(245,243,238,0.28); }
.tk { color: #7dd3a8; }
.tv { color: rgba(245,243,238,0.85); }
.tg { color: #4aab76; }
.td-dim { color: rgba(245,243,238,0.42); }
.tb { height: 12px; }

/* PRICING */
.pricing-section { background: var(--ink); padding: 80px; }
.pricing-inner { max-width: 1200px; margin: 0 auto; }
.pricing-table { background: rgba(245,243,238,0.04); border: 1px solid rgba(245,243,238,0.1); border-radius: 6px; overflow: hidden; margin-top: 48px; margin-bottom: 28px; }
.pt-head { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; border-bottom: 1px solid rgba(245,243,238,0.1); }
.pt-head div { padding: 14px 20px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(245,243,238,0.62); text-align: right; }
.pt-head div:first-child { text-align: left; }
.pt-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; border-bottom: 1px solid rgba(245,243,238,0.07); }
.pt-row:last-child { border-bottom: none; }
.pt-row div { padding: 16px 20px; font-size: 14px; text-align: right; }
.pt-row div:first-child { text-align: left; }
.pt-row-label { font-size: 14px; font-weight: 500; color: var(--paper); }
.pt-row-sub { font-family: var(--mono); font-size: 11px; color: rgba(245,243,238,0.62); margin-top: 3px; }
.pt-price { font-family: var(--serif); font-size: 22px; letter-spacing: -0.02em; }
.pt-price.green { color: #5ecb8a; }
.pt-price.amber { color: #f5b842; }
.pt-price.white { color: var(--paper); }
.pt-unit { font-family: var(--mono); font-size: 11px; color: rgba(245,243,238,0.62); }
.scenarios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sc { background: rgba(245,243,238,0.04); border: 1px solid rgba(245,243,238,0.1); border-radius: 6px; padding: 24px; }
.sc h4 { font-size: 14px; font-weight: 600; color: var(--paper); margin-bottom: 4px; }
.sc-desc { font-family: var(--mono); font-size: 11px; color: rgba(245,243,238,0.62); margin-bottom: 16px; }
.sc-line { display: flex; justify-content: space-between; font-size: 13px; color: rgba(245,243,238,0.8); padding: 5px 0; border-bottom: 1px solid rgba(245,243,238,0.07); }
.sc-line:last-of-type { border-bottom: none; }
.sc-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; margin-top: 12px; border-top: 1px solid rgba(245,243,238,0.15); }
.sc-total-label { font-size: 12px; color: rgba(245,243,238,0.75); }
.sc-total-val { font-family: var(--serif); font-size: 26px; color: var(--paper); letter-spacing: -0.02em; }
.sc-roi { font-family: var(--mono); font-size: 11px; color: #5ecb8a; text-align: right; margin-top: 6px; }
.pricing-note { font-family: var(--mono); font-size: 11px; color: rgba(245,243,238,0.62); text-align: center; margin-top: 20px; line-height: 1.8; }

/* TESTIMONIALS */
.proof-section { background: var(--paper2); padding: 80px; }
.proof-inner { max-width: 1200px; margin: 0 auto; }
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; margin-top: 48px; }
.proof-card { background: var(--paper2); padding: 36px 32px; }
.proof-card:hover { background: var(--paper); }
.proof-q { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--ink); line-height: 1.6; margin-bottom: 24px; }
.proof-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.proof-role { font-family: var(--mono); font-size: 11px; color: var(--ink4); margin-top: 2px; }

/* FAQ */
.faq-section { background: var(--paper); padding: 80px; }
.faq-inner { max-width: 1200px; margin: 0 auto; }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 80px; margin-top: 48px; }
.faq-item { padding: 22px 0; border-bottom: 1px solid var(--rule); }
.faq-q { font-family: var(--serif); font-size: 17px; color: var(--ink); margin-bottom: 10px; line-height: 1.3; }
.faq-a { font-size: 14px; color: var(--ink3); line-height: 1.65; }

/* CTA FINAL */
.cta-final { background: var(--green); padding: 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.cta-final h2 { font-family: var(--serif); font-size: clamp(30px, 3.5vw, 44px); color: var(--paper); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 16px; }
.cta-final h2 em { color: rgba(245,243,238,0.55); font-style: italic; }
.cta-final p { font-size: 16px; color: rgba(245,243,238,0.75); line-height: 1.7; }
.cta-options { display: flex; flex-direction: column; gap: 12px; }
.cta-opt { background: rgba(245,243,238,0.1); border: 1px solid rgba(245,243,238,0.2); border-radius: 4px; padding: 18px 22px; text-decoration: none; color: var(--paper); display: flex; justify-content: space-between; align-items: center; }
.cta-opt:hover { background: rgba(245,243,238,0.18); }
.cta-opt-label { font-family: var(--mono); font-size: 10px; color: rgba(245,243,238,0.8); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.cta-opt-text { font-family: var(--serif); font-size: 17px; }
.cta-arrow { font-size: 18px; opacity: 0.5; flex-shrink: 0; margin-left: 12px; }

/* INNER PAGE HERO */
.page-hero { padding: 110px 80px 60px; background: var(--ink); }
.page-hero-inner { max-width: 1200px; margin: 0 auto; }
.page-hero h1 { font-family: var(--serif); font-size: clamp(38px, 4vw, 54px); color: var(--paper); letter-spacing: -0.02em; line-height: 1.08; margin-bottom: 20px; }
.page-hero h1 em { font-style: italic; color: #5ecb8a; }
.page-hero h1 em.amber { color: #f5b842; }
.page-hero-sub { font-size: 18px; color: rgba(245,243,238,0.75); line-height: 1.7; max-width: 560px; margin-bottom: 36px; }
.page-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-paper { background: var(--paper); color: var(--ink); padding: 13px 26px; border-radius: 3px; font-size: 14px; font-weight: 500; text-decoration: none; display: inline-block; }
.btn-paper:hover { background: var(--green3); }
.btn-ghost-paper { border: 1px solid rgba(245,243,238,0.25); color: rgba(245,243,238,0.8); padding: 13px 26px; border-radius: 3px; font-size: 14px; font-weight: 500; text-decoration: none; display: inline-block; }
.btn-ghost-paper:hover { border-color: rgba(245,243,238,0.8); color: var(--paper); }

/* CONTENT SECTION */
.content-section { padding: 80px; max-width: 1200px; margin: 0 auto; }
.content-section-dark { padding: 80px; background: var(--ink); }
.content-section-mid { padding: 80px; background: var(--paper2); }
.content-inner { max-width: 1200px; margin: 0 auto; }

/* FEATURE GRID */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; margin-top: 48px; }
.feature-block { background: var(--white); padding: 32px 28px; }
.feature-block-dark { background: var(--ink); padding: 32px 28px; }
.feature-icon { font-size: 24px; margin-bottom: 14px; }
.feature-block h4 { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.feature-block-dark h4 { font-size: 15px; font-weight: 600; color: var(--paper); margin-bottom: 8px; }
.feature-block p { font-size: 14px; color: var(--ink3); line-height: 1.65; }
.feature-block-dark p { font-size: 14px; color: rgba(245,243,238,0.8); line-height: 1.65; }

/* TWO COL */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; margin-top: 48px; }
.two-col-tight { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }

/* STAT ROW */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; margin-top: 48px; }
.stat-block { background: var(--white); padding: 32px 28px; }
.stat-num { font-family: var(--serif); font-size: 44px; color: var(--green2); letter-spacing: -0.03em; line-height: 1; margin-bottom: 8px; }
.stat-num.amber { color: var(--amber); }
.stat-label { font-size: 14px; color: var(--ink3); line-height: 1.5; }
.stat-sub { font-family: var(--mono); font-size: 11px; color: var(--ink4); margin-top: 4px; }

/* PROSE */
.prose h3 { font-family: var(--serif); font-size: 22px; color: var(--ink); letter-spacing: -0.02em; margin-bottom: 12px; margin-top: 36px; }
.prose h3:first-child { margin-top: 0; }
.prose p { font-size: 15px; color: var(--ink3); line-height: 1.75; margin-bottom: 16px; }
.prose ul { list-style: none; margin-bottom: 20px; }
.prose ul li { font-size: 15px; color: var(--ink3); line-height: 1.65; padding: 6px 0; border-bottom: 1px solid var(--rule); display: flex; gap: 10px; }
.prose ul li:last-child { border-bottom: none; }
.prose ul li::before { content: '→'; color: var(--ink4); flex-shrink: 0; }
.prose a { color: var(--green2); text-decoration: none; }
.prose a:hover { color: var(--ink); }

/* FOOTER */
footer { background: var(--ink); }
.foot-top { max-width: 1200px; margin: 0 auto; padding: 64px 80px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; border-bottom: 1px solid rgba(245,243,238,0.08); }
.foot-brand { display: flex; flex-direction: column; gap: 16px; }
.foot-logo { display: flex; align-items: center; text-decoration: none; }
.foot-logo .logo-img { height: 24px; width: auto; }
.foot-tagline { font-size: 14px; color: rgba(245,243,238,0.45); line-height: 1.65; max-width: 300px; }
.foot-address { margin-top: 4px; }
.foot-address-city { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(245,243,238,0.62); margin-bottom: 4px; }
.foot-address-line { font-size: 13px; color: rgba(245,243,238,0.62); line-height: 1.6; }
.foot-cta { display: inline-block; background: var(--green); color: var(--paper); padding: 11px 20px; border-radius: 3px; font-size: 13px; font-weight: 500; text-decoration: none; margin-top: 8px; width: fit-content; }
.foot-cta:hover { background: var(--green-lt); color: var(--ink); }
.foot-col {}
.foot-col-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245,243,238,0.62); margin-bottom: 16px; }
.foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.foot-col ul li a { font-size: 14px; color: rgba(245,243,238,0.55); text-decoration: none; padding: 5px 0; display: block; }
.foot-col ul li a:hover { color: rgba(245,243,238,0.9); }
.foot-col + .foot-col { margin-top: 32px; }
.foot-bottom { max-width: 1200px; margin: 0 auto; padding: 20px 80px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.foot-note { font-family: var(--mono); font-size: 10px; color: rgba(245,243,238,0.2); line-height: 1.6; max-width: 560px; }
.foot-legal { display: flex; gap: 20px; }
.foot-legal a { font-family: var(--mono); font-size: 10px; color: rgba(245,243,238,0.62); text-decoration: none; }
.foot-legal a:hover { color: rgba(245,243,238,0.75); }

/* RESPONSIVE */
@media (max-width: 960px) {
  nav { padding: 0 24px; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .hero { padding: 90px 24px 60px; grid-template-columns: 1fr; }
  .hero-card { display: none; }
  .logos { padding: 14px 24px; }
  .problem { padding: 60px 24px; }
  .problem-grid { grid-template-columns: 1fr; }
  .icp-section { padding: 60px 24px; }
  .icp-grid { grid-template-columns: 1fr; }
  .icp-card { border-right: none; border-bottom: 1px solid var(--rule); }
  .products-section { padding: 60px 24px; }
  .products-grid { grid-template-columns: 1fr; }
  .how-section { padding: 60px 24px; }
  .how-section > div[style*="grid-template-columns: repeat(4"] { grid-template-columns: 1fr 1fr !important; }
  .how-grid { grid-template-columns: 1fr; }
  .terminal { display: none; }
  .pricing-section { padding: 60px 24px; }
  .pt-head { grid-template-columns: 1fr 1fr; }
  .pt-head div:nth-child(3), .pt-head div:nth-child(4) { display: none; }
  .pt-row { grid-template-columns: 1fr 1fr; }
  .pt-row div:nth-child(3), .pt-row div:nth-child(4) { display: none; }
  .scenarios { grid-template-columns: 1fr; }
  .proof-section { padding: 60px 24px; }
  .proof-grid { grid-template-columns: 1fr; }
  .faq-section { padding: 60px 24px; }
  .faq-grid { grid-template-columns: 1fr; }
  .cta-final { padding: 60px 24px; grid-template-columns: 1fr; gap: 40px; }
  .foot-top { padding: 48px 24px 40px; grid-template-columns: 1fr; gap: 40px; }
  .foot-bottom { padding: 20px 24px; flex-direction: column; align-items: flex-start; gap: 12px; }
  .foot-col + .foot-col { margin-top: 24px; }
  /* BLOG MOBILE */
  .blog-hero { padding: 90px 24px 32px !important; }
  .blog-filters { padding: 0 24px 24px !important; }
  .blog-grid { padding: 0 24px 60px !important; }
  .blog-cards-all { grid-template-columns: 1fr !important; }
  /* ARTICLE MOBILE */
  .article-wrap { padding: 90px 20px 60px !important; }
  .structured-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .article-cta { padding: 28px 24px !important; }
  /* AFFILIATES MOBILE */
  .aff-hero { padding: 90px 24px 48px !important; }
  .aff-stats { grid-template-columns: 1fr !important; }
  .aff-how { padding: 48px 24px !important; }
  .aff-steps { grid-template-columns: 1fr !important; gap: 32px !important; }
  .aff-who { padding: 48px 24px !important; }
  .aff-who-cards { grid-template-columns: 1fr !important; }
  .aff-terms { padding: 48px 24px !important; }
  .aff-terms-grid { grid-template-columns: 1fr !important; }
  .aff-form-section { padding: 48px 24px !important; }
  .aff-faq { padding: 48px 24px !important; }
  .aff-form-row { grid-template-columns: 1fr !important; }
  .page-hero { padding: 90px 24px 50px; }
  .content-section { padding: 60px 24px; }
  .content-section-dark { padding: 60px 24px; }
  .content-section-mid { padding: 60px 24px; }
  .feature-grid { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; gap: 40px; }
  .stat-row { grid-template-columns: 1fr; }
}

/* ── Logo (image-based) ── */
.logo { display: flex; align-items: center; text-decoration: none; }
.logo-img { height: 28px; width: auto; display: block; }
.foot-logo { display: flex; align-items: center; text-decoration: none; }
.foot-logo .logo-img { height: 24px; width: auto; display: block; }
nav .logo:hover .logo-img { opacity: 0.8; }
/* Keep logo-mark/wordmark for any inline uses that remain */
.logo-mark { height: 22px; width: 18px; color: var(--green2); flex-shrink: 0; }
.logo-wordmark { font-family: var(--sans); font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }

/* ── Modal (legacy) ── */
.wl-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(3px); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.wl-box { background: var(--paper); border-radius: 10px; padding: 48px; max-width: 480px; width: 100%; position: relative; box-shadow: 0 24px 64px rgba(0,0,0,0.18); }
.wl-close { position: absolute; top: 16px; right: 20px; background: none; border: none; font-size: 22px; color: var(--ink4); cursor: pointer; padding: 4px 8px; line-height: 1; }
.wl-close:hover { color: var(--ink); }
.wl-eyebrow { font-family: var(--mono); font-size: 11px; color: var(--green2); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; }
.wl-h2 { font-family: var(--serif); font-size: 28px; color: var(--ink); letter-spacing: -0.02em; margin-bottom: 12px; line-height: 1.2; }
.wl-sub { font-size: 14px; color: var(--ink3); line-height: 1.7; margin-bottom: 24px; }
.wl-row { display: flex; gap: 8px; }
.wl-input { flex: 1; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 5px; font-size: 14px; font-family: var(--sans); color: var(--ink); background: var(--paper); outline: none; }
.wl-input:focus { border-color: var(--green2); }
.wl-btn { padding: 12px 20px; background: var(--green2); color: var(--paper); border: none; border-radius: 5px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: opacity .15s; }
.wl-btn:hover { opacity: .88; }
.wl-btn:disabled { opacity: .55; cursor: not-allowed; }
.wl-error { font-size: 13px; color: #c0392b; margin-top: 8px; }
.wl-check { font-size: 40px; color: var(--green2); margin-bottom: 12px; }
@media (max-width: 520px) { .wl-row { flex-direction: column; } .wl-box { padding: 32px 24px; } }

/* ═══════════════════════════════════════════════════════════════
   MOBILE — comprehensive additions (960px)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {

  /* --- How-it-works strip --- */
  .how-strip { padding: 40px 24px; }
  .how-step-row { grid-template-columns: 1fr 1fr; }

  /* --- ICP route (class used in updated pages) --- */
  .icp-route { grid-template-columns: 1fr !important; }
  .icp-route-card { border-right: none !important; border-bottom: 1px solid var(--rule) !important; }
  .icp-route-card:last-child { border-bottom: none !important; }

  /* --- Two-col-tight --- */
  .two-col-tight { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* --- Pricing plan cards (5 col → 2 col) --- */
  .pricing-plans { grid-template-columns: 1fr 1fr !important; }
  .pa-grid { grid-template-columns: 1fr !important; }
  .pi-label { font-size: 10px; }

  /* --- Scenario improvements --- */
  .sc-who { font-size: 9px; }

  /* --- vs-page sections with inline 80px padding --- */
  .vs-section { padding: 48px 24px !important; }

  /* --- vs-page when-to-use grid --- */
  .vs-when-grid { grid-template-columns: 1fr !important; gap: 20px !important; }

  /* --- comp-table: horizontal scroll on mobile --- */
  .comp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
  .comp-table { min-width: 480px; }

  /* --- Competitive boundary inline grid --- */
  .comp-boundary-cols { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* --- Inner page stat callout flex rows --- */
  .stat-callout-row { flex-direction: column !important; gap: 0 !important; }
  .stat-callout-row > div { border-right: none !important; border-bottom: 1px solid rgba(245,243,238,0.08); padding: 24px 20px !important; }
  .stat-callout-row > div:last-child { border-bottom: none; }

  /* --- Page-specific inline padding overrides --- */
  div.vs-padded { padding: 48px 24px !important; }

  /* --- Buttons: allow wrapping on mobile --- */
  .page-hero-btns { flex-wrap: wrap; }
  .hero-btns { flex-wrap: wrap; }
  .btn-dark, .btn-green, .btn-amber, .btn-paper,
  .btn-ghost-green, .btn-ghost-amber, .btn-ghost-paper { white-space: normal; }

  /* --- Section lead text --- */
  .section-lead { font-size: 15px; margin-bottom: 32px; }

  /* --- Prevent x-overflow from wide tables/grids --- */
  body { overflow-x: hidden; }
  .pricing-inner, .products-inner, .content-inner { overflow-x: hidden; }

  /* --- FAQ section on inner pages --- */
  .faq-grid { grid-template-columns: 1fr; gap: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE — small screens (600px)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* Hero text */
  .hero h1 { font-size: 36px !important; }
  .page-hero h1 { font-size: 30px !important; line-height: 1.1; }
  .page-hero-sub { font-size: 15px !important; }
  .hero-sub { font-size: 15px; }

  /* Section headers */
  .section-h2 { font-size: 28px !important; }

  /* How-it-works: 1 column */
  .how-step-row { grid-template-columns: 1fr !important; }

  /* Pricing plans: 1 column */
  .pricing-plans { grid-template-columns: 1fr !important; }
  .plan-card { padding: 24px 20px; }
  .plan-price { font-size: 28px; }

  /* Stats: tighter */
  .stat-num { font-size: 36px !important; }

  /* Hero buttons: full width */
  .hero-btns { flex-direction: column; }
  .hero-btns a { width: 100%; text-align: center; }
  .page-hero-btns a { width: 100%; text-align: center; }

  /* CTA opts: full width */
  .cta-options { gap: 8px; }

  /* Scenario cards */
  .sc { padding: 20px 18px; }

  /* Footer */
  .foot-tagline { font-size: 13px; }
  .foot-bottom { flex-direction: column; gap: 8px; }

  /* Waitlist modal */
  .wl-box { padding: 28px 20px !important; margin: 0 4px; }
  .wl-h2 { font-size: 22px !important; }
  .wl-row { flex-direction: column !important; gap: 8px !important; }
  .wl-btn { padding: 12px 16px; width: 100%; }

  /* Feature blocks: tighter */
  .feature-block { padding: 24px 20px; }
  .feature-icon { font-size: 20px; margin-bottom: 10px; }

  /* Proof cards */
  .proof-q { font-size: 15px; }

  /* Product cards */
  .product-card { padding: 28px 24px; }
  .product-card h3 { font-size: 24px; }

  /* ICP cards */
  .icp-card { padding: 32px 24px; }
  .icp-card h3 { font-size: 22px; }

  /* Content sections */
  .content-section { padding: 48px 20px; }
  .content-section-dark { padding: 48px 20px; }
  .content-section-mid { padding: 48px 20px; }

  /* Pricing section */
  .pricing-section { padding: 48px 20px; }
  .sc-total-val { font-size: 22px; }

  /* Page hero */
  .page-hero { padding: 80px 20px 40px !important; }

  /* Problem grid */
  .problem { padding: 48px 20px; }
  .problem-item { padding: 28px 20px; }
  .problem-num { font-size: 40px; }

  /* vs-pages */
  .vs-verdict { padding: 48px 20px !important; }
  .vs-verdict h2 { font-size: 26px !important; }
  div.vs-padded { padding: 40px 20px !important; }

  /* Prose */
  .prose h3 { font-size: 20px; }

  /* Comparison table always scrollable */
  .comp-table-wrap { overflow-x: auto; }
  .comp-table { min-width: 480px; }
  .comp-table th, .comp-table td { padding: 10px 12px; font-size: 13px; }
}


/* ── HubSpot form overrides ── */
.hs-form-frame { width: 100%; }
.hs-form-frame form,
.hbspt-form form { width: 100% !important; }
/* Field rows */
.hs-form .hs-form-field { margin-bottom: 12px !important; }
.hs-form .hs-form-field label { font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--ink3); margin-bottom: 4px; display: block; }
/* Inputs */
.hs-form input[type="text"],
.hs-form input[type="email"] {
  width: 100% !important;
  padding: 11px 14px !important;
  border: 1px solid var(--rule) !important;
  border-radius: 5px !important;
  font-family: var(--sans) !important;
  font-size: 14px !important;
  color: var(--ink) !important;
  background: var(--paper) !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s !important;
}
.hs-form input[type="text"]:focus,
.hs-form input[type="email"]:focus { border-color: var(--green2) !important; }
/* Two-col first/last name */
.hs-form .hs-fieldtype-text.hs-firstname,
.hs-form .hs-fieldtype-text.hs-lastname { display: inline-block !important; width: 48% !important; }
.hs-form .hs-firstname { margin-right: 4% !important; }
/* Error messages */
.hs-form .hs-error-msgs { list-style: none !important; }
.hs-form .hs-error-msgs li label { font-size: 12px !important; color: #c0392b !important; margin-top: 3px !important; }
/* Submit button */
.hs-form input[type="submit"],
.hs-form .hs-button {
  background: var(--green2) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 5px !important;
  padding: 12px 24px !important;
  font-family: var(--sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  width: 100% !important;
  margin-top: 8px !important;
  transition: opacity 0.15s !important;
}
.hs-form input[type="submit"]:hover,
.hs-form .hs-button:hover { opacity: 0.88 !important; }
/* Privacy note */
.hs-form .hs-richtext p,
.hs-form .legal-consent-container { font-size: 11px !important; color: var(--ink4) !important; margin-top: 10px !important; }
/* Thank you message */
.hbspt-form .submitted-message { font-family: var(--sans); font-size: 15px; color: var(--green2); text-align: center; padding: 20px 0; font-weight: 600; }
@media (max-width: 520px) {
  .hs-form .hs-fieldtype-text.hs-firstname,
  .hs-form .hs-fieldtype-text.hs-lastname { width: 100% !important; display: block !important; margin-right: 0 !important; }
}
/* ── Footer columns grid ── */
.foot-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; }
@media (max-width: 960px) { .foot-cols { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .foot-cols { grid-template-columns: 1fr 1fr; } }

/* ── Three-stage progression ── */
.stages-section { background: var(--ink); padding: 80px 80px; }
.stages-section .section-tag { color: var(--green-lt); }
.stages-section .section-h2 { color: var(--paper); }
.stages-grid { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 0; margin-top: 48px; align-items: start; }
.stage { background: rgba(245,243,238,0.04); border: 1px solid rgba(245,243,238,0.08); border-radius: 6px; padding: 32px 28px; }
.stage-num { font-family: var(--serif); font-size: 48px; color: rgba(245,243,238,0.1); line-height: 1; margin-bottom: 8px; }
.stage-name { font-size: 22px; font-weight: 700; color: var(--paper); margin-bottom: 4px; }
.stage-tagline { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 20px; }
.stage-1 .stage-tagline { color: var(--green-lt); }
.stage-2 .stage-tagline { color: #f5b842; }
.stage-3 .stage-tagline { color: #a78bfa; }
.stage ul { list-style: none; padding: 0; margin: 0; }
.stage ul li { font-size: 13px; color: var(--ink3); padding: 6px 0; border-bottom: 1px solid rgba(245,243,238,0.06); }
.stage ul li:last-child { border-bottom: none; }
.stage ul li::before { content: "→ "; color: rgba(245,243,238,0.25); }
.stage-arrow { display: flex; align-items: center; justify-content: center; padding: 0 24px; padding-top: 80px; }
.stage-arrow-inner { font-size: 28px; color: rgba(245,243,238,0.2); }
.stage-cta { margin-top: 20px; display: inline-block; font-size: 13px; font-weight: 600; color: var(--green-lt); text-decoration: none; opacity: 1; border-bottom: 1px solid rgba(95,191,143,0.45); padding-bottom: 1px; }
.stage-cta:hover { opacity: 1; }
.stage-3 { border-color: rgba(167,139,250,0.2); }
.stage-3 .stage-num { color: rgba(167,139,250,0.15); }

/* ── Before/After workflow ── */
.workflow-section { padding: 80px 80px; background: var(--paper2); }
.workflow-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 40px; background: var(--rule); border-radius: 6px; overflow: hidden; }
.workflow-col { padding: 40px 36px; }
.workflow-col.before { background: var(--paper); }
.workflow-col.after { background: var(--ink); }
.workflow-label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 24px; }
.workflow-col.before .workflow-label { color: var(--ink4); }
.workflow-col.after .workflow-label { color: var(--green-lt); }
.workflow-steps { display: flex; flex-direction: column; gap: 0; }
.workflow-step { display: flex; align-items: center; gap: 12px; }
.workflow-step-text { font-size: 14px; padding: 10px 0; }
.workflow-col.before .workflow-step-text { color: var(--ink3); }
.workflow-col.after .workflow-step-text { color: rgba(245,243,238,0.8); font-weight: 500; }
.workflow-connector { width: 1px; height: 24px; margin-left: 6px; }
.workflow-col.before .workflow-connector { background: var(--rule); }
.workflow-col.after .workflow-connector { background: rgba(45,106,79,0.4); }
.workflow-step-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.workflow-col.before .workflow-step-dot { background: var(--ink4); }
.workflow-col.after .workflow-step-dot { background: var(--green-lt); }
.workflow-col.after .step-automate .workflow-step-dot { background: var(--green-lt); }
.workflow-col.after .step-intelligence .workflow-step-dot { background: #f5b842; }
.workflow-col.after .step-valuation .workflow-step-dot { background: #a78bfa; }

/* ── Client journey ── */
.journey-section { padding: 80px 80px; background: var(--ink); }
.journey-section .section-tag { color: var(--green-lt); }
.journey-section .section-h2 { color: var(--paper); }
.journey-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; background: rgba(245,243,238,0.06); border-radius: 6px; overflow: hidden; margin-top: 48px; }
.journey-stop { background: rgba(245,243,238,0.03); padding: 28px 24px; position: relative; }
.journey-stop-time { font-family: var(--mono); font-size: 10px; color: var(--green-lt); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; }
.journey-stop-title { font-size: 15px; font-weight: 600; color: var(--paper); margin-bottom: 10px; }
.journey-stop-body { font-size: 13px; color: var(--ink3); line-height: 1.7; }
.journey-stop-module { font-family: var(--mono); font-size: 10px; margin-top: 16px; padding: 3px 8px; border-radius: 3px; display: inline-block; }
.journey-stop-module.automate { background: rgba(95,191,143,0.18); color: var(--green-lt); }
.journey-stop-module.intelligence { background: rgba(245,184,66,0.15); color: #f5b842; }
.journey-stop-module.valuation { background: rgba(167,139,250,0.15); color: #a78bfa; }

/* ── Valuation teaser ── */
.val-teaser { padding: 80px 80px; background: rgba(167,139,250,0.06); border-top: 1px solid rgba(167,139,250,0.15); border-bottom: 1px solid rgba(167,139,250,0.15); }
.val-teaser-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.val-teaser-left h2 { font-family: var(--serif); font-size: clamp(28px,3vw,42px); color: var(--ink); letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 16px; }
.val-teaser-left p { font-size: 15px; color: var(--ink3); line-height: 1.8; margin-bottom: 24px; }
.val-teaser-right { display: flex; flex-direction: column; gap: 2px; }
.val-tab { background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; padding: 20px 24px; }
.val-tab-name { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.val-tab-desc { font-size: 13px; color: var(--ink3); line-height: 1.6; }
.val-tab-badge { font-family: var(--mono); font-size: 10px; color: #a78bfa; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }

/* ── Responsive ── */
@media (max-width: 960px) {
  .stages-grid { grid-template-columns: 1fr; }
  .stage-arrow { padding: 16px 0; transform: rotate(90deg); }
  .stage-arrow-inner { font-size: 22px; }
  .workflow-cols { grid-template-columns: 1fr; }
  .journey-track { grid-template-columns: 1fr 1fr; }
  .val-teaser-inner { grid-template-columns: 1fr; gap: 40px; }
  .stages-section, .workflow-section, .journey-section, .val-teaser { padding: 56px 24px; }
}
@media (max-width: 600px) {
  .journey-track { grid-template-columns: 1fr; }
}

/* ── Close workflow ── */
.close-workflow { max-width: 1200px; margin: 0 auto; padding: 72px 80px; }
.workflow-steps-v { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; background: var(--rule); border-radius: 6px; overflow: hidden; margin-top: 40px; }
.workflow-step-v { background: var(--paper2); padding: 28px 20px; }
.workflow-step-v-num { font-family: var(--mono); font-size: 10px; color: var(--green2); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
.workflow-step-v-name { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.workflow-step-v-body { font-size: 13px; color: var(--ink3); line-height: 1.7; }
.workflow-outcome { font-size: 14px; color: var(--ink3); line-height: 1.8; max-width: 640px; margin-top: 40px; }
.workflow-outcome strong { color: var(--ink); }
@media(max-width:960px){ .workflow-steps-v { grid-template-columns: 1fr 1fr 1fr; } }
@media(max-width:600px){ .workflow-steps-v { grid-template-columns: 1fr 1fr; } }

/* ── Deterministic concept ── */
.det-section { background: var(--ink); padding: 64px 80px; }
.det-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.det-left h2 { font-family: var(--serif); font-size: clamp(28px,3.5vw,44px); color: var(--paper); letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 16px; }
.det-left h2 em { color: var(--green-lt); font-style: normal; }
.det-left p { font-size: 15px; color: var(--ink3); line-height: 1.8; }
.det-right { display: flex; flex-direction: column; gap: 2px; }
.det-card { background: rgba(245,243,238,0.04); border: 1px solid rgba(245,243,238,0.08); border-radius: 4px; padding: 18px 20px; }
.det-card-label { font-family: var(--mono); font-size: 10px; color: var(--green-lt); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.det-card-body { font-size: 14px; color: rgba(245,243,238,0.8); line-height: 1.6; }
@media(max-width:960px){ .det-inner { grid-template-columns: 1fr; gap: 40px; } .det-section { padding: 48px 24px; } }

/* ── Management briefing lanes ── */
.briefing-section { background: var(--paper2); padding: 72px 80px; }
.briefing-intro { max-width: 680px; margin-bottom: 48px; }
.briefing-intro .det-pill { display: inline-block; font-family: var(--mono); font-size: 10px; color: var(--green2); text-transform: uppercase; letter-spacing: 0.08em; border: 1px solid rgba(45,74,56,0.3); border-radius: 3px; padding: 3px 8px; margin-bottom: 16px; }
.briefing-lanes { display: flex; flex-direction: column; gap: 2px; }
.briefing-lane { background: var(--paper2); border-radius: 4px; overflow: hidden; }
.briefing-lane-header { padding: 20px 24px; display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; border-bottom: 1px solid var(--rule); }
.briefing-lane-icon { font-size: 18px; }
.briefing-lane-title { font-size: 16px; font-weight: 700; color: var(--ink); }
.briefing-lane-subtitle { font-size: 13px; color: var(--ink4); font-style: italic; }
.briefing-stations { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--rule); }
.briefing-station { background: var(--paper); padding: 20px 20px; border-bottom: 1px solid var(--rule); }
.briefing-station-num { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 10px; font-weight: 700; margin-bottom: 8px; }
.station-1 .briefing-station-num { background: rgba(45,74,56,0.1); color: var(--green2); }
.station-2 .briefing-station-num { background: rgba(184,107,10,0.1); color: var(--amber); }
.station-3 .briefing-station-num { background: rgba(45,74,56,0.1); color: var(--green2); }
.station-4 .briefing-station-num { background: rgba(45,74,56,0.15); color: var(--green2); }
.briefing-station-q { font-family: var(--mono); font-size: 10px; color: var(--ink4); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.briefing-station-a { font-size: 13px; color: var(--ink3); line-height: 1.6; }
.briefing-station-a strong { color: var(--ink); }
@media(max-width:960px){ .briefing-stations { grid-template-columns: 1fr 1fr; } .briefing-section { padding: 48px 24px; } }
@media(max-width:600px){ .briefing-stations { grid-template-columns: 1fr; } }

/* ── Diff table ── */
.diff-table-wrap { max-width: 1200px; margin: 0 auto; }
.diff-table { width: 100%; border-collapse: collapse; margin-top: 32px; }
.diff-table th { text-align: left; padding: 12px 20px; font-size: 12px; font-weight: 600; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 2px solid var(--rule); }
.diff-table th.col-them { color: var(--ink4); }
.diff-table th.col-us { color: var(--green2); }
.diff-table td { padding: 14px 20px; font-size: 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.diff-table td:first-child { font-weight: 600; color: var(--ink); width: 22%; }
.diff-table td.col-them { color: var(--ink4); }
.diff-table td.col-us { color: var(--ink); font-weight: 500; }
.diff-table tr:last-child td { border-bottom: none; }

/* ── Product screenshots ── */
.shot-section { background: var(--paper); padding: 72px 80px; border-top: 1px solid var(--rule); }
.shot-section.alt { background: var(--paper2); }
.shot-inner { max-width: 1240px; margin: 0 auto; }
.shot-frame { margin-top: 40px; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; background: var(--paper); box-shadow: 0 12px 40px rgba(14,14,12,0.08); }
.shot-frame img { width: 100%; height: auto; display: block; }
.shot-caption { font-family: var(--mono); font-size: 11px; color: var(--ink4); margin-top: 12px; letter-spacing: 0.02em; }
.shot-stack { display: flex; flex-direction: column; gap: 32px; margin-top: 40px; }
.shot-label { font-family: var(--mono); font-size: 10px; color: var(--green2); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
@media(max-width:960px){ .shot-section { padding: 48px 20px; } }

/* ── Stage cards: narrative layer ── */
.stage-lede { font-size: 13.5px; color: rgba(245,243,238,0.78); line-height: 1.65; margin: 12px 0 14px; }
.stage-out { font-size: 12.5px; color: rgba(245,243,238,0.7); line-height: 1.6; padding: 12px 14px; margin-bottom: 16px;
             background: rgba(95,191,143,0.09); border-left: 2px solid var(--green-lt); border-radius: 0 4px 4px 0; }
.stage-out-label { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em;
                   text-transform: uppercase; color: var(--green-lt); margin-bottom: 3px; }
.stage-2 .stage-out { background: rgba(240,198,116,0.09); border-left-color: var(--amber-lt); }
.stage-2 .stage-out-label { color: var(--amber-lt); }
.stage-3 .stage-out { background: rgba(167,139,250,0.10); border-left-color: #a78bfa; }
.stage-3 .stage-out-label { color: #a78bfa; }
.stage-2 .stage-tagline { color: var(--amber-lt); }
.stage-3 .stage-tagline { color: #a78bfa; }
.stage-2 .stage-cta { color: var(--amber-lt); border-bottom-color: rgba(240,198,116,0.45); }
.stage-3 .stage-cta { color: #a78bfa; border-bottom-color: rgba(167,139,250,0.45); }
.stages-foot { font-family: var(--mono); font-size: 11.5px; color: rgba(245,243,238,0.62); margin-top: 28px; letter-spacing: 0.02em; }

/* ── Page FAQ ── */
.pfaq { background: var(--paper); padding: 72px 80px; border-top: 1px solid var(--rule); }
.pfaq.alt { background: var(--paper2); }
.pfaq-inner { max-width: 820px; margin: 0 auto; }
.pfaq h2 { font-family: var(--serif); font-size: clamp(26px,3vw,36px); color: var(--ink); letter-spacing: -0.02em; margin: 10px 0 8px; }
.pfaq-lede { font-size: 15px; color: var(--ink3); line-height: 1.7; margin-bottom: 36px; }
.pfaq-item { border-top: 1px solid var(--rule); padding: 24px 0; }
.pfaq-item:last-child { border-bottom: 1px solid var(--rule); }
.pfaq-q { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 10px; line-height: 1.4; }
.pfaq-a { font-size: 14.5px; color: var(--ink3); line-height: 1.75; }
.pfaq-a strong { color: var(--ink2); }
.pfaq-a a { color: var(--green2); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 960px) { .pfaq { padding: 48px 24px; } }

/* ── Pricing: what's included, by stage ── */
.pi-lede { font-size: 14px; color: var(--ink4-dk); line-height: 1.7; margin: 6px 0 24px; max-width: 620px; }
.pi-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: rgba(245,243,238,0.09); border-radius: 6px; overflow: hidden; }
.pi-col { background: rgba(255,255,255,0.04); padding: 26px 26px 28px; }
.pi-col-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 16px;
               padding-bottom: 14px; border-bottom: 1px solid rgba(245,243,238,0.1); }
.pi-col-num { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; opacity: 0.75; }
.pi-col-name { font-size: 16px; font-weight: 700; color: var(--paper); }
.pi-col-role { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; }
.pi-col-1 .pi-col-num, .pi-col-1 .pi-col-role { color: var(--green-lt); }
.pi-col-2 .pi-col-num, .pi-col-2 .pi-col-role { color: var(--amber-lt); }
.pi-col ul { list-style: none; padding: 0; margin: 0; }
.pi-col li { font-size: 13.5px; color: rgba(245,243,238,0.78); line-height: 1.55; padding: 7px 0 7px 18px;
             position: relative; border-bottom: 1px solid rgba(245,243,238,0.055); }
.pi-col li:last-child { border-bottom: none; }
.pi-col li::before { content: "✓"; position: absolute; left: 0; font-size: 11px; }
.pi-col-1 li::before { color: var(--green-lt); }
.pi-col-2 li::before { color: var(--amber-lt); }
@media (max-width: 860px) { .pi-cols { grid-template-columns: 1fr; } }

/* ── Buttons on dark surfaces ── */
.page-hero .btn-dark, .val-hero .btn-dark, .vs-verdict .btn-dark,
.feat-cta-section .btn-dark, .cta-final .btn-dark, .val-cta .btn-dark,
.stages-section .btn-dark, .journey-section .btn-dark, .trust-section .btn-dark,
.det-section .btn-dark, .problem .btn-dark, .pricing-section .btn-dark {
  background: var(--paper); color: var(--ink); border-color: var(--paper);
}
.page-hero .btn-dark:hover, .val-hero .btn-dark:hover, .vs-verdict .btn-dark:hover,
.feat-cta-section .btn-dark:hover, .cta-final .btn-dark:hover, .val-cta .btn-dark:hover,
.stages-section .btn-dark:hover, .journey-section .btn-dark:hover, .trust-section .btn-dark:hover,
.det-section .btn-dark:hover, .problem .btn-dark:hover, .pricing-section .btn-dark:hover {
  background: var(--green-lt); color: var(--ink); border-color: var(--green-lt);
}
.page-hero .btn-outline, .val-hero .btn-outline, .vs-verdict .btn-outline,
.feat-cta-section .btn-outline, .cta-final .btn-outline, .val-cta .btn-outline,
.stages-section .btn-outline, .journey-section .btn-outline, .trust-section .btn-outline,
.det-section .btn-outline, .problem .btn-outline, .pricing-section .btn-outline {
  border-color: rgba(245,243,238,0.45); color: rgba(245,243,238,0.92);
}
.page-hero .btn-outline:hover, .val-hero .btn-outline:hover, .vs-verdict .btn-outline:hover,
.feat-cta-section .btn-outline:hover, .cta-final .btn-outline:hover, .val-cta .btn-outline:hover,
.stages-section .btn-outline:hover, .journey-section .btn-outline:hover, .trust-section .btn-outline:hover,
.det-section .btn-outline:hover, .problem .btn-outline:hover, .pricing-section .btn-outline:hover {
  border-color: var(--paper); background: rgba(245,243,238,0.08); color: var(--paper);
}

/* ── Anchor offset for fixed nav ── */
#how-it-works, #pricing, #apply { scroll-margin-top: 80px; }

.faq-section-h2 { font-family: var(--serif); font-size: 26px; color: var(--ink); letter-spacing: -0.02em; margin: 0 0 20px; }

/* ── Moat callout under the stages ── */
.moat-note { margin-top: 32px; padding: 22px 26px; background: rgba(95,191,143,0.08);
             border-left: 3px solid var(--green-lt); border-radius: 0 5px 5px 0; max-width: 900px; }
.moat-note-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
                   color: var(--green-lt); margin-bottom: 8px; }
.moat-note p { font-size: 14.5px; color: rgba(245,243,238,0.82); line-height: 1.7; margin: 0; }