/* Services hub (services.html, Notion P02). Loaded after service-page.css, which supplies the shared parts (hero grid,
   kickers, section heads, reveal, FAQ, help card, closing card). Everything here is the hub's own "depth" look:
   the Where-you-start ladder, the router, the package cards with layer slots, the coverage scan, the §4 matrix,
   add-ons and related links. Every class is prefixed sh-. Motion homes: see DESIGN-RULES.md §7. */

/* ---------- Hero ---------- */
/* Headline "Particle field": the whole headline in the BrandOS gradient, one still sweep across all its lines (an inline
   box with a sliced background). services-hub.js draws it again in a canvas as thousands of particles in the same colours:
   on load they fly in and assemble into the letters while the real text fades in; every 9s the letters burst apart into
   light and snap back; on mouse-over the particles part around the cursor and spring home. The real text is always
   underneath (screen readers read it); reduced motion: no canvas, just the gradient headline. */
.sh .sh-h1 { position: relative; }
.sh .sh-h1-in { position: relative; padding-bottom: .08em; color: transparent; -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #C4B5FD 0%, #A599F7 16.7%, #8D85F5 33.3%, #7869F5 50%, #747BF6 66.7%, #6488F7 83.3%, #5C9CFF 100%);
  -webkit-background-clip: text; background-clip: text; }
.sh-pf { position: absolute; left: -48px; top: -48px; z-index: 1; pointer-events: none; }

/* Where you start: a staircase of rungs that step down, deeper with each level */
.sh-ladder { position: relative; padding: 26px 26px 22px; border-radius: 22px;
  background: radial-gradient(120% 70% at 100% 0%, rgba(92,156,255,.12), transparent 60%), radial-gradient(90% 60% at 0% 100%, rgba(139,124,246,.14), transparent 65%), #121119;
  box-shadow: 0 0 0 1px var(--line-strong) inset, 0 40px 80px -46px rgba(0,0,0,.85); }
