:root {
    --ink: #1a1a1a;
    --ink-2: #3a3a3a;
    --ink-3: #6b6b6b;
    --paper: #f7f4ee;
    --paper-2: #efeae0;
    --line: #d8d2c4;
    --azure: #0078d4;
    --azure-deep: #003b7a;
    --azure-soft: #deecf9;
    --serif: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
    --ui: "Geist", "Segoe UI", -apple-system, sans-serif;
    --mono: "Cutive Mono", ui-monospace, monospace;
  }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: var(--ui);
    background: var(--paper);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "ss01", "ss02";
  }
  body.theme-dark {
    --ink: #f0ece4;
    --ink-2: #c9c3b6;
    --ink-3: #8a8478;
    --paper: #15140f;
    --paper-2: #1f1d17;
    --line: #2c2a23;
    --azure-soft: #0e2740;
  }
  body.theme-azure {
    --ink: #0f1115;
    --ink-2: #2f343d;
    --ink-3: #6b7280;
    --paper: #ffffff;
    --paper-2: #f5f8fc;
    --line: #d8e1ee;
  }
  * { box-sizing: border-box; }
  a { color: inherit; text-decoration: none; }
  ::selection { background: var(--azure); color: #fff; }

  /* ============================================================
     RESPONSIVE — overrides inline styles via !important.
     Tablet: ≤960px.  Mobile: ≤640px.
     ============================================================ */

  /* ---------- Tablet (≤960px) ---------- */
  @media (max-width: 960px) {
    /* Section padding */
    section[style*="padding:'120px 32px'"],
    section[style*="padding:'140px 32px'"],
    section[style*="padding: 120px 32px"],
    section[style*="padding: 140px 32px"] {
      padding: 72px 20px !important;
    }
    section[style*="padding:'72px 32px 56px'"] {
      padding: 40px 20px 32px !important;
    }
    section[style*="padding:'80px 32px'"] {
      padding: 48px 20px !important;
    }

    /* Container padding */
    header > div,
    section > div,
    footer > div {
      padding-left: 20px !important;
      padding-right: 20px !important;
    }

    /* All multi-col grids → 2 cols on tablet (then 1 on mobile) */
    [style*="gridTemplateColumns"][style*="repeat(3"],
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns:repeat(3"] {
      grid-template-columns: repeat(2, 1fr) !important;
    }
    [style*="grid-template-columns: 1fr 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr 1fr"] {
      grid-template-columns: repeat(2, 1fr) !important;
    }
    [style*="grid-template-columns: 220px 1fr 360px"] {
      grid-template-columns: 1fr !important;
    }
    [style*="grid-template-columns: 1fr 1.1fr"],
    [style*="grid-template-columns:1fr 1.1fr"] {
      grid-template-columns: 1fr !important;
      gap: 40px !important;
    }
    [style*="grid-template-columns: 2fr 1fr 1fr 1fr"] {
      grid-template-columns: 1fr 1fr !important;
      gap: 32px !important;
    }

    /* Install left column: kill sticky on mobile */
    [style*="position:'sticky'"][style*="top:100"],
    [style*="position: sticky"][style*="top: 100"] {
      position: static !important;
    }

    /* Nav: hide secondary links, keep logo + primary CTA */
    header nav { display: none !important; }
    header [style*="gap:42"],
    header [style*="gap: 42"] { gap: 0 !important; }
  }

  /* ---------- Mobile (≤640px) ---------- */
  @media (max-width: 640px) {
    body { font-size: 15px; }

    /* Hide lineage banner on mobile */
    .lineage-banner { display: none !important; }

    /* Force ALL multi-col grids to single column */
    [style*="gridTemplateColumns"],
    [style*="grid-template-columns"] {
      grid-template-columns: 1fr !important;
    }

    /* Section padding tighter */
    section[style*="padding:'120px 32px'"],
    section[style*="padding:'140px 32px'"] {
      padding: 56px 18px !important;
    }
    section[style*="padding:'72px 32px 56px'"] {
      padding: 28px 18px 24px !important;
    }

    /* Lineage banner: smaller, allow wrap */
    body > div:first-child[style*="background:'var(--ink)'"],
    body > div:first-child > [style*="font-size:12"][style*="text-align:center"] {
      font-size: 11px !important;
      padding: 8px 14px !important;
      line-height: 1.5 !important;
    }

    /* Nav: stack logo on first row, marketplace CTA full-width on row below */
    header > div {
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 10px !important;
      padding: 12px 16px !important;
    }
    header > div > div:first-child {
      justify-content: flex-start !important;
    }
    header > div > div:last-child {
      width: 100% !important;
      gap: 0 !important;
    }
    header nav { display: none !important; }
    /* Hide "Book a call" text link in nav on mobile, keep marketplace CTA */
    header > div > div:last-child > a:first-child { display: none !important; }
    header a[style*="background:'var(--azure)'"],
    header a[style*="background: var(--azure)"] {
      width: 100% !important;
      justify-content: center !important;
      font-size: 13px !important;
      padding: 11px 14px !important;
      box-sizing: border-box !important;
    }

    /* Hero: tighten lines + buttons stack */
    section [style*="font-size:19"],
    section [style*="fontSize:19"] {
      font-size: 16px !important;
    }
    section h1 {
      letter-spacing: -0.015em !important;
    }

    /* Buttons in CTA rows wrap and full-width */
    [style*="display:'flex'"][style*="gap:12"] > a[style*="background:'var(--azure)'"],
    [style*="display:'flex'"][style*="gap:12"] > a[style*="background:'var(--ink)'"] {
      width: 100% !important;
      justify-content: center !important;
      box-sizing: border-box !important;
    }

    /* Product mock: stack the 3 panes, drop fixed sidebar widths */
    [style*="grid-template-columns: 220px 1fr 360px"] > aside,
    [style*="grid-template-columns: 220px 1fr 360px"] > main {
      border-right: none !important;
      border-bottom: 1px solid var(--line) !important;
    }
    [style*="grid-template-columns: 220px 1fr 360px"] {
      min-height: auto !important;
    }

    /* Window chrome URL: shrink + truncate */
    [style*="font-family:'var(--mono)'"][style*="font-size:11"],
    [style*="fontFamily:'var(--mono)'"][style*="fontSize:11"] {
      font-size: 10px !important;
    }

    /* Architecture diagram: smaller padding, label fits */
    [style*="border:'2px dashed var(--azure)'"] {
      padding: 24px 16px !important;
    }

    /* Pricing cards: tighter padding */
    [style*="padding:'32px 28px'"] {
      padding: 24px 20px !important;
    }
    /* Big serif numerals shrink */
    [style*="fontSize:52"],
    [style*="font-size:52"] {
      font-size: 40px !important;
    }

    /* Footer columns stack 2x2 then 1 */
    footer [style*="grid-template-columns"] {
      grid-template-columns: 1fr !important;
      gap: 28px !important;
    }
    footer [style*="display:'flex'"][style*="justify-content:'space-between'"] {
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 8px !important;
    }

    /* FAQ headings */
    section [style*="font-family:'var(--serif)'"][style*="font-size:22"] {
      font-size: 18px !important;
    }

    /* Big section heads use clamp() already, but cap line-height */
    section h2 { line-height: 1.05 !important; white-space: normal !important; }

    /* Logo bar */
    section[style*="padding:'28px 32px'"] {
      padding: 20px 16px !important;
    }
    section[style*="padding:'28px 32px'"] [style*="display:'flex'"][style*="justify-content:'space-between'"] {
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 14px !important;
    }

    /* Install steps: keep left padding tight */
    ol[style*="border-left"] > li {
      padding-left: 24px !important;
    }

    /* Tweaks panel: keep on screen */
    [style*="position:'fixed'"] {
      max-width: calc(100vw - 24px) !important;
    }

    /* Disable horizontal overflow defensively */
    html, body { overflow-x: hidden; }
  }

  /* ---------- Very small (≤380px) ---------- */
  @media (max-width: 380px) {
    header [style*="font-family:'var(--serif)'"][style*="font-size:22"] {
      font-size: 18px !important;
    }
  }