/* ---------------------------------------------------------------------
   /meetings/ — the page's own stylesheet.

   In this folder rather than in css/, the arrangement compliance/ uses: these
   are rules for one page, and css/style.css is the file every page downloads.

   Rewritten on 2026-09-09 with the page. It loads after css/style.css and
   takes the fonts, the reset, .shell, .content, .hs-head, .section-title and
   the buttons from it; everything here is local and prefixed .ig-.

   The palette is the site's, read off style.css rather than invented:
   #2563EB the brand blue, #0B0D12 and #5A6070 the two text greys, #F4F6FB the
   panel ground, #16A34A the green that means finished.
   --------------------------------------------------------------------- */

.ig-hero,
.ig-steps,
.ig-split,
.ig-rows,
.ig-app,
.ig-callscreen,
.ig-summary,
.ig-tasks,
.ig-notes {
  --ig-ink: #0B0D12;
  --ig-body: #5A6070;
  --ig-muted: #8A90A0;
  --ig-line: #E6E9F0;
  --ig-panel: #F4F6FB;
  --ig-blue: #2563EB;
  --ig-blue-soft: #EEF3FE;
  --ig-green: #16A34A;
  --ig-green-soft: #E8F7EE;
  --ig-amber: #B4790C;
  --ig-amber-soft: #FDF3E2;
  --ig-red: #DC2626;
}

/* A section label. Small, uppercase, brand blue - the design uses it above
   four different headings, so it is one class rather than four. */
.ig-eyebrow {
  margin: 0 0 12px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ig-blue);
}

.ig-eyebrow--center { text-align: center; }

/* ---- hero -------------------------------------------------------------- */

.ig-hero {
  padding: calc(var(--nav-h) + 40px) 0 70px;
  background:
    radial-gradient(1100px 420px at 82% 8%, #EFF3FF 0%, rgba(239, 243, 255, 0) 70%),
    linear-gradient(180deg, #FAFBFF 0%, #ffffff 65%);
}

.ig-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(36px, 5vw, 72px);
}

.ig-hero__title {
  margin: 0;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: clamp(34px, 4.4vw, 52px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -1.2px;
  color: var(--ig-ink);
}

/* The second line, in the brand blue. display:block rather than a <br>, so
   the break belongs to the layout and the words stay one heading. */
.ig-hero__accent {
  display: block;
  color: var(--ig-blue);
}

/* #000, the colour every hero lead on this site takes. */
.ig-hero__lead {
  margin: 18px 0 0;
  max-width: 540px;
  font-size: 16.5px;
  line-height: 1.65;
  color: #000000;
}

.ig-hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}

.ig-hero__demo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid var(--ig-line);
  border-radius: 999px;
  background-color: #ffffff;
  color: var(--ig-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 180ms var(--ease-smooth), background-color 180ms var(--ease-smooth);
}

.ig-hero__demo:hover {
  border-color: #C6CBD8;
  background-color: var(--ig-panel);
}

.ig-hero__play { display: inline-flex; color: var(--ig-blue); }
.ig-hero__play .hs-i { width: 18px; height: 18px; }

.ig-hero__marks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.ig-hero__marks li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ig-ink);
}

.ig-hero__mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(16, 24, 48, 0.10);
}

.ig-hero__mark svg { width: 22px; height: 22px; }

.ig-hero__note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 22px 0 0;
  font-size: 14px;
  color: var(--ig-body);
}

/* The round tick used by the hero note and the checklist further down. */
.ig-tick {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--ig-blue-soft);
  color: var(--ig-blue);
}

.ig-tick--green {
  background-color: var(--ig-green-soft);
  color: #12793A;
}

.ig-tick svg { width: 11px; height: 11px; }

/* ---- hero artwork ------------------------------------------------------

   A meeting goes in at the top, Niyuk sits in the middle, what comes back out
   is underneath, and a short connector joins each to the next.

   REDRAWN ON 2026-09-09
   It was a meeting card, a wide empty box with the logo floating in it, and
   three labels beside three white tiles on a dashed line nobody could see.
   The box said nothing, the rail was invisible against the ground, and the
   tiles read as detached. The three parts are one card each now, the
   connectors are visible, and the outcomes carry the state they end in, which
   is what makes them a sequence instead of a list.
   ------------------------------------------------------------------------ */

.ig-hero__art {
  width: 100%;
  max-width: 430px;
  margin-inline: auto;
}

