/**
 * Wellness hub — the landing page above the individual wellness services.
 * -----------------------------------------------------------------------------
 * This file is DELIBERATELY small. The component renders inside `.ssm-svc`, so
 * the hero, facts strip, section rhythm, type scale, buttons, steps, FAQ, CTA
 * band, location cards, disclaimer and sticky bar all come from
 * components/service-menu/service-menu.css unchanged — the hub and the service
 * pages it links to cannot drift apart, and there is one place to change a
 * token rather than two.
 *
 * Only what the hub genuinely adds lives here: the split blocks, the goal
 * finder, the service card grid and the quote. All of it uses the plum
 * variables declared on `.ssm-svc`, so nothing is redefined.
 *
 * Enqueued after service-menu.css (declared as a dependency), which is what
 * lets the few overrides at the bottom of each block win without !important.
 */

/* ---- split blocks (intro, why us) ---- */

.ssm-whub__split {
  display: grid;
  /* minmax(0,…) on both tracks: the lede's 56ch measure sets a min-content
     floor that otherwise blows the column past the viewport. Same trap as the
     service-menu hero, the shop toolbar and the PDP mobile column. */
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* Copy sits left of the image by default and right of it in the "why us"
   block, so the two split sections don't read as the same slab twice. */
.ssm-whub__split--media-first .ssm-whub__split-copy { order: 2; }
.ssm-whub__split--media-first .ssm-whub__split-media { order: 1; }

.ssm-whub__split-copy { min-width: 0; }

/* 4:3, not a square or a portrait crop. Every photograph in this library is a
   3:2 landscape from one shoot, and anything squarer throws away the ends of
   the frame — a 1:1 crop of the team photo cut two people out of it, and a 4:5
   crop of the consultation left the back of a client's head as the subject.
   4:3 keeps ~89% of the original width, so these compositions survive. */
.ssm-whub__split-media {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, var(--svc-blush), var(--svc-plum-mid) 130%);
}

.ssm-whub__split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- inline text link ---- */
/* Not a button: these are "read more about this" links inside prose, and a
   third pill would compete with the two real calls to action in the hero. */
.ssm-whub__textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.8rem;
  font-family: var(--svc-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--svc-plum-mid);
  text-decoration: none;
  border-bottom: 1px solid var(--svc-rule);
  padding-bottom: 0.35rem;
  transition: border-color .18s ease, color .18s ease;
}

.ssm-whub__textlink:hover,
.ssm-whub__textlink:focus-visible {
  color: var(--svc-plum-falloff);
  border-bottom-color: var(--svc-plum-mid);
}

/* ---- section head, centred variant ---- */
/* The goal finder is the one place the page addresses the reader directly, so
   its head is centred; every other section stays left-aligned. */
.ssm-whub__head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.ssm-whub__head--center .ssm-svc__lede p {
  margin-left: auto;
  margin-right: auto;
}

/* ---- goal finder ---- */

.ssm-whub__goals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
}

.ssm-whub__goal {
  display: block;
  background: #fff;
  border: 1px solid var(--svc-rule);
  border-radius: 20px;
  padding: 2rem 1.8rem;
  color: inherit;
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}

a.ssm-whub__goal:hover,
a.ssm-whub__goal:focus-visible {
  border-color: var(--svc-mauve);
  color: inherit;
  transform: translateY(-2px);
}

a.ssm-whub__goal:focus-visible {
  outline: 3px solid var(--svc-mauve);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .ssm-whub__goal { transition: border-color .18s ease; }
  a.ssm-whub__goal:hover,
  a.ssm-whub__goal:focus-visible { transform: none; }
}

.ssm-whub__goal-ico {
  width: 34px;
  height: 34px;
  display: block;
  color: var(--svc-plum-mid);
  margin-bottom: 1.4rem;
}

.ssm-whub__goal h3 { margin-bottom: 0.7rem; }

.ssm-whub__goal p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--svc-plum-deep);
}

