/**
 * Signed-out homepage v2 (wireframe spec).
 *
 * Loaded only on the front page for signed-out visitors when the
 * signedout_home_v2 flag is on — enqueued in Presentation\Assets with
 * a filemtime version, deliberately outside the production bundle
 * (same treatment as components-unbundled.css) so it can never go
 * stale behind the bundle guard.
 *
 * Breakpoints follow the specification (§4):
 *   1440+      full three-zone hero, 4-card journey row, 2-col discovery
 *   1024-1439  hero 2+1, journeys 2×2, rail beside content
 *   768-1023   everything stacks selectively; rail below content
 *   ≤767       single column, wireframe mobile order
 *   ≤389       tighter paddings, full-width CTAs, no overflow
 *
 * 14-inch laptop rules (§5): no fixed hero heights, columns collapse
 * before type shrinks, everything lives in the centered container.
 * Dark indigo is contained to the search module and passport card —
 * never the page background (§20).
 */

/* ---- Page scaffold ------------------------------------------------ */

.sohome {
  /* Isolate this page's grid decisions from global section rhythm
     without fighting it: sections keep their own spacing utilities. */
  display: block;
}

/* Vertical rhythm between bands: the global .section paddings
   (3rem / 2rem each side) stack to 4–5rem of dead space between
   adjacent bands. This page reads as one composed stack, so each
   band contributes 1rem and the seams total 2rem. */
.sohome .section,
.sohome .section--tight {
  padding-block: 1rem;
}

/* The value band is the last visible band on desktop (the closing
   CTA is mobile-only), so it owns the gap into the footer. */
.sohome .sohome-values {
  padding-bottom: 1.5rem;
}

/* ---- Grid-fit contract -------------------------------------------- */
/* Two rules make every band sit flush in its grid at every width:
   1) every grid child gets min-width: 0, so content can never widen
      a track past its share (a grid child's default min-width is
      auto, which lets one long word break the whole row);
   2) every card inside a stretch grid fills its cell height, so
      cards in the same row always bottom-align. */

.sohome-hero__grid > *,
.sohome-journeys__grid > *,
.sohome-discovery-block > *,
.sohome-values__grid > *,
.sohome .page-rail > * {
  min-width: 0;
}

.sohome-hero__module,
.sohome-hero__aside > .onboard-card,
.sohome-journey,
.sohome-discovery-block .domain-card,
.sohome-discovery-block .feed-card,
.sohome .rail-box {
  height: 100%;
}

.sohome-discovery-block .feed-card,
.sohome-discovery-block .domain-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* The card is a flex COLUMN here (icon above the text), so the icon
   tile inherits the column's left edge. Centre it horizontally over
   the text block. */
.sohome-discovery-block .domain-card__icon {
  align-self: center;
}


/* Author row anchors to the card bottom so short and long titles in
   the same row still read as one aligned set. */
.sohome-discovery-block .feed-card__title {
  flex: 1 1 auto;
}

/* ---- Hero band ---------------------------------------------------- */

.sohome-hero {
  padding: 2rem 0 1rem;
  background: var(--color-bg);
}

/* The header runs on a wider track than body content (1440px, set in
   legacy-overrides: a nav bar has no reading-length constraint). This
   entry page is a composed dashboard-style layout, not prose, so it
   takes the SAME track — otherwise its bands sit visibly narrower
   than the menu above them and nothing lines up with the logo or the
   Sign Up button. --container-max stays 1280px globally. */
.sohome .container {
  max-width: 1440px;
}

.sohome-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4.5fr) minmax(0, 3fr);
  gap: 1.25rem;
  align-items: stretch;
}

.sohome-hero__heading {
  font-size: clamp(1.5rem, 2.1vw, 1.95rem);
  line-height: 1.15;
  color: var(--color-ink-heading);
  margin: 0 0 0.6rem;
}

.sohome-hero__heading-highlight {
  color: var(--color-primary);
}

.sohome-hero__subheading {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0 0 1rem;
  /* No max-width cap: at 38ch the line broke after "Find", splitting
     "Find opportunities." across two lines. */
  max-width: none;
}

/* Each sentence is kept whole; lines break BETWEEN sentences. Deterministic
   across browsers, unlike text-wrap: pretty. */
.sohome-hero__sub-part {
  display: inline-block;
  /* NOT nowrap.
   *
   * Each part is one sentence of the supporting copy, and nowrap kept
   * short ones like "Find opportunities." from splitting across lines.
   * The revised copy's second sentence — "Your ecosystem for people,
   * knowledge, opportunities and impact." — is far longer than any
   * phone is wide, so nowrap sent it straight off the right edge of
   * the hero card, clipped mid-word.
   *
   * A rule that depends on the content staying short is a rule that
   * breaks the first time the content changes. Sentences wrap; the
   * inline-block still keeps each one whole where there is room. */
  white-space: normal;
}

.sohome-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
}

.sohome-hero__ctas .btn {
  font-size: 0.82rem;
  padding-block: 0.5rem;
}

/* Four chips in ONE row, as drawn — not 2×2. */
.sohome-hero__trust {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.sohome-hero__trust-chip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.sohome-hero__trust-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-full);
  background: rgba(109, 94, 245, 0.12);
  color: var(--color-primary);
}

.sohome-hero__trust-icon .icon {
  width: 0.75rem;
  height: 0.75rem;
}

.sohome-hero__trust-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

/* Longer wording than before, so the chip text wraps inside its own
   column instead of pushing the chip wider. break-word keeps whole
   words intact; min-width: 0 on the flex parent is what actually
   allows the wrap to happen. */
.sohome-hero__trust-text strong {
  font-size: 0.6875rem;
  line-height: 1.2;
  color: var(--color-ink);
  overflow-wrap: break-word;
}

.sohome-hero__trust-text small {
  font-size: 0.6875rem;
  line-height: 1.2;
  color: var(--color-text-muted);
  overflow-wrap: break-word;
}

/* -- Dark search module. Contained dark treatment (§20). ------------ */

.sohome-hero__module {
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(109, 94, 245, 0.35), transparent 55%),
    var(--color-dark);
  border-radius: var(--radius-lg);
  padding: 1.1rem;
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  box-shadow: var(--shadow-md);
}

.sohome-hero__module-title {
  font-size: 1.05rem;
  color: var(--color-white);
  margin: 0;
}

.sohome-hero__module-title-accent {
  color: var(--color-secondary-text);
}

.sohome-hero__module-sub {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.6);
}

.sohome-hero__search {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.sohome-hero__search-field {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--color-white);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  /* The module sets color: white for its own dark surface. The field
     is white, so anything inheriting that colour — typed text, the
     search glyph, the filter icon — was invisible on it. Reset the
     colour at the field, not just the input. */
  color: var(--color-ink);
}

.sohome-hero__search-field input[type="search"] {
  /* flex: 1 1 0 with min-width: 0 — the input's default intrinsic
     width (roughly 20 characters) was wider than its share of the
     field, so the placeholder was clipped mid-word rather than the
     input fitting the space available. */
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  color: var(--color-ink);
}

.sohome-hero__search-field input[type="search"]::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

/* Native clear (×) control, as drawn. WebKit/Blink render this on
   type="search" once the field has a value; it inherits the field's
   colour so it stays visible on white. Firefox has no equivalent
   pseudo-element — the field simply has no × there, which is the
   browser's own convention rather than a missing feature. */
.sohome-hero__search-field input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 0.85rem;
  height: 0.85rem;
  margin-left: 0.4rem;
  cursor: pointer;
  opacity: 0.45;
  background-color: var(--color-ink);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6 6 18M6 6l12 12' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6 6 18M6 6l12 12' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.sohome-hero__search-field input[type="search"]::-webkit-search-cancel-button:hover {
  opacity: 0.8;
}

.sohome-hero__search-field .search-field__icon,
.sohome-hero__search-field .search-field__filter-wrap {
  color: var(--color-text-muted);
}

.sohome-hero__search-field .search-field__filter {
  color: var(--color-ink);
  background: transparent;
}

.sohome-hero__search-btn {
  flex: 0 0 auto;
  font-size: 0.8rem;
  padding-inline: 0.9rem;
}

.sohome-hero__signals {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Five intents, not three: Learn, Solve, Connect, Build, Advance
     (spec §6.2). At this width they compress rather than wrap —
     "the intent row may compress while preserving five concepts"
     (mobile spec §22). */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.4rem;
}

.sohome-hero__signal {
  min-width: 0;
}

/* Each signal is a card: circular icon above a title and a subtitle,
   centred. It is a LABEL, not a link — see the note at the foot of
   this file and mobile spec §5. */
.sohome-hero__signal {
  display: grid;
  /* Single column, three rows: icon, title, subtitle — all centred,
     as drawn. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  gap: 0.35rem;
  height: 100%;
  padding: 0.8rem 0.65rem;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  text-decoration: none;
  transition: border-color var(--transition-fast),
              background-color var(--transition-fast),
              transform var(--transition-fast);
}

/* Centred over the card, not pinned to its left edge. */
.sohome-hero__signal-icon {
  grid-row: 1;
  justify-self: center;
  margin-bottom: 0.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--radius-full);
  color: var(--color-white);
}

.sohome-hero__signal-icon .icon {
  width: 1.05rem;
  height: 1.05rem;
}

.sohome-hero__signal-title {
  grid-row: 2;
  font-size: 0.76rem;
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  color: var(--color-white);
  overflow-wrap: break-word;
}

/* Full card width — sharing a row with the arrow is what forced
   "From practitioner / s" and "Opportuniti / es" to split. */
.sohome-hero__signal-sub {
  grid-row: 3;
  font-size: 0.6875rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.6);
  overflow-wrap: break-word;
}


/* One indigo accent across all three cards — the per-card green /
   indigo / blue scheme is retired; the labels carry the distinction. */
.sohome-hero__signal-icon {
  background: var(--color-primary);
}


/* The reused orientation card fills its column, scaled to the hero's
   proportions — its default type is sized for a full-width surface. */
.sohome-hero__aside .onboard-card {
  height: 100%;
  padding: 1.1rem;
}

.sohome-hero__aside .onboard-card__title {
  font-size: 0.92rem;
  margin-bottom: 0.75rem;
}

.sohome-hero__aside .onboard-card__list {
  gap: 0.55rem;
}

.sohome-hero__aside .onboard-card__item {
  font-size: 0.74rem;
  line-height: 1.35;
  gap: 0.5rem;
}

.sohome-hero__aside .onboard-card__icon {
  width: 1.6rem;
  height: 1.6rem;
  flex: 0 0 auto;
}

.sohome-hero__aside .onboard-card__icon .icon {
  width: 0.8rem;
  height: 0.8rem;
}

/* ---- Journey band ------------------------------------------------- */

/* One continuous block, as drawn: a single white container with thin
   vertical dividers between the three journeys and the Passport card
   inset as the right segment — not four separate cards. */
