/* Comparison pages: self-contained RC sub-page. Base, header/nav, CTA and footer copied from features/ (which took them from integrations/). */
  :root {
    --paper: #F7F5F1; --white: #FFFFFF;
    --ink: #23262A; --ink-600: #505763; --ink-500: #6B7280; --ink-400: #B9BEC6;
    --gray-300: #D5D8DD; --gray-200: #E3E5E8; --gray-100: #F1F2F4;
    --orange: #ED5A29; --orange-hover: #F17E58; --orange-ink: #B8410F; --orange-100: #FEEFEA; --orange-200: #F8CDBB;
    --green-100: #E6F4EC; --green-ink: #1F6B42;
    --dark: #23262A; --dark-panel: #1A1C1F; --dark-border: #3A3E44;
    --shadow: 0 1px 2px 0 rgba(16,24,40,.04), 0 1px 3px 0 rgba(16,24,40,.06);
    --shadow-md: 0 18px 40px -22px rgba(35,38,42,.38);
    --shadow-lg: 0 28px 66px -24px rgba(35,38,42,.40);
    --r-btn: 9px; --r-input: 12px; --r-card: 16px; --r-lg: 22px; --r-pill: 999px;
    --font: 'Funnel Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    --mono: 'Roboto Mono', ui-monospace, Menlo, monospace;
    --container: min(1160px, 100% - 48px);
    --h1-size: 40px; --h1-lh: 48px; --h2-size: 28px; --h2-lh: 36px;
    --lead-size: 16px; --lead-lh: 25px; --section-gap: 72px;
  }
  @media (min-width: 700px) { :root { --h1-size: 52px; --h1-lh: 60px; --h2-size: 34px; --h2-lh: 42px; --lead-size: 17px; --lead-lh: 27px; --section-gap: 100px; } }
  @media (min-width: 1280px) { :root { --container: min(1200px, 100% - 48px); --h1-size: 62px; --h1-lh: 70px; --h2-size: 40px; --h2-lh: 48px; --lead-size: 19px; --lead-lh: 29px; --section-gap: 128px; } }
  * { box-sizing: border-box; }
  body { margin: 0; font-family: var(--font); background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }
  a { color: var(--orange); text-decoration: none; }
  a:hover { color: var(--orange); }
  button { font-family: inherit; cursor: pointer; }
  img { display: block; max-width: 100%; }

  .container { width: var(--container); max-width: 100%; margin: 0 auto; padding: 0; position: relative; z-index: 1; }
  @media (min-width: 1440px) { :root { --container: min(1360px, 100% - 48px); --h1-size: 64px; --h1-lh: 72px; --lead-size: 20px; --lead-lh: 30px; --section-gap: 144px; } }
  @media (max-width: 767px) { :root { --container: min(1160px, 100% - 40px); } }
  .narrow { max-width: 740px; margin: 0 auto; text-align: center; }
  .section { padding: var(--section-gap) 0; position: relative; overflow: hidden; }
  .band { background: var(--white); }
  .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); margin: 0 0 16px; }
  .h1 { font-size: var(--h1-size); line-height: var(--h1-lh); font-weight: 700; margin: 0 0 22px; letter-spacing: -0.025em; }
  .h2 { font-size: var(--h2-size); line-height: var(--h2-lh); font-weight: 600; margin: 0 0 16px; letter-spacing: -0.015em; }
  .lead { font-size: var(--lead-size); line-height: var(--lead-lh); color: var(--ink-600); margin: 0; }
  .muted { font-size: 14px; color: var(--ink-500); margin: 0; }
  .accent { color: var(--orange); }
  .decor { position: absolute; pointer-events: none; z-index: 0; user-select: none; }

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 24px; border-radius: var(--r-btn); font-size: 16px; font-weight: 600; border: 1px solid transparent; transition: background .15s ease, transform .15s ease, border-color .15s ease; }
  .btn-primary { background: var(--orange); color: #fff; box-shadow: 0 8px 20px -10px rgba(237,90,41,.7); }
  .btn-primary:hover { background: var(--orange-hover); color: #fff; transform: translateY(-1px); }
  .btn-ghost { background: var(--white); color: var(--ink); border-color: var(--gray-300); }
  .btn-ghost:hover { border-color: var(--ink-400); color: var(--ink); }
  .btn-link { background: transparent; color: var(--ink); padding: 10px 6px; border: none; }
  .btn-link:hover { color: var(--orange); }
  .btn-sm { min-height: 44px; padding: 8px 18px; font-size: 15px; }

  /* reveal on scroll (homepage-rc pattern) */
  .rv { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
  .rv.in { opacity: 1; transform: none; }

  @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
  @keyframes caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
  @keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(237,90,41,.45); } 100% { box-shadow: 0 0 0 12px rgba(237,90,41,0); } }
  @keyframes popin { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
  @keyframes drift { 0%, 100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(10px,-14px) rotate(4deg); } }
  @keyframes flow { to { stroke-dashoffset: -24; } }
  @keyframes scan { 0% { top: -12%; } 100% { top: 100%; } }
  @keyframes type { 0% { width: 0; } 55%, 100% { width: 100%; } }
  @keyframes chipin { 0%, 15% { opacity: 0; transform: translateY(6px) scale(.92); } 25%, 100% { opacity: 1; transform: none; } }
  @keyframes fillbar { 0% { width: 8%; } 80%, 100% { width: 100%; } }
  @keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

  /* ===== header + nav (copied from homepage-rc) ===== */
  :root { --header-h: 80px; --ease: cubic-bezier(.16,1,.3,1); }
  .wrap { width: var(--container); max-width: 100%; margin: 0 auto; padding: 0; }
  .site-header button { border: 0; background: transparent; font-family: inherit; padding: 0; }
  .site-header .btn { min-height: 40px; padding: 8px 18px; font-size: 15px; font-weight: 500; box-shadow: none; }
  .site-header .btn-primary { font-weight: 600; }
  .btn-outline { background: var(--white); border: 1px solid var(--gray-200); color: var(--ink); }
  .btn-outline:hover { background: #FAFAFA; border-color: var(--gray-300); color: var(--ink); }

.site-header{position:sticky;top:0;z-index:50;height:var(--header-h);transition:background 220ms ease,box-shadow 220ms ease,border-color 220ms ease;border-bottom:1px solid transparent}
.site-header.is-stuck{background:rgba(247,245,241,.8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom-color:transparent}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}
.nav-links{display:flex;align-items:center;gap:6px}
/* The panels are absolutely positioned against the header itself (the sticky header is the
   nearest positioned ancestor), so the items stay static and the panel can be centred on
   .wrap regardless of which trigger opened it. */
.nav-item{position:static;display:flex;align-items:center}
.nav-trigger{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:var(--r-btn);background:transparent;font-size:15px;font-weight:500;color:var(--ink-600);cursor:pointer;transition:background 140ms ease,color 140ms ease}
.nav-trigger:hover,.nav-item.is-open>.nav-trigger{background:var(--gray-100);color:var(--ink)}
.nav-trigger a,.nav-trigger button{color:inherit}
.nav-trigger-plain{color:var(--ink-600)}
.nav-trigger-split{padding:0}
.nav-trigger-label{display:flex;align-items:center;min-height:44px;padding:0 4px 0 14px}
.nav-caret{display:flex;align-items:center;min-height:44px;padding:0 14px 0 2px;cursor:pointer}
.nav-trigger svg{transition:transform 160ms ease}
.nav-item.is-open .nav-trigger svg{transform:rotate(180deg)}
.header-actions{display:flex;align-items:center;gap:10px}
.nav-burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:var(--r-btn);color:var(--ink);cursor:pointer}
.nav-burger-x{display:none}
.nav-burger[aria-expanded="true"] .nav-burger-bars{display:none}
.nav-burger[aria-expanded="true"] .nav-burger-x{display:block}

/* ===== header dropdowns (nav) =====
   "B" style from the approved artboards: bare 20px line icons (no tile), --ink-600 going
   --ink on hover, 500-weight titles, white panel on a 1px --gray-200 border. */
.nav-panel{position:absolute;top:100%;left:50%;z-index:2;width:min(var(--nav-w,1000px),var(--container));margin-top:9px;opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-4px);transition:opacity 160ms var(--ease),transform 160ms var(--ease),visibility 0s linear 160ms}
.nav-item.is-open>.nav-panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);transition-delay:0s,0s,0s}
/* 9px, not 8: top:100% lands on the header's padding box, and the header's 1px bottom
   border sits outside it — this puts the panel exactly 8px under the visible header edge */
