@layer infine.components {
/* ==========================================================================
   Connect — the Insight order view (insights_order.cljs): the price by company turnover,
   the order form beside its sticky summary, and the receipt the view turns into once the order is placed.
   The type, buttons, check lists and navy close it shares with the offering overview are in connect-insights.css.
   ========================================================================== */

/* ---- hero, on the soft fade connect-insights.css draws, with the price card lined up over the summary ---- */
.connect-insights .ci-order__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 56px;
  align-items: center;
  padding: 48px var(--ci-edge) 40px;
}
.connect-insights .ci-order__hero .ci-eyebrow { margin-bottom: 12px; }
.connect-insights .ci-order__h { font-size: 46px; max-width: none; }
.connect-insights .ci-order__intro {
  margin-top: 18px;
  max-width: 780px;
  font-size: 17px;
  line-height: 1.65;
}

.connect-insights .ci-price-card {
  position: relative;
  overflow: hidden;
  padding: 30px 32px 28px;
  background: #fff;
  border: 1px solid var(--infine-blue-light-fade);
  border-radius: 20px;
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--infine-blue) 5%, transparent),
    0 24px 48px -30px color-mix(in srgb, var(--infine-blue) 38%, transparent);
}
/* The tinted disc the coin sits on, cut by the card's corner. */
.connect-insights .ci-price-card::before {
  content: "";
  position: absolute;
  top: -70px;
  right: -70px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: var(--infine-green-lite-fade2);
  border: 1px solid var(--infine-green-lite-fade);
}
.connect-insights .ci-price-card__icon {
  position: absolute;
  top: 22px;
  right: 24px;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--infine-green-fade);
  color: var(--infine-green-dark);
}
.connect-insights .ci-price-card__text {
  position: relative;
  margin: 0;
  font-family: var(--mantine-font-family-headings);
  color: var(--infine-blue);
}
.connect-insights .ci-price-card__from {
  display: block;
  font-weight: 600;
  font-size: 16px;
  color: var(--infine-gray-active);
}
.connect-insights .ci-price-card__line {
  display: block;
  margin-top: 4px;
  white-space: nowrap;
}
.connect-insights .ci-price-card__price {
  font-weight: 600;
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.connect-insights .ci-price-card__unit {
  font-family: var(--mantine-font-family);
  font-weight: 600;
  font-size: 16px;
  color: var(--infine-gray-active);
}
.connect-insights .ci-price-card__basis {
  display: block;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--infine-blue-light-fade);
  font-family: var(--mantine-font-family);
  font-size: 15px;
  line-height: 1.5;
  color: var(--infine-gray-active);
}
.connect-insights .ci-price-card__cta {
  position: relative;
  margin-top: 20px;
}

/* ---- sections ---- */
.connect-insights .ci-order__section { padding: 72px var(--ci-edge) 0; }
.connect-insights .ci-order__pricing { padding-top: 44px; }
.connect-insights .ci-order__ready { padding-top: 56px; }
.connect-insights .ci-order__lead { max-width: 780px; }
.connect-insights .ci-order__small {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--infine-gray-active);
}
.connect-insights .ci-order__small a { color: var(--infine-blue-bright); }
.connect-insights .ci-order__small a:hover { color: var(--infine-blue); }
.connect-insights.ci-order .ci-close { margin-top: 72px; }

/* ---- the price table: flat, since nothing in it is a control,
   and it follows the form's turnover rather than setting it ---- */
