/* /how-it-works styles. Layers on top of base.css, which holds the shared
   design system (palette, type, container, buttons, header, footer,
   accent rule, centered close). Every rule is scoped under .hiw (the
   page's <main>) except the header block, which sits outside it. Use only
   base.css tokens, plus the verdict dots' fills as the homepage and
   /pricing draw them.

   Two pictures, each with two layouts chosen by a container query on its
   own width, not the viewport's:
     - wide, composed as the 2026-10-09 sketch was (the map on a 1000 by
       600 plate with its type scaled to the plate, so it reads like one
       drawing at every width it is shown at; the fact's six cards
       alternating above and below one line). Only here does a picture
       set --hiw-wide: 1, which is how js/how-it-works.js knows to play it.
     - narrow, a column that sits still.
   Markup with no data-step is the finished picture, which is also what a
   reader without script, with reduced motion or on a narrow screen sees.
   While a picture plays, earlier states are written as exceptions. */

/* ── Header, on a phone ─────────────────────────────────────────── */

/* As on the audience pages and /pricing: this hero carries no button,
   so on a phone the header keeps "Meet with our team" beside the menu
   button, compact. Below 360px there is no room, and the menu carries
   it. This sheet loads on /how-it-works only. */
@media (max-width: 900px) {
  .bar .bar-cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-left: auto;
    margin-right: -6px;
    padding: 0 14px;
    font-size: 14px;
  }
  .bar-inner { gap: 12px; }
  body.mobile-menu-open .bar .bar-cta { visibility: hidden; }
}
@media (max-width: 359px) {
  .bar .bar-cta { display: none; }
}

/* ── Shared ─────────────────────────────────────────────────────── */

.hiw .is-snapping,
.hiw .is-snapping * { transition: none !important; }

