/* Generated by scripts/sync-v3.mjs. Do not edit: change the prototype and re-run the sync. Source and hashes: src/pages/home.sync.json. */
/* EasySuite home, concept "Switchboard".
   Family rules carried from the product pages: navy #003282 for type and buttons, product cyans for marks
   only (never for text), 3px corners, hairline rules, Public Sans for the family voice. Each product brings
   its own headline face onto the stage: Source Serif 4 (EasyInk), Albert Sans (EasyDocs), Mona Sans (EasyEngage). */

/* ---------- fonts (self-hosted, relative paths) ---------- */
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/public-sans/public-sans-latin-wght.woff2) format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 300 600; font-display: swap; src: url(/fonts/source-serif-4/source-serif-4-latin.woff2) format('woff2'); }
@font-face { font-family: 'Albert Sans'; font-style: normal; font-weight: 300 600; font-display: swap; src: url(/fonts/albert-sans/albert-sans-latin.woff2) format('woff2'); }
@font-face { font-family: 'Mona Sans'; font-style: normal; font-weight: 200 900; font-display: swap; src: url(/fonts/mona-sans/mona-sans-latin.woff2) format('woff2'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/dm-mono/dm-mono-latin-400.woff2) format('woff2'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/dm-mono/dm-mono-latin-500.woff2) format('woff2'); }
@font-face { font-family: 'Mrs Saint Delafield'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/mrs-saint-delafield/mrs-saint-delafield-latin.woff2) format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/montserrat/montserrat-700-text-easyengage.woff2) format('woff2'); unicode-range: U+45, U+61, U+65, U+67, U+6e, U+73, U+79; }

/* ---------- tokens ---------- */
:root {
  --navy: #003282;
  --navy-deep: #00256A;
  --ink: #0E1B3D;
  --ink-2: #45506A;
  --ink-3: #5B6479;
  --rule: #DADDE4;
  --rule-2: #C3C9D5;
  --wash: #F4F6F9;
  --link: #006CB3;
  --c-ink: #00C8FF;
  --c-docs: #00A0EB;
  --c-engage: #15BFF2;
  --ink-wash: #F4F7FB; /* EasyInk's surface: a cool brand tint (no warm paper tones) */
  --docs-wash: #E8F3FB;
  --engage-wash: #EEF1F6;
  --night: #0A1426;
  --sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --albert: 'Albert Sans', 'Helvetica Neue', Arial, sans-serif;
  --mona: 'Mona Sans', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --script: 'Mrs Saint Delafield', 'Snell Roundhand', cursive;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --gutter: clamp(16px, 4.6vw, 72px);
  --max: 1296px;
  --lift: 0 1px 1px rgba(14, 27, 61, .04), 0 2px 4px rgba(14, 27, 61, .04), 0 10px 20px rgba(14, 27, 61, .05), 0 28px 56px rgba(14, 27, 61, .08);
  --lift-sm: 0 1px 1px rgba(14, 27, 61, .05), 0 3px 8px rgba(14, 27, 61, .06), 0 12px 28px rgba(14, 27, 61, .07);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: #fff; color: var(--ink); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--navy); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--navy); color: #fff; font-weight: 600; text-decoration: none; border-radius: 3px; }
.skip:focus { top: 12px; }

/* buttons and text links, as on the product pages */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 22px; border: 0; border-radius: 3px; background: var(--navy); color: #fff; text-decoration: none; cursor: pointer; font: 500 16px/1 var(--sans); letter-spacing: .005em; white-space: nowrap; touch-action: manipulation; transition: background-color .15s ease, transform .16s var(--ease-out); }
.btn:hover { background: var(--navy-deep); }
.btn:active { transform: scale(.98); }
.btn .arr { transition: transform .2s var(--ease-out); }
.btn:hover .arr { transform: translateX(3px); }
.btn-lg { height: 54px; padding: 0 28px; font-size: 17px; }
.btn-ghost { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); }
.btn-ghost:hover { background: var(--navy); color: #fff; }
.tlink { color: var(--navy); font-weight: 600; font-size: 15.5px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: rgba(0, 50, 130, .35); transition: text-decoration-color .15s ease; }
.tlink:hover { text-decoration-color: var(--navy); }

/* three-segment suite stripe: the family motif */
.stripe { display: inline-flex; gap: 3px; flex: none; }
.stripe i { display: block; width: 14px; height: 4px; border-radius: 1px; }
.stripe i:nth-child(1) { background: var(--c-ink); }
.stripe i:nth-child(2) { background: var(--c-docs); }
.stripe i:nth-child(3) { background: var(--c-engage); }
.eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font: 600 13px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--navy); }

/* ---------- header ---------- */
.site-head { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: saturate(1.6) blur(12px); backdrop-filter: saturate(1.6) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.site-head.is-scrolled { border-bottom-color: var(--rule); }
.head-row { display: flex; align-items: center; gap: 28px; height: 76px; }
/* EasySuite logo (Rising Tiles). Heights keep its cap height level with the EasyInk logo at the
   product pages' header sizes: 34px header, 30px footer, 28px phone header (EasySuite +1px each). */
.logo { display: inline-flex; flex: none; text-decoration: none; }
.logo img { display: block; width: auto; height: 35px; }
.head-nav { margin-left: auto; }
.head-nav ul { display: flex; align-items: center; gap: 4px; }
.head-nav a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 3px; color: var(--ink-2); font-size: 15.5px; font-weight: 500; text-decoration: none; transition: color .15s ease, background-color .15s ease; }
.head-nav a:hover { color: var(--navy); background: var(--wash); }
.head-nav img { flex: none; }
.nav-sep { margin-left: 10px; padding-left: 14px; border-left: 1px solid var(--rule); }
.btn-head { height: 44px; padding: 0 20px; font-size: 15.5px; }

/* ---------- hero ---------- */
.hero { --accent: var(--c-ink); --stage: var(--ink-wash); padding: clamp(22px, 2.6vw, 40px) 0 clamp(0px, 1vw, 16px); }
.hero[data-active="easydocs"] { --accent: var(--c-docs); --stage: var(--docs-wash); }
.hero[data-active="easyengage"] { --accent: var(--c-engage); --stage: var(--engage-wash); }
.hero[data-active="easyengage"][data-engage-theme="dark"] { --stage: var(--night); }