/* invisible bridge over the 8px gap, so the pointer can cross from the trigger into the
   panel without ever leaving .nav-item */
.nav-panel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav-panel-in{background:var(--white);border:1px solid var(--gray-200);border-radius:14px;box-shadow:0 8px 20px -10px rgba(35,38,42,.12),0 1px 2px rgba(35,38,42,.04);overflow:hidden}
.nav-panel-product{--nav-w:1000px}
.nav-panel-library{--nav-w:1020px}
.nav-panel-res{--nav-w:860px}
.nav-sec{display:flex;flex-direction:column;gap:12px}
.nav-sec-title{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-600);padding:0 12px}
.nav-sec-title-flush{padding:0}
.nav-col{display:flex;flex-direction:column;gap:12px;padding:28px 16px 20px}
.nav-col-side{background:var(--white);border-left:1px solid var(--gray-200)}
.nav-list{display:flex;flex-direction:column;gap:4px}
.nav-list-tight{display:flex;flex-direction:column;gap:2px}
/* rich row: icon + title (+ chip) + description, arrow revealed at the right edge on hover */
.nav-row{display:flex;gap:14px;padding:12px;border-radius:12px;color:var(--ink);transition:background 120ms ease}
.nav-row:hover{background:var(--gray-100);color:var(--ink)}
.nav-ico{width:24px;height:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--ink-600);transition:color 120ms ease}
.nav-row:hover .nav-ico,.nav-row-c:hover .nav-ico{color:var(--ink)}
.nav-row-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.nav-row-name{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:500;line-height:22px}
.nav-row-desc{font-size:13px;line-height:19px;color:var(--ink-600)}
/* always in the box, only faded — revealing it must not reflow the row */
.nav-row-go{margin-left:auto;align-self:center;display:flex;color:var(--ink);opacity:0;transition:opacity 120ms ease}
.nav-row:hover .nav-row-go,.nav-row:focus-visible .nav-row-go{opacity:1}
/* compact one-line row (Popup Library columns) */
.nav-row-c{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 12px;border-radius:10px;font-size:15px;font-weight:500;color:var(--ink);transition:background 120ms ease}
.nav-row-c:hover{background:var(--gray-100);color:var(--ink)}
/* plain text row (Resources / Company) */
.nav-row-p{display:flex;align-items:center;min-height:40px;padding:8px 12px;border-radius:var(--r-btn);font-size:15px;font-weight:500;color:var(--ink);transition:background 120ms ease}
.nav-row-p:hover{background:var(--gray-100);color:var(--ink)}
.nav-chip{font-size:11px;font-weight:600;line-height:16px;padding:1px 8px;border-radius:var(--r-pill);background:var(--orange-100);color:#B23A12}
.nav-ai-logos{display:flex;align-items:center;gap:8px;margin-top:6px}
.nav-ai-logos img{width:16px;height:16px}
.nav-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 28px;border-top:1px solid var(--gray-200);background:var(--white)}
.nav-foot-center{justify-content:center}
.nav-foot-note{font-size:15px;color:var(--ink-600)}
.nav-foot-link,.nav-link-go{display:flex;align-items:center;gap:6px;min-height:44px;font-size:14px;font-weight:600;color:var(--ink)}
.nav-link-go{min-height:40px}
.nav-foot-link:hover,.nav-link-go:hover{color:var(--ink);text-decoration:underline}
/* Product panel */
.nav-prod-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr)}
.nav-usecases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
/* Popup Library panel */
.nav-lib-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px}
.nav-lib-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding:28px 20px 24px}
.nav-seasons{display:flex;flex-direction:column;gap:14px;padding:28px 24px 24px;border-left:1px solid var(--gray-200)}
.nav-season-body{display:flex;flex-direction:column;gap:12px}
.nav-season-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.nav-season-name{font-size:18px;font-weight:600;line-height:24px}
.nav-season-when{font-size:13px;line-height:19px;color:var(--ink-600);white-space:nowrap}
.nav-season-shot{display:block;padding:14px;border-radius:12px;background:var(--paper)}
.nav-season-shot img{width:100%;height:auto;border-radius:6px;box-shadow:0 6px 16px -8px rgba(35,38,42,.35)}
.nav-season-list{display:flex;flex-direction:column;border-top:1px solid var(--gray-200);padding-top:6px}
.nav-season-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:6px 0;font-size:15px;font-weight:500;color:var(--ink)}
.nav-season-row:hover{color:var(--ink);text-decoration:underline}
/* Resources panel: the artboard's per-column padding keeps the three columns optically even */
.nav-res-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 240px}
.nav-col-l{padding:28px 8px 24px 16px}
.nav-col-r{padding:28px 16px 24px 8px}
.nav-col-c{padding:28px 12px 24px}
/* the mobile sheet only exists under the nav breakpoint */
.mnav{display:none}
/* ===== responsive ===== */
@media (max-width:1059px){
  /* the seasons column needs its 380px; below this the two link columns get the panel */
  .nav-lib-grid{grid-template-columns:minmax(0,1fr)}
  .nav-seasons{display:none}
}
/* ===== tablet ===== */

