/*
 * Insight pieces (components/insight-pieces): the ready-made boxes an editor inserts into an article, as in the
 * Article wireframe. Loaded on articles and in the editor, so they look the same in both.
 *
 * - At a glance (insight-piece--glance): a pale teal box with a table of each change, when it starts and who it
 *   affects. The table scrolls sideways on phones rather than squashing.
 * - In a nutshell (insight-piece--nutshell): three white cards, each with what changes, the old value struck
 *   through, a teal arrow and the new value large. On the article page it's lifted into a band under the heading
 *   (assets/css/pages/insight-article.css); in the editor it's a pale teal box.
 * - A change (insight-piece--change): a section under a thin line, with a label such as "Change one" and a small
 *   heading.
 * - Employer impact (insight-piece--impact): a cream callout with a teal edge, also used for "Watch out".
 * - What does not change (insight-piece--note): a pale teal note with a shield tick.
 * - Key dates (insight-piece--timeline): dates down a line, a dot for each; words in italics become a pill, such as
 *   "In force", and the last date is highlighted in deep teal.
 * - Cards (insight-piece--cards): bordered cards two by two, one above another on phones.
 * - What employers should review (insight-piece--review): a deep teal box with a tick before each point, also used
 *   for "Your practical checklist".
 * - How we can help (insight-piece--help): a pale teal box with its words beside a button.
 * - Sources and disclaimer (insight-piece--sources): small grey print to close the article.
 *
 * For the Explainer layout (laid out as full-width bands in assets/css/pages/insight-article.css; boxes elsewhere):
 *
 * - Myth and fact (insight-piece--myth): the myth struck through on white, then the fact on deep teal.
 * - Section (insight-piece--section): a label, a heading and an opening line, with other pieces inside.
 * - How it works (insight-piece--hours): bars of the hours worked each week against a dashed contracted-hours line,
 *   beside numbered steps. The bars' heights come from the numbers typed in (--hours, set by
 *   wpta_insight_with_hours()); in the editor the numbers show without bars.
 * - Hours compared (insight-piece--compare): two cards, each with contracted and usual hours as bars.
 * - Plan in stages (insight-piece--plan): a deep teal panel with the actions in three stages.
 * - The bottom line (insight-piece--bottom): a centred pull quote with two buttons.
 */

.insight-piece {
  margin: 0;
}

.insight-piece .wp-block-group__inner-container {
  display: contents;
}

/* At a glance */

.wp-block-group.insight-piece--glance {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--teal-pale);
}

.insight-piece--glance .insight-piece__title {
  margin: 0;
  color: #0d3d39;
  font-family: inherit;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: none;
}

.insight-piece--glance .wp-block-table {
  margin: 0;
  overflow-x: auto;
}

.insight-piece--glance table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.45;
  table-layout: auto;
}

.insight-piece--glance thead {
  border: 0;
}

.insight-piece--glance th,
.insight-piece--glance td {
  padding: 10px 12px;
  border: 0;
  text-align: left;
  vertical-align: top;
}

.insight-piece--glance th {
  padding-top: 8px;
  padding-bottom: 8px;
  color: var(--teal-darker);
  font-weight: 700;
}

.insight-piece--glance tbody tr {
  border-top: 1px solid var(--border);
}

.insight-piece--glance th:first-child,
.insight-piece--glance td:first-child {
  padding-left: 0;
}

.insight-piece--glance th:last-child,
.insight-piece--glance td:last-child {
  padding-right: 0;
}

/* Employer impact */

.wp-block-group.insight-piece--impact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 22px;
  border-left: 4px solid var(--teal-dark);
  border-radius: 0 12px 12px 0;
  background: #f4f3ee;
  font-size: 16px;
  line-height: 1.6;
}

.insight-piece--impact p {
  margin: 0;
}

