@layer infine.components {
/* ==========================================================================
   Connect — Overview page (Direction E).

   The navy HERO is ported faithfully from the handoff `dirE.css`: radius/
   padding/structure and the slot/pane/card/icon/arrow/check hover choreography
   are preserved. Its bespoke navy-surface colours (which the light-surface
   --infine-* palette can't express) are declared ONCE here as scoped --co-*
   vars — the handoff README explicitly sanctions these surface-only literals.

   Everything OUTSIDE the hero (attention, band, team, coming) uses the repo's
   white-card idiom (see connect-team-panel.css), NOT a copy of dirE.css.
   ========================================================================== */

/* Shared elevation for the white cards below the hero (.co-attention / .co-faq /
   .co-coming / .co-help). On :root (not scoped to .connect-overview) because the
   .co-help carousel is reused — compact — at the top of the form marginalia
   column, outside .connect-overview, and must resolve this var there. A 2-layer
   lift: a tight contact shadow + a soft, far-cast ambient one, the --infine-blue
   token at 4% / 30% alpha. */
:root {
  --co-card-shadow:
    0 1px 2px color-mix(in srgb, var(--infine-blue) 4%, transparent),
    0 10px 30px -22px color-mix(in srgb, var(--infine-blue) 30%, transparent);
}

.connect-overview {
  /* --- sanctioned navy-surface literals (handoff README → Design tokens) ---
     Only the colours the light --infine-* palette can't express stay here: the
     navy gradient/surfaces, the translucent donut track, and the light "ready"
     lede tint (a legibility tint for green text on navy). The green/yellow/red
     status accents AND the orange CTA accent derive from the shared --infine-*
     tokens, lightened for the navy surface (see --co-status-* below). */
  --co-hero-grad:
    radial-gradient(130% 150% at 88% -10%, rgba(255, 255, 255, 0.10), transparent 55%),
    linear-gradient(152deg, #0A4279 0%, #003366 52%, #002A52 100%);
  --co-card-base: #0E3D6E;
  --co-card-hover: #14467D;
  --co-card-border: rgba(255, 255, 255, 0.16);
  --co-donut-track: rgba(255, 255, 255, 0.16);
  --co-ready-green: #8FE3A8;
  /* Donut-pill text tints: a light red / green that stay legible on the navy
     hero (the --infine-* red/green are tuned for white surfaces and read too
     dark here) — same rationale as --co-ready-green above. Paired with the
     translucent --infine-red-strong / --co-ready-green pill fills below. */
  --co-flag-text: #FFC9C9;
  --co-ok-text:   #BFE9C9;

  /* Status / accent colours on the navy hero. The shared --infine-* tokens are
     tuned for white surfaces and read dark/muddy on the navy gradient, so the
     hero lightens each with a calculated white mix (single-use, scoped — no new
     library tokens) — same spirit as the orange pane's brightness lift. Green is
     the muddiest (#179900) so it gets the most lift. Consumed by the donut ring
     arcs (tone->color in overview.cljs) + legend dots, and the CTA panes / icons
     / arrows / checks below (green reused for the cleared state). */
  --co-status-green:  color-mix(in srgb, var(--infine-green-bright)  70%, white);
  --co-status-yellow: color-mix(in srgb, var(--infine-yellow-strong) 86%, white);
  --co-status-red:    color-mix(in srgb, var(--infine-red)           90%, white);
  --co-status-orange: color-mix(in srgb, var(--infine-yellow-bright) 85%, white);

  /* --co-card-shadow now lives on :root (top of file), not here: the compact
     tips carousel reuses the .co-help surface in the form marginalia column,
     which is OUTSIDE .connect-overview, so the shadow var must resolve there
     too. The four white cards below the hero still read it identically. */

  /* Fill the main UI frame like every other Insight view (roster, company,
     team) — no fixed max-width. Just the shared horizontal page padding. */
  padding: 0 var(--mantine-spacing-xl) var(--mantine-spacing-xl);
}

/* ---- hero shell ----
   The hero scales with available width rather than stretching: it's the query
   container (`cqi` = 1% of hero inline size), and the lede type, donut diameter,
   gaps, and vertical padding all grow via clamp() as the hero widens. Content is
   left-anchored (fixed H padding on __inner) so the page's left content edge
   never moves — the band just grows taller and more generous on wide screens. */
.connect-overview .co-hero {
  container-type: inline-size;
  border-radius: 28px;
  padding-block: clamp(34px, 3.4cqi, 70px);
  background: var(--co-hero-grad);
  /* Clearly visible lift, but kept within the ~30px gap above the help box so it
     doesn't bleed onto it (the original 0 24px 50px -28px/.55 reached ~46px and
     overshadowed the box). */
  box-shadow: 0 16px 32px -20px rgba(0, 51, 102, 0.52);
}
/* Fixed horizontal padding holds the content's left edge at a constant inset
   (no centring → no drifting left line). Also the bleed edge the action cards'
   negative margins reach (see .co-cards). */
.connect-overview .co-hero__inner {
  padding-inline: 50px;
}
/* Lede + donuts as a left-packed group; the scaled gap keeps the donut cluster
   glued a fixed-ish distance from the lede instead of detaching across a void. */
.connect-overview .co-hero__top {
  display: flex;
  align-items: center;
  gap: clamp(44px, 6cqi, 150px);
}
/* Service suppliers have a single (company) donut, so the right of the hero
   would otherwise sit empty with the donut glued to the lede. Split the row into
   two weighted regions and let .co-donuts' own justify-content:center centre the
   lone donut in its ~38% right region (the border-left divider lands on the
   boundary). Wide layout only — at ≤1080px .co-hero__top is flex-direction:column
   and a main-axis flex-basis would size height, not width. */
@media (min-width: 1081px) {
  .connect-overview .co-hero--service .co-lede   { flex: 1.6 1 0; }
  .connect-overview .co-hero--service .co-donuts { flex: 1 1 0; }
}

/* ---- lede ---- */
.connect-overview .co-lede { flex: 0 1 auto; min-width: 0; }
.connect-overview .co-lede__h {
  font-family: var(--mantine-font-family-headings);
  font-weight: 300;
  /* fluid: ~48px at the original ~1300px width, up to 92px on wide screens */
  font-size: clamp(40px, 3.7cqi, 92px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0;
  /* ch-based cap keeps the measure readable while the px width grows with font */
  max-width: 22ch;
  text-wrap: balance;
}
.connect-overview .co-lede__h b { font-weight: 600; }
.connect-overview .co-lede__h .co-ready { color: var(--co-ready-green); font-weight: 600; }
.connect-overview .co-lede__p {
  font-size: clamp(16.5px, 1.25cqi, 24px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  margin: clamp(20px, 1.7cqi, 36px) 0 0;
  max-width: 58ch;
}
.connect-overview .co-lede__p b { color: #fff; font-weight: 600; }

/* ---- donuts ----
   The donut cluster scales as one unit via `zoom` (see the @container steps in
   the responsive section). We must use zoom — NOT a fluid `--rp-size` — because
   Mantine's RingProgress draws its <svg> circles at fixed coordinates derived
   from the numeric `size` prop, with no viewBox; overriding `--rp-size` in CSS
   only stretches the svg box, and the `transform: rotate(-90deg)` then pivots the
   fixed-geometry ring off-centre of the box while the label stays centred in it,
   so ring and "%" drift apart. `zoom` scales the rendered geometry AND the label
   together (and reserves layout space), keeping them aligned at every step. */
.connect-overview .co-donuts {
  flex: 0 0 auto;
  display: flex;
  gap: 38px;
  justify-content: center;
  padding-left: 54px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}
.connect-overview .co-donut {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 188px;
}
/* center label node handed to RingProgress */
.connect-overview .co-donut__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.connect-overview .co-donut__pct {
  font-family: var(--mantine-font-family-headings);
  font-weight: 300;
  font-size: 46px;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.02em;
}
.connect-overview .co-donut__pct em {
  font-style: normal;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.6);
}
.connect-overview .co-donut__caption {
  font-family: var(--mantine-font-family-headings);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 3px;
}
.connect-overview .co-donut__label {
  font-family: var(--mantine-font-family-headings);
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  margin: 16px 0 9px;
  white-space: nowrap;
}
.connect-overview .co-donut__legend {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.74);
}
.connect-overview .co-donut__legend .l {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  justify-content: center;
  white-space: nowrap;
}
.connect-overview .co-donut__legend .l b {
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.connect-overview .co-donut__legend .muted { color: rgba(255, 255, 255, 0.6); }
.connect-overview .co-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.connect-overview .co-dot--done { background: var(--co-status-green); }
.connect-overview .co-dot--progress { background: var(--co-status-yellow); }
.connect-overview .co-dot--flag { background: var(--co-status-red); }
/* pills under the ring */
.connect-overview .co-donut__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 4px 11px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
}
.connect-overview .co-donut__pill--flag {
  /* Red is the --infine-red-strong token (#E04D4D); reserved for errors, which
     this flag pill is. Translucent fill + border off the one token. */
  background: color-mix(in srgb, var(--infine-red-strong) 16%, transparent);
  color: var(--co-flag-text);
  border: 1px solid color-mix(in srgb, var(--infine-red-strong) 40%, transparent);
}
.connect-overview .co-donut__pill--ok {
  /* Green fill is the --co-ready-green hero tint, made translucent. */
  background: color-mix(in srgb, var(--co-ready-green) 16%, transparent);
  color: var(--co-ok-text);
  border: 1px solid color-mix(in srgb, var(--co-ready-green) 36%, transparent);
}

/* ---- the four action cards, folded into the hero ---- */
.connect-overview .co-cards {
  margin: 30px -50px -34px;
  padding: 26px 50px 30px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
/* Service suppliers show only the Team + Company cards — let them fill the row
   (each 1fr) so the two cards span the full width, matching the four-card row. */
.connect-overview .co-hero--service .co-cards {
  grid-template-columns: repeat(2, 1fr);
}
/* each card sits in a slot; a full-size orange pane is stacked directly BEHIND
   the card and shifted down, so only its bottom edge peeks — the card visibly
   lifts off a solid base. Pane motion is pure transform → no reflow. */
.connect-overview .co-card-slot { position: relative; display: flex; }
.connect-overview .co-card-slot > .co-card { flex: 1; }
.connect-overview .co-pane {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--co-status-orange);
  border-radius: 14px;
  transform: translateY(6px);
  /* Hover brightens the pane via `filter` so the base colour stays a token
     (no bespoke "-hover" literal), alongside the downward shift. */
  filter: brightness(1);
  transition: transform 0.18s ease, filter 0.18s ease;
}
.connect-overview .co-card-slot--cleared .co-pane { background: var(--co-status-green); }
.connect-overview .co-card-slot:hover .co-pane {
  transform: translateY(13px);
  filter: brightness(1.08);
}
.connect-overview .co-card-slot--cleared:hover .co-pane { filter: brightness(1.12); }

.connect-overview .co-card {
  position: relative;
  z-index: 1;
  overflow: hidden;
  appearance: none;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  padding: 20px 18px 18px;
  border-radius: 14px;
  background: var(--co-card-base);
  border: 1px solid var(--co-card-border);
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
/* keep the card's own content above the sheen layer */
.connect-overview .co-card > span { position: relative; z-index: 2; }
/* diagonal sheen that sweeps across only on hover */
.connect-overview .co-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.04) 42%, rgba(255, 255, 255, 0) 70%);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.connect-overview .co-card-slot:hover .co-card {
  transform: translateY(-3px);
  background: var(--co-card-hover);
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow: 0 16px 28px -16px rgba(0, 0, 0, 0.6);
}
.connect-overview .co-card-slot:hover .co-card::before { opacity: 1; }
.connect-overview .co-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* neutral icon at rest — picks up the orange accent on hover. Quick colour
   crossfade both ways so white⇄orange reads as a fade, not a snap. */
.connect-overview .co-card__icon {
  color: #fff;
  display: flex;
  transition: color 0.22s ease;
}
.connect-overview .co-card-slot:not(.co-card-slot--cleared):hover .co-card__icon {
  color: var(--co-status-orange);
}
/* bare arrow at rest; the orange box materialises on hover. Colour is in the
   transition list too, so the glyph fades white⇄orange in step with its box. */
.connect-overview .co-card__arrow {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.85);
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.18s ease;
}
.connect-overview .co-card-slot:hover .co-card__arrow {
  background: var(--co-status-orange);
  border-color: var(--co-status-orange);
  color: #fff;
  transform: translateX(2px);
  box-shadow: 0 3px 10px -3px color-mix(in srgb, var(--co-status-orange) 60%, transparent);
}
/* cleared state: solid green tick — board cleared, make it felt */
.connect-overview .co-card__check {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 8px;
  background: var(--co-status-green);
  border: 1px solid var(--co-status-green);
  color: #fff;
  box-shadow: 0 3px 10px -3px color-mix(in srgb, var(--co-status-green) 65%, transparent);
}
.connect-overview .co-card__label {
  font-family: var(--mantine-font-family-headings);
  font-size: 17px;
  line-height: 1.32;
  color: #fff;
  font-weight: 800;
}
.connect-overview .co-card__fine {
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Below the hero — site-styled white cards (repo idiom), NOT a copy of
   dirE.css. Attention mirrors the roster's row/dot/pill vocabulary.
   ========================================================================== */

/* Shared white-card surface for the four boxes below the hero — the bg + border
   + elevation that was byte-identical across all four. Each card keeps its own
   radius / padding / margin / overflow in its own rule below. */
.connect-overview .co-attention,
.connect-overview .co-faq,
.connect-overview .co-coming,
.co-help {
  background: #fff;
  border: 1px solid var(--infine-blue-light-fade);
  box-shadow: var(--co-card-shadow);
}

/* ---- "What needs you" ---- */
.connect-overview .co-attention {
  border-radius: 20px;
  padding: 24px 28px 26px;
  margin-top: 26px;
}
/* Shared section heading — used by BOTH "Worth a look" and "Coming this
   autumn" so the two read as one family (same headings font, same 2px blue
   rule) instead of competing title styles. */
.connect-overview .co-sec-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--infine-blue);
  margin-bottom: 22px;
}
.connect-overview .co-sec-title {
  font-family: var(--mantine-font-family-headings);
  font-weight: 700;
  font-size: 20px;
  color: var(--infine-blue);
}
/* Stretch so all columns share the tallest's height — that lets each column's
   footer link float to a common bottom row (margin-top:auto below) regardless of
   how many products its list holds. */
