/* Generated by scripts/sync-v3.mjs. Do not edit: change the prototype and re-run the sync. Source and hashes: src/pages/easyengage.sync.json. */
/* EasyEngage v3: "The Thread", with the reply box at its foot, then the supervisor Team Inbox.
   White page, navy type, one device: the day's conversation, drawn with the product's own parts,
   held in the right column while the moments scroll past on the left. The reply box under the
   thread is the one quiet verdict: its button says what is allowed right now.

   Type scale (nine sizes): 12 14 15 17 18 20 30 44 60. Mona Sans at two weights (500, 600) and one width.
   One label style (.moment__time) for the part of the day. No clock times anywhere on the page.
   Product screenshots follow the Light/Dark switch: html[data-shots="dark"] darkens their plates. */

:root {
  --navy: #003282;
  --navy-deep: #00256a;
  --ink: #132240;
  --text: #2c3850;
  --muted: #5a6579;
  --line: #e2e6ed;
  --line-2: #cdd4de;
  --field: #7b8698;
  --tint: #f4f6f9;
  --chat: #f6f7fa;
  --soft: #e9eef6;
  --cyan: #15bff2;
  --red: #a3312b;
  --red-bg: #f8ebe9;
  --amber: #7a4800;
  --amber-bg: #fdf1dc;
  --amber-line: #c98a1b;

  --f-display: "Mona Sans", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);

  --fs-xs: 12px;
  --fs-s: 14px;
  --fs-m: 15px;
  --fs-b2: 17px;
  --fs-b: 18px;
  --fs-l: 20px;
  --fs-h3: 30px;
  --fs-h2: 44px;
  --fs-h1: 60px;

  --gut: 64px;
  --head-h: 76px;
  --peek-h: 0px;
  --stick: 20px;
  --measure: 620px;

  /* product screenshot plates (light by default; see html[data-shots="dark"]) */
  --plate: var(--tint);
  --plate-shot: #fff;
  --shot-ring: var(--line-2);
  --frame-bar: #eef1f6;
  --frame-dot: #cdd4de;
}
/* EasyEngage's dark theme: a deep navy plate behind the dark screenshots */
html[data-shots="dark"] {
  --plate: #0a1426;
  --plate-shot: #17233a;
  --shot-ring: rgba(255, 255, 255, .13);
  --frame-bar: #111d32;
  --frame-dot: rgba(255, 255, 255, .22);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + var(--peek-h) + 24px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font: 400 var(--fs-b)/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; }
a { color: var(--navy); }
p { margin: 0; }
[hidden] { display: none !important; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 500;
  font-stretch: 100%;
  letter-spacing: -0.015em;
  color: var(--navy);
  text-wrap: balance;
}
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 2px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 6px;
  text-decoration: none; font-weight: 600; font-size: var(--fs-m);
}
.skip:focus { top: 12px; }

.wrap { width: min(1200px, 100% - 2 * var(--gut)); margin-inline: auto; }

/* Buttons and links */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 26px;
  background: var(--navy); color: #fff;
  font: 600 var(--fs-b2)/1 var(--f-body);
  border: 0; border-radius: 6px; text-decoration: none; cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--navy-deep); }
.btn--sm { height: 42px; padding: 0 18px; font-size: var(--fs-m); }
.textlink {
  font-weight: 600; font-size: var(--fs-b2); color: var(--navy);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
}
.textlink:hover { text-decoration-thickness: 2px; }

/* the one label voice: eyebrows, step labels, industry tags and the part of the day */
.eyebrow, .moment__time, .step__n, .inds__tag, .peek__t {
  font-family: var(--f-display);
  font-size: var(--fs-m); font-weight: 600; font-stretch: 100%; letter-spacing: .01em;
  line-height: 1.4;
}
.eyebrow { color: var(--navy); margin-bottom: 18px; }
.sub { font-size: var(--fs-b); line-height: 1.6; color: var(--text); margin-top: 18px; max-width: 40em; }

/* Header */
.top {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  border-bottom: 1px solid transparent;
}
.top.is-scrolled { border-bottom-color: var(--line); }
.top__in { display: flex; align-items: center; gap: 32px; height: var(--head-h); }
.top__in > * { flex: none; }
.logo { display: block; flex: none; border-radius: 4px; }
.logo svg { width: 168px; height: auto; }
.nav { margin-left: auto; display: flex; gap: 30px; }
.nav a { font-size: var(--fs-m); color: var(--text); text-decoration: none; padding: 6px 0; }
.nav a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 6px; }

