/* Talk to sales / Demo: self-contained RC sub-page. Base, header/nav and footer copied from integrations/ (MKT-1946). */
  :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; } }
/* ===================== Talk to sales / Demo page (MKT-1949) ===================== */
.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)}
.eyebrow{color:var(--orange)}

/* hero: pitch + "what to expect" on the left, the form on the right, spanning both rows */
.demo-hero{position:relative;overflow:hidden;padding:48px 0 120px}
.demo-grid{display:grid;grid-template-columns:minmax(0,1fr) 640px;grid-template-areas:"head form" "more form";grid-template-rows:auto 1fr;column-gap:64px;align-items:start}
.demo-head{grid-area:head;padding-top:16px}
.demo-head .h1{margin:0 0 20px}
.demo-head .lead{max-width:560px}
.demo-h1-line{white-space:nowrap}
.demo-more{grid-area:more;margin-top:40px}
.demo-form-col{grid-area:form;position:relative;padding-right:80px}

/* zen motifs; max-width:none because the base img rule would shrink them to their column */
.decor{max-width:none}
.demo-mist{left:0;top:600px;width:100%;min-width:1440px;opacity:.35}
.demo-enso{left:-206px;top:-50px;width:880px;opacity:.85}

/* what to expect */
.demo-kicker{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500);margin:0 0 14px}
.expect{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.expect-item{display:flex;gap:14px;align-items:flex-start}
.expect-ico{width:40px;height:40px;border-radius:10px;background:var(--orange-100);color:var(--orange);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.expect-txt{display:flex;flex-direction:column;gap:2px}
.expect-name{font-size:17px;font-weight:600;line-height:24px}
.expect-desc{font-size:15px;line-height:24px;color:var(--ink-600)}
.demo-logos{display:flex;align-items:center;gap:40px;margin-top:28px;opacity:.75}
.demo-logos img{width:auto}
.lg-20{height:20px}.lg-22{height:22px}.lg-24{height:24px}

/* the form card */
.demo-card{position:relative;background:var(--white);border:1px solid var(--gray-200);border-radius:var(--r-card);box-shadow:var(--shadow),0 24px 48px -32px rgba(35,38,42,.22);padding:28px}
.demo-form,.demo-next{display:flex;flex-direction:column;gap:22px}
.demo-next:focus{outline:none}
.demo-form[hidden],.demo-next[hidden]{display:none}
.demo-form-head{display:flex;flex-direction:column;gap:6px}
.demo-form-title{margin:0;font-size:24px;line-height:30px;font-weight:700;letter-spacing:-.015em}
.demo-form-sub{margin:0;font-size:15px;color:var(--ink-600)}
.demo-fields{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;border:0;min-width:0}
.field-label{padding:0;font-size:14px;font-weight:600;color:var(--ink)}
.chips-field .field-label{margin-bottom:8px}
.req{color:var(--orange)}
.field-input{height:46px;padding:0 14px;border:1px solid var(--gray-200);border-radius:var(--r-input);background:#F9FAFB;font:inherit;font-size:15px;color:var(--ink);transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}
.field-input::placeholder{color:#8F97A4}
.field-input:hover{border-color:var(--gray-300)}
.field-input:focus{outline:none;background:var(--white);border-color:#F7B59F;box-shadow:0 0 0 3px var(--orange-100)}
.demo-form.was-validated .field-input:invalid{border-color:var(--orange-ink);background:var(--white)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-opt{position:relative;min-height:40px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--gray-200);border-radius:var(--r-btn);background:var(--white);font-size:14px;font-weight:500;cursor:pointer;transition:background .14s ease,border-color .14s ease}
.chip-opt:hover{border-color:var(--gray-300)}
.chip-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.chip-check{display:none;color:var(--orange);flex-shrink:0}
.chip-opt:has(input:checked){border-color:var(--orange);background:var(--orange-100);font-weight:600;padding-left:10px}
.chip-opt:has(input:checked) .chip-check{display:block}
.chip-opt:has(input:focus-visible){outline:2px solid var(--orange);outline-offset:2px}
.demo-form.was-validated .chips-field:has(input:invalid) .chip-opt{border-color:var(--orange-ink)}
.form-error{margin:-8px 0 0;font-size:14px;color:var(--orange-ink)}
.demo-submit{width:100%;min-height:48px;box-shadow:none}

/* responsive */
@media (max-width:1100px){
  .demo-grid{grid-template-columns:minmax(0,1fr) 520px;column-gap:48px}
  .demo-form-col{padding-right:56px}
}
@media (max-width:900px){
  .demo-hero{padding:24px 0 72px}
  .demo-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "form" "more";grid-template-rows:auto}
  .demo-head{padding-top:0}
  .demo-form-col{padding-right:0;margin-top:28px;max-width:640px}
  .demo-enso{left:-50px;top:-20px;width:450px;opacity:.4}
  .demo-mist{min-width:790px;left:-200px;width:790px;top:auto;bottom:-160px}
}
@media (max-width:767px){
  .demo-head .h1{font-size:36px;line-height:42px}
  .demo-card{padding:22px 18px}
  .demo-form-title{font-size:22px;line-height:28px}
  .field-input{height:48px;font-size:16px}
  .chip-opt{min-height:44px;padding:0 12px}
  .expect-name{font-size:16px}
  .demo-logos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px;justify-items:center}
  .demo-logos .lg-20{height:18px}.demo-logos .lg-22,.demo-logos .lg-24{height:20px}
}
@media (max-width:380px){
  .demo-h1-line{white-space:normal}
}

/* the Calendly inline widget, shown in the card once the form is sent */
.demo-cal{min-width:320px;height:700px;margin:0 -12px -12px}
.demo-cal iframe{border:0}
.demo-cal[hidden],.demo-cal-fallback[hidden]{display:none}
.demo-cal-fallback{display:flex;flex-direction:column;gap:14px}
@media (max-width:767px){.demo-cal{margin:0 -8px -8px;height:1000px}}