/* Built-in Services: shared by the hub (/features/built-in-services) and the ten
   per-service pages under it. Moved out of the hub template's inline <style>
   blocks unchanged; the pa- vocabulary and the --yb-* token bridge live here. */

  /* Clear the fixed public nav (same contract as about_public.html). */
  .features-host { position: relative; padding-top: var(--nav-height, 64px); overflow-x: hidden; }
  /* Living nebula backdrop — same vocabulary as home/about. The .nebula-blob
     rules + drift keyframes come from home.css (loaded above); only the
     container lives here. Viewport-fixed so the glow fills every scroll
     position. --nebula-alpha: light mode runs the mist softer without
     fighting the entrance animation's forwards fill. */
  .features-nebula {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    --nebula-alpha: 1;
    opacity: var(--nebula-alpha);
    animation: features-nebula-in 1.4s ease both;
  }
  /* Blur on each blob, NOT the container — a container filter flattens the
     group and forces viewport-sized re-blurs every drift frame. Redundant
     defense for a stale-cached home.css (mirrors about_public.html). */
  .features-nebula .nebula-blob { filter: blur(40px); }
  [data-theme="light"] .features-nebula { --nebula-alpha: 0.55; }
  @keyframes features-nebula-in {
    from { opacity: 0; }
    to   { opacity: var(--nebula-alpha, 1); }
  }
  /* Power saver — mirror home.css's page-hidden contract for our blobs. */
  .page-hidden .features-nebula .nebula-blob { animation-play-state: paused; }
  /* Page content paints above the backdrop. */
  .features-host > :not(.features-nebula) { position: relative; z-index: 1; }
  /* Token bridge: the mockup fragments use --yb-* names; map them onto
     tokens.css so the page follows the site theme (incl. light mode). */
  .pa-root {
    --yb-void: var(--void); --yb-abyss: var(--abyss); --yb-depth: var(--depth);
    --yb-border: var(--border); --yb-border2: var(--border2);
    --yb-text: var(--text); --yb-muted: var(--muted); --yb-muted2: var(--muted2);
    --yb-gold: var(--gold); --yb-gold-light: var(--gold-light);
    --yb-gold-dim: var(--gold-dim); --yb-gold-bg: var(--gold-bg);
    --yb-cyan: var(--cyan); --yb-cyan-dim: var(--cyan-dim); --yb-cyan-bg: var(--cyan-bg);
    --yb-overlay-soft: var(--overlay-soft);
    --disp: var(--font-display); --body: var(--font-body); --mono: var(--font-mono);
  }

/* ===== Built-in Services page v2 (pa-) ===== */
.pa-root { font-family: var(--body); color: var(--yb-text); background: transparent; padding-bottom: 5.5rem; }
.pa-wrap { max-width: 1240px; margin: 0 auto; padding: 0 2rem; }
.pa-a { text-decoration: none; color: inherit; }

/* ---- Hero ---- */
.pa-hero { padding: 4.75rem 0 2.25rem; }
.pa-eyebrow { font-family: var(--disp); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--yb-cyan); margin-bottom: 1.1rem; }
.pa-eyebrow .pa-crumb-sep { color: var(--yb-muted2); margin: 0 0.35em; }
.pa-title { font-family: var(--disp); font-weight: 700; font-size: 3.35rem; line-height: 1.08; letter-spacing: -0.01em; max-width: 56rem; margin-bottom: 1.15rem; }
.pa-gword { position: relative; display: inline-block; background: linear-gradient(90deg, var(--yb-gold), var(--yb-gold-light)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pa-gword::after { content: ''; position: absolute; left: 0.04em; right: 0.04em; bottom: 0.03em; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--yb-gold), var(--yb-gold-light)); opacity: 0.85; }
.pa-lede { font-size: 1.07rem; line-height: 1.68; color: var(--yb-muted); max-width: 44rem; margin-bottom: 1.75rem; }
.pa-cta-row { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.6rem; }
.pa-btn { display: inline-block; font-family: var(--body); font-weight: 600; font-size: 0.92rem; padding: 0.68rem 1.5rem; text-align: center; border-radius: 6px; background: #2563eb; color: #fff; text-decoration: none; transition: filter 0.15s ease, transform 0.15s ease; }
.pa-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
/* The service hero has one button now; a little larger than the base size,
   its own width. */
.pa-cta-row .pa-btn { padding: 0.85rem 2.2rem; font-size: 0.98rem; }
.pa-btn-ghost { display: inline-block; font-weight: 600; font-size: 0.92rem; padding: 0.68rem 1.5rem; border-radius: 6px; background: transparent; color: var(--yb-muted); border: 1px solid var(--yb-border); text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease; }
.pa-btn-ghost:hover { border-color: var(--yb-border2); color: var(--yb-text); }
.pa-pills { display: flex; gap: 0.55rem; flex-wrap: wrap; }
.pa-pill { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--yb-muted); padding: 0.32rem 0.85rem; border: 1px solid var(--yb-border); border-radius: 999px; background: var(--yb-overlay-soft); }
.pa-pill-hot { color: var(--yb-gold-light); border-color: var(--yb-gold-dim); background: var(--yb-gold-bg); }

