:root {
    --ink: #111111;
    --ink-2: #52525B;
    --ink-3: #8a8a90;
    --line: #ececec;
    --line-2: #e3e3e3;
    --bg: #ffffff;
    --bg-alt: #F9F9F9;
    --orange: #F97316;
    --orange-600: #ea660a;
    --orange-50: #fff5ec;
    /* ilustrações */
    --color-text-primary: #111111;
    --color-background-primary: #ffffff;
    --color-background-secondary: #F9F9F9;
    --color-border-tertiary: #e3e3e3;
    --border-radius-lg: 12px;
  }
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    line-height: 1.5;
    letter-spacing: -0.011em;
  }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; }
  img { display: block; max-width: 100%; }

  .container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

  /* ─── Navbar ───────────────────────────────────────── */
  .nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,0.85);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease;
  }
  .nav.scrolled { border-bottom-color: var(--line); }
  .nav .row {
    display: flex; align-items: center; justify-content: space-between;
    height: 68px;
  }
  .brand { display: inline-flex; align-items: center; gap: 9px; }
  .brand img { height: 28px; width: auto; }
  .brand span {
    font-weight: 700; font-size: 17px;
    letter-spacing: -0.025em; color: var(--ink);
  }
  .nav-links {
    display: flex; align-items: center; gap: 32px;
  }
  .nav-links a {
    font-size: 14px; font-weight: 500;
    color: var(--ink-2);
    transition: color .15s;
  }
  .nav-links a:hover { color: var(--ink); }
  .nav-cta { display: flex; align-items: center; gap: 8px; }

  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    height: 40px; padding: 0 18px;
    border-radius: 8px;
    font-size: 14px; font-weight: 600;
    letter-spacing: -0.01em;
    border: 1px solid transparent;
    transition: transform .15s ease, background .15s, border-color .15s, color .15s, box-shadow .15s;
    white-space: nowrap;
  }
  .btn-ghost {
    background: transparent; color: var(--ink);
  }
  .btn-ghost:hover { background: #f1f1f1; }
  .btn-primary {
    background: var(--orange); color: #fff;
    box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 1px 2px rgba(249,115,22,0.25);
  }
  .btn-primary:hover {
    background: var(--orange-600);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(249,115,22,0.32);
  }
  .btn-outline {
    background: #fff; color: var(--ink);
    border-color: var(--line-2);
  }
  .btn-outline:hover { border-color: var(--ink); }
  .btn-lg { height: 44px; padding: 0 20px; font-size: 14px; border-radius: 9px; }
  .btn-dark {
    background: var(--ink); color: #fff;
  }
  .btn-dark:hover { background: #000; transform: translateY(-1px); }

  /* ─── Hero ─────────────────────────────────────────── */
  .hero {
    padding: 48px 0 52px;
    background:
      radial-gradient(1200px 480px at 80% -10%, #fff7ee 0%, transparent 60%),
      var(--bg);
    position: relative;
    overflow: hidden;
  }
  .hero .grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 48px;
    align-items: center;
  }
  .pill {
    display: inline-flex; align-items: center; gap: 8px;
    height: 28px; padding: 0 12px 0 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line-2);
    font-size: 11.5px; font-weight: 500;
    color: var(--ink-2);
    letter-spacing: -0.005em;
  }
  .pill .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,0.18);
  }
  .pill strong { color: var(--ink); font-weight: 600; }

  h1.hero-h {
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.032em;
    margin: 16px 0 14px;
    color: var(--ink);
    text-wrap: balance;
  }
  h1.hero-h em {
    font-style: normal;
    color: var(--orange);
    background: linear-gradient(180deg, transparent 62%, #ffd9b8 62% 92%, transparent 92%);
    padding: 0 2px;
  }
  .hero-sub {
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.6;
    max-width: 460px;
    margin: 0 0 24px;
  }
  .hero-sub b { color: var(--ink); font-weight: 600; }
  .hero-cta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

  .hero-meta {
    margin-top: 20px;
    display: flex; align-items: center; gap: 16px;
    font-size: 12px; color: var(--ink-3);
  }
  .hero-meta .check {
    display: inline-flex; align-items: center; gap: 5px;
  }
  .hero-meta svg { color: var(--orange); }

  /* Dashboard mock */
  @keyframes float {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
  }
  .dash {
    border-radius: 14px;
    box-shadow:
      0 20px 60px rgba(17,17,17,0.12),
      0 8px 24px rgba(17,17,17,0.08);
    overflow: hidden;
    animation: float 5s ease-in-out infinite;
    position: relative;
  }
  .dash img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
  }
  .dash-chrome {
    height: 32px;
    border-bottom: 1px solid var(--line);
    display: flex; align-items: center; padding: 0 12px; gap: 6px;
    background: #f5f5f5;
  }
  .dash-chrome i { width: 9px; height: 9px; border-radius: 50%; background: #d5d5d5; display: block; }
  .dash-chrome i:nth-child(1) { background: #ff5f57; }
  .dash-chrome i:nth-child(2) { background: #febc2e; }
  .dash-chrome i:nth-child(3) { background: #28c840; }
  .dash-chrome .url {
    margin-left: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px; color: var(--ink-3);
  }
  .dash-body { display: grid; grid-template-columns: 148px 1fr; min-height: 340px; }
  .dash-sb {
    background: #111; color: #d6d4cf;
    padding: 16px 12px;
    display: flex; flex-direction: column; gap: 2px;
  }
  .dash-sb .b {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 8px 12px;
    border-bottom: 1px solid #222;
    margin-bottom: 8px;
  }
  .dash-sb .b img { height: 20px; width: auto; }
  .dash-sb .b span { font-weight: 700; font-size: 13.5px; color: #fff; letter-spacing: -0.02em; }
  .dash-sb .it {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px;
    font-size: 12.5px; color: #9b9994;
    border-radius: 7px;
    line-height: 1;
  }
  .dash-sb .it.active { background: #1c1c1c; color: #fff; }
  .dash-sb .it svg { width: 13px; height: 13px; flex: none; }
  .dash-sb .it.active svg { color: var(--orange); }
  .dash-main { padding: 18px 20px; background: #fff; }
  .dash-h {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
  }
  .dash-h h3 {
    margin: 0; font-size: 14px; font-weight: 700; letter-spacing: -0.02em;
  }
  .dash-h .pill-mini {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; color: var(--ink-2);
    background: var(--bg-alt); border: 1px solid var(--line);
    padding: 3px 7px; border-radius: 999px;
  }
  .stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 8px; margin-bottom: 14px;
  }
  .stat {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
  }
  .stat .l { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 500; }
  .stat .v { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; margin-top: 6px; line-height: 1; }
  .stat .v small { font-size: 11px; font-weight: 600; color: #16a34a; margin-left: 5px; letter-spacing: 0; }
  .stat.featured { background: #fff7ee; border-color: #ffd9b8; }
  .stat.featured .v { color: var(--orange); }

  .leads-table {
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    font-size: 11.5px;
  }
  .leads-table .row {
    display: grid;
    grid-template-columns: 1.4fr 1.2fr 1fr 0.75fr;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    line-height: 1.2;
  }
  .leads-table .row:last-child { border-bottom: 0; }
  .leads-table .head { background: var(--bg-alt); color: var(--ink-3); text-transform: uppercase; font-size: 9px; letter-spacing: 0.09em; font-weight: 700; padding: 6px 12px; }
  .leads-table .name { font-weight: 600; color: var(--ink); }
  .leads-table .src { color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
  .leads-table .src .src-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
  .leads-table .src.ig .src-dot { background: #e1306c; }
  .leads-table .src.go .src-dot { background: #2563eb; }
  .leads-table .utm {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: var(--ink-2);
    background: var(--bg-alt);
    padding: 2px 6px;
    border-radius: 4px;
    width: max-content;
  }
  .leads-table .badge {
    font-size: 10px; font-weight: 600;
    color: #16a34a; background: #ecfdf5;
    padding: 2px 6px; border-radius: 4px;
    width: max-content;
  }
  .leads-table .badge.warn { color: #ca8a04; background: #fefce8; }

  /* ─── Social proof strip ──────────────────────────── */
  .strip {
    background: var(--ink);
    color: #fff;
  }
  .strip .grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    padding: 40px 0;
  }
  .strip .item { text-align: left; padding: 0 28px; border-left: 1px solid #2a2a2a; }
  .strip .item:first-child { border-left: 0; }
  .strip .num {
    font-size: 44px; font-weight: 800;
    letter-spacing: -0.035em;
    color: #fff;
    line-height: 1;
  }
  .strip .num em {
    font-style: normal; color: var(--orange);
  }
  .strip .lab {
    font-size: 13px; color: #9b9994;
    margin-top: 10px;
    line-height: 1.4;
    max-width: 22ch;
  }

  /* ─── Section base ────────────────────────────────── */
  section.s { padding: 80px 0; }
  section.s.alt { background: var(--bg-alt); }

  .eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--orange);
    font-weight: 500;
  }
  .eyebrow::before {
    content: ''; width: 14px; height: 1px; background: var(--orange);
  }
  h2.sec-h em.hl {
    font-style: normal;
    color: var(--orange);
    background: linear-gradient(180deg, transparent 62%, #ffd9b8 62% 92%, transparent 92%);
    padding: 0 2px;
  }
  h2.sec-h {
    font-size: clamp(32px, 3.4vw, 44px);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.05;
    margin: 14px 0 16px;
    text-wrap: balance;
    max-width: 22ch;
  }
  .sec-sub {
    font-size: 15px;
    color: var(--ink-2);
    max-width: 56ch;
    line-height: 1.55;
    margin: 0;
  }
  .sec-head { margin-bottom: 48px; }
  .sec-head.center { text-align: center; }
  .sec-head.center h2.sec-h, .sec-head.center .sec-sub { margin-left: auto; margin-right: auto; }

  /* ─── Timeline ───────────────────────────────────── */
  .timeline {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    margin: 40px 0 48px;
  }
  .tl-step {
    display: flex; flex-direction: column; align-items: center;
    position: relative;
    padding: 0 8px;
    cursor: default;
  }
  /* linha conectora entre passos */
  .tl-step::after {
    content: '';
    position: absolute;
    top: 36px; left: calc(50% + 36px);
    width: calc(100% - 72px);
    height: 1px;
    background: var(--line-2);
  }
  .tl-step:last-child::after { display: none; }

  .tl-num {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--orange-50); color: var(--orange);
    display: grid; place-items: center;
    font-size: 12px; font-weight: 700;
    letter-spacing: -0.02em; flex: none;
    position: relative; z-index: 1;
    margin-bottom: 12px;
    border: 1.5px solid #fddcbb;
  }
  .tl-icon-wrap {
    width: 80px; height: 80px;
    border-radius: 16px;
    border: 1.5px solid var(--line-2);
    background: #fff;
    display: grid; place-items: center;
    transition: border-color .2s, background .2s, box-shadow .2s;
    margin-bottom: 14px;
  }
  .tl-icon-wrap svg {
    width: 44px; height: 44px;
    transition: stroke .2s;
  }
  .tl-icon-wrap svg { color: #111; }
  .tl-step:hover .tl-icon-wrap {
    background: var(--orange-50);
    border-color: #fddcbb;
    box-shadow: 0 4px 16px rgba(249,115,22,0.14);
  }
  .tl-step:hover .tl-icon-wrap svg {
    color: var(--orange);
    stroke: var(--orange);
  }
  .tl-step:hover .tl-num {
    background: var(--orange);
    color: #fff;
    border-color: var(--orange);
  }
  .tl-step-title {
    font-size: 12px; font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink-2);
    line-height: 1.35;
    text-align: center;
  }
  .tl-placeholder {
    flex: 1;
    background: var(--bg-alt);
    border: 1.5px dashed var(--line-2);
    border-radius: 10px;
    min-height: 160px;
    display: grid; place-items: center;
    color: var(--ink-3);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
  }

  /* ─── Tabs de Recursos ───────────────────────────── */
  .tabs-wrap {
    display: grid;
    grid-template-columns: 240px 1fr;
    border: 1px solid var(--line-2);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 24px rgba(17,17,17,0.06);
    min-height: 420px;
  }
  .tabs-nav {
    background: var(--bg-alt);
    border-right: 1px solid var(--line-2);
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .tabs-nav .nav-label {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-3);
    padding: 6px 12px 8px;
    font-family: 'JetBrains Mono', monospace;
  }
  .tab-btn {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    border-radius: 10px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background .15s, box-shadow .15s;
    width: 100%;
  }
  .tab-btn:hover { background: #ebebeb; }
  .tab-btn.active {
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08), 0 0 0 1px var(--line-2);
  }
  .tab-btn .t-ico {
    width: 34px; height: 34px;
    border-radius: 8px;
    background: #e4e4e4;
    display: grid; place-items: center;
    flex: none;
    color: var(--ink-3);
    transition: background .15s, color .15s;
  }
  .tab-btn.active .t-ico { background: var(--orange); color: #fff; }
  .tab-btn .t-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    display: block;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }
  .tab-btn .t-desc {
    font-size: 11px;
    color: var(--ink-3);
    margin-top: 2px;
    display: block;
    line-height: 1.3;
  }

  .tabs-content { position: relative; }
  .tab-panel {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: center;
    padding: 32px;
    min-height: 420px;
  }
  .tab-panel.active { display: grid; }
  .tab-panel .feat-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; color: var(--ink-3);
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    display: block;
  }
  .tab-panel h3 {
    font-size: 26px; font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0 0 12px;
    text-wrap: balance;
  }
  .tab-panel p {
    font-size: 15px; color: var(--ink-2);
    line-height: 1.6;
    margin: 0 0 20px;
  }
  .tab-panel ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 8px;
  }
  .tab-panel li {
    display: flex; align-items: flex-start; gap: 9px;
    font-size: 13.5px; color: var(--ink);
  }
  .tab-panel li svg { color: var(--orange); margin-top: 3px; flex: none; }
  .tab-panel .feat-art {
    aspect-ratio: 4/3;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--line-2);
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 20px rgba(17,17,17,0.06);
    height: 0;
    padding-bottom: 75%;
  }
  .tab-panel .feat-art img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
  }

  /* ─── Features (legacy, não usado) ───────────────── */
  .feat {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 96px;
    align-items: center;
    padding: 56px 0;
    border-top: 1px solid var(--line);
  }
  .feat:first-of-type { border-top: 0; padding-top: 24px; }
  .feat.rev .feat-text { order: 2; }
  .feat-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--ink-3);
    letter-spacing: 0.1em;
  }
  .feat h3 {
    font-size: 32px; font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.1;
    margin: 12px 0 14px;
    text-wrap: balance;
  }
  .feat p {
    font-size: 16px; color: var(--ink-2);
    line-height: 1.6;
    margin: 0 0 22px;
    max-width: 46ch;
  }
  .feat ul {
    list-style: none; padding: 0; margin: 0 0 8px;
    display: flex; flex-direction: column; gap: 9px;
  }
  .feat li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14.5px; color: var(--ink);
  }
  .feat li svg { color: var(--orange); margin-top: 3px; flex: none; }

  .feat-art {
    aspect-ratio: 5/4;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--line-2);
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 30px rgba(17,17,17,0.04);
  }
  section.s.alt .feat-art { background: #fff; }

  /* Feat 1 — UTM tracking */
  .art-utm {
    padding: 24px;
    display: flex; flex-direction: column; gap: 14px;
    background: #fff;
  }
  .art-utm .url-bar {
    background: var(--bg-alt); border: 1px solid var(--line);
    border-radius: 8px; padding: 10px 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px; color: var(--ink-2);
    word-break: break-all; line-height: 1.5;
  }
  .art-utm .url-bar .k { color: var(--ink-3); }
  .art-utm .url-bar .v { color: var(--orange); font-weight: 500; }
  .art-utm .arrow {
    width: 1px; height: 24px; background: var(--line-2);
    margin: 0 auto;
    position: relative;
  }
  .art-utm .arrow::after {
    content: ''; position: absolute; bottom: 0; left: -3px;
    width: 7px; height: 7px;
    border-right: 1px solid var(--ink-3); border-bottom: 1px solid var(--ink-3);
    transform: rotate(45deg);
  }
  .art-utm .lead-card {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px;
    background: #fff;
  }
  .art-utm .lead-card .top {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
  }
  .art-utm .lead-card .nm { font-weight: 700; font-size: 14px; }
  .art-utm .lead-card .b {
    font-size: 11px; color: #16a34a;
    background: #ecfdf5; padding: 3px 8px; border-radius: 4px;
    font-weight: 600;
  }
  .art-utm .kv {
    display: grid; grid-template-columns: 90px 1fr;
    gap: 4px 10px;
    font-size: 12px;
  }
  .art-utm .kv dt { color: var(--ink-3); font-family: 'JetBrains Mono', monospace; }
  .art-utm .kv dd { margin: 0; color: var(--ink); font-family: 'JetBrains Mono', monospace; }
  .art-utm .kv dd b { color: var(--orange); font-weight: 500; }

  /* Feat 2 — embed */
  .art-embed {
    padding: 0;
    background:
      repeating-linear-gradient(0deg, #00000005 0 1px, transparent 1px 24px),
      repeating-linear-gradient(90deg, #00000005 0 1px, transparent 1px 24px),
      #fff;
    display: flex; flex-direction: column;
    align-items: stretch;
    position: relative;
  }
  .art-embed .browser-mock {
    margin: 24px;
    flex: 1;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    display: flex; flex-direction: column;
  }
  .art-embed .browser-bar {
    height: 26px; background: #f5f5f5;
    display: flex; align-items: center; padding: 0 10px; gap: 5px;
    border-bottom: 1px solid var(--line);
  }
  .art-embed .browser-bar i { width: 7px; height: 7px; border-radius: 50%; background: #e0e0e0; }
  .art-embed .site {
    padding: 18px 22px;
    flex: 1;
    display: flex; flex-direction: column;
  }
  .art-embed .site-h { font-size: 18px; font-weight: 800; letter-spacing: -0.025em; margin-bottom: 6px; }
  .art-embed .site-sh { font-size: 11.5px; color: var(--ink-3); margin-bottom: 14px; }
  .art-embed .form {
    border: 1px dashed var(--orange);
    background: #fff7ee;
    border-radius: 10px;
    padding: 14px;
    display: flex; flex-direction: column; gap: 8px;
    position: relative;
  }
  .art-embed .form::before {
    content: 'native HTML — sem iframe';
    position: absolute; top: -10px; left: 12px;
    background: #fff;
    color: var(--orange);
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--orange);
  }
  .art-embed .form .field {
    background: #fff; border: 1px solid var(--line);
    border-radius: 6px; height: 28px;
    display: flex; align-items: center; padding: 0 10px;
    font-size: 11px; color: var(--ink-3);
  }
  .art-embed .form .submit {
    background: var(--orange); color: #fff;
    border-radius: 6px; height: 30px;
    display: grid; place-items: center;
    font-size: 12px; font-weight: 600;
  }

  /* Feat 3 — Pixel CAPI */
  .art-capi {
    padding: 24px;
    display: flex; flex-direction: column;
    justify-content: center; gap: 14px;
    background: #fff;
  }
  .art-capi .nodes {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
  }
  .art-capi .node {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 12px;
    text-align: center;
    background: #fff;
  }
  .art-capi .node .lab {
    font-size: 10px; color: var(--ink-3);
    text-transform: uppercase; letter-spacing: 0.1em;
    margin-bottom: 6px; font-weight: 600;
  }
  .art-capi .node .v {
    font-size: 13px; font-weight: 700;
    letter-spacing: -0.02em;
  }
  .art-capi .node .v small {
    display: block; font-weight: 400; font-size: 10.5px;
    color: var(--ink-2); margin-top: 3px;
  }
  .art-capi .node.gf { background: var(--ink); color: #fff; border-color: var(--ink); }
  .art-capi .node.gf .lab { color: #777; }
  .art-capi .arrow-h {
    width: 30px; height: 1px; background: var(--ink); position: relative;
  }
  .art-capi .arrow-h::after {
    content: ''; position: absolute; right: -1px; top: -3px;
    width: 6px; height: 6px;
    border-right: 1px solid var(--ink); border-top: 1px solid var(--ink);
    transform: rotate(45deg);
  }
  .art-capi .events {
    margin-top: 8px;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  }
  .art-capi .ev {
    border: 1px solid var(--line); border-radius: 8px;
    padding: 8px 10px;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 11.5px;
  }
  .art-capi .ev .nm { font-family: 'JetBrains Mono', monospace; color: var(--ink); }
  .art-capi .ev .ok {
    color: #16a34a; font-weight: 600; font-size: 11px;
    display: inline-flex; align-items: center; gap: 4px;
  }
  .art-capi .ev .ok::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%; background: #16a34a;
  }

  /* Feat 4 — anti-spam */
  .art-spam {
    padding: 24px;
    display: flex; flex-direction: column; gap: 10px;
    justify-content: center;
    background: #fff;
  }
  .art-spam .row {
    display: flex; align-items: center; gap: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
  }
  .art-spam .row .pic {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--bg-alt);
    flex: none;
    display: grid; place-items: center;
    font-size: 11px; font-weight: 600;
    color: var(--ink-2);
  }
  .art-spam .row .nm { font-weight: 600; flex: 1; }
  .art-spam .row .em { color: var(--ink-3); font-family: 'JetBrains Mono', monospace; font-size: 11px; }
  .art-spam .row .tag {
    font-size: 10px; font-weight: 600;
    padding: 3px 7px; border-radius: 4px;
  }
  .art-spam .row.ok .tag { background: #ecfdf5; color: #16a34a; }
  .art-spam .row.spam {
    background: #fef2f2; border-color: #fecaca;
    text-decoration: line-through;
    text-decoration-color: #ef4444;
    color: var(--ink-3);
  }
  .art-spam .row.spam .nm { color: var(--ink-3); }
  .art-spam .row.spam .tag { background: #fee2e2; color: #dc2626; text-decoration: none; }

  /* Feat 5 — banco de leads (kanban CRM) */
  .art-bank {
    padding: 0;
    overflow: hidden;
    background: #fff;
    display: flex; flex-direction: column;
  }
  .art-bank .toolbar {
    height: 44px;
    border-bottom: 1px solid var(--line);
    display: flex; align-items: center; padding: 0 16px; gap: 10px;
    flex: none;
  }
  .art-bank .toolbar .search {
    background: var(--bg-alt); border-radius: 6px;
    height: 28px; flex: 1;
    display: flex; align-items: center; padding: 0 10px;
    gap: 7px;
    font-size: 11.5px; color: var(--ink-3);
  }
  .art-bank .toolbar .chip {
    height: 26px; padding: 0 10px;
    border: 1px solid var(--line); border-radius: 6px;
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; color: var(--ink-2);
  }
  .art-bank .toolbar .chip.on {
    background: var(--ink); color: #fff; border-color: var(--ink);
  }
  .art-bank .kanban {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    background: var(--bg-alt);
    overflow: hidden;
  }
  .kan-col {
    display: flex; flex-direction: column;
    border-right: 1px solid var(--line);
    min-width: 0;
  }
  .kan-col:last-child { border-right: 0; }
  .kan-col .col-h {
    display: flex; align-items: center; gap: 7px;
    padding: 11px 12px 9px;
    font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--ink-2);
  }
  .kan-col .col-h .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
  .kan-col .col-h .cnt {
    margin-left: auto;
    font-size: 10px; font-weight: 600;
    color: var(--ink-3);
    background: #fff; border: 1px solid var(--line);
    border-radius: 999px; padding: 1px 7px;
  }
  .kan-col .col-body {
    display: flex; flex-direction: column; gap: 8px;
    padding: 2px 9px 12px;
  }
  .kan-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 10px 11px;
    box-shadow: 0 1px 2px rgba(17,17,17,0.04);
  }
  .kan-card.drag {
    border-color: var(--orange);
    box-shadow: 0 8px 20px rgba(249,115,22,0.18);
    transform: rotate(-1.5deg);
  }
  .kan-card .top {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px;
  }
  .kan-card .pic {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--bg-alt);
    display: grid; place-items: center;
    font-size: 9px; font-weight: 700; color: var(--ink-2);
    flex: none;
  }
  .kan-card .nm { font-size: 12px; font-weight: 700; letter-spacing: -0.01em; }
  .kan-card .row2 {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
  }
  .kan-card .src {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; color: var(--ink-2);
    font-family: 'JetBrains Mono', monospace;
  }
  .kan-card .src .sd { width: 5px; height: 5px; border-radius: 50%; background: var(--orange); flex: none; }
  .kan-card .src.go .sd { background: #2563eb; }
  .kan-card .val {
    font-size: 10.5px; font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
  }

  /* ─── Pricing ──────────────────────────────────────── */
  .price-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    align-items: stretch;
  }
  .price-card {
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: 12px;
    padding: 24px 22px 26px;
    display: flex; flex-direction: column;
    position: relative;
    transition: transform .2s, box-shadow .2s;
  }
  .price-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(17,17,17,0.06);
  }
  .price-card.featured {
    border: 2px solid var(--ink);
    padding: 23px 21px 25px;
    box-shadow: 0 12px 32px rgba(17,17,17,0.10);
  }
  .price-card .tag {
    position: absolute; top: -11px; left: 22px;
    background: var(--orange); color: #fff;
    font-size: 11px; font-weight: 700;
    padding: 4px 10px; border-radius: 999px;
    letter-spacing: 0.02em;
  }
  .price-card .nm {
    font-size: 13px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--ink-2);
    margin-bottom: 4px;
  }
  .price-card.featured .nm { color: var(--ink); }
  .price-card .pr {
    font-size: 38px; font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
    margin: 14px 0 4px;
    color: var(--ink);
  }
  .price-card .pr .cur { font-size: 18px; font-weight: 600; vertical-align: top; margin-right: 2px; }
  .price-card .pr small { font-size: 14px; font-weight: 500; color: var(--ink-2); }
  .price-card .pr-desc {
    font-size: 13px; color: var(--ink-3);
    margin: 0 0 22px;
    min-height: 38px;
  }
  .price-card .btn { width: 100%; }
  .price-card hr {
    border: 0; border-top: 1px solid var(--line);
    margin: 18px 0 14px;
  }
  .price-card ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 10px;
  }
  .price-card li {
    display: flex; align-items: flex-start; gap: 9px;
    font-size: 13.5px; color: var(--ink);
    line-height: 1.4;
  }
  .price-card li svg { color: var(--orange); margin-top: 3px; flex: none; }
  .price-card li.muted { color: var(--ink-3); }
  .price-card li.muted svg { color: var(--ink-3); }
  .price-foot {
    margin-top: 24px;
    text-align: center;
    color: var(--ink-2);
    font-size: 14px;
    display: flex; justify-content: center; align-items: center; gap: 18px;
    flex-wrap: wrap;
  }
  .price-foot .pay {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--ink-2);
  }
  .price-foot .pay-tag {
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    background: #fff; border: 1px solid var(--line);
    padding: 3px 8px; border-radius: 4px;
    color: var(--ink);
  }

  /* ─── Compare Table ─────────────────────────────── */
  .compare-toggle-wrap {
    display: flex; justify-content: center;
    margin: 24px 0 0;
  }
  .compare-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: 1px solid var(--line-2);
    border-radius: 8px; padding: 10px 20px;
    font-size: 14px; font-weight: 600; color: var(--ink);
    cursor: pointer; transition: border-color .2s, color .2s;
  }
  .compare-toggle:hover { border-color: var(--orange); color: var(--orange); }
  .compare-arrow {
    transition: transform .25s ease;
    flex-shrink: 0;
  }
  .compare-toggle[aria-expanded="true"] .compare-arrow {
    transform: rotate(180deg);
  }
  .compare-table-wrap {
    overflow: hidden;
    max-height: 0;
    transition: max-height .4s ease, opacity .3s ease;
    opacity: 0;
  }
  .compare-table-wrap.open {
    max-height: 3000px;
    opacity: 1;
  }
  .compare-table {
    margin-top: 28px;
    border: 1px solid var(--line-2);
    border-radius: 14px;
    overflow: hidden;
    font-size: 13.5px;
  }
  .ct-row {
    display: grid;
    grid-template-columns: 1fr repeat(4, 120px);
    border-bottom: 1px solid var(--line-2);
  }
  .ct-row:last-child { border-bottom: none; }
  .ct-head { background: var(--bg-alt); }
  .ct-feat {
    padding: 12px 18px;
    color: var(--ink-2);
    font-weight: 500;
  }
  .ct-col {
    padding: 12px 10px;
    text-align: center;
    border-left: 1px solid var(--line-2);
    color: var(--ink-2);
  }
  .ct-col--featured {
    background: #fff9f5;
    font-weight: 600;
    color: var(--ink);
  }
  .ct-head .ct-col {
    font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--ink);
  }
  .ct-head .ct-col--featured { color: var(--orange); }
  .ct-group {
    padding: 8px 18px;
    background: var(--bg-alt);
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--ink-3);
    border-bottom: 1px solid var(--line-2);
  }
  .ct-yes { color: #16a34a; font-weight: 700; font-size: 15px; }
  .ct-no  { color: #dc2626; font-weight: 700; font-size: 15px; }
  .ct-row:hover .ct-feat { color: var(--ink); }

  /* ─── Integ New Layout ───────────────────────────── */
  /* ─── Integ New Layout ───────────────────────────── */
  .integ-new {
    display: flex; flex-direction: column; align-items: center;
    gap: 0;
    background:
      radial-gradient(ellipse 80% 60% at 50% 50%, #fff4ec 0%, transparent 70%),
      radial-gradient(circle at 1px 1px, #e0e0e0 1px, transparent 0) 0 0 / 28px 28px,
      #fafafa;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 32px 36px 36px;
  }
  .integ-row-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    width: 100%;
  }
  .integ-box {
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: 16px;
    padding: 24px 28px 28px;
    box-shadow: 0 2px 12px rgba(17,17,17,0.05), 0 1px 3px rgba(17,17,17,0.04);
  }
  .integ-box--crm { width: 100%; }
  .integ-box-label {
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 20px;
    text-align: center;
  }
  .integ-logos {
    display: flex; flex-wrap: wrap;
    gap: 20px 0;
    align-items: flex-start;
    justify-content: center;
  }
  .integ-logo-item {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    width: calc(100% / 5);
    padding: 0 8px;
  }
  .integ-row-top .integ-logo-item {
    width: calc(100% / 3);
  }
  .integ-box--crm .integ-logo-item {
    width: calc(100% / 8);
  }
  .integ-logo-item img {
    height: 36px; width: auto; max-width: 60px;
    object-fit: contain; border-radius: 8px;
    transition: transform .2s;
  }
  .integ-logo-item:hover img { transform: translateY(-2px); }
  .integ-logo-item span {
    font-size: 10px; color: var(--ink-3); font-weight: 500;
    text-align: center; white-space: nowrap;
  }
  .integ-mid-row {
    position: relative;
    width: 100%;
    display: flex; align-items: center; justify-content: center;
    height: 220px;
    margin: 0;
    z-index: 1;
  }
  .integ-arrows-svg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 3;
  }
  .integ-hub-center {
    display: flex; flex-direction: column; align-items: center;
    position: relative; z-index: 2;
  }
  @keyframes dash-flow {
    to { stroke-dashoffset: -24; }
  }
  .integ-arrows-svg path {
    stroke-dasharray: 7 5;
    animation: dash-flow .9s linear infinite;
  }

  /* ─── Integrations ───────────────────────────────── */
  .integ-wrap {
    position: relative;
    background:
      radial-gradient(800px 300px at 50% 50%, #fff7ee 0%, transparent 70%),
      radial-gradient(circle at 1px 1px, #e0e0e0 1px, transparent 0) 0 0 / 28px 28px,
      #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 56px 40px;
    overflow: hidden;
  }
  .integ-grid {
    display: grid;
    grid-template-columns: 180px 32px 120px 32px 1fr;
    align-items: center;
    gap: 0;
    position: relative;
    min-height: 360px;
  }
  /* sources column */
  .integ-sources, .integ-targets {
    display: flex; flex-direction: column;
    gap: 14px;
    z-index: 2;
  }
  .src-card {
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 4px 14px rgba(17,17,17,0.04);
    transition: transform .2s, box-shadow .2s;
  }
  .src-card:hover { transform: translateX(2px); box-shadow: 0 8px 22px rgba(17,17,17,0.08); }
  .src-card .ico {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: grid; place-items: center;
    flex: none;
    color: #fff;
  }
  .src-card .meta { display: flex; flex-direction: column; gap: 2px; }
  .src-card .nm { font-size: 13.5px; font-weight: 700; letter-spacing: -0.015em; }
  .src-card .sb { font-size: 11px; color: var(--ink-3); }

  /* center hub */
  .integ-hub {
    grid-column: 3;
    display: grid; place-items: center;
    z-index: 3;
  }
  .hub-tile {
    width: 88px; height: 88px;
    border-radius: 20px;
    background: var(--orange);
    display: grid; place-items: center;
    box-shadow:
      0 1px 0 rgba(0,0,0,0.05),
      0 8px 24px rgba(249,115,22,0.38),
      0 20px 50px rgba(249,115,22,0.22),
      0 0 0 6px rgba(249,115,22,0.08),
      0 0 0 14px rgba(249,115,22,0.04);
    position: relative;
  }
  .hub-tile img { width: 62px; height: 62px; }
  .hub-tile::after {
    content: '';
    position: absolute; inset: -8px;
    border-radius: 28px;
    border: 1px dashed #ffd9b8;
    opacity: 0.7;
  }
  .hub-label {
    margin-top: 14px;
    font-size: 12px; font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-align: center;
  }
  .hub-label small {
    display: block;
    font-weight: 500;
    color: var(--ink-3);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 2px;
  }

  /* targets grid */
  .integ-targets {
    grid-column: 4 / span 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .tg-card {
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: 10px;
    padding: 10px 8px 8px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px;
    aspect-ratio: 1;
    box-shadow: 0 4px 14px rgba(17,17,17,0.04);
    transition: transform .2s, box-shadow .2s;
  }
  .tg-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(17,17,17,0.08); }
  .tg-card .ico {
    width: 34px; height: 34px;
    border-radius: 7px;
    display: grid; place-items: center;
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: -0.02em;
  }
  .tg-card .ico.ico-img {
    background: #fff;
    border: 1px solid #e8e8e8;
    overflow: hidden;
    padding: 4px;
  }
  .tg-card .ico.ico-img img {
    width: 100%; height: 100%;
    object-fit: contain;
  }
  .tg-card .nm {
    font-size: 10px; font-weight: 600;
    color: var(--ink);
    text-align: center;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }

  /* connector svg */
  .integ-svg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
  }
  .integ-svg path {
    fill: none;
    stroke: #d4d4d4;
    stroke-width: 1.5;
    stroke-dasharray: 4 4;
  }
  .integ-svg path.in {
    stroke: #b9b9b9;
  }
  .integ-svg circle.dot {
    fill: var(--orange);
  }
  @keyframes flow {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -40; }
  }
  .integ-svg path.in { animation: flow 1.6s linear infinite; }
  .integ-svg path.out { animation: flow 1.6s linear infinite reverse; }

  @media (max-width: 1024px) {
    .integ-grid {
      grid-template-columns: 1fr;
      grid-auto-flow: row;
      gap: 24px;
      min-height: 0;
    }
    .integ-hub { grid-column: 1; }
    .integ-targets { grid-column: 1; grid-template-columns: repeat(4, 1fr); }
    .integ-svg { display: none; }
  }
  @media (max-width: 560px) {
    .integ-wrap { padding: 32px 20px; }
    .integ-targets { grid-template-columns: repeat(2, 1fr); }
  }

  /* ─── Footer ──────────────────────────────────────── */
  footer.foot {
    background: var(--ink);
    color: #9b9994;
    padding: 48px 0 28px;
  }
  footer.foot a:hover { color: #fff; }
  footer .top {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 36px;
    border-bottom: 1px solid #222;
  }
  footer .brand-block .brand img { filter: invert(1) brightness(2); }
  footer .brand-block .brand span { color: #fff; }
  footer .brand-block p {
    margin: 18px 0 0;
    font-size: 13.5px;
    color: #9b9994;
    line-height: 1.55;
    max-width: 30ch;
  }
  footer h4 {
    color: #fff; font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.12em;
    margin: 6px 0 18px;
  }
  footer ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 12px;
  }
  footer ul a {
    font-size: 14px; color: #9b9994;
    transition: color .15s;
  }
  footer .bot {
    padding-top: 28px;
    display: flex; align-items: center; justify-content: space-between;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    color: #6b6760;
  }
  footer .bot .legal { display: flex; gap: 22px; }

  /* ─── Responsive ──────────────────────────────────── */
  @media (max-width: 1024px) {
    .price-grid { grid-template-columns: repeat(2, 1fr); }
    .strip .grid { grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
    .strip .item { padding: 0 24px; }
    .strip .item:nth-child(3) { border-left: 0; }
  }
  @media (max-width: 860px) {
    .container { padding: 0 20px; }
    .nav-links { display: none; }
    .hero { padding: 40px 0 48px; }
    .hero .grid { grid-template-columns: 1fr; gap: 32px; }
    section.s { padding: 56px 0; }
    .feat { grid-template-columns: 1fr; gap: 24px; padding: 32px 0; }
    .feat.rev .feat-text { order: 0; }
    footer .top { grid-template-columns: 1fr 1fr; gap: 28px; }
    footer .bot { flex-direction: column; gap: 10px; }
    .timeline { grid-template-columns: repeat(2, 1fr); gap: 16px 0; }
    .tl-step::after { display: none; }
    .tabs-wrap { grid-template-columns: 1fr; }
    .tabs-nav { border-right: none; border-bottom: 1px solid var(--line-2); flex-direction: row; flex-wrap: wrap; }
    .tab-panel { grid-template-columns: 1fr; padding: 24px; gap: 20px; min-height: auto; }
    .integ-row-top { grid-template-columns: 1fr; }
    .integ-new { padding: 24px 20px 28px; }
    .price-grid { grid-template-columns: repeat(2, 1fr); }
    .compare-table { font-size: 12px; }
    .ct-row { grid-template-columns: 1fr repeat(4, 72px); }
    .sec-head { margin-bottom: 32px; }
  }
  @media (max-width: 560px) {
    .price-grid { grid-template-columns: 1fr; }
    .strip .grid { grid-template-columns: repeat(2, 1fr); gap: 28px 0; }
    .strip .item { padding: 0 16px; }
    .strip .item:nth-child(odd) { border-left: 0; }
    .strip .item:nth-child(even) { border-left: 1px solid #2a2a2a; }
    footer .top { grid-template-columns: 1fr; gap: 24px; }
    footer.foot { padding: 36px 0 24px; }
    .hero-cta { flex-direction: column; align-items: stretch; }
    .hero-cta .btn { width: 100%; }
    /* Hero trust checks — compact, no wrapping */
    .hero-meta { gap: 12px; font-size: 11.5px; flex-wrap: wrap; }
    .hero-meta .check { gap: 4px; }
    /* Timeline — 2-column, 5th centered */
    .timeline { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .tl-step:nth-child(5) { grid-column: 1 / -1; justify-self: center; width: 50%; }
    /* Integrations — top box logos 3-per-row, CRM 4-per-row */
    .integ-row-top .integ-logo-item { width: calc(100% / 3); }
    .integ-box--crm .integ-logo-item { width: 25%; }
    /* Integrations — mid-row shorter */
    .integ-mid-row { height: 160px; }
    /* Compare table — tighter columns */
    .compare-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .ct-row { grid-template-columns: 1fr repeat(4, 54px); font-size: 11px; }
    .ct-head .ct-col { font-size: 10px; }
    /* Section */
    h2.sec-h { font-size: clamp(24px, 6vw, 34px); }
    .sec-sub { font-size: 14px; }
    section.s { padding: 44px 0; }
    /* Tabs nav labels smaller */
    .tab-btn { font-size: 13px; padding: 10px 14px; }
    /* Integrations box padding */
    .integ-box { padding: 20px 16px 22px; }
    .integ-new { padding: 20px 16px 24px; }
  }