.sohome-journeys__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.15fr);
  align-items: stretch;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.sohome-journey {
  position: relative;
  padding: 1.1rem 1.25rem;
  /* Icon sits inline to the LEFT of the text block, as drawn — the
     title, description and link row form the right column. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: 0.75rem;
  row-gap: 0.2rem;
  border-left: 1px solid var(--color-border-soft);
}

.sohome-journey:first-child {
  border-left: 0;
}

/* Mobile-only card affordance from the wireframe. */
.sohome-journey__chevron {
  display: none;
  position: absolute;
  top: 1.4rem;
  right: 1.1rem;
  color: var(--color-text-muted);
}

/* Solid-filled circle with a white glyph, as drawn — not a pale
   tint with a coloured glyph. Spans the icon column. */
.sohome-journey__icon {
  grid-column: 1;
  grid-row: 1 / 3;
  /* Centred against the title+description block rather than pinned to
     its first line, so the three segments read level even when their
     descriptions run different lengths. */
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  color: var(--color-white);
  margin-bottom: 0;
}

.sohome-journey__icon .icon {
  width: 1.15rem;
  height: 1.15rem;
}

.sohome-journey--join .sohome-journey__icon     { background: var(--color-positive); }
.sohome-journey--discover .sohome-journey__icon { background: var(--color-primary); }
.sohome-journey--evolve .sohome-journey__icon   { background: var(--color-warning); }

.sohome-journey__title {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
  white-space: nowrap;
}

.sohome-journey--join .sohome-journey__title     { color: var(--color-positive); }
.sohome-journey--discover .sohome-journey__title { color: var(--color-primary); }
.sohome-journey--evolve .sohome-journey__title   { color: var(--color-warning); }

.sohome-journey__desc {
  grid-column: 2;
  grid-row: 2;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  line-height: 1.4;
  margin: 0;
  /* Reserve three lines. The three descriptions run 2, 3 and 3 lines,
     which started the tile grids at different heights and made the
     band read as ragged. A common reserved height aligns the tile
     rows across all segments without hard-coding the copy. */
  min-height: calc(0.82rem * 1.4 * 3);
}

/* Interactive tiles in a 2×2 grid: icon, label, chevron. Kept
   deliberately compact — the tiles must read as tappable without
   growing the band's height, so the chrome (borders, tints, hover
   lift) carries the affordance rather than extra padding. */
.sohome-journey__links {
  grid-column: 1 / -1;
  grid-row: 3;
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
  /* end, not start: the tile grid sits at the bottom of its segment,
     so the four tiles line up across all three journeys regardless of
     how the heading above them settles. */
  align-content: end;
  min-width: 0;
}

.sohome-journey__links li {
  min-width: 0;
}

.sohome-journey__tile {
  display: flex;
  align-items: center;
  /* Icon then label, left-packed — as drawn. */
  justify-content: flex-start;
  gap: 0.4rem;
  min-width: 0;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-ink);
  text-decoration: none;
  transition: border-color var(--transition-fast),
              background-color var(--transition-fast),
              transform var(--transition-fast);
}

.sohome-journey__tile-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
}

.sohome-journey__tile-label {
  /* flex: 0 1 auto, NOT 1 1 auto: the label takes only the width it
     needs so the icon+label group stays centred, and it never gets
     squeezed into a column narrower than its longest word. */
  flex: 0 1 auto;
  min-width: 0;
  font-size: 0.72rem;
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  text-align: left;
  /* normal, NOT break-word: single words such as "Professionals" and
     "Contributions" must never split mid-word. Two-word labels wrap
     at the space; the reserved tile width fits the longest word. */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

.sohome-journey__tile:hover,
.sohome-journey__tile:focus-visible {
  transform: translateY(-1px);
}

/* Each journey's tiles carry its own accent — tint, icon and hover
   border — so the three columns stay visually distinct. */
.sohome-journey--join .sohome-journey__tile        { background: var(--color-positive-soft); }
.sohome-journey--join .sohome-journey__tile-icon   { color: var(--color-positive); }
.sohome-journey--join .sohome-journey__tile:hover,
.sohome-journey--join .sohome-journey__tile:focus-visible { border-color: var(--color-positive); }

.sohome-journey--discover .sohome-journey__tile      { background: var(--color-surface); }
.sohome-journey--discover .sohome-journey__tile-icon { color: var(--color-primary); }
.sohome-journey--discover .sohome-journey__tile:hover,
.sohome-journey--discover .sohome-journey__tile:focus-visible { border-color: var(--color-primary); }

.sohome-journey--evolve .sohome-journey__tile      { background: var(--color-warning-soft); }
.sohome-journey--evolve .sohome-journey__tile-icon { color: var(--color-warning); }
.sohome-journey--evolve .sohome-journey__tile:hover,
.sohome-journey--evolve .sohome-journey__tile:focus-visible { border-color: var(--color-warning); }

/* -- Passport preview card: light lavender, as drawn. --------------- */

.sohome-passport-card {
  background: linear-gradient(150deg, #EFEDFE, #E4E0FC);
  border-radius: var(--radius-md);
  margin: 0.6rem;
  padding: 1.1rem;
  color: var(--color-ink);
  display: flex;
  align-items: center;
  gap: 1rem;
  overflow: hidden;
}

/* Standalone (mobile-order) instance: desktop hides it — the band
   carries the promo there. */
.sohome-passport-standalone {
  display: none;
}

.sohome-passport-card--standalone {
  margin: 0;
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}

.sohome-passport-card__body {
  flex: 1 1 auto;
  min-width: 0;
}

.sohome-passport-card__title {
  font-size: 1rem;
  color: var(--color-ink-heading);
  margin: 0 0 0.3rem;
}

.sohome-passport-card__tagline {
  font-size: 0.82rem;
  color: var(--color-ink-soft);
  margin: 0 0 0.9rem;
}

.sohome-passport-card--band .sohome-passport-card__cta {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.sohome-passport-card--band .sohome-passport-card__cta:hover,
.sohome-passport-card--band .sohome-passport-card__cta:focus-visible {
  background: rgba(109, 94, 245, 0.1);
  border-color: var(--color-primary-deep);
  color: var(--color-primary-deep);
}

/* The art is one inlined SVG (8.139.0). The sheet / avatar / lines /
   wordmark / seal rules that built it out of nested spans are deleted
   with the markup they styled. */
.sohome-passport-card__art {
  flex: 0 0 auto;
  display: block;
  width: 5.25rem;
  height: auto;
}

/* ---- Offline band: column 2, below the rail ----------------------- */

/* Column 2 stack: rail cards, then the offline card beneath them.
   The column stretches to the main column's height, and the offline
   card takes whatever is left — so column 2 finishes level with the
   feed instead of stopping short. */
.sohome__rail-col {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
  align-self: stretch;
}

/* flex: 1 0 auto — GROWS to absorb whatever height the rail leaves,
   but never shrinks below its own content. With a fourth job in the
   rail there is less spare height to take; without the shrink guard
   the card would compress its own rows instead of simply ending
   sooner. */
.sohome__rail-col .sohome-offline {
  padding: 0;
  flex: 1 0 auto;
  display: flex;
}

.sohome__rail-col .sohome-offline .container {
  padding-inline: 0;
  max-width: none;
  display: flex;
  width: 100%;
}

/* Inside the rail column the band is a card, not a full-width strip:
   intro on top, capabilities stacked vertically beneath it. The card
   fills the column's remaining height and distributes its rows into
   that space rather than sitting compressed at the top. */
.sohome-offline__band {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.1rem;
  width: 100%;
  min-height: 100%;
}

.sohome-offline__intro {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  min-width: 0;
}

/* The intro icon and the capability tiles share one column width, so
   every title in the card starts on the same left edge. */
.sohome-offline__icon {
  flex: 0 0 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-white);
}

.sohome-offline__icon .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.sohome-offline__title {
  font-size: 1rem;
  margin: 0 0 0.25rem;
  color: var(--color-ink-heading);
}

.sohome-offline__desc {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: none;
}

/* Vertical, one capability per row; rows share the card's spare
   height evenly so the block never looks top-heavy. No rule above
   them — the reference runs the intro straight into the rows, with
   the icon column doing the aligning. */
.sohome-offline__caps {
  list-style: none;
  margin: 0;
  padding: 0.4rem 0 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 1.05rem;
  flex: 1 1 auto;
}

.sohome-offline__cap {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

/* Pale rounded tile, no border — as drawn. Explicit tint rather than
   --color-surface: the band's own background is already surface, so
   a surface-on-surface tile would be invisible. */
.sohome-offline__cap-icon {
  flex: 0 0 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--radius-md);
  background: rgba(109, 94, 245, 0.12);
  color: var(--color-primary);
}

.sohome-offline__cap-icon .icon {
  width: 1.05rem;
  height: 1.05rem;
}

.sohome-offline__cap-text {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  min-width: 0;
}

.sohome-offline__cap-text strong {
  font-size: 0.88rem;
  color: var(--color-ink);
}

.sohome-offline__cap-text small {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* ---- Discovery: domains + feed in ONE block ----------------------- */

/* The reused parts render their own <section class="section"><div
   class="container"> — flattened here so nesting them inside the
   discovery column adds no double padding or width cap. Scoped to
   this layout only; the parts are untouched everywhere else. */
.sohome__discovery-main .section {
  padding-top: 0;
  padding-bottom: 0;
}

.sohome__discovery-main .section .container {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}

.sohome__discovery-main {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}

/* One container holding the community feed, then Explore by Domain
   beneath it — each takes the block's full width, separated by a
   horizontal rule rather than sitting side by side. */
.sohome-discovery-block {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}

.sohome-discovery-block__domains,
.sohome-discovery-block__feed {
  padding: 1.25rem;
  min-width: 0;
}

.sohome-discovery-block__domains {
  border-top: 1px solid var(--color-border-soft);
}

/* Compact, readable typography inside the shared block — sizes hold
   at or above 0.72rem so nothing drops below comfortable reading
   (§5: collapse and tighten chrome before shrinking text further). */
.sohome-discovery-block .section-heading h2,
.sohome-discovery-block .feed__title {
  font-size: 1.05rem;
}

/* The base .feed__header is display:block in the legacy sheet, which
   stacked title, View all and tabs vertically. One row: title left,
   View all right; the tab strip wraps onto its own full row. */
.sohome-discovery-block .feed__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.sohome-discovery-block .feed__title {
  margin: 0;
  flex: 1 1 auto;
}

.sohome-discovery-block .feed__all {
  flex: 0 0 auto;
  margin-left: auto;
}

.sohome-discovery-block .feed__tabs {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
}

/* Explore by Domain: four across, two rows for the eight domains.
   auto-fit with a 180px floor rather than a hard repeat(4) — the
   count holds at four while the block is wide, and steps down to
   three or two on its own instead of clipping. */
.sohome-discovery-block .domain-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}

.sohome-discovery-block .domain-card {
  padding: 0.85rem;
  min-width: 0;
}

/* Heading centres under the icon; the description below stays
   left-aligned — it is a comma-separated technology list, which
   scans better against a straight left edge than centred. */
.sohome-discovery-block .domain-card__name {
  display: block;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.3;
  /* break-word, not anywhere: "Automation" and "Architecture" wrap
     to their own line rather than splitting mid-word. */
  overflow-wrap: break-word;
}

.sohome-discovery-block .domain-card__desc {
  font-size: 0.74rem;
  line-height: 1.4;
  overflow-wrap: break-word;
}

/* Feed now has the block's full width: three cards across, stepping
   down on its own as the block narrows. */
.sohome-discovery-block .feed-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.85rem;
}

.sohome-discovery-block .feed-card__title {
  font-size: 0.9rem;
  line-height: 1.35;
}

/* The wireframe's community cards carry tag, title, author and time
   only — the excerpt is dropped here for the compact card. */
.sohome-discovery-block .feed-card__excerpt {
  display: none;
}

.sohome-discovery-block .feed-card__author,
.sohome-discovery-block .feed-card__time {
  font-size: 0.75rem;
}

/* ---- Rail: one card per row --------------------------------------- */

.sohome__discovery-grid.page-with-rail {
  grid-template-columns: minmax(0, 1fr) 360px;
  /* .page-with-rail is align-items: start elsewhere; stretch here so
     the rail column can fill the main column's height and the
     offline card can absorb the difference. */
  align-items: stretch;
}

.sohome .page-rail {
  display: grid;
  /* ONE card per row. Two-up left ~170px per card, which wrapped
     the titles and the View all links; a single column gives every
     block the rail's full width. */
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
  align-items: stretch;
  align-content: start;
  /* The shared rail is a sticky sidebar elsewhere, capped to the
     viewport with its own internal scroll (legacy-overrides ≥1024px,
     identity-components). The wireframe's rail flows at natural
     height — only the PAGE scrolls. No column on this layout may
     ever grow a scrollbar of its own on desktop. */
  position: static;
  max-height: none;
  overflow: visible;
}

/* Rail card internals: header on one line, no wrapped titles. */
.sohome .rail-box__title {
  font-size: 0.92rem;
  white-space: nowrap;
}

.sohome .rail-box__head .btn,
.sohome .rail-box__head a {
  white-space: nowrap;
}

.sohome .page-rail .rail-box {
  margin: 0;
}

/* ---- Value band: one block ---------------------------------------- */

/* Title sits ABOVE the row, as drawn — the left-segment-with-divider
   arrangement is retired. */
.sohome-values__band {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
}

.sohome-values__title {
  font-size: 0.95rem;
  color: var(--color-ink-heading);
  margin: 0;
}

/* Five on ONE row, as drawn. Explicit tracks rather than auto-fit,
   which drops a column when space tightens; minmax(0, 1fr) lets them
   share the row evenly and never overflow. */
.sohome-values__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}