/* ---- Group dividers ---- */
.pa-divider { display: flex; align-items: center; gap: 1rem; margin: 3.25rem 0 1.4rem; }
.pa-divider-label { font-family: var(--disp); font-weight: 600; font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--yb-cyan); white-space: nowrap; }
.pa-divider-line { flex: 1; height: 1px; background: var(--yb-border); }

/* ---- App-style switcher: rail + stage ---- */
.pa-app { display: grid; grid-template-columns: 280px 1fr; gap: 1.2rem; align-items: stretch; }
.pa-rail { display: flex; flex-direction: column; gap: 0.3rem; background: var(--yb-abyss); border: 1px solid var(--yb-border); border-radius: 12px; padding: 0.6rem; }
.pa-rail-item { display: flex; align-items: center; gap: 0.65rem; width: 100%; padding: 0.5rem 0.6rem; border-radius: 9px; border: 1px solid transparent; background: transparent; cursor: pointer; text-align: left; color: var(--yb-muted); font-family: var(--body); transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.pa-rail-item:hover { background: var(--yb-overlay-soft); color: var(--yb-text); }
.pa-rail-item.pa-on { background: var(--yb-gold-bg); border-color: var(--yb-gold-dim); color: var(--yb-text); }
.pa-rail-ic { width: 30px; height: 30px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--yb-cyan-bg); border: 1px solid var(--yb-cyan-dim); color: var(--yb-cyan); }
.pa-rail-ic svg { width: 15px; height: 15px; }
.pa-rail-item.pa-flag .pa-rail-ic { background: var(--yb-gold-bg); border-color: var(--yb-gold-dim); color: var(--yb-gold-light); }
.pa-rail-txt { display: block; flex: 1; min-width: 0; }
.pa-rail-name { font-family: var(--disp); font-weight: 600; font-size: 0.85rem; line-height: 1.15; }
.pa-rail-hook { font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.06em; color: var(--yb-muted2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.pa-rail-idx { margin-left: auto; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; color: var(--yb-muted2); flex: none; align-self: flex-start; padding-top: 3px; }
.pa-rail-item.pa-flag .pa-rail-idx { color: var(--yb-gold-light); }
.pa-rail-foot { margin-top: auto; padding: 0.7rem 0.6rem 0.25rem; font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.1em; color: var(--yb-muted2); line-height: 1.8; border-top: 1px solid var(--yb-border); }
.pa-stage { background: var(--yb-abyss); border: 1px solid var(--yb-border); border-radius: 12px; padding: 2.1rem 2.3rem; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.pa-panel { display: none; grid-template-columns: 1.05fr 0.95fr; gap: 2.4rem; align-items: center; }
.pa-panel.pa-on { display: grid; }
.pa-sec-copy { min-width: 0; }
@media (max-width: 940px) { .pa-app { grid-template-columns: 1fr; } .pa-panel.pa-on { grid-template-columns: 1fr; } }

/* ---- Copy side internals ---- */
.pa-svc-head { display: flex; align-items: center; gap: 0.95rem; margin-bottom: 1rem; }
.pa-svc-icon { width: 42px; height: 42px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--yb-cyan-bg); border: 1px solid var(--yb-cyan-dim); color: var(--yb-cyan); }
.pa-svc-icon-gold { background: var(--yb-gold-bg); border-color: var(--yb-gold-dim); color: var(--yb-gold-light); }
.pa-svc-icon .pa-ic { width: 22px; height: 22px; }
.pa-svc-name { font-family: var(--disp); font-weight: 600; font-size: 1.5rem; line-height: 1.15; }
.pa-badge { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--yb-gold-light); background: var(--yb-gold-bg); border: 1px solid var(--yb-gold-dim); border-radius: 3px; padding: 3px 8px; box-shadow: 2px 2px 0 rgba(59,130,246,0.16); white-space: nowrap; }
.pa-idx { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--yb-muted2); margin-left: auto; }
.pa-val { font-size: 0.97rem; line-height: 1.66; color: var(--yb-muted); margin-bottom: 1.3rem; }
.pa-caps { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1.5rem; margin-bottom: 1.35rem; }
.pa-cap { position: relative; padding-left: 1.15rem; font-size: 0.88rem; line-height: 1.5; color: var(--yb-text); }
.pa-cap::before { content: ''; position: absolute; left: 0; top: 0.44em; width: 7px; height: 7px; background: var(--yb-gold-bg); border: 1px solid var(--yb-gold); }
.pa-cmds { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.pa-cmd { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; padding: 0.32rem 0.62rem; background: var(--yb-overlay-soft); border: 1px solid var(--yb-border); border-radius: 6px; color: var(--yb-gold-light); }
.pa-stat-chip { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; padding: 0.32rem 0.7rem; border-radius: 999px; background: var(--yb-cyan-bg); border: 1px solid var(--yb-cyan-dim); color: var(--yb-cyan); }

/* ---- Shared fake-UI mock panel: one fixed size for all ten ---- */
.pa-mock { height: 430px; min-width: 0; display: flex; flex-direction: column; background: var(--yb-void); border: 1px solid var(--yb-border); border-radius: 12px; overflow: hidden; }
.pa-mock-bar { display: flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.9rem; background: var(--yb-depth); border-bottom: 1px solid var(--yb-border); flex: none; }
.pa-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pa-dot-r { background: rgba(244,114,114,0.75); }
.pa-dot-y { background: rgba(244,193,82,0.75); }
.pa-dot-g { background: rgba(85,214,138,0.7); }
.pa-mock-title { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em; color: var(--yb-muted2); margin-left: 0.5rem; }
.pa-mock-body { flex: 1; min-height: 0; padding: 0.95rem; display: flex; flex-direction: column; justify-content: center; gap: 0.8rem; overflow: hidden; }
.pa-mock-foot { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.05em; color: var(--yb-muted2); padding: 0.6rem 1rem; border-top: 1px solid var(--yb-border); background: var(--yb-depth); flex: none; }
.pa-ic-s { width: 14px; height: 14px; flex: none; }

/* ---- Mock: Discord-style embed (Beacon, Tickets panel, Giveaways) ---- */
.pa-embed { background: var(--yb-abyss); border: 1px solid var(--yb-border); border-left: 3px solid var(--yb-gold); border-radius: 8px; padding: 0.95rem 1.05rem; }
.pa-embed-title { font-family: var(--disp); font-weight: 600; font-size: 1rem; margin-bottom: 0.2rem; }
.pa-embed-meta { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.05em; color: var(--yb-muted2); margin-bottom: 0.75rem; }
.pa-role-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.44rem 0; border-bottom: 1px dashed rgba(96,128,210,0.14); }
.pa-role-name { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; color: var(--yb-text); width: 4.6rem; flex: none; }
.pa-role-count { font-family: var(--mono); font-size: 0.66rem; color: var(--yb-gold-light); margin-left: auto; white-space: nowrap; }
.pa-role-count-open { color: var(--yb-cyan); }
.pa-name-chip { font-family: var(--mono); font-size: 0.6rem; padding: 2px 7px; background: var(--yb-overlay-soft); border: 1px solid var(--yb-border); border-radius: 999px; color: var(--yb-muted); }
.pa-mock-btns { display: flex; gap: 0.45rem; margin-top: 0.85rem; }
.pa-dbtn { font-size: 0.72rem; font-weight: 600; padding: 0.36rem 0.85rem; border-radius: 4px; background: #2563eb; color: #fff; }
.pa-dbtn-sec { background: var(--yb-abyss); color: var(--yb-text); border: 1px solid var(--yb-border); }
.pa-wait { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.06em; color: var(--yb-cyan); margin-top: 0.8rem; }

/* ---- Mock: Beacon poll strip ---- */
.pa-poll { background: var(--yb-abyss); border: 1px solid var(--yb-border); border-radius: 8px; padding: 0.65rem 0.85rem; }
.pa-poll-q { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.12em; color: var(--yb-muted2); margin-bottom: 0.45rem; }
.pa-poll-opt { display: flex; align-items: center; gap: 0.6rem; padding: 0.2rem 0; }
.pa-poll-name { font-family: var(--mono); font-size: 0.64rem; color: var(--yb-text); width: 9.5rem; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-poll-track { flex: 1; height: 6px; background: var(--yb-overlay-soft); border-radius: 999px; overflow: hidden; }
.pa-poll-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--yb-gold), var(--yb-gold-light)); }
.pa-poll-pct { font-family: var(--mono); font-size: 0.62rem; color: var(--yb-gold-light); width: 2.2rem; text-align: right; flex: none; }