.connect-insights .ci-prices {
  margin-top: 26px;
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--infine-blue-light-fade);
  border-radius: 14px;
}
.connect-insights .ci-prices__table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  table-layout: fixed;
}
.connect-insights .ci-prices__table thead th {
  padding: 16px 12px 14px;
  vertical-align: bottom;
  text-align: center;
  background-color: var(--infine-blue-bg);
  border-bottom: 1px solid var(--infine-blue-light-fade);
  font-family: var(--mantine-font-family-headings);
  font-weight: 700;
  font-size: 15px;
  color: var(--infine-blue);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.connect-insights .ci-prices__table thead th:first-child {
  width: 210px;
  padding-inline: 22px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.connect-insights .ci-prices__table tbody th {
  padding: 14px 22px;
  text-align: left;
  font-family: var(--mantine-font-family-headings);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--infine-gray-active);
}
.connect-insights .ci-prices__table td {
  padding: 14px 12px;
  text-align: center;
  font-size: 16px;
  color: var(--infine-text);
  transition: background-color 0.3s ease;
}
.connect-insights .ci-prices__table th + th,
.connect-insights .ci-prices__table td { border-left: 1px solid var(--infine-blue-light-fade); }
.connect-insights .ci-prices__table tbody tr + tr > * { border-top: 1px solid var(--infine-blue-light-fade); }
.connect-insights .ci-prices__table tbody tr:last-child td {
  font-weight: 700;
  color: var(--infine-blue);
}
.connect-insights .ci-prices__table thead th.ci-prices--yours {
  background-color: var(--infine-green-bg);
  box-shadow: inset 0 3px 0 var(--infine-green-dark);
}
.connect-insights .ci-prices__table td.ci-prices--yours { background-color: var(--infine-green-lite-fade2); }
.connect-insights .ci-prices__yours {
  display: block;
  margin-bottom: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--infine-green-dark);
}

/* ---- checkout: the form, and the summary beside it ---- */
.connect-insights .ci-order__place .ci-h2 { margin-bottom: 24px; }
.connect-insights .ci-order__checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 48px;
  align-items: start;
}
/* .connect-field-section is on the form for Connect's input chrome, not for its spacing. */
.connect-insights .ci-order-form.connect-field-section {
  min-width: 0;
  margin: 0;
}
.connect-insights .ci-order-form__h {
  margin: 0 0 18px 62px;
  font-family: var(--mantine-font-family-headings);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  color: var(--infine-blue);
}
.connect-insights .ci-order-form__note {
  margin: 16px 0 0 62px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--infine-gray-active);
}

/* ---- the numbered steps on their stepper line ---- */
.connect-insights .ci-step {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 18px;
  padding-bottom: 16px;
}
.connect-insights .ci-step--last { padding-bottom: 0; }
/* Runs from this step's marker centre to the next step's, 39px down each (the marker's 22px offset plus half its 34px),
   and the markers are drawn over it, so the line joins them without a gap or a stroke through either. */
.connect-insights .ci-step__line {
  position: absolute;
  left: 21px;
  top: 39px;
  bottom: -39px;
  width: 2px;
  background: var(--infine-blue-light-fade);
}
.connect-insights .ci-step__marker {
  position: relative;
  z-index: 1;
  padding-top: 22px;
}
.connect-insights .ci-step__done,
.connect-insights .ci-step__todo {
  width: 34px;
  height: 34px;
  box-sizing: border-box;
  margin-left: 5px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.connect-insights .ci-step__done {
  background: var(--infine-green-bright);
  color: #fff;
}
/* Connect's orange: required, not yet filled. */
.connect-insights .ci-step__todo {
  background: #fff;
  border: 2px solid var(--infine-yellow-bright);
  color: var(--infine-text);
  font-family: var(--mantine-font-family-headings);
  font-weight: 700;
  font-size: 15px;
}
.connect-insights .ci-step__body { min-width: 0; }
.connect-insights .ci-step__card {
  min-width: 0;
  margin: 0;
  padding: 22px 26px 26px;
  background: #fff;
  border: 1px solid var(--infine-blue-light-fade);
  border-radius: 16px;
  box-shadow: var(--co-card-shadow);
}
/* Floated so the legend sits inside the fieldset's border like a heading,
   rather than breaking the top border as a legend does. */
.connect-insights .ci-step__legend {
  float: left;
  width: 100%;
  margin: 0 0 18px;
  padding: 0;
  font-family: var(--mantine-font-family-headings);
  font-weight: 700;
  font-size: 18px;
  color: var(--infine-blue);
}
.connect-insights .ci-step__heading {
  margin: 0 0 14px;
  font-family: var(--mantine-font-family-headings);
  font-weight: 700;
  font-size: 18px;
  color: var(--infine-blue);
}

/* ---- fields ---- */
.connect-insights .ci-fields {
  clear: both;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
}
.connect-insights .ci-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.connect-insights .ci-field--wide { grid-column: 1 / -1; }
/* Connect's label row (.connect-field-label), which ends on the field's required or optional mark,
   in the order form's heading face and without the row's own bottom margin, the field's gap standing in for it. */
.connect-insights .ci-field__label {
  margin: 0;
  font-family: var(--mantine-font-family-headings);
  font-weight: 600;
  font-size: 14px;
  color: var(--infine-blue);
}
.connect-insights .ci-field__label .optional { font-family: var(--mantine-font-family); }
.connect-insights .ci-field__hint {
  margin-top: -2px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--infine-gray-active);
}
/* The two e-invoice fields' hints differ in length, and wrap to a different number of lines as the column narrows;
   the shorter one grows to the row's height, which keeps their inputs on one line at any width. */