.connect-overview .co-att__cols { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; }
.connect-overview .co-att__group {
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  border-left: 1px solid var(--infine-blue-light-fade);
}
.connect-overview .co-att__group:first-child { padding-left: 0; border-left: none; }
.connect-overview .co-att__group:last-child { padding-right: 0; }
.connect-overview .co-att__group-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
}
.connect-overview .co-att__group-title {
  font-family: var(--mantine-font-family-headings);
  font-weight: 700;
  font-size: 15px;
  color: var(--infine-blue);
  white-space: nowrap;
}
.connect-overview .co-att__group-count { font-size: 12.5px; color: var(--infine-gray); }
.connect-overview .co-att__pip {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.connect-overview .co-att__pip--err { background: var(--infine-red-strong); }
.connect-overview .co-att__pip--almost { background: var(--infine-yellow-bright); }
.connect-overview .co-att__pip--recent { background: var(--infine-blue-light); }
/* Each column is a stack of the shared product-list rows (the single-form
   left list look). The rows bring their own chip / name / badge / meta + hover;
   here we just trim the trailing divider so the list ends cleanly. */
.connect-overview .co-att__list { display: flex; flex-direction: column; }
.connect-overview .co-att__list .connect-product-row:last-child { border-bottom: none; }
/* The shared row carries the single-form list's wider horizontal padding; trim
   it to 4px here. The 4px left inset centres the 4px chip under the 11px heading
   pip above it (chip centre ~6px ≈ pip centre ~5.5px), and the symmetric 4px
   gives the hover fill breathing room instead of cutting flush to the content. */
.connect-overview .co-att__list .connect-product-row { padding-left: 4px; padding-right: 4px; }
/* Graceful placeholder when a column has no rows (e.g. nothing flagged). */
.connect-overview .co-att__empty {
  padding: 14px 2px;
  font-size: 13px;
  color: var(--infine-gray);
}
/* margin-top:auto floats the link to the bottom of its (stretched) column so the
   three columns' links align on one footer row; padding-top keeps a minimum gap
   above (and is the only spacing in the ≤880px stacked layout, where the column
   is content-height and margin-top:auto collapses to 0). */
.connect-overview .co-att__seeall { margin-top: auto; padding-top: 12px; }
.connect-overview .co-att__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--infine-blue-bright);
  cursor: pointer;
  transition: color 0.18s ease;
}
/* Hover: deepen the blue and nudge the arrow right — mirrors the hero CTA arrow
   so the page's interactive elements read as one family. */