.sohome-values__item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
}

/* Circular pale tile, as drawn. */
.sohome-values__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: var(--radius-full);
  background: rgba(109, 94, 245, 0.12);
  color: var(--color-primary);
}

.sohome-values__icon .icon {
  width: 0.95rem;
  height: 0.95rem;
}

.sohome-values__text {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  min-width: 0;
}

.sohome-values__text strong,
.sohome-values__link {
  font-size: 0.76rem;
  color: var(--color-ink);
  text-decoration: none;
  /* break-word, not anywhere: "Opportunities" moves to its own line
     rather than splitting as "Opportuniti / es". */
  overflow-wrap: break-word;
  hyphens: auto;
}

.sohome-values__link:hover,
.sohome-values__link:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
}

.sohome-values__text small {
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--color-text-muted);
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ---- Wireframe-exact scoping ------------------------------------- */

/* Eyebrow above the headline: mobile wireframe only. */
.sohome-hero__eyebrow {
  display: none;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 0.6rem;
}

/* The orientation card in the hero carries its rows and nothing else.
   The whole foot is hidden here as of 8.132.0 — the duplicate Join
   button had already gone, and the "Already a member? Sign in" line
   went with it: the header carries Log in and Join free two inches
   above, so the card was offering a third and fourth route to the same
   two screens.

   Scoped to .sohome: the legacy homepage's card keeps both, and there
   the card IS the page's sign-in path. */
.sohome .onboard-card__foot {
  display: none;
}

/* The wireframe's domain header is heading + view-all only. */
.sohome .domain-section__desc {
  display: none;
}

/* ---- Assurance strip ---------------------------------------------- */

.sohome-assure {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0.85rem 1.25rem;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.9rem;
}

.sohome-assure__item {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  min-width: 0;
  padding-left: 0.9rem;
  border-left: 1px solid var(--color-border);
}

.sohome-assure__item:first-child {
  padding-left: 0;
  border-left: 0;
}

.sohome-assure__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: var(--radius-full);
  background: rgba(109, 94, 245, 0.12);
  color: var(--color-primary);
}

.sohome-assure__text {
  min-width: 0;
  font-size: 0.71rem;
  line-height: 1.35;
  color: var(--color-text-muted);
  overflow-wrap: break-word;
  hyphens: auto;
}

.sohome-assure__text strong {
  display: block;
  color: var(--color-ink);
}

.sohome-assure__text a {
  color: var(--color-primary-text); /* 11px on the surface tint: fill token is 4.3:1 */
  text-decoration: none;
}

.sohome-assure__text a:hover,
.sohome-assure__text a:focus-visible {
  text-decoration: underline;
}

/* ---- Focus visibility (§10): never colour alone. ------------------ */

.sohome a:focus-visible,
.sohome button:focus-visible,
.sohome input:focus-visible,
.sohome select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.sohome-hero__module a:focus-visible,
.sohome-hero__module button:focus-visible,
.sohome-passport-card a:focus-visible {
  outline-color: var(--color-white);
}

/* ---- Motion (§10): this layout animates nothing of its own; the
   guard covers the interactive chips so an inherited transition can
   never animate them for reduced-motion visitors. Targeted and
   priority-flag-free, matching every other sheet's reduced-motion
   blocks — the ratchet in build-assets stays at its mark. ---------- */

@media (prefers-reduced-motion: reduce) {
  .sohome-journey__tile,
  .sohome-values__link,
  .sohome .btn {
    transition: none;
  }

  /* The tiles move on hover; hold them still for visitors who have
     asked for reduced motion. */
  .sohome-journey__tile:hover,
  .sohome-journey__tile:focus-visible {
    transform: none;
  }

  .sohome-hero__signal {
    transition: none;
  }

}

/* ---- ≤1439 (14-inch laptops): the hero stays ONE three-zone block —
   the wireframe's desktop row — with tightened gaps and paddings
   rather than collapsing (§5: 1366×768 and 1440×900 are first-class
   desktop viewports, not tablets). ---------------------------------- */

@media (max-width: 1439px) {
  .sohome-hero__grid {
    grid-template-columns: minmax(0, 4.6fr) minmax(0, 4.4fr) minmax(0, 3fr);
    gap: 1rem;
  }

  .sohome-hero__heading {
    font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  }

  .sohome-hero__module {
    padding: 1.2rem;
  }

  .sohome-hero__trust {
    gap: 0.4rem;
  }

  /* Journey band stays ONE four-segment row on 14-inch laptops too —
     tighter padding instead of wrapping. */
  .sohome-journey {
    padding: 1rem;
    column-gap: 0.6rem;
  }

  /* Narrower segments: trim the tile chrome and hide the chevron so
     the longest labels ("Professionals", "Contributions") still fit
     their column WITHOUT breaking mid-word. */
  .sohome-journey__tile {
    padding: 0.4rem 0.3rem;
    gap: 0.25rem;
  }

  .sohome-journey__tile-label {
    font-size: 0.6875rem;
  }

  .sohome-journey__tile-icon {
    width: 1rem;
    height: 1rem;
  }

    .sohome-journey__links {
    gap: 0.35rem;
  }

  .sohome-journey__desc {
    font-size: 0.78rem;
    min-height: calc(0.78rem * 1.4 * 3);
  }

  /* Value band: tighten seams so all six still hold one row on a
     14-inch laptop rather than wrapping the sixth. */
  .sohome-values__band {
    gap: 1rem;
  }

  .sohome-values__title {
    padding-right: 1rem;
  }

  .sohome-values__grid {
    gap: 0.6rem;
  }

  .sohome-values__item {
    gap: 0.4rem;
  }

  .sohome-passport-card {
    padding: 0.9rem;
    gap: 0.75rem;
  }


}

/* ---- ≤1199 (small desktop / tablet landscape): hero becomes
   message + module with the orientation card spanning below (§4). --- */