.connect-insights .ci-method-fields .ci-field__hint { flex-grow: 1; }
/* A field on a row of its own whose answer is short, kept to one column's width with its label and its mark. */
.connect-insights .ci-field--narrow { max-width: 360px; }
/* Connect's inputs at the order form's size: 44px tall and 15px text. */
.connect-insights .ci-order-form .mantine-Input-input {
  --input-height: 44px;
  --input-fz: 15px;
}

/* ---- order terms and acceptance ---- */
.connect-insights .ci-terms {
  height: 188px;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 14px 18px;
  background: var(--infine-blue-bg);
  border: 1px solid var(--infine-blue-light-fade);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--infine-gray-active);
}
.connect-insights .ci-terms:focus-visible {
  outline: 2px solid var(--infine-blue-bright);
  outline-offset: 2px;
}
.connect-insights .ci-terms p { margin: 0 0 9px; }
.connect-insights .ci-terms p:last-child { margin-bottom: 0; }
.connect-insights .ci-terms b {
  font-weight: 600;
  color: var(--infine-blue);
}
/* Links whose destination is still to be decided are anchors without an address,
   which the browser draws as plain text. */
.connect-insights .ci-terms a,
.connect-insights .ci-acceptance a {
  color: var(--infine-blue-bright);
  text-decoration: underline;
}
.connect-insights .ci-acceptance__h {
  margin: 24px 0 14px;
  font-family: var(--mantine-font-family-headings);
  font-weight: 700;
  font-size: 16px;
  color: var(--infine-blue);
}
.connect-insights .ci-acceptance {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* A checkbox and, at the row's end, its required or optional mark, level with the label's first line. */
.connect-insights .ci-acceptance__option {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.connect-insights .ci-acceptance__option .mantine-Checkbox-root { flex: 1; }
.connect-insights .ci-acceptance__option > .required,
.connect-insights .ci-acceptance__option > .optional { margin-top: 3px; }
/* Washed only after a Place order with it unticked:
   a checkbox left empty is not yet a gap in the order. */
.connect-insights .ci-acceptance__terms {
  margin: -10px -12px 0;
  padding: 10px 12px;
  border-radius: 8px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.connect-insights .ci-acceptance__terms--missing {
  background-color: var(--infine-yellow-bg);
  box-shadow: inset 0 0 0 1px var(--infine-yellow-bright);
}
.connect-insights .ci-acceptance .mantine-Checkbox-label {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--infine-blue);
}
.connect-insights .ci-acceptance__privacy {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--infine-gray-active);
}
.connect-insights .ci-place {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}
.connect-insights .ci-place__button {
  min-height: 54px;
  padding: 14px 28px;
  font-size: 16.5px;
}
.connect-insights .ci-place__hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--infine-text);
}
.connect-insights .ci-place__hint::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--infine-yellow-bright);
}