.connect-overview .co-att__link svg { transition: transform 0.18s ease; }
.connect-overview .co-att__link:hover { color: var(--infine-blue); }
.connect-overview .co-att__link:hover svg { transform: translateX(3px); }

/* ---- FAQ — headerless full-width teaser, directly above "Coming this autumn" ----
   Same white-card family as the boxes above, but no heading: just the four
   questions in the larger Raleway headings type, then a footer that REUSES the
   Tips box's knowledge-base footer element (.co-help__foot / .co-help__kb)
   verbatim. The 4-column row mirrors .co-coming__list right below it; thin
   column rules (the attention section's idiom) give the body-free questions
   structure. */
.connect-overview .co-faq {
  border-radius: 18px;
  /* No own padding: the question list carries the content inset so the reused
     .co-help__foot band can bleed full-width to the card edges; overflow:hidden
     clips that band to the rounded corners (exactly as .co-help does). */
  overflow: hidden;
}
.connect-overview .co-faq__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* No row gap: the 4 columns sit on one row; the gap is the inter-column gutter
     that the column rules divide. Generous top inset gives the questions room to
     breathe; 0 bottom so the reused footer's own margin-top sets the gap, as in
     the Tips box. */
  gap: 0;
  padding: 36px 26px 0;
}
/* Each question is a link: larger headings type, a touch lighter than a hard
   bold so the questions read as inviting prompts rather than shouting headers.
   display:block makes the whole (stretched) cell the click target; the page's
   blue→bright-blue hover shift is the link affordance, no underline. The column
   rule (and its inset padding) is dropped on the first column. No vertical
   padding — the list inset + the stretched cells handle the breathing room. */