.ig-flow {
  display: grid;
  justify-items: center;
  padding: 22px;
  border: 1px solid #E7ECF9;
  border-radius: 24px;
  background:
    radial-gradient(420px 220px at 50% 0%, #EEF3FF 0%, rgba(238, 243, 255, 0) 70%),
    linear-gradient(180deg, #FCFDFF 0%, #F6F8FE 100%);
}

/* The joins. Short, visible, and with a dot at the midpoint so the eye has
   something to travel along rather than a dashed line that vanishes. */
.ig-flow__link {
  position: relative;
  width: 2px;
  height: 26px;
  background: linear-gradient(180deg, #CFDBF5 0%, #A9BFEE 100%);
}

.ig-flow__link::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border: 2px solid #F7F9FE;
  border-radius: 50%;
  background-color: #7FA2E8;
  transform: translate(-50%, -50%);
}

/* ---- the meeting card -------------------------------------------------- */

.ig-call {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #E6EBF6;
  border-radius: 16px;
  background-color: #ffffff;
  box-shadow: 0 10px 26px -18px rgba(16, 24, 48, 0.45);
}

.ig-call__mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background-color: var(--ig-panel);
}

.ig-call__mark svg { width: 23px; height: 23px; }

.ig-call__text { min-width: 0; }

.ig-call__name {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ig-ink);
}

.ig-call__when {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--ig-muted);
}

.ig-call__sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: #C6CBD8;
}

.ig-call__who {
  display: flex;
  margin-left: auto;
  flex: 0 0 auto;
}

/* Initials, the same treatment the call gallery uses further down, so the two
   drawings read as one product. They were three flat overlapping discs. */
.ig-av {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  color: #ffffff;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
}

.ig-av + .ig-av { margin-left: -9px; }

.ig-av--blue   { background: linear-gradient(150deg, #4F82F0, #2C5BC9); }
.ig-av--violet { background: linear-gradient(150deg, #8C6BEE, #6344CB); }
.ig-av--teal   { background: linear-gradient(150deg, #3FA9A0, #2A807B); }
.ig-av--amber  { background: linear-gradient(150deg, #D9A441, #B37C22); }

/* ---- the Niyuk node ---------------------------------------------------- */

.ig-node {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 11px;
  padding: 18px 34px 16px;
  border: 1px solid #DCE5FA;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #F4F7FE 100%);
  box-shadow: 0 14px 34px -20px rgba(45, 74, 160, 0.5);
}

/* A soft light behind the mark, so the node reads as the thing doing the work
   rather than as one more white box in a column of them. */
.ig-node__glow {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(103, 142, 232, 0.26), transparent);
  pointer-events: none;
}

.ig-node__logo { position: relative; display: block; }

/* Inside the node, under the mark, rather than pinned to a corner of it.
   Hung off the corner it came out exactly as wide as the node itself, which
   read as a second block stuck underneath rather than as a status on the
   first. In the node it is plainly a label belonging to the thing above it,
   and the node sizes itself around both. */
.ig-node__badge {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border: 1px solid #D5E5D8;
  border-radius: 999px;
  background-color: #F1FAF3;
  color: #12793A;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.ig-node__badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--ig-green);
}

/* ---- what comes back out ----------------------------------------------- */

/* One card with three rows and dividers, not three tiles floating beside
   three labels. */
.ig-out {
  width: 100%;
  margin: 0;
  padding: 6px 16px;
  border: 1px solid #E6EBF6;
  border-radius: 16px;
  background-color: #ffffff;
  box-shadow: 0 10px 26px -18px rgba(16, 24, 48, 0.45);
  list-style: none;
}

.ig-out__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
}

.ig-out__row + .ig-out__row { border-top: 1px solid #F1F4FA; }

.ig-out__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 11px;
}

.ig-out__icon .hs-i { width: 18px; height: 18px; }

.ig-out__icon--1 { background-color: var(--ig-blue-soft);  color: var(--ig-blue); }
.ig-out__icon--2 { background-color: #F0ECFD;              color: #6344CB; }
.ig-out__icon--3 { background-color: var(--ig-green-soft); color: #12793A; }

.ig-out__text { display: grid; gap: 1px; min-width: 0; }

.ig-out__text strong {
  font-size: 13.8px;
  font-weight: 600;
  color: var(--ig-ink);
}

.ig-out__text span { font-size: 12px; color: var(--ig-muted); }

/* Done rows get a tick, the one still running gets a pulse. */
.ig-out__state {
  display: grid;
  place-items: center;
  margin-left: auto;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--ig-green-soft);
  color: #12793A;
}

.ig-out__state svg { width: 11px; height: 11px; }

.ig-out__row.is-live .ig-out__state { background-color: var(--ig-blue-soft); }

.ig-out__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--ig-blue);
  animation: ig-pulse 1.8s ease-in-out infinite;
}

@keyframes ig-pulse {
  0%, 100% { transform: scale(0.7); opacity: 0.55; }
  50%      { transform: scale(1);   opacity: 1; }
}

/* ---- how it works: five steps ------------------------------------------ */

.ig-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
}

.ig-step {
  position: relative;
  text-align: center;
}

/* The join lives in the gap before each step but the first, so the last never
   trails an arrow into nothing. */
.ig-step + .ig-step::before {
  content: "";
  position: absolute;
  top: 31px;
  left: -7px;
  width: 14px;
  height: 14px;
  border-top: 2px solid #C3CCE0;
  border-right: 2px solid #C3CCE0;
  transform: translateX(-50%) rotate(45deg);
}

.ig-step__disc {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto;
  border-radius: 50%;
  background-color: var(--ig-blue-soft);
  color: var(--ig-blue);
}

.ig-step__disc .hs-i { width: 26px; height: 26px; }

.ig-step--done .ig-step__disc {
  background-color: var(--ig-green-soft);
  color: #12793A;
}

.ig-step__name {
  margin: 16px 0 0;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ig-ink);
}

.ig-step__copy {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ig-body);
}

/* ---- the shared split layout ------------------------------------------- */

.ig-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}

.ig-split__title,
.ig-split__lead {
  margin-inline: 0;
  text-align: left;
}

.ig-split__title { margin-top: 0; }
.ig-split__lead { margin-top: 14px; }

/* The capture section draws its artwork first in the source so it lands on
   the left; this keeps the copy on the right at desktop width. */
.ig-split--flip .ig-split__art { order: -1; }

/* ---- connect: the three account rows ----------------------------------- */

.ig-rows {
  display: grid;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.ig-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--ig-line);
  border-radius: 16px;
  background-color: #ffffff;
}