.insight-piece--impact .insight-piece__eyebrow {
  color: var(--teal-darker);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* What employers should review */

.wp-block-group.insight-piece--review {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border-radius: 16px;
  background: #0d3d39;
  color: #f4f3ee;
}

.insight-piece--review .insight-piece__title {
  margin: 0;
  color: var(--white);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: none;
}

.insight-piece--review .insight-piece__subline {
  margin: -8px 0 0;
  color: var(--teal-light);
  font-size: 15px;
  line-height: 1.55;
}

.insight-piece--review .insight-piece__checklist {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  line-height: 1.5;
}

.insight-piece--review .insight-piece__checklist li {
  position: relative;
  margin: 0;
  padding-left: 34px;
  color: var(--teal-light);
}

/* The tick, drawn in teal before each point */

.insight-piece--review .insight-piece__checklist li::before {
  position: absolute;
  top: 1px;
  left: 0;
  width: 22px;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234fb9af' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") no-repeat center / contain;
  content: "";
}

.insight-piece--review .insight-piece__checklist strong {
  color: var(--white);
}

/* In a nutshell: the cards three side by side, each with its before and after */

.wp-block-group.insight-piece--nutshell {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--teal-pale);
}

.insight-piece--nutshell .insight-piece__title {
  margin: 0;
  color: var(--teal-dark);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.wp-block-group.insight-piece__nutshell-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
}

.wp-block-group.insight-piece__nutshell-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--white);
}

.insight-piece__nutshell-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.55;
}

.insight-piece__nutshell-card .insight-piece__nutshell-label {
  color: var(--teal-dark);
  font-size: 13px;
  font-weight: 600;
}

/* The old value struck through, a teal arrow, then the new value in the heading font */

.insight-piece__nutshell-card .insight-piece__nutshell-change {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1.2;
}

.insight-piece__nutshell-change s {
  text-decoration-thickness: 1px;
}

.insight-piece__nutshell-change strong {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  color: #0d3d39;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(32px, 3vw, 38px);
  font-weight: 400;
  line-height: 1;
}

.insight-piece__nutshell-change s + strong::before {
  color: var(--teal);
  content: "→";
  font-family: Inter, system-ui, sans-serif;
  font-size: 18px;
}

.insight-piece--nutshell .insight-piece__nutshell-summary {
  max-width: 860px;
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}

/* A change */

.wp-block-group.insight-piece--change {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.insight-piece--change p {
  margin: 0;
}

.insight-piece--change .insight-piece__eyebrow {
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.insight-piece--change .insight-piece__heading {
  margin: 0;
  color: #0d3d39;
  font-family: inherit;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: none;
}

/* What does not change: a shield tick before the words */

.wp-block-group.insight-piece--note {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--teal-pale);
  font-size: 16px;
  line-height: 1.6;
}

.wp-block-group.insight-piece--note::before {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23267d75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.4 8.3-8 9-4.6-.7-8-4.5-8-9V6l8-3z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E") no-repeat center / contain;
  content: "";
}

.insight-piece--note p {
  margin: 0;
}

.insight-piece--note strong {
  color: #0d3d39;
}

/*
 * Key dates: each date in a column of its own, then a dot on a line running down to the next date, then what
 * happens. The last date is the one that matters most: a larger deep teal dot and its words on deep teal.
 */

.insight-piece--timeline .insight-piece__timeline {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.insight-piece--timeline .insight-piece__timeline li {
  position: relative;
  isolation: isolate;
  margin: 0;
  padding: 0 0 22px 210px;
  font-size: 16px;
  line-height: 1.55;
}

.insight-piece--timeline .insight-piece__timeline li strong {
  position: absolute;
  top: 0;
  left: 0;
  width: 170px;
  color: #0d3d39;
  font-weight: 600;
}

/* The dot, then the line down to the next date */

.insight-piece--timeline .insight-piece__timeline li::before {
  position: absolute;
  top: 7px;
  left: 192px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--border);
  content: "";
}

.insight-piece--timeline .insight-piece__timeline li:not(:last-child)::after {
  position: absolute;
  top: 19px;
  bottom: 0;
  left: 197px;
  width: 2px;
  background: var(--border);
  content: "";
}

/* A date with a pill, such as "In force", has already happened: its dot is teal */

.insight-piece--timeline .insight-piece__timeline li:has(em)::before {
  background: var(--teal);
}

.insight-piece--timeline .insight-piece__timeline em {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--teal-light);
  color: var(--teal-darker);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.5;
  vertical-align: 1px;
}

/* The last date, highlighted */

.insight-piece--timeline .insight-piece__timeline li:last-child {
  padding: 12px 16px 12px 226px;
  color: var(--white);
}

.insight-piece--timeline .insight-piece__timeline li:last-child strong {
  top: 12px;
}