.connect-overview .co-faq__q {
  display: block;
  padding: 0 22px;
  border-left: 1px solid var(--infine-blue-light-fade);
  font-family: var(--mantine-font-family-headings);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.34;
  letter-spacing: -0.01em;
  color: var(--infine-blue);
  text-decoration: none;
  text-wrap: balance;
  transition: color 0.18s ease;
}
.connect-overview .co-faq__q:hover { color: var(--infine-blue-bright); }
.connect-overview .co-faq__q:first-child { padding-left: 0; border-left: none; }
.connect-overview .co-faq__q:last-child { padding-right: 0; }
/* The footer itself is the shared .co-help__foot / .co-help__kb element (defined
   in the Tips-panel section above) — reused as-is, no FAQ-specific footer CSS. */

/* ---- "Coming this autumn" — full-width teaser ---- */
.connect-overview .co-band { margin-top: 30px; }

.connect-overview .co-coming {
  border-radius: 18px;
  padding: 22px 26px 24px;
}
/* Four features in one row across the full width (was a 2×2 grid in the old
   narrow box). */
.connect-overview .co-coming__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 40px;
}
.connect-overview .co-coming__item-title {
  font-family: var(--mantine-font-family-headings);
  font-weight: 600;
  font-size: 16px;
  color: var(--infine-blue);
  margin-bottom: 4px;
}
.connect-overview .co-coming__item-body {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--infine-gray);
}