/* Tags name the treatments behind a goal. Same visual weight as the drip
   ingredient tags on the service pages — they're doing the same job. */
.ssm-whub__tags {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--svc-rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.ssm-whub__tags li {
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: var(--svc-plum-deep);
  background: var(--svc-rose);
  padding: 0.3rem 0.6rem;
  border-radius: 3px;
  margin: 0;
}

.ssm-whub__tags li::before { content: none; }

/* ---- service cards ---- */

.ssm-whub__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
  /* The number on each card is a counter, not a stored field: the order is the
     repeater's order, and a typed "03" goes stale the moment one is moved. */
  counter-reset: whub-card;
}

.ssm-whub__card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--svc-rule);
  border-radius: 20px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  counter-increment: whub-card;
  transition: border-color .18s ease;
}

a.ssm-whub__card:hover,
a.ssm-whub__card:focus-visible { border-color: var(--svc-mauve); color: inherit; }

a.ssm-whub__card:focus-visible {
  outline: 3px solid var(--svc-mauve);
  outline-offset: 3px;
}

.ssm-whub__card-media {
  position: relative;
  aspect-ratio: 3 / 2;
  background: linear-gradient(160deg, var(--svc-blush), var(--svc-plum-mid) 140%);
  overflow: hidden;
}

.ssm-whub__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sits on the image rather than above the heading so the eye reads photo →
   number → name, and so a card with no photo still shows its position. */
.ssm-whub__card-media::after {
  content: counter(whub-card, decimal-leading-zero);
  position: absolute;
  left: 1.2rem;
  top: 1rem;
  font-family: var(--svc-display);
  font-size: 1.5rem;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 12px rgba(53, 28, 45, .55);
}

/* Until the client supplies photography for the five services, NO card in the
   grid has an image — and five 3:2 gradient tiles is a lot of empty. When the
   grid contains no image at all the media block becomes a numbered band
   instead; the moment one real photo lands, every card returns to 3:2, so a row
   never mixes two media heights. Browsers without `:has()` simply keep 3:2. */
.ssm-whub__cards:not(:has(img)) .ssm-whub__card-media { aspect-ratio: 5 / 2; }
.ssm-whub__cards:not(:has(img)) .ssm-whub__card-media::after { font-size: 2.1rem; }

.ssm-whub__card-body {
  padding: 1.7rem 1.6rem 1.9rem;
  display: flex;
  flex-direction: column;
  /* Flex child with no basis defaults to min-content, which the longest word in
     an uppercase tracked heading can push past the card. */
  min-width: 0;
  flex: 1 1 auto;
}

.ssm-whub__card-meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.9rem;
  padding: 0;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--svc-mauve);
  font-weight: 600;
}

.ssm-whub__card-meta li { margin: 0; }
.ssm-whub__card-meta li::before { content: none; }

/* Separator is a middot carried by the item itself, NOT a border-left on the
   next one: when two facts wrap to a second line, a border-left leaves a rule
   dangling in the margin at the start of that line. A middot that ends a line
   is ordinary typography; a floating vertical rule reads as a bug. */
.ssm-whub__card-meta li:not(:last-child)::after {
  content: "·";
  margin-left: 0.5rem;
  color: var(--svc-rule);
}

.ssm-whub__card h3 { margin-bottom: 0.7rem; overflow-wrap: anywhere; }

.ssm-whub__card p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--svc-plum-deep);
}

/* Pushed to the foot of the card so the link sits on one line across the row
   however uneven the descriptions are. */
.ssm-whub__card-more {
  margin-top: auto;
  padding-top: 1.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--svc-plum-mid);
}

/* The closing "not sure?" cell. Dark so it reads as a different kind of thing
   from the five services beside it, not a sixth service. */
.ssm-whub__card--invite {
  background: var(--svc-plum-falloff);
  border-color: var(--svc-plum-falloff);
  justify-content: center;
}