/* ---------- Hero + day grid ---------- */
.day__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
}
/* the hero is as tall as its content, so the first moment follows it in the first screen:
   its label at 768px tall, its heading too on taller screens (1280x800 and up) */
.hero { grid-column: 1 / 8; grid-row: 1; padding: 64px 40px 64px 0; }
.hero > * { max-width: var(--measure); }
.hero h1 { font-size: var(--fs-h1); line-height: 1.04; }
.lede { font-size: var(--fs-l); line-height: 1.55; color: var(--text); margin-top: 26px; }
.hero__cta { display: flex; align-items: center; gap: 28px; margin-top: 36px; flex-wrap: wrap; }
.trust {
  list-style: none; padding: 0; margin: 52px 0 0;
  display: grid; gap: 6px;
  font-size: var(--fs-m); line-height: 1.5; color: var(--muted);
}
.trust li { position: relative; padding-left: 24px; }
.trust li::before {
  content: ""; position: absolute; left: 2px; top: 7px; width: 10px; height: 5px;
  border-left: 1.5px solid var(--navy); border-bottom: 1.5px solid var(--navy);
  transform: rotate(-45deg);
}

/* ---------- Moments (left column): part of the day, heading, one paragraph, excerpt. Same structure every time. ---------- */
.moments { grid-column: 1 / 8; grid-row: 2; padding: 0 40px 96px 0; }
/* each moment is as tall as its words plus one even gap, so the left column never shows a half-empty screen */
.moment { padding-bottom: 88px; }
.moment > * { max-width: var(--measure); }
.moment__time {
  color: var(--muted);
  padding-top: 16px; border-top: 1px solid var(--line);
  margin-bottom: 18px;
}
.moment.is-now .moment__time { color: var(--navy); }
.moment h3 { font-size: var(--fs-h3); line-height: 1.15; margin-bottom: 14px; }
.moment > p:not(.moment__time) { margin-bottom: 32px; }

/* ---------- The thread (right column) ---------- */
.convo { grid-column: 8 / 13; grid-row: 1 / span 2; padding-top: 58px; }
.convo__sticky { position: sticky; top: calc(var(--head-h) + var(--stick)); }
.convo__cap { font-size: var(--fs-s); line-height: 1.45; color: var(--muted); margin-top: 12px; }

.panel {
  display: flex; flex-direction: column;
  /* the panel fits what the moment shows (set by script.js as --ph), up to the screen's room */
  --cap: clamp(520px, calc(100vh - var(--head-h) - var(--stick) - 54px), 660px);
  height: var(--ph, var(--cap));
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  overflow: hidden;
  font-size: var(--fs-s); line-height: 1.45; color: var(--ink);
  box-shadow: 0 1px 2px rgba(19, 34, 64, .04), 0 18px 40px -26px rgba(19, 34, 64, .22);
}
.ic {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.p-bar {
  flex: none; display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 16px; background: var(--tint); border-bottom: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--muted); white-space: nowrap;
}
.p-bar__who { font-weight: 600; color: var(--ink); }
.p-bar__org { font-weight: 400; color: var(--muted); }
.p-bar__org::before {
  content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; vertical-align: middle; margin: 0 8px;
}
.p-bar__num { overflow: hidden; text-overflow: ellipsis; }

.p-view { display: none; flex: 1; min-height: 0; flex-direction: column; }
.p-view.is-active { display: flex; }

.p-head, .snip__head {
  flex: none; display: flex; align-items: center; gap: 11px;
  padding: 12px 16px; border-bottom: 1px solid var(--line); background: #fff;
}
.av {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--soft); color: var(--navy);
  font: 600 var(--fs-xs)/34px var(--f-body); text-align: center; letter-spacing: .03em;
}
.av--sm { width: 26px; height: 26px; line-height: 26px; }
.t-who { display: flex; flex-direction: column; min-width: 0; }
.t-name { font-weight: 600; font-size: var(--fs-s); color: var(--ink); }
.t-sub { font-size: var(--fs-xs); color: var(--muted); }

/* the consent word: plain text and one icon, never red; the reply box's button carries the verdict */
.consent { margin-left: auto; flex: none; display: inline-flex; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.consent .c { display: none; align-items: center; gap: 6px; }
.consent[data-state="pending"] .c--pending,
.consent[data-state="in"] .c--in,
.consent[data-state="out"] .c--out { display: inline-flex; }
.c--pending { color: var(--text); }
.c--in { color: var(--navy); }
.c--out { color: var(--ink); }

/* the CRM, in one line */
.p-sumline {
  flex: none; display: flex; gap: 14px; align-items: center; overflow: hidden; white-space: nowrap;
  padding: 9px 16px; background: #fff; border-bottom: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--text);
}
.p-sumline > span:not(.p-sumline__link) + span:not(.p-sumline__link)::before {
  content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%;
  background: var(--muted); vertical-align: middle; margin: 0 10px 0 -4px;
}
.p-sumline__k { font-weight: 600; color: var(--muted); }
.p-sumline__link { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--navy); }
.p-sumline__link .ic { width: 12px; height: 12px; }
.p-sumline--wrap { flex-wrap: wrap; row-gap: 2px; white-space: normal; }