/* ==========================================================================
   "Tips & how-tos" help panel.

   Same white/blue family as the cards above, but deliberately ONE STEP BOLDER
   so it reads as the page's guidance hub rather than another teaser card: a
   larger Raleway title behind a circular brand mark, a deeper elevation, and a
   segmented page indicator. Lives between the attention section and the band
   (single insertion point; the lifecycle state alone moves it).
   ========================================================================== */
.co-help {
  margin-top: 30px;
  border-radius: 20px;
  /* Shares the same surface (bg + border + --co-card-shadow) as the other light
     boxes via the grouped rule above: the pale-blue header now carries the box's
     presence, so the deeper "one step bolder" shadow read as too heavy next to
     the toned-down hero. */
  overflow: hidden;
}

/* ---- title row (always visible, incl. minimized) ---- */
.co-help__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 26px;
  /* Soft pale-blue band. Gives the header real presence (a clear, branded band,
     not plain white) without the full-navy weight that competed 1:1 with the
     hero — and it steps gently, not starkly, into the white tips area below. The
     gravitas comes from the bold navy title sitting on the tonal field. */
  background: var(--infine-blue-light-fade);
}
.co-help__brand { display: flex; align-items: center; gap: 13px; }
.co-help__mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--infine-blue-light-fade);
  flex: 0 0 auto;
}
.co-help__mark img { display: block; }
.co-help__title {
  font-family: var(--mantine-font-family-headings);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--infine-blue);
  margin: 0;
}
.co-help__head-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}
/* segmented page indicator — one button per page (jumps straight there;
   active = navy). The hit area is taller than the visible 6px bar. */
.co-help__dots { display: flex; align-items: center; gap: 7px; }
.co-help__dot {
  display: grid;
  place-items: center;
  width: 26px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.co-help__dot-bar {
  display: block;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  /* muted navy at rest on the pale-blue header, solid navy for the active page */
  background: color-mix(in srgb, var(--infine-blue) 30%, transparent);
  transition: background 0.2s ease;
}
.co-help__dot:hover .co-help__dot-bar { background: color-mix(in srgb, var(--infine-blue) 55%, transparent); }
.co-help__dot--on .co-help__dot-bar { background: var(--infine-blue); }
/* minimize / expand toggle */
.co-help__min-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: transparent;
  border: 1px solid var(--infine-blue-light);
  color: var(--infine-blue);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.co-help__min-btn:hover {
  background: #fff;
  border-color: var(--infine-blue);
}

/* ---- collapsible body ----
   No padding on the body itself, so the footer's top border can run the full
   card width; the stage carries the content inset instead. */
.co-help__body { padding: 0; }
.co-help__stage {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 44px 18px 0;
}
/* circular prev / next, sitting at the card edges */
.co-help__nav {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--infine-blue-bg);
  border: 1px solid var(--infine-blue-light-fade);
  color: var(--infine-blue);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}