.hiw .hiw-h2 {
  max-width: 22em;
  text-wrap: balance;
}
.hiw .hiw-lede {
  margin-top: 18px;
  max-width: 34em;
  font-size: 18.5px;
  line-height: 1.55;
  color: var(--body);
}
.hiw .hiw-micro {
  font-family: var(--text);
  font-weight: 600;
  font-size: 11.5px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.hiw .hiw-mono {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

/* ── The headline ───────────────────────────────────────────────── */

/* Display section size, as on /pricing: a page below the homepage. One
   sentence on two lines, then the subhead at the lede size every hero on
   this line uses. */
.hiw .hiw-top { padding: 72px 0 0; }
.hiw .hiw-title { font-size: clamp(33px, 4.5vw, 57px); max-width: 14em; }
.hiw .hiw-title .line { display: block; }
.hiw .hiw-title .line + .line { margin-top: 0.1em; }
.hiw .hiw-sub {
  margin-top: 22px;
  max-width: 33em;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.52;
  color: var(--body);
}
@media (max-width: 700px) {
  .hiw .hiw-top { padding-top: 52px; }
}

/* ── The map ────────────────────────────────────────────────────── */

/* Straight on from the headline, no hairline between, so the top of the
   map is in the first viewport on a laptop. */
.hiw .hiw-map-sec { border-top: 0; padding-top: 64px; }
@media (max-width: 700px) {
  .hiw .hiw-map-sec { padding-top: 44px; }
}

.hiw .hiw-map {
  container: hiw-map / inline-size;
  margin-top: 32px;
}
.hiw .hiw-mapplate {
  position: relative;
  margin: 0;
  padding: 22px 18px 24px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
}

/* Narrow: three groups down one column, a short hairline between them
   where the wide map has its connections, and each of the reader's
   systems wearing its connection's label as a tag. */
.hiw .hiw-pipes,
.hiw .hiw-pipe-label { display: none; }

.hiw .hiw-head {
  margin: 0 0 12px;
  font-family: var(--text);
  font-weight: 600;
  font-size: 11.5px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.hiw .hiw-col-in { display: grid; gap: 10px; }
.hiw .hiw-in {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  column-gap: 16px;
  align-items: center;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.hiw .hiw-in .hiw-glyph { grid-row: 1 / span 2; width: 72px; height: auto; }
.hiw .hiw-in-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16.5px;
  line-height: 1.25;
  color: var(--ink);
}
.hiw .hiw-in-sub { font-size: 13.5px; line-height: 1.4; color: var(--muted); }

/* The glyphs: pages, a table, two datasets. */
.hiw .hiw-glyph .g-page { fill: var(--surface); stroke: var(--slate); stroke-width: 1; }
.hiw .hiw-glyph .g-lid { fill: var(--pill-none-bg); stroke: var(--slate); stroke-width: 1; }
.hiw .hiw-glyph .g-line { fill: none; stroke: var(--slate); stroke-width: 1; }
.hiw .hiw-glyph .g-ink { fill: #C3C9CE; }
.hiw .hiw-glyph .g-track { fill: var(--track); }

/* The hairline between groups, in place of the wide map's connections. */
.hiw .hiw-hosted,
.hiw .hiw-col-out { position: relative; margin-top: 46px; }
.hiw .hiw-hosted::before,
.hiw .hiw-col-out::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -38px;
  height: 30px;
  border-left: 1.2px solid rgba(17, 22, 27, 0.26);
}

/* What we host: a dashed frame, its label set into the top edge. */
.hiw .hiw-hosted {
  padding: 26px 12px 12px;
  border: 1px dashed rgba(17, 22, 27, 0.3);
  border-radius: 14px;
}
.hiw .hiw-hosted-label {
  position: absolute;
  top: -0.7em;
  left: 14px;
  padding: 0 7px;
  background: var(--surface);
  font-family: var(--text);
  font-weight: 600;
  font-size: 11.5px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--body);
}
.hiw .hiw-db,
.hiw .hiw-portal {
  position: relative;
  padding: 14px 14px 12px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.hiw .hiw-db { overflow: hidden; }
.hiw .hiw-db > .hiw-micro,
.hiw .hiw-portal > .hiw-micro { color: var(--body); }
.hiw .hiw-portal { margin-top: 10px; }

/* The database: the homepage's cell, a verdict dot over a fit bar and a
   timing bar, thirty of them. */
.hiw .hiw-cells {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px 8px;
  margin: 14px 0 10px;
}
.hiw .hiw-cell { display: flex; align-items: center; gap: 5px; min-width: 0; }
.hiw .hiw-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.hiw .hiw-dot.is-target { background: rgba(0, 168, 138, 0.95); }
.hiw .hiw-dot.is-monitor { background: rgba(47, 99, 218, 0.55); }
.hiw .hiw-dot.is-hold { background: rgba(118, 127, 137, 0.45); }
.hiw .hiw-bars { display: grid; gap: 3px; flex: 1; min-width: 0; max-width: 34px; }
.hiw .hiw-bars i {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--track);
  overflow: hidden;
}
.hiw .hiw-bars b {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: rgba(17, 22, 27, 0.62);
}
.hiw .hiw-readline { display: none; }

.hiw .hiw-portal-title {
  margin-top: 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 16.5px;
  line-height: 1.25;
  color: var(--ink);
}
.hiw .hiw-portal-sub { font-size: 13.5px; line-height: 1.4; color: var(--muted); }
/* A small chart and a chat bubble, hinted, not shown. */
.hiw .hiw-portal-hint {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  justify-items: end;
  gap: 6px;
}
.hiw .hiw-portal-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 22px;
}
.hiw .hiw-portal-bars i { width: 6px; border-radius: 2px; background: #C3C9CE; }
.hiw .hiw-portal-pill {
  display: block;
  width: 52px;
  padding: 8px;
  border-radius: 8px;
  background: var(--pill-none-bg);
}
.hiw .hiw-portal-pill i { display: block; height: 3.5px; border-radius: 2px; background: #C3C9CE; }
@media (max-width: 420px) {
  .hiw .hiw-portal-hint { display: none; }
}

/* Where it goes: the reader's own systems, on Ink, as the For sales
   picture draws a CRM. */
.hiw .hiw-sys {
  position: relative;
  margin-top: 10px;
  padding: 14px 16px;
  background: var(--ink);
  border-radius: 12px;
}
.hiw .hiw-head + .hiw-sys { margin-top: 0; }
.hiw .hiw-sys-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16.5px;
  line-height: 1.25;
  color: #FFFFFF;
}
.hiw .hiw-sys-sub { margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--dark-body); }
.hiw .hiw-tag {
  position: absolute;
  top: 13px;
  right: 14px;
  padding: 2px 7px;
  border: 1px solid var(--rule-dark);
  border-radius: 5px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--dark-body);
}
.hiw .hiw-crm-list { list-style: none; margin: 12px 0 0; padding: 0; }
.hiw .hiw-crm-list li {
  position: relative;
  padding-left: 15px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--dark-body);
}
.hiw .hiw-crm-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: rgba(251, 251, 248, 0.3);
}
/* Marketing automation and sales engagement hang off the CRM. */
.hiw .hiw-subsys {
  position: relative;
  margin: 8px 0 0 24px;
  padding: 9px 14px;
  background: rgba(17, 22, 27, 0.86);
  border-radius: 8px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.3;
  color: #FFFFFF;
}
.hiw .hiw-subsys::before {
  content: '';
  position: absolute;
  left: -13px;
  top: -9px;
  bottom: 50%;
  width: 12px;
  border-left: 1.2px solid rgba(17, 22, 27, 0.3);
  border-bottom: 1.2px solid rgba(17, 22, 27, 0.3);
  border-bottom-left-radius: 6px;
}
.hiw .hiw-subsys + .hiw-subsys::before { top: -30px; }
.hiw .hiw-subsys-2 + .hiw-sys { margin-top: 18px; }