/* ---- the order summary: sticky beside the form ---- */
.connect-insights .ci-summary {
  position: sticky;
  top: 24px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--infine-blue-light-fade);
  border-radius: 20px;
  box-shadow: var(--ci-lift);
}
.connect-insights .ci-summary__head {
  padding: 22px 26px 20px;
  background: var(--infine-blue-bg);
  border-bottom: 1px solid var(--infine-blue-light-fade);
}
.connect-insights .ci-summary__eyebrow {
  font-family: var(--mantine-font-family-headings);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--infine-green-dark);
}
.connect-insights .ci-summary__name {
  margin-top: 6px;
  font-family: var(--mantine-font-family-headings);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  color: var(--infine-blue);
}
.connect-insights .ci-summary__rows {
  margin: 0;
  padding: 8px 26px 4px;
}
.connect-insights .ci-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  font-size: 14px;
}
.connect-insights .ci-summary__row + .ci-summary__row { border-top: 1px solid var(--infine-blue-light-fade); }
.connect-insights .ci-summary__row dt { color: var(--infine-gray-active); }
.connect-insights .ci-summary__row dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
  color: var(--infine-blue);
}
.connect-insights .ci-summary__fee {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 26px;
  padding: 16px 0 18px;
  border-top: 1px dashed var(--infine-blue-light);
}
.connect-insights .ci-summary__fee-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--infine-blue);
}
.connect-insights .ci-summary__fee-value {
  font-family: var(--mantine-font-family-headings);
  font-weight: 600;
  font-size: 26px;
  white-space: nowrap;
  color: var(--infine-blue);
}
.connect-insights .ci-summary__includes { padding: 0 26px 22px; }
.connect-insights .ci-summary__foot {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 26px 18px;
  background: var(--infine-green-lite-fade2);
  border-top: 1px solid var(--infine-green-fade);
  color: var(--infine-green-dark);
}
.connect-insights .ci-summary__foot svg {
  flex-shrink: 0;
  margin-top: 1px;
}
.connect-insights .ci-summary__foot p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--infine-text);
}

/* ---- what's included, how access works, common questions ---- */
.connect-insights .ci-included {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.connect-insights .ci-included__card {
  padding: 24px 26px;
  border: 1px solid;
  border-radius: 16px;
}
.connect-insights .ci-included__card--evaluation {
  background: var(--infine-green-lite-fade2);
  border-color: var(--infine-green-fade);
}
.connect-insights .ci-included__card--co2 {
  background: var(--infine-blue-bg);
  border-color: var(--infine-blue-light-fade);
}
.connect-insights .ci-included__card--risk {
  background: var(--infine-yellow-bg);
  border-color: var(--infine-yellow-fade);
}
.connect-insights .ci-included__h {
  margin: 0 0 8px;
  font-family: var(--mantine-font-family-headings);
  font-weight: 600;
  font-size: 21px;
  color: var(--infine-blue);
}
.connect-insights .ci-included__body {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.6;
}

.connect-insights .ci-access {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.connect-insights .ci-access__step {
  padding: 26px;
  background: #fff;
  border: 1px solid var(--infine-blue-light-fade);
  border-radius: 16px;
  box-shadow: var(--co-card-shadow);
}
.connect-insights .ci-number--lg {
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  font-size: 16px;
}
.connect-insights .ci-access__title {
  margin-bottom: 7px;
  font-family: var(--mantine-font-family-headings);
  font-weight: 600;
  font-size: 17px;
  color: var(--infine-blue);
}
.connect-insights .ci-access__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--infine-gray-active);
}

.connect-insights .ci-faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}
.connect-insights .ci-faq__item {
  padding: 22px 26px;
  background: #fff;
  border: 1px solid var(--infine-blue-light-fade);
  border-radius: 16px;
}
.connect-insights .ci-faq__q {
  margin-bottom: 8px;
  font-family: var(--mantine-font-family-headings);
  font-weight: 600;
  font-size: 16.5px;
  line-height: 1.4;
  color: var(--infine-blue);
}
.connect-insights .ci-faq__a {
  font-size: 15px;
  line-height: 1.6;
  color: var(--infine-gray-active);
}
.connect-insights .ci-faq + .ci-order__small { margin-top: 16px; }

.connect-insights .ci-ready {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  padding: 26px 30px;
  background: var(--infine-green-bg);
  border: 1px solid var(--infine-green-fade);
  border-radius: 18px;
}
.connect-insights .ci-ready__h {
  margin-bottom: 5px;
  font-family: var(--mantine-font-family-headings);
  font-weight: 600;
  font-size: 22px;
  color: var(--infine-blue);
}
.connect-insights .ci-ready__p {
  margin: 0;
  max-width: 560px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--infine-gray-active);
}

