/* ============================================================
   THE CRM PAGE.

   Loaded only on template-crm.php, so the other hundred-odd pages on
   this site pay nothing for it. Everything here is namespaced under
   .crm-page for the same reason: one stylesheet cannot reach out and
   change the documentation.

   THE RESTING STATE IS THE FINISHED STATE. Nothing below starts at
   opacity 0 waiting for a script to rescue it. crm.js sets its own
   starting positions with gsap.set() after GSAP has actually loaded,
   which means a blocked CDN, a failed script or a browser with
   JavaScript off leaves a complete, readable page rather than a blank
   one. That is not a nicety: a good share of this product's buyers
   read it on a phone on a patchy connection.

   MOBILE FIRST. Every block below is written for 375 px and widened
   with min-width queries. A CRM sold to field teams that looks broken
   on the device the field team actually carries is an argument
   against itself.
   ============================================================ */

/* THE MARK'S OWN COLOURS.

   style.css says it plainly at the top of the file: the logo is four
   squares in four colours, they are the identity rather than
   decoration, and they are meant to be used as section accents
   throughout. This page was ignoring that and running on brand blue
   alone, which made it look like a page for a different company.

   So the four take turns down the page: every capability row, every
   leak, every figure and every beat of the journey takes the next one.
   Rotation rather than random, so the same block is the same colour on
   every visit and the page has a rhythm rather than a rash. */
.crm-page {
  --dark: #060F1A;
  --dark-2: #0B1B2D;
  --dark-line: rgba(255, 255, 255, .13);
  --dark-ink: rgba(255, 255, 255, .72);
  --dark-ink-2: rgba(255, 255, 255, .52);
  --glow: #2962FF;

  --m1: var(--c-blue);     /* #3D68B1 */
  --m2: var(--c-green);    /* #1CA74A */
  --m3: var(--c-orange);   /* #F36F21 */
  --m4: var(--c-purple);   /* #583F99 */

  --m1-wash: #EAF0FA;
  --m2-wash: #E7F7EE;
  --m3-wash: #FEF0E7;
  --m4-wash: #EFEBF7;

  /* Each block sets --accent for itself; everything inside reads it,
     so one line per block recolours a whole row. */
  --accent: var(--m1);
  --accent-wash: var(--m1-wash);
}

.crm-page .accent-1 { --accent: var(--m1); --accent-wash: var(--m1-wash); }
.crm-page .accent-2 { --accent: var(--m2); --accent-wash: var(--m2-wash); }
.crm-page .accent-3 { --accent: var(--m3); --accent-wash: var(--m3-wash); }
.crm-page .accent-4 { --accent: var(--m4); --accent-wash: var(--m4-wash); }

/* The table's caption. Present for anybody reading with a screen
   reader, where a comparison table with no caption is eight columns of
   numbers arriving without a sentence to hang them on. Not shown,
   because sighted readers have the heading directly above it. */
.crm-page .screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  white-space: nowrap; margin: -1px; padding: 0; border: 0;
}

/* ---------- shared bits ---------- */

.crm-page .wrap-narrow { max-width: 820px; }

.crm-eyebrow {
  display: flex; align-items: center; gap: 9px;
  font-size: .74rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--brand-ink);
  margin: 0 0 16px;
}
.crm-eyebrow-dark { color: var(--brand-ink); }
.crm-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--glow); box-shadow: 0 0 0 4px rgba(41, 98, 255, .22);
}

.crm-h1 {
  font-family: var(--display);
  font-size: clamp(2.05rem, 6.2vw, 3.55rem);
  line-height: 1.06; letter-spacing: -.028em;
  font-weight: 700; color: #fff; margin: 0 0 20px;
  text-wrap: balance;
}
.crm-h2 {
  font-family: var(--display);
  font-size: clamp(1.6rem, 4.6vw, 2.72rem);
  line-height: 1.1; letter-spacing: -.022em;
  font-weight: 700; margin: 0 0 14px;
}
.crm-sub {
  font-size: clamp(1rem, 2.4vw, 1.12rem);
  line-height: 1.62; color: var(--ink-2); margin: 0 0 8px;
  max-width: 64ch;
}

.crm-head { max-width: 62ch; margin-bottom: 40px; }
.crm-head-left { margin-bottom: 30px; }
.crm-head-light .crm-h2 { color: var(--ink); }
.crm-head-light .crm-sub { color: var(--ink-2); }

.crm-page .btn-lg {
  padding: 15px 26px; font-size: 1.005rem; border-radius: 12px;
}
.crm-page .btn-dark-ghost {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .24);
  color: #fff;
}
.crm-page .btn-dark-ghost:hover {
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .42);
}

/* A frame around a real capture. The bar is not skeuomorphic
   decoration — it says "this is the running product at this address",
   which is the whole claim the picture is making. */
.crm-frame {
  margin: 0; border-radius: 14px; overflow: hidden;
  background: #fff; border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 30px 80px -34px rgba(0, 0, 0, .62);
}
.crm-frame-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 13px; background: #16212F;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.crm-frame-bar span {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255, 255, 255, .22);
}
.crm-frame-bar em {
  margin-left: 10px; font-style: normal;
  font-family: var(--mono); font-size: .68rem;
  color: rgba(255, 255, 255, .46);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crm-frame img { display: block; width: 100%; height: auto; }

/* ---------- 1. hero ----------

   LIGHT, because every page the owner pointed at is light.

   Bigin, Brevo, HubSpot and Zoho CRM are four different companies with
   four different palettes and one shared decision: a near-white page,
   big dark type, colour kept for accents and soft washes. The version
   of this page before it was a navy band from the header to the fold,
   which is a fine look for a developer tool and reads as the wrong
   industry for a CRM sold to a fabrication shop in Rajkot.

   The dark is not gone. It is now punctuation — one band at the end —
   rather than the paper the whole page is printed on. */

.crm-page { background: var(--surface); }

.crm-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, #F6F8FF 0%, #FCFDFF 62%, var(--surface) 100%);
  padding: 34px 0 0;
}
.crm-hero-wash {
  position: absolute; z-index: -1; pointer-events: none;
  inset: -14% -18% auto -18%; height: 96%;
  background:
    radial-gradient(42% 58% at 76% 16%, rgba(41, 98, 255, .17), transparent 68%),
    radial-gradient(34% 46% at 16% 2%, rgba(108, 77, 255, .11), transparent 66%),
    radial-gradient(36% 40% at 94% 72%, rgba(255, 138, 0, .11), transparent 64%);
}

.crm-hero-in { position: relative; padding-bottom: 52px; }
.crm-crumbs { margin-bottom: 22px; }

.crm-badge {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 20px; padding: 7px 15px 7px 12px;
  border-radius: 100px; background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  font-size: .81rem; font-weight: 500; color: var(--ink-2);
}