@media (max-width: 1199px) {
  .sohome-hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 1.25rem;
  }

  .sohome-hero__aside {
    grid-column: 1 / -1;
  }

  .sohome-hero__aside .onboard-card {
    height: auto;
  }

  /* The message column narrows here; four chips across would crush,
     so 2×2 is the honest arrangement below the design width. */
  .sohome-hero__trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1rem;
  }

  /* Journey band wraps 2×2 inside the same single block; dividers
     become a left rule on the right column and a top rule on the
     second row so every segment stays visibly separated. */
  .sohome-journeys__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sohome-journey {
    border-left: 0;
  }

  .sohome-journey:nth-child(2) {
    border-left: 1px solid var(--color-border-soft);
  }

  .sohome-journey:nth-child(3) {
    border-top: 1px solid var(--color-border-soft);
  }

  .sohome-passport-card {
    border-top: 1px solid var(--color-border-soft);
    margin: 0;
    border-radius: 0;
  }

  /* Discovery block stacking now happens at ≤1439 (see above); the
     auto-fill grids handle their own column counts at every width. */
  .sohome__discovery-grid.page-with-rail {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

/* ---- ≤1023: rail below content; journeys stay 2-up (§4 tablet) ---- */

@media (max-width: 1023px) {
  .sohome__discovery-grid.page-with-rail {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Rail is below the content now — the offline card sizes to its
     own content rather than absorbing leftover column height. */
  .sohome__rail-col .sohome-offline {
    flex: 0 0 auto;
  }

  .sohome-offline__band {
    min-height: 0;
  }

  .sohome-offline__caps {
    flex: 0 0 auto;
    justify-content: flex-start;
  }

  .sohome-values__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
  }

  .sohome-assure {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 0.9rem;
  }

  /* Dividers follow the wrap: a left rule only on the right column. */
  .sohome-assure__item {
    padding-left: 0;
    border-left: 0;
  }

  .sohome-assure__item:nth-child(even) {
    padding-left: 0.9rem;
    border-left: 1px solid var(--color-border);
  }
}

/* ---- ≤767: single column, wireframe mobile order (§4 mobile) ------ */

@media (max-width: 767px) {
  .sohome-hero {
    padding-top: 1rem;
  }

  /* Mobile wireframe: the entire hero — eyebrow, headline, CTAs,
     search and value signals — lives inside ONE dark
     card. Dark stays a contained card treatment, not the page
     background (§20). */
  .sohome-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem;
    background:
      radial-gradient(120% 80% at 90% -10%, rgba(109, 94, 245, 0.4), transparent 55%),
      var(--color-dark);
    border-radius: var(--radius-lg);
    padding: 1.35rem 1.1rem;
    box-shadow: var(--shadow-md);
  }

  .sohome-hero__eyebrow {
    display: block;
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    margin-bottom: 0.45rem;
  }

  /* Mobile type scale — the desktop clamp resolves far too large in a
     390px card. Fixed sizes here rather than a viewport clamp so the
     block reads identically across phone widths. */
  .sohome-hero__heading {
    color: var(--color-white);
    font-size: 1.45rem;
    line-height: 1.18;
    margin-bottom: 0.5rem;
  }

  .sohome-hero__heading-highlight {
    color: var(--color-secondary-text);
  }

  .sohome-hero__subheading {
    color: rgba(255, 255, 255, 0.75);
    max-width: none;
    font-size: 0.8rem;
    line-height: 1.45;
    margin-bottom: 0.9rem;
  }

  .sohome-hero__ctas {
    margin-bottom: 0;
    gap: 0.5rem;
  }

  .sohome-hero__ctas .btn {
    flex: 1 1 0;
    font-size: 0.78rem;
    padding-block: 0.55rem;
  }

  /* Trust chips and the orientation card are desktop-wireframe
     elements; the mobile wireframe carries neither. */
  .sohome-hero__trust,
  .sohome-hero__aside {
    display: none;
  }

  /* The module dissolves into the shared dark card. */
  .sohome-hero__module {
    background: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    gap: 0.7rem;
  }

  /* The mobile wireframe carries neither the module title nor its
     subtitle — the search field speaks for itself inside the hero
     card. Title stays in the DOM for screen readers. */
  .sohome-hero__module-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .sohome-hero__module-sub {
    display: none;
  }

  /* No Search button on mobile — the field spans the row and Enter
     submits the form, as drawn. The button stays in the DOM (it is
     the form's submit control and the only affordance for anyone
     without a keyboard Enter), just visually hidden. */
  .sohome-hero__search {
    flex-direction: row;
    gap: 0;
  }

  .sohome-hero__search-btn {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .sohome-hero__search-field {
    flex: 1 1 100%;
  }

  /* Signal cards: three across in one row, compact — icon, title,
     subtitle stacked. The arrow is a desktop affordance; at this size
     it would crowd the card, and the whole card is still the link. */
  .sohome-hero__signals {
    /* Five, compressed — mobile spec §22: the row "may compress while
       preserving five concepts", so it never drops to three and never
       wraps to a second line where two intents would sit alone. */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.3rem;
  }

  /* 0.3rem inline, not 0.4rem. With the module's padding restored to
     zero the tiles get ~43px back and "certifications" fits again, but
     it fits by about two pixels — this buys a margin so the next
     translation does not put it back over the line. break-word stays
     as the last-resort fallback below. */
  .sohome-hero__signal {
    padding: 0.6rem 0.3rem;
  }

  .sohome-hero__signal-icon {
    width: 1.75rem;
    height: 1.75rem;
  }

  .sohome-hero__signal-icon .icon {
    width: 0.85rem;
    height: 0.85rem;
  }

  .sohome-hero__signal-title {
    font-size: 0.6875rem;
    line-height: 1.2;
  }

  .sohome-hero__signal-sub {
    font-size: 0.6875rem;
    line-height: 1.25;
  }

  /* Journeys: the mobile wireframe shows three SEPARATE cards with a
     chevron affordance — the unified divided band is the desktop
     treatment. */
  .sohome-journeys__grid {
    grid-template-columns: minmax(0, 1fr);
    background: none;
    border: 0;
    border-radius: 0;
    overflow: visible;
    gap: 0.9rem;
  }

  .sohome-journey {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  .sohome-journey,
  .sohome-journey:nth-child(2) {
    border-left: 1px solid var(--color-border);
  }

  .sohome-journey + .sohome-journey {
    border-top: 1px solid var(--color-border);
  }

  .sohome-journey__chevron {
    display: inline-flex;
  }

  .sohome-journey__tile-label {
    font-size: 0.78rem;
  }

  /* Passport promo: the band's segment hides; the standalone card
     after the rail (the mobile wireframe's position) shows instead. */
  .sohome-journeys__grid .sohome-passport-card--band {
    display: none;
  }

  .sohome-passport-standalone {
    display: block;
  }

  /* Mobile wireframe: capabilities go back to centred icon-over-label
     chips, three-up — the vertical stack is the column-2 desktop
     treatment. */
  .sohome-offline__caps {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .sohome-offline__cap {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
  }

  .sohome-offline__cap-text {
    align-items: center;
  }

  /* Discovery: the outer block chrome is a desktop element — mobile
     shows Explore by Domain and From the Community as plain stacked
     sections on the page background. */
  .sohome-discovery-block {
    background: none;
    border: 0;
    border-radius: 0;
    display: block;
  }

  .sohome-discovery-block__domains,
  .sohome-discovery-block__feed {
    padding: 0;
  }

  .sohome-discovery-block__domains {
    border-top: 0;
    margin-top: 1.5rem;
  }

  /* All five tabs on one line, spread across the FULL row width —
     space-between distributes the leftover space between labels
     instead of leaving them bunched at the left with dead space on
     the right. Type sized so the longest label set still measures
     inside a 360px content width. */
  .sohome-discovery-block .feed__tabs {
    flex-wrap: nowrap;
    display: flex;
    justify-content: space-between;
    gap: 0.3rem;
    overflow: visible;
    width: 100%;
  }

  .sohome-discovery-block .feed__tab {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    font-size: 0.76rem;
    padding-inline: 0;
    text-align: center;
  }

  /* Journey tiles: trim the chrome so long single words like
     "Contributions" fit their column without breaking. */
  .sohome-journey__tile {
    padding: 0.4rem 0.45rem;
    gap: 0.3rem;
  }

  .sohome-journey__tile-icon {
    width: 1.1rem;
    height: 1.1rem;
  }

  .sohome-journey__tile-label {
    font-size: 0.72rem;
  }

    /* Mobile wireframe: domain cards two-up, community cards single
     column, rail cards sequential. */
  .sohome-discovery-block .domain-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Value items: compact icon-over-label chips, four across; the
     two-line descriptions are a desktop element. */
  .sohome-values__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4rem;
  }

  .sohome-assure {
    grid-template-columns: minmax(0, 1fr);
    padding: 0.75rem 0.9rem;
  }

  .sohome-assure__item,
  .sohome-assure__item:nth-child(even) {
    padding-left: 0;
    border-left: 0;
  }

  .sohome-values__text strong,
  .sohome-values__link {
    font-size: 0.6875rem;
    line-height: 1.25;
  }

  .sohome-values__icon {
    width: 1.75rem;
    height: 1.75rem;
  }

  .sohome-values__title {
    font-size: 0.88rem;
  }

  .sohome-values__item:nth-child(n+5) {
    display: none;
  }

  .sohome-values__item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
  }

  .sohome-values__text {
    align-items: center;
  }

  .sohome-values__text small {
    display: none;
  }

  .sohome-discovery-block .feed-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- ≤389: tighter, full-width CTAs, zero overflow (§4 small) ----- */

@media (max-width: 389px) {
  /* CTAs and signal cards stay in ONE row at every phone width —
     they shrink to fit rather than stacking. */
  .sohome-hero__heading {
    font-size: 1.3rem;
  }

  .sohome-hero__ctas {
    gap: 0.4rem;
  }

  .sohome-hero__ctas .btn {
    font-size: 0.72rem;
    padding-inline: 0.5rem;
  }

  .sohome-hero__signals {
    gap: 0.35rem;
  }

  .sohome-hero__signal {
    padding: 0.45rem;
  }

  .sohome-hero__signal-title {
    font-size: 0.6875rem;
  }

  .sohome-hero__signal-sub {
    font-size: 0.6875rem;
  }

  .sohome-hero__trust {
    grid-template-columns: minmax(0, 1fr);
  }

  .sohome-discovery-block .feed__tab {
    font-size: 0.7rem;
  }

  .sohome-passport-card {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==================================================================
   Destination highlights (revised IA spec §16 step 5, §17, §23)

   Six cards naming what each major destination contains. Colour marks
   the pillar in the icon and the label only — §17: "do not turn every
   card into a solid coloured block" — and the pillar is written out in
   words above the title, because §23 forbids relying on colour alone
   to identify JOIN, DISCOVER or EVOLVE.
   ------------------------------------------------------------------ */
.sohome-destinations__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1024px) {
  /* Six across on desktop, as drawn. Below that the auto-fit above
     takes over: three at tablet, two on a phone. */
  .sohome-destinations__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.dest-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--dest-accent, var(--color-action));
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.dest-card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .dest-card { transition: none; }
  .dest-card:hover { transform: none; }
}

.dest-card__pillar {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dest-accent, var(--color-action));
}

.dest-card__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--color-ink-heading);
}

.dest-card__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--dest-tint, rgba(109, 94, 245, 0.1));
  color: var(--dest-accent, var(--color-action));
}

.dest-card__blurb {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.dest-card__items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
  font-size: var(--fs-xs);
  color: var(--color-ink-soft);
}

.dest-card__items li { display: flex; align-items: baseline; gap: var(--space-2); }

/* A marker rather than a bullet glyph, so the list reads as contents
   rather than as prose. */
.dest-card__items li::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--dest-accent, var(--color-action));
}

/* The action sits at the foot of every card, so six cards of differing
   content length still line up along the bottom. */
.dest-card__cta { margin: auto 0 0; padding-top: var(--space-2); }

.dest-card__cta a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--dest-accent, var(--color-action));
  text-decoration: none;
}

.dest-card__cta a:hover { text-decoration: underline; }

/* THE SIX ACCENTS.
 *
 * Taken from the reference and verified rather than eyeballed. Each is
 * used for two things — the title text on a near-white tint, and white
 * glyph on a solid disc — so each was measured for both. All six clear
 * 4.5:1 in both directions, which is why these particular shades and
 * not the brighter ones the reference appears to use:
 *
 *   Community #15803D  5.02:1     Pulse    #0F766E  5.47:1
 *   People    #4F46E5  6.29:1     Events   #C2410C  5.18:1
 *   Insights  #1D4ED8  6.70:1     Jobs     #BE123C  6.29:1
 *
 * Tints are the same hue at 6%, which is enough to separate one row
 * from the next without the card reading as a selected state.
 */