.insight-piece--timeline .insight-piece__timeline li:last-child::before {
  top: 16px;
  left: 189px;
  width: 18px;
  height: 18px;
  background: #0d3d39;
  box-shadow: 0 0 0 4px var(--teal-light);
}

.insight-piece--timeline .insight-piece__timeline li:last-child::after {
  position: absolute;
  z-index: -1;
  inset: 0 0 0 210px;
  border-radius: 10px;
  background: #0d3d39;
  content: "";
}

/* Cards, two by two */

.wp-block-group.insight-piece--cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.wp-block-group.insight-piece__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--white);
  font-size: 15px;
  line-height: 1.6;
}

.insight-piece--cards .insight-piece__card h3 {
  margin: 0;
  color: #0d3d39;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  text-transform: none;
}

.insight-piece--cards .insight-piece__card p {
  margin: 0;
}

/* How we can help: the words beside the button, which drops below them when there's no room */

.wp-block-group.insight-piece--help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  padding: 28px 32px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--teal-pale);
}

.wp-block-group.insight-piece__help-copy {
  display: flex;
  flex: 1 1 340px;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
}

.insight-piece--help .insight-piece__title {
  margin: 0;
  color: #0d3d39;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: none;
}

.insight-piece--help p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}

.insight-piece--help .insight-piece__actions {
  display: flex;
  margin: 0;
}

.insight-piece--help .insight-piece__button .wp-block-button__link {
  display: inline-block;
  padding: 14px 22px;
  border-radius: 8px;
  background: var(--teal-darker);
  color: var(--white);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.insight-piece--help .insight-piece__button .wp-block-button__link:hover,
.insight-piece--help .insight-piece__button .wp-block-button__link:focus-visible {
  background: #0d3d39;
}

.insight-piece--help .insight-piece__button .wp-block-button__link:focus-visible {
  outline: 2px solid var(--teal-darker);
  outline-offset: 3px;
}

/* Sources and disclaimer */

.wp-block-group.insight-piece--sources {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.55;
}

.insight-piece--sources p {
  margin: 0;
}

.insight-piece--sources a {
  color: var(--teal-darker);
}

/* Explainer: Myth and fact */

.wp-block-group.insight-piece--myth {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.insight-piece--myth p {
  margin: 0;
  padding: 22px 24px;
  border-radius: 16px;
  font-size: 17px;
  line-height: 1.5;
}

.insight-piece--myth .insight-piece__myth-false {
  border: 1px solid #e3e0d6;
  background: var(--white);
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-color: #b8b4a8;
}

.insight-piece--myth .insight-piece__myth-true {
  background: #0d3d39;
  color: var(--white);
}

/* The "Myth" and "Fact" pills: inline blocks, so the myth's strike doesn't run through them */

.insight-piece--myth strong {
  display: inline-block;
  margin-right: 12px;
  vertical-align: 2px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.insight-piece--myth .insight-piece__myth-false strong {
  background: #f4f3ee;
  color: var(--text-muted);
}

.insight-piece--myth .insight-piece__myth-true strong {
  background: var(--teal);
  color: #0d3d39;
}

/* Explainer: Section. Its label, heading and opening line; laid out as a band on the article page */

.wp-block-group.insight-piece--section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.insight-piece--section .insight-piece__eyebrow,
.insight-piece--plan .insight-piece__eyebrow,
.insight-piece--bottom .insight-piece__eyebrow,
.insight-piece--compare .insight-piece__eyebrow {
  margin: 0;
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.insight-piece--section .insight-piece__heading,
.insight-piece--plan .insight-piece__heading {
  max-width: 760px;
  margin: 0;
  color: #0d3d39;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(30px, 3.4vw, 38px);
  font-weight: 400;
  line-height: 1.15;
  text-transform: none;
}

.insight-piece--section .insight-piece__intro {
  max-width: 760px;
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
}

/* Explainer: How it works. The chart beside the steps, the steps below it on tablets and phones */

.wp-block-group.insight-piece--hours {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  margin-top: 16px;
}

.wp-block-group.insight-piece__chart {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 8px;
  min-width: 0;
  margin: 0;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--teal-pale);
}

.insight-piece__chart p {
  margin: 0;
}

.insight-piece__chart .insight-piece__chart-title {
  color: #0d3d39;
  font-size: 16px;
  font-weight: 600;
}

.insight-piece__chart .insight-piece__chart-tag {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--teal-light);
  color: var(--teal-darker);
  font-size: 12px;
  font-weight: 600;
}

.insight-piece__chart .insight-piece__chart-note {
  flex-basis: 100%;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* The bars: each week's hours above its bar, five pixels an hour, then the week ("W1") below */

.insight-piece__chart .insight-piece__bars {
  display: flex;
  flex-basis: 100%;
  align-items: flex-end;
  gap: 8px;
  min-height: 150px;
  margin: 0;
  padding: 0;
  counter-reset: week;
  list-style: none;
}

.insight-piece__chart .insight-piece__bars li {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin: 0;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.2;
  counter-increment: week;
}

.insight-piece__chart .insight-piece__bars li::before {
  order: 1;
  width: 100%;
  height: calc(var(--hours, 0) * 5px);
  border-radius: 6px 6px 0 0;
  background: var(--teal);
  content: "";
}

.insight-piece__chart .insight-piece__bars li::after {
  order: 2;
  height: 16px;
  content: "W" counter(week);
  font-size: 12px;
}

/*
 * The contracted hours: a dashed line across the bars at its height, its words on deep teal just above it on the
 * right. The line is the paragraph's lower edge (its words are one 20px line), so the paragraph is pulled up over
 * the bars by the row gap (16px), the week labels (20px), its own line and the hours, and given the room back below.
 */

.insight-piece__chart .insight-piece__contracted {
  position: relative;
  z-index: 1;
  flex-basis: 100%;
  height: 20px;
  margin: calc(-56px - var(--hours, 0) * 5px) 0 calc(18px + var(--hours, 0) * 5px);
  border-bottom: 2px dashed #0d3d39;
  color: #0d3d39;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-align: right;
}

.insight-piece__chart .insight-piece__contracted::first-line {
  background: #0d3d39;
  color: var(--white);
}

/* The steps, each numbered in a deep teal circle */

.insight-piece--hours .insight-piece__steps {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  padding: 0;
  counter-reset: step;
  list-style: none;
}

.insight-piece--hours .insight-piece__steps li {
  position: relative;
  margin: 0;
  padding-left: 48px;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.55;
  counter-increment: step;
}

.insight-piece--hours .insight-piece__steps li::before {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #0d3d39;
  color: var(--white);
  content: counter(step);
  font-size: 15px;
  font-weight: 600;
}

.insight-piece--hours .insight-piece__steps strong {
  display: block;
  margin-bottom: 2px;
  color: #0d3d39;
  font-size: 17px;
  font-weight: 600;
}

/* Explainer: Hours compared. Two cards side by side, each bar's length out of 40 hours */

.wp-block-group.insight-piece--compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 12px;
}

.wp-block-group.insight-piece__compare-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  margin: 0;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--white);
}