.crm-h1 { color: var(--ink); }
.crm-lede {
  font-size: clamp(1.02rem, 2.5vw, 1.18rem);
  line-height: 1.6; color: var(--ink-2);
  max-width: 50ch; margin: 0 0 28px;
}

.crm-hero-actions {
  display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px;
}
.crm-hero-actions .btn { flex: 1 1 auto; justify-content: center; }
.crm-page .btn-lg { padding: 15px 26px; font-size: 1.005rem; border-radius: 12px; }

.crm-reassure { margin: 0; font-size: .87rem; color: var(--ink-3); }

/* ---------- the product, in readable pieces ----------

   Three rectangles cut out of three real captures, each shown at close
   to its own scale and overlapped the way Brevo and HubSpot overlap
   theirs. The crop maths lives in parts/crm-shot.php. */

.cshot {
  margin: 0; border-radius: 13px; overflow: hidden; background: var(--surface);
}
.cshot-win { position: relative; overflow: hidden; }
.cshot-win[style*="--cw"] { aspect-ratio: var(--cw) / var(--ch); }
.cshot-win img {
  display: block; max-width: none; width: 100%; height: auto;
}
/* A percentage top margin resolves against the containing block's
   WIDTH, not its height. That is the quiet fact this whole mechanism
   rests on: it lets one ratio drive both offsets, so the crop holds at
   every screen size without a line of JavaScript. */
.cshot-win[style*="--cw"] img {
  width: calc(var(--sw) / var(--cw) * 100%);
  margin-left: calc(var(--cx) / var(--cw) * -100%);
  margin-top: calc(var(--cy) / var(--cw) * -100%);
}

.crm-hero-art { position: relative; margin-top: 36px; padding-bottom: 54px; }
.frag {
  border-radius: 13px; overflow: hidden; background: var(--surface);
  box-shadow: 0 1px 0 rgba(13, 27, 42, .06), 0 22px 54px -22px rgba(13, 27, 42, .34);
}
.frag-a { width: 100%; }
.frag-b {
  position: absolute; right: 0; bottom: 8px; width: 56%; max-width: 240px;
}
.frag-c {
  position: absolute; left: 0; bottom: -10px; width: 54%; max-width: 268px;
}
.frag-pill {
  position: absolute; right: 6%; top: -14px;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 11px; border-radius: 100px;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 14px 34px -12px rgba(13, 27, 42, .3);
  font-size: .77rem; white-space: nowrap;
}
.frag-pill b { font-weight: 600; color: var(--ink); }
.frag-pill em {
  font-style: normal; color: var(--ok-ink); font-weight: 600;
  padding-left: 8px; border-left: 1px solid var(--line);
}
.frag-pill-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 3px rgba(46, 204, 113, .25); flex: none;
}

/* ---------- 1b. the section bar ----------
   Kept, because it is the one part of the last attempt that worked. */

.crm-page [id] { scroll-margin-top: 124px; }

