/* ===================================================================
   MARKETING PAGES — /integrations and the three integration pages
   ===================================================================
   Self-contained on purpose. These pages do NOT load landing.css.

   WHY: landing.css and the reference design define many of the same class
   names with different meanings — .step is a 34px numbered circle in one
   and a flex row in the other, and .card, .cta, .chip, .section, .stat and
   .dot all differ too. Loading both would reproduce exactly the collision
   that collapsed the thank-you page. One stylesheet, one meaning per class.

   The header and footer rules below are copied from landing.css so the
   chrome is identical to the homepage, with the Integrations dropdown added.
   =================================================================== */

:root{
  --ink:#1E1B2E;
  --indigo:#3D52A0;
  --indigo-d:#2C3A7C;
  --muted:#5A6785;
  --yellow:#FBBF24;
  --yellow-d:#F59E0B;
  --line:#D5D8E2;
  --tint:#EEF0F9;
  --card-shadow:0 8px 28px rgba(61,82,160,.08);
}

:root{--ink:#1E1B2E;--indigo:#3D52A0;--indigo-d:#2C3A7C;--muted:#5A6785;--yellow:#FBBF24;--line:#D5D8E2;--tint:#EEF0F9;--card-shadow:0 8px 28px rgba(61,82,160,.08)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:1.6;color:var(--ink);background:linear-gradient(180deg,#EDE8F5 0%,#ADBBDA 100%);overflow-x:hidden}
a{color:var(--indigo)}
img{max-width:100%}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.02em;line-height:1.2}
p{margin:0}
.wrap{max-width:1190px;margin:0 auto;padding:0 24px}
:focus-visible{outline:3px solid var(--indigo);outline-offset:2px}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 14px;border-radius:8px;z-index:100}
.skip:focus{left:8px}

