@font-face{font-family:Poppins;font-style:italic;font-weight:500;font-display:swap;src:url(/fonts/poppins-500i.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/poppins-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/poppins-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/poppins-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/poppins-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Obvify — rebuilt from the Squarespace 7.1 site. Sizes are taken from the
   live site at a 1440px viewport and scale with the viewport the same way
   Squarespace's fluid type does: size = (factor) * vw + 1rem. */

:root {
  --navy: #003049;          /* Squarespace "accent" */
  --red: #d62828;           /* Squarespace "darkAccent" */
  --light: #eaeaee;         /* Squarespace "lightAccent" */
  --white: #fff;
  --gutter: 2vw;
  --gap: 11px;
  --pad: 3.3vw;             /* section top/bottom padding */
  --dh: 6vw;                /* section divider height */
  --fs-h1: calc(3.5vw + 1rem);
  --fs-h2: calc(2.1vw + 1rem);
  --fs-h3: calc(1.4vw + 1rem);
  --fs-h4: calc(0.7vw + 1rem);
  --fs-lg: calc(0.583vw + 1rem);
  --fs-p: calc(0.233vw + 1rem);
  --fs-sm: 1rem;
  --fs-item: calc(1.05vw + 1rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: var(--fs-p);
  line-height: 1.8;
  color: var(--navy);
  background: var(--white);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { font-weight: 600; margin: 0 0 .5em; letter-spacing: normal; }
h1 { font-size: var(--fs-h1); line-height: 1.232; }
h2 { font-size: var(--fs-h2); line-height: 1.3; }
h3 { font-size: var(--fs-h3); line-height: 1.333; }
h4 { font-size: var(--fs-h4); line-height: 1.366; }
p { margin: 0 0 1em; }
p:last-child, h1:last-child, h2:last-child, h3:last-child, h4:last-child { margin-bottom: 0; }
strong { font-weight: 700; }
ul { margin: 0 0 1em; padding-left: 1.2em; }
li p { margin: 0 0 .5em; }
blockquote { margin: 0; }
.lg, .lg p { font-size: var(--fs-lg); line-height: 1.8; }
.sm, .sm p, .sm li { font-size: var(--fs-sm); line-height: 1.8; }
.center { text-align: center; }
.red { color: var(--red); }
.black { color: #000; }
.white, .white h1, .white h2, .white h3, .white h4 { color: var(--white); }

/* Squarespace "wave" text highlight: a hand-drawn underline on each line */
.wave {
  --wave: var(--navy);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 10'%3E%3Cpath d='M0 8.6c6.5 0 6.5-7.2 13-7.2s6.5 7.2 13 7.2' fill='none' stroke='%23003049' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 100% / .5em .19em;
  padding-bottom: .12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Squarespace "scribble" highlight used on the product page titles */
.scribble {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 577 20' preserveAspectRatio='none'%3E%3Cpath d='M 0,9.12 c 43.275,-0.333 201.95,-2.442 288.5,-2.22 c 86.55,0.222 279.845,3.7 288.5,3.7 c 8.655,0 -152.905,-4.255 -230.8,-3.7 c -77.895,0.555 -279.845,6.512 -288.5,7.4 c -8.655,0.888 170.215,-1.48 230.8,-1.48 c 60.585,0 173.1,0.703 173.1,1.48 c 0,0.777 -129.825,3.145 -173.1,3.7 c -43.275,0.555 -98.09,0 -115.4,0' fill='none' stroke='%23d62828' stroke-width='5.2' stroke-linecap='square' stroke-linejoin='bevel'/%3E%3C/svg%3E") no-repeat 0 100% / 100% .385em;
  padding-bottom: .16em;
}

/* ---------- header / footer ---------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  height: 73px; padding: 0 var(--gutter);
  background: var(--white);
  border-bottom: 2px solid var(--navy);
  position: relative; z-index: 10;
}
.site-header .logo img { width: 172px; height: auto; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 221px; min-height: 70px; padding: 0 21px;
  border-radius: 300px; background: var(--navy); color: var(--white);
  font-size: var(--fs-sm); font-weight: 500; line-height: 1.2; text-decoration: none;
  transition: opacity .2s;
}
.btn:hover { opacity: .85; }
.btn-sm { min-width: 0; min-height: 0; padding: 11.4px 19px; font-size: 14.27px; }
.site-footer { padding: 14px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.site-footer img { width: 221px; }

/* ---------- sections ---------- */
section.s { position: relative; padding: var(--pad) var(--gutter); background: var(--bg, var(--white)); }
section.s.s-grid { background-color: var(--light); background-image: linear-gradient(rgba(234,234,238,.15), rgba(234,234,238,.15)), url(/img/grid-bg.webp); background-size: cover; background-position: center; }
section.s.s-light { --bg: var(--light); }
section.s.s-navy { --bg: var(--navy); color: var(--white); }
.s-navy h1, .s-navy h2, .s-navy h3, .s-navy h4 { color: var(--white); }
.s-line { border-bottom: 6px solid var(--navy); }

/* Section dividers. The section's background is clipped along the divider
   line; the next section slides up underneath so its background shows
   through, exactly like Squarespace's divider sections. */
.dw { position: relative; z-index: 2; margin-bottom: calc(-1 * var(--dh)); }
.dw > section.s { clip-path: var(--clip); padding-bottom: calc(var(--pad) + var(--dh)); }
.dw > svg.div-stroke { position: absolute; left: 0; bottom: 0; width: 100%; height: var(--dh); overflow: visible; pointer-events: none; }
.dw:last-child { margin-bottom: 0; }
.dw + section.s, .dw + .dw > section.s { padding-top: calc(var(--pad) + var(--dh)); }

/* 24-column grid matching Squarespace's fluid engine */
.fe { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 2.2vw; align-items: start; }
.fe > * { grid-column: var(--c, 1 / -1); }
.mid { align-self: center; }

/* ---------- diagrams and icons ---------- */
.diagram { width: 100%; height: auto; display: block; }
.ic { width: 48px; height: 48px; flex: none; }
.ic-lg { width: 56px; height: 56px; color: var(--red); margin-bottom: .6rem; }
.rule { border: 0; border-top: 2px solid var(--navy); margin: 0 0 1rem; opacity: .9; }

/* ---------- home ---------- */
.hero { min-height: calc(780px - 73px); }
.layers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4vw; }
.layers h4 { margin-bottom: .6em; }
.uses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2vw; margin-top: 2.5vw; }
.use { display: flex; flex-direction: column; background: var(--navy); color: var(--white); padding: 2vw 1.8vw 2.2vw; text-decoration: none; border-radius: 4px; transition: transform .2s; }
.use:hover { transform: translateY(-4px); }
.use .ic-lg { color: var(--white); }
.use h3 { font-size: var(--fs-item); line-height: 1.3; color: var(--white); margin-bottom: .4em; }
.use p { font-size: var(--fs-sm); flex: 1; }
.use .more { color: var(--white); align-self: flex-start; }
.diy h2 { margin-bottom: .7em; }
.diy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4vw 4vw; }
.diy-grid > div { border-top: 4px solid var(--red); padding-top: 1.2rem; }
.diy-grid h4 { margin-bottom: .4em; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3vw; }
.steps li { display: flex; gap: 1.2rem; align-items: flex-start; }
.steps .n { flex: none; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--red); color: var(--white); display: grid; place-items: center; font-weight: 700; font-size: var(--fs-h4); }
.steps h4 { margin-bottom: .2em; }
.more { display: inline-block; margin-top: 1.2em; font-size: var(--fs-sm); text-decoration: none; border-bottom: 1px solid currentColor; line-height: 1.6; }

/* ---------- use-case pages ---------- */
.p-hero { text-align: center; padding-top: 2vw; }
.p-hero h1 { margin-bottom: .45em; }
.p-hero h3 { max-width: 64vw; margin: 0 auto; }
.band p { max-width: 64vw; margin: 0 auto; text-align: center; }
.intro-h4 { max-width: 72vw; margin: 0 auto 3vw; text-align: center; }

/* process diagram: steps joined by arrows */
.flow { list-style: none; margin: 0 auto; padding: 0; max-width: 1200px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3.2vw; }
.step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; padding: 1.6vw 1.2vw 1.8vw; background: var(--white); border: 5px solid var(--navy); border-radius: 14px; }
.step strong { font-size: var(--fs-h4); line-height: 1.3; font-weight: 600; }
.step span { font-size: var(--fs-sm); line-height: 1.5; }
.step.ai { border-color: var(--red); }
.step.ai .ic { color: var(--red); }
.step.person { background: var(--navy); color: var(--white); }
.step:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; right: calc(-3.2vw - 5px); width: 3.2vw; height: 24px; transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24'%3E%3Cpath d='M4 12h30M26 4l8 8-8 8' fill='none' stroke='%23003049' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4vw; max-width: 1200px; margin: 0 auto; }
.card { background: var(--light); border-top: 6px solid var(--red); padding: 2vw 2vw 2.3vw; }
.card h3 { font-size: var(--fs-item); line-height: 1.3; margin-bottom: .5em; }
.card p { font-size: var(--fs-sm); line-height: 1.8; }

/* ---------- contact ---------- */
.contact .mail { font-size: var(--fs-h4); font-weight: 600; word-break: break-word; }

/* ---------- 404 ---------- */
.nf { text-align: center; padding: 10vw var(--gutter); }

/* ---------- mobile (Squarespace switches to its mobile layout at 767px) ---------- */
@media (max-width: 767px) {
  /* Squarespace's mobile type scale, measured on the live site at 390px */
  :root {
    --gutter: 6vw; --pad: 9vw; --dh: 9vw;
    --fs-h1: min(calc(8.3vw + 1rem), 60px);
    --fs-h2: min(calc(4.98vw + 1rem), 44px);
    --fs-h3: min(calc(3.32vw + 1rem), 36px);
    --fs-h4: min(calc(1.66vw + 1rem), 26px);
    --fs-lg: min(calc(1.38vw + 1rem), 24px);
    --fs-p: min(calc(0.385vw + 1rem), 19px);
    --fs-item: min(calc(2.49vw + 1rem), 31px);
  }
  .fe { row-gap: 6vw; }
  .fe > * { grid-column: 1 / -1; grid-row: auto !important; }
  .hero { min-height: 0; }
  .p-hero h3, .band p, .intro-h4 { max-width: none; }
  .layers, .uses, .cards, .diy-grid, .steps { grid-template-columns: 1fr; gap: 7vw; }
  .use, .card { padding: 6vw; }
  .flow { grid-auto-flow: row; gap: 9vw; }
  .step { padding: 5vw; }
  .step:not(:last-child)::after {
    top: auto; bottom: calc(-9vw - 5px); right: 50%; width: 24px; height: 9vw; transform: translateX(50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 40'%3E%3Cpath d='M12 4v30M4 26l8 8 8-8' fill='none' stroke='%23003049' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  .site-footer img { width: 150px; }
  .site-header .logo img { width: 140px; }
}
@media (prefers-reduced-motion: reduce) { .use { transition: none; } }