.crm-jump {
  position: sticky; top: 70px; z-index: 70;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.crm-jump-in { display: flex; align-items: center; gap: 14px; min-height: 54px; }
.crm-jump ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 2px; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.crm-jump ul::-webkit-scrollbar { display: none; }
.crm-jump li { flex: 0 0 auto; }
.crm-jump a {
  display: block; padding: 9px 12px; border-radius: 9px;
  font-size: .855rem; font-weight: 500; white-space: nowrap;
  color: var(--ink-2); text-decoration: none;
  transition: color .16s var(--ease), background .16s var(--ease);
}
.crm-jump a:hover { color: var(--ink); background: var(--ground); text-decoration: none; }
.crm-jump a[aria-current="true"] { color: var(--brand-ink); background: var(--brand-wash); }
.crm-jump-cta {
  flex: 0 0 auto; padding: 9px 17px; font-size: .86rem; border-radius: 9px;
  display: none;
}

/* ---------- 2. the figures ---------- */

.crm-figures {
  background: var(--ground);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 30px 0;
}
.crm-figs {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 22px 26px; grid-template-columns: repeat(2, 1fr);
}
.crm-figs li {
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
  padding-top: 14px; border-top: 3px solid var(--accent);
}
.crm-figs li:nth-child(1) { --accent: var(--m1); }
.crm-figs li:nth-child(2) { --accent: var(--m2); }
.crm-figs li:nth-child(3) { --accent: var(--m3); }
.crm-figs li:nth-child(4) { --accent: var(--m4); }
.crm-figs b {
  font-family: var(--display); font-size: clamp(1.7rem, 5.4vw, 2.3rem);
  line-height: 1; color: var(--ink); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.crm-figs span { font-size: .845rem; line-height: 1.45; color: var(--ink-2); }

/* ---------- 3. the leaks ---------- */

.crm-leak { background: var(--surface); }
.crm-leaks {
  list-style: none; margin: 0 0 32px; padding: 0;
  display: grid; gap: 14px;
}
.crm-leaks li {
  position: relative; padding: 22px 22px 22px 20px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
  border-left: 3px solid var(--accent);
}
.crm-leaks li:nth-child(1) { --accent: var(--m1); }
.crm-leaks li:nth-child(2) { --accent: var(--m2); }
.crm-leaks li:nth-child(3) { --accent: var(--m3); }
.crm-leaks li:nth-child(4) { --accent: var(--m4); }
.crm-leaks li:nth-child(5) { --accent: var(--brand); }
.crm-leak-n {
  font-family: var(--mono); font-size: .72rem; font-weight: 500;
  color: var(--accent); letter-spacing: .08em;
}
.crm-leaks h3 {
  font-family: var(--display); font-size: 1.1rem;
  margin: 7px 0 7px; line-height: 1.25; letter-spacing: -.012em;
}
.crm-leaks p { margin: 0; font-size: .945rem; line-height: 1.58; color: var(--ink-2); }

.crm-leak-note {
  font-size: 1.02rem; line-height: 1.62; color: var(--ink-2);
  max-width: 68ch; margin: 30px 0 0;
  padding-left: 18px; border-left: 3px solid var(--brand);
}

/* ---------- 4. the stage ---------- */

.crm-stage {
  background: var(--ground); color: var(--ink);
  padding: 64px 0 70px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.crm-tablist {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px;
  margin: 0 0 22px; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.crm-tablist::-webkit-scrollbar { display: none; }
.crm-tab {
  flex: 0 0 auto; min-width: 0; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 16px; border-radius: 11px;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-2); font: inherit;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.crm-tab b { font-size: .95rem; color: var(--ink); font-weight: 600; }
.crm-tab span { font-size: .76rem; color: var(--ink-3); }
.crm-tab:hover { border-color: #C3CCDA; }
.crm-tab[aria-selected="true"] { background: var(--brand); border-color: var(--brand); }
.crm-tab[aria-selected="true"] b { color: #fff; }
.crm-tab[aria-selected="true"] span { color: rgba(255, 255, 255, .82); }

/* The tabs are JavaScript. Without it nobody can change panel, so
   stack all six rather than showing one screen and hiding five. */
html:not(.js) .crm-tablist { display: none; }
html:not(.js) .crm-panel { display: block; margin-bottom: 30px; }

.crm-panel .crm-frame { border-color: var(--line); }
.crm-cap {
  margin: 16px 0 0; font-size: .93rem; line-height: 1.6;
  color: var(--ink-2); max-width: 76ch;
}
.crm-cap b { color: var(--ink); }

/* ---------- 5. the capabilities ---------- */

.crm-caps { padding-bottom: 0; }
.cap { padding: 34px 0; }
.cap:nth-child(even) { background: var(--ground); }
.cap:nth-child(4n+1) { --accent: var(--m1); --accent-wash: var(--m1-wash); }
.cap:nth-child(4n+2) { --accent: var(--m2); --accent-wash: var(--m2-wash); }
.cap:nth-child(4n+3) { --accent: var(--m3); --accent-wash: var(--m3-wash); }
.cap:nth-child(4n+4) { --accent: var(--m4); --accent-wash: var(--m4-wash); }
.cap-in { display: grid; gap: 30px; }

.cap-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .72rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 14px;
  padding: 6px 12px; border-radius: 100px;
  background: var(--accent-wash);
}
.cap-title {
  font-family: var(--display); font-size: clamp(1.4rem, 4vw, 2.05rem);
  line-height: 1.14; letter-spacing: -.02em; margin: 0 0 12px;
}
.cap-lede {
  font-size: 1.02rem; line-height: 1.62; color: var(--ink-2);
  margin: 0 0 22px; max-width: 58ch;
}
.cap-points { margin: 0; display: grid; gap: 16px; }
.cap-points div {
  padding-left: 16px; border-left: 2px solid var(--accent-wash);
}
.cap-points div:first-child { border-left-color: var(--accent); }
.cap-points dt {
  font-weight: 600; font-size: .97rem; color: var(--ink);
  margin-bottom: 4px; line-height: 1.35;
}
.cap-points dd {
  margin: 0; font-size: .92rem; line-height: 1.6; color: var(--ink-2);
}
.cap-visual { min-width: 0; }
.cap-frame {
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px -30px rgba(13, 27, 42, .45);
}

/* ---------- 6. the drawings ---------- */

.art { min-width: 0; }

/* duplicates */
.art-dupe {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 20px;
  box-shadow: var(--shadow);
}
.dupe-pair {
  display: grid; grid-template-columns: 1fr; gap: 10px;
  align-items: center;
}
.dupe-card {
  border: 1px solid var(--line); border-radius: 13px; padding: 14px;
  background: var(--surface); min-width: 0;
}
.dupe-card-new { border-color: var(--gold); background: var(--gold-wash); }
.dupe-tag {
  font-size: .64rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px;
}
.dupe-tag-new { color: #A85800; }
.dupe-card b {
  display: block; font-family: var(--display); font-size: 1rem;
  margin-bottom: 10px; line-height: 1.25;
}
.dupe-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dupe-card li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px;
  font-size: .79rem; padding: 5px 7px; border-radius: 7px;
}
.dupe-card li span { color: var(--ink-3); flex: none; }
.dupe-card li em {
  font-style: normal; font-family: var(--mono); font-size: .72rem;
  color: var(--ink); text-align: right; min-width: 0; flex: 1 1 auto;
  overflow-wrap: anywhere;
}
.dupe-card li[data-dupe-row] { background: var(--brand-wash); }
.dupe-link { width: 100%; height: 46px; transform: rotate(90deg); }
.dupe-verdict {
  margin: 14px 0 0; font-size: .88rem; line-height: 1.55;
  color: var(--ink-2); padding: 12px 14px;
  background: var(--brand-wash); border-radius: 11px;
}
.dupe-verdict b { color: var(--brand-ink); }

/* the timeline */
.art-timeline {
  border-radius: var(--radius-lg); padding: 20px 18px;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.tl { list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; display: grid; gap: 15px; }
.tl::before {
  content: ''; position: absolute; left: 4px; top: 6px; bottom: 6px;
  width: 1px; background: #CFDCFF;
}
.tl li { position: relative; min-width: 0; }
.tl-dot {
  position: absolute; left: -22px; top: 5px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 3px rgba(41, 98, 255, .16);
}
.tl li[data-tl-kind="visit"] .tl-dot,
.tl li[data-tl-kind="doc"] .tl-dot {
  background: var(--gold); box-shadow: 0 0 0 3px rgba(255, 138, 0, .18);
}
.tl b { display: block; font-size: .85rem; color: var(--ink); font-weight: 600; line-height: 1.35; }
.tl em {
  display: block; font-style: normal; font-size: .81rem; line-height: 1.5;
  color: var(--ink-2); margin-top: 3px;
}
.tl time {
  display: block; font-family: var(--mono); font-size: .68rem;
  color: var(--ink-3); margin-top: 5px;
}

/* the field types */
.art-fields {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow);
}
.fields-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  font-size: .765rem; padding: 6px 11px; border-radius: 100px;
  background: var(--ground); border: 1px solid var(--line);
  color: var(--ink-2); white-space: nowrap;
}
.chip:nth-child(6n+1) { background: var(--brand-wash); border-color: #CFDCFF; color: var(--brand-ink); }
.chip:nth-child(9n+4) { background: var(--gold-wash); border-color: #FFDFB8; color: #8A4B00; }
.fields-foot {
  margin: 16px 0 0; font-size: .87rem; line-height: 1.55; color: var(--ink-2);
}
.fields-foot b { color: var(--ink); }

/* who sees what */
.art-control {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 6px; box-shadow: var(--shadow);
  overflow: hidden;
}
.ctl-row {
  display: grid; grid-template-columns: 1.1fr 1.4fr auto;
  gap: 10px; align-items: center; padding: 13px 14px;
  border-bottom: 1px solid var(--line); min-width: 0;
}
.ctl-row:last-of-type { border-bottom: 0; }
.ctl-row-head {
  font-size: .66rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
  background: var(--ground); border-radius: 11px; padding: 9px 14px;
}
.ctl-row b { display: block; font-size: .89rem; line-height: 1.3; }
.ctl-row em {
  display: block; font-style: normal; font-size: .74rem; color: var(--ink-3); margin-top: 2px;
}
.ctl-scope {
  font-size: .78rem; line-height: 1.4; padding: 6px 10px;
  border-radius: 8px; min-width: 0;
}
.ctl-own   { background: #F2F4F7; color: var(--ink-2); }
.ctl-team  { background: var(--brand-wash); color: var(--brand-ink); }
.ctl-all   { background: #E8F7EE; color: var(--ok-ink); }
.ctl-share { background: var(--gold-wash); color: #8A4B00; }
.ctl-yes, .ctl-no {
  font-size: .74rem; font-weight: 600; padding: 4px 9px;
  border-radius: 100px; white-space: nowrap;
}
.ctl-yes { background: #E8F7EE; color: var(--ok-ink); }
.ctl-no  { background: #F2F4F7; color: var(--ink-3); }
.ctl-foot {
  margin: 0; padding: 13px 14px 8px; font-size: .84rem;
  line-height: 1.55; color: var(--ink-2);
}

/* the field visit — the real phone screen on a tinted panel */
.art-field {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  padding: 22px; background: var(--brand-wash);
  border: 1px solid #DCE6FF;
  display: grid; gap: 18px; align-items: center;
}
.field-phone {
  width: 180px; justify-self: center;
  border-radius: 18px; overflow: hidden; border: 5px solid #16212F;
  box-shadow: 0 26px 56px -20px rgba(13, 27, 42, .5);
}
.field-phone img { display: block; width: 100%; height: auto; }
.field-pin {
  position: absolute; left: 18px; top: 18px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 11px; padding: 9px 12px 10px 30px; max-width: 72%;
  box-shadow: var(--shadow-sm);
}
.field-pin b { display: block; font-size: .8rem; color: var(--ink); font-weight: 600; }
.field-pin em {
  display: block; font-style: normal; font-family: var(--mono);
  font-size: .63rem; color: var(--ink-3); margin-top: 3px;
}
.field-pin-ring {
  position: absolute; left: 12px; top: 15px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0 3px rgba(46, 204, 113, .24);
}
.field-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.field-notes li {
  display: flex; gap: 10px; align-items: baseline;
  padding: 9px 12px; border-radius: 9px;
  background: var(--surface); border: 1px solid #DCE6FF;
}
.field-notes b {
  font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); flex: 0 0 74px; font-weight: 600;
}
.field-notes span { font-size: .84rem; color: var(--ink); }

/* the tax regimes, drawn */
.art-reach {
  border-radius: var(--radius-lg); padding: 18px;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.reach-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.reach-list li {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 13px 14px; border-radius: 12px;
  background: var(--ground); border: 1px solid var(--line);
}
.reach-list li.lead { background: var(--brand-wash); border-color: #CFDCFF; }
.reach-code {
  flex: 0 0 46px; text-align: center;
  font-family: var(--mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .04em; color: var(--ink-2);
  padding: 5px 0; border-radius: 7px; background: var(--surface);
  border: 1px solid var(--line);
}
.reach-list li.lead .reach-code { background: var(--brand); color: #fff; border-color: var(--brand); }
.reach-body { min-width: 0; }
.reach-body b { display: block; font-size: .9rem; color: var(--ink); font-weight: 600; }
.reach-body em {
  display: block; font-style: normal; font-size: .81rem; line-height: 1.5;
  color: var(--ink-2); margin-top: 3px;
}
.reach-foot { margin: 14px 2px 2px; font-size: .84rem; line-height: 1.55; color: var(--ink-2); }

/* ---------- 7. beyond india ---------- */

.crm-reach { background: var(--surface); padding: 62px 0; }
.crm-reach-in { display: grid; gap: 30px; }

/* ---------- 8. industries ---------- */

.ind-grid { display: grid; gap: 12px; }
.ind {
  display: block; padding: 18px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface);
  color: inherit; text-decoration: none;
  transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.ind:nth-child(4n+1) { --accent: var(--m1); }
.ind:nth-child(4n+2) { --accent: var(--m2); }
.ind:nth-child(4n+3) { --accent: var(--m3); }
.ind:nth-child(4n+4) { --accent: var(--m4); }
.ind { border-top: 3px solid var(--accent); }
.ind:hover {
  border-color: var(--line); border-top-color: var(--accent);
  transform: translateY(-2px); box-shadow: var(--shadow);
}
.ind h3 {
  font-family: var(--display); font-size: 1rem; margin: 0 0 6px;
  line-height: 1.25; letter-spacing: -.012em;
}
.ind p { margin: 0 0 10px; font-size: .875rem; line-height: 1.55; color: var(--ink-2); }
.ind-go { display: none; font-size: .78rem; font-weight: 600; color: var(--accent); }
@media (min-width: 620px) { .ind-go { display: block; } }

/* ---------- 9. the comparison ---------- */

.crm-versus {
  background: var(--ground); color: var(--ink); padding: 62px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
/* min-width:0 is load-bearing. A grid or flex child defaults to
   min-width:auto, which means it refuses to be narrower than its
   content — and a scroll container that cannot be narrower than the
   table inside it never scrolls, it just pushes the page sideways. */
.vs-scroll { min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vs {
  width: 100%; min-width: 660px; border-collapse: collapse;
  font-size: .86rem;
}
.vs th, .vs td {
  text-align: left; padding: 13px 14px; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.vs thead th {
  font-size: .7rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
  border-bottom-color: #D7DBE2;
}
.vs tbody th { font-weight: 600; color: var(--ink); width: 25%; }
.vs td { color: var(--ink-2); }
.vs .vs-us { color: var(--brand-ink); background: var(--brand-wash); font-weight: 500; }
.vs thead .vs-us { color: #fff; background: var(--brand); }
.vs tbody tr:last-child th, .vs tbody tr:last-child td { border-bottom: 0; }
.vs-note {
  margin: 24px 0 0; font-size: .9rem; line-height: 1.62;
  color: var(--ink-2); max-width: 74ch;
  padding-left: 18px; border-left: 2px solid var(--brand);
}

/* ---------- 10. three weeks ---------- */

.days { display: grid; gap: 14px; }
.day {
  padding: 22px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface);
}
.day-who {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brand-ink); margin: 0 0 14px;
}
.day ol { margin: 0; padding-left: 18px; display: grid; gap: 10px; }
.day li { font-size: .9rem; line-height: 1.58; color: var(--ink-2); }
.day li b { color: var(--ink); }
.day li::marker { color: var(--brand); font-variant-numeric: tabular-nums; }

/* ---------- 11. pricing notes ---------- */

.crm-pricing .pricing-notes { margin-top: 34px; }

/* ---------- 12. questions ----------

   Two parts. Twelve accordions stacked down the middle of an 820px
   column was two thousand pixels of identical grey bars — the tallest
   block on the page made out of the shortest content on it. The
   heading and the way out now hold the left while the questions run
   down the right, which halves the height and gives the eye an anchor.

   The bars themselves are gone too. A boxed card per question turns a
   list into a stack of containers; a hairline between rows, a question
   set at reading size and a round marker is how a serious publication
   sets a list of questions. */

.crm-faq { padding-top: 76px; padding-bottom: 76px; }
.crm-faq-in { display: grid; gap: 30px; align-items: start; }

.crm-faq-side .crm-sub { margin-bottom: 20px; }
.crm-faq-ask { display: flex; flex-wrap: wrap; gap: 10px; }
.crm-faq-ask .btn { flex: 1 1 auto; justify-content: center; }

.faqs {
  display: grid; border-top: 1px solid var(--line);
}
.faq { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; position: relative;
  display: flex; align-items: flex-start; gap: 16px;
  padding: 20px 0; font-size: 1.02rem; font-weight: 600;
  line-height: 1.42; color: var(--ink);
  transition: color .16s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { flex: 1 1 auto; min-width: 0; }
.faq summary:hover { color: var(--brand-ink); }
.faq summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* The marker: a plus that becomes a minus. Two bars, one rotated,
   which is four lines of CSS and reads at a glance — unlike a chevron,
   which says "there is more below" rather than "this opens". */
.faq summary::before,
.faq summary::after {
  content: ''; position: absolute; right: 3px; top: 30px;
  width: 13px; height: 2px; border-radius: 2px;
  background: var(--ink-3);
  transition: transform .24s var(--ease), background .16s var(--ease);
}
.faq summary::after { transform: rotate(90deg); }
.faq[open] summary::after { transform: rotate(0deg); }
.faq[open] summary::before,
.faq[open] summary::after { background: var(--brand); }
.faq summary { padding-right: 34px; }

.faq-a { padding: 0 34px 22px 0; }
.faq-a p {
  margin: 0; font-size: .95rem; line-height: 1.68; color: var(--ink-2);
  max-width: 62ch;
}

/* ---------- 13. the last ask ----------

   Light. It was a navy block, and on a page that is now white from top
   to bottom a single dark slab at the end does not read as punctuation
   — it reads as a piece of a different website that got left behind.
   The four mark colours do the work instead, as a soft wash. */

.crm-end {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--surface); padding: 76px 0 84px; text-align: center;
  border-top: 1px solid var(--line);
}
.crm-end-wash {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 62% at 12% 100%, rgba(61, 104, 177, .16), transparent 66%),
    radial-gradient(34% 56% at 38% 0%, rgba(28, 167, 74, .12), transparent 64%),
    radial-gradient(34% 58% at 66% 100%, rgba(243, 111, 33, .13), transparent 64%),
    radial-gradient(38% 60% at 92% 4%, rgba(88, 63, 153, .14), transparent 66%);
}
.crm-end .crm-eyebrow { justify-content: center; }
.crm-end .crm-h2 { color: var(--ink); }
.crm-end .crm-sub { color: var(--ink-2); margin: 0 auto 28px; }
.crm-end-in { position: relative; max-width: 660px; }
.crm-end .crm-hero-actions { justify-content: center; }

.crm-hero-trust {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center;
  font-size: .87rem; color: var(--ink-3);
}
.crm-hero-trust li { display: flex; align-items: center; gap: 8px; }
.crm-hero-trust li::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ok); flex: none;
}

/* ============================================================
   THE MODULE PAGES

   Fourteen pages sharing one shape, driven by data/modules.php. They
   reuse every class above — the hero, the section bar, the capability
   rows, the two-part FAQ, the closing band — so the only new rules are
   the three blocks the CRM page does not have: who opens it, what
   changes afterwards, and what it is switched on beside.
   ============================================================ */

.mod-heroshot { box-shadow: 0 -2px 0 rgba(255,255,255,.06), 0 40px 90px -30px rgba(13, 27, 42, .38); }

/* The CRM hero is two columns — words on the left, product fragments on
   the right — so its copy column is capped at 44vw. A module hero has no
   side art; the product sits underneath it at full width. Inheriting the
   cap left the headline wrapping to four lines beside half a screen of
   nothing. */
@media (min-width: 900px) {
  .mod-page .crm-hero-copy { width: auto; max-width: 820px; }
  .mod-page .crm-lede { max-width: 66ch; }
}

.mod-grid { display: grid; gap: 12px; }
.mod-card {
  padding: 20px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface);
  border-top: 3px solid var(--accent);
}
.mod-card:nth-child(4n+1) { --accent: var(--m1); }
.mod-card:nth-child(4n+2) { --accent: var(--m2); }
.mod-card:nth-child(4n+3) { --accent: var(--m3); }
.mod-card:nth-child(4n+4) { --accent: var(--m4); }
.mod-card h3 {
  font-family: var(--display); font-size: 1.02rem; margin: 0 0 8px;
  line-height: 1.25; letter-spacing: -.012em; color: var(--ink);
}
.mod-card p { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--ink-2); }

.mod-card-link { display: block; color: inherit; text-decoration: none; transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); }
.mod-card-link:hover { transform: translateY(-2px); box-shadow: var(--shadow); text-decoration: none; }

/* what changes afterwards — deliberately few and deliberately large,
   because three outcomes stated plainly outsell nine features */
.mod-gains { display: grid; gap: 16px; }
.mod-gainer {
  position: relative; padding: 24px 22px 24px 62px;
  border-radius: var(--radius-lg); background: var(--ground);
  border: 1px solid var(--line);
}
.mod-gainer:nth-child(4n+1) { --accent: var(--m1); --accent-wash: var(--m1-wash); }
.mod-gainer:nth-child(4n+2) { --accent: var(--m2); --accent-wash: var(--m2-wash); }
.mod-gainer:nth-child(4n+3) { --accent: var(--m3); --accent-wash: var(--m3-wash); }
.mod-gainer:nth-child(4n+4) { --accent: var(--m4); --accent-wash: var(--m4-wash); }
.mod-gain-n {
  position: absolute; left: 20px; top: 24px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-family: var(--display); font-size: .86rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.mod-gainer h3 {
  font-family: var(--display); font-size: 1.14rem; margin: 0 0 8px;
  line-height: 1.25; letter-spacing: -.016em; color: var(--ink);
}
.mod-gainer p { margin: 0; font-size: .95rem; line-height: 1.62; color: var(--ink-2); }

/* Every page on this site admits a limit. It is the cheapest trust a
   marketing page can buy and almost nobody spends it. */
.mod-notfor {
  margin: 30px 0 0; padding: 16px 18px; border-radius: var(--radius);
  background: var(--gold-wash); border: 1px solid #FFDFB8;
  font-size: .93rem; line-height: 1.62; color: #6B3A00; max-width: 78ch;
}
.mod-notfor b { color: #8A4B00; }

/* A capability row with no capture: its points become the object
   rather than sitting under the lede, so the row still has two halves
   and the page does not fall into a column of prose. */
.cap-points-card {
  padding: 22px; border-radius: var(--radius-lg);
  background: var(--ground); border: 1px solid var(--line);
}
.cap-points-card div { border-left-color: var(--accent); }

@media (min-width: 620px) {
  .mod-grid { grid-template-columns: repeat(2, 1fr); }
  .mod-gains { gap: 18px; }
}

@media (min-width: 900px) {
  .mod-grid { grid-template-columns: repeat(3, 1fr); }
  .mod-gains { grid-template-columns: repeat(3, 1fr); }
  .mod-gainer { padding: 26px 24px 26px 24px; }
  .mod-gain-n { position: static; margin-bottom: 14px; }
  /* A row whose object is a list of points does not need the picture
     to keep pace with the prose, so it does not stick. */
  .cap-noshot .cap-visual { position: static; }
}

/* ============================================================
   WIDER SCREENS
   ============================================================ */

@media (min-width: 620px) {
  .crm-jump-cta { display: inline-flex; }
  .crm-hero-actions .btn { flex: 0 0 auto; }
  /* Sixteen trades, one under another, is nine hundred pixels of
     scrolling for a list somebody is scanning for one word. */
  .ind { padding: 16px; }
  .crm-figs { gap: 26px 34px; }
  .crm-leaks { grid-template-columns: repeat(2, 1fr); }
  .ind-grid { grid-template-columns: repeat(2, 1fr); }
  .days { grid-template-columns: repeat(2, 1fr); }
  .dupe-pair { grid-template-columns: 1fr 64px 1fr; gap: 0; }
  .dupe-link { height: 190px; transform: none; }
  .reach-pills { grid-template-columns: repeat(2, 1fr); gap: 10px 16px; }
}

@media (min-width: 900px) {
  /* Words left, product right, the way all four reference pages do it.
     The columns are sized so they cannot meet: 46 + 50 leaves four
     viewport per cent of daylight at every width above 900. */
  .crm-hero { padding-top: 58px; }
  .crm-hero-in {
    display: grid; grid-template-columns: 46fr 50fr;
    gap: 4%; align-items: center; padding-bottom: 82px;
  }
  .crm-hero-copy { min-width: 0; }
  .crm-hero-art { margin-top: 0; padding-bottom: 0; min-height: 340px; }

  /* Overlapped, not scattered. The first arrangement placed the three
     with bottom offsets, which spread them to the corners of a tall box
     and left a hole in the middle — three small pictures floating in
     space rather than one composition. Driving all three from the top
     instead puts them in a deliberate stack: each one sits over the
     corner of the one above it, which is what Brevo and HubSpot do and
     why theirs reads as an object rather than a scatter. */
  .frag-a { position: absolute; left: 0; top: 0; width: 100%; }
  .frag-b { position: absolute; right: -22px; top: 152px; width: 278px; max-width: none; }
  .frag-c { position: absolute; left: 0; top: 252px; width: 352px; max-width: none; }
  .frag-pill { right: 8%; top: -18px; }

  .crm-figs { grid-template-columns: repeat(4, 1fr); }

  .crm-leaks { grid-template-columns: repeat(3, 1fr); }
  .crm-leaks li:nth-child(4) { grid-column: span 1; }

  /* THE PICTURE RIDES ALONG, IT DOES NOT FLOAT IN THE MIDDLE.

     These rows pair a tall column of prose — a lede and four points, so
     eight hundred pixels or more — with a cropped screenshot two
     hundred pixels tall. Centred, that put a small picture in the
     middle of an enormous empty rectangle, which is exactly what it
     looked like: a design with a hole in it.

     Aligned to the top and made sticky, the picture starts beside the
     first point and stays beside whichever point the reader has
     reached. The dead space is gone because there is no longer a tall
     row with one short thing in it — there is a column of text and a
     picture keeping pace with it. */
  .cap { padding: 58px 0; }
  .cap-in { grid-template-columns: 1fr 1fr; gap: 54px; align-items: start; }
  .cap-flip .cap-copy { order: 2; }
  .cap-flip .cap-visual { order: 1; }
  .cap-visual { position: sticky; top: 148px; }

  .crm-reach-in { grid-template-columns: 1fr 1.05fr; gap: 50px; align-items: center; }

  .crm-faq-in { grid-template-columns: 1fr 1.42fr; gap: 64px; }
  .crm-faq-side { position: sticky; top: 148px; }
  .crm-faq-ask .btn { flex: 0 0 auto; }

  .ind-grid { grid-template-columns: repeat(4, 1fr); }
  .days { grid-template-columns: repeat(3, 1fr); }

  .crm-stage { padding: 82px 0 88px; }
  .crm-tablist { gap: 10px; }
  .crm-tab { padding: 13px 18px; }
}

@media (min-width: 1100px) {
  .cap-in { gap: 72px; }
  .cap-points { gap: 18px; }
}

/* ============================================================
   MOTION
   The page is finished without any of this. Everything below is
   something crm.js does on top, and everything below stops when the
   reader has said they do not want it.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .crm-page * ,
  .crm-page *::before,
  .crm-page *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   ONE ENQUIRY, FIVE DAYS

   ONE OBJECT, AT THE SIZE OF A HEADLINE.

   What this replaced cross-faded six captions beside six cropped
   screenshots. Four replacement concepts were designed and judged, and
   all four art directors gave the same verdict for the same reason: a
   grid of twelve equal small things has no hierarchy, and a hand-drawn
   copy of a screenshot is the weakness of the screenshot with more
   authoring cost. So there is exactly one object here, it is large,
   and everything else on the stage is a thin supporting mark.

   THE BASE STATE IS THE PHONE. Everything below the media query is
   what a phone gets, what a blocked script gets, and what somebody who
   has asked for less motion gets: the five steps as five blocks of
   prose, with the scrap at the top and the invoice at the end — the
   before and the after, which is the whole argument. The pinned
   cross-fade is an enhancement on top of a section that already works.
   ============================================================ */

.oe { background: var(--surface); }
.oe-intro { padding: 70px 0 6px; }

.oe-track { position: relative; }
.oe-stage { position: relative; }
.oe-in { display: grid; gap: 26px; }

/* ---------- the five notes ---------- */

.oe-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.oe-note { min-width: 0; }
.oe-note:nth-child(5n+1) { --accent: var(--m1); --accent-wash: var(--m1-wash); }
.oe-note:nth-child(5n+2) { --accent: var(--m2); --accent-wash: var(--m2-wash); }
.oe-note:nth-child(5n+3) { --accent: var(--m3); --accent-wash: var(--m3-wash); }
.oe-note:nth-child(5n+4) { --accent: var(--m4); --accent-wash: var(--m4-wash); }
.oe-note:nth-child(5n+5) { --accent: var(--brand); --accent-wash: var(--brand-wash); }

.oe-when {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: .69rem; letter-spacing: .04em;
  color: var(--accent); background: var(--accent-wash);
  padding: 5px 11px; border-radius: 100px; margin: 0 0 12px;
}
.oe-step {
  font-family: var(--display);
  font-size: clamp(1.3rem, 4.6vw, 1.86rem);
  line-height: 1.18; letter-spacing: -.02em; font-weight: 700;
  color: var(--ink); margin: 0 0 10px;
}
.oe-line {
  margin: 0; font-size: .98rem; line-height: 1.64; color: var(--ink-2);
  max-width: 48ch;
}

/* ---------- the object ---------- */

.oe-object { min-width: 0; }
.oe-frame { position: relative; }
.oe-state { min-width: 0; }

/* Only the first and the last are shown when the stage is not pinned.
   On a phone the middle three are the same card three times with one
   line changed, which is a stutter; the scrap and the document are the
   before and the after, and they are the two worth the space. */
.oe-state[data-oe-state="1"],
.oe-state[data-oe-state="2"],
.oe-state[data-oe-state="3"] { display: none; }

/* 1. the scrap — a till slip, deliberately mean */
.oe-scrap {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 4px; padding: 16px 18px 18px; max-width: 330px;
  box-shadow: 0 14px 34px -18px rgba(13, 27, 42, .3);
  transform: rotate(-1.2deg);
}
.oe-src {
  font-family: var(--mono); font-size: .63rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px;
  padding-bottom: 9px; border-bottom: 1px dashed var(--line);
}
.oe-scrap-name {
  margin: 0 0 6px; font-size: .95rem; font-weight: 600; color: var(--ink);
}
.oe-scrap-body {
  margin: 0 0 12px; font-family: var(--mono); font-size: .76rem;
  line-height: 1.6; color: var(--ink-2);
}
.oe-scrap-when {
  margin: 0; font-family: var(--mono); font-size: .66rem; color: var(--ink-3);
}

/* 2-4. the record, as it fills in */
.oe-owned, .oe-merged, .oe-visited {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
  box-shadow: 0 22px 54px -26px rgba(13, 27, 42, .32);
  max-width: 430px;
}
.oe-badge {
  display: inline-block; margin: 0 0 12px; padding: 5px 11px;
  border-radius: 100px; font-size: .68rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  background: var(--brand-wash); color: var(--brand-ink);
}
.oe-badge-gold { background: var(--gold-wash); color: #8A4B00; }
.oe-badge-green { background: #E7F7EE; color: var(--ok-ink); }
.oe-name {
  font-family: var(--display); font-size: 1.32rem; line-height: 1.2;
  letter-spacing: -.018em; margin: 0 0 16px; color: var(--ink);
}
.oe-fields { margin: 0; display: grid; gap: 10px; }
.oe-fields div {
  display: flex; justify-content: space-between; gap: 14px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.oe-fields div:last-child { border-bottom: 0; padding-bottom: 0; }
.oe-fields dt {
  font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}
.oe-fields dd {
  margin: 0; font-size: .88rem; color: var(--ink); text-align: right;
  display: flex; align-items: center; gap: 7px;
}
.oe-who {
  width: 21px; height: 21px; border-radius: 50%; flex: none;
  background: var(--m4); color: #fff;
  font-size: .64rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.oe-due { color: var(--ok-ink); font-weight: 600; }

/* 3. the two spellings, set as an equation */
.oe-match { display: grid; gap: 9px; margin-bottom: 14px; }
.oe-match p {
  margin: 0; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 10px;
  font-family: var(--mono); font-size: .76rem;
}
.oe-old, .oe-new {
  padding: 8px 10px; border-radius: 8px; background: var(--gold-wash);
  color: #7A4200; min-width: 0; overflow-wrap: anywhere;
  border: 1px solid #FFDFB8;
}
.oe-new { text-align: right; }
.oe-eq { color: var(--gold); font-weight: 700; font-size: .95rem; }
.oe-match-note {
  margin: 0; font-size: .85rem; line-height: 1.6; color: var(--ink-2);
}

/* 4. the visit */
.oe-met { margin: 0 0 14px; font-size: .9rem; line-height: 1.55; color: var(--ink-2); }
.oe-met b { color: var(--ink); }
.oe-gps {
  position: relative; padding: 12px 14px 13px 32px;
  border-radius: 11px; background: #E7F7EE; border: 1px solid #C7EBD6;
}
.oe-gps b { display: block; font-family: var(--mono); font-size: .8rem; color: var(--ok-ink); }
.oe-gps em {
  display: block; font-style: normal; font-size: .72rem;
  color: var(--ink-2); margin-top: 3px;
}
.oe-gps-ring {
  position: absolute; left: 13px; top: 17px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0 3px rgba(46, 204, 113, .26);
}

/* 5. THE DOCUMENT.
   The payoff, and the reason the four states before it are quiet.
   Set as a tax invoice rather than as a picture of a screen: the
   business name at display size, the amount as a real numeral, one
   gold rule, and the derived place-of-supply line doing the arguing. */
.oe-invoice {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 24px 22px 20px;
  box-shadow: 0 34px 80px -34px rgba(13, 27, 42, .42);
  border-top: 4px solid var(--gold);
}
.oe-inv-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px; margin-bottom: 18px;
}
.oe-inv-kind {
  margin: 0; font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold);
}
.oe-inv-no {
  margin: 0; font-family: var(--mono); font-size: .76rem; color: var(--ink-2);
}
.oe-inv-to {
  font-family: var(--display);
  font-size: clamp(1.5rem, 5.4vw, 2rem);
  line-height: 1.12; letter-spacing: -.024em; font-weight: 700;
  color: var(--ink); margin: 0 0 4px;
}
.oe-inv-where { margin: 0 0 20px; font-size: .82rem; color: var(--ink-3); }

.oe-inv-amount {
  font-family: var(--display);
  font-size: clamp(2.1rem, 8vw, 2.9rem);
  line-height: 1; letter-spacing: -.03em; font-weight: 700;
  color: var(--ink); margin: 0 0 18px;
  font-variant-numeric: tabular-nums;
  padding-bottom: 18px; border-bottom: 1px solid var(--line);
}
.oe-inv-amount span { font-size: .5em; color: var(--ink-3); }

.oe-inv-split { margin: 0 0 18px; display: grid; gap: 8px; }
.oe-inv-split div { display: flex; justify-content: space-between; gap: 14px; }
.oe-inv-split dt { font-size: .82rem; color: var(--ink-2); }
.oe-inv-split dd {
  margin: 0; font-family: var(--mono); font-size: .82rem; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.oe-inv-pos {
  margin: 0 0 18px; padding: 12px 14px; border-radius: 10px;
  background: var(--brand-wash); font-size: .83rem; line-height: 1.55;
  color: var(--ink-2);
}
.oe-inv-pos b { color: var(--brand-ink); font-family: var(--mono); }

.oe-chain {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: .68rem;
}
.oe-chain li { color: var(--ink-3); }
.oe-chain li + li::before { content: '\2192'; margin-right: 7px; color: var(--line); }
.oe-chain li.on { color: var(--brand-ink); font-weight: 500; }

.oe-disclose {
  margin: 16px 2px 0; font-size: .77rem; line-height: 1.5; color: var(--ink-3);
}

/* the rail is a pinned-only device */
.oe-rail { display: none; }

/* ============================================================
   THE PINNED VERSION
   Desktop only, motion allowed only. crm.js adds .is-live after it
   has confirmed GSAP and ScrollTrigger are actually on window — never
   from a class set in the head, because "JavaScript exists" and "the
   animation library arrived" are different facts and the gap between
   them is where a half-drawn section ships.
   ============================================================ */

@media (min-width: 980px) {
  .oe-intro { padding: 92px 0 10px; }
  .oe-in { grid-template-columns: 40fr 56fr; gap: 4%; align-items: center; }
  .oe-notes { gap: 40px; }
  .oe-scrap { max-width: 360px; }
  .oe-invoice { padding: 30px 30px 24px; }
}

@media (min-width: 980px) and (prefers-reduced-motion: no-preference) {
  .oe.is-live .oe-stage {
    position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
  }
  .oe.is-live .oe-in { align-items: center; }

  /* Notes and states both become one stack of cross-fading layers. The
     tallest of each holds the height open so nothing jumps. */
  .oe.is-live .oe-notes { display: grid; gap: 0; }
  .oe.is-live .oe-note { grid-area: 1 / 1; }

  .oe.is-live .oe-frame { display: grid; }
  .oe.is-live .oe-state { grid-area: 1 / 1; align-self: center; justify-self: start; }
  .oe.is-live .oe-state[data-oe-state="1"],
  .oe.is-live .oe-state[data-oe-state="2"],
  .oe.is-live .oe-state[data-oe-state="3"] { display: block; }
  .oe.is-live .oe-invoice { justify-self: stretch; }

  .oe.is-live .oe-disclose { position: absolute; bottom: -34px; left: 2px; margin: 0; }
  .oe.is-live .oe-object { position: relative; }

  .oe.is-live .oe-rail {
    display: flex; list-style: none; margin: 0 auto; padding: 0;
    gap: 6px; width: min(var(--w), calc(100% - 48px));
    position: absolute; left: 50%; transform: translateX(-50%); bottom: 30px;
  }
  .oe.is-live .oe-rail li { flex: 1 1 0; min-width: 0; }
  .oe.is-live .oe-rail span {
    display: block; height: 3px; border-radius: 3px;
    background: var(--line); overflow: hidden; position: relative;
  }
  .oe.is-live .oe-rail span::after {
    content: ''; position: absolute; inset: 0; border-radius: 3px;
    background: var(--brand); transform: scaleX(var(--fill, 0));
    transform-origin: left;
  }
  .oe.is-live .oe-rail em {
    display: block; font-style: normal; margin-top: 8px;
    font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ink-3); white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis;
  }
  .oe.is-live .oe-rail li.on em { color: var(--ink); }
}


/* ============================================================
   WIDER SCREENS
   ============================================================ */

@media (min-width: 620px) {
  .crm-jump-cta { display: inline-flex; }
  .crm-hero-actions .btn { flex: 0 0 auto; }
  /* Sixteen trades, one under another, is nine hundred pixels of
     scrolling for a list somebody is scanning for one word. */
  .ind { padding: 16px; }
  .crm-figs { gap: 26px 34px; }
  .crm-leaks { grid-template-columns: repeat(2, 1fr); }
  .ind-grid { grid-template-columns: repeat(2, 1fr); }
  .days { grid-template-columns: repeat(2, 1fr); }
  .dupe-pair { grid-template-columns: 1fr 64px 1fr; gap: 0; }
  .dupe-link { height: 190px; transform: none; }
  .reach-pills { grid-template-columns: repeat(2, 1fr); gap: 10px 16px; }
}

@media (min-width: 900px) {
  /* Words left, product right, the way all four reference pages do it.
     The columns are sized so they cannot meet: 46 + 50 leaves four
     viewport per cent of daylight at every width above 900. */
  .crm-hero { padding-top: 58px; }
  .crm-hero-in {
    display: grid; grid-template-columns: 46fr 50fr;
    gap: 4%; align-items: center; padding-bottom: 82px;
  }
  .crm-hero-copy { min-width: 0; }
  .crm-hero-art { margin-top: 0; padding-bottom: 0; min-height: 340px; }

  /* Overlapped, not scattered. The first arrangement placed the three
     with bottom offsets, which spread them to the corners of a tall box
     and left a hole in the middle — three small pictures floating in
     space rather than one composition. Driving all three from the top
     instead puts them in a deliberate stack: each one sits over the
     corner of the one above it, which is what Brevo and HubSpot do and
     why theirs reads as an object rather than a scatter. */
  .frag-a { position: absolute; left: 0; top: 0; width: 100%; }
  .frag-b { position: absolute; right: -22px; top: 152px; width: 278px; max-width: none; }
  .frag-c { position: absolute; left: 0; top: 252px; width: 352px; max-width: none; }
  .frag-pill { right: 8%; top: -18px; }

  .crm-figs { grid-template-columns: repeat(4, 1fr); }

  .crm-leaks { grid-template-columns: repeat(3, 1fr); }
  .crm-leaks li:nth-child(4) { grid-column: span 1; }

  /* THE PICTURE RIDES ALONG, IT DOES NOT FLOAT IN THE MIDDLE.

     These rows pair a tall column of prose — a lede and four points, so
     eight hundred pixels or more — with a cropped screenshot two
     hundred pixels tall. Centred, that put a small picture in the
     middle of an enormous empty rectangle, which is exactly what it
     looked like: a design with a hole in it.

     Aligned to the top and made sticky, the picture starts beside the
     first point and stays beside whichever point the reader has
     reached. The dead space is gone because there is no longer a tall
     row with one short thing in it — there is a column of text and a
     picture keeping pace with it. */
  .cap { padding: 58px 0; }
  .cap-in { grid-template-columns: 1fr 1fr; gap: 54px; align-items: start; }
  .cap-flip .cap-copy { order: 2; }
  .cap-flip .cap-visual { order: 1; }
  .cap-visual { position: sticky; top: 148px; }

  .crm-reach-in { grid-template-columns: 1fr 1.05fr; gap: 50px; align-items: center; }

  .crm-faq-in { grid-template-columns: 1fr 1.42fr; gap: 64px; }
  .crm-faq-side { position: sticky; top: 148px; }
  .crm-faq-ask .btn { flex: 0 0 auto; }

  .ind-grid { grid-template-columns: repeat(4, 1fr); }
  .days { grid-template-columns: repeat(3, 1fr); }

  .crm-stage { padding: 82px 0 88px; }
  .crm-tablist { gap: 10px; }
  .crm-tab { padding: 13px 18px; }
}

@media (min-width: 1100px) {
  .cap-in { gap: 72px; }
  .cap-points { gap: 18px; }
}

/* ============================================================
   MOTION
   The page is finished without any of this. Everything below is
   something crm.js does on top, and everything below stops when the
   reader has said they do not want it.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .crm-page * ,
  .crm-page *::before,
  .crm-page *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}