.ssm-whub__card--invite .ssm-whub__card-body { padding: 2.4rem 1.8rem; }
.ssm-whub__card--invite h3 { color: #fff; }
.ssm-whub__card--invite p { color: var(--svc-blush); }
.ssm-whub__card--invite .ssm-svc__btn { align-self: flex-start; margin-top: 1.6rem; }

/* ---- why-us points ---- */

.ssm-whub__points {
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 0;
}

.ssm-whub__points li {
  position: relative;
  margin: 0;
  padding: 1rem 0 1rem 1.9rem;
  border-bottom: 1px solid var(--svc-rule);
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--svc-plum-deep);
}

.ssm-whub__points li:last-child { border-bottom: 0; }

.ssm-whub__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.7rem;
  width: 1rem;
  height: 1px;
  background: var(--svc-plum-mid);
}

.ssm-whub__points strong { color: var(--svc-plum-falloff); font-weight: 600; }

/* ---- process steps ---- */
/* service-menu.css sets three columns, which is right for a three-step visit.
   The hub's process is four, and four in a three-track grid leaves one card
   alone on a second row. Guarded on the count so a future third or fifth step
   falls back to the shared rule rather than to a broken row — and wrapped in a
   min-width query, because this selector outranks the shared stacking rules
   and would otherwise hold four columns at 390px. */
@media (min-width: 981px) {
  .ssm-whub__steps:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---- group band ---- */

/* The shared band is a two-column grid built around an image. With no photo
   supplied the second track is empty, which reads as a half-finished panel
   rather than as a deliberate one, so the copy takes the full width and keeps
   its own measure. Scoped to the hub — the service pages fill both columns. */
.ssm-whub .ssm-svc__group:not(:has(.ssm-whub__group-media)) {
  grid-template-columns: minmax(0, 1fr);
}

/* The band's intro is a bare <p class="ssm-svc__lede">, not a wrapper, so the
   measure has to be set on the element itself. */
.ssm-whub .ssm-svc__group:not(:has(.ssm-whub__group-media)) .ssm-svc__lede {
  max-width: 68ch;
}

/* ---- group band image ---- */

.ssm-whub__group-media {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--svc-rose);
  border: 1px solid var(--svc-rule);
}

.ssm-whub__group-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- quote ---- */

.ssm-whub__quote {
  margin: 0;
  background: #fff;
  border: 1px solid var(--svc-rule);
  border-radius: 24px;
  padding: clamp(2.2rem, 5vw, 3.5rem);
  text-align: center;
  max-width: 820px;
  margin-inline: auto;
}

.ssm-whub__quote blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--svc-display);
  /* The template's `.quote blockquote`, verbatim — including the italic, which
     is what the Lora request's italic faces are for. Nothing else on these
     pages sets italic display type. */
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  line-height: 1.38;
  font-style: italic;
  color: var(--svc-plum-falloff);
}

.ssm-whub__quote figcaption {
  margin-top: 1.6rem;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--svc-mauve);
  font-weight: 600;
}

/* ---- responsive ---- */

/* Six goals and six cards both divide by three and by two, so the middle step
   is two-up rather than jumping straight to a single column. */
@media (max-width: 980px) {
  .ssm-whub__goals,
  .ssm-whub__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 840px) {
  .ssm-whub__split { grid-template-columns: minmax(0, 1fr); }
  /* Image first once stacked, in BOTH variants: the photo is the faster signal
     of what a section is about, and the ordering that alternates them
     side-by-side stops meaning anything in one column. */
  .ssm-whub__split-copy,
  .ssm-whub__split--media-first .ssm-whub__split-copy { order: 2; }
  .ssm-whub__split-media,
  .ssm-whub__split--media-first .ssm-whub__split-media { order: 1; }
  .ssm-whub__split-media,
  .ssm-whub__split-media--tall { aspect-ratio: 16 / 10; }

  .ssm-whub__head--center { text-align: left; }
  .ssm-whub__head--center .ssm-svc__lede p { margin-left: 0; margin-right: 0; }
}