.co-help__nav:hover {
  background: var(--infine-blue);
  border-color: var(--infine-blue);
  color: #fff;
}
/* viewport: all pages share one grid cell so the box keeps the height of the
   tallest page — switching pages cross-fades in place instead of resizing the
   box (the content below no longer jumps). visibility:hidden keeps the hidden
   pages in layout, so they still contribute to that max height. */
.co-help__viewport {
  flex: 1;
  display: grid;
}
.co-help__page {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.co-help__page--on {
  visibility: visible;
  opacity: 1;
}
/* the three tips per page. No column separators — the framed screenshots plus
   the gutter whitespace divide the columns clearly enough on their own. */
.co-help__tip {
  padding: 0 22px;
}
/* screenshot slot — real image or gray placeholder, same footprint AND same
   framed look (border + pale fill behind), so a real screenshot reads as a
   framed thumbnail rather than floating loose on the card. */
.co-help__shot {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  margin-bottom: 14px;
  object-fit: cover;
  background: var(--infine-blue-bg);
  border: 1px solid var(--infine-blue-light-fade);
}
/* Tip headline. Raleway (headings family) bold navy pairs against the body
   font below — the font/weight/size shift does most of the hierarchy work; a
   slight body softening (see below) finishes it. Sized above
   .co-att__group-title (15px) as the card's own heading, below the 20px section
   titles. */
.co-help__tip-title {
  margin: 0;
  font-family: var(--mantine-font-family-headings);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--infine-blue);
}
.co-help__tip-text {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.5;
  /* Slightly softened navy so the bold navy title above clearly leads the body.
     color-mix keeps it derived from the brand token, not a hard-coded value. */
  color: color-mix(in srgb, var(--infine-blue) 82%, white);
}

/* ---- real-screenshot treatment: alpha cutout, 3D tilt, lighting, sheen,
   reflection (static — no hover) ----
   Only the three tips with a real `:image` use this; the gray placeholder keeps
   the framed `.co-help__shot` look above. The screenshots are tightly-trimmed
   alpha PNGs, so there is no bordered rectangle — the UI fragment floats. Locked
   in the standalone demo (tips-effects-demo.html §17); values mirror it. */

/* Perspective for the tilt lives on the page (the grid of three tips), not the
   viewport: every page carries it, and the inactive pages stay
   visibility:hidden, so the crossfade is unaffected and nothing bleeds through. */
.co-help__page { perspective: 1600px; }

/* Layout slot: a fixed height centres each cutout regardless of its own height
   → aligned captions, even whitespace.
   The bottom margin must clear the reflection, which hangs ~one image-height
   below the cutout — and the cutout (width:86%) scales with the column, so a
   fixed px margin can't keep up (it overlaps the caption on wide screens). A
   percentage margin is resolved against the column width, so it tracks the
   reflection at every width and keeps a steady gap to the caption below. */
.co-help__slot {
  height: 128px;
  margin: 0 auto 28%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image wrapper hugs the image, so the sheen overlay + reflection align to the
   IMAGE box (not the slot). Carries the tilt and the grounding-shadow +
   brand-blue glow lighting. */
.co-help__ph {
  position: relative;
  /* Shrink-wrap to the (height-capped) image rather than a fixed 86% width, so
     the sheen mask (inset:0) and reflection (width:100%) stay aligned to the
     image at any size. max-width still bounds wide cutouts to 86% of the column;
     the height cap that does the actual work lives on .co-help__shot below. */
  width: auto;
  max-width: 86%;
  transform: rotateX(5deg) rotateY(-16deg);
  transform-origin: 62% 50%;
  filter: drop-shadow(-9px -6px 15px rgba(0, 51, 102, 0.22))
          drop-shadow(0 0 17px rgba(0, 107, 214, 0.32));
}

/* The screenshot inside .ph: strip the framed-thumbnail look (border / fill /
   fixed ratio) that the base .co-help__shot rule gives the placeholder — the
   cutout floats at its own natural ratio. */
.co-help__ph .co-help__shot {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  /* Cap the cutout's rendered height, preserving aspect (width follows). The
     tall fragments (the tooltip card ~100px, the dropdown ~114px) otherwise
     tower over the wide, short cutouts (~45–82px) and trail their reflections
     down toward the captions. 111px reins the tallest in while leaving
     everything already shorter untouched — tuned by eye. Single knob:
     raise/lower max-height. */
  max-height: 111px;
  aspect-ratio: auto;
  object-fit: fill;
  background: none;
  border: 0;
  border-radius: 0;
  margin: 0;
}

/* Specular sheen: a diagonal light streak masked to the cutout's own alpha (the
   mask url is set inline per image in `tip-card`; only the geometry + gradient
   live here). */
.co-help__sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-mode: alpha;
          mask-mode: alpha;
  background: linear-gradient(101deg,
              rgba(255, 255, 255, 0) 30%,
              rgba(255, 255, 255, 0.62) 47%,
              rgba(255, 255, 255, 0) 60%);
}