/* ---- Mock: Group Finder listing ---- */
.pa-listing { background: var(--yb-abyss); border: 1px solid var(--yb-border); border-radius: 8px; padding: 0.9rem 1rem; }
.pa-listing-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.3rem; }
.pa-listing-title { font-family: var(--disp); font-weight: 600; font-size: 0.98rem; }
.pa-listing-badge { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.14em; padding: 2px 7px; border-radius: 3px; background: var(--yb-cyan-bg); border: 1px solid var(--yb-cyan-dim); color: var(--yb-cyan); margin-left: auto; white-space: nowrap; }
.pa-listing-meta { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.05em; color: var(--yb-muted2); margin-bottom: 0.75rem; }
.pa-slots { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.pa-slot { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; padding: 0.28rem 0.6rem; border-radius: 999px; background: var(--yb-gold-bg); border: 1px solid var(--yb-gold-dim); color: var(--yb-gold-light); }
.pa-slot-open { background: transparent; border: 1px dashed var(--yb-border2); color: var(--yb-muted); }
.pa-listing-line { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.04em; color: var(--yb-muted); padding-top: 0.75rem; }
.pa-toast { display: flex; align-items: flex-start; gap: 0.6rem; background: var(--yb-abyss); border: 1px solid var(--yb-cyan-dim); border-left: 3px solid var(--yb-cyan); border-radius: 8px; padding: 0.72rem 0.9rem; }
.pa-toast-txt { font-family: var(--mono); font-size: 0.66rem; line-height: 1.55; color: var(--yb-muted); }
.pa-toast-txt .pa-toast-hl { color: var(--yb-cyan); }
.pa-toast-warn { border-color: rgba(244,180,92,0.4); border-left-color: #f4b45c; }
.pa-toast-warn .pa-toast-hl { color: #f4b45c; }

/* ---- Mock: Sentinel log ---- */
.pa-log { font-family: var(--mono); font-size: 0.67rem; }
.pa-log-row { display: flex; align-items: center; gap: 0.65rem; padding: 0.42rem 0.3rem; border-bottom: 1px solid rgba(96,128,210,0.09); }
.pa-log-row:last-child { border-bottom: none; }
.pa-sev { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.pa-sev-hi { background: #f37c7c; box-shadow: 0 0 6px rgba(243,124,124,0.5); }
.pa-sev-md { background: #f4b45c; }
.pa-sev-lo { background: var(--yb-cyan); }
.pa-sev-in { background: var(--yb-muted2); }
.pa-log-time { color: var(--yb-muted2); flex: none; }
.pa-log-what { color: var(--yb-text); flex: 1; }
.pa-log-act { color: var(--yb-gold-light); white-space: nowrap; }

/* ---- Mock: Analytics dashboard ---- */
.pa-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.pa-tile { background: var(--yb-abyss); border: 1px solid var(--yb-border); border-radius: 8px; padding: 0.6rem 0.75rem; }
.pa-tile-k { font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.12em; color: var(--yb-muted2); margin-bottom: 4px; }
.pa-tile-v { font-family: var(--disp); font-weight: 600; font-size: 1.1rem; line-height: 1.1; }
.pa-tile-d { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.06em; color: #55d68a; margin-top: 3px; }
.pa-tile-d-flat { color: var(--yb-muted2); }
.pa-chart { background: var(--yb-abyss); border: 1px solid var(--yb-border); border-radius: 8px; padding: 0.7rem 0.85rem 0.55rem; }
.pa-chart-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.12em; color: var(--yb-muted2); }
.pa-chart-peak { color: var(--yb-gold-light); }
.pa-bars { display: flex; align-items: flex-end; gap: 6px; height: 64px; margin: 0.55rem 0 0.35rem; }
.pa-bar { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, rgba(59,130,246,0.5), rgba(59,130,246,0.12)); }
.pa-bar-hot { background: linear-gradient(180deg, var(--yb-gold-light), rgba(59,130,246,0.35)); box-shadow: 0 0 10px rgba(59,130,246,0.35); }
.pa-bar-labs { display: flex; gap: 6px; }
.pa-bar-lab { flex: 1; text-align: center; font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.08em; color: var(--yb-muted2); }
.pa-lb-row { display: flex; align-items: center; gap: 0.65rem; padding: 0.34rem 0.2rem; border-bottom: 1px dashed rgba(96,128,210,0.14); font-family: var(--mono); }
.pa-lb-row:last-child { border-bottom: none; }
.pa-lb-rank { font-size: 0.58rem; letter-spacing: 0.1em; color: var(--yb-gold-light); flex: none; }
.pa-lb-name { font-size: 0.7rem; color: var(--yb-text); }
.pa-lb-val { font-size: 0.62rem; color: var(--yb-muted2); margin-left: auto; }

/* ---- Mock: Tickets thread ---- */
.pa-thread { background: var(--yb-abyss); border: 1px solid var(--yb-border); border-radius: 8px; padding: 0.85rem 1rem; }
.pa-thread-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.45rem; color: var(--yb-muted2); }
.pa-thread-title { font-family: var(--mono); font-size: 0.78rem; color: var(--yb-text); }
.pa-kv { display: flex; align-items: baseline; gap: 0.8rem; padding: 0.32rem 0; border-bottom: 1px dashed rgba(96,128,210,0.14); }
.pa-kv-k { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.14em; color: var(--yb-muted2); width: 6.4rem; flex: none; }
.pa-kv-v { font-size: 0.8rem; color: var(--yb-text); }
.pa-pri-hi { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.12em; color: #f37c7c; border: 1px solid rgba(243,124,124,0.4); background: rgba(243,124,124,0.08); border-radius: 3px; padding: 2px 7px; }
.pa-thread-chips { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.pa-check-line { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.7rem; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.05em; color: var(--yb-muted2); }
.pa-check-line .pa-ic-s { color: #55d68a; }

/* ---- Mock: Join-to-Create voice tree ---- */
.pa-vcat { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.16em; color: var(--yb-muted2); }
.pa-vrow { display: flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.65rem; border-radius: 6px; background: var(--yb-overlay-soft); border: 1px solid var(--yb-border); color: var(--yb-muted); }
.pa-vrow-lobby { border: 1px dashed var(--yb-gold-dim); background: var(--yb-gold-bg); color: var(--yb-gold-light); }
.pa-vrow-dim { opacity: 0.45; }
.pa-vname { font-size: 0.84rem; font-weight: 600; color: var(--yb-text); }
.pa-vrow-lobby .pa-vname { color: var(--yb-gold-light); }
.pa-vcount { font-family: var(--mono); font-size: 0.62rem; color: var(--yb-muted); margin-left: auto; }
.pa-vhint { font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.1em; color: var(--yb-muted2); margin-left: auto; }
.pa-vrow-lobby .pa-vhint { color: var(--yb-gold-light); }
.pa-vmembers { padding-left: 2.2rem; display: flex; flex-direction: column; gap: 0.3rem; margin-top: -0.35rem; }
.pa-vmember { display: flex; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.68rem; color: var(--yb-muted); }
.pa-av { width: 16px; height: 16px; border-radius: 50%; flex: none; }
.pa-av-1 { background: linear-gradient(135deg, #3b82f6, #74b3ff); }
.pa-av-2 { background: linear-gradient(135deg, #34c4f4, #3b82f6); }
.pa-av-3 { background: linear-gradient(135deg, #2563eb, #34c4f4); }

/* ---- Mock: Welcome card ---- */
.pa-wcard { display: flex; align-items: center; gap: 0.9rem; background: linear-gradient(135deg, rgba(59,130,246,0.14), rgba(52,196,244,0.05)); border: 1px solid var(--yb-border2); border-radius: 10px; padding: 1rem 1.1rem; }
.pa-wavatar { width: 46px; height: 46px; border-radius: 50%; flex: none; background: linear-gradient(135deg, #3b82f6, #34c4f4); border: 2px solid rgba(221,225,242,0.35); }
.pa-wname { font-family: var(--disp); font-weight: 600; font-size: 1.15rem; }
.pa-wsub { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; color: var(--yb-muted2); margin-top: 3px; }
.pa-wrow { display: flex; align-items: center; gap: 0.6rem; }
.pa-chip-role { color: var(--yb-gold-light); border-color: var(--yb-gold-dim); background: var(--yb-gold-bg); }
.pa-whint { font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.12em; color: var(--yb-muted2); margin-left: auto; }
.pa-quest { background: var(--yb-abyss); border: 1px solid var(--yb-border); border-radius: 8px; padding: 0.75rem 0.9rem; }
.pa-quest-title { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.14em; color: var(--yb-muted2); margin-bottom: 0.45rem; }
.pa-qrow { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0; }
.pa-qbox { width: 15px; height: 15px; border: 1px solid var(--yb-border2); border-radius: 4px; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; }
.pa-qbox .pa-ic-s { width: 10px; height: 10px; }
.pa-qbox-done { background: #2563eb; border-color: #2563eb; }
.pa-qtext { font-size: 0.8rem; color: var(--yb-text); }
.pa-qstat { font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.12em; color: var(--yb-muted2); margin-left: auto; }
.pa-qstat-done { color: #55d68a; }
.pa-qreward { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; color: var(--yb-gold-light); margin-top: 0.45rem; padding-top: 0.55rem; border-top: 1px dashed rgba(96,128,210,0.14); }

/* ---- Mock: Announcements schedule ---- */
.pa-sched-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.2rem; border-bottom: 1px dashed rgba(96,128,210,0.14); }
.pa-sched-row:last-child { border-bottom: none; }
.pa-sched-name { font-size: 0.84rem; font-weight: 600; color: var(--yb-text); }
.pa-sched-time { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.06em; color: var(--yb-muted2); margin-left: auto; }
.pa-tag { font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.12em; padding: 2px 7px; border-radius: 3px; background: var(--yb-cyan-bg); border: 1px solid var(--yb-cyan-dim); color: var(--yb-cyan); flex: none; }
.pa-tag-one { background: var(--yb-gold-bg); border-color: var(--yb-gold-dim); color: var(--yb-gold-light); }
.pa-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.pa-day { position: relative; text-align: center; font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.08em; color: var(--yb-muted2); padding: 0.5rem 0 0.9rem; border: 1px solid var(--yb-border); border-radius: 6px; background: var(--yb-overlay-soft); }
.pa-day-on { border-color: var(--yb-gold-dim); color: var(--yb-text); }
.pa-day-on::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--yb-gold-light); }
.pa-preview { display: flex; gap: 0.7rem; background: var(--yb-abyss); border: 1px solid var(--yb-border); border-radius: 8px; padding: 0.85rem 1rem; }
.pa-pav { width: 34px; height: 34px; border-radius: 50%; flex: none; background: linear-gradient(135deg, #2563eb, #34c4f4); }
.pa-pline { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.pa-pname { font-weight: 700; font-size: 0.84rem; color: var(--yb-text); }
.pa-pbot { font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.1em; background: #2563eb; color: #fff; border-radius: 3px; padding: 1px 5px; }
.pa-ptime { font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.06em; color: var(--yb-muted2); }
.pa-ptext { font-size: 0.82rem; line-height: 1.5; color: var(--yb-muted); }

/* ---- Mock: Giveaway embed ---- */
.pa-gcount { font-family: var(--mono); font-size: 1.7rem; letter-spacing: 0.1em; color: var(--yb-gold-light); margin: 0.35rem 0 0.1rem; }
.pa-gcount-lab { font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.18em; color: var(--yb-muted2); margin-bottom: 0.8rem; }
.pa-grow { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pa-gav-row { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.85rem; }
.pa-gav-more { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.08em; color: var(--yb-muted2); margin-left: 0.3rem; }

/* ---- Mock: Social feeds ---- */
.pa-live { display: flex; align-items: center; gap: 0.75rem; background: var(--yb-abyss); border: 1px solid var(--yb-border); border-left: 3px solid #f37c7c; border-radius: 8px; padding: 0.85rem 1rem; }
.pa-lav { width: 38px; height: 38px; border-radius: 50%; flex: none; background: linear-gradient(135deg, #2563eb, #34c4f4); border: 2px solid #f37c7c; }
.pa-live-line { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 2px; }
.pa-live-name { font-weight: 700; font-size: 0.88rem; color: var(--yb-text); }
.pa-live-badge { font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.14em; color: #fff; background: #e04a4a; border-radius: 3px; padding: 2px 6px; display: inline-flex; align-items: center; gap: 4px; }
.pa-live-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.pa-live-title { font-size: 0.8rem; color: var(--yb-text); }
.pa-live-meta { font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.08em; color: var(--yb-muted2); margin-top: 3px; }
.pa-live .pa-dbtn { margin-left: auto; flex: none; }
.pa-uprow { display: flex; align-items: center; gap: 0.75rem; background: var(--yb-abyss); border: 1px solid var(--yb-border); border-radius: 8px; padding: 0.8rem 1rem; }
.pa-upicon { width: 36px; height: 26px; border-radius: 5px; background: rgba(243,124,124,0.12); border: 1px solid rgba(243,124,124,0.4); color: #f37c7c; display: flex; align-items: center; justify-content: center; flex: none; }
.pa-upname { font-size: 0.8rem; font-weight: 600; color: var(--yb-text); }
.pa-upmeta { font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.08em; color: var(--yb-muted2); margin-top: 3px; }
.pa-src-lab { font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.16em; color: var(--yb-muted2); margin-bottom: -0.35rem; }
.pa-feeds { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.pa-feed { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; padding: 0.32rem 0.7rem; border-radius: 999px; background: var(--yb-cyan-bg); border: 1px solid var(--yb-cyan-dim); color: var(--yb-cyan); }

/* ---- Closing band ---- */
.pa-close { margin-top: 3.75rem; background: linear-gradient(135deg, rgba(59,130,246,0.10), rgba(52,196,244,0.05)); border: 1px solid var(--yb-border2); border-radius: 16px; padding: 3.25rem 3rem; text-align: center; }
.pa-close-badge { display: inline-block; margin-bottom: 1.1rem; }
.pa-close-title { font-family: var(--disp); font-weight: 700; font-size: 2.15rem; line-height: 1.15; margin-bottom: 0.9rem; }
.pa-close-copy { font-size: 1rem; line-height: 1.68; color: var(--yb-muted); max-width: 40rem; margin: 0 auto 1.75rem; }
.pa-close .pa-cta-row { justify-content: center; margin-bottom: 0; }

/* ============ mobile ============ */
/* ---- 900: service rail to a 2-col grid so ten stacked buttons don't push the stage below the fold ---- */
@media (max-width: 900px) {
  .pa-rail { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .pa-rail-item { min-width: 0; }
  .pa-rail-name { overflow-wrap: break-word; }
  .pa-rail-foot { grid-column: 1 / -1; margin-top: 0.2rem; }
}
/* ---- 760: general mobile tuning — type scale, paddings, wrap ctas, unclamp mock height ---- */
@media (max-width: 760px) {
  .pa-wrap { padding: 0 1.25rem; }
  .pa-hero { padding: 2.9rem 0 1.9rem; }
  .pa-title { font-size: clamp(2.05rem, 6.8vw, 2.6rem); }
  .pa-lede { font-size: 1rem; }
  .pa-cta-row { flex-wrap: wrap; }
  .pa-btn, .pa-btn-ghost { padding: 0.75rem 1.4rem; }
  .pa-divider { margin: 2.4rem 0 1.2rem; }
  .pa-stage { padding: 1.5rem 1.1rem; }
  .pa-panel.pa-on { gap: 1.5rem; }
  .pa-svc-head { flex-wrap: wrap; }
  .pa-svc-name { font-size: 1.3rem; }
  .pa-mock { height: auto; }
  .pa-close { margin-top: 2.75rem; padding: 2.25rem 1.4rem; }
  .pa-close-title { font-size: 1.7rem; }
}
/* ---- 640: point lists to one column; wrap tight mock rows; center cta + pill rows ---- */
@media (max-width: 640px) {
  .pa-caps { grid-template-columns: 1fr; }
  .pa-cta-row, .pa-pills { justify-content: center; }
  .pa-svc-name { font-size: 1.22rem; }
  .pa-role-row, .pa-mock-btns, .pa-listing-head, .pa-wrow, .pa-sched-row, .pa-pline, .pa-thread-chips, .pa-live { flex-wrap: wrap; }
}
/* ---- 480: small-phone fit (360-390px) — trim decorative mono fragments + fixed widths ---- */
@media (max-width: 480px) {
  .pa-wrap { padding: 0 1rem; }
  .pa-stage { padding: 1.15rem 0.85rem; }
  .pa-panel.pa-on { gap: 1.25rem; }
  .pa-rail-idx { display: none; }
  .pa-mock-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .pa-mock-body { padding: 0.8rem; }
  .pa-embed { padding: 0.8rem; }
  .pa-log-time { display: none; }
  .pa-poll-name { width: 6.5rem; }
  .pa-kv-k { width: 5.2rem; }
  .pa-tiles { gap: 0.45rem; }
  .pa-tile { padding: 0.5rem 0.55rem; }
  .pa-close-title { font-size: 1.5rem; }
}

/* ---- Per-panel link to the full page (/features/built-in-services/{slug}) ---- */
.pa-more { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.15rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yb-gold-light); text-decoration: none; border-bottom: 1px solid var(--yb-gold-dim); padding-bottom: 2px; transition: border-color 0.15s ease, color 0.15s ease; }
.pa-more:hover { color: var(--yb-text); border-bottom-color: var(--yb-gold); }

/* ── Core Services hub (2026-09) ───────────────────────────────────────────
   Replaced the vertical rail + ten inline panels with a horizontal tab strip
   over one swappable service panel. The panel markup is the same partial the
   standalone service pages use, so there is one copy of it, not two. */
  .cs-hero { text-align: center; max-width: 860px; margin: 0 auto; padding: 2.6rem 0 1.6rem; }
  .cs-hero .pa-eyebrow { justify-content: center; }
  .cs-title {
    font-family: var(--display, var(--font-display));
    font-size: clamp(2.2rem, 5.5vw, 3.6rem);
    font-weight: 600; line-height: 1.08; margin: 0.5rem 0 0.4rem;
  }
  .cs-sub {
    font-family: var(--display, var(--font-display));
    font-size: clamp(1rem, 2vw, 1.35rem); font-weight: 500;
    color: var(--yb-gold, #74b3ff); margin: 0 0 1.1rem;
  }
  .cs-lede {
    font-size: 1rem; line-height: 1.65; color: var(--yb-muted);
    max-width: 68ch; margin: 0 auto 1.6rem;
  }
  .cs-cta-row { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; }
  /* Gold, matching the Premium plan art on /pricing so the word means the
     same thing in both places. Dark label: white on amber is ~1.9:1. */
  .cs-btn-premium {
    display: inline-block; font-weight: 600; font-size: 0.92rem;
    padding: 0.68rem 1.5rem; border-radius: 6px;
    background: linear-gradient(135deg, #ffd24a, #f0a020);
    color: #241a02; text-decoration: none;
    transition: filter 0.15s ease, transform 0.15s ease;
  }
  .cs-btn-premium:hover { filter: brightness(1.06); transform: translateY(-1px); }

  /* Ten tabs. Horizontal scroll rather than wrapping to a second row: a
     wrapped strip reflows as the active tab changes width, which moves the
     tab under the reader's cursor. */
  .cs-tabs {
    display: flex; gap: 0.4rem;
    overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -ms-overflow-style: none;
    padding: 0.4rem 0 0.9rem;
    margin: 0 auto 1.4rem;
    border-bottom: 1px solid var(--yb-border);
  }
  .cs-tabs::-webkit-scrollbar { display: none; }
  .cs-tab {
    display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
    flex: 1 0 auto; min-width: 92px;
    padding: 0.7rem 0.6rem; border-radius: 10px;
    border: 1px solid transparent; background: transparent;
    color: var(--yb-muted); text-decoration: none;
    transition: color 0.18s, background 0.18s, border-color 0.18s;
  }
  .cs-tab:hover { color: var(--yb-text); background: var(--yb-overlay, rgba(255,255,255,0.03)); }
  .cs-tab.is-on {
    color: var(--yb-text);
    background: var(--yb-gold-bg, rgba(59,130,246,0.09));
    border-color: var(--yb-gold-dim, rgba(59,130,246,0.30));
  }
  .cs-tab:focus-visible { outline: 2px solid var(--yb-gold, #3b82f6); outline-offset: 2px; }
  .cs-tab-ic { width: 22px; height: 22px; display: block; }
  .cs-tab-ic svg { width: 100%; height: 100%; display: block; }
  .cs-tab-name { font-size: 0.74rem; font-weight: 600; text-align: center; line-height: 1.2; white-space: nowrap; }

  /* Swapped content. min-height stops the page collapsing then jumping back
     while a fetch is in flight. */
  .cs-stage { min-height: 60vh; }
  .cs-stage[aria-busy="true"] { opacity: 0.55; transition: opacity 0.15s; }

  @media (max-width: 760px) {
    .cs-hero { padding-top: 1.8rem; }
    .cs-tab { min-width: 78px; padding: 0.55rem 0.45rem; }
    .cs-tab-name { font-size: 0.68rem; }
  }

  /* On the hub the panel sits directly under a hero that already says
     "Features / Core Services", and the panel's own crumb trail repeats it
     plus the service name the active tab is already showing. It stays on the
     standalone pages, where it is the only breadcrumb and carries the
     BreadcrumbList the page is marked up with. */
  .cs-stage .pd-crumbs { display: none; }
  /* Same reason: the panel's h1 becomes the page's SECOND h1 once the hub
     hero owns the first. Keep it visible (it is the service's headline) but
     step it down so the hero stays the dominant title. */
  .cs-stage .pd-hero .pa-title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }

/* Phone floor for the mock labels and the breadcrumb. Last in the sheet on
   purpose so no narrower breakpoint above can re-shrink them. */
@media (max-width: 760px) {
  .pa-rail-hook, .pa-bar-lab, .pa-tile-k, .pa-tile-d, .pa-lb-rank, .pa-lb-val, .pa-mock-foot,
  .pa-listing-badge, .pa-kv-k, .pa-pri-hi, .pa-badge, .pa-chart-peak, .pa-chart-head span { font-size: 0.66rem; }
  .pa-eyebrow a { display: inline-block; padding: 0.6rem 0.15rem; margin: -0.6rem -0.15rem; }
}