.ig-row__mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background-color: var(--ig-panel);
}

.ig-row__mark svg { width: 26px; height: 26px; }

.ig-row__text { display: grid; gap: 2px; min-width: 0; }
.ig-row__text strong { font-size: 15px; font-weight: 600; color: var(--ig-ink); }
.ig-row__text span { font-size: 13.5px; color: var(--ig-body); }

.ig-row__cta {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--ig-blue);
  font-size: 14px;
  font-weight: 600;
}

/* ---- connect: the drawn app screen ------------------------------------- */

.ig-app {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--ig-line);
  border-radius: 18px;
  background-color: #ffffff;
  box-shadow: 0 30px 70px -40px rgba(16, 24, 48, 0.55);
}

.ig-app__side {
  padding: 16px 12px;
  border-right: 1px solid #F0F2F7;
  background-color: #FBFCFE;
}

.ig-app__logo { display: block; margin: 0 0 16px 4px; }

.ig-app__side ul { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }

.ig-app__side li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--ig-body);
}

.ig-app__side li.is-on {
  background-color: var(--ig-blue-soft);
  color: var(--ig-blue);
  font-weight: 600;
}

.ig-app__dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background-color: currentColor;
  opacity: 0.35;
}

.ig-app__main { padding: 16px; }

/* The window's own title bar, drawn as one grey strip. */
.ig-app__bar {
  display: block;
  width: 108px;
  height: 9px;
  margin: 0 0 16px auto;
  border-radius: 999px;
  background-color: #EDF0F6;
}

.ig-app__h { margin: 0; font-size: 15px; font-weight: 600; color: var(--ig-ink); }
.ig-app__sub { margin: 2px 0 14px; font-size: 12.5px; color: var(--ig-muted); }

.ig-app__row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px;
  border: 1px solid #EEF1F6;
  border-radius: 12px;
}

.ig-app__row + .ig-app__row { margin-top: 9px; }

.ig-app__mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background-color: var(--ig-panel);
}

.ig-app__mark svg { width: 19px; height: 19px; }

.ig-app__text { display: grid; gap: 1px; min-width: 0; }
.ig-app__text strong { font-size: 12.5px; font-weight: 600; color: var(--ig-ink); }
.ig-app__text span { font-size: 11.5px; color: var(--ig-muted); }

/* A drawing of the product's button, not a button. */
.ig-app__btn {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 5px 12px;
  border: 1px solid #D8E2FA;
  border-radius: 8px;
  background-color: var(--ig-blue-soft);
  color: var(--ig-blue);
  font-size: 11.5px;
  font-weight: 600;
}

/* ---- capture: the call, the chip, the summary -------------------------- */

