/*
 * Integrations (/integrations/ and /integrations/{slug}/) - loaded alongside
 * style.css on those pages only.
 *
 * Same approach as track.css, trust.css and videos.css: semantic markup, BEM-ish
 * .tzi__* classes, tokens scoped to the .tzi root, values taken from the site
 * palette so these read as standard Traizr pages without pulling in Elementor's
 * hash-ID CSS.
 *
 * NOTE 1: --tzi-primary is #1C6BA6, not #2582C5. style.css declares
 * .elementor-kit-7 twice and the later block overrides primary. Inline SVG icons
 * hard-code stroke #2582C5, so icon blue and button blue genuinely differ here.
 *
 * NOTE 2: the font-family below is currently inert - the tail of style.css forces
 * a system stack with `body,body *{...!important}`. Kept so these pages follow the
 * rest of the site if that temporary block is reverted.
 *
 * NOTE 3: every colour rule that lands on an <a> is written `.tzi .tzi__x`, not
 * `.tzi__x`. style.css has `.elementor-kit-7 a{color:var(--e-global-color-secondary)}`
 * and the body carries elementor-kit-7 - one class plus one element beats one
 * class, so a single-class rule loses and the label comes out the site's link
 * blue. Two classes wins. Do not "tidy" the .tzi prefix away.
 */

.tzi{
  --tzi-primary:#1C6BA6;
  --tzi-primary-dark:#155884;
  --tzi-secondary:#70B2E2;
  --tzi-btn-ink:#0D2B45;
  --tzi-icon:#2582C5;
  --tzi-navy:#185B8D;
  --tzi-ink:#0F2C43;
  --tzi-text:#40596B;
  --tzi-muted:#616F7D;
  --tzi-border:#DCE9F6;
  --tzi-border-strong:#AED4F0;
  --tzi-wash:#F0F5FF;
  --tzi-radius:50px;
  --tzi-radius-sm:18px;
  --tzi-shadow:0 0 10px 0 rgba(0,0,0,.1);
  --tzi-shadow-soft:0 0 10px 0 rgba(0,0,0,.05);
  font-family:"Inter Tight","Inter",system-ui,sans-serif;
  color:var(--tzi-text);
}
.tzi *,.tzi *::before,.tzi *::after{box-sizing:border-box}
@media(max-width:767px){.tzi{--tzi-radius-sm:14px}}

.tzi__wrap{max-width:1140px;margin:0 auto;padding:0 20px}
.tzi__wrap--narrow{max-width:900px}

/* ---------- Sections ---------- */
.tzi__section{padding:60px 0;background:#fff}
.tzi__section--wash{background:var(--tzi-wash)}
.tzi__section--tight{padding:38px 0}
@media(max-width:767px){
  .tzi__section{padding:42px 0}
  .tzi__section--tight{padding:28px 0}
}

.tzi__head{text-align:center;max-width:780px;margin:0 auto 34px}
.tzi__head--left{text-align:left;margin-left:0}
.tzi__eyebrow{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tzi-primary);background:#FBFCFF;
  border:.5px solid var(--tzi-primary);border-radius:var(--tzi-radius);padding:8px 22px;
  margin:0 0 18px;box-shadow:var(--tzi-shadow-soft)}
/* h2/h3 reset: style.css sets its own sizes plus h2{padding-top:20px} */
.tzi h2{font-size:clamp(26px,3.6vw,38px);font-weight:700;line-height:1.2;
  color:var(--tzi-navy);margin:0 0 12px;padding-top:0}
.tzi h3{font-size:19px;font-weight:600;line-height:1.3;color:var(--tzi-navy);margin:0 0 8px}
.tzi__lede{font-size:18px;line-height:1.65;color:var(--tzi-muted);margin:0}
.tzi__prose{font-size:16px;line-height:1.75;color:var(--tzi-text);max-width:760px}
.tzi__prose p{margin:0 0 14px}
.tzi__prose p:last-child{margin-bottom:0}
.tzi .tzi__prose a{color:var(--tzi-primary);text-decoration:underline}
.tzi .tzi__prose a:hover{color:var(--tzi-primary-dark);text-decoration:none}
@media(max-width:767px){.tzi__lede{font-size:16px}}