.dest-card--community { --dest-accent: #15803D; --dest-tint: rgba(21, 128, 61, 0.06); }
.dest-card--people    { --dest-accent: #4F46E5; --dest-tint: rgba(79, 70, 229, 0.06); }
.dest-card--insights  { --dest-accent: #1D4ED8; --dest-tint: rgba(29, 78, 216, 0.06); }
.dest-card--pulse     { --dest-accent: #0F766E; --dest-tint: rgba(15, 118, 110, 0.06); }
.dest-card--events    { --dest-accent: #C2410C; --dest-tint: rgba(194, 65, 12, 0.06); }
.dest-card--jobs      { --dest-accent: #BE123C; --dest-tint: rgba(190, 18, 60, 0.06); }

/* Professionals preview — overlapped avatars, as section 8 draws them.
   Sized in CSS as well as in the width/height attributes, because the
   theme's global `img { max-width: 100% }` lets an avatar grow to its
   container when the container is wider than the intrinsic size. */
.dest-card__faces {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dest-card__faces li { display: flex; }
.dest-card__faces li + li { margin-inline-start: -10px; }

.dest-card__faces img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--color-bg);
  object-fit: cover;
  background: var(--color-border-soft);
}

/* ==================================================================
   Signed-out homepage, rebuilt composition (8.110.0)
   ------------------------------------------------------------------ */

/* THE PASSPORT BAND WAS HIDDEN ON DESKTOP.
 *
 * .sohome-passport-standalone was display:none by default and revealed
 * only below the journey band's breakpoint, because the journey band
 * carried the Passport as its fourth segment at desktop width and the
 * standalone card was the phone's version of the same thing.
 *
 * The journey band is no longer rendered on this page, so that rule
 * would have removed the page's only EVOLVE surface from every desktop
 * visitor — the module would have vanished with nothing reporting it.
 * It shows at every width now. */
.sohome-passport-standalone { display: block; }

/* Explore by Domain is its own band, not a panel inside the feed
   block. The wrapper that gave it padding and a divider went with the
   nesting, so the section supplies its own rhythm. */
.sohome__domains { padding-block: var(--space-8); }

@media (max-width: 767px) {
  .sohome__domains { padding-block: var(--space-6); }
}

/* ---- Latest Pulse rail block (8.115.0) ----

   Thumbnail | headline | time, as both references draw it. A grid
   rather than a flex row so a two-line headline indents under itself
   instead of wrapping back beneath the image, and so the time stays
   pinned to the top-right whatever the headline's length. */
.rail-pulse {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: start;
  column-gap: var(--space-3);
  row-gap: 2px;
}

.rail-pulse__thumb {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  /* Navy behind the artwork, which is transparent line-work — the same
     surface the Pulse panel uses, so a rail thumbnail and a hero cover
     read as the same family. */
  background: linear-gradient(140deg, var(--color-pulse-1, #16204A) 0%, var(--color-pulse-2, #262A6B) 100%);
}

.rail-pulse__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Artwork is a drawing, not a photograph: contained and inset so it is
   not cropped to a square it was never composed for. */
.rail-pulse__art { display: block; width: 100%; height: 100%; padding: 6px; }
.rail-pulse__art img { object-fit: contain; }

.rail-pulse__title {
  grid-column: 2;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--color-ink);
  text-decoration: none;
}

.rail-pulse__title:hover { color: var(--color-action); }

.rail-pulse__time {
  grid-column: 3;
  grid-row: 1;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ==================================================================
   Explore by Domain is not on mobile Home (mobile spec §7)

   "The separate Explore/Explore by Domain block is redundant on mobile
   because Explore already exists as a persistent bottom-navigation
   destination... Home should introduce Explore, not become the Explore
   page."

   Hidden rather than skipped server-side, for the same reason as every
   other viewport decision in this theme: PHP cannot see the viewport,
   and guessing it from a user-agent is wrong for tablets, wrong for a
   resized window and wrong the moment a cache serves one device's HTML
   to another. display: none also removes it from the accessibility
   tree, so a screen reader on a phone is not offered a section that is
   not there.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .sohome__domains { display: none; }
}

/* ==================================================================
   Hero intent row — labels, not links (8.112.0)

   The card styling lived on .sohome-hero__signal-link, an <a> that no
   longer exists: mobile spec §5 makes the intent row orientation
   rather than navigation, so each item is a plain list item now.

   The selector is renamed in place throughout this file rather than
   overridden from the bottom, and every :hover / :focus-visible rule
   that belonged to it is deleted. A card that lifts under the cursor
   tells the reader it can be clicked; this one cannot, so leaving the
   affordance would swap one broken promise for another.
   ------------------------------------------------------------------ */
.sohome-hero__signal { cursor: default; }

/* ==================================================================
   Hero intent row, mobile — five circles in one line (8.113.0)

   The reference draws these as bare coloured discs with a label and a
   description beneath, all five on one row. The current treatment
   gives each a bordered translucent card, which at a fifth of a phone
   is a box barely wider than the disc inside it: five outlines, five
   fills, and the labels squeezed between them.

   The chrome comes off on phones. The disc IS the affordance's whole
   visual, which is also the honest signal now that these are labels
   rather than links — a bordered card that cannot be pressed reads as
   a broken button; a coloured icon over a caption reads as a legend.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .sohome-hero__signals {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.25rem;
    align-items: start;
  }

  .sohome-hero__signal {
    padding: 0;
    border: 0;
    background: none;
    gap: 0.3rem;
  }

  .sohome-hero__signal-icon {
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.1rem;
  }

  /* Icon glyph scaled with the disc — at 2.5rem the default sat small
     and off-centre in a circle drawn for it. */
  .sohome-hero__signal-icon .icon { width: 18px; height: 18px; }

  .sohome-hero__signal-title {
    font-size: 0.75rem;
    font-weight: var(--fw-semibold);
    line-height: 1.2;
    color: var(--color-white);
  }

  .sohome-hero__signal-sub {
    font-size: 0.6875rem;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.7);
    /* Wraps between words only. "Certifications" is 14 characters in a
       one-fifth column, so anywhere-breaking would shred it. */
    overflow-wrap: normal;
    hyphens: auto;
  }
}

/* One accent per intent (mobile spec §19: distinct semantic colour per
   area). Values are the role tokens where one exists; the two the
   palette does not name are literals, each measured for white text on
   the disc — the label beneath carries the meaning, so the colour only
   ever distinguishes, never identifies (§23).

   White-on-disc, measured:

   Learn    #DB2777  4.60:1
   Solve    #EA580C  3.56:1
   Connect  #C2410C  5.18:1
   Build    #0D9488  3.74:1
   Advance  --color-primary

   Solve and Build fall under 4.5:1. That is acceptable HERE and only
   here: the glyph on the disc is decorative and aria-hidden, the
   readable label sits beneath on the dark panel, and WCAG's 3:1
   non-text contrast is the applicable bar for a graphic. If either
   colour is ever used behind real text, it needs darkening first.
   ------------------------------------------------------------------ */
.sohome-hero__signal--learn   .sohome-hero__signal-icon { background: #DB2777; }
.sohome-hero__signal--solve   .sohome-hero__signal-icon { background: #EA580C; }
.sohome-hero__signal--connect .sohome-hero__signal-icon { background: #C2410C; }
.sohome-hero__signal--build   .sohome-hero__signal-icon { background: #0D9488; }
.sohome-hero__signal--advance .sohome-hero__signal-icon { background: var(--color-primary); }

/* The chevron is a phone-layout affordance; on desktop the six cards
   sit in a row where a right-pointing arrow would mean nothing. */
.dest-card__chevron { display: none; }

/* ==================================================================
   Destination rows — phone (8.116.0)

   Every var() carries a fallback. The accent and tint are set by the
   .dest-card--* modifier, which the build's variable checker cannot
   see from here — and it is right to complain: an undefined custom
   property invalidates the whole declaration, so a card whose accent
   key ever stopped matching would lose its background and its colour
   rather than falling back to the brand.

   Rebuilt to the reference rather than adjusted toward it. One row per
   destination: solid accent square, name in the accent, contents as a
   wrapped run of terms, the action beneath, a chevron at the edge.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .sohome-destinations__grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .dest-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 16px;
    align-items: start;
    column-gap: 12px;
    row-gap: 3px;
    padding: 14px;
    border: 1px solid var(--color-border-soft);
    border-radius: 12px;
    background: var(--dest-tint, var(--color-bg));
    /* No lift, no shadow: the row is not a button, and the CTA inside
       it is what responds. */
    transform: none;
    box-shadow: none;
  }

  .dest-card:hover { transform: none; box-shadow: none; }

  /* EVERY text child placed explicitly. Auto-placement would drop the
     second one into the icon's 44px column — the trap that shredded
     the job titles, the Pulse headlines and the people rows earlier.
     Stated once here rather than discovered a fourth time. */
  .dest-card__title,
  .dest-card__blurb,
  .dest-card__items,
  .dest-card__faces,
  .dest-card__count,
  .dest-card__cta { grid-column: 2; }

  .dest-card__pillar { display: none; }

  .dest-card__icon {
    grid-column: 1;
    grid-row: 1 / span 5;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--dest-accent, var(--color-action));
    color: #FFFFFF;
  }

  .dest-card__icon .icon { width: 20px; height: 20px; }

  .dest-card__title {
    display: block;
    margin-bottom: 1px;
    font-size: 0.9375rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--dest-accent, var(--color-action));
  }

  /* The icon is its own cell now and must not also sit inside the
     heading. */
  .dest-card__title .dest-card__icon { display: none; }

  .dest-card__items {
    display: block;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-ink-soft);
  }

  .dest-card__items li { display: inline; }
  .dest-card__items li::before { content: none; }

  /* The separator is DRAWN, not typed.
     A "•" glyph rendered on Android as a tall coloured oval — the
     bullet in one font is nothing like the bullet in another, and at
     this size the difference is the whole mark. A 3px box owes nothing
     to a font and looks the same everywhere. Empty alternative text so
     a screen reader hears the terms, not a bullet between each. */
  .dest-card__items li + li::before {
    content: "";
    content: "" / "";
    display: inline-block;
    width: 3px;
    height: 3px;
    margin-inline: 0.5em;
    border-radius: 50%;
    background: var(--color-text-muted);
    vertical-align: middle;
  }

  /* Professionals is defined by who is in it, so its supporting line
     stays; the other five have a contents list that says the same
     thing more precisely, so theirs comes off. */
  .dest-card__blurb { display: none; }

  .dest-card--people .dest-card__blurb {
    display: block;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-ink-soft);
  }

  .dest-card__faces { margin-top: 4px; }
  .dest-card__faces img { width: 28px; height: 28px; }

  .dest-card__count {
    margin: 2px 0 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
  }

  .dest-card__cta { margin: 0; padding-top: 4px; }

  .dest-card__cta a {
    min-height: 28px;
    font-size: 0.8125rem;
    font-weight: var(--fw-semibold);
    color: var(--dest-accent, var(--color-action));
  }

  .dest-card__chevron {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    grid-column: 3;
    grid-row: 1 / span 5;
    align-self: center;
    color: var(--dest-accent, var(--color-action));
    opacity: 0.65;
  }
}

/* ==================================================================
   Event rows: a date block, not a calendar glyph (8.115.0)

   .rail-event is a flex row and the block takes the icon's place in
   it, so nothing else about the row changes. Sized to match the icon
   it replaces at the narrow end and to hold two digits at the wide
   one — a 48px square holds "MAY" and "30" without either wrapping.
   ------------------------------------------------------------------ */
.rail-event__date-block {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  align-content: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border-soft);
  line-height: 1.05;
}

.rail-event__month {
  font-size: 0.6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* The month is the reference's one spot of colour in this row, and
     it is the only red on the page — attention, not alarm, which is
     what --color-attention is for. */
  color: var(--color-attention);
}

.rail-event__day {
  font-size: 1.125rem;
  font-weight: var(--fw-bold);
  color: var(--color-ink-heading);
  font-variant-numeric: tabular-nums;
}

/* ==================================================================
   Hero on the phone — five intents on one line, type that fits
   (8.117.0)

   The intent row is five equal columns. On a 360px screen the hero
   card leaves roughly 300px of content width, so each column is about
   57px — and "& certifications" at a fixed 10px needs more than that.
   Fixed sizes cannot work across 320px to 767px; the row either
   overflows at the small end or looks starved at the large one.

   So the type is fluid. clamp() ties each size to the viewport between
   a floor that stays legible and a ceiling that stops it growing once
   there is room, and the disc scales with it so the proportion holds.
   Nothing is hard-coded per device.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .sohome-hero__signals {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(0.15rem, 1vw, 0.4rem);
    align-items: start;
  }

  .sohome-hero__signal {
    padding: 0;
    border: 0;
    background: none;
    gap: clamp(0.15rem, 0.8vw, 0.3rem);
    min-width: 0;
  }

  .sohome-hero__signal-icon {
    width: clamp(2rem, 9vw, 2.5rem);
    height: clamp(2rem, 9vw, 2.5rem);
    margin-bottom: 0.1rem;
  }

  .sohome-hero__signal-icon .icon {
    width: clamp(14px, 4.2vw, 18px);
    height: clamp(14px, 4.2vw, 18px);
  }

  .sohome-hero__signal-title {
    /* Floor 11px, not 10: the vw term alone hit 10px at 320px, and
       specification §21 asks for legible metadata rather than the
       smallest size that technically fits. Below the floor the text
       wraps to another line instead of shrinking further. */
    font-size: clamp(0.6875rem, 2.9vw, 0.8125rem);
    font-weight: var(--fw-semibold);
    line-height: 1.2;
    color: var(--color-white);
  }

  .sohome-hero__signal-sub {
    /* Floor 10px. The pure vw curve reached 8px on a 320px screen,
       which is below anything this theme sets anywhere and below what
       §21 allows. */
    font-size: clamp(0.625rem, 2.3vw, 0.6875rem);
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.7);
    /* NO HYPHENATION.
       It broke "Guides, tutorials" into "Guides, tu-" / "torials" and
       "certifications" into "certifica-" / "tions", which is harder to
       read than the wrap it was avoiding. Words wrap whole; a word
       genuinely longer than the column still breaks, because going
       outside the card would break the page's no-horizontal-scroll
       rule — but that is now the last resort rather than the first. */
    overflow-wrap: break-word;
    hyphens: manual;
  }

  /* The two CTAs are full-width and stacked, as drawn — side by side
     they were two half-width buttons whose labels wrapped. */
  .sohome-hero__ctas { flex-direction: column; gap: 0.5rem; }
  .sohome-hero__ctas .btn { width: 100%; min-height: 46px; font-size: 0.9375rem; }

  /* Search is one full-width field with the button inside the row; the
     select is the only thing that gives, since the placeholder already
     names what can be searched. */
  .sohome-hero__search { flex-wrap: wrap; }
  .sohome-hero__search-field { flex: 1 1 100%; min-height: 46px; }
}

