/* Integrations: self-contained RC sub-page. Base, header/nav, FAQ, CTA and footer copied from animated-popups/ (MKT-1880). */
  :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-ink); 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-ink); }
  .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; } }
/* ===================== Integrations page (OT: Integrations product page) ===================== */
.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)}
.sec-head{display:flex;flex-direction:column;gap:12px;max-width:720px;margin-bottom:40px}
.sec-head .h2{margin:0}
.cta-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:28px}

/* hero */
.hero{padding:72px 0 40px;position:relative;overflow:hidden}
.hero-in{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero .h1{max-width:900px;margin:16px 0 20px}
.hero .lead{max-width:680px}
.hero-bamboo{top:-10px;right:-40px;width:320px;opacity:.7;animation:float 9s ease-in-out infinite}
.hero-enso{left:-120px;top:120px;width:340px;opacity:.28;animation:drift 14s ease-in-out infinite}
.finder{position:relative;width:min(720px,100%);margin-top:36px;background:var(--white);border:1px solid var(--gray-200);border-radius:20px;box-shadow:0 18px 40px -26px rgba(35,38,42,.35),var(--shadow);text-align:left;padding:8px;transition:border-color .16s ease,box-shadow .16s ease}
.finder:focus-within{border-color:var(--focus-border,#F7B59F);box-shadow:0 0 0 4px var(--focus-ring,#FBD9CE),0 18px 40px -26px rgba(35,38,42,.35)}
.finder-field{position:relative;display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:text}
.finder-ico{display:flex;color:var(--ink-500);flex-shrink:0}
.finder-input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:18px;line-height:28px;color:var(--ink);padding:0}
.finder-input::-webkit-search-cancel-button{display:none}
.finder-ghost{position:absolute;left:46px;right:56px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--ink-500);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.finder-ghost b{font-weight:600;color:var(--ink-600)}
.finder.has-value .finder-ghost,.finder:focus-within .finder-ghost{display:none}
.caret{display:inline-block;width:1.5px;height:18px;background:var(--ink-400);vertical-align:-3px;margin-left:2px;animation:caret 1s steps(1) infinite}
.finder-kbd{font-family:var(--mono);font-size:12px;color:var(--ink-500);border:1px solid var(--gray-200);border-radius:6px;padding:2px 7px;flex-shrink:0}
.finder-list{display:flex;flex-direction:column;gap:2px}
.finder-list:empty{display:none}
.finder-opt{display:flex;align-items:center;gap:14px;min-height:48px;padding:8px 14px;border-radius:12px;color:var(--ink)}
.finder-opt:hover,.finder-opt:focus-visible{background:var(--orange-100);color:var(--ink);outline:none}
.finder-opt img{height:20px;width:auto;max-width:110px;object-fit:contain}
.finder-opt-name{font-weight:600;font-size:15px;min-width:110px}
.finder-opt-cat{flex:1;font-size:14px;color:var(--ink-600)}
.finder-opt svg{color:var(--ink-500)}
.finder-all{justify-content:center;font-size:14px;font-weight:600;color:var(--ink-600)}
.finder-none{padding:12px 14px;font-size:14px;color:var(--ink-600)}
.hchips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:20px;max-width:900px}
.hchip{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--gray-200);background:var(--white);font-size:14px;font-weight:500;color:var(--ink-600);transition:border-color .16s ease,color .16s ease,transform .16s ease}
.hchip:hover{border-color:var(--gray-300);color:var(--ink);transform:translateY(-1px)}