/* Faint flush reflection: a full mirror of the cutout at low flat opacity, with
   no fade mask (by design). top:100% on the tightly-trimmed cutout box keeps it
   flush — no gap. */
.co-help__reflect {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: auto;
  transform: scaleY(-1);
  opacity: 0.09;
  pointer-events: none;
}

/* ---- footer (knowledge-base link) ----
   Full-width top border (the body has no padding); equal vertical padding so the
   link sits centred between that border and the card's bottom edge. 26px left
   inset aligns it under the header title. */
.co-help__foot {
  margin-top: 22px;
  padding: 18px 26px;
  border-top: 1px solid var(--infine-blue-light-fade);
  background: var(--infine-blue-bg);
  /* flex (not a block line-box) so the link's own height defines the band and
     the symmetric padding reads as symmetric — a block line-box adds asymmetric
     leading that left the link looking bottom-heavy. */
  display: flex;
  align-items: center;
}
.co-help__kb {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mantine-font-family-headings);
  font-weight: 700;
  font-size: 14px;
  color: var(--infine-blue);
  text-decoration: none;
  transition: color 0.18s ease;
}
.co-help__kb svg { transition: transform 0.18s ease; }
.co-help__kb:hover { color: var(--infine-blue-bright); }
.co-help__kb:hover svg { transform: translateX(3px); }

/* ==========================================================================
   Compact variant — the SAME carousel scaled down for the top of the form
   marginalia column (products single + company data). One tip per page, the
   page dots moved below the stage, no knowledge-base footer, no brand logo, no
   drop shadow. It sits flush at the top of the column (which drops its padding-
   top) so its header band lines up with the form's progress bar. The field-
   specific marginalia entries are floored just beneath it by `align-marginalia!`
   (ui/field.cljs measures `.connect-marginalia-help`'s bottom). The white-card
   surface and the image tilt/sheen/reflection are inherited from the base rules
   above; only dimensions and type scale down. Placed right after the base rules
   so equal-specificity overrides win on source order. */
.co-help--compact {
  margin-top: 0;
  border-radius: 12px;
  /* No elevation here — the box is a quiet reference panel beside the form, not
     a raised card like the Overview hub. The border alone defines it. */
  box-shadow: none;
}

/* header — slimmer; no brand logo (omitted in render), smaller title. White
   (not the Overview's pale-blue band) with a hairline bottom border in the same
   colour as the box border, so it reads as a quiet titled row rather than a
   coloured band. The minimize button border matches the nav buttons. */
.co-help--compact .co-help__head {
  gap: 8px;
  padding: 6px 12px;
  background: #fff;
  border-bottom: 1px solid var(--infine-blue-light-fade);
}
.co-help--compact .co-help__title { font-size: 13px; }
.co-help--compact .co-help__head-right { gap: 6px; }
.co-help--compact .co-help__min-btn {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border-color: var(--infine-blue-light-fade);
}

/* stage — tighter; smaller circular nav buttons hugging the column edges, white
   like the box (not the Overview's pale-blue fill) */
.co-help--compact .co-help__stage { gap: 4px; padding: 10px 8px 0; }
.co-help--compact .co-help__nav { width: 26px; height: 26px; background: #fff; }
/* The base hover fills the button navy and turns the chevron white — invisible
   on the white compact button. Use a quiet hover instead (faint blue tint +
   blue border, chevron stays blue), matching the minimize button's hover. */
.co-help--compact .co-help__nav:hover {
  background: var(--infine-blue-bg);
  border-color: var(--infine-blue);
  color: var(--infine-blue);
}

/* The chevron glyphs render in a 24×24 viewBox; sizing the svg alone leaves
   them visually off-centre in the small round/rounded buttons. Force the icon
   box to fill the button and centre via flex so prev / next / minimize all sit
   dead-centre. */
.co-help--compact .co-help__nav,
.co-help--compact .co-help__min-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}
.co-help--compact .co-help__nav svg,
.co-help--compact .co-help__min-btn svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* one tip per page */
.co-help--compact .co-help__page { grid-template-columns: 1fr; }
.co-help--compact .co-help__tip { padding: 0 4px; }