/* ==================================================================
   Intent captions: fit the words instead of breaking them (8.120.0)

   "certifications" and "opportunities" were splitting a single letter
   onto a second line — "certification / s" — because break-word is
   allowed to cut anywhere once a word exceeds its column.

   Two changes, in this order, and no font shrinking:

   1. The row gets the card's full width. The hero card carries 1.1rem
      of side padding, which the intent row does not need: the discs
      are already inset by the column gaps, and 35px of padding across
      five columns is 7px per column — most of a character at this
      size. A negative margin gives it back.
   2. Words then wrap whole. break-word stays as the last resort so
      nothing can escape the card, but at the wider column it never
      fires: "certifications" at 10px is about 63px and the column is
      now ~73px on a 393px screen.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .sohome-hero__signals {
    margin-inline: -1.1rem;
    padding-inline: 0.35rem;
    gap: 0.2rem;
  }

  .sohome-hero__signal-sub {
    /* Whole words — but break-word stays as the last resort.
       At 393px the column is ~71px and "certifications" needs ~63px,
       so it never fires. At 360px the margin is a single pixel, and a
       word that does not fit has to break rather than push the card
       off the screen: the no-horizontal-scroll rule outranks a tidy
       word. */
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
  }
}

/* Under 380px the margin runs out, so the caption steps down one size
   rather than breaking a word. 9px is smaller than this theme sets
   anywhere else and is a deliberate trade against the alternative,
   which is "certification / s" on the narrowest phones. */
@media (max-width: 379px) {
  .sohome-hero__signal-sub { font-size: 0.6875rem; }
}

/* ==================================================================
   Passport capabilities (8.121.0)

   Four named capabilities under the description, as §13 lists them
   and the reference draws them: a mark, a title, and what it earns.
   ------------------------------------------------------------------ */
.sohome-passport-card__caps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.sohome-passport-cap {
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
  min-width: 0;
}

.sohome-passport-cap__icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 2px;
  border-radius: var(--radius-md);
  background: rgba(109, 94, 245, 0.1);
  color: var(--color-action);
}

.sohome-passport-cap__title {
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  color: var(--color-ink);
}

.sohome-passport-cap__sub {
  font-size: 0.6875rem;
  line-height: 1.25;
  color: var(--color-text-muted);
}

@media (max-width: 767px) {
  /* Two-up on a phone: four across gives each about 70px, which is
     narrower than "Reputation & endorsements" can be set at any size
     that stays readable. */
  .sohome-passport-card__caps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-2); }
}

/* ==================================================================
   Destination cards — desktop, to the reference (8.122.0)

   The reference sets each card as: mark and name on one line, the
   contents as a vertical list beneath, and the action at the foot.
   No pillar eyebrow above the name, and no supporting sentence except
   on Professionals — which is the one card defined by who is in it
   rather than what it contains, and so is the one card that needs a
   sentence at all.
   ------------------------------------------------------------------ */
@media (min-width: 768px) {
  /* The eyebrow comes off at every width now. It was carrying JOIN /
     DISCOVER / OPPORTUNITIES above each name — true, and already said
     by the journey the page no longer shows, so on this row it was a
     second label above a label. §23's rule still holds: the card's own
     name identifies it, colour only distinguishes. */
  .dest-card__pillar { display: none; }

  .dest-card { padding: var(--space-5) var(--space-4); gap: var(--space-3); }

  .dest-card__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.9375rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--dest-accent, var(--color-action));
  }

  /* The mark sits inside the heading line here, so the standalone
     sibling added for the phone layout is the one that hides. */
  .dest-card > .dest-card__icon { display: none; }

  .dest-card__title .dest-card__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--dest-accent, var(--color-action));
    color: #FFFFFF;
  }

  /* Contents stack, one per line, each with its own marker — the
     reference's vertical list rather than a wrapped run of terms. */
  .dest-card__items { display: grid; gap: 6px; font-size: 0.8125rem; }
  .dest-card__items li { display: flex; align-items: baseline; gap: var(--space-2); }
  .dest-card__items li::before {
    content: "";
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    border-radius: 2px;
    background: var(--dest-accent, var(--color-action));
  }
  .dest-card__items li + li::before { margin-inline: 0; }

  /* Only Professionals carries a sentence. */
  .dest-card__blurb { display: none; }
  .dest-card--people .dest-card__blurb { display: block; }

  .dest-card__chevron { display: none; }
}

/* ==================================================================
   Hero Quick start (8.123.0)

   The stat row's rules went in 8.126.0 and Trending's in 8.132.0, each
   with the markup it styled.
   ------------------------------------------------------------------ */

/* Quick start rows are links now, so they need the affordance and the
   target size of one. */
.onboard-card__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  color: var(--color-ink);
  text-decoration: none;
}

.onboard-card__text { flex: 1 1 auto; min-width: 0; }
.onboard-card__link:hover { color: var(--color-action); }
.onboard-card__link:hover .onboard-card__chevron { transform: translateX(2px); }

.onboard-card__chevron {
  flex: 0 0 auto;
  color: var(--color-border-control);
  transition: transform 120ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .onboard-card__chevron { transition: none; }
}

/* ==================================================================
   Explore — three panels (Technologies · Topics · Intent)

   Replaces the eight-card domain grid on this page only. The panel is
   a tinted surface rather than a bordered card, so the three read as
   one band split three ways rather than as three more cards after a
   page that already has twelve.
   ------------------------------------------------------------------ */

/* Nested in the feed column since 8.129.0, so the part's own section
   padding and container width are neutralised: the column already sets
   both, and leaving them on inset the band inside its own gutter. The
   wrappers stay in the markup because the part is a section in its own
   right and may yet be rendered standalone. */
.sohome__discovery-main .sohome-explore { padding-block: var(--space-6) 0; }

.sohome__discovery-main .sohome-explore > .container {
  max-width: none;
  padding-inline: 0;
}

/* The band sits in its own bordered surface, as the reference draws it
   — the three panels are tinted, so without an enclosing edge they
   float as three unrelated blocks on the page background. */
.sohome-explore > .container > * { min-width: 0; }

.sohome-explore__card {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

.sohome-explore__title {
  margin: 0 0 var(--space-4);
  font-size: 1.15rem;
  color: var(--color-ink-heading);
}

.sohome-explore__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.sohome-explore__grid > * { min-width: 0; }

/* One accent per panel, following the .dest-card--* token pattern and
   reusing its exact values: the reference colours Technologies, Topics
   and Intent the same way the destination row colours People, Community
   and Insights, and a second set of near-identical purples/greens on
   one page is how palettes drift. */
.explore-panel--tech   { --exp-accent: #4F46E5; --exp-tint: rgba(79, 70, 229, 0.05); --exp-chip: rgba(79, 70, 229, 0.08); }
.explore-panel--topics { --exp-accent: #15803D; --exp-tint: rgba(21, 128, 61, 0.05); --exp-chip: rgba(21, 128, 61, 0.08); }
.explore-panel--intent { --exp-accent: #1D4ED8; --exp-tint: rgba(29, 78, 216, 0.05); --exp-chip: rgba(29, 78, 216, 0.08); }

.explore-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--exp-tint, var(--color-surface));
}

.explore-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.explore-panel__title {
  margin: 0;
  font-size: 0.86rem;
  font-weight: var(--fw-semibold);
  color: var(--exp-accent, var(--color-ink-heading));
}

.explore-panel__all {
  flex: 0 0 auto;
  font-size: 0.72rem;
  color: var(--exp-accent, var(--color-action));
  text-decoration: none;
}

.explore-panel__all:hover,
.explore-panel__all:focus-visible { text-decoration: underline; }

/* Takes the trailing space the "More" link used to occupy (8.130.0),
   so panels with different chip counts still bottom out level. */
.explore-panel__chips {
  list-style: none;
  margin: 0 0 auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.explore-panel__chips a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 0.65rem;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: var(--exp-chip, var(--color-surface));
  font-size: 0.72rem;
  color: var(--color-ink);
  text-decoration: none;
}

.explore-panel__chips a:hover,
.explore-panel__chips a:focus-visible {
  border-color: var(--exp-accent, var(--color-action));
  color: var(--exp-accent, var(--color-action));
}

/* Intent is a fixed vocabulary of five, drawn as a single column so
   the three panels do not read as three interchangeable clouds. */
.explore-panel--intent .explore-panel__chips {
  flex-direction: column;
  align-items: flex-start;
}

/* Three across inside the feed column is tight, so the gap and the
   panel padding come in a step from the full-width version. */
.sohome__discovery-main .sohome-explore__grid { gap: var(--space-3); }
.sohome__discovery-main .explore-panel { padding: var(--space-4) var(--space-3); }

@media (max-width: 1023px) {
  .sohome-explore__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Same rule the domain band followed: this is a desktop surface, and
   the mobile specification does not carry it. */
@media (max-width: 767px) {
  .sohome-explore { display: none; }
}

/* ==================================================================
   Desktop parity pass — signed-out homepage against the reference.

   Every rule that removes something is scoped to >=1024px, because the
   phone and tablet layouts are governed by the mobile specification and
   the reference does not describe them. Rules that only STYLE new
   markup are unscoped; the markup itself only appears on this page.
   ------------------------------------------------------------------ */

/* Arrow inside the hero's primary CTA. */
.btn__arrow { margin-inline-start: 0.35rem; }


@media (min-width: 1024px) {
  /* The left column ends at the stats row. The four trust chips said
     what the value band says again at the foot of the page. */
  .sohome-hero__trust { display: none; }

  /* The panel goes title -> field; the sentence between them is not
     drawn. */
  .sohome-hero__module-sub { display: none; }

  /* No type filter inside the field. The select is hidden rather than
     removed, so it still submits its default and search behaviour is
     byte-for-byte what it was. */
  .sohome-hero__search-field .search-field__filter-wrap { display: none; }

  /* The commitments strip is BACK as of 8.145.0, inside .sohome-trust
     with a heading of its own. The 8.125.0 hide is gone rather than
     overridden — an override would leave two rules disagreeing about
     the same element for the next person to untangle. */
}

/* ---- Destination cards: per-item marks --------------------------- */

.dest-card__item-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dest-accent, var(--color-action));
}

.dest-card__item-label { min-width: 0; }

@media (min-width: 768px) {
  /* No accent bar across the card's top edge. The reference draws a
     single uniform hairline all the way round; the colour is carried
     by the mark and the name, which is what §23 asks of it. */
  .dest-card { border-top-width: 1px; border-top-color: var(--color-border); }

  /* The square bullet is replaced by the item's own mark. */
  .dest-card__items li::before { content: none; }
  .dest-card__items li { align-items: center; gap: var(--space-2); }

  /* Professionals: the avatar strip ends in the arrow, and that arrow
     is the card's action. The text CTA and the member count are not
     drawn on this card. */
  .dest-card__people {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
  }

  .dest-card--people .dest-card__cta,
  .dest-card__count { display: none; }
}

/* Desktop only.
 *
 * The phone layout (8.114.0) already ends each card with a decorative
 * chevron at the row's edge and carries the text CTA below, so on a
 * phone this arrow was a THIRD affordance on the Professionals card,
 * pointing where the other two already point — and it wrapped to its
 * own line, because .dest-card__people only becomes a flex row at 768px.
 *
 * It exists to replace the text CTA, which is hidden at 768px and up.
 * Below that the CTA is visible, so the arrow has nothing to replace. */
.dest-card__people-go {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  color: var(--dest-accent, var(--color-action));
  text-decoration: none;
  transition: transform 120ms ease;
}

@media (min-width: 768px) {
  .dest-card__people-go { display: inline-flex; }
}

.dest-card__people-go:hover { transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
  .dest-card__people-go { transition: none; }
}

/* ---- Feed cards -------------------------------------------------- */

/* Badge left, age right, on the card's top line. */
.feed-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.feed-card__head .feed-card__time {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* The domain line under the title is a chip here, not running text. */
.sohome-discovery-block .feed-card__meta {
  align-self: flex-start;
  margin: 0;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font-size: 0.6875rem;
  color: var(--color-ink-soft);
}

/* The reference's card is badge, title, chip, author. The excerpt is
   kept in the markup for the signed-in homepage and hidden here. */
.sohome-discovery-block .feed-card__excerpt { display: none; }

/* ==================================================================
   Desktop proportions, measured against the reference (8.131.0)

   The blocks were all present and in the right order; what was wrong
   was how wide and how tall each one ran. Every rule here is >=1024px.
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  /* ---- Hero column split --------------------------------------- */

  /* The reference splits the row roughly 28 / 44 / 22. It was running
     38 / 37 / 25, which took ~7% off the search panel — enough that
     five intent tiles had about 40px of text width apiece and
     "Connect" and "Advance" broke mid-word into "Connec / t" and
     "Advanc / e". The left column had the width to spare: it holds a
     three-line headline, two lines of copy and two buttons. */
  .sohome-hero__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6.3fr) minmax(0, 3.2fr);
  }

  /* ---- Intent tiles -------------------------------------------- */

  /* A label of five to seven characters must never hyphenate. With the
     column width above there is room for every one of them, so the
     break-word fallback that produced "Connec / t" comes off the
     title. The subtitle keeps it — it is a phrase, and a phrase may
     wrap. */
  .sohome-hero__signal-title { overflow-wrap: normal; }

  .sohome-hero__signal { padding: 0.7rem 0.4rem; }

  /* ---- Quick start --------------------------------------------- */

  /* 44px rows are §17's TOUCH minimum and correct on a phone. On a
     mouse-driven desktop they made a seven-row list 370px tall, which
     set the height of the whole hero row: the dark panel stretched to
     match it and gained 150px of empty indigo under the intent tiles.
     Scoped to pointer: fine, so a touch laptop or a landscape tablet
     keeps the larger target. */
  @media (pointer: fine) {
    .sohome-hero__aside .onboard-card__link { min-height: 36px; }
    .sohome-hero__aside .onboard-card__list { gap: 0.3rem; }
  }

  /* ---- Passport band: see the dedicated block at the foot ------ */

  /* ---- Feed ----------------------------------------------------- */

  /* THREE cards across, as drawn. auto-fit with a 240px floor gave two
     in a ~640px column, so six items filled three rows instead of two
     and pushed Explore and the value band down a screen. */
  .sohome-discovery-block .feed-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* One "View all" for the feed, at the foot where the reference puts
     it. The header carried a second one pointing at the same page. */
  .sohome-discovery-block .feed__all { display: none; }
}