/* marquee */
.mq-sec{position:relative;padding:32px 0 8px;display:flex;flex-direction:column;gap:16px;overflow:hidden}
.mq{overflow:hidden}
.mq-track{display:flex;gap:16px;width:max-content;animation:marq 60s linear infinite;will-change:transform}
.mq-track.rev{animation-direction:reverse;animation-duration:70s}
.mq-sec:hover .mq-track{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq-tile{width:168px;height:72px;display:flex;align-items:center;justify-content:center;background:var(--white);border:1px solid var(--gray-200);border-radius:var(--r-input);box-shadow:var(--shadow);flex-shrink:0}
.mq-tile img{height:26px;width:auto;max-width:124px;object-fit:contain}
.mq-fade{position:absolute;top:0;bottom:0;width:180px;pointer-events:none;z-index:1}
.mq-fade-l{left:0;background:linear-gradient(90deg,var(--paper),rgba(247,245,241,0))}
.mq-fade-r{right:0;background:linear-gradient(270deg,var(--paper),rgba(247,245,241,0))}

/* catalog */
.cat-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:24px}
.cat-head .h2{margin:0 0 8px}
.cat-search{display:flex;align-items:center;gap:10px;width:340px;min-height:48px;padding:0 14px;background:var(--white);border:1px solid var(--gray-300);border-radius:var(--r-input);cursor:text}
.cat-search:focus-within{border-color:var(--focus-border,#F7B59F);box-shadow:0 0 0 4px var(--focus-ring,#FBD9CE)}
.cat-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:15px;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--gray-200);background:var(--white);font-size:14px;font-weight:500;color:var(--ink-600);transition:background .16s ease,color .16s ease,border-color .16s ease}
.chip:hover{border-color:var(--gray-300);color:var(--ink)}
.chip.is-on{background:var(--ink);border-color:var(--ink);color:var(--white)}
.chip-n{font-family:var(--mono);font-size:12px;opacity:.7}
.cat-count{margin:20px 0 16px;font-size:14px;color:var(--ink-600)}
.int-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.int-card{display:flex;flex-direction:column;gap:14px;padding:22px;min-height:188px;background:var(--white);border:1px solid var(--gray-200);border-radius:var(--r-card);box-shadow:var(--shadow);color:var(--ink);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.int-card:hover{color:var(--ink);transform:translateY(-3px);border-color:var(--gray-300);box-shadow:0 14px 30px -20px rgba(35,38,42,.35)}
.int-card.rv:not(.in){transform:translateY(26px)}
.int-card[data-more]:not(.is-shown),.int-card.is-out{display:none}
.int-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:34px}
.int-brand{display:flex;align-items:center;gap:10px;min-width:0}
.int-logo{height:26px;width:auto;max-width:150px;flex-shrink:0;object-fit:contain;object-position:left center}
.int-mono{width:32px;height:32px;border-radius:9px;background:var(--orange-100);color:var(--orange-ink);font-weight:700;font-size:16px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.int-mono-mcp img{width:20px;height:20px}
.int-name{font-weight:600;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.int-tag{font-size:12px;font-weight:500;color:var(--ink-600);background:var(--gray-100);border-radius:var(--r-pill);padding:4px 10px;white-space:nowrap;flex-shrink:0}
.int-desc{flex:1;font-size:15px;line-height:23px;color:var(--ink-600)}
.int-go{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600}
.int-card:hover .int-go{color:var(--orange-ink)}
.cat-empty{text-align:center;padding:48px 0 8px}
.cat-empty-h{font-size:20px;font-weight:600;margin:0 0 8px}
.cat-more{display:flex;justify-content:center;margin-top:32px}
.anysite{margin:28px 0 0;text-align:center;font-size:15px;color:var(--ink-600)}

/* flow */
.flow{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.flow-line{position:absolute;left:8%;right:8%;top:38px;width:84%;height:8px;z-index:0;overflow:visible}
.flow-line path{stroke:var(--orange-200);stroke-width:2;stroke-dasharray:6 8;fill:none;animation:flow 1.4s linear infinite}
.flow-step{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px;padding:28px;background:var(--paper);border:1px solid var(--gray-200);border-radius:var(--r-card)}
.flow-n{font-family:var(--mono);font-size:13px;color:var(--orange-ink);background:var(--white);border:1px solid var(--orange-200);border-radius:var(--r-pill);padding:4px 10px;align-self:flex-start}
.flow-h{font-size:19px;line-height:26px;font-weight:600;margin:4px 0 0}
.flow-p{font-size:15px;line-height:24px;color:var(--ink-600);margin:0}

/* deep */
.deep{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.deep-card{display:flex;flex-direction:column;gap:20px;padding:36px;background:var(--white);border:1px solid var(--gray-200);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.deep-logo{height:34px;width:auto;align-self:flex-start;max-width:180px}
.deep-h{font-size:24px;line-height:32px;font-weight:700;letter-spacing:-.01em;margin:0}
.deep-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.deep-list li{display:flex;gap:10px;font-size:15px;line-height:24px;color:var(--ink-600)}
.deep-list svg{flex-shrink:0;margin-top:3px}
.deep-cta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto}

/* mcp band */
.mcp{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center;padding:64px;background:var(--dark);border-radius:24px}
.mcp-mist{left:0;right:0;bottom:-30px;width:100%;opacity:.12}
.mcp-copy,.mcp-side{position:relative;z-index:1;min-width:0}
.eyebrow-dark{color:var(--orange)}
.on-dark{color:var(--white);margin:14px 0 16px}
.on-dark-lead{color:var(--ink-400)}
.btn-dark{background:transparent;color:var(--white);border:1px solid var(--dark-border)}
.btn-dark:hover{color:var(--white);border-color:#5A5F66}
.mcp-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mcp-client{display:flex;align-items:center;gap:12px;min-height:60px;padding:0 18px;background:#2E3237;border:1px solid var(--dark-border);border-radius:var(--r-input);color:var(--white);font-weight:600;font-size:16px;transition:transform .16s ease,border-color .16s ease}
.mcp-client:hover{color:var(--white);border-color:#5A5F66;transform:translateY(-2px)}
.mcp-client img{width:30px;height:30px;padding:4px;background:var(--white);border-radius:8px;flex-shrink:0}
.mcp-url{grid-column:span 2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 18px;background:var(--dark-panel);border:1px solid var(--dark-border);border-radius:var(--r-input)}
.mcp-url code{font-family:var(--mono);font-size:14px;color:#F7B59F;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcp-copy-btn{min-height:40px;padding:0 14px;border-radius:var(--r-btn);border:1px solid var(--dark-border);background:#2E3237;color:var(--white);font-size:14px;font-weight:600}
.mcp-copy-btn:hover{border-color:#5A5F66}

/* developers */
.dev-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.dev-card{display:flex;flex-direction:column;gap:10px;padding:24px;background:var(--paper);border:1px solid var(--gray-200);border-radius:var(--r-card);color:var(--ink);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .16s ease,border-color .16s ease}
.dev-card:hover{color:var(--ink);border-color:var(--gray-300);transform:translateY(-3px)}
.dev-card.rv:not(.in){transform:translateY(26px)}
.dev-tag{font-family:var(--mono);font-size:12px;color:var(--ink-600);background:var(--white);border:1px solid var(--gray-200);border-radius:6px;padding:3px 8px;align-self:flex-start}
.dev-h{font-size:18px;font-weight:600}
.dev-p{font-size:15px;line-height:24px;color:var(--ink-600)}

/* responsive */
@media (max-width:1100px){.int-grid,.dev-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.mcp{grid-template-columns:minmax(0,1fr);gap:36px}}
@media (max-width:860px){.int-grid,.dev-grid,.deep{grid-template-columns:repeat(2,minmax(0,1fr))}.flow{grid-template-columns:1fr}.flow-line{display:none}.cat-head{flex-direction:column;align-items:stretch}.cat-search{width:100%}.hero-enso{display:none}}
@media (max-width:640px){
  .hero{padding:40px 0 24px}
  .hero-bamboo{width:160px;right:-40px;opacity:.45}
  .finder-ghost,.finder-input{font-size:16px}
  .finder-kbd{display:none}
  .finder-ghost{right:14px}
  .finder-opt-cat{display:none}
  .hchips{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;width:100%;padding-bottom:4px;scrollbar-width:none}
  .hchips::-webkit-scrollbar{display:none}
  .hchip{flex-shrink:0}
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex-shrink:0}
  .int-grid,.dev-grid,.deep{grid-template-columns:1fr}
  .int-card{min-height:0}
  .mq-tile{width:132px;height:60px}
  .mq-fade{width:48px}
  .deep-card{padding:24px}
  .deep-h{font-size:20px;line-height:28px}
  .mcp{padding:32px 22px;border-radius:20px}
  .mcp-side{grid-template-columns:minmax(0,1fr)}
  .mcp-url{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .mq-track,.hero-bamboo,.hero-enso,.flow-line path,.caret,.motif-enso,.cta-monk{animation:none}
  .int-card.rv:not(.in),.dev-card.rv:not(.in){transform:none}
}
[hidden]{display:none!important}