/* ==========================================================================
   Order received: the receipt, what comes next, and the way back.
   ========================================================================== */

.connect-insights.ci-received {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px var(--mantine-spacing-xl) var(--mantine-spacing-xl);
  background: linear-gradient(180deg, #fff 0, var(--infine-green-lite-fade2) 60px, #fff 560px);
}
.connect-insights .ci-receipt {
  position: relative;
  width: min(720px, 100%);
  margin-top: 44px;
  /* drop-shadow rather than box-shadow, so the shadow follows the perforated edge instead of the box around it. */
  filter:
    drop-shadow(0 1px 1px color-mix(in srgb, var(--infine-blue) 8%, transparent))
    drop-shadow(0 18px 30px color-mix(in srgb, var(--infine-blue) 14%, transparent));
  animation: ci-receipt-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.connect-insights .ci-receipt__stamp {
  position: absolute;
  z-index: 2;
  top: -44px;
  left: 50%;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #fff;
  transform: translateX(-50%);
  animation: ci-stamp-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s both;
}
.connect-insights .ci-receipt__stamp svg { display: block; }
.connect-insights .ci-receipt__stamp-track {
  stroke: var(--infine-green-fade);
  stroke-width: 3;
}
/* The dash lengths are the ring's and the tick's own path lengths,
   so each is drawn by running its offset down to zero. */
.connect-insights .ci-receipt__stamp-ring {
  stroke: var(--infine-green-bright);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 252;
  stroke-dashoffset: 252;
  animation: ci-stamp-draw 0.7s cubic-bezier(0.65, 0, 0.35, 1) 0.5s forwards;
}
.connect-insights .ci-receipt__stamp-check {
  stroke: var(--infine-green-bright);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: ci-stamp-draw 0.45s cubic-bezier(0.65, 0, 0.35, 1) 1.1s forwards;
}
.connect-insights .ci-receipt__head {
  padding: 66px 52px 30px;
  text-align: center;
  background: #fff;
  border-radius: 20px 20px 0 0;
}
.connect-insights .ci-receipt__h {
  margin: 0;
  font-family: var(--mantine-font-family-headings);
  font-weight: 300;
  font-size: 46px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--infine-blue);
}
.connect-insights .ci-receipt__thanks {
  margin: 16px auto 0;
  max-width: 560px;
  font-size: 18px;
  line-height: 1.6;
}
.connect-insights .ci-receipt__thanks b { color: var(--infine-blue); }
.connect-insights .ci-receipt__next {
  margin: 10px auto 0;
  max-width: 540px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--infine-gray-active);
}
.connect-insights .ci-receipt__body {
  padding: 0 52px 26px;
  background: #fff;
}
.connect-insights .ci-receipt__product {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-top: 22px;
  border-top: 2px dashed var(--infine-blue-light-fade);
}
.connect-insights .ci-receipt__eyebrow {
  font-family: var(--mantine-font-family-headings);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--infine-green-dark);
}
.connect-insights .ci-receipt__name {
  margin-top: 4px;
  font-family: var(--mantine-font-family-headings);
  font-weight: 600;
  font-size: 18px;
  color: var(--infine-blue);
}
.connect-insights .ci-receipt__fee {
  flex-shrink: 0;
  text-align: right;
}
.connect-insights .ci-receipt__fee-label {
  font-size: 12.5px;
  color: var(--infine-gray-active);
}
.connect-insights .ci-receipt__fee-value {
  font-family: var(--mantine-font-family-headings);
  font-weight: 600;
  font-size: 24px;
  white-space: nowrap;
  color: var(--infine-blue);
}
.connect-insights .ci-receipt__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 28px;
  margin: 20px 0 0;
  padding: 18px 20px;
  background: var(--infine-blue-bg);
  border-radius: 12px;
}
.connect-insights .ci-receipt__details dt {
  font-size: 12.5px;
  color: var(--infine-gray-active);
}
.connect-insights .ci-receipt__details dd {
  margin: 3px 0 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--infine-blue);
  overflow-wrap: anywhere;
}
.connect-insights .ci-receipt__details dd span {
  font-weight: 400;
  color: var(--infine-text);
}
/* The receipt's torn-off foot: white scallops cut by transparent circles. */
.connect-insights .ci-receipt__edge {
  height: 16px;
  background: radial-gradient(circle at 50% 100%, transparent 8px, #fff 8.5px) 0 0 / 20px 16px repeat-x;
}

.connect-insights .ci-received__steps {
  list-style: none;
  width: min(720px, 100%);
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.connect-insights .ci-received__step {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 20px;
  background: #fff;
  border: 1px solid var(--infine-blue-light-fade);
  border-radius: 14px;
}
.connect-insights .ci-received__step--done {
  background: var(--infine-green-lite-fade2);
  border-color: var(--infine-green-fade);
}
.connect-insights .ci-received__step--later { border: 1px dashed var(--infine-blue-light); }
.connect-insights .ci-received__marker {
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--infine-green-bright);
  color: #fff;
}
.connect-insights .ci-received__marker--todo {
  background: var(--infine-yellow-bg);
  border: 2px solid var(--infine-yellow-strong);
  color: var(--infine-text);
  font-family: var(--mantine-font-family-headings);
  font-weight: 700;
  font-size: 14px;
}
.connect-insights .ci-received__marker--later {
  background: var(--infine-blue-bg);
  color: var(--infine-blue);
}
.connect-insights .ci-received__title {
  font-family: var(--mantine-font-family-headings);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--infine-blue);
}
.connect-insights .ci-received__body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--infine-gray-active);
}
.connect-insights .ci-received__link {
  margin-top: 2px;
  font-size: 13px;
}
.connect-insights .ci-received__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  box-sizing: border-box;
  margin-top: 32px;
  padding: 11px 20px;
  background: #fff;
  border: 1px solid var(--infine-blue-light-fade);
  border-radius: 12px;
  font-family: var(--mantine-font-family-headings);
  font-weight: 700;
  font-size: 15px;
  color: var(--infine-blue);
  cursor: pointer;
  transition: border-color 0.18s ease;
}
.connect-insights .ci-received__back:hover { border-color: var(--infine-blue-light); }
.connect-insights .ci-received__back:focus-visible {
  outline: 2px solid var(--infine-blue-bright);
  outline-offset: 2px;
}