.insight-piece__compare-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}

.insight-piece--compare .insight-piece__hours {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.insight-piece--compare .insight-piece__hours li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 56px;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}

.insight-piece--compare .insight-piece__hours li::before {
  grid-row: 1;
  grid-column: 2;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--teal) 0 calc(var(--hours, 0) * 2.5%), var(--teal-pale) 0);
  content: "";
}

.insight-piece--compare .insight-piece__hours li:first-child::before {
  background: linear-gradient(to right, var(--border) 0 max(3px, calc(var(--hours, 0) * 2.5%)), var(--teal-pale) 0);
}

.insight-piece--compare .insight-piece__hours strong {
  grid-row: 1;
  grid-column: 3;
  color: #0d3d39;
  font-size: 14px;
  text-align: right;
}

/* Explainer: Plan in stages, on deep teal */

.wp-block-group.insight-piece--plan {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px;
  border-radius: 18px;
  background: #0d3d39;
}

.insight-piece--plan .insight-piece__eyebrow {
  color: var(--teal);
}

.insight-piece--plan .insight-piece__heading {
  color: var(--white);
}

.wp-block-group.insight-piece__stages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 12px 0 0;
}

.wp-block-group.insight-piece__stage {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  margin: 0;
  padding: 24px;
  border: 1px solid rgba(223, 245, 242, 0.2);
  border-radius: 16px;
}