/* The domain chip under the title, stated with enough specificity to
   beat the base .feed-card__meta rule wherever the sheets land. */
.sohome-discovery-block .feed-card .feed-card__meta {
  display: inline-block;
  align-self: flex-start;
  width: auto;
  margin: 0;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font-size: 0.6875rem;
  color: var(--color-ink-soft);
}


/* With Trending and the Quick start foot both gone (8.132.0), the three
   hero columns are shorter and the tallest of them decides the row's
   height. The grid still stretches, so the slack has to land somewhere
   deliberate: the intent row takes it, growing the tiles rather than
   leaving a band of empty indigo under them the way the panel did
   before 8.131.0. */
@media (min-width: 1024px) {
  .sohome-hero__module .sohome-hero__signals { flex: 1 1 auto; }
}


/* ==================================================================
   Desktop hero and Quick start type (8.124.0)

   RESTORED IN 8.141.0. An index-based deletion in 8.137.0 cut away
   this block's `@media (min-width: 1024px) {` opening and left its
   rules at the top level, where they applied at EVERY width. The one
   that did the damage was `.sohome-hero__module { padding: 1.35rem }`,
   which re-imposed on a phone the padding the mobile rules explicitly
   remove — so the search field and the intent row sat inset inside the
   dark card while the CTAs above them ran its full width. The stray
   `}` this left behind is now the block's own closing brace again.
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .sohome-hero__subheading {
    font-size: 0.82rem;
    line-height: 1.6;
    margin-bottom: 1.15rem;
  }

  .sohome-hero__ctas { margin-bottom: 0; }

  .sohome-hero__ctas .btn {
    font-size: 0.8rem;
    padding-block: 0.55rem;
  }

  /* Panel copy: the title is a question set at 15px, not a 17px
     heading — the search field below it is the panel's subject and
     should not be the second thing the eye lands on. */
  .sohome-hero__module { padding: 1.35rem; }

  .sohome-hero__module-title { font-size: 0.95rem; }

  /* All white. The accent split coloured the last word, which read as
     a link inside a heading that is not one. */
  .sohome-hero__module-title-accent { color: inherit; }

  /* Quick start: ~24px rows, as drawn.
     8.131.0 brought these from 44px to 36px to stop the card setting
     the hero's height. The reference is tighter still — a 20px mark, a
     12px label and about 3px between rows. 24px is a small pointer
     target, which is why this stays inside (pointer: fine): a touch
     device at this width keeps the 44px rows. */
  @media (pointer: fine) {
    .sohome-hero__aside .onboard-card__link { min-height: 24px; }
    .sohome-hero__aside .onboard-card__list { gap: 0.2rem; }

    .sohome-hero__aside .onboard-card__icon {
      width: 1.3rem;
      height: 1.3rem;
    }

    .sohome-hero__aside .onboard-card__icon .icon {
      width: 0.7rem;
      height: 0.7rem;
    }
  }
}

/* Connect's mark was #C2410C — DARKER than Solve's #EA580C beside it,
   so the row read as two browns rather than the reference's orange
   then amber. Amber restores the step. */
.sohome-hero__signal--connect .sohome-hero__signal-icon { background: #F59E0B; }

/* ==================================================================
   Explore panels — measured off the close-up (8.135.0)
   ------------------------------------------------------------------ */

.explore-panel { position: relative; overflow: hidden; }

/* Bottom-right, behind the chips, bleeding off the panel's corner as
   drawn. pointer-events: none so it never eats a chip's click. */
.explore-panel__art {
  position: absolute;
  right: -0.4rem;
  bottom: -0.5rem;
  display: block;
  width: 44%;
  max-width: 140px;
  pointer-events: none;
  user-select: none;
}

/* The inlined <svg> carries a viewBox and no intrinsic size, so it
   resolves to 100% of the span. Stated rather than assumed — this is
   the same trap jdev_svg()'s default `icon` class exists to close. */
.explore-panel__art svg {
  display: block;
  width: 100%;
  height: auto;
}

/* The chips are held clear of the art by a measure, not by wrapping —
   a long term name would otherwise run under the illustration. */
.explore-panel__chips { max-width: 60%; }

/* Intent is five short labels in one column against a larger target,
   so it splits nearer the middle. */
.explore-panel--intent .explore-panel__art { width: 52%; max-width: 160px; }
.explore-panel--intent .explore-panel__chips { max-width: 46%; }

/* Chips: a tinted fill with no visible edge until hover. The 1px
   transparent border is kept so the hover state does not shift the
   chip by a pixel in each direction. */
.explore-panel__chips a { padding: 0 0.7rem; min-height: 26px; }

@media (max-width: 767px) {
  /* The band is hidden below 768px anyway; this keeps the art from
     being computed if that ever changes. */
  .explore-panel__art { display: none; }
  .explore-panel__chips { max-width: none; }
}

/* ==================================================================
   Passport band — sized against the band, not the root (8.137.0)

   WHY THE BAND WAS TOO TALL

   8.134.0 read the reference's proportions correctly and then set them
   in rem. The reference is a full-width band whose every dimension is a
   RATIO of its own width — the art is 15% of the band, the heading is
   1.5% of it, the marks 3.5%. In rem those ratios only hold at one
   viewport. Narrower than that and the art stayed 200px while the band
   narrowed around it, so the band grew taller relative to its width
   exactly as the reference says it should not.

   Everything below is in cqw against the band itself, which is what
   makes the ratios hold at every width. Values are clamped so the type
   stays legible on a 1024px screen and does not run away on a 2560px
   one. The rem declarations before each clamp are the fallback for a
   browser without container queries — they are the 1390px values, which
   is where the band spends most of its life.
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  /* The container is declared on the WRAPPER, not on the card.
     An element cannot resolve its own cqw against itself — the card's
     padding, column widths and gaps would fall back to the viewport —
     so the query container has to be one level up. The wrapper's
     inline size is the card's, the card being a block that fills it. */
  .sohome-passport-standalone > .container {
    container-type: inline-size;
    container-name: passport;
  }

  .sohome-passport-card--standalone {
    display: grid;
    grid-template-columns: auto minmax(0, 28cqw) minmax(0, 1fr);
    align-items: center;
    column-gap: 2.4cqw;
    /* The base card is a flex row with gap: 1rem. As a grid that gap
       became a ROW gap, adding 16px between the heading and each
       paragraph on top of the margins set below — a quiet 32px of
       height in a band whose whole complaint was height. */
    row-gap: 0;
    padding: 2.3cqw 2.6cqw;
    background: #FAFAFE;
    border: 1px solid var(--color-border);
  }

  /* 15% wide and 11.85% tall — in the reference the art is exactly the
     height of the copy beside it, which is what sets the band's height.
     aspect-ratio keeps that true as the width clamps. */
  .sohome-passport-card--standalone.sohome-passport-card .sohome-passport-card__art {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: center;
    width: clamp(7.5rem, 15cqw, 13rem);
    height: auto;
  }

  .sohome-passport-card--standalone .sohome-passport-card__body { display: contents; }

  .sohome-passport-card--standalone .sohome-passport-card__title,
  .sohome-passport-card--standalone .sohome-passport-card__tagline { grid-column: 2; }

  .sohome-passport-card--standalone .sohome-passport-card__title {
    grid-row: 1;
    align-self: end;
    font-size: clamp(1rem, 1.5cqw, 1.35rem);
    font-weight: var(--fw-bold);
    letter-spacing: normal;
    /* Title case, not caps (8.143.0). At 1.3rem an all-caps line of
       twenty characters is a banner; sentence case at the same size
       reads as a heading, which is what it is. */
    text-transform: none;
    /* #4F46E5, not --color-primary (#6D5EF5). The band's heading,
       marks and button are all the deeper indigo in the reference; the
       lighter primary is the hero's CTA colour and reads washed out
       against a near-white surface at this size. */
    color: #4F46E5;
    margin: 0 0 0.9cqw;
  }

  .sohome-passport-card--standalone .sohome-passport-card__tagline {
    grid-row: 2;
    font-size: clamp(0.8rem, 1.16cqw, 1rem);
    line-height: 1.5;
    color: var(--color-ink-soft);
    margin: 0;
  }

  .sohome-passport-card--standalone .sohome-passport-card__tagline--second {
    grid-row: 3;
    align-self: start;
    margin-top: 0.9cqw;
  }

  /* ---- The panel ------------------------------------------------ */

  .sohome-passport-card--standalone .sohome-passport-card__panel {
    grid-column: 3;
    grid-row: 1 / span 3;
    align-self: center;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 1.1cqw;
    row-gap: 2.6cqw;
  }

  .sohome-passport-card--standalone .sohome-passport-card__caps { display: contents; }

  .sohome-passport-card--standalone .sohome-passport-cap {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    text-align: start;
    column-gap: 0.9cqw;
    row-gap: 0.15rem;
  }

  .sohome-passport-card--standalone .sohome-passport-cap__icon {
    grid-row: 1 / span 2;
    margin-bottom: 0;
    width: clamp(2.2rem, 3.47cqw, 3rem);
    height: clamp(2.2rem, 3.47cqw, 3rem);
    border-radius: 0.8cqw;
    background: rgba(79, 70, 229, 0.09);
    color: #4F46E5;
  }

  .sohome-passport-card--standalone .sohome-passport-cap__icon .icon {
    width: 48%;
    height: 48%;
  }

  .sohome-passport-card--standalone .sohome-passport-cap__title {
    font-size: clamp(0.72rem, 0.98cqw, 0.88rem);
    font-weight: var(--fw-bold);
    line-height: 1.3;
    color: var(--color-ink-heading);
  }

  .sohome-passport-card--standalone .sohome-passport-cap__sub {
    font-size: clamp(0.68rem, 0.92cqw, 0.82rem);
    line-height: 1.3;
    color: var(--color-ink-soft);
  }

  /* Row two, column three. The empty cell beside it is deliberate. */
  .sohome-passport-card--standalone .sohome-passport-card__cta {
    grid-column: 3;
    grid-row: 2;
    align-self: center;
    justify-content: center;
    min-height: clamp(2.5rem, 3.93cqw, 3.4rem);
    padding-inline: 1.6cqw;
    font-size: clamp(0.8rem, 1.1cqw, 0.95rem);
    white-space: nowrap;
    /* Matches the heading and the marks. --color-primary is a step
       lighter and made the button read as a different family from the
       block it sits in. */
    background: #4F46E5;
    border-color: #4F46E5;
  }

  .sohome-passport-card--standalone .sohome-passport-card__cta:hover,
  .sohome-passport-card--standalone .sohome-passport-card__cta:focus-visible {
    background: var(--color-primary-deep);
    border-color: var(--color-primary-deep);
  }

}

