/* ═══════════ Inner pages — the homepage's visual language ═══════════
   The homepage is the client-approved reference, so inner pages reuse its exact components
   (values measured from the live homepage), rather than a look of their own:
     • buttons      — untouched: inner pages use the same design-system .btn classes as home
     • sections     — full-bleed; tinted ones use the homepage tint (#F7F5F2), like .section--tint
     • cards        — like the homepage hero cards: white, 1px --line border, 5px radius, the same soft drop shadow
     • numbers      — like the homepage stats: plain figure + label on a top rule, no coloured boxes
   Loaded last on inner pages (after inner-light.css). Hooks come from inner-compact.js:
   .im-band on tinted sections, .im-cards/.im-card on card groups, .im-stats on number groups. */

.inner{
  --home-tint: var(--bg-tint, #F7F5F2);
  --home-line: var(--line, #E9E5DF);
  --home-radius: var(--radius-img, 5px);
  --home-card-shadow: 0 30px 60px -30px rgba(20, 18, 16, .22), 0 2px 6px rgba(20, 18, 16, .04);
}

/* ── Tinted sections: the homepage tint, full width ── */
.inner main > section.im-band[data-tone]:not(.section--dark):not(.pm-diff):not(.pm-cta):not([data-dark]){ background-color: var(--home-tint) !important; }

/* ── Dark sections on inner pages: stay dark with crisp white typography ── */
.inner main > section.section--dark,
.inner main > section.pm-diff,
.inner main > section.pm-cta,
.inner main > section[data-dark]{
  background-color: var(--bg-dark) !important;
  color: var(--text-on-dark-2);
}

/* ── Card groups: homepage card ── */
.inner .im-cards.im-cards{
  gap: 16px !important;
  background: none !important;
  border: 0 !important;
}
.inner .im-cards .im-card.im-card{
  background: #fff !important;
  border: 1px solid var(--home-line) !important;
  border-radius: var(--home-radius) !important;
  box-shadow: var(--home-card-shadow) !important;
  padding: clamp(24px, 3vw, 32px) !important;
}

/* ── Number groups: homepage stats — figure + label on a top rule ── */
.inner .im-stats .im-card.im-card{
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--home-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 24px 0 0 !important;
}

/* ── Sliding galleries (phones; card groups on desktop too): the same homepage cards ── */
.im-sl.is-sliding .im-sl-stage{ padding-top: 8px; padding-bottom: 34px; } /* room for the card shadow */
.im-sl.is-sliding .im-cards .im-card.im-card,
.im-sl.is-sliding .im-step-card.im-step-card{
  flex: 0 0 min(560px, 42vw); /* ~2 cards in view, the next one peeking: a real sideways run */
  margin-right: 20px;
  border-right-width: 1px !important;
  padding: clamp(26px, 2.6vw, 34px) !important;
}
.cmp-on .im-sl.is-sliding .im-cards .im-card.im-card,
.cmp-on .im-sl.is-sliding .im-step-card.im-step-card{
  flex: 0 0 82%;
  margin-right: 14px;
  padding: 26px 24px !important;
}
.im-sl.is-sliding .im-cards .im-card.im-card:last-child,
.im-sl.is-sliding .im-step-card.im-step-card:last-child{ margin-right: 0; }
.cmp-on .im-sl.is-sliding .im-stats .im-card.im-card{
  flex-basis: 64%;
  padding: 22px 20px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--home-line) !important; /* homepage stats: a rule on top, not between */
}
.cmp-on .im-sl.is-list .im-cards .im-card.im-card{ margin-bottom: 14px; }
/* process steps in a phone gallery: homepage card too */
.cmp-on .im-sl .im-step-card.im-step-card{
  background: #fff !important;
  border: 1px solid var(--home-line) !important;
  border-radius: var(--home-radius) !important;
  box-shadow: var(--home-card-shadow) !important;
}

/* ── Text links: the homepage .text-link (13px, medium, ink, underline that maroons on hover) ── */
.inner main .arrow-link{
  font-size: var(--fs-button);
  font-weight: var(--fw-medium);
  letter-spacing: var(--btn-ls);
  color: var(--text-primary);
  gap: 10px;
}
.inner main .arrow-link:hover{ color: var(--color-secondary); gap: 14px; }

/* ── Running strip under the hero: the homepage marquee, as-is (home.css isn't loaded here) ── */
.inner .marquee{
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 22px 0;
}
.inner .marquee__track{ display: flex; width: max-content; animation: im-marquee 40s linear infinite; }
.inner .marquee:hover .marquee__track{ animation-play-state: paused; }
.inner .marquee__group{ display: flex; list-style: none; margin: 0; padding: 0; }
.inner .marquee__group li{
  display: flex;
  align-items: center;
  font-family: var(--serif);
  font-size: 22px;
  font-style: italic;
  color: var(--muted);
  white-space: nowrap;
  font-weight: var(--w-serif);
}
.inner .marquee__group li::after{
  content: '';
  width: 5px; height: 5px;
  margin: 0 40px;
  border-radius: 50%;
  background: var(--crimson);
  opacity: .6;
}
@keyframes im-marquee{ to { transform: translateX(-50%); } }
@media (max-width: 760px){
  .inner .marquee__group li{ font-size: 18px; }
  .inner .marquee__group li::after{ margin: 0 26px; }
}