.insight-piece__stage .insight-piece__stage-label {
  margin: 0;
  color: var(--teal);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.insight-piece__stage .insight-piece__ticks {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.insight-piece__stage .insight-piece__ticks li {
  position: relative;
  margin: 0;
  padding-left: 30px;
  color: var(--teal-light);
  font-size: 15px;
  line-height: 1.5;
}

.insight-piece__stage .insight-piece__ticks li::before {
  position: absolute;
  top: 1px;
  left: 0;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234fb9af' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") no-repeat center / contain;
  content: "";
}

.insight-piece__stage .insight-piece__ticks strong {
  color: var(--white);
}

/* Explainer: The bottom line, centred */

.wp-block-group.insight-piece--bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}

.insight-piece--bottom p {
  max-width: 680px;
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
}

.insight-piece--bottom .insight-piece__quote {
  max-width: 860px;
  color: #0d3d39;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.3;
}

.insight-piece--bottom .insight-piece__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 8px 0 0;
}

.insight-piece--bottom .insight-piece__button .wp-block-button__link {
  display: inline-block;
  padding: 14px 22px;
  border: 1.5px solid var(--teal-darker);
  border-radius: 8px;
  background: var(--teal-darker);
  color: var(--white);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.insight-piece--bottom .insight-piece__button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--teal-darker);
}

.insight-piece--bottom .insight-piece__button .wp-block-button__link:hover,
.insight-piece--bottom .insight-piece__button .wp-block-button__link:focus-visible {
  border-color: #0d3d39;
  background: #0d3d39;
  color: var(--white);
}

.insight-piece--bottom .insight-piece__button .wp-block-button__link:focus-visible {
  outline: 2px solid var(--teal-darker);
  outline-offset: 3px;
}

/* Visitors who ask for reduced motion: the button's colour changes at once */

@media (prefers-reduced-motion: reduce) {
  .insight-piece--help .insight-piece__button .wp-block-button__link,
  .insight-piece--bottom .insight-piece__button .wp-block-button__link {
    transition: none;
  }
}

/* Tablets: the nutshell cards one above another, as three side by side would squash the new values */

@media (max-width: 899px) {
  .wp-block-group.insight-piece__nutshell-cards,
  .wp-block-group.insight-piece--hours,
  .wp-block-group.insight-piece__stages {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .wp-block-group.insight-piece--hours {
    gap: 24px;
  }
}

/* Phones: a little less room inside the boxes; cards one above another; each date above what happens */

@media (max-width: 640px) {
  .wp-block-group.insight-piece--glance,
  .wp-block-group.insight-piece--review,
  .wp-block-group.insight-piece--nutshell,
  .wp-block-group.insight-piece--help {
    padding: 22px;
  }

  .wp-block-group.insight-piece--cards,
  .wp-block-group.insight-piece--compare {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .wp-block-group.insight-piece__chart,
  .wp-block-group.insight-piece__compare-card,
  .wp-block-group.insight-piece--plan {
    padding: 20px;
  }

  .insight-piece__chart .insight-piece__bars {
    gap: 4px;
  }

  .insight-piece__chart .insight-piece__bars li::after {
    content: counter(week);
  }

  .insight-piece--compare .insight-piece__hours li {
    grid-template-columns: 88px minmax(0, 1fr) 52px;
    gap: 10px;
  }

  .insight-piece--myth p {
    padding: 18px 20px;
    font-size: 16px;
  }

  .wp-block-group.insight-piece--help .insight-piece__actions,
  .wp-block-group.insight-piece--help .insight-piece__button,
  .wp-block-group.insight-piece--help .insight-piece__button .wp-block-button__link {
    width: 100%;
    text-align: center;
  }

  .insight-piece--timeline .insight-piece__timeline li {
    padding-left: 36px;
  }

  .insight-piece--timeline .insight-piece__timeline li strong {
    position: static;
    display: block;
    width: auto;
  }

  .insight-piece--timeline .insight-piece__timeline li::before {
    left: 0;
  }

  .insight-piece--timeline .insight-piece__timeline li:not(:last-child)::after {
    left: 5px;
  }

  .insight-piece--timeline .insight-piece__timeline li:last-child {
    padding: 12px 16px 12px 52px;
  }

  .insight-piece--timeline .insight-piece__timeline li:last-child strong {
    color: var(--white);
  }

  .insight-piece--timeline .insight-piece__timeline li:last-child::before {
    left: 16px;
    width: 14px;
    height: 14px;
    background: var(--teal);
    box-shadow: none;
  }

  .insight-piece--timeline .insight-piece__timeline li:last-child::after {
    inset: 0;
  }
}