/* image: same alpha-cutout tilt/sheen/reflection, scaled to read clearly in the
   column. `max-width: 100%` (overriding the base 86%) lets the cutout use the
   full tip width; the tall fragments are capped by `max-height`. The negative
   margins pull the cutout up into the slot and the caption up tight beneath it,
   tuned by eye to balance the image against the reflection without wasting
   vertical space. Scoped to compact so the Overview carousel keeps its 86% /
   128px sizing. */
.co-help--compact .co-help__slot { height: 106px; margin: 0 auto -7px; }
.co-help--compact .co-help__ph { max-width: 100%; }
.co-help--compact .co-help__ph .co-help__shot { max-height: 82px; margin-top: -20px; }

/* caption */
.co-help--compact .co-help__tip-title { font-size: 13px; margin-bottom: 2px; }
.co-help--compact .co-help__tip-text { font-size: 12px; line-height: 1.4; }

/* dot row below the stage (replaces the footer band). Holds up to 9 dots:
   small, centred, wrapping only if a future tip count overflows. Bars are a
   hair tall (2px) so the row stays quiet. */
.co-help--compact .co-help__dotrow {
  display: flex;
  justify-content: center;
  padding: 8px 8px;
}
.co-help--compact .co-help__dots { gap: 5px; flex-wrap: wrap; justify-content: center; }
.co-help--compact .co-help__dot { width: 16px; height: 14px; }
.co-help--compact .co-help__dot-bar { height: 2px; }

/* ---- donut cluster scales with the hero (stepped via @container) ----
   `zoom` scales the rendered ring geometry + its centred "%" label together and
   reserves layout space — see the .co-donuts note above for why fluid --rp-size
   can't be used. Stepped (not continuous) because zoom needs a unitless factor,
   which can't be derived from container units in pure CSS; the steps track the
   hero's continuously-scaling type closely enough. zoom is supported in all
   current evergreen browsers (Firefox ≥126). */
@container (min-width: 1300px) { .connect-overview .co-donuts { zoom: 1.12; } }
@container (min-width: 1700px) { .connect-overview .co-donuts { zoom: 1.3; } }
@container (min-width: 2100px) { .connect-overview .co-donuts { zoom: 1.5; } }

/* ---- responsive (hero) ---- */
@media (max-width: 1080px) {
  /* stack the lede over the donuts (the top row is now flex, not grid) */
  .connect-overview .co-hero__top { flex-direction: column; align-items: flex-start; gap: 34px; }
  .connect-overview .co-donuts {
    padding-left: 0;
    border-left: none;
    justify-content: flex-start;
  }
  .connect-overview .co-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .connect-overview .co-hero { padding-block: 28px 24px; }
  .connect-overview .co-hero__inner { padding-inline: 22px; }
  .connect-overview .co-cards { grid-template-columns: 1fr; margin: 24px -22px -24px; padding: 22px; }
  .connect-overview .co-donuts { flex-direction: column; align-items: flex-start; }
}

/* ---- responsive (attention + band) ---- */
@media (max-width: 1080px) {
  .connect-overview .co-coming__list { grid-template-columns: 1fr 1fr; }
  /* FAQ: below the full 4-up width the column rules can't stay clean across a
     wrap, so drop them and fall back to a gapped 2-col grid — exactly like the
     coming band right below it. */
  .connect-overview .co-faq__list { grid-template-columns: 1fr 1fr; gap: 22px 40px; }
  .connect-overview .co-faq__q,
  .connect-overview .co-faq__q:first-child,
  .connect-overview .co-faq__q:last-child { padding: 0; border-left: none; }
}
@media (max-width: 880px) {
  .connect-overview .co-coming__list { grid-template-columns: 1fr; }
  .connect-overview .co-faq__list { grid-template-columns: 1fr; }
  .connect-overview .co-faq__q { font-size: 20px; }
  /* Stacks to one column below 880px. No !important needed: the base 3-col rule
     now lives in CSS (not an inline style), so this later same-specificity rule
     wins on source order. */
  .connect-overview .co-att__cols { grid-template-columns: 1fr; }
  .connect-overview .co-att__group {
    padding: 18px 0 0;
    border-left: none;
    border-top: 1px solid var(--infine-blue-light-fade);
    margin-top: 18px;
  }
  .connect-overview .co-att__group:first-child { padding-top: 0; border-top: none; margin-top: 0; }
  /* Help panel: stack the three tips, drop the inter-column rules. */
  .co-help__page { grid-template-columns: 1fr; gap: 22px; }
  .co-help__tip { padding: 0 8px; }
  .co-help__shot { aspect-ratio: 16 / 7; }
  .co-help__title { font-size: 22px; }
}
}