@media (max-width:767px){
  :root{--header-h:64px}
  .nav-links,.header-signin{display:none}
  .nav-burger{display:flex}
  /* full-height sheet under the (sticky) header; z-index stays below the header's 50 */
  .mnav{position:fixed;left:0;right:0;top:var(--header-h);bottom:0;z-index:49;display:flex;flex-direction:column;background:var(--white);overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity 160ms var(--ease),transform 160ms var(--ease),visibility 0s linear 160ms}
  .mnav-nav{display:flex;flex-direction:column}
  .mnav-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:56px;padding:0 20px;border-bottom:1px solid var(--gray-200);font-size:17px;font-weight:600;color:var(--ink);text-align:left;cursor:pointer}
  .mnav-row svg{flex-shrink:0;color:var(--ink-600)}
  .mnav-chev{transition:transform 160ms ease}
  .mnav-row[aria-expanded="true"] .mnav-chev{transform:rotate(180deg)}
  .mnav-sub{display:none;background:#FCFBF9;border-bottom:1px solid var(--gray-200);padding-bottom:10px}
  .mnav-sub.is-open{display:block}
  .mnav-sub-title{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-600);padding:14px 20px 4px}
  .mnav-link{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 20px;font-size:15px;font-weight:500;color:var(--ink)}
  .mnav-link:hover{color:var(--ink)}
  .mnav-ico{display:flex;color:var(--ink-600)}
  .mnav-arrow{padding:6px 20px 0}
  .mnav-foot{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding:16px 20px 24px;border-top:1px solid var(--gray-200)}
  .mnav-cta{font-size:16px}
    .mnav.is-open{opacity:1;visibility:visible;transform:none;transition-delay:0s,0s,0s}

}
  /* faq */
  .faq-item { border-bottom: 1px solid var(--gray-200); }
  .faq-item:first-child { border-top: 1px solid var(--gray-200); }
  .faq-q { width: 100%; background: transparent; border: none; text-align: left; padding: 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--ink); min-height: 44px; }
  .faq-q-text { font-size: 17px; font-weight: 600; }
  .faq-icon { flex-shrink: 0; transition: transform .2s ease; }
  .faq-icon-open { transform: rotate(45deg); }
  .faq-a { padding: 0 0 22px; margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-600); max-width: 720px; animation: popin .25s ease both; }

  .cta-sec { position: relative; overflow: hidden; background: var(--paper); padding: var(--section-gap) 0 96px; }
  .motif-enso { position: absolute; right: -140px; top: -60px; width: 520px; height: auto; opacity: .9; pointer-events: none; animation: spin 120s linear infinite; }
  .motif-bamboo { position: absolute; right: -20px; bottom: -180px; width: 300px; height: auto; opacity: .85; pointer-events: none; }
  .cta-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .cta-monk { width: 260px; height: auto; animation: float 6s ease-in-out infinite; }
  .cta-h { font-size: 52px; line-height: 60px; font-weight: 700; letter-spacing: -0.02em; margin: 8px 0 0; }
  .btn-lg { min-height: 52px; padding: 13px 30px; font-size: 17px; }
  @media (max-width: 900px) { .motif-enso { width: 360px; right: -120px; opacity: .6; } .motif-bamboo { width: 200px; bottom: -100px; opacity: .6; } }
  @media (max-width: 640px) { .cta-h { font-size: 32px; line-height: 40px; } .cta-monk { width: 190px; } }
  .drift { animation: drift 12s ease-in-out infinite; }

  .site-footer { border-top: 1px solid var(--gray-200); position: relative; z-index: 1; background: var(--paper); }
  .foot-grid { padding: 56px 0 40px; display: grid; grid-template-columns: 320px repeat(4, minmax(0, 1fr)); gap: 40px; }
  .foot-brand { display: flex; flex-direction: column; gap: 12px; }
  .foot-brand img { height: 32px; width: auto; align-self: flex-start; }
  .foot-tag { font-size: 14px; color: var(--ink-600); }
  .foot-h { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
  .foot-link { display: block; font-size: 14px; color: var(--ink-600); line-height: 26px; }
  .foot-link:hover { color: var(--ink); }
  .foot-bottom { display: flex; justify-content: space-between; padding: 0 0 32px; font-size: 12px; color: var(--ink-500); gap: 16px; flex-wrap: wrap; }
  .foot-legal { display: flex; gap: 20px; }
  .foot-legal .foot-link { font-size: 12px; line-height: 16px; }
  @media (max-width: 1100px) { .foot-grid { grid-template-columns: 240px repeat(4, minmax(0, 1fr)); gap: 24px; } }
  @media (max-width: 760px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 40px 0 28px; } .foot-brand { grid-column: 1 / -1; } .foot-bottom { padding: 0 0 28px; flex-direction: column; gap: 10px; } }
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.rv{transition-delay:var(--d,0ms)}