.sh-ladder-k { margin: 0 0 18px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.sh-steps { position: relative; padding-left: 30px; }
.sh-rail { position: absolute; left: 9px; top: 36px; bottom: 36px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(196,181,253,.14), rgba(139,124,246,.32) 60%, rgba(92,156,255,.45)); }
/* the sounder: a lit marker that travels down the rail to the rung being read */
.sh-sounder { position: absolute; left: 50%; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; opacity: 0;
  background: #FFFFFF; box-shadow: 0 0 0 4px rgba(139,124,246,.28), 0 0 14px rgba(139,124,246,.55); transition: top .9s var(--ease), opacity .45s; }
.sh-steps ol { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sh-rung { position: relative; }   /* one aligned column (no staircase), each rung tied to the rail by a node and a short connector */
.sh-rung::before { content: ""; position: absolute; left: -25px; top: 50%; z-index: 1; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  background: #121119; box-shadow: 0 0 0 1.5px rgba(196,181,253,.45); transition: background .45s var(--ease), box-shadow .45s var(--ease); }
.sh-rung::after { content: ""; position: absolute; left: -15px; top: 50%; width: 15px; height: 1px; background: rgba(196,181,253,.22); transition: background .45s var(--ease); }
.sh-rung.sh-lit::before, .sh-rung:hover::before { background: #FFFFFF; box-shadow: 0 0 0 4px rgba(139,124,246,.28), 0 0 14px rgba(139,124,246,.6); }   /* the white ball, like the travelling marker */
.sh-rung.sh-lit::after, .sh-rung:hover::after { background: linear-gradient(90deg, rgba(196,181,253,.9), rgba(196,181,253,.35)); }
main.sh .sh-rung > a, .sh-rung > button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 0; border-radius: 14px;
  font: inherit; text-align: left; color: inherit; text-decoration: none; cursor: pointer; background: rgba(255,255,255,.02);
  box-shadow: 0 0 0 1px var(--line) inset; transition: background .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease); }
.sh-rung.sh-lit > a, .sh-rung.sh-lit > button, main.sh .sh-rung > a:hover, .sh-rung > button:hover, main.sh .sh-rung > a:focus-visible, .sh-rung > button:focus-visible {
  background: radial-gradient(120% 140% at 0% 50%, rgba(139,124,246,.16), transparent 70%), rgba(255,255,255,.03);
  box-shadow: 0 0 0 1px rgba(196,181,253,.45) inset; transform: none; }
.sh-rn { flex: none; width: 24px; font: 500 12px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .04em; color: var(--lavender); transition: color .45s; }   /* plain numbers, no tile */
.sh-rung.sh-lit .sh-rn, .sh-rung:hover .sh-rn { color: #FFFFFF; }
/* the lit card "charges": light flows in from the connector on its left and spreads across the card while the ball
   rests there, its edge glows steadily, and it drains away when the ball moves on (no circling light) */
main.sh .sh-rung > a, .sh-rung > button { position: relative; }
main.sh .sh-rung > a::before, .sh-rung > button::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(139,124,246,.26), rgba(92,156,255,.08) 60%, transparent) -40% 50% / 0% 260% no-repeat;
  transition: opacity .5s var(--ease), background-size 1.4s cubic-bezier(.2, .7, .2, 1); }
main.sh .sh-rung.sh-lit > a::before, main.sh .sh-rung.sh-lit > button::before, main.sh .sh-rung > a:hover::before, main.sh .sh-rung > button:hover::before {
  opacity: 1; background-size: 260% 260%; }
main.sh .sh-rung.sh-lit > a, main.sh .sh-rung.sh-lit > button { box-shadow: 0 0 0 1px rgba(196,181,253,.5) inset, 0 0 22px -6px rgba(139,124,246,.45); }
/* every card comes alive as the ball arrives: a soft pop, then a sweep of light across its surface once */
main.sh .sh-rung > a::after, .sh-rung > button::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.10) 45%, rgba(196,181,253,.16) 50%, transparent 65%) 150% 0 / 250% 100% no-repeat; }
main.sh .sh-rung.sh-lit > a, main.sh .sh-rung.sh-lit > button { animation: shArrive .6s cubic-bezier(.34, 1.56, .64, 1); }
main.sh .sh-rung.sh-lit > a::after, main.sh .sh-rung.sh-lit > button::after { animation: shSweep 1s ease-out .1s both; }
@keyframes shArrive { 0% { transform: none; } 40% { transform: scale(1.025); } 100% { transform: none; } }
@keyframes shSweep { 0% { opacity: 1; background-position: 150% 0; } 90% { opacity: 1; } 100% { opacity: 0; background-position: -60% 0; } }
.sh-rb { display: grid; gap: 4px; min-width: 0; }
.sh-rname { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 16.5px; font-weight: 700; color: var(--ink); }
.sh-rline { font-size: 14px; line-height: 1.45; color: var(--muted); }
.sh-rtag { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lavender); }
.sh-free { display: inline-flex; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #8FE3B4; background: rgba(52,199,123,.10); box-shadow: 0 0 0 1px rgba(143,227,180,.25) inset; }
.sh-rec { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 2px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--ink);
  background: rgba(139,124,246,.14); box-shadow: 0 0 0 1px rgba(196,181,253,.35) inset; white-space: nowrap; }
.sh-rec-star { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #0F0F12; background: var(--btn-grad); }
.sh-rec-star svg { width: 9px; height: 9px; }
/* the ladder marks The OS with the star alone, just after its tag (no "Most recommended" pill there) */
.sh-rstar { display: grid; place-items: center; flex: none; width: 18px; height: 18px; margin-left: -4px; border-radius: 50%; color: #0F0F12; background: var(--btn-grad); }
.sh-rstar svg { width: 9px; height: 9px; }
.sh-ladder-foot { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }

/* ---------- §2 Three ways to run it (Notion change log 03 Nov) ---------- */
/* sub-heads sit directly below their H2 (§2, §4, §5) */
.tp-sec-head .sh-sub { margin: 16px 0 0; max-width: 62ch; font-size: 17px; line-height: 1.6; color: var(--muted); }
/* the router: one label, then one tile above each card at the card's width */
.sh-router-k { margin: 0 0 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--lavender); }
/* columns = tile + card; the card's six rows line up across the three columns (subgrid) */
.sh-pkgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; row-gap: 0; align-items: stretch; }
.sh-col { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; }
main.sh .sh-route { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 13px 16px; border-radius: 14px;
  font-size: 14.5px; line-height: 1.4; color: var(--ink-2); text-decoration: none; background: rgba(255,255,255,.02); box-shadow: 0 0 0 1px var(--line) inset;
  transition: background .3s, box-shadow .3s, color .3s; }