/* ---------- Breadcrumb ---------- */
.tzi__crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:0;padding:0;font-size:13px;color:var(--tzi-muted)}
.tzi__crumbs li{display:flex;align-items:center;gap:8px}
.tzi__crumbs li+li::before{content:"/";color:#9DB3C4}
.tzi .tzi__crumbs a{color:var(--tzi-muted);text-decoration:none}
.tzi .tzi__crumbs a:hover{color:var(--tzi-primary);text-decoration:underline}
.tzi__crumbs [aria-current]{color:var(--tzi-navy);font-weight:500}

/* ---------- Hero ---------- */
/* Top padding clears the header, which floats over the top of the page. */
.tzi__hero{background:linear-gradient(180deg,var(--tzi-wash) 0%,#fff 100%);
  padding:clamp(132px,12vw,180px) 0 10px}
.tzi__hero--center{text-align:center}
.tzi__hero h1{font-size:clamp(27px,4.2vw,43px);font-weight:700;line-height:1.15;
  color:var(--tzi-navy);margin:0 0 14px}
.tzi__hero .tzi__lede{max-width:740px}
.tzi__hero--center .tzi__lede{margin-left:auto;margin-right:auto}
.tzi__hero-top{padding-bottom:22px}
@media(max-width:767px){.tzi__hero{padding-top:112px}}
/* connector hero: monogram tile beside the heading */
.tzi__hero-id{display:flex;align-items:center;gap:18px;margin:0 0 16px}

.tzi__hero-meta{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tzi-icon);margin:0 0 4px}
@media(max-width:600px){
  .tzi__hero-id{gap:14px}
  .tzi__mono--lg{width:52px;height:52px;font-size:14px;border-radius:13px}
  .tzi__mono--lg.tzi__mono--logo{padding:7px}
}

/* ---------- Monogram tile ----------
 * We hold no vendor logos, and using third-party logos as decoration is a
 * trademark question we do not need to open. A lettermark in the site's own
 * palette is honest, consistent and needs no image request.
 */
.tzi__mono{flex:none;display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:14px;
  background:linear-gradient(155deg,#EAF3FC 0%,#D8E9F8 100%);
  border:1px solid #D2E5F6;color:var(--tzi-primary);
  font-size:15px;font-weight:700;letter-spacing:.02em}
/* Logo variant: white plate, because most vendor marks assume a light
   background and several ship with a solid colour block of their own. The tile
   keeps the same footprint as the lettermark so a grid mixing the two still
   lines up. object-fit:contain never crops a mark. */
.tzi__mono--logo{background:#fff;border-color:var(--tzi-border);padding:7px;overflow:hidden}
.tzi__mono--logo img{display:block;width:100%;height:100%;object-fit:contain}
.tzi__mono--lg{width:64px;height:64px;border-radius:16px;font-size:17px}
.tzi__mono--lg.tzi__mono--logo{padding:9px}
/* roadmap tiles are muted along with the rest of the card */
.tzi__card--soon .tzi__mono--logo{background:#FBFDFF;border-color:#E2EAF3}
.tzi__card--soon .tzi__mono--logo img{opacity:.62;filter:saturate(.75)}

/* ---------- Icon chip ---------- */
.tzi__ico{flex:none;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:14px;background:var(--tzi-wash);
  border:1px solid #E3EEFA;color:var(--tzi-icon)}
.tzi__ico svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.tzi__ico--sm{width:36px;height:36px;border-radius:11px}
.tzi__ico--sm svg{width:18px;height:18px}

/* ---------- Status pill ---------- */
.tzi__pill{display:inline-flex;align-items:center;gap:6px;border-radius:var(--tzi-radius);
  padding:5px 13px;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.tzi__pill svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.tzi__pill--live{background:#E8F6EE;border:1px solid #BFE4D0;color:#1E7A47}
.tzi__pill--roadmap{background:#FFF4E3;border:1px solid #F3DDBA;color:#8A5B14}

/* ---------- Connector grid ---------- */
.tzi__grid{list-style:none;margin:0;padding:0;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
@media(max-width:560px){.tzi__grid{grid-template-columns:1fr}}
.tzi .tzi__card{display:flex;gap:16px;align-items:flex-start;height:100%;
  background:#fff;border:1px solid var(--tzi-border);border-radius:var(--tzi-radius-sm);
  padding:20px 22px;text-decoration:none;color:var(--tzi-text);
  box-shadow:var(--tzi-shadow-soft);transition:border-color .15s,box-shadow .15s,color .15s}
.tzi .tzi__card:hover,.tzi .tzi__card:focus{border-color:var(--tzi-border-strong);
  box-shadow:var(--tzi-shadow);text-decoration:none;color:var(--tzi-text)}
.tzi .tzi__card:focus-visible{outline:3px solid var(--tzi-icon);outline-offset:2px}
.tzi__card h3{margin:0 0 5px;font-size:16.5px}
.tzi__card p{margin:0;font-size:14px;line-height:1.6;color:var(--tzi-muted)}
.tzi__card-more{display:inline-block;margin-top:9px;font-size:13.5px;font-weight:600;
  color:var(--tzi-primary)}
/* roadmap cards are not links - they must not look clickable */
.tzi__card--soon{background:#FBFDFF;border-style:dashed}
.tzi__card--soon .tzi__mono{background:#F2F6FB;border-color:#E2EAF3;color:#7E93A6}
/* not a link - navy heading would read as one next to the real cards */
.tzi__card--soon h3{color:#5A6E80}

/* ---------- Category group heading ---------- */
.tzi__group{display:flex;align-items:center;gap:14px;margin:0 0 20px}
.tzi__group h2{margin:0;font-size:clamp(21px,2.4vw,26px)}
.tzi__group-count{margin-left:auto;font-size:13px;color:var(--tzi-muted);white-space:nowrap}

/* ---------- Fact list (what syncs) ---------- */
.tzi__facts{list-style:none;margin:0;padding:0;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.tzi__facts li{display:flex;gap:16px;align-items:flex-start;background:#fff;
  border:1px solid var(--tzi-border);border-radius:var(--tzi-radius-sm);
  padding:22px 24px;box-shadow:var(--tzi-shadow-soft)}
.tzi__facts h3{margin:0 0 5px;font-size:16.5px}
.tzi__facts p{margin:0;font-size:14.5px;line-height:1.65;color:var(--tzi-muted)}
@media(max-width:767px){.tzi__facts li{padding:18px 18px;gap:14px}}

/* ---------- Numbered workflow ---------- */
.tzi__steps{list-style:none;margin:0;padding:0;counter-reset:tzistep;display:grid;gap:14px}
.tzi__steps li{counter-increment:tzistep;display:flex;gap:18px;align-items:flex-start;
  background:#fff;border:1px solid var(--tzi-border);border-radius:var(--tzi-radius-sm);
  padding:20px 24px;box-shadow:var(--tzi-shadow-soft)}
.tzi__steps li::before{content:counter(tzistep);flex:none;width:38px;height:38px;border-radius:50%;
  background:var(--tzi-primary);color:#fff;font-size:15px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.tzi__steps h3{margin:0 0 5px;font-size:16.5px}
.tzi__steps p{margin:0;font-size:14.5px;line-height:1.65;color:var(--tzi-muted)}

/* ---------- Screenshot figure ---------- */
.tzi__shot{margin:0}
.tzi__shot-frame{background:linear-gradient(158deg,#F5F9FF 0%,#E4EFFA 100%);
  border:1px solid #E3EEFA;border-radius:var(--tzi-radius-sm);padding:clamp(10px,1.4vw,16px)}
.tzi__shot-frame img{display:block;width:100%;height:auto;border-radius:10px;
  box-shadow:0 10px 30px rgba(15,44,67,.13)}
.tzi__shot figcaption{margin:12px 2px 0;font-size:13.5px;line-height:1.6;color:var(--tzi-muted)}
.tzi__shots{display:grid;gap:26px;align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}

/* ---------- Callout ---------- */
.tzi__callout{display:flex;gap:18px;align-items:flex-start;background:var(--tzi-wash);
  border:1px solid #E3EEFA;border-left:4px solid var(--tzi-primary);
  border-radius:var(--tzi-radius-sm);padding:22px 24px;margin:26px 0}
.tzi__callout p{margin:0;font-size:16px;line-height:1.7;color:var(--tzi-ink)}
.tzi__callout .tzi__ico{background:#fff}

/* ---------- FAQ disclosures ---------- */
.tzi__disclosure{border:1px solid var(--tzi-border);border-radius:var(--tzi-radius-sm);
  background:#fff;padding:2px 22px;margin:0 0 10px;box-shadow:var(--tzi-shadow-soft)}
.tzi__disclosure summary{cursor:pointer;list-style:none;padding:16px 0;
  font-size:16px;font-weight:600;color:var(--tzi-navy);display:flex;align-items:center;gap:12px}
.tzi__disclosure summary::-webkit-details-marker{display:none}
.tzi__disclosure summary::after{content:"";flex:none;width:9px;height:9px;margin-left:auto;
  margin-right:4px;border-right:2px solid var(--tzi-primary);border-bottom:2px solid var(--tzi-primary);
  transform:rotate(45deg)}
.tzi__disclosure[open] summary::after{transform:rotate(-135deg)}
.tzi__disclosure summary:focus-visible{outline:3px solid var(--tzi-icon);outline-offset:2px}
.tzi__disclosure-body{padding:0 0 18px;font-size:15px;line-height:1.8;color:var(--tzi-text)}
.tzi__disclosure-body p{margin:0 0 12px}
.tzi__disclosure-body p:last-child{margin-bottom:0}
.tzi .tzi__disclosure-body a{color:var(--tzi-primary);text-decoration:underline}

/* ---------- Buttons ---------- */
.tzi__btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:inherit;font-size:15px;font-weight:600;line-height:1;text-align:center;
  text-decoration:none;border-radius:var(--tzi-radius);border:1px solid transparent;
  padding:15px 30px;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.tzi .tzi__btn--primary{background:var(--tzi-primary);border-color:var(--tzi-primary);color:#fff}
.tzi .tzi__btn--primary:hover,.tzi .tzi__btn--primary:focus{background:var(--tzi-primary-dark);
  border-color:var(--tzi-primary-dark);color:#fff;text-decoration:none}
.tzi .tzi__btn--secondary{background:var(--tzi-secondary);border-color:var(--tzi-secondary);color:var(--tzi-btn-ink)}
.tzi .tzi__btn--secondary:hover,.tzi .tzi__btn--secondary:focus{background:#5FA4D6;border-color:#5FA4D6;
  color:var(--tzi-btn-ink);text-decoration:none}
.tzi .tzi__btn--ghost{background:transparent;border-color:#fff;color:#fff}
.tzi .tzi__btn--ghost:hover,.tzi .tzi__btn--ghost:focus{background:#fff;color:var(--tzi-navy);text-decoration:none}
.tzi__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.tzi__actions--center{justify-content:center}

/* ---------- Closing CTA band ---------- */
.tzi__cta{position:relative;overflow:hidden;background:var(--tzi-navy);
  color:#DCEEFA;text-align:center;padding:96px 0 84px}
.tzi__cta h2{color:#fff}
.tzi__cta .tzi__lede{color:#C9DCEC}
@media(max-width:767px){.tzi__cta{padding:74px 0 62px}}


/* ============================================================================
 * Site furniture: the blocks the rest of traizr.com uses.
 * Added so these pages read as part of the site rather than a bolt-on section.
 * ==========================================================================*/

/* ---------- Hero: dotted world-map overlay ----------
 * The home page hero signature, also used on /trust/. 3% opacity, sits under
 * the content, pointer-events off so it never intercepts a click.
 */
.tzi__hero{position:relative;overflow:hidden}
.tzi__hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.03;
  background-image:url(/assets/images/2026/04/dotted-word-map.webp);
  background-position:center center;background-repeat:no-repeat;background-size:contain}
.tzi__hero > *{position:relative;z-index:1}

/* ---------- Hero chip row ----------
 * Mirrors the Cloud Based / GDPR Compliant / iOS & Android chips under the
 * home page hero.
 */
.tzi__chips{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0;padding:0}
.tzi__hero--center .tzi__chips{justify-content:center}
.tzi__chips li{display:flex;align-items:center;gap:10px;background:#fff;
  border:1px solid var(--tzi-border-strong);border-radius:14px;padding:11px 18px 11px 12px;
  font-size:14px;font-weight:600;color:var(--tzi-navy);box-shadow:var(--tzi-shadow-soft)}
.tzi__chips .tzi__ico{width:32px;height:32px;border-radius:9px}
.tzi__chips .tzi__ico svg{width:17px;height:17px}
@media(max-width:600px){.tzi__chips li{font-size:13px;padding:9px 14px 9px 10px}}

/* ---------- Wave dividers ----------
 * Uses the site's own .elementor-shape markup so the curve is literally the
 * same shape as the home page, not a lookalike. style.css positions the shape
 * but sets no height and defaults the fill to #fff, so both are set here, and
 * each fill MUST match the background of the ADJACENT section or the wave
 * renders as a white seam.
 */
.tzi__section,.tzi__cta{position:relative}
.tzi__section > .elementor-shape svg,.tzi__cta > .elementor-shape svg{height:50px}
@media(max-width:767px){
  .tzi__section > .elementor-shape svg,.tzi__cta > .elementor-shape svg{height:30px}
}
.tzi__shape--from-white  > .elementor-shape-top .elementor-shape-fill{fill:#FFFFFF}
.tzi__shape--from-wash   > .elementor-shape-top .elementor-shape-fill{fill:#F0F5FF}
.tzi__shape--to-white    > .elementor-shape-bottom .elementor-shape-fill{fill:#FFFFFF}
.tzi__shape--to-wash     > .elementor-shape-bottom .elementor-shape-fill{fill:#F0F5FF}
/* the navy band needs room for a wave top and bottom */
.tzi__section--navy{background:var(--tzi-navy);color:#DCEEFA;padding:104px 0}
.tzi__section--navy h2{color:#fff}
.tzi__section--navy h3{color:#fff}
.tzi__section--navy .tzi__lede{color:#C9DCEC}
.tzi__section--navy .tzi__ico{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff}
.tzi__section--navy .tzi__facts li{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);
  box-shadow:none}
.tzi__section--navy .tzi__facts p{color:#C4D8EA}
/* group heading furniture sits directly on navy, so it needs its own colours */
.tzi__section--navy .tzi__group-count{color:#A8C4DC}
.tzi__section--navy .tzi__eyebrow{color:#fff;background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.45);box-shadow:none}
/* cards stay white on the navy band - the home page dark-section pattern */
.tzi__section--navy .tzi__card h3{color:var(--tzi-navy)}
@media(max-width:767px){.tzi__section--navy{padding:80px 0}}

/* ---------- Stat strip ---------- */
.tzi__stats{list-style:none;margin:0;padding:0;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.tzi__stats li{text-align:center;background:#fff;border:1px solid var(--tzi-border);
  border-radius:var(--tzi-radius-sm);padding:24px 20px;box-shadow:var(--tzi-shadow-soft)}
.tzi__stat-n{display:block;font-size:clamp(28px,3.4vw,38px);font-weight:700;color:var(--tzi-primary);
  line-height:1.1;margin-bottom:4px}
.tzi__stat-l{display:block;font-size:14px;line-height:1.5;color:var(--tzi-muted)}

/* ---------- Motion ----------
 * Deliberately restrained. The site's performance rules kill decorative motion,
 * so this is one cheap effect: opacity + a 14px rise, transform/opacity only so
 * it stays on the compositor, triggered once by IntersectionObserver and then
 * unobserved. No scroll handlers, no layout-affecting properties.
 *
 * The no-JS and reduce-motion paths both show content immediately - nothing here
 * is required to read the page.
 */
@media (prefers-reduced-motion:no-preference){
  .tzi-js [data-tzi-rise]{opacity:0;transform:translateY(14px);
    transition:opacity .5s ease,transform .5s ease}
  .tzi-js [data-tzi-rise].is-in{opacity:1;transform:none}
  /* a short stagger reads as one movement rather than four separate ones */
  .tzi-js [data-tzi-rise].is-in:nth-child(2){transition-delay:.06s}
  .tzi-js [data-tzi-rise].is-in:nth-child(3){transition-delay:.12s}
  .tzi-js [data-tzi-rise].is-in:nth-child(4){transition-delay:.18s}
  /* cards lift slightly on hover - the only hover motion on the page */
  .tzi .tzi__card{transition:border-color .15s,box-shadow .15s,color .15s,transform .15s}
  .tzi .tzi__card:hover{transform:translateY(-2px)}
}