/* Wide: the sketch's composition. Every part sits on the plate's 1000 by
   600 grid (left and width in tenths, top and height in sixths), the
   connections are one SVG on the same grid, and type is sized in cqi so
   the whole map scales as one drawing; a floor keeps it legible at the
   narrowest wide plate and a cap stops it ballooning on the widest. */
@container hiw-map (min-width: 800px) {
  .hiw .hiw-mapplate {
    --hiw-wide: 1;
    aspect-ratio: 1000 / 600;
    padding: 0;
  }
  .hiw .hiw-pipes {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .hiw .hiw-pipe {
    fill: none;
    stroke: rgba(17, 22, 27, 0.26);
    stroke-width: 1.2;
  }
  .hiw .hiw-dots circle { fill: var(--ink); }
  .hiw .hiw-pipe-label {
    display: block;
    position: absolute;
    transform: translate(-50%, -50%);
    padding: 0 0.4cqi;
    background: var(--surface);
    font-family: var(--mono);
    font-weight: 500;
    font-size: clamp(8.5px, 1.05cqi, 12px);
    line-height: 1.4;
    color: var(--muted);
  }

  .hiw .hiw-col-in,
  .hiw .hiw-col-out {
    position: absolute;
    inset: 0;
    display: block;
    margin: 0;
  }
  .hiw .hiw-col-out::before,
  .hiw .hiw-hosted::before { display: none; }
  .hiw .hiw-head {
    position: absolute;
    top: 5.3%;
    margin: 0;
    font-size: clamp(9px, 1.1cqi, 12px);
  }
  .hiw .hiw-col-in .hiw-head { left: 2.4%; }
  .hiw .hiw-col-out .hiw-head { left: 72%; }

  .hiw .hiw-in {
    position: absolute;
    left: 2.4%;
    width: 22.2%;
    height: 17.333%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 0 1.8cqi 1.45cqi;
    border-radius: 12px;
  }
  .hiw .hiw-in-1 { top: 21.333%; }
  .hiw .hiw-in-2 { top: 42.667%; }
  .hiw .hiw-in-3 { top: 64%; }
  .hiw .hiw-in .hiw-glyph {
    position: absolute;
    left: 1.8cqi;
    top: 2cqi;
    width: auto;
    height: 2.2cqi;
  }
  .hiw .hiw-in-2 .hiw-glyph { height: 1.8cqi; }
  .hiw .hiw-in-3 .hiw-glyph { height: 2.4cqi; top: 1.8cqi; }
  .hiw .hiw-in-title { font-size: clamp(12.4px, 1.55cqi, 17px); }
  .hiw .hiw-in-sub { margin-top: 0.3cqi; font-size: clamp(10px, 1.25cqi, 14px); }

  .hiw .hiw-hosted {
    position: absolute;
    left: 28.2%;
    top: 12%;
    width: 36.8%;
    height: 82.667%;
    margin: 0;
    padding: 0;
  }
  .hiw .hiw-hosted-label {
    left: 1.4cqi;
    padding: 0 0.6cqi;
    font-size: clamp(8.5px, 1.05cqi, 11.5px);
  }
  .hiw .hiw-db,
  .hiw .hiw-portal {
    position: absolute;
    left: 5.978%;
    width: 88.04%;
    margin: 0;
    padding: 1.6cqi;
  }
  .hiw .hiw-db { top: 5.645%; height: 58.871%; }
  .hiw .hiw-portal { top: 70.565%; height: 24.194%; }
  .hiw .hiw-db > .hiw-micro,
  .hiw .hiw-portal > .hiw-micro { font-size: clamp(8.5px, 1.05cqi, 11.5px); }
  .hiw .hiw-cells {
    position: absolute;
    left: 4.3%;
    top: 12%;
    width: 94.1%;
    height: 69.9%;
    margin: 0;
    gap: 0;
    grid-template-rows: repeat(6, minmax(0, 1fr));
  }
  .hiw .hiw-cell { gap: 0.85cqi; padding-left: 0.26cqi; }
  .hiw .hiw-dot { width: 0.68cqi; height: 0.68cqi; }
  .hiw .hiw-bars { flex: none; width: 3.2cqi; max-width: none; gap: 0.34cqi; }
  .hiw .hiw-bars i { height: 0.26cqi; min-height: 2px; }
  .hiw .hiw-reread {
    position: absolute;
    left: 1.6cqi;
    bottom: 1.1cqi;
    font-size: clamp(8.5px, 1.05cqi, 11.5px);
  }
  /* The read line: Teal, with its flat band, passing over the database
     every few seconds while the map is on screen. */
  .hiw .hiw-readline {
    display: block;
    position: absolute;
    top: 12%;
    bottom: 11.6%;
    left: -4%;
    width: 3.8cqi;
    margin-left: -1.9cqi;
    background: rgba(0, 168, 138, 0.08);
    opacity: 0;
    pointer-events: none;
  }
  .hiw .hiw-readline::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    border-left: 1.6px solid rgba(0, 168, 138, 0.85);
  }
  .hiw .hiw-mapplate.is-live .hiw-readline { animation: hiw-read 5.2s linear infinite; }

  .hiw .hiw-portal-title {
    margin-top: 2.2cqi;
    font-size: clamp(12.4px, 1.55cqi, 17px);
  }
  .hiw .hiw-portal-sub { margin-top: 0.3cqi; font-size: clamp(10px, 1.25cqi, 14px); }
  .hiw .hiw-portal-hint { right: 2cqi; gap: 0.7cqi; }
  .hiw .hiw-portal-bars { gap: 0.5cqi; height: 2.2cqi; }
  .hiw .hiw-portal-bars i { width: 0.6cqi; }
  .hiw .hiw-portal-pill { width: 5.2cqi; padding: 0.8cqi; }

  .hiw .hiw-sys,
  .hiw .hiw-subsys,
  .hiw .hiw-subsys-2 + .hiw-sys {
    position: absolute;
    margin: 0;
  }
  .hiw .hiw-sys { left: 72%; width: 25.6%; padding: 0 1.8cqi; }
  .hiw .hiw-tag { display: none; }
  .hiw .hiw-crm { top: 10.667%; height: 25%; padding-top: 1.45cqi; }
  .hiw .hiw-wh,
  .hiw .hiw-ads,
  .hiw .hiw-ai {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .hiw .hiw-wh { top: 55%; height: 9%; }
  .hiw .hiw-ads { top: 66.667%; height: 9%; }
  .hiw .hiw-ai { top: 78.333%; height: 12%; }
  .hiw .hiw-sys-title { font-size: clamp(12px, 1.5cqi, 16.5px); }
  .hiw .hiw-crm .hiw-sys-title { font-size: clamp(13.2px, 1.65cqi, 18px); }
  .hiw .hiw-sys-sub { margin-top: 0.2cqi; font-size: clamp(9.6px, 1.2cqi, 13px); }
  .hiw .hiw-crm-list { margin-top: 1.1cqi; }
  .hiw .hiw-crm-list li {
    padding-left: 1.4cqi;
    font-size: clamp(10px, 1.25cqi, 13.5px);
    line-height: 1.52;
  }
  .hiw .hiw-crm-list li::before { width: 0.6cqi; height: 0.6cqi; }
  .hiw .hiw-subsys {
    left: 76.4%;
    width: 21.2%;
    height: 6%;
    display: flex;
    align-items: center;
    padding: 0 1.4cqi;
    font-size: clamp(10.8px, 1.35cqi, 14.5px);
  }
  .hiw .hiw-subsys::before { display: none; }
  .hiw .hiw-subsys-1 { top: 37.667%; }
  .hiw .hiw-subsys-2 { top: 45%; }

  /* While the map builds: each part waits for its step. A connection
     draws itself in (its length is set by the script as --len); every
     other part fades up. */
  .hiw .hiw-mapplate [data-at]:not(path) {
    transition: opacity 600ms ease, transform 600ms ease;
  }
  .hiw .hiw-mapplate .hiw-pipe {
    stroke-dasharray: var(--len, none);
    transition: stroke-dashoffset 900ms ease-in-out;
  }
  .hiw .hiw-in-2 { transition-delay: 120ms; }
  .hiw .hiw-in-3 { transition-delay: 240ms; }
  .hiw .hiw-subsys-1 { transition-delay: 250ms; }
  .hiw .hiw-subsys-2 { transition-delay: 350ms; }
  .hiw .hiw-ads,
  .hiw .hiw-pipe[data-pipe="ads"] { transition-delay: 250ms; }
  .hiw .hiw-mapplate[data-step]:not([data-reached~="1"]) [data-at="1"]:not(path),
  .hiw .hiw-mapplate[data-step]:not([data-reached~="2"]) [data-at="2"]:not(path),
  .hiw .hiw-mapplate[data-step]:not([data-reached~="3"]) [data-at="3"]:not(path),
  .hiw .hiw-mapplate[data-step]:not([data-reached~="4"]) [data-at="4"]:not(path),
  .hiw .hiw-mapplate[data-step]:not([data-reached~="5"]) [data-at="5"]:not(path) {
    opacity: 0;
    transform: translateY(6px);
  }
  .hiw .hiw-mapplate .hiw-pipe-label[data-at] { transform: translate(-50%, -50%); }
  .hiw .hiw-mapplate[data-step]:not([data-reached~="2"]) path[data-at="2"],
  .hiw .hiw-mapplate[data-step]:not([data-reached~="3"]) path[data-at="3"],
  .hiw .hiw-mapplate[data-step]:not([data-reached~="4"]) path[data-at="4"],
  .hiw .hiw-mapplate[data-step]:not([data-reached~="5"]) path[data-at="5"] {
    stroke-dashoffset: var(--len, 0);
  }
  /* Before the script arms it, nothing shows, so a map already on screen
     at load never flashes its finished frame (marketing-arm.js sets
     .mk-arm, never under reduced motion). */
  .mk-arm .hiw .hiw-mapplate:not([data-step]):not(.is-done) > * { visibility: hidden; }
}

@keyframes hiw-read {
  0% { left: -4%; opacity: 0; }
  5% { opacity: 1; }
  38% { opacity: 1; }
  42% { left: 104%; opacity: 0; }
  100% { left: 104%; opacity: 0; }
}

/* The three paragraphs, each under its column of the map: the columns'
   own widths and gaps on the same grid (2.4 / 22.2 / 3.6 / 36.8 / 7 /
   25.6 / 2.4). Stacked below 800px, as the map is. */
.hiw .hiw-cols {
  container: hiw-cols / inline-size;
  margin-top: 36px;
}
.hiw .hiw-coltext + .hiw-coltext { margin-top: 28px; }
.hiw .hiw-coltext h3 { font-size: 19.5px; }
.hiw .hiw-coltext p {
  margin-top: 10px;
  max-width: 34em;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--body);
}
@container hiw-cols (min-width: 800px) {
  .hiw .hiw-cols-in {
    display: grid;
    grid-template-columns: 22.2fr 3.6fr 36.8fr 7fr 25.6fr;
    padding: 0 2.4%;
  }
  .hiw .hiw-coltext + .hiw-coltext { margin-top: 0; }
  .hiw .hiw-coltext:nth-child(1) { grid-column: 1; }
  .hiw .hiw-coltext:nth-child(2) { grid-column: 3; }
  .hiw .hiw-coltext:nth-child(3) { grid-column: 5; }
  .hiw .hiw-coltext p { font-size: 16.5px; }
}