main.sh .sh-route b { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--lavender); }
main.sh .sh-route b span { transition: transform .3s var(--ease); }
main.sh .sh-route:hover, main.sh .sh-route:focus-visible { color: var(--ink); background: rgba(139,124,246,.08); box-shadow: 0 0 0 1px rgba(196,181,253,.4) inset; }
main.sh .sh-route:hover b { color: var(--ink); }
main.sh .sh-route:hover b span { transform: translateY(3px); }
.sh-pkg { position: relative; isolation: isolate; display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 18px; padding: 28px 26px 26px;
  border-radius: var(--radius); background: var(--bg-2); box-shadow: 0 0 0 1px var(--line) inset; transition: translate .35s var(--ease), box-shadow .35s var(--ease); }
.sh-pkg:hover, .sh-pkg.sh-hint { translate: 0 -4px; box-shadow: 0 0 0 1px rgba(196,181,253,.45) inset; }   /* no glow under the card (it leaked onto the link below) */
/* The OS: a 1px gradient border that follows the rounded corners and fades down the sides, and a soft glow behind its top edge only */
.sh-feat { box-shadow: none; background: radial-gradient(90% 40% at 50% 0%, rgba(139,124,246,.12), transparent 70%), var(--bg-2); }
.sh-feat::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(180deg, rgba(212,200,255,.95), rgba(139,124,246,.55) 32%, rgba(92,156,255,.18) 70%, rgba(92,156,255,0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.sh-feat:hover, .sh-feat.sh-hint { box-shadow: none; }
.sh-glow { position: absolute; z-index: -1; left: 12%; right: 12%; top: -26px; height: 56px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(139,124,246,.45), rgba(92,156,255,.12) 60%, transparent); filter: blur(10px); }
/* the router's "ping": one ring that spreads out once when you jump to a card */
.sh-pkg.sh-ping::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: shPing 1.2s ease-out 1 both; }
@keyframes shPing { from { box-shadow: 0 0 0 0 rgba(139,124,246,.65); } to { box-shadow: 0 0 0 16px rgba(139,124,246,0); } }
.sh-pkg-head { min-width: 0; }
.sh-pkg-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.sh-pkg-top h3 { margin: 0; font-size: 26px; font-weight: 900; }
.sh-pkg-tag { margin: 6px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--lavender); }
.sh-pkg-promise { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; color: var(--ink); }
/* Runs on: chips under Includes, each with a one-line tooltip (hover, focus, tap) */
.sh-runs { min-width: 0; }
.sh-runs-k { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.sh-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sh-chips li { position: relative; }
.sh-chip { padding: 5px 10px; border: 0; border-radius: 999px; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .1em; cursor: help;
  color: var(--lavender); background: rgba(196,181,253,.08); box-shadow: 0 0 0 1px rgba(196,181,253,.24) inset; transition: background .2s, box-shadow .2s; }
.sh-chip:hover, .sh-chip:focus-visible { background: rgba(196,181,253,.16); box-shadow: 0 0 0 1px rgba(196,181,253,.5) inset; outline: none; }
.sh-chip.sh-off { color: #6E6C80; background: rgba(255,255,255,.02); box-shadow: 0 0 0 1px rgba(196,181,253,.10) inset; }   /* faint by colour, never opacity */
.sh-chip.sh-opp { color: #0F0F12; background: var(--btn-grad); box-shadow: none; }
.sh-chip-tip { position: absolute; left: 50%; bottom: calc(100% + 9px); z-index: 6; width: max-content; max-width: 230px; padding: 9px 12px; border-radius: 12px;
  font-size: 12.5px; font-weight: 500; line-height: 1.45; letter-spacing: 0; text-transform: none; color: var(--ink); background: #24232F;
  box-shadow: 0 0 0 1px var(--line-strong), 0 12px 28px rgba(0,0,0,.5); opacity: 0; visibility: hidden; transform: translate(-50%, 4px);
  transition: opacity .18s, transform .22s var(--ease), visibility 0s linear .22s; pointer-events: none; }
.sh-chips li:hover .sh-chip-tip, .sh-chip:focus-visible + .sh-chip-tip, .sh-chips li.sh-show .sh-chip-tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .18s, transform .22s var(--ease); }
.sh-best { margin: 0; font-size: 15px; color: var(--muted); }
.sh-best b { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.sh-inc { display: grid; align-content: start; gap: 9px; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--line); list-style: none; }
.sh-inc li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.sh-inc svg { flex: none; margin-top: 4px; color: var(--lavender); }
.sh-pkg-cta { align-self: end; justify-content: center; }
.sh-all { margin: 30px 0 0; text-align: center; }
/* Scorecard strip: rung 0 under the cards, not a fourth card (dashed edge + green "Free", like the free rung on the home page) */
.sh-strip { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 26px; padding: 24px 28px;
  border-radius: var(--radius); background: var(--bg-2); border: 1px dashed rgba(196,181,253,.32); }
.sh-strip-k { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--lavender); }
.sh-strip-q { margin: 8px 0 0; font-size: 22px; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; color: var(--ink); }
.sh-strip-l { margin: 6px 0 0; font-size: 15.5px; color: var(--muted); }
.sh-strip .btn { flex: none; }

/* ---------- §3 How it runs ---------- */
.sh-run { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: stretch; }
.sh-cov { display: flex; flex-direction: column; padding: 26px; border-radius: 22px;
  background: radial-gradient(120% 70% at 0% 0%, rgba(139,124,246,.14), transparent 60%), #121119; box-shadow: 0 0 0 1px var(--line-strong) inset; }
.sh-cov-k { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.sh-cov-grid { margin-top: 14px; }
.sh-cov-row { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.sh-cov-row > span { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--muted); }
.sh-cov-head { padding-top: 0; }
.sh-cov-head b { font-size: 13px; font-weight: 700; text-align: center; color: var(--ink-2); transition: color .4s; }
.sh-cov-row > i { justify-self: center; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(196,181,253,.2) inset; }
.sh-cov-row > i.sh-on { background: rgba(196,181,253,.38); box-shadow: none; transition: background .35s, transform .35s var(--ease), box-shadow .35s; }
/* Coverage scan: one package column at a time, its dots light top to bottom */
.sh-cov[data-scan="0"] .sh-cov-head b:nth-of-type(1), .sh-cov[data-scan="1"] .sh-cov-head b:nth-of-type(2), .sh-cov[data-scan="2"] .sh-cov-head b:nth-of-type(3) { color: #FFFFFF; }
.sh-cov[data-scan="0"] .sh-cov-row > i.sh-on:nth-of-type(1), .sh-cov[data-scan="1"] .sh-cov-row > i.sh-on:nth-of-type(2), .sh-cov[data-scan="2"] .sh-cov-row > i.sh-on:nth-of-type(3) {
  background: var(--lavender); transform: scale(1.18); box-shadow: 0 0 0 4px rgba(139,124,246,.18), 0 0 12px rgba(139,124,246,.45); transition-delay: calc(var(--r) * .09s); }
.sh-cov-cap { margin: auto 0 0; padding-top: 20px; font-size: 15.5px; color: var(--ink-2); }

/* ---------- §4 Matrix (anchor #matrix) ---------- */
.sh-mx-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sh-mx-state { margin: 0; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--muted);
  background: rgba(196,181,253,.06); box-shadow: 0 0 0 1px var(--line) inset; }
.sh-mx-all, .sh-mx-tabs button { padding: 10px 18px; border: 0; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  color: var(--ink-2); background: transparent; box-shadow: 0 0 0 1px var(--line-strong) inset; transition: color .25s, box-shadow .25s, background .25s; }
.sh-mx-all:hover, .sh-mx-tabs button:hover { color: var(--ink); box-shadow: 0 0 0 1px var(--violet) inset; }
.sh-mx-tabs { display: none; gap: 6px; margin-bottom: 12px; }
.sh-mx-tabs button[aria-selected="true"] { color: var(--ink); background: rgba(139,124,246,.16); box-shadow: 0 0 0 1px rgba(196,181,253,.5) inset; }
.sh-mx { padding: 0 18px 10px; border-radius: 22px; background: radial-gradient(70% 30% at 62% 0%, rgba(139,124,246,.10), transparent 70%), var(--bg-2);
  box-shadow: 0 0 0 1px var(--line-strong) inset, 0 30px 60px -44px rgba(0,0,0,.8); }
.sh-mx-row { display: grid; grid-template-columns: minmax(0, 1.9fr) repeat(3, minmax(0, 1fr)); gap: 8px; align-items: center; padding: 12px 8px; border-bottom: 1px solid var(--line); }
.sh-mx-group:last-child > .sh-mx-row:last-child, .sh-mx-group:last-child:not(:has(.sh-mx-item:not([hidden]))) { border-bottom: 0; }
.sh-mx-head { position: sticky; top: var(--sh-top, 84px); z-index: 3; margin: 0 -18px; padding: 18px 26px 12px; border-radius: 22px 22px 0 0;
  background: linear-gradient(90deg, rgba(196,181,253,.13), rgba(139,124,246,.07) 50%, rgba(92,156,255,.13)), #17161E;   /* a light brand gradient across the header (opaque: it stays put while the table scrolls) */
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); border-bottom-color: rgba(196,181,253,.28); }
.sh-mx-head .sh-os { position: relative; color: var(--lavender); }
.sh-mx-head .sh-os::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 64px; margin-left: -32px; height: 2px; border-radius: 2px; background: var(--grad); }
.sh-c { display: flex; justify-content: center; min-width: 0; text-align: center; }
.sh-mx-band { cursor: pointer; border-radius: 10px; transition: background .2s; }
.sh-mx-band:hover, .sh-mx-band[aria-expanded="true"] { background: rgba(139,124,246,.05); }
.sh-mx-bl { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.sh-mx-bl b { font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--ink); }
.sh-mx-bl span { color: var(--muted); }
.sh-chev { flex: none; color: var(--lavender); transition: transform .3s var(--ease); }
.sh-mx-band[aria-expanded="true"] .sh-chev { transform: rotate(90deg); }
.sh-mx-item[hidden] { display: none; }
/* Rows cascade in when a band opens */
.sh-mx-item.sh-new { animation: shCascade .45s var(--ease) calc(var(--k) * 45ms) both; }
@keyframes shCascade { from { opacity: 0; transform: translateY(-6px); } }
.sh-mx-il { display: flex; align-items: flex-start; gap: 8px; padding-left: 24px; font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.sh-info { flex: none; width: 18px; height: 18px; margin-top: 1px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: transparent;
  font: italic 700 11.5px/18px Georgia, serif; color: var(--faint); box-shadow: 0 0 0 1px var(--line-strong) inset; transition: color .2s, box-shadow .2s; }
.sh-info:hover, .sh-info[aria-expanded="true"] { color: var(--lavender); box-shadow: 0 0 0 1px var(--violet) inset; }
.sh-mx-tip { grid-column: 1 / -1; max-width: 72ch; margin: 2px 0 2px 24px; padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; color: var(--ink-2);
  background: var(--surface); box-shadow: 0 0 0 1px var(--line) inset; }
.sh-mx-tip[hidden] { display: none; }
.sh-pill { position: relative; display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.35; white-space: nowrap; }
/* calm cell words (user: the fills glowed too much): a light tint and a fine outline in the word's own colour */
.sh-p-inc { color: #A4D9BC; background: rgba(52,199,123,.06); box-shadow: 0 0 0 1px rgba(143,227,180,.22) inset; }
.sh-p-adv { color: #C3B8F2; background: rgba(139,124,246,.08); box-shadow: 0 0 0 1px rgba(196,181,253,.26) inset; }
.sh-p-plt { color: var(--ink-2); background: rgba(214,214,222,.09); box-shadow: 0 0 0 1px rgba(214,214,222,.16) inset; }
.sh-p-add { color: #DDBF92; background: rgba(245,183,92,.06); box-shadow: 0 0 0 1px rgba(242,201,138,.22) inset; }
.sh-p-ptr { padding: 3px 10px; color: var(--faint); border: 1px dashed var(--line-strong); }
.sh-mx .sh-pill { cursor: help; }
.sh-mx .sh-pill:hover::after, .sh-mx .sh-pill:focus-visible::after, .sh-mx .sh-pill.sh-show::after {
  content: attr(data-leg); position: absolute; left: 0; top: calc(100% + 8px); z-index: 5; width: 220px; padding: 9px 12px; border-radius: 12px; white-space: normal;
  font-size: 12.5px; font-weight: 500; line-height: 1.45; color: var(--ink); background: var(--surface-2); box-shadow: 0 0 0 1px var(--line-strong), 0 12px 28px rgba(0,0,0,.45); }
.sh-mx-band:focus-visible, .sh-info:focus-visible, .sh-pill:focus-visible, .sh-mx-all:focus-visible, .sh-mx-tabs button:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
/* The OS: a lit column, a soft violet band the full height of the table with a gradient line on top */
.sh-mx-row > .sh-c[data-c="1"] { align-self: stretch; align-items: center; margin: -12px 0; padding: 12px 0; background: rgba(139,124,246,.065); }
.sh-mx-head > .sh-c[data-c="1"] { margin-top: -18px; padding-top: 18px; border-radius: 14px 14px 0 0;
  background: linear-gradient(180deg, rgba(139,124,246,.16), rgba(139,124,246,.065)); box-shadow: inset 0 2px 0 0 #8B7CF6; }
.sh-mx-group:last-child > .sh-mx-row:last-child > .sh-c[data-c="1"], .sh-mx-group:last-child:not(:has(.sh-mx-item:not([hidden]))) > .sh-mx-band > .sh-c[data-c="1"] { border-radius: 0 0 14px 14px; }
/* band rows: bold code, quiet description, chevron in a small circle */
.sh-chev { box-sizing: content-box; padding: 4px; border-radius: 50%; background: rgba(196,181,253,.08); box-shadow: 0 0 0 1px rgba(196,181,253,.2) inset; }
.sh-mx-band:hover .sh-chev, .sh-mx-band[aria-expanded="true"] .sh-chev { background: rgba(196,181,253,.16); }
/* opened rows: indented under their band, with a fine guide line */
.sh-mx-item .sh-mx-il { position: relative; padding-left: 34px; }
.sh-mx-item .sh-mx-il::before { content: ""; position: absolute; left: 14px; top: -12px; bottom: -12px; width: 1px; background: rgba(196,181,253,.18); }
.sh-mx .sh-pill:hover::after, .sh-mx .sh-pill:focus-visible::after, .sh-mx .sh-pill.sh-show::after { left: 50%; transform: translateX(-50%); }
.sh-mx-foot { max-width: 72ch; margin: 20px 0 0; font-size: 14.5px; color: var(--muted); }

/* ---------- §5 Add-ons ---------- */
/* the tier pages' tile cards (service-page.css / .js); the Notion lines start lower-case, so capitalise the first letter */
.sh .tp-tile p::first-letter { text-transform: uppercase; }

/* ---------- §7 Where to look next ---------- */
.sh-rels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
main.sh .sh-rel { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 100%; padding: 20px 22px; border-radius: var(--radius);
  color: var(--ink); text-decoration: none; background: var(--bg-2); box-shadow: 0 0 0 1px var(--line) inset; transition: box-shadow .3s, translate .3s var(--ease); }
.sh-rel > span { display: grid; gap: 4px; }
.sh-rel b { font-size: 18px; font-weight: 700; }
.sh-rel small { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--lavender); }
.sh-rel .arrow { color: var(--lavender); transition: transform .3s var(--ease); }
main.sh .sh-rel:hover { color: var(--ink); translate: 0 -3px; box-shadow: 0 0 0 1px rgba(196,181,253,.4) inset; }
main.sh .sh-rel:hover .arrow { transform: translateX(4px); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .sh-ladder { margin-top: 8px; }
  .sh-pkgs { grid-template-columns: 1fr; row-gap: 30px; max-width: 580px; margin-inline: auto; }
  .sh-col, .sh-pkg { display: flex; flex-direction: column; }
  .sh-pkg { gap: 18px; }
  .sh-router-k { text-align: center; }
  .sh-run { grid-template-columns: 1fr; }
  .sh-rels { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sh-strip { flex-direction: column; align-items: stretch; text-align: center; }
  .sh-strip-k { justify-content: center; }
    .sh-mx-bar { flex-wrap: wrap; }
  .sh-mx-tabs { display: flex; }
  .sh-mx-tabs button { flex: 1; padding: 9px 8px; }
  .sh-mx { padding: 0 10px 6px; }
  .sh-mx-row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); padding: 11px 4px; }
  .sh-mx[data-col="0"] .sh-c:not([data-c="0"]), .sh-mx[data-col="1"] .sh-c:not([data-c="1"]), .sh-mx[data-col="2"] .sh-c:not([data-c="2"]) { display: none; }
  .sh-mx-head .sh-os::after { display: none; }
  .sh-mx-bl { flex-wrap: wrap; gap: 2px 8px; }
  .sh-mx-bl span { flex-basis: 100%; padding-left: 22px; font-size: 13.5px; }   /* the band's description on its own line under the code */
  .sh-mx-il { padding-left: 10px; }
  .sh-mx-tip { margin-left: 10px; }
  .sh-mx .sh-pill:hover::after, .sh-mx .sh-pill:focus-visible::after, .sh-mx .sh-pill.sh-show::after { left: auto; right: 0; width: 190px; transform: none; }
}