/* hero */
.breadcrumb{font-size:14px;color:var(--muted);margin:0 0 36px}
.breadcrumb a{font-weight:600;text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--indigo);margin-bottom:14px}
.hero{position:relative;padding:20px 0 88px;overflow:hidden}
.hero::before{content:"";position:absolute;top:-120px;left:-140px;width:500px;height:500px;border-radius:50%;background:rgba(61,82,160,.07);pointer-events:none}
.hero::after{content:"";position:absolute;top:140px;right:-90px;width:300px;height:300px;border-radius:50%;background:rgba(251,191,36,.10);pointer-events:none}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:flex;flex-wrap:wrap;gap:48px 64px;align-items:center}
.hero-copy{flex:1 1 480px;min-width:0}
h1{font-size:clamp(34px,4.1vw,48px);letter-spacing:-.03em;line-height:1.15}
.lead{font-size:19px;line-height:1.6;color:var(--muted);max-width:580px;margin:24px 0 28px}
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px}
.chip{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:999px;background:#fff;color:var(--indigo);font-size:14px;font-weight:700;text-decoration:none}
a.chip:hover{background:var(--tint)}
.chip.on{background:var(--indigo);color:#fff}
.textlink{display:inline-flex;align-items:center;min-height:44px;color:var(--indigo);font-weight:700;text-decoration:none;border-bottom:3px solid var(--yellow)}
.soon-note{display:block;width:fit-content;max-width:100%;margin-top:22px;background:#FEF3C7;color:#92400E;font-weight:700;font-size:15px;padding:8px 18px;border-radius:999px}

/* trial form */
.form-card{flex:1 1 400px;max-width:450px;min-width:0;background:#fff;border-radius:20px;padding:36px 40px;box-shadow:0 20px 50px rgba(61,82,160,.16)}
.form-card h2{font-size:28px;margin-bottom:8px}
.form-card .sub{font-size:15px;color:var(--muted);margin-bottom:22px}

/* sections */
.section{padding:96px 0}
.band{background:rgba(255,255,255,.72)}
.sec-head{text-align:center;max-width:760px;margin:0 auto 48px}
.sec-head h2,.h2{font-size:clamp(30px,3.4vw,40px)}
.sec-head p{margin-top:16px;font-size:18px;color:var(--muted)}
.sec-head p+p{margin-top:12px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.cards.two{max-width:860px;margin:0 auto;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.card{background:#fff;border-radius:16px;padding:28px;box-shadow:var(--card-shadow)}
.card h3{font-size:20px;line-height:1.3;margin-bottom:10px}
.card p{font-size:15.5px;color:var(--muted)}
.card .label{font-size:15px;font-weight:700;color:var(--indigo);margin-bottom:10px}
.card .big{font-size:56px;line-height:1.05;font-weight:800;letter-spacing:-.03em;margin-bottom:10px}
.card .more{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;font-weight:700;text-decoration:none}
.card .more:hover{text-decoration:underline}
.tag{display:inline-block;margin-bottom:12px;padding:3px 12px;border-radius:999px;font-size:13px;font-weight:700}
.tag-live{background:#DCFCE7;color:#166534}
.tag-soon{background:#FEF3C7;color:#92400E}

/* steps */
.steps{display:flex;flex-direction:column;gap:96px}
.step{display:flex;flex-wrap:wrap;gap:40px 64px;align-items:center}
.step.flip{flex-direction:row-reverse}
.step-copy{flex:1 1 360px;min-width:0}
.step-media{flex:1 1 440px;min-width:0}
.num{width:36px;height:36px;border-radius:50%;background:var(--indigo);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.step h3{font-size:28px;margin-bottom:12px}
.step h2{font-size:clamp(28px,3vw,36px);margin-bottom:14px}
.step p{font-size:18px;color:var(--muted)}
.legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px 24px;margin:22px 0 0;padding:0;list-style:none;font-size:15px;font-weight:600}
.legend li{display:flex;align-items:center;gap:10px}
.dot{width:14px;height:14px;border-radius:50%;flex:0 0 14px}
.fine{text-align:center;margin-top:40px;font-size:13px;color:var(--muted)}

/* product screens */
.win{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 12px 36px rgba(61,82,160,.14)}
.win-top{padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #ECEEF6}
.win-brand{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}
.win-brand img{height:24px;width:auto;display:block}
.win-user{display:flex;align-items:center;gap:10px}
.pill{background:var(--yellow);color:var(--ink);font-weight:700;font-size:13px;padding:5px 14px;border-radius:999px}
.avatar{width:30px;height:30px;border-radius:50%;background:#5B4FC4;color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.win-body{background:#E2E2F3;padding:20px;display:flex;flex-direction:column;gap:14px}
.panel{background:#fff;border-radius:14px;padding:18px 20px}
.badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:4px 10px;border-radius:6px}
.b-thread{background:#E3E8FB;color:var(--indigo)}
.b-summary{background:#F0E6FB;color:#6B3FB0}
.match{background:#FEF3C7;color:#92400E;font-size:12px;font-weight:700;padding:4px 12px;border-radius:999px}
.tagrow{display:flex;flex-wrap:wrap;gap:8px}
.t{background:#EEF0F7;color:var(--muted);font-size:12px;padding:4px 10px;border-radius:6px}
.rtitle{font-size:20px;font-weight:800;line-height:1.3;margin:10px 0 8px}
.rbody{font-size:14.5px;line-height:1.55;color:#3C4560}
.meta{font-size:13px;color:var(--muted);margin:10px 0}
.chan{padding:14px 20px;display:flex;align-items:baseline;gap:10px}
.chan strong{font-size:17px}
.chan span{font-size:13px;color:var(--muted)}
.scrim{background:#78747F;padding:22px 18px}
.dialog{background:#fff;border-radius:14px;padding:22px 24px 20px}
.dialog-title{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:600;margin-bottom:16px}
.dl{display:block;font-size:13px;font-weight:700;margin:12px 0 4px}
.di{width:100%;font:inherit;font-size:14px;min-height:40px;padding:0 12px;border:1.5px solid #B9BED0;border-radius:8px;background:#fff;color:var(--ink)}
.di.focus{border:2px solid var(--indigo)}
.preview{border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:12.5px;line-height:1.45;max-height:74px;overflow:hidden}
.helper{margin:6px 0 14px;font-size:12px;color:var(--muted)}
.dbtns{display:flex;justify-content:flex-end;gap:10px}
.dbtn{font:inherit;font-size:14px;font-weight:700;min-height:40px;padding:0 22px;border-radius:8px;border:1.5px solid #B9BED0;background:#fff;color:var(--ink)}
.dbtn.save{border:0;background:#0B7A4B;color:#fff}
.search-row{display:flex;gap:10px;margin-bottom:14px}
.search-row input{flex:1 1 auto;min-width:0;font:inherit;font-size:14px;min-height:44px;padding:0 14px;border:0;border-radius:8px;background:#fff;color:var(--ink)}
.search-row button{font:inherit;font-size:14px;font-weight:700;min-height:44px;padding:0 22px;border:0;border-radius:8px;background:var(--yellow);color:var(--ink)}
.filters{background:#fff;border-radius:10px;padding:8px 12px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px}
.f{border:1.5px solid var(--line);border-radius:999px;padding:3px 12px}
.f.on{background:var(--indigo);border-color:var(--indigo);color:#fff;font-weight:700}
.row-between{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.ghost{font:inherit;font-size:13px;font-weight:700;min-height:36px;padding:0 14px;border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--ink)}
.profile{display:flex;align-items:center;gap:18px}
.pfp{flex:0 0 64px;height:64px;border-radius:50%;background:#5B4FC4;color:#fff;font-size:28px;font-weight:700;display:flex;align-items:center;justify-content:center}
.stats{display:flex;gap:14px}
.stat{flex:1 1 0;background:#fff;border-radius:14px;padding:14px 18px;font-size:13px;color:var(--muted)}
.stat b{display:block;font-size:30px;font-weight:800;color:var(--indigo);line-height:1.2}
.ex{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line);border-radius:999px;padding:5px 12px;font-size:13px}
.ex i{width:9px;height:9px;border-radius:50%;display:block}
.ex em{font-style:normal;background:#EEF0F7;border-radius:999px;padding:0 7px;font-weight:600}
.ex.hot{border-color:#16A34A}
.exrow{display:flex;flex-wrap:wrap;gap:8px}

.mail{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 12px 36px rgba(61,82,160,.14)}
.mail-top{padding:14px 20px;border-bottom:1px solid #ECEEF6;font-weight:700;font-size:15px}
.mail-body{padding:18px 20px;font-size:14px}
.mrow{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid #ECEEF6}
.mrow b{flex:0 0 64px;color:var(--muted);font-weight:600}
.quote{margin-top:14px;padding-left:14px;border-left:3px solid var(--line);color:#3C4560;font-size:13.5px;line-height:1.55}
.b-draft{background:#FEF3C7;color:#92400E}
.b-email{background:#E3E8FB;color:var(--indigo)}
.chiprow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pub{font:inherit;font-size:14px;font-weight:700;min-height:40px;padding:0 24px;border:0;border-radius:8px;background:#0B7A4B;color:#fff}

.ticks{list-style:none;margin:20px 0 0;padding:0}
.ticks li{position:relative;padding:0 0 12px 28px;font-size:17.5px;color:var(--muted)}
.ticks li::before{content:"";position:absolute;left:0;top:10px;width:10px;height:10px;border-radius:50%;background:var(--indigo)}
.crumb-back{display:inline-flex;align-items:center;min-height:44px;font-weight:700;text-decoration:none;margin-top:6px}

/* table */
.tablewrap{overflow-x:auto;background:#fff;border-radius:16px;box-shadow:var(--card-shadow)}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:15.5px}
th,td{text-align:left;padding:16px 22px;vertical-align:top;border-bottom:1px solid #ECEEF6}
th{font-size:14px;color:var(--indigo);font-weight:700}
tr:last-child td{border-bottom:0}
td:first-child{font-weight:800}

/* faq */
.faq{max-width:860px;margin:0 auto}
.faq details{background:#fff;border-radius:16px;padding:6px 28px 22px;margin-bottom:14px;box-shadow:var(--card-shadow)}
.faq summary{min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:18px;font-weight:800;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:0 0 28px;height:28px;border-radius:50%;background:var(--tint);color:var(--indigo);display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{color:var(--muted)}

/* cta and footer */
.cta{background:linear-gradient(135deg,#3D52A0 0%,#2C3A7C 100%);color:#fff;text-align:center;padding:84px 24px}
.cta h2{font-size:clamp(32px,4vw,44px);max-width:720px;margin:0 auto 28px}
.cta .btn{min-height:60px;padding:0 40px;font-size:18px;border-radius:10px}
@media (max-width:640px){
 .section{padding:64px 0}
 .form-card{padding:28px 22px}
 .step{gap:28px}
 .steps{gap:64px}
}

/* ===================================================================
   HEADER — same markup, classes and styling as the landing page,
   plus the Integrations dropdown.
   =================================================================== */
.nav{
  padding:24px 0;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(61,82,160,.1);
  position:sticky;
  top:0;
  z-index:100;
}

.nav-content{
  max-width:1280px;
  margin:0 auto;
  padding:0 40px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}

.nav-logo{display:flex;align-items:center}
.nav-logo a{display:inline-flex;align-items:center}
.nav-logo .logo-image{height:40px;width:auto;display:block}

.nav-links{
  display:flex;
  flex-wrap:wrap;
  gap:28px;
  align-items:center;
}

.nav-link{
  color:var(--indigo);
  text-decoration:none;
  font-weight:600;
  font-size:15px;
  transition:color .3s ease;
  position:relative;
}

.nav-link::after{
  content:'';
  position:absolute;
  bottom:-4px;
  left:0;
  width:0;
  height:2px;
  background:var(--yellow);
  transition:width .3s ease;
}

.nav-link:hover{color:#7091E6}
.nav-link:hover::after{width:100%}

/* A nav link for the page you are on keeps its underline. */
.nav-link.is-current::after { width: 100%; }

/* ---- Integrations dropdown ---- */
.nav-dd{position:relative}

.nav-dd summary{
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  list-style:none;
}

.nav-dd summary::-webkit-details-marker{display:none}

.nav-caret{transition:transform .2s ease;flex:none}
.nav-dd[open] .nav-caret{transform:rotate(180deg)}

/* The current section keeps the underline on permanently. */
.nav-dd.is-current > summary::after{width:100%}

.nav-menu{
  position:absolute;
  top:calc(100% + 14px);
  left:50%;
  transform:translateX(-50%);
  min-width:236px;
  padding:8px;
  background:#fff;
  border:1px solid rgba(61,82,160,.1);
  border-radius:12px;
  box-shadow:0 14px 34px rgba(30,27,46,.16);
  z-index:110;
}

/* A hit area bridging the gap, so moving the pointer from the trigger to
   the menu does not pass over the page behind it. */
.nav-menu::before{
  content:'';
  position:absolute;
  top:-14px;
  left:0;
  right:0;
  height:14px;
}

.nav-menu a{
  display:flex;
  align-items:center;
  min-height:42px;
  padding:0 14px;
  border-radius:8px;
  color:var(--ink);
  font-size:14.5px;
  font-weight:600;
  text-decoration:none;
}

.nav-menu a:hover{background:var(--tint);color:var(--indigo)}

.nav-menu a[aria-current="page"]{
  background:var(--indigo);
  color:#fff;
}

/* ---- Yellow CTA button (landing page's .cta-button) ---- */
.cta-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--yellow);
  color:var(--ink);
  border:none;
  padding:16px 40px;
  font-size:16px;
  font-weight:700;
  font-family:inherit;
  border-radius:8px;
  cursor:pointer;
  text-decoration:none;
  box-shadow:0 4px 14px rgba(251,191,36,.4);
  transition:all .3s ease;
}

.cta-button:hover{
  background:var(--yellow-d);
  color:var(--ink);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(251,191,36,.5);
}

.cta-button.nav-cta{padding:11px 22px;font-size:15px}
.cta-button.large{padding:18px 48px;font-size:17px}

@media (prefers-reduced-motion:reduce){
  .cta-button:hover{transform:none}
}

/* ===================================================================
   FOOTER — same as the landing page
   =================================================================== */
.footer{
  background:var(--ink);
  padding:60px 0;
  color:#ADBBDA;
}

.footer-inner{
  max-width:1280px;
  margin:0 auto;
  padding:0 40px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:20px;
}

.footer-logo a{display:inline-flex;align-items:center}

.footer-logo .footer-logo-image{
  height:36px;
  width:auto;
  filter:brightness(0) invert(1);
  opacity:.9;
}

.footer-copyright{font-size:14px;color:#8697C4}
.footer-links{text-align:center}

.footer-link{
  color:#7091E6;
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  transition:color .2s;
}

.footer-link:hover{color:var(--yellow)}

/* ===================================================================
   RESPONSIVE — header and footer
   =================================================================== */
@media (max-width:860px){
  .nav-content{
    flex-direction:column;
    gap:18px;
    padding:0 24px;
  }

  .nav-links{justify-content:center;gap:20px}

  /* Centred under the trigger would overflow a narrow screen. */
  .nav-menu{
    left:auto;
    right:auto;
    transform:none;
    min-width:210px;
  }
}

@media (max-width:640px){
  .footer{padding:40px 0}
  .footer-inner{
    flex-direction:column;
    text-align:center;
    padding:0 24px;
  }
}