/* ── Follow one fact ────────────────────────────────────────────── */

.hiw .hiw-fact {
  container: hiw-fact / inline-size;
  position: relative;
  margin-top: 44px;
}
.hiw .hiw-stops { list-style: none; margin: 0; padding: 0; position: relative; }

/* Narrow: the six stops down one line, each its node, its words, then its
   card. Sits still: the finished picture. */
.hiw .hiw-stop {
  position: relative;
  padding: 0 0 40px 38px;
}
.hiw .hiw-stop::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 12px;
  bottom: -12px;
  border-left: 1.5px solid rgba(17, 22, 27, 0.3);
}
.hiw .hiw-stop:last-child { padding-bottom: 0; }
.hiw .hiw-stop:last-child::before { display: none; }
.hiw .hiw-node {
  position: absolute;
  left: 5px;
  top: 7px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ink);
  border: 1.2px solid var(--ink);
}
/* The last node is the fact itself, arrived: Teal with its ring. */
.hiw .hiw-stop-6 .hiw-node {
  left: 4px;
  top: 6px;
  width: 13px;
  height: 13px;
  background: var(--teal);
  border-color: var(--teal);
  outline: 1.2px solid rgba(0, 168, 138, 0.35);
  outline-offset: 3.5px;
}
.hiw .hiw-stop-text h3 {
  font-size: 18.5px;
  line-height: 1.3;
}
.hiw .hiw-stop-n {
  margin-right: 9px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.8em;
  color: var(--teal-deep);
}
.hiw .hiw-stop-text p {
  margin-top: 6px;
  max-width: 30em;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--body);
}