.hero-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); align-items: end; gap: 20px 56px; margin-bottom: clamp(26px, 2.8vw, 38px); }
.hero .eyebrow { margin-bottom: 16px; }
.nw { white-space: nowrap; }
.hero h1 { font: 600 clamp(36px, 3.9vw, 56px)/1.05 var(--sans); letter-spacing: -.028em; color: var(--navy); text-wrap: balance; }
.kw { position: relative; white-space: nowrap; }
.kw::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.07em; height: .085em; border-radius: 1px; background: var(--kw); transform: scaleX(0); transform-origin: left center; transition: transform .7s var(--ease-out); }
.kw[data-kw="easyink"] { --kw: var(--c-ink); }
.kw[data-kw="easydocs"] { --kw: var(--c-docs); }
.kw[data-kw="easyengage"] { --kw: var(--c-engage); }
.hero[data-active="easyink"] .kw[data-kw="easyink"]::after,
.hero[data-active="easydocs"] .kw[data-kw="easydocs"]::after,
.hero[data-active="easyengage"] .kw[data-kw="easyengage"]::after { transform: scaleX(1); }
.no-js .kw::after { display: none; }
.hero-intro { padding-bottom: 4px; font-size: 16.5px; line-height: 1.55; color: var(--ink-2); }

/* tabs */
.tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tab { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 9px; min-height: 0; padding: 20px 26px 17px; border: 0; border-radius: 6px 6px 0 0; background: #fff; box-shadow: inset 0 0 0 1px #E1E5EC; text-align: left; cursor: pointer; color: var(--ink-2); transition: background-color .5s var(--ease-out), box-shadow .3s ease, color .3s ease; }
.tab:hover { background: #F8F9FB; }
.tab:not([aria-selected="true"]):hover .tab-bar { background: color-mix(in srgb, var(--tc) 55%, transparent); }
.tab[aria-selected="true"] { background: var(--stage); box-shadow: none; color: var(--navy); cursor: default; }
.tab:focus-visible { outline-offset: -3px; }
.tab-logo { display: block; height: 30px; }
.tab-logo img, .tab-logo svg { width: auto; height: 100%; }
.tab[data-product="easydocs"] .tab-logo { height: 28px; margin-top: 1px; margin-bottom: 1px; }
.tab[data-product="easyengage"] .tab-logo { height: 34px; margin: -2px 0 -2px -2px; }
.tab-short { display: none; align-items: center; gap: 8px; font: 650 15px/1.15 var(--sans); letter-spacing: -.005em; color: inherit; }
.tab-short img { width: auto; height: 22px; }
.tab[aria-selected="true"] .tab-short { color: var(--navy); }
.tab-cat { font-size: 14px; line-height: 1.35; color: var(--ink-3); }
.tab[aria-selected="true"] .tab-cat { color: var(--ink-2); }
.tab-bar { position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 6px 6px 0 0; background: transparent; overflow: hidden; transition: background-color .2s ease; }
.tab-bar i { display: block; width: 100%; height: 100%; background: var(--tc); transform: scaleX(0); transform-origin: left center; }
.tab[data-product="easyink"] { --tc: var(--c-ink); }
.tab[data-product="easydocs"] { --tc: var(--c-docs); }
.tab[data-product="easyengage"] { --tc: var(--c-engage); }
.tab[aria-selected="true"] .tab-bar { background: color-mix(in srgb, var(--tc) 28%, transparent); }
.tab[aria-selected="true"] .tab-bar i { transform: scaleX(var(--p, 1)); }
.hero[data-engage-theme="dark"] .tab[aria-selected="true"][data-product="easyengage"] { color: #fff; }
.hero[data-engage-theme="dark"] .tab[aria-selected="true"][data-product="easyengage"] .tab-short { color: #fff; }
.hero[data-engage-theme="dark"] .tab[aria-selected="true"][data-product="easyengage"] .tab-logo path:first-child { stroke: #fff; }
.hero[data-engage-theme="dark"] .tab[aria-selected="true"][data-product="easyengage"] .tab-logo tspan:last-child { fill: #fff; }
.hero[data-engage-theme="dark"] .tab[aria-selected="true"][data-product="easyengage"] .tab-cat { color: #AEB9CF; }
.hero[data-engage-theme="dark"] .tab[aria-selected="true"][data-product="easyengage"] .tab-short img { filter: brightness(0) invert(1); }

/* stage */
.stage { position: relative; background: var(--stage); border-radius: 0 0 6px 6px; padding: clamp(26px, 3vw, 44px) clamp(20px, 3.6vw, 52px) 14px; transition: background-color .5s var(--ease-out); }
.panels { display: grid; }
.panel { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 41fr) minmax(0, 59fr); align-items: center; gap: clamp(28px, 4vw, 64px); }
.panel:focus-visible { outline-offset: 8px; }
.js .panel { opacity: 0; visibility: hidden; transition: opacity .32s ease, visibility 0s linear .32s; }
.js .panel.is-active { opacity: 1; visibility: visible; transition: opacity .42s ease .08s, visibility 0s linear 0s; }

.p-copy { display: flex; flex-direction: column; align-items: flex-start; }
.p-title { color: var(--navy); text-wrap: balance; }
.panel[data-product="easyink"] .p-title { font: 400 clamp(32px, 3vw, 44px)/1.08 var(--serif); font-variation-settings: 'opsz' 60; letter-spacing: -.012em; }
.panel[data-product="easydocs"] .p-title { font: 300 clamp(33px, 3.1vw, 46px)/1.06 var(--albert); letter-spacing: -.022em; }
.panel[data-product="easyengage"] .p-title { font: 600 clamp(31px, 2.9vw, 42px)/1.06 var(--mona); letter-spacing: -.024em; }
.p-lede { margin-top: 18px; max-width: 34em; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.p-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--rule-2); }
.p-facts div { padding: 0 14px; border-left: 1px solid var(--rule-2); }
.p-facts div:first-child { padding-left: 0; border-left: 0; }
.p-facts dt { font: 600 11px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.p-facts dd { margin-top: 6px; font-size: 15px; line-height: 1.35; font-weight: 500; color: var(--navy); }
.p-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: 28px; }

/* dark EasyEngage stage */
.hero[data-engage-theme="dark"] .panel[data-product="easyengage"] .p-title,
.hero[data-engage-theme="dark"] .panel[data-product="easyengage"] .p-facts dd { color: #fff; }
.hero[data-engage-theme="dark"] .panel[data-product="easyengage"] .p-lede { color: #C6CEDD; }
.hero[data-engage-theme="dark"] .panel[data-product="easyengage"] .p-facts,
.hero[data-engage-theme="dark"] .panel[data-product="easyengage"] .p-facts div { border-color: #2A3854; }
.hero[data-engage-theme="dark"] .panel[data-product="easyengage"] .p-facts dt { color: #9AA6BE; }
.hero[data-engage-theme="dark"] .panel[data-product="easyengage"] .btn { background: #fff; color: var(--navy); }
.hero[data-engage-theme="dark"] .panel[data-product="easyengage"] .btn:hover { background: #E3ECF8; }
.hero[data-engage-theme="dark"] .panel[data-product="easyengage"] .tlink { color: #fff; text-decoration-color: rgba(255, 255, 255, .45); }
.hero[data-engage-theme="dark"] .panel[data-product="easyengage"] :focus-visible { outline-color: #fff; }
.hero[data-active="easyengage"][data-engage-theme="dark"] .stage-note { color: #9AA6BE; }
.hero[data-active="easyengage"][data-engage-theme="dark"] .rotate { color: #fff; border-color: #2A3854; }
.hero[data-active="easyengage"][data-engage-theme="dark"] .rotate:hover { background: #142140; }
.hero[data-active="easyengage"][data-engage-theme="dark"] .rotate:focus-visible { outline-color: #fff; }

.stage-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: clamp(18px, 2vw, 26px); }
.stage-note { font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.rotate { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 11px; border: 1px solid var(--rule-2); border-radius: 17px; background: transparent; font-size: 13.5px; font-weight: 500; color: var(--navy); cursor: pointer; transition: background-color .15s ease; }
.rotate:hover { background: rgba(255, 255, 255, .7); }
.rotate svg { width: 14px; height: 14px; fill: currentColor; }
.rotate .i-play { display: none; }
.rotate.is-paused .i-pause { display: none; }
.rotate.is-paused .i-play { display: block; }

/* ---------- product visuals ---------- */
.viz { position: relative; width: 100%; aspect-ratio: 1.55; container-type: inline-size; }
.viz figure { margin: 0; }
.browser { position: absolute; overflow: hidden; border-radius: 7px; background: #fff; box-shadow: 0 0 0 1px rgba(14, 27, 61, .1), var(--lift); }
.b-bar { display: flex; align-items: center; gap: 1cqw; height: 4.4cqw; padding: 0 1.8cqw; background: #F1F3F7; border-bottom: 1px solid #E3E7EE; }
.b-bar i { width: 1.15cqw; height: 1.15cqw; border-radius: 50%; background: #CDD4DE; }
.b-bar span { margin-left: auto; margin-right: auto; padding-right: 4cqw; font-size: max(9px, 1.45cqw); font-weight: 500; color: #5A6579; letter-spacing: .02em; }
.hero[data-engage-theme="dark"] .b-engage .b-bar span { color: #AEB9CF; }
.browser img { width: 100%; }
.phone { position: absolute; padding: 3.4%; border-radius: 15% / 7%; background: #141C2E; box-shadow: 0 1px 2px rgba(0, 38, 106, .14), 0 22px 44px -12px rgba(0, 38, 106, .34); }
.phone img { border-radius: 12% / 5.6%; background: #EEF3F9; }

/* entrance: parts rise into place when their panel becomes active */
.rise { opacity: 0; transform: translateY(14px); transition: opacity 0s linear .4s, transform 0s linear .4s; }
.panel.is-active .rise { opacity: 1; transform: none; transition: opacity .6s var(--ease-out) var(--d, 0s), transform .8s var(--ease-out) var(--d, 0s); }
.anim { opacity: 0; transform: translateY(8px); transition: opacity 0s linear .4s, transform 0s linear .4s; }
.panel.is-active .anim { opacity: 1; transform: none; transition: opacity .5s var(--ease-out) var(--d, 0s), transform .6s var(--ease-out) var(--d, 0s); }
.no-js .rise, .no-js .anim { opacity: 1; transform: none; }

/* EasyInk: package builder, the signer's phone and the live ledger */
.b-ink { right: 0; top: 0; width: 86%; }
.ph-ink { left: 0; top: 15%; width: 25%; } /* below the app header, so the package title stays readable */
.ledger { position: absolute; right: 1.2%; bottom: 0; padding: 2.1cqw 2.6cqw 1.9cqw; background: #fff; border-radius: 4px; box-shadow: 0 0 0 1px rgba(14, 27, 61, .08), var(--lift-sm); }
.ledger-num { font: 400 max(26px, 5.1cqw)/1 var(--serif); font-variation-settings: 'opsz' 60; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; color: var(--navy); padding-bottom: .9cqw; border-bottom: 3px double var(--navy); }
.ledger-num data { display: inline-block; min-width: 9ch; }
.ledger-lbl { margin-top: 1cqw; font-size: max(12px, 1.95cqw); line-height: 1.3; color: var(--ink); }

/* EasyDocs: the car-seat photo with the customer's phone, and the agent's live log */
.ph { position: absolute; left: 0; top: 0; width: 70%; height: 100%; overflow: hidden; border-radius: 4px; background: #6F7173; container-type: size; box-shadow: var(--lift-sm); }
.ph-stage { position: absolute; --W: max(100cqw, calc(100cqh * 1.5)); --H: calc(var(--W) / 1.5); width: var(--W); height: var(--H); left: clamp(calc(100cqw - var(--W)), calc(50cqw - var(--W) * .54), 0px); top: clamp(calc(100cqh - var(--H)), calc(50cqh - var(--H) * .5), 0px); }
.ph-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph-screen { position: absolute; left: 57.02%; top: 24.79%; width: 15.24%; height: 48.72%; background: #EEF3F9; border-radius: 7.6% / 3.6%; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.ph-screen img { width: 100%; height: auto; margin-top: 4%; }
.log { position: absolute; right: 0; top: 50%; translate: 0 -50%; width: 47%; padding: 2.6cqw 2.6cqw 1.6cqw; background: #fff; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0, 50, 130, .08), var(--lift); font-family: var(--albert); }
.log-head { padding-bottom: 1.8cqw; border-bottom: 1px solid #DDE3EC; }
.log-title { font-size: max(12px, 1.95cqw); font-weight: 600; line-height: 1.3; color: var(--navy); }
.log-sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: .5cqw; font-size: max(11.5px, 1.75cqw); color: #56637F; }
.live { display: inline-flex; align-items: center; gap: .8cqw; font: 500 max(10.5px, 1.5cqw)/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--navy); }
.live-dot { width: 1.2cqw; height: 1.2cqw; min-width: 7px; min-height: 7px; border-radius: 50%; background: var(--c-docs); box-shadow: 0 0 0 0 rgba(0, 160, 235, .5); }
.panel.is-active .live-dot { animation: pulse 2s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 160, 235, .45); } 70% { box-shadow: 0 0 0 1.4cqw rgba(0, 160, 235, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 160, 235, 0); } }
.log-list { position: relative; margin-top: 1.6cqw; }
.log-list::before { content: ""; position: absolute; left: calc(max(7px, 1.3cqw) / 2 - .75px); top: 1.2cqw; bottom: 1.6cqw; width: 1.5px; background: #CFD8E5; }
.log-list li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1cqw; padding: 0 0 1.3cqw max(15px, 3cqw); }
.node { position: absolute; left: 0; top: .55cqw; width: 1.3cqw; height: 1.3cqw; min-width: 7px; min-height: 7px; background: var(--c-docs); }
.log-list li.done .node { background: var(--navy); }
.ev { grid-column: 1 / -1; font-size: max(12px, 1.8cqw); font-weight: 500; line-height: 1.35; color: var(--navy); }
.who, .file { font: 400 max(10.5px, 1.55cqw)/1.4 var(--mono); color: #3D4F73; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.size { font: 400 max(10.5px, 1.55cqw)/1.4 var(--mono); color: #56637F; text-align: right; }

/* EasyEngage: the agent inbox, and the first-text flow playing out */
.b-engage { right: 0; top: 0; width: 86%; }
.b-engage img { transition: opacity .25s ease; }
.theme-switch { position: absolute; right: 2.2cqw; top: .7cqw; display: inline-flex; padding: 2px; border-radius: 999px; background: #E3E8EF; z-index: 2; }
.theme-switch button { height: max(22px, 3cqw); padding: 0 max(9px, 1.4cqw); border: 0; border-radius: 999px; background: transparent; font-size: max(11px, 1.45cqw); font-weight: 600; color: #5A6579; cursor: pointer; }
.theme-switch button[aria-pressed="true"] { background: #fff; color: var(--navy); box-shadow: 0 1px 2px rgba(14, 27, 61, .15); }
.hero[data-engage-theme="dark"] .b-engage { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 60px rgba(0, 0, 0, .35); }
.hero[data-engage-theme="dark"] .b-engage .b-bar { background: #111C33; border-bottom-color: #22304C; }
.hero[data-engage-theme="dark"] .b-engage .b-bar i { background: #33415E; }
.hero[data-engage-theme="dark"] .theme-switch { background: #1B2945; }
.hero[data-engage-theme="dark"] .theme-switch button { color: #AEB9CF; }
.hero[data-engage-theme="dark"] .theme-switch button[aria-pressed="true"] { background: #2C3B5C; color: #fff; }

.chat { position: absolute; left: 0; bottom: 0; width: 49%; overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px rgba(14, 27, 61, .1), var(--lift); font-size: max(11px, 1.75cqw); line-height: 1.4; color: #132240; }
.chat-head { display: flex; align-items: center; gap: 1.4cqw; padding: 1.7cqw 2cqw; border-bottom: 1px solid #E2E6ED; }
.av { flex: none; display: grid; place-items: center; width: 4.6cqw; height: 4.6cqw; min-width: 26px; min-height: 26px; border-radius: 50%; background: #E9F4FB; color: var(--navy); font-size: max(10px, 1.45cqw); font-weight: 700; box-shadow: inset 0 0 0 1px #CBE6F6; }
.chat-who { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.chat-who b { font-weight: 600; color: #132240; }
.chat-who span { font-size: .86em; color: #5A6579; }
.pill { padding: .45cqw 1.2cqw; border-radius: 999px; font-size: .84em; font-weight: 600; white-space: nowrap; }
.pill-pending { background: #FDF1DC; color: #7A4800; }
.pill-in { background: #E7F5EC; color: #17703E; }
.chat-body { display: flex; flex-direction: column; gap: 1cqw; padding: 2cqw; background: #F6F7FA; }
.bub { max-width: 88%; padding: 1.4cqw 1.8cqw; border-radius: 14px; }
.bub.out { align-self: flex-end; background: var(--navy); color: #fff; border-bottom-right-radius: 4px; }
.bub.in { align-self: flex-start; background: #fff; color: #132240; box-shadow: inset 0 0 0 1px #E2E6ED; border-bottom-left-radius: 4px; font-weight: 500; }
.disc { margin-top: 1.1cqw; padding-top: 1.1cqw; border-top: 1px solid rgba(255, 255, 255, .25); font-size: .92em; }
.disc b { display: block; font-weight: 600; }
.meta, .sys { display: flex; align-items: center; gap: .6cqw; font-size: .84em; color: #5A6579; }
.meta { align-self: flex-end; }
.sys { align-self: center; color: #17703E; font-weight: 500; }
.meta svg, .sys svg { width: max(10px, 1.6cqw); height: max(10px, 1.6cqw); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.chat-foot { display: flex; align-items: center; gap: 0; padding: 1.5cqw 2cqw; border-top: 1px solid #E2E6ED; }
.compose { flex: 1; min-width: 0; margin-right: 1.2cqw; padding: 1cqw 1.4cqw; border: 1px solid #CDD4DE; border-radius: 6px; color: #626C80; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.send { display: inline-flex; align-items: center; gap: .6cqw; padding: 1cqw 1.4cqw; border-radius: 6px; font-weight: 600; white-space: nowrap; }
.send svg { width: max(10px, 1.6cqw); height: max(10px, 1.6cqw); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.send-locked { background: #E9EEF6; color: var(--navy); box-shadow: inset 0 0 0 1px #CDD4DE; }
.send-open { background: var(--navy); color: #fff; }
.chat-head { position: relative; }
.chat-head .pill { transition: opacity 0s linear .4s; }
.chat-head .swap-in { position: absolute; right: 2cqw; top: 50%; translate: 0 -50%; opacity: 0; }
.panel.is-active .chat-head .swap-out { opacity: 0; transition: opacity .35s ease var(--d); }
.panel.is-active .chat-head .swap-in { opacity: 1; transition: opacity .35s ease var(--d); }
/* "Locked until START" gives way to "Send", and the reply box widens to meet it (no empty gap left behind). */
.chat-foot .send { overflow: hidden; max-width: 16em; }
.chat-foot .swap-in { max-width: 0; padding-left: 0; padding-right: 0; opacity: 0; }
.panel.is-active .chat-foot .swap-out { animation: send-out .5s var(--ease-out) var(--d) both; }
.panel.is-active .chat-foot .swap-in { animation: send-in .5s var(--ease-out) var(--d) both; }
@keyframes send-out { from { max-width: 16em; opacity: 1; } to { max-width: 0; padding-left: 0; padding-right: 0; opacity: 0; } }
@keyframes send-in { from { max-width: 0; padding-left: 0; padding-right: 0; opacity: 0; } to { max-width: 8em; padding-left: 1.4cqw; padding-right: 1.4cqw; opacity: 1; } }
.no-js .chat-head .swap-out { opacity: 0; }
.no-js .chat-head .swap-in { opacity: 1; }
.no-js .chat-foot .swap-out { display: none; }
.no-js .chat-foot .swap-in { max-width: none; padding-left: 1.4cqw; padding-right: 1.4cqw; opacity: 1; }
/* Without JavaScript the three panels stack instead of sharing one cell. */
.no-js .panels { row-gap: 56px; }
.no-js .panel { grid-area: auto; }

/* ---------- sections ---------- */
.sec { padding: clamp(80px, 9vw, 136px) 0 0; }
.sec-head { max-width: 760px; margin-bottom: clamp(36px, 4.4vw, 60px); }
.h2 { font: 600 clamp(30px, 3.2vw, 46px)/1.08 var(--sans); letter-spacing: -.024em; color: var(--navy); text-wrap: balance; }
.sub { margin-top: 18px; max-width: 40em; font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.fine { margin-top: 18px; font-size: 13px; color: var(--ink-3); }

/* journey */
.moments { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); padding-top: 34px; }
.moments::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: linear-gradient(90deg, var(--c-engage) 0 33.3%, var(--c-docs) 33.3% 66.6%, var(--c-ink) 66.6% 100%); transform: scaleX(var(--drawn, 1)); transform-origin: left center; transition: transform 1.6s cubic-bezier(.65, 0, .35, 1); }
.js .moments:not(.is-in)::before { --drawn: 0; }
.moment { position: relative; display: flex; flex-direction: column; }
.moment::before { content: ""; position: absolute; left: 0; top: -34px; width: 14px; height: 14px; background: #fff; border: 2px solid var(--mc); border-radius: 50%; }
.moment[data-product="easyink"] { --mc: var(--c-ink); }
.moment[data-product="easydocs"] { --mc: var(--c-docs); }
.moment[data-product="easyengage"] { --mc: var(--c-engage); }
.m-tag { display: flex; align-items: center; gap: 9px; font: 600 13px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.m-tag img { width: auto; height: 20px; }
.m-art { display: flex; flex-direction: column; justify-content: center; gap: 8px; height: 148px; margin: 20px 0 22px; padding: 20px; border-radius: 4px; }
.m-art-text { background: var(--engage-wash); align-items: flex-end; }
.m-bubble { max-width: 92%; padding: 11px 14px; border-radius: 14px 14px 4px 14px; background: var(--navy); color: #fff; font-size: 14.5px; line-height: 1.4; }
.m-note { font-size: 12.5px; color: var(--ink-3); }
.m-art-file { background: var(--docs-wash); }
.m-file { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 14px; background: #fff; border-radius: 3px; box-shadow: 0 0 0 1px #DDE3EC; border-left: 3px solid var(--c-docs); }
.m-file b { min-width: 0; font: 400 13px/1.3 var(--mono); color: #3D4F73; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-file i { flex: none; font: normal 400 12px/1.3 var(--mono); color: #56637F; }
.m-art-sig { background: var(--ink-wash); align-items: flex-start; padding: 22px 26px; }
/* The script face reaches far outside a 1.0 line box: the J rises .77em above the baseline (about 7px over the box
   at 50px) and drops .38em below it, and the final a trails .13em past its advance. The padding gives the box room
   for all of that, the negative margins keep the text exactly where it sat before (same position, same 44px in the
   layout), and the reveal's insets reach well past the box on the top, bottom and left, so the wipe only ever cuts
   on its moving right edge and the finished signature is never clipped at all. */
.m-sig { font: 400 50px/1 var(--script); color: var(--navy); padding: 16px 14px 16px 6px; margin: -16px 0 -22px -4px; white-space: nowrap; }
.m-sigline { align-self: stretch; padding-top: 6px; border-top: 1px solid var(--ink); font-size: 11.5px; color: var(--ink-3); }
.js .m-sig { clip-path: inset(-40% 100% -40% -4%); transition: clip-path 1.5s cubic-bezier(.65, 0, .35, 1) 1.1s; }
.js .moments.is-in .m-sig { clip-path: inset(-40% -4% -40% -4%); }
.moment h3 { font: 600 21px/1.25 var(--sans); letter-spacing: -.01em; color: var(--navy); }
.moment p:not(.m-tag) { margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }

/* foundation */
.arch { border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px var(--rule); }
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pillar { position: relative; display: flex; flex-direction: column; padding: 34px 32px 30px; border-left: 1px solid var(--rule); background: #fff; }
.pillar:first-child { border-left: 0; }
.pillar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--pc); }
.pillar[data-product="easyink"] { --pc: var(--c-ink); }
.pillar[data-product="easydocs"] { --pc: var(--c-docs); }
.pillar[data-product="easyengage"] { --pc: var(--c-engage); }
.pillar h3 { display: flex; align-items: center; gap: 10px; font: 650 20px/1.2 var(--sans); letter-spacing: -.01em; color: var(--navy); }
.pillar h3 img { width: auto; height: 22px; }
.pillar ul { flex: 1; margin: 20px 0 24px; }
.pillar li { position: relative; padding: 11px 0 11px 22px; border-top: 1px solid #E8EBF0; font-size: 15.5px; line-height: 1.45; color: var(--ink); }
.pillar li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 8px; height: 8px; border: 1.5px solid var(--navy); border-radius: 1px; }
.pillar .tlink { align-self: flex-start; font-size: 15px; }
.slab { position: relative; padding: 30px 32px 32px; background: var(--navy); color: #fff; }
.slab::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--c-ink) 0 33.3%, var(--c-docs) 33.3% 66.6%, var(--c-engage) 66.6% 100%); }
.slab-label { font: 600 12.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #9FC4F0; }
.slab-list { display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); margin-top: 18px; }
.slab-list li { padding: 2px 20px; border-left: 1px solid rgba(255, 255, 255, .22); font-size: 17px; font-weight: 500; line-height: 1.35; }
.slab-list li:first-child { padding-left: 0; border-left: 0; }
.arch-note { margin-top: 18px; font-size: 15px; color: var(--ink-2); }

/* fit */
.qs { border-top: 1px solid var(--rule); }
.q { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px clamp(28px, 5vw, 80px); padding: 30px 26px 30px 22px; border-bottom: 1px solid var(--rule); transition: background-color .35s ease; }
.q::before { content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 4px; background: var(--qc); transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease-out); }
.q[data-product="easyink"] { --qc: var(--c-ink); --qw: var(--ink-wash); }
.q[data-product="easydocs"] { --qc: var(--c-docs); --qw: var(--docs-wash); }
.q[data-product="easyengage"] { --qc: var(--c-engage); --qw: var(--engage-wash); }
.q.is-yes { background: var(--qw); }
.q.is-yes::before { transform: scaleY(1); }
.q legend { display: flex; gap: 16px; float: left; width: 100%; padding: 0; }
.q legend + * { clear: both; }
.q-n { flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin-top: 2px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--navy); font: 600 15px/1 var(--sans); color: var(--navy); transition: background-color .3s ease, color .3s ease; }
.q.is-yes .q-n { background: var(--navy); color: #fff; }
.q-text { font: 600 clamp(21px, 1.9vw, 26px)/1.25 var(--sans); letter-spacing: -.015em; color: var(--navy); text-wrap: balance; }
.yn { display: inline-flex; gap: 0; margin: 20px 0 0 50px; padding: 3px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--rule-2); }
.yn label { position: relative; cursor: pointer; }
.yn input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.yn span { display: block; min-width: 72px; padding: 9px 18px; border-radius: 999px; text-align: center; font-size: 15px; font-weight: 600; color: var(--ink-2); transition: background-color .2s ease, color .2s ease; }
.yn label:hover span { color: var(--navy); }
.yn input:checked + span { background: var(--navy); color: #fff; }
.yn input:focus-visible + span { outline: 3px solid var(--navy); outline-offset: 2px; }
.q-ans { padding-top: 4px; }
.q-ans, .q-ans * { transition: color .3s ease, filter .3s ease, opacity .3s ease; }
/* A "No" quietens the answer without dropping its text below AA contrast. */
.q.is-no .q-to { color: var(--ink-2); }
.q.is-no .q-to img { filter: grayscale(1); opacity: .55; }
.q.is-no .q-ans p:not(.q-to) { color: var(--ink-3); }
.q.is-no .q-ans .tlink { color: var(--ink-2); text-decoration-color: rgba(69, 80, 106, .35); }
.q-to { display: flex; align-items: center; gap: 10px; font: 650 17px/1.2 var(--sans); color: var(--navy); }
.q-to img { width: auto; height: 20px; }
/* "Add EasyInk to your demo" until EasyInk is ticked in the demo form, then "EasyInk added to your demo"
   (script.js sets .is-added from the form itself, so the line is true whichever way the product got ticked). */
.q-to-added, .q.is-added .q-to-add { display: none; }
.q.is-added .q-to-added { display: inline; }
.q-ans p:not(.q-to) { margin-top: 10px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.q-ans .tlink { display: inline-block; margin-top: 12px; font-size: 15px; }
.verdict { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; min-height: 92px; margin-top: 28px; padding: 22px 26px; border-radius: 6px; background: var(--wash); }
.verdict-text { font-size: 17px; line-height: 1.45; color: var(--ink-2); }
.verdict-text b { color: var(--navy); font-weight: 650; }
.ind { margin-top: clamp(56px, 6vw, 88px); }
.ind-h { margin-bottom: 18px; font: 600 13px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
/* One list per product, in its own page's order: no matrix, so no empty cell. */
.ind-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(20px, 3vw, 44px); }
.ind-col { --dc: var(--c-ink); min-width: 0; }
.ind-col[data-p="easydocs"] { --dc: var(--c-docs); }
.ind-col[data-p="easyengage"] { --dc: var(--c-engage); }
.ind-name { display: flex; align-items: center; gap: 8px; padding-bottom: 13px; border-bottom: 2px solid var(--dc); font: 600 15px/1.2 var(--sans); color: var(--navy); }
.ind-name img { flex: none; }
.ind-items li { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 16px; line-height: 1.35; font-weight: 500; color: var(--ink); }
.ind-items li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--dc); }
.ind-items li:last-child { border-bottom: 0; }
.ind-note { margin-top: 14px; font-size: 13px; color: var(--ink-3); }

/* demo */
.demo { padding-bottom: clamp(80px, 9vw, 136px); }
.demo-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.demo-copy { position: sticky; top: 112px; }
.ticks { margin-top: 28px; }
.ticks li { position: relative; padding: 9px 0 9px 30px; font-size: 16.5px; color: var(--ink); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 14px; width: 12px; height: 7px; border-left: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: rotate(-45deg); }
.demo-alt { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.demo-alt a { font-weight: 600; text-underline-offset: 4px; }
.form-card { padding: clamp(24px, 3vw, 40px); border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px var(--rule), var(--lift-sm); }
.pick legend { margin-bottom: 12px; font-size: 15px; font-weight: 600; color: var(--ink); }
.req { color: #A3312B; }
.opt { margin-left: 4px; font-size: 13px; font-weight: 400; color: var(--ink-3); }
.pick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pick-card { position: relative; cursor: pointer; }
.pick-card input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pick-body { position: relative; display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px 16px 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--rule-2); background: #fff; transition: box-shadow .15s ease, background-color .2s ease; }
.pick-body img { align-self: flex-start; width: auto; height: 22px; margin-bottom: 8px; }
.pick-body b { font-size: 16px; font-weight: 650; color: var(--navy); }
.pick-body small { font-size: 13px; color: var(--ink-3); }
/* Checkboxes, not radios: any combination of products. The box is ::after, its tick is ::before (drawn above it). */
.pick-hint { margin-left: 2px; font-size: 13px; font-weight: 400; color: var(--ink-3); white-space: nowrap; }
.pick-body::after { content: ""; position: absolute; right: 12px; top: 14px; width: 16px; height: 16px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--rule-2); background: #fff; }
.pick-body::before { content: ""; position: absolute; z-index: 1; right: 16px; top: 18px; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); opacity: 0; }
.pick-card:hover .pick-body { box-shadow: inset 0 0 0 1px var(--navy); }
.pick-card input:checked + .pick-body { box-shadow: inset 0 0 0 2px var(--navy); }
.pick-card[data-product="easyink"] input:checked + .pick-body { background: var(--ink-wash); }
.pick-card[data-product="easydocs"] input:checked + .pick-body { background: var(--docs-wash); }
.pick-card[data-product="easyengage"] input:checked + .pick-body { background: var(--engage-wash); }
.pick-card input:checked + .pick-body::after { box-shadow: none; background: var(--navy); }
.pick-card input:checked + .pick-body::before { opacity: 1; }
.pick-card input:focus-visible + .pick-body { outline: 3px solid var(--navy); outline-offset: 2px; }
.pick.is-invalid .pick-body { box-shadow: inset 0 0 0 1px #A3312B; }
.pick.is-invalid .pick-body::after { box-shadow: inset 0 0 0 1.5px #A3312B; }
.pick-err { margin-top: 10px; font-size: 14.5px; font-weight: 500; color: #A3312B; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; margin-top: 26px; }
.field-wide { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: 7px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.field input, .field textarea { display: block; width: 100%; padding: 12px 14px; border: 1px solid #7D89A6; border-radius: 3px; background: #fff; font: 400 16px/1.4 var(--sans); color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease; }
.field input { height: 48px; }
.field textarea { resize: vertical; min-height: 92px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy), 0 0 0 4px rgba(0, 50, 130, .18); }
.field [aria-invalid="true"] { border-color: #A3312B; box-shadow: 0 0 0 1px #A3312B; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 26px; }
.btn[aria-disabled="true"] { opacity: .8; cursor: progress; }
.btn[aria-disabled="true"]:active { transform: none; }
.form-status { font-size: 15px; font-weight: 500; color: #A3312B; }
.form-note { margin-top: 20px; font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.form-note a { color: var(--navy); font-weight: 600; }
.form-done { padding: 12px 4px; }
.form-done:focus { outline: none; }
.done-kicker { font: 600 13px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #17703E; }
.done-title { margin-top: 12px; font: 600 30px/1.15 var(--sans); letter-spacing: -.02em; color: var(--navy); }
.done-body { margin-top: 12px; font-size: 17px; color: var(--ink-2); }
.done-proto { margin-top: 22px; font-size: 13px; color: var(--ink-3); }

/* footer */
.site-foot { padding: 56px 0 44px; background: var(--wash); border-top: 1px solid var(--rule); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 28px 56px; align-items: start; }
.logo-sm img { height: 31px; }
.foot-brand p { margin-top: 10px; font-size: 15px; color: var(--ink-2); }
.foot-products, .foot-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.foot-products a { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 15px; font-weight: 600; color: var(--navy); text-decoration: none; }
.foot-products a:hover, .foot-legal a:hover, .ep-linkbtn:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-legal a, .ep-linkbtn { padding: 4px 0; font-size: 15px; font-weight: 500; color: var(--navy); text-decoration: none; }
.ep-linkbtn { border: 0; background: none; cursor: pointer; }
.foot-fine { grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid var(--rule); font-size: 13px; line-height: 1.55; color: var(--ink-3); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .nav-sep, .nav-sep + li { display: none; }
  .slab-list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }
  .slab-list li:nth-child(4) { padding-left: 0; border-left: 0; }
}
@media (max-width: 1040px) {
  .hero-top { grid-template-columns: 1fr; }
  .hero-intro { max-width: 36em; }
  .br-wide { display: none; }
  .panel { grid-template-columns: 1fr; align-items: start; }
  .viz { max-width: 760px; }
  .tab-cat { font-size: 13px; }
  .demo-grid { grid-template-columns: 1fr; }
  .demo-copy { position: static; }
}
@media (max-width: 900px) {
  .head-nav { display: none; }
  .head-row .btn-head { margin-left: auto; }
  .pillars { grid-template-columns: 1fr; }
  .pillar { border-left: 0; border-top: 1px solid var(--rule); }
  .pillar:first-child { border-top: 0; }
  .moments { grid-template-columns: minmax(0, 1fr); padding-top: 0; padding-left: 34px; gap: 40px; }
  .moments::before { left: 6px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, var(--c-engage) 0 33.3%, var(--c-docs) 33.3% 66.6%, var(--c-ink) 66.6% 100%); transform: scaleY(var(--drawn, 1)); transform-origin: top center; }
  .moment::before { left: -34px; top: 0; }
  .q { grid-template-columns: 1fr; }
  .q-ans { padding-left: 50px; }
  .foot-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .head-row { height: 64px; gap: 12px; }
  .head-row .logo img { height: 29px; }
  .btn-head { height: 40px; padding: 0 16px; font-size: 15px; }
  html { scroll-padding-top: 76px; }
  .hero h1 { font-size: clamp(28px, 7.8vw, 42px); line-height: 1.07; }
  .hero-intro { font-size: 16px; }
  .tabs { gap: 4px; }
  .tab { padding: 16px 12px 14px; }
  .tab-logo, .tab-cat { display: none; }
  .tab-short { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; font-size: 14.5px; }
  .stage { padding: 26px 18px 14px; }
  /* Phone: the product view sits right under its headline, so the first screen shows the product. */
  .panel { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .p-copy { display: contents; }
  .p-title { order: 1; }
  .viz { order: 2; margin: 22px 0 4px; }
  .p-lede { order: 3; margin-top: 20px; font-size: 16px; }
  .p-facts { order: 4; }
  .p-cta { order: 5; }
  .p-facts { grid-template-columns: max-content minmax(0, 1fr); column-gap: 16px; margin-top: 20px; padding-top: 0; border-top: 0; }
  .p-facts div { display: contents; }
  .p-facts dt, .p-facts dd { margin: 0; padding: 9px 0 8px; border-top: 1px solid var(--rule-2); }
  .p-facts dt { font-size: 10.5px; line-height: 1.7; }
  .p-facts dd { font-size: 14.5px; }
  .hero[data-engage-theme="dark"] .panel[data-product="easyengage"] .p-facts dt,
  .hero[data-engage-theme="dark"] .panel[data-product="easyengage"] .p-facts dd { border-color: #2A3854; }
  .p-cta { gap: 14px 20px; margin-top: 22px; }
  .p-cta .btn { height: 46px; padding: 0 18px; }
  .p-cta .tlink { font-size: 15px; }
  .viz { aspect-ratio: .94; }
  .b-ink { width: 92%; }
  .ph-ink { top: 30%; width: 34%; }
  .ledger { right: 0; }
  /* EasyDocs on a phone: the whole photo up top, the log tucked under it showing its latest entries. */
  .ph { width: 100%; height: 80%; }
  .log { top: auto; bottom: 0; right: 0; translate: none; width: 84%; }
  .log-list li:nth-child(-n+2) { display: none; }
  .b-engage { width: 100%; }
  .chat { width: 80%; }
  .theme-switch { top: 1.2cqw; }
  .stage-foot { flex-direction: column; align-items: flex-start; gap: 12px; }
  .sub { font-size: 16.5px; }
  .m-art { height: auto; min-height: 120px; padding: 16px 14px; }
  .m-art-sig { padding: 18px 18px; }
  .slab { padding: 26px 20px 24px; }
  .slab-list { grid-template-columns: 1fr; row-gap: 0; }
  .slab-list li { padding: 11px 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .18); font-size: 16px; }
  .slab-list li:first-child { border-top: 0; padding-top: 2px; }
  .pillar { padding: 28px 20px 24px; }
  .q { padding: 24px 14px 26px 16px; }
  .q legend { gap: 12px; }
  .q-n { width: 30px; height: 30px; font-size: 14px; }
  .yn { margin-left: 42px; }
  .q-ans { padding-left: 42px; }
  .verdict { padding: 18px; }
  .ind-cols { grid-template-columns: minmax(0, 1fr); }
  .ind-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .ind-items li { gap: 10px; padding: 12px 0; font-size: 15px; }
  .ind-items li::before { width: 9px; height: 9px; }
  .ind-items li:nth-last-child(-n+2) { border-bottom: 0; }
  .pick-grid { grid-template-columns: 1fr; }
  .pick-body { flex-direction: row; align-items: center; gap: 12px; padding: 14px 44px 14px 14px; }
  .pick-body img { margin: 0; }
  .pick-body small { margin-left: auto; }
  .pick-body::after { top: 50%; margin-top: -8px; }
  .pick-body::before { top: 50%; margin-top: -4px; }
  .fields { grid-template-columns: 1fr; }
  .form-act .btn { width: 100%; }
}
@media (max-width: 380px) {
  .log-list li:nth-child(3) { display: none; }
  .tab-short { font-size: 13.5px; }
  .tab { padding: 14px 10px 12px; }
  .btn-head { padding: 0 13px; font-size: 14px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; }
  .rise, .anim, .panel.is-active .rise, .panel.is-active .anim { opacity: 1; transform: none; transition: none; }
  .js .panel, .js .panel.is-active { transition: none; }
  .kw::after, .tab, .stage, .q, .q::before, .btn, .btn .arr { transition: none; }
  .panel .swap-out { opacity: 0; transition: none !important; }
  .panel .swap-in { opacity: 1; transition: none !important; }
  .panel .chat-foot .swap-out { display: none; }
  .panel .chat-foot .swap-in { max-width: none; padding-left: 1.4cqw; padding-right: 1.4cqw; }
  .js .moments:not(.is-in)::before { --drawn: 1; }
  .moments::before { transition: none; }
  .js .m-sig, .js .moments.is-in .m-sig { clip-path: none; transition: none; }
}

/* Product picker: every icon gets the same box, so the three product names line up on phones. */
.pick-body img { width: 22px; height: 22px; object-fit: contain; flex: none; }