/* body: messages anchored to the bottom; whole messages only, never a partial bubble */
.p-body { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--chat); }
.p-scroll { position: absolute; inset: 0; overflow: hidden; }
.p-list {
  position: absolute; left: 0; right: 0; bottom: 0;
  list-style: none; margin: 0; padding: 14px 16px 16px;
  display: flex; flex-direction: column;
}
.p-list > li { display: flex; flex-direction: column; }
.p-list > li.is-clipped { opacity: 0; }
/* the day of the topmost message stays pinned once its own label has scrolled away */
.p-pin {
  position: absolute; z-index: 2; top: 10px; left: 50%; transform: translateX(-50%);
  font-size: var(--fs-xs); color: var(--text); background: #eaedf2; border-radius: 999px; padding: 2px 10px;
  opacity: 0; pointer-events: none;
}
.p-pin.is-on { opacity: 1; }

.p-day { align-items: center; margin: 2px 0 8px; }
.p-day span { font-size: var(--fs-xs); color: var(--text); background: #eaedf2; border-radius: 999px; padding: 2px 10px; }

.p-msg { display: flex; flex-direction: column; margin-top: 10px; }
.p-msg--out { align-items: flex-end; }
.p-msg--in { align-items: flex-start; }
.b { max-width: 86%; padding: 10px 14px; border-radius: 16px; font-size: var(--fs-s); line-height: 1.45; text-wrap: pretty; }
.b--out { background: var(--navy); color: #fff; border-bottom-right-radius: 5px; }
.b--in { background: #fff; color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.b--auto { background: var(--soft); color: var(--ink); border-bottom-right-radius: 5px; }
.b__disc {
  display: block; margin-top: 10px; padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, .34);
  color: rgba(255, 255, 255, .94);
}
.b__tag { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; color: #fff; margin-bottom: 2px; }
.b__link { text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }

.meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: var(--fs-xs); color: var(--muted); margin: 6px 2px 0; }
.ok { color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.ok .ic { width: 12px; height: 12px; color: var(--navy); stroke-width: 1.8; }
.tlink { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; display: inline-block; }
.translation { align-self: flex-start; max-width: 86%; margin-top: 10px; border-left: 2px solid var(--navy); padding: 2px 0 2px 12px; }
.translation__label { font-size: var(--fs-xs); color: var(--muted); margin-bottom: 2px; }

/* consent events: centered hairline system lines, all in the same quiet navy */
.p-sys { display: flex; flex-direction: row !important; align-items: center; gap: 12px; margin: 16px 0 6px; }
.p-sys::before, .p-sys::after { content: ""; flex: 1; height: 1px; background: #b9c5d9; }
.p-sys__t { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--navy); white-space: nowrap; }
.p-sys--quiet { margin: 4px 0 2px; }
.p-sys--quiet::before, .p-sys--quiet::after { background: transparent; }
.p-sys--quiet .p-sys__t { font-weight: 400; color: var(--muted); }
.p-sys--quiet .ic { width: 12px; height: 12px; }

/* without JS the panel simply shows the morning thread at its natural height */
html:not(.js) .panel { height: auto; }
html:not(.js) .p-scroll, html:not(.js) .p-list { position: static; }

/* cuts and jumps land in one frame */
.panel.is-cut, .panel.is-cut * { transition: none !important; }

@media (prefers-reduced-motion: no-preference) {
  .p-list > li, .p-pin { transition: opacity .3s var(--ease); }
}

/* EasyDocs card in the thread */
.p-card { margin-top: 12px; }
.dc { background: #fff; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; }
.dc__head { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-bottom: 1px solid var(--line); }
.dc__icon { flex: none; width: 30px; height: 30px; border-radius: 7px; background: var(--soft); color: var(--navy); display: grid; place-items: center; }
.dc__status { margin-left: auto; flex: none; font-size: var(--fs-xs); font-weight: 600; color: var(--navy); white-space: nowrap; }
.dc__row { display: flex; align-items: center; gap: 8px; padding: 9px 12px 0; font-size: var(--fs-xs); color: var(--ink); }
.dc__row .ic { color: var(--navy); }
.dc__t { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); }
.dc__files { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 12px 12px; }
.dc__file { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 9px; align-items: center; }
.dc__slot {
  grid-row: 1 / span 2; position: relative; width: 58px; height: 38px; border-radius: 5px;
  border: 1px dashed var(--line-2);
}
.dc__slot .idcard { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); }
.dc__name { font-size: var(--fs-xs); color: var(--ink); align-self: end; }
.dc__file .dc__t { margin: 0; align-self: start; }
.dc__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); }
.dc__dl { display: inline-flex; align-items: center; gap: 5px; color: var(--navy); font-weight: 600; }