@media (max-width: 640px) {
  .ssm-whub__goals,
  .ssm-whub__cards { grid-template-columns: minmax(0, 1fr); }
  .ssm-whub__goal { padding: 1.6rem 1.4rem; }

  /* One column means the empty band repeats five times down the scroll rather
     than twice across a row, so it tightens further while there are no photos. */
  .ssm-whub__cards:not(:has(img)) .ssm-whub__card-media { aspect-ratio: 8 / 2; }
}

/* =============================================================================
   Wellness-hub artifact mode (2026-09-09). Opt-in per field so /concerns/, which
   shares this component, keeps the v5 split hero. Structure, tones and rhythm
   are the artifact's; the palette is the client's v5-print plum tokens standing
   in for its wine/charcoal, and the type stays Lora + Poppins per the 09-01
   directive.
   ========================================================================== */

/* ---- full-bleed dark hero ---- */
.ssm-whub__hero--full {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 76vh, 760px);
  background: var(--svc-plum-falloff);
  overflow: hidden;
  /* the shared hero pays the fixed header + follow-banner offset in padding;
     here the photo has to run under them, so the offset moves into min-height */
  padding-top: 0;
}
.ssm-whub__hero-bg { position: absolute; inset: 0; }
.ssm-whub__hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.ssm-whub__hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(53, 28, 45, .92) 0%, rgba(77, 44, 65, .72) 46%, rgba(111, 61, 88, .34) 100%);
}
.ssm-whub__hero--full .ssm-svc__wrap { position: relative; z-index: 2; width: 100%; padding-top: calc(88px + var(--svc-banner-h, 0px)); padding-bottom: 88px; }
.ssm-whub__hero--full .ssm-svc__hero-copy { max-width: 62ch; }
.ssm-whub__hero--full .ssm-svc__title { color: #fff; max-width: 17ch; }
.ssm-whub__hero--full .ssm-svc__lede,
.ssm-whub__hero--full .ssm-svc__lede p { color: #EFDCE3; max-width: 56ch; }
.ssm-whub__hero--full .ssm-svc__hero-ctas { margin-top: 2.4rem; }
.ssm-whub__badges {
  list-style: none;
  margin: 46px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
}
.ssm-whub__badges li {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-family: var(--svc-data);
  font-size: .76rem;
  letter-spacing: .08em;
  color: #CFC3C1; font-weight: 700;}
.ssm-whub__badges li::before { content: "✓"; color: var(--svc-blush); font-size: .8rem; }
.ssm-whub__badges strong { color: #fff; font-weight: 500; }

/* ---- big-number trust strip (the artifact's .trust) ---- */
.ssm-whub__trust { background: var(--svc-blush); }
.ssm-whub__trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(77, 44, 65, .16);
  margin: 0;
}
.ssm-whub__trust-cell { background: var(--svc-blush); padding: 34px 24px; text-align: center; }
.ssm-whub__trust-n {
  display: block;
  margin: 0;
  font-family: var(--svc-display);
  font-weight: 400;
  font-size: 2.3rem;
  line-height: 1;
  color: var(--svc-plum-deep);
}
.ssm-whub__trust-l {
  display: block;
  margin-top: 10px;
  font-family: var(--svc-data);
  font-size: .71rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--svc-ink);
}

/* ---- dark process band (artifact .sec-dark .steps) ---- */
.ssm-whub__steps-band { background: var(--svc-plum-falloff); color: #CFC7C4; }
.ssm-whub__steps-band .ssm-svc__h2 { color: #fff; }
.ssm-whub__steps-band .ssm-svc__lede { color: #EFDCE3; }
.ssm-whub__steps-band .ssm-svc__steps {
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.ssm-whub__steps-band .ssm-svc__step {
  border-top: 0;
  border-right: 1px solid rgba(255, 255, 255, .14);
  padding: 34px 32px;
}
.ssm-whub__steps-band .ssm-svc__step:first-child { padding-left: 0; }
.ssm-whub__steps-band .ssm-svc__step:last-child { border-right: 0; padding-right: 0; }
.ssm-whub__steps-band .ssm-svc__step::before {
  font-family: var(--svc-display);
  font-size: 2.6rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--svc-blush);
  opacity: .5;
  margin-bottom: 14px;
}
.ssm-whub__steps-band .ssm-svc__step h3 { color: #fff; }
.ssm-whub__steps-band .ssm-svc__step p { color: #B9AFAC; }

/* ---- wine group band (artifact .sec-wine) ---- */
.ssm-whub__group-band { background: var(--svc-plum-mid); color: #EDDDE1; }
.ssm-whub__group-band .ssm-svc__group { padding: clamp(1rem, 2vw, 2rem) 0; }
.ssm-whub__group-band .ssm-svc__h2 { color: #fff; }
.ssm-whub__group-band .ssm-svc__lede { color: #EFDCE3; }
.ssm-whub__group-band .ssm-whub__group-media { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .2); }

/* ---- FAQ +/– markers (artifact) ---- */
.ssm-whub--artifact .ssm-svc__faq summary::after {
  content: "+";
  border: 0;
  transform: none;
  width: auto; height: auto;
  top: 50%;
  translate: 0 -50%;
  font-family: var(--svc-body);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  color: var(--svc-plum-mid);
}
.ssm-whub--artifact .ssm-svc__faq details[open] summary::after { content: "–"; transform: none; top: 50%; }

/* ---- full-bleed dark closing band (artifact .ctaband) ---- */
.ssm-whub__ctaband { background: var(--svc-plum-falloff); padding-bottom: clamp(48px, 6vw, 88px); }
.ssm-whub__ctaband .ssm-svc__cta { background: transparent; border-radius: 0; padding: clamp(1.5rem, 3vw, 2.5rem) 0 0; }
.ssm-whub__cta-eyebrow { justify-content: center; margin-bottom: 1.2rem; }
.ssm-whub__cta-eyebrow::before { display: none; }
.ssm-whub__ctaband .ssm-svc__btn--light:last-child { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .55); }
.ssm-whub__ctaband .ssm-svc__btn--light:last-child:hover { background: #fff; color: var(--svc-plum-falloff); }
.ssm-whub__ctaband .ssm-svc__locs { max-width: 760px; margin-left: auto; margin-right: auto; }

@media (max-width: 980px) {
  .ssm-whub__steps-band .ssm-svc__step { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .14); padding: 28px 0; }
  .ssm-whub__steps-band .ssm-svc__step:nth-child(odd) { padding-right: 26px; border-right: 1px solid rgba(255, 255, 255, .14); }
  .ssm-whub__steps-band .ssm-svc__step:nth-child(even) { padding-left: 26px; }
  .ssm-whub__trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 840px) {
  .ssm-whub__hero--full { min-height: auto; }
  .ssm-whub__hero--full .ssm-svc__wrap { padding-top: calc(64px + var(--svc-banner-h, 0px)); padding-bottom: 64px; }
  .ssm-whub__steps-band .ssm-svc__step,
  .ssm-whub__steps-band .ssm-svc__step:nth-child(odd),
  .ssm-whub__steps-band .ssm-svc__step:nth-child(even) { border-right: 0; padding-left: 0; padding-right: 0; }
}


/* =============================================================================
   v5 hub template shape (client HTML, 2026-09-10). Opt-in per field, so the
   artifact mode above and /concerns/ are untouched.
   ========================================================================== */

/* hero photo tag needs a positioned parent (service-menu sets the tag absolute) */
.ssm-whub .ssm-svc__hero-media { position: relative; }

/* ---- WHY block with no photo: one column, template measure ---- */
.ssm-whub__split:not(:has(.ssm-whub__split-media)) { grid-template-columns: minmax(0, 1fr); }
.ssm-whub__split:not(:has(.ssm-whub__split-media)) .ssm-svc__lede p { max-width: 58ch; }

/* ---- goal chips that link (template .goal__chips a) ---- */
.ssm-whub__tags li.ssm-whub__tag--link { padding: 0; background: transparent; }
.ssm-whub__tags li.ssm-whub__tag--link a {
  display: inline-block;
  font-family: var(--svc-data);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--svc-plum-deep);
  border: 1px solid var(--svc-rule);
  border-radius: 999px;
  padding: 6px 12px;
  background: var(--svc-paper, #FBF9F9);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.ssm-whub__tags li.ssm-whub__tag--link a:hover,
.ssm-whub__tags li.ssm-whub__tag--link a:focus-visible { background: var(--svc-plum-deep); border-color: var(--svc-plum-deep); color: #fff; }
.ssm-whub__goal:has(.ssm-whub__tag--link) .ssm-whub__tags { border-top: 0; padding-top: 0; margin-top: 1rem; gap: 7px; }

/* ---- numbered service rows (template .svcs / .svc) ---- */
.ssm-whub__svcs {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
  counter-reset: whub-svc;
}
.ssm-whub__svc {
  display: grid;
  grid-template-columns: 88px minmax(0, 1.1fr) minmax(0, 1.6fr) auto;
  gap: clamp(16px, 2.5vw, 36px);
  align-items: center;
  background: #fff;
  border: 1px solid var(--svc-rule);
  border-radius: 3px;
  padding: clamp(20px, 2.5vw, 30px);
  text-decoration: none;
  color: inherit;
  counter-increment: whub-svc;
  transition: border-color .18s ease, transform .18s ease;
}
a.ssm-whub__svc:hover,
a.ssm-whub__svc:focus-visible { border-color: var(--svc-plum-mid); color: inherit; transform: translateY(-2px); }
a.ssm-whub__svc:focus-visible { outline: 3px solid var(--svc-mauve); outline-offset: 3px; }
.ssm-whub__svc::before {
  content: counter(whub-svc, decimal-leading-zero);
  font-family: var(--svc-display);
  font-size: 2.1rem;
  color: var(--svc-blush);
  line-height: 1;
}
.ssm-whub__svc-lead { min-width: 0; }
.ssm-whub__svc-lead h3 { margin: 0; overflow-wrap: anywhere; }
.ssm-whub__svc-badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 10px;
  padding: 0;
}
.ssm-whub__svc-badges li {
  margin: 0;
  font-family: var(--svc-data);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--svc-mauve);
  border: 1px solid var(--svc-rule);
  border-radius: 999px;
  padding: 4px 10px;
  background: var(--svc-paper, #FBF9F9);
}
.ssm-whub__svc-badges li::before { content: none; }
.ssm-whub__svc > p { margin: 0; font-size: 0.94rem; color: var(--svc-ink-soft, #635660); }
.ssm-whub__svc-go {
  font-family: var(--svc-data);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--svc-plum-mid);
  white-space: nowrap;
}
.ssm-whub__svc--invite { background: var(--svc-plum-falloff); border-color: var(--svc-plum-falloff); }
.ssm-whub__svc--invite::before { content: none; }
.ssm-whub__svc--invite h3 { color: #fff; }
.ssm-whub__svc--invite > p { color: var(--svc-blush); }
@media (max-width: 900px) {
  .ssm-whub__svc { grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .ssm-whub__svc::before { grid-row: 1 / 4; font-size: 1.6rem; }
  .ssm-whub__svc-go { justify-self: start; }
}

/* ---- stages (template .stages / .stage): top rule, kicker, no counter ---- */
.ssm-whub__steps--stages { gap: clamp(20px, 3vw, 44px); }
.ssm-whub__steps--stages .ssm-svc__step { border-top: 2px solid var(--svc-plum-deep); padding-top: 20px; }
.ssm-whub__steps--stages .ssm-svc__step::before { content: none; }
.ssm-whub__stage-k {
  display: block;
  font-family: var(--svc-data);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--svc-mauve);
  margin-bottom: 12px;
  line-height: 1;
}
.ssm-whub__steps--stages .ssm-svc__step h3 { margin-bottom: 10px; }
.ssm-whub__steps--stages .ssm-svc__step p { font-size: 0.96rem; }

/* ---- dark difference panel (template .diff) ---- */
.ssm-whub__diff {
  background: var(--svc-plum-falloff);
  border-radius: 3px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
}
.ssm-whub__diff-brand {
  padding: clamp(28px, 3.5vw, 48px);
  background: linear-gradient(160deg, var(--svc-plum-deep), var(--svc-plum-falloff));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}
.ssm-whub__seal { width: 56px; height: 56px; display: block; }
.ssm-whub__diff-brand .ssm-svc__h2 { color: var(--svc-rose); }
.ssm-whub__diff-brand p { color: var(--svc-blush); font-size: 0.97rem; margin: 14px 0 0; line-height: 1.6; }
.ssm-whub__diff-list {
  margin: 0;
  padding: clamp(24px, 3vw, 40px) clamp(28px, 3.5vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ssm-whub__diff-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(220, 207, 210, .18);
}
.ssm-whub__diff-row:last-child { border-bottom: 0; }
.ssm-whub__diff-row dt {
  font-family: var(--svc-data);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--svc-blush);
  padding-top: 3px;
}
.ssm-whub__diff-row dd { margin: 0; font-size: 0.97rem; color: var(--svc-rose); line-height: 1.55; }
@media (max-width: 900px) {
  .ssm-whub__diff { grid-template-columns: minmax(0, 1fr); }
  .ssm-whub__diff-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* ---- group points (template .group ul) ---- */
.ssm-whub__group-points { list-style: none; margin: 22px 0 0; padding: 0; max-width: 60ch; }
.ssm-whub__group-points li {
  margin: 0;
  padding: 11px 0;
  border-bottom: 1px solid var(--svc-rule);
  font-size: 0.98rem;
  color: var(--svc-plum-deep);
  line-height: 1.6;
}
.ssm-whub__group-points li::before { content: none; }
.ssm-whub__group-points li:last-child { border-bottom: 0; }
.ssm-whub__group-points li b { font-family: var(--svc-display); font-weight: 400; color: var(--svc-plum-falloff); } /* display system is Lora 400 */
.ssm-whub__group-points + .ssm-svc__btn { margin-top: 30px; }

/* ---- closing band extras: meta line + seal motif ---- */
.ssm-whub__ctaband { position: relative; overflow: hidden; }
.ssm-whub__ctaband .ssm-svc__wrap { position: relative; z-index: 1; }
.ssm-whub__cta-motif {
  position: absolute;
  right: -170px;
  top: 50%;
  transform: translateY(-50%);
  width: 540px;
  opacity: .4;
  pointer-events: none;
  z-index: 0;
}
.ssm-whub__cta-meta {
  font-family: var(--svc-data);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--svc-blush);
  margin-top: 34px;
  line-height: 2;
}
.ssm-whub__cta-meta a { font-weight: 700; }

/* ---- paper ground + real rose bands (template: paper #FBF9F9, .sec--rose #F5EFEF with
   rules and its own padding). Only the v5 hub shape (numbered service rows) opts in, so
   /concerns/ and the artifact mode keep the shared rose ground. ---- */
.ssm-whub--paper { background: #FBF9F9; }
.ssm-whub--paper .ssm-svc__section--rose {
  background: var(--svc-rose);
  border-top: 1px solid var(--svc-rule);
  border-bottom: 1px solid var(--svc-rule);
  padding-block: clamp(48px, 6vw, 88px);
}
/* a rose band's neighbours keep their own breathing room (the shared --tight zeroes padding-top) */
.ssm-whub--paper .ssm-svc__section--rose + .ssm-svc__section--tight { padding-top: clamp(48px, 6vw, 88px); }
.ssm-whub--paper .ssm-svc__section--rose + .ssm-svc__section--rose { border-top: 0; }