/* The call, as the gallery a meeting shows when the cameras are off.

   A tile per person with their initial on it, the speaker's ringed, and the
   control bar underneath. It replaced a drawn human figure on 2026-09-09: a
   grey head and shoulders filling the frame read as a placeholder, and the
   side tiles carried aspect-ratio:1 into a fixed 74px column, which the grid
   row height then stretched to 109px so they hung out past the panel. Nothing
   here sets an aspect ratio against a track it does not control. */

.ig-callscreen {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  background: linear-gradient(165deg, #232A3B 0%, #171C29 100%);
  box-shadow: 0 30px 70px -40px rgba(16, 24, 48, 0.65);
}

.ig-callscreen__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 10px;
}

/* The three small tiles share the lead tile's height rather than setting one,
   so the column can never be taller than the row it sits in. */
.ig-callscreen__side {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.ig-tile {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(160deg, #33405C 0%, #26304492 100%), #2A3348;
}

.ig-tile--lead {
  aspect-ratio: 4 / 3;
}

/* The initial. The disc is the person's colour, the letter is white, and that
   is the whole of the portrait. */
.ig-tile__face {
  display: grid;
  place-items: center;
  width: 34%;
  max-width: 84px;
  aspect-ratio: 1;
  border-radius: 50%;
  color: #ffffff;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: clamp(15px, 3.2vw, 30px);
  font-weight: 700;
  letter-spacing: -0.5px;
}

.ig-tile--lead .ig-tile__face { width: 30%; }

.ig-tile--blue   .ig-tile__face { background: linear-gradient(150deg, #4F82F0, #2C5BC9); }
.ig-tile--violet .ig-tile__face { background: linear-gradient(150deg, #8C6BEE, #6344CB); }
.ig-tile--teal   .ig-tile__face { background: linear-gradient(150deg, #3FA9A0, #2A807B); }
.ig-tile--amber  .ig-tile__face { background: linear-gradient(150deg, #D9A441, #B37C22); }

.ig-tile__name {
  position: absolute;
  left: 8px;
  bottom: 7px;
  max-width: calc(100% - 16px);
  overflow: hidden;
  padding: 3px 8px;
  border-radius: 6px;
  background-color: rgba(9, 12, 20, 0.55);
  color: rgba(255, 255, 255, 0.92);
  font-size: 10.5px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ig-tile--lead .ig-tile__name { font-size: 12px; }

/* The speaker. A ring on the tile and a label in the corner, which is how
   every call app says the same thing. */
.ig-tile--lead {
  outline: 2px solid #4F82F0;
  outline-offset: -2px;
}

.ig-tile__live {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background-color: rgba(79, 130, 240, 0.22);
  color: #C6DAFF;
  font-size: 10.5px;
  font-weight: 600;
}

.ig-tile__live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #6FA0FF;
}

/* The control bar, under the gallery rather than floating over a face. */
.ig-callscreen__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 4px 0 2px;
}

.ig-ctl {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.14);
}

.ig-ctl--end {
  width: 40px;
  border-radius: 999px;
  background-color: #E5484D;
}

/* The listening chip, overlapping the call above it. */
.ig-listen {
  position: relative;
  z-index: 1;
  width: -moz-fit-content;
  width: fit-content;
  margin: -22px 0 0 12px;
  padding: 10px 14px;
  border: 1px solid var(--ig-line);
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 14px 34px -22px rgba(16, 24, 48, 0.5);
}

.ig-listen__label {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ig-blue);
}

.ig-listen__wave { display: flex; align-items: flex-end; gap: 3px; height: 20px; }

.ig-listen__wave i {
  width: 3px;
  border-radius: 2px;
  background-color: #9DBBF7;
  animation: ig-wave 1.1s ease-in-out infinite;
}

/* Nine heights, repeated, so the bars read as a waveform rather than a ramp. */
.ig-listen__wave i:nth-child(9n+1) { height: 40%; animation-delay: 0s; }
.ig-listen__wave i:nth-child(9n+2) { height: 75%; animation-delay: .08s; }
.ig-listen__wave i:nth-child(9n+3) { height: 55%; animation-delay: .16s; }
.ig-listen__wave i:nth-child(9n+4) { height: 100%; animation-delay: .24s; }
.ig-listen__wave i:nth-child(9n+5) { height: 45%; animation-delay: .32s; }
.ig-listen__wave i:nth-child(9n+6) { height: 85%; animation-delay: .40s; }
.ig-listen__wave i:nth-child(9n+7) { height: 35%; animation-delay: .48s; }
.ig-listen__wave i:nth-child(9n+8) { height: 65%; animation-delay: .56s; }
.ig-listen__wave i:nth-child(9n+9) { height: 50%; animation-delay: .64s; }

@keyframes ig-wave {
  0%, 100% { transform: scaleY(0.55); }
  50%      { transform: scaleY(1); }
}

.ig-summary {
  margin-top: 14px;
  padding: 18px;
  border: 1px solid var(--ig-line);
  border-radius: 16px;
  background-color: #ffffff;
  box-shadow: 0 20px 50px -34px rgba(16, 24, 48, 0.5);
}

.ig-summary__h {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ig-ink);
}

.ig-summary ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ig-summary li { display: flex; align-items: flex-start; gap: 11px; }

.ig-summary__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

.ig-summary__icon .hs-i { width: 17px; height: 17px; }
.ig-summary__icon--blue  { background-color: var(--ig-blue-soft);  color: var(--ig-blue); }
.ig-summary__icon--green { background-color: var(--ig-green-soft); color: #12793A; }
.ig-summary__icon--amber { background-color: var(--ig-amber-soft); color: var(--ig-amber); }

/* In the copy column it follows a paragraph rather than the listening chip, so
   it opens on the gap a paragraph wants under it rather than the 14px that
   tucked it under the chip. See the note in sections/integ/capture.php. */

.ig-summary--copy {
  margin-top: 26px;
}

.ig-summary__text { display: grid; gap: 2px; min-width: 0; }
.ig-summary__text strong { font-size: 13.5px; font-weight: 600; color: var(--ig-ink); }
.ig-summary__text span { font-size: 13px; line-height: 1.55; color: var(--ig-body); }

/* ---- the checklist ----------------------------------------------------- */

.ig-points {
  display: grid;
  gap: 12px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.ig-points__item {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 15px;
  color: #22262F;
}

/* ---- the action-item panel --------------------------------------------- */

.ig-tasks {
  padding: 20px;
  border: 1px solid var(--ig-line);
  border-radius: 18px;
  background-color: #ffffff;
  box-shadow: 0 30px 70px -42px rgba(16, 24, 48, 0.5);
}

.ig-tasks__h {
  margin: 0 0 14px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ig-ink);
}

.ig-task {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
}

.ig-task + .ig-task { border-top: 1px solid #F0F2F7; }

.ig-task__box {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 2px solid #D3D9E6;
  border-radius: 50%;
  color: transparent;
}

.ig-task.is-done .ig-task__box {
  border-color: var(--ig-green);
  background-color: var(--ig-green);
  color: #ffffff;
}

.ig-task__box svg { width: 11px; height: 11px; }

.ig-task__text { display: grid; gap: 5px; min-width: 0; }

.ig-task__text strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--ig-ink);
}

.ig-task.is-done .ig-task__text strong {
  color: var(--ig-muted);
  text-decoration: line-through;
}

.ig-task__who {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--ig-body);
}

.ig-task__av {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--ig-panel);
  color: var(--ig-body);
  font-size: 10.5px;
  font-weight: 600;
}

.ig-task__due {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ig-red);
}

.ig-task__due--done { color: var(--ig-green); }

/* ---- the reassurances under the closing button ------------------------- */

.ig-notes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 26px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.ig-notes li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: #22262F;
}

.ig-notes__icon { display: inline-flex; color: var(--ig-body); }
.ig-notes__icon .hs-i { width: 16px; height: 16px; }

/* ---- narrower screens --------------------------------------------------- */

@media (max-width: 1023px) {
  .ig-hero__grid,
  .ig-split {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The artwork goes above the copy in every split, including the flipped
     one, which is already first in its own source. */
  .ig-split__art { order: -1; }

  .ig-hero__art { order: -1; max-width: 460px; }

  .ig-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; }

  /* On two rows the arrow would join steps that are not side by side. */
  .ig-step + .ig-step::before { display: none; }
}

@media (max-width: 767px) {
  .ig-steps { grid-template-columns: minmax(0, 1fr); }

  .ig-hero__title { font-size: clamp(30px, 8vw, 38px); }

  .ig-app { grid-template-columns: minmax(0, 1fr); }
  .ig-app__side { border-right: 0; border-bottom: 1px solid #F0F2F7; }
  .ig-app__side ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* The three small tiles go under the speaker rather than beside them: a
     96px column beside a phone-width tile leaves neither enough room. */
  .ig-callscreen__grid { grid-template-columns: minmax(0, 1fr); }
  .ig-callscreen__side { grid-template-rows: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ig-callscreen__side .ig-tile { aspect-ratio: 1; }
}

/* The waveform is the only motion here that is not the site's reveal system,
   so it is the only thing that has to be turned off. */
@media (prefers-reduced-motion: reduce) {
  .ig-listen__wave i,
  .ig-out__pulse { animation: none; }
}