/* live fill: pending steps wait, then arrive */
.dc .is-pending.dc__row, .dc .is-pending .dc__t { opacity: 0; }
.dc .is-pending .idcard { opacity: 0; transform: scale(.9); }
.dc .dc__dl.is-pending { opacity: .45; }
@media (prefers-reduced-motion: no-preference) {
  .dc__row, .dc__t, .idcard, .dc__dl { transition: opacity .45s var(--ease), transform .45s var(--ease); }
}

/* End of day: the record. Every line at full strength, grouped under its part of the day. */
.p-body--rec { background: #fff; overflow: hidden; }
.rec { list-style: none; margin: 0; padding: 6px 16px 10px; }
.rec li {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 10px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--line);
  font-size: var(--fs-s); line-height: 1.35; color: var(--ink);
}
.rec li:last-child { border-bottom: 0; }
.rec__t { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); white-space: nowrap; }
.rec li > span:last-child { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.rec--consent > span:last-child { color: var(--navy); font-weight: 600; }

/* ---------- Stacks: one layer shows at a time. Only the visible layer takes up room;
   the outgoing one leaves the flow at once and fades where it stood. ---------- */
.st { position: relative; display: grid; }
.st > [data-s] { grid-area: 1 / 1; min-width: 0; }
.st > [data-s]:not(.is-on) { position: absolute; top: 0; left: 0; right: 0; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .st > [data-s] { transition: opacity .14s var(--ease); }
  .st > [data-s].is-on { transition: opacity .3s var(--ease) .12s; }
}

/* ---------- The reply box: the field, then the check line and the verdict button on one bar ---------- */
.p-foot { flex: none; background: #fff; border-top: 1px solid var(--line); }
.rb { container-type: inline-size; padding: 12px 16px 12px; background: #fff; }
.rb__field {
  min-height: 40px; padding: 0 12px;
  background: #fff; border: 1px solid var(--line-2); border-radius: 10px;
  font-size: var(--fs-s); line-height: 1.45; color: var(--ink);
}
.rb__field.st > [data-s]:not(.is-on) { left: 12px; right: 12px; }
.rb__ph { color: var(--muted); line-height: 38px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb__draft { padding: 9px 0 10px; }
.rb__tpl { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.rb__field.is-muted,
.p-foot[data-state="morning"] .rb__field,
.p-foot[data-state="late-afternoon"] .rb__field { background: var(--tint); border-color: var(--line); }
.rb .mf { color: var(--navy); text-decoration: underline dotted rgba(0, 50, 130, .6); text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* the flag: the one empty merge field, in the warning color */
.rb .mf--empty {
  display: inline-block; text-decoration: none; padding: 0 6px; margin-left: 1px;
  border-radius: 4px; background: var(--amber-bg); color: var(--amber);
  outline: 1.5px dashed var(--amber-line); outline-offset: -1.5px;
  line-height: 1.45; font-weight: 600;
}

.rb__bar { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.rb__check { flex: 1 1 auto; min-width: 0; font-size: var(--fs-xs); line-height: 1.4; color: var(--text); }
.rb__check > span { display: flex; align-items: flex-start; gap: 7px; }
.rb__check .ic { width: 13px; height: 13px; margin-top: 1px; color: var(--navy); }
.rb__check .is-flag .ic { color: var(--amber-line); }
/* a fixed slot sized to the longest verdict; each verdict keeps its own width, right-aligned, so Send stays compact */
.rb__send { flex: none; width: var(--sbw, auto); justify-items: end; }
.rb__send.st > [data-s]:not(.is-on) { left: auto; right: 0; }
.sb {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 40px; padding: 0 16px; border-radius: 9px;
  background: var(--navy); color: #fff;
  font: 600 var(--fs-s)/1 var(--f-body); white-space: nowrap;
}
.sb--lock { background: var(--soft); color: var(--navy); box-shadow: inset 0 0 0 1px #b9c5d9; }
.sb--flag { background: var(--amber-bg); color: var(--amber); box-shadow: inset 0 0 0 1px #e9c88a; }
.sb--out { background: var(--red-bg); color: var(--red); box-shadow: inset 0 0 0 1px #e3bcb7; }
.sb__short { display: none; }
@container (max-width: 400px) {
  .sb__long { display: none; }
  .sb__short { display: inline; }
}

/* at sign-out the box gives way to the record */
.p-kept { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px 15px; }
.p-kept .ic { width: 18px; height: 18px; margin-top: 1px; color: var(--navy); }
.p-kept p { display: flex; flex-direction: column; font-size: var(--fs-xs); line-height: 1.45; color: var(--text); }
.p-kept strong { font-size: var(--fs-s); font-weight: 600; color: var(--navy); }

/* ---------- Inline thread excerpts (phones, and screen readers everywhere) ---------- */
.snip { margin: 0; max-width: 470px; }
.snip figcaption { font-size: var(--fs-s); line-height: 1.45; color: var(--muted); margin-top: 12px; }
.snip__box {
  border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: #fff;
  font-size: var(--fs-s); line-height: 1.45; color: var(--ink);
  box-shadow: 0 1px 2px rgba(19, 34, 64, .04), 0 12px 32px -18px rgba(19, 34, 64, .16);
}
.snip__head { padding: 10px 14px; gap: 9px; }
.snip .p-sumline { padding: 8px 14px; }
.snip__chat { display: flex; flex-direction: column; padding: 6px 14px 14px; background: var(--chat); }
.snip__chat .dc { margin-top: 12px; }
.rb--snip { border-top: 1px solid var(--line); padding: 12px 14px 12px; }
.rb--solo { border-top: 0; padding-top: 14px; }
.snip .rec { padding: 4px 14px 6px; }
.p-kept--snip { border-top: 1px solid var(--line); padding: 13px 14px 14px; }

/* ---------- Reference sections ---------- */
.sec { padding: 112px 0; border-top: 1px solid var(--line); }
.sec h2 { font-size: var(--fs-h2); line-height: 1.08; max-width: 18em; }
.sec__head { margin-bottom: 52px; }

/* how it works */
.steps { list-style: none; margin: 0; padding: 0; }
.step {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px;
  padding: 52px 0; border-top: 1px solid var(--line);
}
.step:last-child { padding-bottom: 0; }
.step__text { grid-column: 1 / 6; padding-right: 8px; }
.step__n { color: var(--navy); margin-bottom: 12px; }
.step h3 { font-size: var(--fs-h3); line-height: 1.15; margin-bottom: 12px; }
.step__text > p:not(.step__n) { font-size: var(--fs-b2); }
.ticks { list-style: none; padding: 0; margin: 24px 0 0; }
.ticks li { position: relative; padding: 11px 0 11px 28px; border-top: 1px solid var(--line); font-size: var(--fs-m); line-height: 1.5; }
.ticks li::before {
  content: ""; position: absolute; left: 3px; top: 17px; width: 11px; height: 6px;
  border-left: 1.6px solid var(--navy); border-bottom: 1.6px solid var(--navy);
  transform: rotate(-45deg);
}
.shot { grid-column: 7 / 13; margin: 0; align-self: start; }
.shot__plate { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: center; gap: 14px; padding: 44px 32px; background: var(--plate); border-radius: 14px; }
.shot figcaption { font-size: var(--fs-s); color: var(--muted); margin-top: 12px; }
.crop {
  position: relative; overflow: hidden;
  width: calc(var(--w) * 1px); max-width: 100%;
  aspect-ratio: var(--w) / var(--h);
  border-radius: 10px; background: var(--plate-shot);
  box-shadow: 0 0 0 1px var(--shot-ring), 0 14px 34px -20px rgba(19, 34, 64, .24);
}
/* crop boxes in the 1440 x 900 layout of the inbox and supervisor captures (the files are 2x) */
.crop--s1 { --x: 1045; --y: 62; --w: 395; --h: 230; }   /* contact identity block */
.crop--s2 { --x: 0; --y: 62; --w: 440; --h: 400; }      /* conversation list, first four rows */
.crop--s3 { --x: 1045; --y: 520; --w: 395; --h: 160; }  /* activity timeline */
.crop--sup-list { --x: 0; --y: 62; --w: 439; --h: 594; } /* Team Inbox: district, office, agent */
.crop--sup-sent { --x: 758; --y: 644; --w: 678; --h: 104; } /* the Sent by reply */
.crop img {
  position: absolute; max-width: none; height: auto;
  width: calc(1440 / var(--w) * 100%);
  left: calc(var(--x) / var(--w) * -100%);
  top: calc(var(--y) / var(--h) * -100%);
}

/* product theme switch: flips every product screenshot between EasyEngage's light and dark themes */
.sec__head--tools { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.sec__intro { flex: 1 1 560px; min-width: 0; }
.theme { flex: none; display: inline-flex; align-items: center; gap: 12px; }
.theme__label { font-size: var(--fs-s); color: var(--muted); }
.theme__seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--tint); box-shadow: inset 0 0 0 1px var(--line); }
.theme__opt {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px;
  border: 0; border-radius: 7px; background: transparent; color: var(--text);
  font: 600 var(--fs-s)/1 var(--f-body); cursor: pointer;
}
.theme__opt .ic { width: 15px; height: 15px; }
.theme__opt:hover { color: var(--navy); }
.theme__opt[aria-pressed="true"] { background: #fff; color: var(--navy); box-shadow: 0 0 0 1px var(--navy), 0 1px 2px rgba(19, 34, 64, .08); }
.theme__opt[data-shot-theme="dark"][aria-pressed="true"] { background: #0a1426; color: #fff; box-shadow: none; }
.theme__opt:focus-visible { outline-offset: 1px; }
html:not(.js) .theme { display: none; }

/* supervisors: one real screen in a browser frame, then five short points */
.sup__shot { margin: 0; }
.sup__plate { padding: 24px; }
.sup__plate .crop { display: none; }
.frame {
  width: 100%; border-radius: 12px; overflow: hidden; background: var(--plate-shot);
  box-shadow: 0 0 0 1px var(--shot-ring), 0 30px 60px -36px rgba(19, 34, 64, .42);
}
.frame__bar { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 14px; background: var(--frame-bar); border-bottom: 1px solid var(--shot-ring); }
.frame__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--frame-dot); }
.frame img { width: 100%; height: auto; }
/* the whole screen, composer included: its button reads "Send as Priya" */
.sup__full img { aspect-ratio: 1440 / 900; }
.sup__shot figcaption { font-size: var(--fs-s); color: var(--muted); margin-top: 12px; }
.sup__pts { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 28px; }
/* each point spans two rows of the list's grid, so every sentence starts on the same line */
.sup__pts li { border-top: 1px solid var(--line-2); padding-top: 18px; display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 8px; align-content: start; }
.sup__pts h3 {
  font-family: var(--f-body); font-weight: 600; font-stretch: 100%; letter-spacing: 0;
  font-size: var(--fs-b2); line-height: 1.35; color: var(--ink);
}
.sup__pts p { font-size: var(--fs-m); line-height: 1.55; color: var(--text); }

@media (prefers-reduced-motion: no-preference) {
  .shot__plate, .crop, .frame, .frame__bar, .theme__opt { transition: background-color .3s var(--ease), box-shadow .3s var(--ease), color .2s var(--ease); }
}

/* features */
.ess { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
.ess li { border-top: 1px solid var(--line); padding: 20px 0 26px; }
.ess h3, .specs dt {
  font-family: var(--f-body); font-weight: 600; font-stretch: 100%; letter-spacing: 0;
  font-size: var(--fs-b2); line-height: 1.4; color: var(--ink); margin-bottom: 6px;
}
.ess p, .specs dd { font-size: var(--fs-m); line-height: 1.55; color: var(--text); }

/* split layouts: security, FAQ, demo */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.split__head { grid-column: 1 / 6; padding-right: 32px; }
.split__head h2 { max-width: 12em; }
.specs, .faq, .form { grid-column: 6 / 13; }
.specs { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; margin: 0; align-content: start; }
.specs div { border-top: 1px solid var(--line); padding: 20px 0 24px; }
.specs dd { margin: 0; }
.note { font-size: var(--fs-m); color: var(--muted); margin-top: 26px; max-width: 26em; }

/* industries */
.inds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; }
.inds li { border-top: 1px solid var(--line-2); padding-top: 20px; }
.inds__tag { color: var(--navy); margin-bottom: 12px; }
.inds h3 { font-size: var(--fs-l); line-height: 1.25; margin-bottom: 10px; }
.inds li > p:last-child { font-size: var(--fs-m); line-height: 1.6; }

/* FAQ */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 22px 44px 22px 0;
  font-family: var(--f-display); font-size: var(--fs-l); line-height: 1.35; font-weight: 500; font-stretch: 100%;
  color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 14px; height: 1.6px; background: var(--navy);
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
@media (prefers-reduced-motion: no-preference) {
  .faq summary::before, .faq summary::after { transition: transform .3s var(--ease); }
}
.faq details p { padding: 0 0 24px; max-width: 40em; font-size: var(--fs-b2); }

/* demo form */
.sec--demo .ticks { margin-top: 30px; max-width: 26em; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; align-content: start; }
.f--wide { grid-column: 1 / -1; }
.f label { display: block; font-size: var(--fs-m); font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.opt { font-weight: 400; color: var(--muted); white-space: nowrap; }
.f input, .f select, .f textarea {
  width: 100%; height: 50px; padding: 0 14px;
  font: 400 var(--fs-b2)/1.4 var(--f-body); color: var(--ink);
  background: #fff; border: 1px solid var(--field); border-radius: 6px;
}
.f select {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(135deg, var(--navy) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.f textarea { height: auto; padding: 12px 14px; resize: vertical; min-height: 96px; }
.f input:focus-visible, .f select:focus-visible, .f textarea:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy); }
.f [aria-invalid="true"] { border-color: var(--red); }
.f textarea::placeholder { color: var(--muted); }
.form__end { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 6px; }
.form__status { font-size: var(--fs-m); color: var(--ink); }

/* footer */
.foot { border-top: 1px solid var(--line); padding: 52px 0 56px; }
.foot__in { display: grid; grid-template-columns: 1fr auto; gap: 28px 24px; align-items: start; }
.foot__brand svg { width: 150px; height: auto; }
.foot__brand p { font-size: var(--fs-s); color: var(--muted); margin-top: 10px; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 10px 26px; padding-top: 6px; }
.foot__nav a { font-size: var(--fs-m); color: var(--text); text-decoration: none; }
.foot__nav a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 5px; }
.foot__fine { grid-column: 1 / -1; font-size: var(--fs-s); color: var(--muted); border-top: 1px solid var(--line); padding-top: 22px; }

/* peek: the part of the day and the contact's consent state, docked under the header (phones and tablets) */
.peek { display: none; }

/* Reveal: hidden only when JS runs and motion is allowed */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .js .reveal.in { opacity: 1; transform: none; }
}

/* ---------- Desktop: the panel carries the thread, excerpts stay for screen readers ---------- */
@media (min-width: 900px) {
  .js .snip {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  /* the hand-over to the supervisors: once the thread lets go, its caption keeps 40px above the section rule,
     and the eyebrow sits closer to the rule, since the last moment already ends with its own gap */
  .day { padding-bottom: 40px; }
  .sup { padding-top: 64px; }
}

/* short desktop screens: the panel's chrome tightens so more of the thread fits */
@media (min-width: 900px) and (max-height: 820px) {
  .p-bar { padding-top: 7px; padding-bottom: 7px; }
  .p-head { padding-top: 9px; padding-bottom: 9px; }
  .p-sumline { padding-top: 7px; padding-bottom: 7px; }
  .p-list { padding-top: 10px; padding-bottom: 12px; }
  .p-msg { margin-top: 8px; }
  .p-sys { margin: 12px 0 4px; }
  .rb { padding-top: 10px; padding-bottom: 10px; }
  .rb__bar { margin-top: 8px; }
  .b { max-width: 90%; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1179px) {
  :root { --gut: 48px; --fs-h1: 48px; --measure: 560px; }
  .hero { grid-column: 1 / 7; padding-right: 24px; }
  .moments { grid-column: 1 / 7; padding-right: 24px; }
  .convo { grid-column: 7 / 13; }
  .shot__plate { padding: 36px 24px; }
  .nav { gap: 22px; }
  .top__in { gap: 24px; }
  /* supervisors: below 1180 the full screen would shrink past reading size, so two crops of it stand in at full size */
  .sup__full { display: none; }
  .sup__plate { padding: 32px; gap: 24px; }
  .sup__plate .crop { display: block; }
  .sup__pts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
  :root { --gut: 40px; --head-h: 66px; --peek-h: 36px; --fs-h1: 50px; --measure: 600px; }
  .nav { display: none; }
  .top__in { gap: 18px; justify-content: space-between; }

  .day__grid { display: block; }
  .hero { padding: 40px 0 0; }
  .trust { margin-top: 36px; }

  /* phones and tablets: the morning excerpt is the first view of the thread, so the panel steps aside */
  .convo { display: none; }

  .moments { padding: 80px 0 24px; }
  .moment { padding-bottom: 80px; }
  .moment:last-child { padding-bottom: 56px; }

  .peek {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-bottom: 1px solid var(--line);
    opacity: 0; transform: translateY(-6px); pointer-events: none;
  }
  .peek.is-shown { opacity: 1; transform: none; }
  .peek__in { display: flex; align-items: center; gap: 10px; height: 36px; min-width: 0; }
  .peek__t { flex: none; color: var(--navy); }
  .peek__name { flex: none; font-size: var(--fs-s); font-weight: 600; color: var(--ink); }
  .peek__line {
    display: inline-flex; align-items: center; gap: 6px; min-width: 0;
    font-size: var(--fs-s); font-weight: 600; color: var(--navy);
    padding-left: 10px; border-left: 1px solid var(--line-2);
  }
  .peek__line > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .sup__plate { padding: 32px 24px; }
  .sup__pts { grid-template-columns: 1fr 1fr; }

  .step { display: block; padding: 40px 0; }
  .step__text { padding-right: 0; margin-bottom: 28px; }
  .shot { max-width: 560px; }
  .ess { grid-template-columns: 1fr 1fr; }
  .split { display: block; }
  .split__head { padding-right: 0; margin-bottom: 36px; }
  .inds { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .sec { padding: 88px 0; }
}
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  .peek { transition: opacity .3s var(--ease), transform .3s var(--ease); }
}

@media (max-width: 600px) {
  :root { --gut: 20px; --head-h: 60px; --fs-h1: 40px; --fs-h2: 32px; --fs-h3: 24px; --fs-b: 17px; --fs-l: 18px; }
  .logo svg { width: 134px; }
  .btn--sm { height: 38px; padding: 0 14px; }
  .top__in { gap: 12px; }

  .hero { padding-top: 28px; }
  .hero h1 { line-height: 1.06; }
  .lede { margin-top: 18px; }
  .hero__cta { margin-top: 26px; gap: 22px; }
  .trust { margin-top: 28px; }

  .moments { padding-top: 64px; }
  .moment { padding-bottom: 48px; }
  .moment > p:not(.moment__time) { margin-bottom: 22px; }
  .moment__time { margin-bottom: 14px; }
  .moment h3 { margin-bottom: 10px; }
  .b { max-width: 92%; }
  .snip__chat { padding-left: 12px; padding-right: 12px; }
  .rb--snip { padding-left: 12px; padding-right: 12px; }

  .sec h2 { line-height: 1.12; }
  .sec { padding: 52px 0; }
  .sec__head { margin-bottom: 32px; }
  .step { padding: 32px 0; }
  .step__text { margin-bottom: 22px; }
  .ticks { margin-top: 18px; }
  .ticks li { padding: 9px 0 9px 28px; }
  .shot__plate { padding: 14px 12px; border-radius: 12px; gap: 10px; }
  .crop--s2 { --h: 324; }
  .sup__plate { padding: 14px 12px; }
  .sup__plate .crop--sup-sent { display: none; }
  .sup__pts { grid-template-columns: 1fr; row-gap: 0; margin-top: 32px; }
  .sup__pts li { padding: 14px 0 16px; row-gap: 6px; }
  .theme__label { font-size: var(--fs-xs); }
  .theme__opt { height: 44px; }
  .p-bar__org { display: none; }
  .specs, .inds, .form { grid-template-columns: 1fr; }
  /* phones: the features are a checklist of names (their sentences repeat the day and How it works);
     security specs read as run-in lines, a name then its one sentence */
  .ess { grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .ess li { position: relative; padding: 11px 0 12px 22px; }
  .ess li::before {
    content: ""; position: absolute; left: 2px; top: 18px; width: 10px; height: 5px;
    border-left: 1.6px solid var(--navy); border-bottom: 1.6px solid var(--navy); transform: rotate(-45deg);
  }
  .ess h3 { margin: 0; font-size: var(--fs-m); line-height: 1.4; }
  .ess p { display: none; }
  .specs div { padding: 12px 0 13px; }
  .specs dt { display: inline; margin: 0; font-size: var(--fs-m); }
  .specs dt::after { content: ".\00a0"; }
  .specs dd { display: inline; }
  .inds { row-gap: 28px; }
  .faq summary { padding: 18px 40px 18px 0; }
  .foot__in { grid-template-columns: 1fr; }
  .foot { padding: 40px 0 44px; }
}

@media (max-width: 370px) {
  :root { --gut: 16px; --fs-h1: 35px; }
  .top__in { gap: 8px; }
  .logo svg { width: 106px; }
  .btn--sm { padding: 0 10px; height: 36px; }
  .dc__files { grid-template-columns: 1fr; }
  .peek__name { display: none; }
  .sb { padding: 0 12px; }
  .rec li { grid-template-columns: 84px minmax(0, 1fr); }
}