/* The cards: white for the public web and our work, Ink for the
   reader's own systems. */
.hiw .hiw-card {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
  max-width: 340px;
  min-height: 224px;
  padding: 18px 18px 16px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.hiw .hiw-card.is-ink {
  background: var(--ink);
  border-color: var(--ink);
}
.hiw .hiw-card p { margin: 0; }
.hiw .hiw-card-label {
  margin-bottom: 14px !important;
  font-family: var(--text);
  font-weight: 600;
  font-size: 11.5px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.hiw .hiw-card.is-ink .hiw-card-label { color: var(--dark-body); }
.hiw .hiw-card-title {
  margin-top: 8px !important;
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.25;
  color: var(--ink);
}
.hiw .hiw-card-muted { margin-top: 3px !important; font-size: 13px; line-height: 1.45; color: var(--muted); }
.hiw .hiw-card-body { font-size: 13px; line-height: 1.45; color: var(--body); }
.hiw .hiw-card.is-ink .hiw-card-body { color: var(--dark-body); }
.hiw .hiw-card-foot {
  margin-top: auto !important;
  padding-top: 14px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}
.hiw .hiw-card.is-ink .hiw-card-foot,
.hiw .hiw-card.is-ink .hiw-mono { color: var(--dark-body); }

/* 1. The posting: three lines of its text, hinted. */
.hiw .hiw-skel { display: grid; gap: 9px; margin-top: 16px; }
.hiw .hiw-skel i { display: block; height: 5px; border-radius: 3px; background: var(--track); }
.hiw .hiw-skel i:nth-child(2) { width: 87%; }
.hiw .hiw-skel i:nth-child(3) { width: 67%; }

/* 2. The fact on the profile: the evidence row, standalone, Teal. */
.hiw .hiw-ev {
  margin-top: 14px;
  padding: 2px 0 2px 13px;
  border-left: 3px solid var(--teal);
}
.hiw .hiw-ev .hiw-micro { font-size: 11.5px; }
.hiw .hiw-ev-claim {
  margin-top: 5px !important;
  font-family: var(--display);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.25;
  color: var(--ink);
}
.hiw .hiw-ev-src { margin-top: 3px !important; font-size: 12px; color: var(--muted); }

/* 3. The scores: fit and timing as two bars, Ink on Track, and the alert
   line as a dashed mark through both. */
.hiw .hiw-scores { display: grid; gap: 18px; margin-top: 18px; }
.hiw .hiw-score {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 26px;
  align-items: center;
  column-gap: 10px;
}
.hiw .hiw-track {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: var(--track);
}
.hiw .hiw-track b {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: rgba(17, 22, 27, 0.62);
}
.hiw .hiw-score-t .hiw-track b { width: var(--to); }
.hiw .hiw-mark {
  position: absolute;
  left: var(--line);
  top: -7px;
  bottom: -7px;
  border-left: 1px dashed rgba(17, 22, 27, 0.45);
}
.hiw .hiw-mark span {
  position: absolute;
  bottom: calc(100% + 2px);
  left: 0;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11.5px;
  color: var(--muted);
}
.hiw .hiw-num {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 13px;
  text-align: right;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.hiw .hiw-card-result {
  margin-top: auto !important;
  padding-top: 18px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.3;
  color: var(--ink);
}

/* 4. The CRM record: the two new scores lit. */
.hiw .hiw-card-acct {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-dark);
  font-family: var(--display);
  font-weight: 700;
  font-size: 15.5px;
  color: #FFFFFF;
}
.hiw .hiw-rows { margin: 8px 0 0; }
.hiw .hiw-rows > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0 -6px;
  padding: 3px 6px;
  border-radius: 5px;
}
.hiw .hiw-rows > div.is-new { background: rgba(255, 255, 255, 0.1); }
.hiw .hiw-rows dt { font-size: 12px; line-height: 1.5; color: var(--dark-body); }
.hiw .hiw-rows dd { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.5; color: #FFFFFF; }

/* 5. The alert, sent by the CRM's own automation. */
.hiw .hiw-alert {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}
.hiw .hiw-alert-msg { margin-top: 6px !important; font-size: 13.5px; line-height: 1.4; color: #FFFFFF; }
.hiw .hiw-alert-link { margin-top: 6px !important; font-size: 13px; font-weight: 600; color: #FFFFFF; }

/* 6. The AI assistant: a question, and the answer with its source. */
.hiw .hiw-ask { display: flex; justify-content: flex-end; }
.hiw .hiw-ask span {
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 13px;
  line-height: 1.35;
  color: #FFFFFF;
}
.hiw .hiw-answer { margin-top: 14px !important; font-size: 13.5px; line-height: 1.45; color: #FFFFFF; }
.hiw .hiw-answer-src { margin-top: 8px !important; }

/* Wide: the sketch's line, the cards alternating above and below it,
   each stop's words on the outside of its card. A grid of seven equal
   columns: stop 1 spans columns 1 and 2, stop 2 columns 2 and 3, and so
   on, odd stops above the line and even ones below, so each card is
   centred on its node, which sits on a column boundary. */
@container hiw-fact (min-width: 900px) {
  .hiw .hiw-stops {
    --hiw-wide: 1;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: auto 52px auto;
  }
  /* The line, and the darker part of it the fact has travelled. The
     script moves --hiw-p while it plays; finished, the fact is at stop
     6, six sevenths of the way along. */
  .hiw .hiw-stops::before,
  .hiw .hiw-stops::after {
    content: '';
    grid-row: 2;
    grid-column: 1 / -1;
    align-self: center;
    height: 0;
    margin: 0 4%;
  }
  .hiw .hiw-stops::before { border-top: 1.2px solid rgba(17, 22, 27, 0.16); }
  .hiw .hiw-stops::after {
    border-top: 1.6px solid rgba(17, 22, 27, 0.55);
    transform-origin: left center;
    transform: scaleX(var(--hiw-p, 0.8882));
  }

  .hiw .hiw-stop {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 8px;
  }
  .hiw .hiw-stop:last-child { padding-bottom: 0; }
  .hiw .hiw-stop:nth-child(even) {
    grid-row: 3;
    flex-direction: column-reverse;
  }
  .hiw .hiw-stop:nth-child(odd) { grid-row: 1; }
  .hiw .hiw-stop-1 { grid-column: 1 / 3; }
  .hiw .hiw-stop-2 { grid-column: 2 / 4; }
  .hiw .hiw-stop-3 { grid-column: 3 / 5; }
  .hiw .hiw-stop-4 { grid-column: 4 / 6; }
  .hiw .hiw-stop-5 { grid-column: 5 / 7; }
  .hiw .hiw-stop-6 { grid-column: 6 / 8; }

  /* The node on the line, and the stem from it to the card. */
  .hiw .hiw-node,
  .hiw .hiw-stop-6 .hiw-node {
    left: 50%;
    width: 11px;
    height: 11px;
    margin-left: -5.5px;
  }
  .hiw .hiw-stop:nth-child(odd) .hiw-node { top: calc(100% + 26px - 5.5px); }
  .hiw .hiw-stop:nth-child(even) .hiw-node { top: calc(-26px - 5.5px); }
  .hiw .hiw-stop-6 .hiw-node {
    width: 13px;
    height: 13px;
    margin-left: -6.5px;
    top: calc(-26px - 6.5px);
  }
  .hiw .hiw-stop::before,
  .hiw .hiw-stop:last-child::before {
    display: block;
    left: 50%;
    width: 0;
    height: 18px;
    border-left: 1px solid rgba(17, 22, 27, 0.35);
    transition: transform 220ms ease 480ms;
  }
  .hiw .hiw-stop:nth-child(odd)::before { top: 100%; bottom: auto; transform-origin: bottom; }
  .hiw .hiw-stop:nth-child(even)::before { top: auto; bottom: 100%; transform-origin: top; }

  .hiw .hiw-stop:nth-child(odd) .hiw-stop-text { margin-bottom: 16px; }
  .hiw .hiw-stop:nth-child(even) .hiw-stop-text { margin-top: 16px; }
  .hiw .hiw-stop-text h3 { font-size: 16.5px; }
  .hiw .hiw-stop-text p { margin-top: 5px; font-size: 15.5px; line-height: 1.5; }
  .hiw .hiw-card { margin-top: 0; max-width: none; }

  /* The fact itself while it travels: added by the script, Teal with its
     ring, on the line. */
  .hiw .hiw-fact-dot {
    position: absolute;
    z-index: 1;
    width: 13px;
    height: 13px;
    margin: -6.5px 0 0 -6.5px;
    border-radius: 50%;
    background: var(--teal);
    outline: 1.2px solid rgba(0, 168, 138, 0.35);
    outline-offset: 3.5px;
    pointer-events: none;
  }

  /* While it plays: a stop not yet reached has a hollow node, no stem,
     its words faint and its card not there yet. Reaching it fills the
     node, then grows the stem and brings the card in as the fact
     arrives, and each card plays its own small change after. */
  .hiw .hiw-stop .hiw-card { transition: opacity 450ms ease 550ms, transform 450ms ease 550ms; }
  .hiw .hiw-stop .hiw-stop-text { transition: opacity 400ms ease 300ms; }
  .hiw .hiw-node { transition: background-color 200ms ease 450ms, border-color 200ms ease 450ms; }
  .hiw .hiw-stops[data-step] .hiw-stop:not(.is-reached) .hiw-card { opacity: 0; transform: translateY(-8px); }
  .hiw .hiw-stops[data-step] .hiw-stop:nth-child(odd):not(.is-reached) .hiw-card { transform: translateY(8px); }
  .hiw .hiw-stops[data-step] .hiw-stop:not(.is-reached) .hiw-stop-text { opacity: 0.35; }
  .hiw .hiw-stops[data-step] .hiw-stop:not(.is-reached)::before { transform: scaleY(0); }
  .hiw .hiw-stops[data-step] .hiw-stop:not(.is-reached) .hiw-node {
    background: var(--surface);
    border-color: rgba(17, 22, 27, 0.3);
  }
  .hiw .hiw-stops[data-step] .hiw-stop-6 .hiw-node {
    width: 11px;
    height: 11px;
    margin-left: -5.5px;
    top: calc(-26px - 5.5px);
    background: var(--ink);
    border-color: var(--ink);
    outline-color: transparent;
  }
  .hiw .hiw-stops[data-step] .hiw-stop-6:not(.is-reached) .hiw-node {
    background: var(--surface);
    border-color: rgba(17, 22, 27, 0.3);
  }

  /* 3: timing grows from its old score to its new one, then the result. */
  .hiw .hiw-score-t .hiw-track b { transition: width 1000ms ease-in-out 850ms; }
  .hiw .hiw-stops[data-step] .hiw-stop-3:not(.is-reached) .hiw-score-t .hiw-track b { width: var(--from); }
  .hiw .hiw-stop-3 .hiw-card-result,
  .hiw .hiw-stop-3 .hiw-card-result-sub { transition: opacity 300ms ease 1750ms; }
  .hiw .hiw-stops[data-step] .hiw-stop-3:not(.is-reached) .hiw-card-result,
  .hiw .hiw-stops[data-step] .hiw-stop-3:not(.is-reached) .hiw-card-result-sub { opacity: 0; }
  /* 4: the two new scores light. */
  .hiw .hiw-rows > div.is-new { transition: background-color 500ms ease 900ms; }
  .hiw .hiw-stops[data-step] .hiw-stop-4:not(.is-reached) .hiw-rows > div.is-new { background-color: transparent; }
  /* 5: the alert arrives. */
  .hiw .hiw-alert { transition: opacity 400ms ease 850ms; }
  .hiw .hiw-stops[data-step] .hiw-stop-5:not(.is-reached) .hiw-alert { opacity: 0; }
  /* 6: the question, then the answer, then its source. */
  .hiw .hiw-ask { transition: opacity 350ms ease 750ms; }
  .hiw .hiw-answer { transition: opacity 400ms ease 1400ms; }
  .hiw .hiw-answer-src { transition: opacity 300ms ease 2000ms; }
  .hiw .hiw-stops[data-step] .hiw-stop-6:not(.is-reached) .hiw-ask,
  .hiw .hiw-stops[data-step] .hiw-stop-6:not(.is-reached) .hiw-answer,
  .hiw .hiw-stops[data-step] .hiw-stop-6:not(.is-reached) .hiw-answer-src { opacity: 0; }

  .mk-arm .hiw .hiw-stops:not([data-step]):not(.is-done) .hiw-card { visibility: hidden; }
}

/* ── Setup ──────────────────────────────────────────────────────── */

.hiw .hiw-setup-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 72px;
  align-items: start;
}
.hiw .hiw-setup-text p {
  max-width: 34em;
  font-size: 19.5px;
  line-height: 1.6;
  color: var(--body);
}
.hiw .hiw-setup-text p + p { margin-top: 16px; }
@media (max-width: 1040px) {
  .hiw .hiw-setup-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 700px) {
  .hiw .hiw-setup-text p { font-size: 17px; }
}

/* ── The close ──────────────────────────────────────────────────── */

/* The audience pages' close (copied from pricing.css). */
.hiw .mk-plan { padding: 104px 0 96px; }
.hiw .mk-plan .accent-rule { margin-left: auto; margin-right: auto; }
.hiw .mk-plan h2 { font-size: clamp(33px, 4.5vw, 57px); }
.hiw .mk-plan-body {
  margin: 22px auto 0;
  max-width: 31em;
  font-size: 16.5px;
  line-height: 1.58;
  color: var(--body);
}
.hiw .mk-plan .actions { margin-top: 30px; }
.hiw .mk-unread {
  margin: 56px auto 0;
  max-width: 760px;
}
.hiw .mk-unread svg { display: block; width: 100%; height: auto; }
.hiw .mk-unread-narrow { display: none !important; }
@media (max-width: 520px) {
  .hiw .mk-unread-wide { display: none !important; }
  .hiw .mk-unread-narrow { display: block !important; }
}
.hiw .mk-unread-rings circle {
  fill: none;
  stroke: rgba(183, 190, 196, 0.95);
  stroke-width: 1.2;
}
.hiw .mk-unread-line {
  fill: none;
  stroke: rgba(17, 22, 27, 0.35);
  stroke-width: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .hiw .hiw-readline { display: none !important; }
}