/* ===================== Comparison pages: 1v1 + hub (values from the approved canvases) ===================== */
.cmp { font-family: 'Roboto', system-ui, -apple-system, sans-serif; color: var(--ink); }
.cmp .btn, .hub-sec .btn { font-family: var(--font); }
.cmp-wrap { max-width: 1200px; margin: 0 auto; position: relative; }
.btn-xs { min-height: 36px; padding: 8px 14px; font-size: 14px; font-weight: 500; box-shadow: none; }

/* shared headings */
.cmp-h1, .cmp-h2, .cmp-cta-h, .cat-q, .rel-h, .cat-num, .rating-om, .hub-h1, .hub-h2 { font-family: var(--font); }
.cmp-h2 { margin: 0; font-weight: 700; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
.sec-h { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.sec-h .eyebrow, .cmp .eyebrow { margin: 0; letter-spacing: .1em; }
.sec-h-c { align-items: center; text-align: center; margin: 0 auto; }
.sec-p { margin: 0; font-size: 19px; line-height: 1.55; color: var(--ink-600); text-wrap: pretty; }

/* status marks and winner labels */
.mk { flex-shrink: 0; width: 20px; height: 20px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 1px; }
.mk-y { background: #D1EDE2; color: #1FA87B; }
.mk-n { background: #F1F2F4; color: #8F97A4; }
.mk-p { background: #FFF3EC; color: #DC4B1D; }
.mk-i { background: #F1F2F4; color: #8F97A4; }
.cell-t { min-width: 0; overflow-wrap: anywhere; }
.win { align-self: flex-start; display: inline-block; font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 999px; }
.w-om { background: #FFF3EC; color: #DC4B1D; }
.w-c { background: #F1F2F4; color: #505763; }
.w-tie { background: #FFF8E0; color: #8A6A00; }

/* 01 hero */
.cmp-hero { position: relative; padding: 88px 24px 72px; overflow: hidden; }
.hero-pine { left: -60px; top: 60px; width: 300px; opacity: .85; }
.hero-bamboo { right: -30px; top: 10px; width: 260px; opacity: .85; }
.hero-in { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.pill { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #E8E5DF; border-radius: 999px; padding: 6px 16px 6px 6px; font-size: 14px; font-weight: 500; color: var(--ink-600); }
.pill:hover { color: var(--ink); border-color: var(--ink-400); }
.pill-tag { background: #FFF3EC; color: #DC4B1D; padding: 4px 10px; border-radius: 999px; font-size: 13px; }
.cmp-h1 { margin: 0; font-weight: 700; font-size: clamp(44px, 6.4vw, 80px); line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
.hl { color: var(--orange); background: linear-gradient(transparent 72%, rgba(237,90,41,.18) 72%); }
.cmp-lead { margin: 0; font-size: 20px; line-height: 1.55; color: var(--ink-600); max-width: 660px; text-wrap: pretty; }
.cmp-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.cmp .muted { color: #8F97A4; }
.ratings { position: relative; z-index: 1; max-width: 900px; margin: 56px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); background: #fff; border: 1px solid #E8E5DF; border-radius: 16px; overflow: hidden; }
.rating { padding: 22px 28px; display: flex; flex-direction: column; gap: 6px; border-right: 1px solid #F1F2F4; }
.rating:last-child { border-right: 0; }
.rating-l { font-size: 13px; font-weight: 500; color: #8F97A4; }
.rating-v { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rating-om { font-weight: 700; font-size: 34px; letter-spacing: -0.02em; }
.rating-c { font-size: 15px; color: #8F97A4; }

/* sections */
.cmp-sec { padding: 72px 24px; position: relative; }
.cmp-sec .sec-h { margin-bottom: 36px; }
.cmp-sec-table { padding-top: 48px; }
.cmp-sec.band { background: #fff; border-top: 1px solid #E8E5DF; border-bottom: 1px solid #E8E5DF; }
.cmp-sec.band + .cmp-sec.band { border-top: 0; }

/* 02 the short answer */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.tile { background: #fff; border: 1px solid #E8E5DF; border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 14px; color: var(--ink); transition: border-color .15s ease; }
.tile:hover { border-color: var(--orange); color: var(--ink); }
.tile-l { font-size: 16px; font-weight: 500; }

/* 03 feature table: a real <table>; the header row sticks under the site header (CSS only) */
.ft-wrap { background: #fff; border: 1px solid #E8E5DF; border-radius: 16px; }
.ft { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 15px; line-height: 1.5; text-align: left; }
.ft col, .ft th, .ft td { vertical-align: top; }
.ft thead th { position: sticky; top: var(--header-h); z-index: 5; background: #fff; border-bottom: 1px solid #E8E5DF; box-shadow: 0 6px 12px -8px rgba(0,0,0,.08); vertical-align: middle; }
.ft thead th:first-child { border-top-left-radius: 16px; }
.ft thead th:last-child { border-top-right-radius: 16px; }
.ft thead .ft-f { width: 25%; padding: 18px 28px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8F97A4; }
.ft thead .c-om { background: #FFF3EC; padding: 14px 24px; }
.ft thead .c-c { padding: 14px 24px; }
.ft-brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ft-brand img { height: 20px; width: auto; }
.ft-logo { height: 22px; width: auto; max-width: 100%; }
.ft .grp th { padding: 14px 28px 10px; border-top: 1px solid #E8E5DF; background: #FCFBF9; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-600); }
.ft tbody:first-of-type .grp th { border-top: 0; }
.ft tbody th[scope="row"] { padding: 16px 28px; border-top: 1px solid #F1F2F4; font-weight: 500; }
.ft tbody td { padding: 16px 24px; border-top: 1px solid #F1F2F4; }
.ft tbody td.c-om { border-top-color: #FFE3CE; background: #FFFAF6; }
.ft tbody td.c-c { color: var(--ink-600); }
.ft td, .mini td { display: table-cell; }
.ft td > .mk + .sr-only + .cell-t, .mini td > .mk + .sr-only + .cell-t { display: inline; }
.ft tbody td, .mini tbody td { position: relative; padding-left: 54px; }
.ft tbody td .mk { position: absolute; left: 24px; top: 17px; margin: 0; }
.ft tbody:last-of-type tr:last-child > * { border-bottom: 0; }
.ft tbody:last-of-type tr:last-child th:first-child { border-bottom-left-radius: 16px; }
.ft tbody:last-of-type tr:last-child td:last-child { border-bottom-right-radius: 16px; }

/* 04 category by category: every category stacked, fully visible */
.cats { display: flex; flex-direction: column; }
.cat { scroll-margin-top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; gap: 28px; padding: 48px 0; border-top: 1px solid #E8E5DF; }
.cat-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cat-num { font-size: 15px; font-weight: 700; color: #8F97A4; }
.cat-label { font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; align-items: start; }
.cat-copy { display: flex; flex-direction: column; gap: 18px; }
.cat-q { margin: 0; font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.cat-copy > p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--ink-600); text-wrap: pretty; }
.cat-verdict { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px; background: #F6F5F2; border-radius: 12px; }
.cat-verdict p { margin: 0; font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.mini-wrap { border: 1px solid #E8E5DF; border-radius: 16px; overflow: hidden; }
.mini { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; line-height: 1.45; text-align: left; }
.mini thead td, .mini thead th { padding: 12px 18px; font-size: 13px; font-weight: 700; background: #FCFBF9; }
.mini thead td { width: 36%; }
.mini thead .c-om { color: #DC4B1D; background: #FFF3EC; }
.mini thead .c-c { color: var(--ink-600); }
.mini tbody th { padding: 14px 18px; border-top: 1px solid #F1F2F4; font-weight: 500; vertical-align: top; }
.mini tbody td { padding: 14px 18px 14px 44px; border-top: 1px solid #F1F2F4; vertical-align: top; }
.mini tbody td .mk { position: absolute; left: 18px; top: 15px; width: 18px; height: 18px; font-size: 11px; margin: 0; }
.mini tbody td.c-om { border-top-color: #FFE3CE; background: #FFFAF6; }
.mini tbody td.c-c { color: var(--ink-600); }

/* FAQ: <details>, so every answer is in the HTML and works without JS */
.cmp-faq { padding: 88px 24px; }
.faq-wrap { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 36px; }
.faq-wrap .cmp-h2 { font-size: clamp(34px, 4.4vw, 52px); }
.faq-wrap .sec-p { font-size: 18px; }
.faqs { display: flex; flex-direction: column; gap: 10px; }
.faq { background: #F6F5F2; border-radius: 12px; overflow: hidden; }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; font-size: 17px; font-weight: 500; color: var(--ink); cursor: pointer; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq-i { flex-shrink: 0; width: 14px; height: 14px; position: relative; }
.faq-i::before, .faq-i::after { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 2px; background: var(--orange); transition: transform .2s ease; }
.faq-i::after { transform: rotate(90deg); }
.faq[open] .faq-i::after { transform: rotate(0deg); }
.faq-body { padding: 0 24px 22px; display: flex; flex-direction: column; gap: 14px; }
.faq-body p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink-600); }
.pc-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid #E8E5DF; background: #fff; }
.pc { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; line-height: 1.55; text-align: left; }
.pc thead th { padding: 12px 16px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8F97A4; border-bottom: 1px solid #E8E5DF; }
.pc thead th:first-child { width: 20%; }
.pc thead .pc-pro { color: #1FA87B; }
.pc tbody th, .pc tbody td { padding: 14px 16px; vertical-align: top; border-top: 1px solid #F1F2F4; }
.pc tbody th { font-weight: 600; color: var(--ink); }
.pc tbody td { color: var(--ink-600); overflow-wrap: anywhere; }
.pc-om { background: #FFFAF6; }

/* closing CTA */
.cmp-cta { padding: 96px 24px; position: relative; overflow: hidden; text-align: center; }
.cta-enso { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 560px; opacity: .35; }
.cta-in { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.cta-in .cta-monk { width: 150px; height: auto; animation: none; }
.cmp-cta-h { margin: 0; font-weight: 700; font-size: clamp(36px, 5vw, 60px); line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; }
.cta-in .btn { margin-top: 6px; }

/* related */
.cmp-related { padding: 0 24px 96px; }
.rel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.rel-h { margin: 0; font-size: 24px; font-weight: 700; }
.rel-all { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; }
.rels { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.rel { background: #fff; border: 1px solid #E8E5DF; border-radius: 12px; padding: 16px 18px; font-size: 15px; font-weight: 500; color: var(--ink); transition: border-color .15s ease; }
.rel:hover { border-color: var(--orange); color: var(--ink); }

/* phones: the 3-column tables become one row per feature, OptiMonk and competitor side by side */
@media (max-width: 720px) {
  .cmp-hero { padding: 56px 20px 48px; }
  .hero-pine { width: 160px; left: -70px; top: 30px; opacity: .5; }
  .hero-bamboo { width: 140px; right: -40px; opacity: .5; }
  .cmp-lead { font-size: 18px; }
  .cmp-ctas .btn { width: 100%; }
  .rating { border-right: 0; border-bottom: 1px solid #F1F2F4; padding: 16px 20px; }
  .rating:last-child { border-bottom: 0; }
  .cmp-sec, .cmp-faq { padding: 56px 20px; }
  .cmp-cta { padding: 72px 20px; }
  .cmp-related { padding: 0 20px 72px; }
  .cta-enso { width: 380px; }
  .cat { padding: 36px 0; }
  .cat-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cat-q { font-size: 24px; }
  .ft, .ft thead, .ft tbody, .ft tr { display: block; }
  .ft thead tr, .ft tbody tr:not(.grp) { display: grid; grid-template-columns: 1fr 1fr; }
  .ft thead { position: sticky; top: var(--header-h); z-index: 5; }
  .ft thead th { position: static; }
  .ft thead .ft-f { display: none; }
  .ft thead th.c-om { border-top-left-radius: 16px; }
  .ft thead .c-om, .ft thead .c-c { padding: 12px 14px; }
  .ft-brand .btn { display: none; }
  .ft .grp th { display: block; padding: 12px 16px 8px; }
  .ft tbody th[scope="row"] { grid-column: 1 / -1; display: block; padding: 14px 16px 6px; font-size: 14px; }
  .ft tbody td { display: block; padding: 6px 12px 14px 40px; border-top: 0; font-size: 14px; }
  .ft tbody td .mk { left: 12px; top: 7px; }
  .ft tbody:last-of-type tr:last-child th:first-child { border-bottom-left-radius: 0; }
  .ft tbody:last-of-type tr:last-child td.c-om { border-bottom-left-radius: 16px; }
  .mini thead td { width: 30%; }
  .mini thead td, .mini thead th, .mini tbody th { padding: 10px 12px; }
  .mini tbody td { padding: 10px 10px 10px 34px; font-size: 13px; }
  .mini tbody td .mk { left: 10px; top: 11px; }
  .faq summary { padding: 16px 18px; font-size: 16px; }
  .faq-body { padding: 0 18px 18px; }
}

/* ===================== three-way pages ([A] vs [B] vs OptiMonk) ===================== */
.cmp-h1-3 { font-size: clamp(40px, 5.6vw, 72px); line-height: 1.04; }
.cmp-3 .hero-in { max-width: 940px; }
.cmp-3 .cmp-lead { max-width: 680px; }
/* site fit: one "best for" card per tool */
.fits { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.fit { background: #fff; border: 1px solid #E8E5DF; border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.fit-om { border-color: #FFD2B8; }
.fit-logo { height: 24px; width: auto; align-self: flex-start; }
.fit-tag { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-600); }
.fit-om .fit-tag { color: #DC4B1D; }
.fit p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-600); text-wrap: pretty; }
/* the feature table with three tool columns */
.ft3 thead .ft-f { width: 19%; padding: 18px 24px; }
.ft3 thead .c-om, .ft3 thead .c-c { padding: 14px 20px; }
.ft3 .ft-logo { height: 20px; }
.ft3 tbody th[scope="row"] { padding: 16px 24px; }
.ft3 tbody td { padding: 16px 20px 16px 50px; }
.ft3 tbody td .mk { left: 20px; }
/* categories: copy beside a four-column mini table, no marks */
.cat-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); }
.cat-copy > p b { color: var(--ink); font-weight: 600; }
.mini3 thead td { width: 22%; }
.mini3 thead th, .mini3 thead td { padding: 12px 16px; overflow-wrap: anywhere; }
.mini3 tbody th { padding: 14px 16px; }
.mini3 tbody td { padding: 14px 16px; overflow-wrap: anywhere; hyphens: auto; }
/* pros and cons: one card per tool */
.cmp-pros { padding-top: 88px; padding-bottom: 88px; }
.pcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.pcard { background: #fff; border: 1px solid #E8E5DF; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.pcard-om { border-color: #FFD2B8; }
.pcard-h { padding: 20px 24px; border-bottom: 1px solid #F1F2F4; }
.pcard-om .pcard-h { background: #FFF3EC; }
.pcard-h img { height: 22px; width: auto; }
.pcard-b { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 10px; }
.pcard-l { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8F97A4; }
.pcard-pro { color: #1FA87B; }
.pcard ul { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pcard li { display: flex; gap: 10px; font-size: 15px; line-height: 1.5; }
.pcard-m { color: #1FA87B; font-weight: 700; flex-shrink: 0; }
.pcard-cons li { color: var(--ink-600); }
.pcard-cons .pcard-m { color: #8F97A4; }
/* phones: three tool columns do not fit side by side, so each cell is labelled with its tool */
@media (max-width: 720px) {
  .ft3 thead { position: static; }
  .ft3 thead tr { display: none; }
  .ft3 tbody tr:not(.grp) { display: block; padding-bottom: 8px; border-top: 1px solid #E8E5DF; }
  .ft3 tbody tr:first-child { border-top: 0; }
  .ft3 tbody th[scope="row"] { padding: 14px 16px 4px; border-top: 0; }
  .ft3 tbody td { display: block; padding: 6px 16px 6px 44px; border-top: 0; }
  .ft3 tbody td .mk { left: 16px; top: 7px; }
  .ft3 tbody td::before, .mini3 tbody td::before { content: attr(data-tool); display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8F97A4; margin-bottom: 2px; }
  .ft3 tbody td.c-om::before, .mini3 tbody td.c-om::before { color: #DC4B1D; }
  .ft3 tbody:last-of-type tr:last-child td.c-om { border-bottom-left-radius: 0; }
  .mini3, .mini3 tbody, .mini3 tr { display: block; }
  .mini3 thead { display: none; }
  .mini3 tbody tr { border-top: 1px solid #F1F2F4; padding-bottom: 6px; }
  .mini3 tbody tr:first-child { border-top: 0; }
  .mini3 tbody th { display: block; border-top: 0; padding: 12px 14px 4px; }
  .mini3 tbody td { display: block; border-top: 0; padding: 6px 14px; font-size: 13px; }
  .fit, .pcard-b { padding: 20px; }
}

/* ===================== hub (/compare) ===================== */
.hub-hero { position: relative; padding: 56px 64px 40px; overflow: hidden; }
.hub-bamboo { top: -24px; right: 24px; width: 260px; opacity: .85; }
.hub-hero-in { max-width: 900px; position: relative; z-index: 1; }
.hub-hero .eyebrow { font-size: 13px; letter-spacing: 1px; margin: 0 0 16px; }
.hub-h1 { margin: 0 0 36px; font-size: 46px; font-weight: 700; letter-spacing: -1px; line-height: 1.3; }
.brush { position: relative; display: inline-block; }
.brush img { position: absolute; left: -6%; bottom: -16px; width: 112%; max-width: none; height: auto; pointer-events: none; }
.hub-hero .cmp-lead { font-size: 17px; line-height: 1.6; max-width: 640px; }
.hub-sec { padding: 0 64px 48px; position: relative; }
.hub-h2 { margin: 0 0 20px; font-size: 20px; font-weight: 700; }
.feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.feat { display: flex; flex-direction: column; padding: 28px; border-radius: 16px; background: #fff; border: 1px solid var(--gray-200); color: var(--ink); transition: border-color .15s ease, transform .15s ease; }
.feat:hover { border-color: var(--orange); color: var(--ink); transform: translateY(-2px); }
.feat-t { font-size: 12px; font-weight: 700; color: var(--orange); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 14px; }
.feat-n { font-size: 19px; font-weight: 700; margin-bottom: 8px; }
.feat-s { font-size: 14px; color: var(--ink-600); line-height: 1.5; }
.hfilter { display: flex; align-items: center; gap: 12px; padding-bottom: 20px; }
.hfilter-l { font-size: 13px; font-weight: 600; color: var(--ink-600); flex-shrink: 0; }
.hf { padding: 9px 16px; border-radius: 9px; font-weight: 600; font-size: 13px; background: #fff; color: var(--ink); border: 1px solid var(--gray-200); white-space: nowrap; min-height: 40px; }
.hf:hover { border-color: var(--ink-400); }
.hf.is-on { background: var(--orange); color: #fff; border-color: var(--orange); }
.hcats { padding-bottom: 8px; }
.hcat { margin-bottom: 40px; }
.hcat[hidden], .hitem[hidden] { display: none; }
.hcat-h { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.hcat-h h3 { margin: 0; font-size: 19px; font-weight: 700; }
.hcat-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.hcat-d { font-size: 14px; color: var(--ink-600); margin: 0 0 16px 20px; }
.hcat-items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-left: 20px; }
.hitem { display: flex; flex-direction: column; padding: 14px 16px; border-radius: 10px; background: #fff; border: 1px solid var(--gray-200); color: var(--ink); transition: border-color .15s ease; }
.hitem:hover { border-color: var(--orange); color: var(--ink); }
.hitem-t { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.t-1v1 { color: #ED5A29; }
.t-3way { color: #4A3358; }
.hitem-n { font-size: 14px; font-weight: 600; }
.hub-faq { padding-top: 8px; padding-bottom: 64px; }
.hub-faq .hub-h2 { margin-bottom: 4px; }
.hub-faq-sub { font-size: 14px; color: var(--ink-600); margin: 0 0 20px; }
.hub-faqs { gap: 10px; }
.hub-faqs .faq { background: #fff; border: 1px solid var(--gray-200); }
.hub-faqs .faq summary { font-size: 16px; font-weight: 600; }
.hub-faqs .faq-i::before, .hub-faqs .faq-i::after { background: var(--ink-600); }
.hub-faqs .faq-body { padding: 0 24px 20px; max-width: 760px; }
.hub-faqs .faq-body p { font-size: 14px; line-height: 1.6; }
@media (max-width: 1100px) { .hcat-items { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .feats { grid-template-columns: minmax(0, 1fr); } .hcat-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .hub-hero { padding: 32px 20px 28px; }
  .hub-bamboo { width: 54px; top: -4px; right: 16px; }
  .hub-hero .eyebrow { font-size: 12px; margin-bottom: 12px; }
  .hub-h1 { font-size: 28px; letter-spacing: -.5px; line-height: 1.35; margin-bottom: 28px; }
  .brush img { bottom: -10px; }
  .hub-hero .cmp-lead { font-size: 15px; line-height: 1.55; }
  .hub-sec { padding: 0 20px 32px; }
  .hub-h2 { font-size: 17px; margin-bottom: 14px; }
  .feats { gap: 12px; }
  .feat { padding: 20px; border-radius: 14px; }
  .feat-t { font-size: 11px; margin-bottom: 10px; }
  .feat-n { font-size: 16px; margin-bottom: 6px; }
  .feat-s { font-size: 13px; line-height: 1.4; }
  .hfilter { gap: 8px; overflow-x: auto; padding-bottom: 16px; margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
  .hfilter-l { font-size: 12px; }
  .hf { padding: 8px 14px; font-size: 12px; }
  .hcat { margin-bottom: 28px; }
  .hcat-h h3 { font-size: 16px; }
  .hcat-d { font-size: 13px; margin: 0 0 12px 19px; }
  .hcat-items { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-left: 19px; }
  .hitem { padding: 12px 14px; }
  .hitem-t { font-size: 9px; margin-bottom: 4px; }
  .hitem-n { font-size: 13px; }
  .hub-faq { padding-bottom: 40px; }
  .hub-faqs .faq summary { font-size: 13px; padding: 14px 16px; }
  .hub-faqs .faq-body { padding: 0 16px 16px; }
  .hub-faqs .faq-body p { font-size: 13px; }
}