@keyframes ci-receipt-rise {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes ci-stamp-pop {
  0% { transform: translateX(-50%) scale(0.6); opacity: 0; }
  60% { transform: translateX(-50%) scale(1.06); opacity: 1; }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}
@keyframes ci-stamp-draw {
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .connect-insights .ci-receipt,
  .connect-insights .ci-receipt__stamp { animation: none; }
  .connect-insights .ci-receipt__stamp-ring,
  .connect-insights .ci-receipt__stamp-check {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* ---- narrow frames: one column, and the summary above the form,
   no longer sticky, which it cannot be with nothing beside it ---- */
@media (max-width: 1080px) {
  .connect-insights .ci-order__hero,
  .connect-insights .ci-order__checkout { grid-template-columns: minmax(0, 1fr); }
  .connect-insights .ci-order__hero { gap: 28px; }
  .connect-insights .ci-price-card { max-width: 420px; }
  .connect-insights .ci-order__h { font-size: 40px; }
  .connect-insights .ci-summary {
    position: static;
    order: -1;
    max-width: 520px;
  }
}
@media (max-width: 880px) {
  .connect-insights .ci-included,
  .connect-insights .ci-access,
  .connect-insights .ci-faq,
  .connect-insights .ci-fields,
  .connect-insights .ci-received__steps,
  .connect-insights .ci-receipt__details { grid-template-columns: minmax(0, 1fr); }
  .connect-insights .ci-order-form__h,
  .connect-insights .ci-order-form__note { margin-left: 0; }
  .connect-insights .ci-receipt__head { padding-inline: 24px; }
  .connect-insights .ci-receipt__body { padding-inline: 24px; }
}
}