/* ==================================================================
   Passport band — the PHONE layout, to its own wireframe (8.140.0)

   The desktop work from 8.134.0 onward never touched this breakpoint,
   so the phone kept the original card: a black sentence-case heading,
   capabilities two-by-two, the button flowing after the third of them
   at half width, and the card art last, beneath everything.

   The mobile wireframe is a different arrangement entirely — art and
   copy side by side at the top, the four capabilities in ONE row, and
   a full-width action under them. Same markup, different grid.
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .sohome-passport-card--standalone {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: 0.85rem;
    row-gap: 0;
    padding: 1rem;
  }

  .sohome-passport-card--standalone .sohome-passport-card__body { display: contents; }

  /* Art beside the copy, not under the whole card. It spans the three
     copy rows so the two blocks top-align. */
  .sohome-passport-card--standalone .sohome-passport-card__art {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: start;
    width: 5.75rem;
    height: auto;
  }

  .sohome-passport-card--standalone .sohome-passport-card__title,
  .sohome-passport-card--standalone .sohome-passport-card__tagline { grid-column: 2; }

  /* Uppercase indigo label, as on desktop and in the mobile wireframe.
     It was a 1rem black heading here, which made it the loudest thing
     in a card whose point is the four capabilities under it. */
  .sohome-passport-card--standalone .sohome-passport-card__title {
    grid-row: 1;
    font-size: 0.8rem;
    font-weight: var(--fw-bold);
    letter-spacing: normal;
    text-transform: none;
    color: #4F46E5;
    margin: 0 0 0.4rem;
  }

  .sohome-passport-card--standalone .sohome-passport-card__tagline {
    grid-row: 2;
    font-size: 0.78rem;
    line-height: 1.45;
    margin: 0;
  }

  .sohome-passport-card--standalone .sohome-passport-card__tagline--second {
    grid-row: 3;
    margin-top: 0.4rem;
  }

  /* Capabilities four across, action full width beneath. */
  .sohome-passport-card--standalone .sohome-passport-card__panel {
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 0.5rem;
    row-gap: 0.9rem;
  }

  .sohome-passport-card--standalone .sohome-passport-card__caps { display: contents; }

  .sohome-passport-card--standalone .sohome-passport-cap {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    gap: 0.25rem;
  }

  /* No tile behind the mark at this size. The wireframe draws bare
     glyphs, and a 28px lavender square under a 70px column is more
     chrome than label. */
  .sohome-passport-card--standalone .sohome-passport-cap__icon {
    width: auto;
    height: auto;
    margin-bottom: 0.1rem;
    border-radius: 0;
    background: none;
    color: #4F46E5;
  }

  .sohome-passport-card--standalone .sohome-passport-cap__icon .icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  .sohome-passport-card--standalone .sohome-passport-cap__title {
    font-size: 0.6875rem;
    font-weight: var(--fw-semibold);
    line-height: 1.25;
  }

  .sohome-passport-card--standalone .sohome-passport-cap__sub {
    font-size: 0.6875rem;
    line-height: 1.25;
  }

  .sohome-passport-card--standalone .sohome-passport-card__cta {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    justify-content: center;
    min-height: 2.75rem;
    font-size: 0.85rem;
    background: #4F46E5;
    border-color: #4F46E5;
  }
}

/* The ≤389px rule that stacked the card into a column is a rule for the
   old flex layout. The grid above already stacks what needs stacking,
   and flex-direction on a grid container does nothing but confuse the
   next person reading it. */
@media (max-width: 389px) {
  .sohome-passport-card--standalone {
    padding: 0.85rem;
    column-gap: 0.7rem;
  }

  /* Four 60px columns cannot hold "Reputation & endorsements". Two
     across is the honest fallback at this width. */
  .sohome-passport-card--standalone .sohome-passport-card__panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sohome-passport-card--standalone .sohome-passport-card__cta {
    grid-row: 3;
  }
}

/* ==================================================================
   Destination rows on a phone — the per-item marks come off (8.142.0)
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  /* 8.125.0 gave every content item its own mark for the DESKTOP
     reference, where the items are a vertical list and each mark sits
     at the head of its own line. It was never scoped, so it landed on
     the phone too — where the items are an INLINE run, and an
     inline-flex mark before each label gives the line one more place to
     break. That is the "icon at the end of one line, its word at the
     start of the next" fault: "Product updates" reading as a sparkle
     stranded after "Industry updates" with its words below.
     The phone wireframe draws no per-item marks at all. */
  .dest-card__item-icon { display: none; }

  /* Round marks, a step smaller, as the phone wireframe draws them.
     The 44px rounded square is the desktop row's shape and at this size
     it was setting the height of a row whose text is two lines. */
  .dest-card__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
  }

  .dest-card__icon .icon { width: 17px; height: 17px; }

  .dest-card { padding: 0.85rem 0.9rem; gap: 0.15rem; }

  .dest-card__title {
    font-size: 0.85rem;
    letter-spacing: 0.02em;
  }

  .dest-card__items {
    font-size: 0.78rem;
    line-height: 1.45;
  }

  .dest-card--people .dest-card__blurb {
    font-size: 0.78rem;
    line-height: 1.45;
  }

  .dest-card__cta a { font-size: 0.78rem; }
}

/* ==================================================================
   Section heading over the ecosystem row (8.143.0)
   ------------------------------------------------------------------ */
.sohome-destinations__title {
  margin: 0 0 var(--space-4);
  font-size: 1.15rem;
  color: var(--color-ink-heading);
}

@media (max-width: 767px) {
  .sohome-destinations__title {
    font-size: 1rem;
    margin-bottom: var(--space-3);
  }
}

/* ==================================================================
   Explore panel heading: dimension over question (8.143.0)
   ------------------------------------------------------------------ */
.explore-panel__heading {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.explore-panel__ask {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}

/* The head is baseline-aligned for a one-line title; with a second
   line under it the "View all" should sit against the title, not the
   question. */
.explore-panel__head { align-items: start; }
.explore-panel__all { margin-top: 1px; }

/* ==================================================================
   Quick start rows: the restrained hover (8.143.0)

   Border, icon tint and a 3px arrow shift — nothing dramatic, and all
   of it inside 150ms. The rows were links with no hover affordance at
   all beyond a colour change on the label.
   ------------------------------------------------------------------ */
.sohome-hero__aside .onboard-card__link {
  border-radius: var(--radius-md);
  padding-inline: 0.35rem;
  margin-inline: -0.35rem;
  transition: background-color 160ms ease, color 160ms ease;
}

.sohome-hero__aside .onboard-card__icon {
  transition: background-color 160ms ease, color 160ms ease;
}

.sohome-hero__aside .onboard-card__link:hover {
  background: var(--color-surface);
}

.sohome-hero__aside .onboard-card__link:hover .onboard-card__icon {
  background: var(--color-action);
  color: var(--color-white);
}

.onboard-card__link:hover .onboard-card__chevron { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .sohome-hero__aside .onboard-card__link,
  .sohome-hero__aside .onboard-card__icon { transition: none; }
}

/* ==================================================================
   Hero search suggestions (8.144.0)

   Same panel contract as the header's and the sidebar's — search.js
   clears the node to close it, so :empty IS the closed state and there
   is no class for four code paths to disagree about.

   Anchored to the search form rather than to the panel, so it opens
   over the intent row instead of pushing it down: a list that reflows
   the page under the cursor while someone is typing is worse than one
   that covers something.
   ------------------------------------------------------------------ */
.sohome-hero__search { position: relative; }

.sohome-hero__search-results {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  max-height: min(60vh, 420px);
  overflow-y: auto;
  /* The hero panel is dark; the results sheet is not, and inherits
     white text from it without this. */
  color: var(--color-ink);
  text-align: start;
}

.sohome-hero__search-results:empty { display: none; }

/* ==================================================================
   Hero panel: a connected-network backdrop (8.145.0)

   §3 asks the hero to say "connected enterprise technology" visually,
   subtly, without an illustration. Two radial gradients already tint
   the panel; this adds nodes and the lines between them as a repeating
   SVG mask at 4% opacity — no image request, no DOM, nothing to load.

   Kept under the existing gradients in the stack so it reads as
   texture rather than as a diagram. If it is visible enough to
   describe, it is too strong.
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .sohome-hero__module { position: relative; isolation: isolate; }

  .sohome-hero__module::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    opacity: 0.055;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1'%3E%3Cpath d='M20 40 90 20 160 60 120 130 40 120Z'/%3E%3Cpath d='M90 20 120 130M20 40 120 130M90 20 40 120M160 60 40 120'/%3E%3C/g%3E%3Cg fill='%23FFFFFF'%3E%3Ccircle cx='20' cy='40' r='3'/%3E%3Ccircle cx='90' cy='20' r='3'/%3E%3Ccircle cx='160' cy='60' r='3'/%3E%3Ccircle cx='120' cy='130' r='3'/%3E%3Ccircle cx='40' cy='120' r='3'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 180px 180px;
    pointer-events: none;
  }
}

/* ==================================================================
   Trust & transparency (8.145.0)

   §19 asks for the five commitments to be one named area rather than a
   loose strip. 8.125.0 hid them at desktop because the wireframe did
   not draw them — but the wireframe is not the authority on whether an
   enterprise platform states its commitments, and the review is
   explicit that this is what differentiates JDEVerse from a generic
   community.

   So they come back, with a heading, as the band between the benefits
   and the footer.
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .sohome-assure {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4) var(--space-6);
  }
}

.sohome-trust {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.sohome-trust__title {
  margin: 0 0 var(--space-4);
  font-size: 0.72rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}