*,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --cyan: #00f2ff;
      --blue: #3b82f6;
      --purple: #8b5cf6;
      --emerald: #10b981;
      --amber: #f59e0b;
      --lime: #7ef07b;
      --mint: #6ff3cc;
      --forest: #0d903a;
      --muted: rgba(255, 255, 255, 0.50);
      --fh: 'Open Sans', sans-serif;
      --fb: 'Open Sans', sans-serif;
      --sa-field-bg: #030a14;
      --sa-field-bg-deep: #020814;
      --sa-halo-core: rgba(74, 136, 255, 0.28);
      --sa-halo-mid: rgba(52, 110, 228, 0.2);
      --sa-halo-edge: rgba(16, 42, 92, 0.04);
      --sa-ring: rgba(170, 208, 255, 0.085);
      --sa-ring-soft: rgba(170, 208, 255, 0.04);
      --sa-contour: rgba(99, 164, 244, 0.15);
      --sa-contour-soft: rgba(76, 137, 221, 0.09);
      --sa-signal-blue: rgba(94, 155, 244, 0.28);
      --sa-signal-green: rgba(92, 220, 197, 0.24);
      --sa-particle: rgba(195, 224, 255, 0.38);
      --page-gutter: clamp(16px, 3vw, 32px);
      --section-pad-y: clamp(72px, 9vw, 120px);
      --card-radius-lg: clamp(24px, 3vw, 34px);
      --card-radius-xl: clamp(28px, 4vw, 64px);
      --viewport-h: 100vh;
      --hero-safe-top: clamp(120px, 16svh, 220px);
    }

    @supports (height: 100svh) {
      :root {
        --viewport-h: 100svh;
      }
    }

    html,
    body {
      width: 100%;
      min-height: 100%;
      background: #030810;
      color: #fff;
      font-family: var(--fb);
      scroll-behavior: smooth;
      transition: background 1.5s cubic-bezier(0.16, 1, 0.3, 1);
      overflow-x: clip;
    }

    html {
      overflow-x: clip;
    }

    body {
      position: relative;
      min-height: var(--viewport-h);
    }

    img,
    svg,
    video,
    canvas {
      max-width: 100%;
      height: auto;
    }

    main,
    section,
    article,
    .w,
    .s,
    [class*="grid"],
    [class*="panel"],
    [class*="card"] {
      min-width: 0;
    }

    #append-rest {
      background: transparent;
      transition: background 1.15s cubic-bezier(0.16, 1, 0.3, 1);
    }

    #append-rest .theme-transition-overlay {
      opacity: 1;
      transition:
        opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1),
        background 1.15s cubic-bezier(0.16, 1, 0.3, 1);
    }

    body.phase-scenarios {
      background: #040c14;
    }

    /* ── Ambient — Phase Awareness ── */
    .ambient {
      z-index: 0;
      pointer-events: none;
      background:
        radial-gradient(ellipse 54% 48% at 22% 22%, rgba(59, 130, 246, .22) 0%, transparent 100%),
        radial-gradient(ellipse 56% 48% at 80% 78%, rgba(139, 92, 246, .24) 0%, transparent 100%),
        radial-gradient(ellipse 54% 40% at 52% 84%, rgba(13, 144, 58, .22) 0%, transparent 100%),
        radial-gradient(ellipse 42% 28% at 50% 66%, rgba(111, 243, 204, .10) 0%, transparent 100%);
      opacity: 0;
      transition: opacity 2.5s ease, filter 1.5s ease;
    }

    .ambient.on {
      opacity: 1;
    }

    body.phase-stats .ambient,
    body.phase-scenarios .ambient {
      filter: saturate(1.5) hue-rotate(20deg);
      opacity: 0.6;
    }

    /* ── Planet Stats (merged into planetary stage) ── */
    #planet-stats {
      position: relative;
      margin-top: 48px;
      margin-bottom: 80px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0;
      opacity: 1;
      z-index: 22;
    }

    .pstat-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 0 44px;
    }

    .pstat-num {
      font-family: var(--fh);
      font-weight: 800;
      font-size: 42px;
      line-height: 1;
      letter-spacing: -0.04em;
      color: #fff;
    }

    .pstat-label {
      font-family: var(--fh);
      font-weight: 500;
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.40);
    }

    .pstat-divider {
      width: 1px;
      height: 48px;
      background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.14), transparent);
    }





    /* ── Bottom Transition (JS-driven, no CSS classes needed) ── */
    body.is-bottom #text-block {
      opacity: 0;
    }

    body.is-self-diagnostic #text-block,
    body.is-self-diagnostic .scroll-hint {
      opacity: 0 !important;
      pointer-events: none !important;
      transition: opacity .7s ease;
    }

    /* #stage-wrap is intentionally NOT hidden here — the zoomed orb stays as background */
    body.is-self-diagnostic .ambient,
    body.is-self-diagnostic .bg-grid,
    body.is-self-diagnostic .particles {
      opacity: 0 !important;
      transition: opacity .7s ease;
    }

    body.is-hero-scrolled #text-block,
    body.is-hero-scrolled .scroll-hint {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
      transform: translateY(-24px) scale(0.985);
      filter: none;
      transition: opacity .16s ease, transform .2s ease, visibility 0s linear .16s;
    }

    body.is-hero-scrolled .ambient,
    body.is-hero-scrolled .bg-grid,
    body.is-hero-scrolled .particles,
    body.is-hero-scrolled .tb-specimen {
      opacity: 0 !important;
      pointer-events: none !important;
      filter: blur(12px);
      transition: opacity .8s ease, filter .8s ease;
    }

    body.is-self-diagnostic #stage-wrap .planet-title,
    body.is-self-diagnostic #stage-wrap .planet-desc,
    body.is-self-diagnostic #stage-wrap .planet-text-ring,
    body.is-self-diagnostic #stage-wrap .sat,
    body.is-self-diagnostic #stage-wrap #planet-stats {
      opacity: 0 !important;
      transform: translateY(-12px) scale(0.99);
      transition: opacity .55s ease, transform .55s ease;
    }

    body.is-planet-zoom #text-block,
    body.is-planet-zoom .scroll-hint {
      opacity: 0 !important;
      transform: translateY(-14px) scale(0.99);
      pointer-events: none !important;
      transition: opacity .45s ease, transform .45s ease;
    }

    body.top-journey {
      --hero-text-out: 0;
      --hero-hint-out: 0;
      --hero-field-out: 0;
      --stage-opacity: 0;
      --stage-ambient: 0;
      --stage-grid: 0;
      --stage-particles: 0;
    }

    body.top-journey #text-block {
      opacity: calc(1 - var(--hero-text-out)) !important;
      transform: translate3d(0, calc(var(--hero-text-out) * -8px), 0) scale(calc(1 - var(--hero-text-out) * 0.008)) !important;
      filter: none !important;
      pointer-events: none !important;
    }

    body.top-journey .scroll-hint {
      opacity: calc(.72 - (var(--hero-hint-out) * .72)) !important;
      transform: translate3d(-50%, calc(var(--hero-hint-out) * 4px), 0) !important;
      pointer-events: none !important;
    }

    body.top-journey #hero-field {
      opacity: calc(1 - var(--hero-field-out)) !important;
      transform: translate3d(0, calc(var(--hero-field-out) * -4px), 0) !important;
    }

    body.top-journey #stage-wrap {
      opacity: var(--stage-opacity) !important;
      transition: opacity .55s cubic-bezier(.22, 1, .36, 1) !important;
    }

    body.top-journey .ambient {
      opacity: calc(var(--stage-ambient) * .2) !important;
      filter: none;
      display: block !important;
    }

    body.top-journey .bg-grid {
      opacity: calc(.028 + (var(--stage-grid) * .05)) !important;
    }

    body.top-journey .particles {
      opacity: calc(var(--stage-particles) * .08) !important;
    }

    /* ── Zoom Reveal Section ── */
    #zoom-reveal-section {
      position: relative;
      height: 250vh;
      z-index: 30;
    }

    #zoom-reveal-pin {
      position: sticky;
      top: 0;
      height: var(--viewport-h);
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      pointer-events: none;
    }

    #planetary-spacer {}

    #zoom-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      z-index: 50;
      padding: 0 24px;
      opacity: 0;
      transform: translateY(24px);
      pointer-events: none;
      transition: opacity 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    @keyframes starVanish {
      0% {
        transform: translate(-50%, -50%) scale(1);
        filter: brightness(1) blur(0);
        opacity: 1;
      }

      20% {
        transform: translate(-50%, -50%) scale(1.15);
        filter: brightness(2) blur(4px);
        opacity: 1;
      }

      100% {
        transform: translate(-50%, -50%) scale(0);
        filter: brightness(5) blur(20px);
        opacity: 0;
      }
    }

    body.is-planet-vanish #core {
      animation: starVanish 0.85s cubic-bezier(0.36, 0, 0.66, -0.56) forwards !important;
      filter: none !important;
      box-shadow: none !important;
    }

    body.is-planet-vanish {
      background: #FFFFFF !important;
      transition: background 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

    body.is-planet-vanish .particles,
    body.is-planet-vanish .bg-grid,
    body.is-planet-vanish .ambient,
    body.is-planet-vanish #stage::before,
    body.is-planet-vanish .orbit-halo,
    body.is-planet-vanish .ring,
    body.is-planet-vanish .topo-field,
    body.is-planet-vanish .signal-field,
    body.is-planet-vanish .system-particles {
      opacity: 0 !important;
      animation: none !important;
      transition: opacity 0.4s ease;
    }

    body.is-planet-vanish #stage-wrap {
      mix-blend-mode: normal !important;
    }

    body.is-planet-vanish #zoom-overlay .zo-title {
      color: #0F172A !important;
    }

    body.is-planet-vanish #zoom-overlay .zo-sub {
      color: #475569 !important;
    }

    body.is-planet-vanish #zoom-overlay .zo-kicker {
      color: #2563EB !important;
    }

    body.is-planet-vanish #zoom-overlay .zo-title em {
      filter: drop-shadow(0 0 20px rgba(0, 119, 255, 0.12));
    }

    body.is-planet-vanish #zoom-overlay::before {
      content: "";
      position: absolute;
      inset: -12vh -8vw;
      background: #FFFFFF;
      z-index: -1;
      pointer-events: none;
    }

    body.is-planet-vanish .sat {
      opacity: 0 !important;
      transform: scale(0.5) !important;
      /* Inherits its original pop-in transition timing */
    }

    body.is-planet-vanish .ring,
    body.is-planet-vanish .bio-contour,
    body.is-planet-vanish .petal-outline,
    body.is-planet-vanish .organic-leaf,
    body.is-planet-vanish .root-system,
    body.is-planet-vanish #planet-stats,
    body.is-planet-vanish .planet-text-ring,
    body.is-planet-vanish .planet-title,
    body.is-planet-vanish .planet-desc,
    body.is-planet-vanish #core .logo-img {
      opacity: 0 !important;
      transition: opacity 0.5s ease;
    }

    body.is-planet-vanish #zoom-overlay {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.6s;
    }

    #zoom-overlay .zo-kicker {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: rgba(111, 243, 204, 0.65);
      margin-bottom: 28px;
      display: block;
    }

    #zoom-overlay .zo-title {
      font-family: var(--open-sans);
      font-weight: 600;
      font-size: clamp(2.6rem, 5.5vw, 4.6rem);
      line-height: 1.1;
      letter-spacing: -0.03em;
      color: rgba(255, 255, 255, 0.96);
      margin-bottom: 0;
    }

    #zoom-overlay .zo-title em {
      display: block;
      background: linear-gradient(135deg, #22D3EE, #0077FF);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-style: normal;
      filter: drop-shadow(0 0 32px rgba(0, 119, 255, 0.22));
    }

    #zoom-overlay .zo-sub {
      margin-top: 28px;
      font-family: var(--open-sans);
      font-size: clamp(0.95rem, 1.6vw, 1.18rem);
      line-height: 1.8;
      color: rgba(255, 255, 255, 0.52);
      max-width: 56ch;
    }

    /* ── Light Mode Core Transitions ── */
    body.is-light-mode #append-rest {
      background: #F8FAFC !important;
    }

    body.is-dark-diagnostic {
      background: #020609 !important;
    }

    body.is-diagnostic-approach {
      background: #020609 !important;
    }

    body.is-dark-diagnostic #append-rest {
      background: radial-gradient(circle at 50% 50%, #041a2f 0%, #02080e 100%) !important;
    }

    body.is-diagnostic-approach #append-rest {
      background: radial-gradient(circle at 50% 50%, #04111f 0%, #020609 100%) !important;
    }

    /* Force white background during planet vanish regardless of diagnostic approach */
    body.is-planet-vanish, 
    body.is-planet-vanish.is-diagnostic-approach,
    body.is-planet-vanish #append-rest {
      background: #FFFFFF !important;
    }

    body.is-planet-vanish #append-rest .theme-transition-overlay {
      opacity: 0 !important;
    }

    /* Transition Overlay at top of append-rest */
    body.is-light-mode #append-rest .theme-transition-overlay {
      opacity: .82;
      background: linear-gradient(180deg, rgba(248, 250, 252, 0) 0%, rgba(248, 250, 252, 0.28) 16%, rgba(248, 250, 252, 0.76) 48%, #F8FAFC 100%) !important;
    }

    body.is-dark-diagnostic #append-rest .theme-transition-overlay {
      opacity: 1;
      background: linear-gradient(180deg,
          rgba(248, 250, 252, 0) 0%,
          rgba(218, 224, 236, 0.12) 10%,
          rgba(127, 141, 170, 0.12) 22%,
          rgba(22, 32, 49, 0.44) 40%,
          rgba(5, 10, 18, 0.82) 66%,
          #020609 100%) !important;
    }

    body.is-diagnostic-approach #append-rest .theme-transition-overlay {
      opacity: 1;
      background: linear-gradient(180deg,
          rgba(248, 250, 252, 0) 0%,
          rgba(210, 220, 235, 0.08) 12%,
          rgba(102, 117, 145, 0.12) 24%,
          rgba(22, 32, 49, 0.46) 48%,
          rgba(5, 10, 18, 0.88) 74%,
          #020609 100%) !important;
    }

    body.is-dark-diagnostic .ambient,
    body.is-dark-diagnostic .bg-grid,
    body.is-dark-diagnostic .particles,
    body.is-dark-diagnostic #hero-field,
    body.is-dark-diagnostic #hero-field::before,
    body.is-dark-diagnostic #hero-field::after,
    body.is-dark-diagnostic #hero-field *,
    body.is-dark-diagnostic #hero-field *::before,
    body.is-dark-diagnostic #hero-field *::after,
    body.is-dark-diagnostic #text-block,
    body.is-dark-diagnostic #text-block *,
    body.is-bottom .ambient,
    body.is-bottom .bg-grid,
    body.is-bottom .particles,
    body.is-bottom #hero-field,
    body.is-bottom #hero-field::before,
    body.is-bottom #hero-field::after,
    body.is-bottom #hero-field *,
    body.is-bottom #hero-field *::before,
    body.is-bottom #hero-field *::after,
    body.is-bottom #text-block,
    body.is-bottom #text-block * {
      animation-play-state: paused !important;
    }

    body.is-light-mode .ambient {
      display: none !important;
      /* Remove colored glows entirely in light start */
    }

    body.is-light-mode .bg-grid {
      opacity: 0.04 !important;
      background-image:
        linear-gradient(rgba(15, 23, 42, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.06) 1px, transparent 1px);
    }

    body.is-light-mode .particles {
      opacity: 0 !important;
    }

    body.is-light-mode #text-block {
      color: #0F172A !important;
      mix-blend-mode: normal;
      text-shadow: none !important;
    }

    /* Fix visibility for dark components in light mode */
    body.is-light-mode .story-trigger h2,
    body.is-light-mode .story-trigger p,
    body.is-light-mode .story-trigger .story-open,
    body.is-light-mode .qc-front .qtext,
    body.is-light-mode .qc-front .q-num {
      color: #FFFFFF !important;
    }

    body.is-light-mode .story-trigger p {
      opacity: 0.8 !important;
    }

    body.is-light-mode .tb-part {
      color: #0F172A !important;
    }

    body.is-light-mode .tb-subtext {
      color: #334155 !important;
    }

    body.is-light-mode .tb-subtext b {
      color: #0F172A !important;
    }

    body.is-light-mode .tb-line .alpha-accent {
      color: #2563EB !important;
      text-shadow: none !important;
      font-style: italic;
      font-weight: 600;
    }

    body.is-light-mode .tb-line .hard-accent {
      color: #059669 !important;
      text-shadow: none !important;
      font-weight: 600;
    }

    body.is-light-mode .scroll-hint {
      color: #64748B !important;
      opacity: .72;
    }

    body.is-light-mode #append-content .qc {
      background: #FFFFFF !important;
      border-color: rgba(15, 23, 42, 0.06) !important;
      box-shadow: 0 24px 48px rgba(15, 23, 42, 0.08) !important;
    }

    body.is-light-mode #append-content .qc-front,
    body.is-light-mode #append-content .qc-back {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .92)) !important;
    }

    body.is-light-mode #append-content .qc-front::before,
    body.is-light-mode #append-content .qc-back::before {
      opacity: .35 !important;
    }

    body.is-light-mode #append-content .qtext {
      color: #0F172A !important;
    }

    body.is-light-mode #append-content .qtag {
      color: #64748B !important;
    }

    body.is-light-mode #append-content .qreal,
    body.is-light-mode #append-content .qverd {
      color: #475569 !important;
    }

    body.is-light-mode #append-content .qverd strong {
      color: #0F172A !important;
    }

    body.is-dark-diagnostic #q .ey,
    body.is-dark-diagnostic #q .h2,
    body.is-dark-diagnostic #q .lead,
    body.is-dark-diagnostic #q .qtext,
    body.is-dark-diagnostic #q .q-num,
    body.is-dark-diagnostic #q .qtag,
    body.is-dark-diagnostic #q .qreal,
    body.is-dark-diagnostic #q .qverd,
    body.is-dark-diagnostic #q .qverd strong,
    body.is-diagnostic-approach #q .ey,
    body.is-diagnostic-approach #q .h2,
    body.is-diagnostic-approach #q .lead,
    body.is-diagnostic-approach #q .qtext,
    body.is-diagnostic-approach #q .q-num,
    body.is-diagnostic-approach #q .qtag,
    body.is-diagnostic-approach #q .qreal,
    body.is-diagnostic-approach #q .qverd,
    body.is-diagnostic-approach #q .qverd strong,
    body.is-self-diagnostic #q .ey,
    body.is-self-diagnostic #q .h2,
    body.is-self-diagnostic #q .lead,
    body.is-self-diagnostic #q .qtext,
    body.is-self-diagnostic #q .q-num,
    body.is-self-diagnostic #q .qtag,
    body.is-self-diagnostic #q .qreal,
    body.is-self-diagnostic #q .qverd,
    body.is-self-diagnostic #q .qverd strong {
      color: #FFFFFF !important;
    }

    body.is-dark-diagnostic #q .qverd,
    body.is-diagnostic-approach #q .qverd,
    body.is-self-diagnostic #q .qverd {
      background: rgba(255, 255, 255, 0.04) !important;
      border-color: rgba(255, 255, 255, 0.12) !important;
    }

    body.is-dark-diagnostic #q .q-num,
    body.is-diagnostic-approach #q .q-num,
    body.is-self-diagnostic #q .q-num {
      background: rgba(255, 255, 255, 0.05) !important;
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.08) !important;
    }

    /* ── Hero Specimen Deck (stacked gallery) ─────────── */
    .tb-specimen {
      display: none;
      margin-top: auto;
      width: min(840px, 64vw);
      opacity: 0;
      transform: translateY(40px);
      pointer-events: auto;
      animation: specIn 1.4s cubic-bezier(.16, 1, .3, 1) forwards 3.2s;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      z-index: 10;
    }

    body.is-light-mode .tb-specimen {
      display: block;
    }

    body.is-self-diagnostic .tb-specimen,
    body.is-planet-zoom .tb-specimen,
    body.is-bottom .tb-specimen {
      opacity: 0 !important;
      transform: translateY(24px) !important;
      transition: opacity .6s ease, transform .6s ease;
      pointer-events: none;
    }

    @keyframes specIn {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Deck — 3 cards stacked with cleaner layered offsets */
    .spec-deck {
      position: relative;
      perspective: 1600px;
      min-height: 380px;
      margin: 0 auto;
      width: 100%;
    }

    .spec-card {
      position: absolute;
      inset: 0;
      padding: 8px 14px 10px;
      border-radius: 20px;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, .88) 0%, rgba(252, 248, 255, .82) 55%, rgba(255, 250, 244, .84) 100%);
      backdrop-filter: blur(14px) saturate(140%);
      -webkit-backdrop-filter: blur(14px) saturate(140%);
      overflow: hidden;
      cursor: pointer;
      user-select: none;
      transition:
        transform .7s cubic-bezier(.2, 1, .3, 1),
        opacity .5s ease,
        filter .5s ease,
        box-shadow .5s ease;
      will-change: transform, opacity;
      --accent: #3B82F6;
      transform-origin: 50% 100%;
    }

    /* holographic conic border */
    .spec-card::before {
      content: "";
      position: absolute;
      inset: 0;
      padding: 1.5px;
      border-radius: 22px;
      background: conic-gradient(from 0deg,
          var(--accent),
          color-mix(in srgb, var(--accent) 40%, #F59E0B),
          color-mix(in srgb, var(--accent) 40%, #EC4899),
          color-mix(in srgb, var(--accent) 40%, #06B6D4),
          var(--accent));
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      opacity: .8;
      animation: specBorder 12s linear infinite;
    }

    @keyframes specBorder {
      to {
        filter: hue-rotate(360deg);
      }
    }

    /* paper grain */
    .spec-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        repeating-linear-gradient(0deg, rgba(15, 23, 42, .025) 0 1px, transparent 1px 40px),
        repeating-linear-gradient(90deg, rgba(15, 23, 42, .025) 0 1px, transparent 1px 40px);
      mask-image: radial-gradient(ellipse at 50% 50%, #000 40%, transparent 100%);
      pointer-events: none;
      opacity: .42;
    }

    /* states */
    .spec-card.is-active {
      z-index: 3;
      transform:
        translateY(0) rotate(calc(var(--px, 0) * -.5deg)) rotateY(calc(var(--px, 0) * 4deg)) rotateX(calc(var(--py, 0) * -4deg));
      opacity: 1;
      filter: saturate(1.08);
      box-shadow:
        0 28px 56px -28px rgba(15, 23, 42, .16),
        0 10px 26px -18px color-mix(in srgb, var(--accent) 38%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .9);
      pointer-events: auto;
    }

    .spec-card.is-back-1 {
      z-index: 2;
      transform: translateY(-34px) translateX(24px) scale(.96) rotate(2.5deg);
      opacity: .48;
      filter: saturate(.85) brightness(.99);
      box-shadow: 0 24px 60px -34px rgba(15, 23, 42, .22);
    }

    .spec-card.is-back-2 {
      z-index: 1;
      transform: translateY(-62px) translateX(-20px) scale(.92) rotate(-3.5deg);
      opacity: .24;
      filter: saturate(.72) blur(.2px);
      box-shadow: 0 16px 42px -34px rgba(15, 23, 42, .18);
    }

    .spec-card.is-back-1:hover,
    .spec-card.is-back-2:hover {
      opacity: .85;
      filter: saturate(1);
    }

    /* entry slide-in for new active card */
    .spec-card.slide-in-r {
      animation: specPulseIn .55s cubic-bezier(.2, 1, .3, 1);
    }

    .spec-card.slide-in-l {
      animation: specPulseIn .55s cubic-bezier(.2, 1, .3, 1);
    }

    @keyframes specPulseIn {
      from {
        transform: translateY(12px) scale(.97) rotate(1deg);
        opacity: .72;
      }

      to {
        transform: translateY(0) scale(1);
        opacity: 1;
      }
    }

    /* Stage / SVG */
    .spec-card .spec-stage {
      position: relative;
      z-index: 2;
      padding: 2px 0 0;
      opacity: .72;
      transform: scale(.962);
      transform-origin: top center;
    }

    .spec-card .spec-svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
      filter: saturate(.88) brightness(1.015);
    }

    .spec-parallax {
      transition: transform .25s cubic-bezier(.16, 1, .3, 1);
    }

    /* Foot / caption */
    .spec-card .spec-foot {
      position: relative;
      z-index: 2;
      display: flex;
      justify-content: flex-start;
      align-items: flex-end;
      gap: 12px;
      padding: 4px 2px 0;
      border-top: 1px solid rgba(15, 23, 42, .05);
      margin-top: 0;
    }

    .spec-card .spec-caption {
      font-family: var(--fb);
      font-size: 9.8px;
      line-height: 1.38;
      color: #52627d;
      font-weight: 500;
      max-width: 284px;
      text-align: left;
    }

    .spec-card .spec-caption em {
      display: block;
      color: #0F172A;
      font-style: normal;
      font-weight: 700;
      background: none;
      padding: 0;
      margin-bottom: 2px;
    }

    .spec-card .spec-serial {
      font-family: 'Open Sans', sans-serif;
      font-size: 8.5px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: #94A3B8;
      white-space: nowrap;
      opacity: .85;
    }

    .tb-specimen::before {
      content: "";
      position: absolute;
      left: -36px;
      right: -40px;
      top: -18px;
      bottom: -24px;
      background:
        radial-gradient(ellipse 40% 46% at 72% 68%, rgba(34, 212, 104, .14) 0%, transparent 68%),
        radial-gradient(ellipse 30% 34% at 22% 74%, rgba(91, 155, 248, .12) 0%, transparent 70%);
      pointer-events: none;
      opacity: .56;
      z-index: -1;
      filter: blur(22px);
    }

    /* ── Specimen 01 · Bridge animations ── */
    .spec-card[data-idx="0"] {
      --accent: #3B82F6;
    }

    .spec-card[data-idx="0"].is-active .s1-arc {
      stroke-dasharray: 680;
      stroke-dashoffset: 680;
      animation: s1ArcDraw 2s cubic-bezier(.6, .2, .2, 1) forwards .2s;
      filter: drop-shadow(0 2px 8px rgba(59, 130, 246, .45));
    }

    @keyframes s1ArcDraw {
      to {
        stroke-dashoffset: 0;
      }
    }

    .spec-card[data-idx="0"].is-active .s1-rho {
      opacity: 0;
      animation: s1RhoIn .8s ease-out forwards 1.8s, s1RhoFloat 4s ease-in-out infinite 2.8s;
      transform-origin: 345px 52px;
      transform-box: fill-box;
    }

    @keyframes s1RhoIn {
      to {
        opacity: 1;
      }
    }

    @keyframes s1RhoFloat {

      0%,
      100% {
        transform: translate(0, 0);
      }

      50% {
        transform: translate(0, -4px);
      }
    }

    .spec-card[data-idx="0"].is-active .s1-comet {
      offset-path: path("M 170 130 C 260 40, 440 40, 520 130");
      offset-rotate: 0deg;
      animation: s1Comet 4.2s cubic-bezier(.5, 0, .5, 1) infinite 2.2s;
      filter: drop-shadow(0 0 6px rgba(59, 130, 246, .8));
      opacity: 0;
    }

    @keyframes s1Comet {
      0% {
        offset-distance: 0%;
        opacity: 0;
        stroke: #3B82F6;
      }

      10% {
        opacity: 1;
      }

      50% {
        offset-distance: 50%;
        opacity: 1;
        stroke: #10B981;
      }

      90% {
        opacity: 1;
      }

      100% {
        offset-distance: 100%;
        opacity: 0;
        stroke: #F59E0B;
      }
    }

    .spec-card[data-idx="0"].is-active .s1-pulse {
      transform-origin: 540px 130px;
      transform-box: fill-box;
      animation: s1Pulse 2.4s ease-out infinite;
    }

    @keyframes s1Pulse {
      0% {
        transform: scale(1);
        opacity: .7;
      }

      100% {
        transform: scale(1.55);
        opacity: 0;
      }
    }

    .spec-card[data-idx="0"].is-active .s1-ring,
    .spec-card[data-idx="0"].is-active .s1-halo {
      transform-origin: 130px 130px;
      transform-box: fill-box;
      animation: s1Breath 3.6s ease-in-out infinite;
    }

    @keyframes s1Breath {

      0%,
      100% {
        transform: scale(1);
        opacity: .6;
      }

      50% {
        transform: scale(1.08);
        opacity: .9;
      }
    }

    /* ── Specimen 02 · Manager Blind Spot animations ── */
    .spec-card[data-idx="1"] {
      --accent: #E11D48;
    }

    .spec-card[data-idx="1"].is-active .s2-bar {
      transform-origin: center bottom;
      transform-box: fill-box;
      animation: s2BarGrow .8s cubic-bezier(.2, 1, .3, 1) both;
    }

    .spec-card[data-idx="1"].is-active .s2-bars>rect:nth-child(1) {
      animation-delay: .1s;
    }

    .spec-card[data-idx="1"].is-active .s2-bars>rect:nth-child(2) {
      animation-delay: .2s;
    }

    .spec-card[data-idx="1"].is-active .s2-bars>rect:nth-child(3) {
      animation-delay: .3s;
    }

    .spec-card[data-idx="1"].is-active .s2-bars>rect:nth-child(4),
    .spec-card[data-idx="1"].is-active .s2-bars>rect:nth-child(5) {
      animation-delay: .4s;
    }

    .spec-card[data-idx="1"].is-active .s2-bars>rect:nth-child(6) {
      animation-delay: .55s;
    }

    @keyframes s2BarGrow {
      from {
        transform: scaleY(0);
        opacity: 0;
      }

      to {
        transform: scaleY(1);
        opacity: 1;
      }
    }

    .spec-card[data-idx="1"].is-active .s2-mgr-glow {
      animation: s2Glow 2.2s ease-in-out infinite 1.2s;
      transform-origin: center;
      transform-box: fill-box;
    }

    @keyframes s2Glow {

      0%,
      100% {
        opacity: .3;
        transform: scale(1);
      }

      50% {
        opacity: .75;
        transform: scale(1.05);
      }
    }

    .spec-card[data-idx="1"].is-active .s2-scores text,
    .spec-card[data-idx="1"].is-active .s2-annot {
      opacity: 0;
      animation: s2Fade .6s ease-out forwards 1s;
    }

    @keyframes s2Fade {
      to {
        opacity: 1;
      }
    }

    /* ── Specimen 03 · Silent Hunter animations ── */
    .spec-card[data-idx="2"] {
      --accent: #10B981;
    }

    .spec-card[data-idx="2"].is-active .s3-quota,
    .spec-card[data-idx="2"].is-active .s3-hunt {
      stroke-dasharray: 900;
      stroke-dashoffset: 900;
      animation: s3Draw 2.2s cubic-bezier(.6, .2, .2, 1) forwards;
    }

    .spec-card[data-idx="2"].is-active .s3-hunt {
      animation-delay: .7s;
      filter: drop-shadow(0 0 6px rgba(236, 72, 153, .35));
    }

    @keyframes s3Draw {
      to {
        stroke-dashoffset: 0;
      }
    }

    .spec-card[data-idx="2"].is-active .s3-area {
      opacity: 0;
      animation: s3AreaIn 1s ease-out forwards 1.8s;
    }

    @keyframes s3AreaIn {
      to {
        opacity: 1;
      }
    }

    .spec-card[data-idx="2"].is-active .s3-marker,
    .spec-card[data-idx="2"].is-active .s3-legend {
      opacity: 0;
      animation: s3Fade .8s ease-out forwards 2.2s;
    }

    @keyframes s3Fade {
      to {
        opacity: 1;
      }
    }

    .spec-card[data-idx="2"].is-active .s3-comet {
      offset-path: path("M 70 68 L 105 62 L 140 72 L 175 58 L 210 66 L 245 54 L 280 70 L 315 60 L 350 64 L 385 56 L 420 72 L 455 62 L 490 58 L 525 66 L 560 60 L 595 70 L 630 64 L 665 58 L 700 66");
      offset-rotate: 0deg;
      animation: s3Comet 5s linear infinite 2.6s;
      filter: drop-shadow(0 0 6px rgba(16, 185, 129, .75));
      opacity: 0;
    }

    @keyframes s3Comet {
      0% {
        offset-distance: 0%;
        opacity: 0;
      }

      10% {
        opacity: 1;
      }

      90% {
        opacity: 1;
      }

      100% {
        offset-distance: 100%;
        opacity: 0;
      }
    }

    /* Controls */
    .spec-controls {
      margin-top: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      flex-wrap: wrap;
    }

    .spec-nav {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1.5px solid rgba(15, 23, 42, .12);
      background: rgba(255, 255, 255, .9);
      color: #0F172A;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all .25s ease;
      backdrop-filter: blur(8px);
      box-shadow: 0 6px 16px -8px rgba(15, 23, 42, .2);
    }

    .spec-nav svg {
      width: 18px;
      height: 18px;
    }

    .spec-nav:hover {
      transform: translateY(-2px);
      border-color: rgba(59, 130, 246, .5);
      color: #3B82F6;
      box-shadow: 0 10px 24px -8px rgba(59, 130, 246, .35);
    }

    .spec-nav:active {
      transform: translateY(0);
    }

    .spec-dots {
      display: flex;
      gap: 6px;
      padding: 4px;
      background: rgba(255, 255, 255, .65);
      border: 1px solid rgba(15, 23, 42, .08);
      border-radius: 999px;
      backdrop-filter: blur(8px);
    }

    .spec-dot {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px 6px 10px;
      border: none;
      background: transparent;
      cursor: pointer;
      border-radius: 999px;
      font-family: 'Open Sans', sans-serif;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: #64748B;
      transition: all .3s ease;
    }

    /* Rhythm Card Refinement */
    #append-content .disc-rhythm-wrap {
      display: flex;
      align-items: center;
      gap: 32px;
      padding: 4px 0;
    }

    #append-content .mini-svg {
      width: 110px;
      height: 110px;
      transform: rotate(-90deg);
      flex-shrink: 0;
    }

    #append-content .disc-rhythm-meta {
      display: flex;
      flex-direction: column;
      gap: 12px;
      font-family: var(--fb);
      font-size: 15px;
      color: #1e293b;
      flex: 1;
    }

    #append-content .rm-row {
      display: flex;
      align-items: center;
      gap: 12px;
      white-space: nowrap;
    }

    #append-content .rm-row span {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    /* Streak Card Refinement */
    #append-content .streak-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 24px;
      border-bottom: 1px solid #f1f5f9;
      padding-bottom: 16px;
    }

    #append-content .streak-count {
      font-family: var(--fb);
      font-size: 42px;
      font-weight: 700;
      color: #0f172a;
      line-height: 1;
    }

    #append-content .streak-unit {
      font-family: var(--mono);
      font-size: 8px;
      letter-spacing: 0.1em;
      color: #94a3b8;
      line-height: 1.2;
    }

    #append-content .mini-streak-grid {
      display: flex; /* Ensure horizontal */
      flex-direction: row !important;
      gap: 8px;
      justify-content: space-between;
    }

    #append-content .m-day {
      flex: 1;
      aspect-ratio: 1;
      max-width: 42px;
      border-radius: 10px;
      background: #f8fafc;
      border: 1px solid #f1f5f9;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--mono);
      font-size: 10px;
      color: #cbd5e1;
      transition: all 0.4s ease;
    }

    /* Momentum Card Refinement */
    #append-content .disc-card-momentum {
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
      border: none;
      color: #fff;
    }

    #append-content .disc-card-momentum .disc-tag {
      color: rgba(255, 255, 255, 0.4);
    }

    #append-content .momentum-name {
      font-family: var(--fb);
      font-size: 18px;
      color: #fff;
      margin-bottom: 4px;
    }

    #append-content .momentum-sub {
      color: rgba(255, 255, 255, 0.6);
      font-size: 11px;
      margin-bottom: 20px;
    }

    .spec-dot>span {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #CBD5E1;
      transition: all .3s ease;
    }

    .spec-dot>em {
      font-style: normal;
    }

    .spec-dot:hover {
      color: #0F172A;
    }

    .spec-dot:hover>span {
      background: #64748B;
    }

    .spec-dot.on {
      background: linear-gradient(135deg, #3B82F6, #10B981);
      color: #FFFFFF;
      box-shadow: 0 6px 16px -6px rgba(59, 130, 246, .45);
    }

    .spec-dot.on>span {
      background: #FFFFFF;
      box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
      animation: specDotGlow 1.6s ease-out infinite;
    }

    @keyframes specDotGlow {
      0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, .7);
      }

      80%,
      100% {
        box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
      }
    }

    /* Specimen 2 active: rose accent */
    .spec-dots:has(.spec-dot.on[data-go="1"]) .spec-dot.on {
      background: linear-gradient(135deg, #F59E0B, #E11D48);
      box-shadow: 0 6px 16px -6px rgba(225, 29, 72, .45);
    }

    /* Specimen 3 active: emerald accent */
    .spec-dots:has(.spec-dot.on[data-go="2"]) .spec-dot.on {
      background: linear-gradient(135deg, #10B981, #06B6D4);
      box-shadow: 0 6px 16px -6px rgba(16, 185, 129, .45);
    }

    .spec-hint {
      margin-top: 10px;
      text-align: center;
      font-family: 'Open Sans', sans-serif;
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: #94A3B8;
      opacity: .7;
    }

    .spec-controls,
    .spec-hint {
      display: none;
    }

    @media (max-width: 720px) {
      .tb-specimen {
        width: min(calc(100vw - (var(--page-gutter) * 2)), 520px);
        margin-top: 44px;
      }

      .spec-deck {
        min-height: 332px;
      }

      .spec-card {
        padding: 12px 14px 10px;
        border-radius: 18px;
      }

      .spec-card .spec-caption {
        font-size: 12.5px;
      }

      .spec-card .spec-foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
      }

      .spec-card.is-back-1 {
        transform: translateY(-8px) translateX(6px) scale(.984) rotate(.65deg);
        opacity: .64;
      }

      .spec-card.is-back-2 {
        transform: translateY(-14px) translateX(-6px) scale(.962) rotate(-.8deg);
        opacity: .34;
      }
    }

    @media (min-width: 1280px) {
      .tb-specimen {
        width: min(780px, 58vw);
      }

      .spec-deck {
        min-height: 360px;
      }
    }

    @media (prefers-reduced-motion: reduce) {

      .tb-specimen,
      .spec-card,
      .spec-card::before,
      .spec-card .s1-arc,
      .spec-card .s1-rho,
      .spec-card .s1-comet,
      .spec-card .s1-pulse,
      .spec-card .s1-ring,
      .spec-card .s1-halo,
      .spec-card .s2-bar,
      .spec-card .s2-mgr-glow,
      .spec-card .s2-scores text,
      .spec-card .s2-annot,
      .spec-card .s3-quota,
      .spec-card .s3-hunt,
      .spec-card .s3-area,
      .spec-card .s3-marker,
      .spec-card .s3-legend,
      .spec-card .s3-comet,
      .spec-dot.on>span {
        animation: none !important;
        transform: none !important;
      }

      .spec-card.is-active .s1-arc,
      .spec-card.is-active .s3-quota,
      .spec-card.is-active .s3-hunt {
        stroke-dashoffset: 0 !important;
      }

      .spec-card .s1-rho,
      .spec-card .s1-comet,
      .spec-card .s2-scores text,
      .spec-card .s2-annot,
      .spec-card .s3-area,
      .spec-card .s3-marker,
      .spec-card .s3-legend {
        opacity: 1 !important;
      }

      .spec-parallax {
        transform: none !important;
      }
    }

    body.is-light-mode .mouse-icon {
      border-color: rgba(15, 23, 42, 0.12) !important;
      background: rgba(255, 255, 255, .82) !important;
    }

    body.is-light-mode .mouse-wheel {
      background: #2563EB !important;
    }

    body.is-light-mode .s:not(#q) {
      background: #FFFFFF !important;
      color: #0F172A !important;
      border-top-color: rgba(15, 23, 42, 0.05) !important;
      border-bottom-color: rgba(15, 23, 42, 0.05) !important;
      box-shadow: none !important;
    }

    body.is-light-mode .h2,
    body.is-light-mode .cta-hl,
    body.is-light-mode .last-panel-h,
    body.is-light-mode .onum,
    body.is-light-mode .fi-title,
    body.is-light-mode .ts-title,
    body.is-light-mode .eng-name,
    body.is-light-mode .domain-services-title,
    body.is-light-mode .lc-title,
    body.is-light-mode .zo-title {
      color: #0F172A !important;
    }

    body.is-light-mode .lead,
    body.is-light-mode .cta-sub,
    body.is-light-mode .olabel,
    body.is-light-mode .fi-body,
    body.is-light-mode .ts-desc,
    body.is-light-mode .eng-desc,
    body.is-light-mode .tp-body,
    body.is-light-mode .domain-summary,
    body.is-light-mode .lc-desc,
    body.is-light-mode .dp-when-text,
    body.is-light-mode .dp-cadence,
    body.is-light-mode .svc-desc,
    body.is-light-mode .zo-sub {
      color: #475569 !important;
    }

    body.is-light-mode #append-content #cta {
      position: relative;
      background:
        radial-gradient(1100px 640px at 16% 0%, rgba(34, 197, 94, 0.12), transparent 58%),
        radial-gradient(960px 560px at 84% 0%, rgba(59, 130, 246, 0.14), transparent 56%),
        radial-gradient(760px 360px at 50% 118%, rgba(34, 212, 104, 0.06), transparent 54%),
        linear-gradient(180deg, #FFFFFF 0%, #FBFCFF 58%, #F5F9FD 100%) !important;
      color: #0F172A !important;
      overflow: hidden;
      isolation: isolate;
    }

    body.is-light-mode #append-content #cta::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 1px 1px, rgba(34, 197, 94, 0.07) 1px, transparent 1.6px) 0 0 / 30px 30px,
        radial-gradient(circle at 1px 1px, rgba(59, 130, 246, 0.05) 1px, transparent 1.6px) 15px 15px / 30px 30px;
      opacity: 0.55;
      mask-image: radial-gradient(ellipse at 50% 34%, #000 30%, transparent 86%);
      z-index: 0;
    }

    body.is-light-mode #append-content #cta::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.88), transparent 54%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 52%);
      z-index: 1;
    }

    body.is-light-mode #append-content #cta .w,
    body.is-light-mode #append-content #cta .cta-i {
      position: relative;
      z-index: 2;
    }

    body.is-light-mode #append-content #cta .cta-glow {
      position: absolute;
      inset: -8% 0 auto;
      height: 62%;
      pointer-events: none;
      background:
        radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.5) 28%, rgba(255, 255, 255, 0.14) 44%, transparent 66%),
        radial-gradient(circle at 24% 26%, rgba(34, 197, 94, 0.12), transparent 38%),
        radial-gradient(circle at 76% 24%, rgba(59, 130, 246, 0.14), transparent 40%);
      filter: blur(10px);
      opacity: 0.78;
      mix-blend-mode: screen;
      z-index: 0;
    }

    body.is-light-mode .zo-kicker {
      color: var(--blue) !important;
    }

    body.is-light-mode .domain-nav {
      background: transparent !important;
      border-color: transparent !important;
      align-items: end;
      gap: 10px !important;
    }

    body.is-light-mode #append-content .domains-shell {
      background:
        radial-gradient(circle at 10% 0%, rgba(91, 155, 248, .05), transparent 28%),
        radial-gradient(circle at 90% 100%, rgba(34, 212, 104, .05), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(248, 250, 252, .88)),
        #F8FAFC !important;
      border-color: rgba(15, 23, 42, 0.06) !important;
      box-shadow: 0 28px 70px rgba(15, 23, 42, 0.06) !important;
    }

    body.is-light-mode #append-content .domains-shell::before {
      opacity: .08 !important;
    }

    body.is-light-mode .dn {
      color: #64748B;
      align-items: flex-start;
      justify-content: space-between;
      text-align: left;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .86));
      border-color: rgba(15, 23, 42, 0.06);
      box-shadow: 0 18px 34px rgba(15, 23, 42, 0.05);
      backdrop-filter: blur(12px);
      min-height: 196px;
      border-radius: 28px 28px 18px 18px;
      padding: 18px 16px 16px;
      clip-path: polygon(0 100%, 0 18%, 15% 14%, 31% 24%, 48% 8%, 64% 18%, 80% 12%, 100% 0, 100% 100%) !important;
      transform: none !important;
    }

    body.is-light-mode .dn:nth-child(1) {
      min-height: 176px;
      transform: translateY(58px) !important;
    }

    body.is-light-mode .dn:nth-child(2) {
      min-height: 206px;
      transform: translateY(34px) !important;
    }

    body.is-light-mode .dn:nth-child(3) {
      min-height: 238px;
      transform: translateY(18px) !important;
    }

    body.is-light-mode .dn:nth-child(4) {
      min-height: 272px;
      transform: translateY(6px) !important;
    }

    body.is-light-mode .dn:nth-child(5) {
      min-height: 304px;
      transform: translateY(0) !important;
    }

    body.is-light-mode .dn:hover,
    body.is-light-mode .dn.on {
      transform: translateY(-6px) !important;
      color: var(--domain-color);
      box-shadow:
        0 24px 48px rgba(15, 23, 42, 0.08),
        0 0 0 1px color-mix(in srgb, var(--domain-color) 20%, rgba(15, 23, 42, 0.05));
    }

    body.is-light-mode .dn.on {
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--domain-color) 10%, rgba(255, 255, 255, .98)), rgba(255, 255, 255, .88));
    }

    body.is-light-mode .dn::before {
      inset: 0 auto auto 0;
      right: 0;
      height: 56px;
      opacity: .9;
      background:
        linear-gradient(180deg,
          color-mix(in srgb, var(--domain-color) 36%, rgba(255, 255, 255, .92)) 0%,
          color-mix(in srgb, var(--domain-color) 16%, rgba(255, 255, 255, .72)) 58%,
          transparent 100%);
      clip-path: polygon(0 100%, 0 72%, 16% 68%, 34% 80%, 50% 50%, 66% 68%, 82% 42%, 100% 24%, 100% 100%);
    }

    body.is-light-mode .dn-icon {
      width: 48px;
      height: 48px;
      background:
        radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .92), rgba(255, 255, 255, .6) 52%, rgba(255, 255, 255, .3) 100%);
      box-shadow: 0 0 0 5px color-mix(in srgb, var(--domain-color) 12%, transparent);
    }

    body.is-light-mode .dn-name {
      color: #64748B;
      margin-top: auto;
    }

    body.is-light-mode .dn.on .dn-name {
      color: var(--domain-color);
    }

    body.is-light-mode .dn-bar {
      width: 100%;
      height: 3px;
      transform: none;
      margin-top: 10px;
      opacity: .72;
    }

    body.is-light-mode .dn.on .dn-bar {
      transform: none !important;
    }

    body.is-light-mode .dpanel {
      background: #FFFFFF !important;
      border-color: rgba(15, 23, 42, 0.05) !important;
      box-shadow: 0 10px 40px rgba(15, 23, 42, 0.03) !important;
    }

    body.is-light-mode .dp-when,
    body.is-light-mode .dp-eng,
    body.is-light-mode .domain-services {
      background: #F1F5F9 !important;
      border-color: rgba(15, 23, 42, 0.04) !important;
    }

    body.is-light-mode .svc {
      background: #FFFFFF !important;
      border-color: rgba(15, 23, 42, 0.06) !important;
    }

    body.is-light-mode .svc.open .svc-body {
      background: #F8FAFC !important;
    }

    body.is-light-mode .svc-name {
      color: #0F172A !important;
    }

    body.is-light-mode .svc-tagline {
      color: #64748B !important;
    }

    body.is-light-mode .otile {
      background: #FFFFFF !important;
    }

    body.is-light-mode .out-row {
      background: rgba(15, 23, 42, 0.04) !important;
    }

    body.is-light-mode .fi {
      background: #FFFFFF !important;
      border-color: rgba(15, 23, 42, 0.05) !important;
    }

    body.is-light-mode .fi:hover {
      background: #F8FAFC !important;
    }

    body.is-light-mode .fi-n {
      color: rgba(15, 23, 42, 0.05) !important;
    }

    body.is-light-mode .tp {
      background: #FFFFFF !important;
      border-color: rgba(15, 23, 42, 0.06) !important;
      box-shadow: 0 4px 20px rgba(15, 23, 42, 0.02) !important;
    }

    body.is-light-mode .tp:hover {
      background: #F8FAFC !important;
    }

    body.is-light-mode .lc {
      background: #FFFFFF !important;
      border-color: rgba(15, 23, 42, 0.06) !important;
      box-shadow: 0 8px 30px rgba(15, 23, 42, 0.03) !important;
    }

    body.is-light-mode .lc::before {
      opacity: 0.1;
    }

    body.is-light-mode .lc-foot {
      border-top-color: rgba(15, 23, 42, 0.04) !important;
      background: rgba(15, 23, 42, 0.01) !important;
    }

    body.is-light-mode .lc-phase {
      background: rgba(15, 23, 42, 0.02) !important;
      border-color: rgba(15, 23, 42, 0.04) !important;
    }

    body.is-light-mode .ts-line {
      background: rgba(15, 23, 42, 0.06) !important;
    }

    body.is-light-mode .tout {
      background: #F1F5F9 !important;
      border-color: rgba(15, 23, 42, 0.05) !important;
    }

    body.is-light-mode .tout-v {
      color: #334155 !important;
    }

    body.is-light-mode .eng {
      background: #FFFFFF !important;
      border-color: rgba(15, 23, 42, 0.08) !important;
    }

    body.is-light-mode .emc {
      background: #F1F5F9 !important;
    }

    body.is-light-mode .emv {
      color: #1E293B !important;
    }

    body.is-light-mode .btn-o {
      border-color: rgba(15, 23, 42, 0.12) !important;
      color: #1E293B !important;
    }

    body.is-light-mode .btn-o:hover {
      background: rgba(15, 23, 42, 0.02) !important;
    }


    /* Light Mode Specific Mix Overrides */
    body.is-light-mode .domain-solve {
      color: color-mix(in srgb, #0F172A 85%, var(--domain-color) 15%) !important;
    }

    body.is-light-mode .domain-badge {
      background: color-mix(in srgb, var(--domain-color) 8%, #FFFFFF) !important;
      border-color: color-mix(in srgb, var(--domain-color) 20%, rgba(15, 23, 42, 0.1)) !important;
      color: color-mix(in srgb, #0F172A 70%, var(--domain-color) 30%) !important;
    }

    body.is-light-mode .dp-head-icon {
      background: color-mix(in srgb, var(--domain-color) 10%, #FFFFFF) !important;
      border-color: color-mix(in srgb, var(--domain-color) 20%, rgba(15, 23, 42, 0.1)) !important;
    }

    body.is-light-mode .svc-icon {
      background: #FFFFFF !important;
      border-color: color-mix(in srgb, var(--domain-color) 20%, rgba(15, 23, 42, 0.1)) !important;
    }

    body.is-light-mode .dp-eng-type {
      background: color-mix(in srgb, var(--domain-color) 12%, #FFFFFF) !important;
      color: color-mix(in srgb, #0F172A 75%, var(--domain-color) 25%) !important;
    }

    body.is-light-mode .eng-num,
    body.is-light-mode .dp-when-label,
    body.is-light-mode .dp-eng-label,
    body.is-light-mode .domain-services-label {
      color: color-mix(in srgb, var(--domain-color) 70%, #0F172A 30%) !important;
    }

    /* ── Floating Nav Theme Awareness ── */
    .nav-floating .logo-img {
      transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .nav-floating .brand-sa,
    .nav-floating .brand-detail {
      color: #FFFFFF;
      transition: color 0.4s ease, border-color 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
    }

    body.is-light-mode .nav-floating {
      background: rgba(255, 255, 255, 0.8) !important;
      border-color: rgba(15, 23, 42, 0.08) !important;
      box-shadow: 0 10px 40px rgba(15, 23, 42, 0.08) !important;
    }

    body.is-light-mode .logo-img {
      content: url('/images/ambiz-tech/assets/ambiz-logo-colored.png') !important;
      filter: none !important;
    }

    body.is-light-mode .brand-sa {
      background: linear-gradient(90deg, #0f172a, #475569);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-weight: 800;
    }

    body.is-light-mode .brand-detail {
      background: linear-gradient(90deg, #2563eb, #10b981);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      border-left-color: rgba(15, 23, 42, 0.1) !important;
      font-weight: 600;
    }


    .nav-floating {
      position: fixed;
      top: 30px;
      left: 30px;
      z-index: 9999 !important;
      padding: 12px 24px;
      background: rgba(255, 255, 255, 0.03);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 100px;
      display: flex;
      align-items: center;
      gap: 16px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
      opacity: 0;
      animation: navSlideIn 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.2s;
      pointer-events: auto;
      /* ensure interaction */
    }

    /* Ensure opacity stays 1 after animation even if other classes trigger */
    #append-content .nav-floating.in {
      opacity: 1 !important;
    }

    @keyframes navSlideIn {
      from {
        transform: translateX(-20px);
        opacity: 0;
      }

      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    .brand-cycle {
      position: relative;
      height: 24px;
      display: flex;
      align-items: center;
      min-width: 320px;
    }

    .brand-item {
      position: absolute;
      left: 0;
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 12px;
      opacity: 0;
      transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1), transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
      transform: translateY(8px);
      will-change: opacity, transform;
    }

    .brand-item.active {
      opacity: 1;
      transform: translateY(0);
    }

    .brand-sa {
      font-family: var(--fh);
      font-weight: 700;
      font-size: 16px;
      letter-spacing: -0.02em;
    }

    .brand-ambiz {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .logo-img {
      height: 18px;
      width: auto;
    }

    .brand-detail {
      font-family: var(--fh);
      font-weight: 500;
      font-size: 10px;
      letter-spacing: 0.2em;
      color: rgba(255, 255, 255, 0.4);
      text-transform: uppercase;
      border-left: 1px solid rgba(255, 255, 255, 0.15);
      padding-left: 12px;
      margin-left: 2px;
    }

    /* ── Background Elements (Fixed) ── */
    .ambient,
    .bg-grid,
    .particles,
    #hero-field,
    #text-block,
    #stage-wrap {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: var(--viewport-h);
    }

    #hero-field {
      z-index: 4;
      pointer-events: none;
      opacity: 0;
      transition: opacity .9s ease, transform 1.2s ease;
    }

    body.is-light-mode #hero-field {
      opacity: 1;
    }

    body.is-hero-scrolled #hero-field,
    body.is-planet-zoom #hero-field,
    body.is-self-diagnostic #hero-field,
    body.is-bottom #hero-field {
      opacity: 0 !important;
      transform: translateY(-16px);
    }

    .hero-field-bg {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 10% 40%, rgba(59, 130, 246, 0.04) 0%, transparent 60%),
        radial-gradient(circle at 90% 60%, rgba(16, 185, 129, 0.04) 0%, transparent 60%),
        radial-gradient(circle at 80% 90%, rgba(6, 182, 212, 0.03) 0%, transparent 50%),
        linear-gradient(180deg, #FFFFFF 0%, #FAFCFC 50%, #F8F9FA 100%);
    }

    .hero-field-contours,
    .hero-field-contours::before,
    .hero-field-contours::after {
      content: "";
      position: absolute;
      inset: -60px;
      background-repeat: no-repeat;
      background-size: cover;
      opacity: .82;
      filter: blur(.1px);
    }

    .hero-field-contours {
      mask-image: linear-gradient(90deg, black 0%, rgba(0, 0, 0, 0.5) 15%, transparent 35%, transparent 65%, rgba(0, 0, 0, 0.5) 85%, black 100%);
      -webkit-mask-image: linear-gradient(90deg, black 0%, rgba(0, 0, 0, 0.5) 15%, transparent 35%, transparent 65%, rgba(0, 0, 0, 0.5) 85%, black 100%);
    }

    .hero-field-contours::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' fill='none'%3E%3Cg stroke='%233B82F6' stroke-opacity='0.25' stroke-width='0.4'%3E%3Cpath d='M157 486c78-103 205-163 318-161 93 2 164 48 255 43 114-5 154-74 268-72 132 2 164 120 308 126 89 4 164-23 214-93'/%3E%3Cpath d='M144 516c80-90 200-139 306-136 87 2 165 38 247 36 110-3 161-56 274-52 136 5 177 109 313 110 82 1 153-20 216-80'/%3E%3Cpath d='M133 551c80-82 197-125 300-122 82 2 164 31 243 29 107-2 163-47 276-41 140 8 186 100 319 98 76-1 146-18 218-69'/%3E%3Cpath d='M122 590c81-72 194-110 294-108 77 2 161 25 238 23 104-2 166-39 279-32 143 9 196 91 325 85 71-3 138-19 220-57'/%3E%3Cpath d='M116 632c80-61 186-94 285-92 75 2 153 25 229 21 105-6 173-35 286-23 142 15 205 87 334 74 63-6 125-24 213-52'/%3E%3Cpath d='M292 164c56 26 88 77 83 129-4 41-32 76-31 118 2 52 42 78 41 132-2 62-80 78-83 146-2 42 12 77 53 101'/%3E%3Cpath d='M345 116c65 35 104 96 99 159-4 50-39 90-36 140 3 62 53 91 51 156-2 75-95 95-97 176-1 47 16 87 64 113'/%3E%3Cpath d='M1139 238c62-57 155-76 230-52 60 20 105 73 165 91 76 23 131-13 208 13 89 31 98 136 194 170 59 21 116 17 175-22'/%3E%3Cpath d='M1090 295c74-56 170-71 247-44 62 21 110 76 172 95 79 24 136-10 215 19 92 33 104 139 203 174 61 21 122 16 183-26'/%3E%3Cpath d='M1040 356c83-56 183-69 264-41 66 23 118 81 183 100 83 24 141-11 221 21 97 39 110 144 211 177 64 22 129 16 190-31'/%3E%3C/g%3E%3C/svg%3E");
      background-size: 200%;
      background-position: left center;
      animation: topoDriftA 45s ease-in-out infinite;
    }

    .hero-field-contours::after {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' fill='none'%3E%3Cg stroke='%2310B981' stroke-opacity='0.25' stroke-width='0.4'%3E%3Cpath d='M973 454c58-89 151-145 239-151 71-5 130 22 201 12 89-12 128-68 218-74 104-6 146 72 260 62 71-7 128-35 165-99'/%3E%3Cpath d='M944 494c60-77 149-123 229-129 66-5 129 15 196 6 86-11 130-57 220-61 108-5 154 70 266 56 65-8 121-35 167-89'/%3E%3Cpath d='M915 538c61-67 147-106 222-112 63-4 126 12 191 3 84-11 131-49 220-51 111-3 161 66 272 47 61-10 114-35 169-79'/%3E%3Cpath d='M891 584c62-58 144-91 214-96 61-4 120 11 184 0 83-13 133-44 221-43 114 2 170 62 280 37 57-13 107-37 171-69'/%3E%3Cpath d='M874 630c62-47 138-77 203-82 58-4 112 10 174-3 81-16 135-40 222-36 118 4 180 58 291 24 53-16 99-39 173-59'/%3E%3C/g%3E%3C/svg%3E");
      background-size: 200%;
      background-position: right center;
      animation: topoDriftB 55s ease-in-out infinite;
    }

    @keyframes topoDriftA {
      0% {
        transform: translate3d(0, 0, 0) scale(1.05);
      }

      33% {
        transform: translate3d(30px, -20px, 0) scale(1.08);
      }

      66% {
        transform: translate3d(-20px, -30px, 0) scale(1.02);
      }

      100% {
        transform: translate3d(0, 0, 0) scale(1.05);
      }
    }

    @keyframes topoDriftB {
      0% {
        transform: translate3d(0, 0, 0) scale(1.05);
      }

      33% {
        transform: translate3d(-30px, 30px, 0) scale(1.02);
      }

      66% {
        transform: translate3d(20px, 10px, 0) scale(1.08);
      }

      100% {
        transform: translate3d(0, 0, 0) scale(1.05);
      }
    }

    .hero-field-dots {
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(circle, rgba(59, 130, 246, 0.15) 1px, transparent 1.5px),
        radial-gradient(circle, rgba(16, 185, 129, 0.15) 1px, transparent 1.5px),
        radial-gradient(circle, rgba(148, 163, 184, 0.1) 0.5px, transparent 1px);
      background-size: 32px 32px, 36px 36px, 16px 16px;
      background-position: 0 0, 18px 18px, 8px 8px;
      mask-image:
        radial-gradient(circle at 15% 55%, black 0%, rgba(0, 0, 0, 0.4) 20%, transparent 45%),
        radial-gradient(circle at 85% 45%, black 0%, rgba(0, 0, 0, 0.4) 20%, transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.06) 0%, transparent 65%);
      -webkit-mask-image:
        radial-gradient(circle at 15% 55%, black 0%, rgba(0, 0, 0, 0.4) 20%, transparent 45%),
        radial-gradient(circle at 85% 45%, black 0%, rgba(0, 0, 0, 0.4) 20%, transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.06) 0%, transparent 65%);
      opacity: .8;
      animation: dotsDrift 60s linear infinite;
    }

    @keyframes dotsDrift {
      0% {
        background-position: 0 0, 18px 18px, 8px 8px;
      }

      100% {
        background-position: -32px -32px, -18px -18px, -24px -24px;
      }
    }

    .hero-field-meta {
      position: absolute;
      font-family: 'Open Sans', sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .25em;
      text-transform: uppercase;
      line-height: 1.5;
      opacity: .22;
      transform: translateY(12px);
      animation: heroFieldIn .95s cubic-bezier(.16, 1, .3, 1) forwards 1.05s;
    }

    .hero-field-meta.left {
      left: clamp(80px, 8vw, 160px);
      top: clamp(280px, 32vh, 360px);
      color: #5c8ef0;
    }

    .hero-field-meta.right {
      right: clamp(80px, 8vw, 160px);
      top: clamp(280px, 32vh, 360px);
      color: #68c5a1;
      max-width: 240px;
      text-align: left;
    }

    body.is-light-mode #text-block {
      align-items: stretch;
    }

    body.is-light-mode #text-block .tb-line,
    body.is-light-mode #text-block .tb-subtext,
    body.is-light-mode #text-block .tb-specimen {
      text-align: center;
    }

    body.is-light-mode #text-block .tb-subtext {
      color: #334155 !important;
    }

    body.is-light-mode #text-block .tb-subtext b {
      color: #0f172a !important;
    }

    @media (max-width: 1100px) {
      :root {
        --hero-safe-top: clamp(112px, 14svh, 180px);
      }

      .hero-field-meta.left {
        left: 84px;
        top: 232px;
      }

      .hero-field-meta.right {
        right: 76px;
        top: 232px;
      }

      .tb-line,
      .tb-subtext,
      .tb-specimen {
        margin-left: auto;
        margin-right: auto;
      }

      .tb-specimen {
        width: min(620px, 56vw);
      }

      #append-content .ds-step:not(.ds-step-people) .ds-step-card,
      #append-content .ds-step-people .ds-step-card,
      #append-content .ds-step[data-domain="network"] .ds-step-card {
        right: clamp(24px, 3vw, 44px);
      }

      #append-content .ds-domain-artifact-scene:not([data-domain="people"]) .ds-domain-artifact-visual {
        left: clamp(-220px, -14vw, -72px);
        width: min(54vw, 760px, calc((var(--viewport-h) - 160px) * 900 / 640));
      }
    }

    @media (max-width: 1560px) and (min-width: 901px) and (max-height: 920px),
    (max-width: 1440px) and (min-width: 901px) {
      :root {
        --hero-safe-top: clamp(96px, 11svh, 148px);
      }

      #text-block {
        justify-content: flex-start;
        gap: clamp(10px, 1.8vh, 20px);
        padding-bottom: clamp(18px, 3.2vh, 36px);
      }

      .tb-line {
        font-size: clamp(2.3rem, 4.7vw, 4rem);
        line-height: 1.06;
        max-width: min(940px, calc(100vw - (var(--page-gutter) * 2)));
      }

      .tb-subtext {
        font-size: clamp(13px, 0.96vw, 16px);
        line-height: 1.55;
        max-width: min(650px, calc(100vw - (var(--page-gutter) * 2)));
        margin-bottom: clamp(8px, 1.2vh, 14px);
      }

      .tb-specimen {
        width: min(640px, 48vw);
        margin-top: 10px;
      }

      .spec-deck {
        min-height: 280px;
      }

      .scroll-hint {
        bottom: 22px;
        gap: 10px;
      }
    }

    @media (max-width: 900px) {
      :root {
        --hero-safe-top: clamp(108px, 13svh, 156px);
      }

      #planetary-spacer {
        height: 0 !important;
        min-height: 0 !important;
        display: none !important;
      }

      #hero-field {
        overflow: hidden;
      }

      .hero-field-meta.left,
      .hero-field-meta.right,
      .hero-field-plus {
        display: none;
      }

      #text-block {
        justify-content: center;
        padding-top: var(--hero-safe-top);
        padding-bottom: 32px;
      }

      .tb-line,
      .tb-subtext,
      .tb-specimen {
        margin-left: auto;
        margin-right: auto;
      }

      .tb-line {
        max-width: 720px;
      }

      .tb-subtext {
        max-width: 620px;
      }

      .tb-specimen {
        width: min(88vw, 640px);
        margin-top: 34px;
      }

      body.is-light-mode #text-block .tb-line {
        max-width: 100%;
        font-size: clamp(2.4rem, 7vw, 3.6rem);
      }

      .spec-deck {
        min-height: 312px;
      }

      #append-content .s {
        padding-block: clamp(64px, 10vw, 96px);
      }

      #append-content .story-modal-panel {
        max-height: min(calc(var(--viewport-h) - 32px), 920px);
      }

      #zoom-reveal-section {
        height: auto;
        padding: clamp(56px, 10vw, 88px) 0 clamp(40px, 8vw, 64px);
        background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
      }

      #zoom-reveal-pin {
        position: relative;
        top: auto;
        height: auto;
        min-height: 0;
        overflow: visible;
      }

      #zoom-overlay,
      #zoom-reveal-section #zoom-overlay.is-detached {
        position: relative;
        inset: auto;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        pointer-events: auto !important;
        padding: 0 20px;
        transition: none !important;
      }

      #zoom-overlay .zo-title {
        font-size: clamp(2.3rem, 9vw, 3.8rem);
        line-height: 1.02;
      }

      #zoom-overlay .zo-sub {
        max-width: 28ch;
        margin-top: 20px;
        line-height: 1.55;
      }

      #append-rest .theme-transition-overlay {
        display: none !important;
      }

      #append-rest {
        background: #ffffff !important;
      }

      #append-content .ds-stage-topline {
        align-items: center;
        gap: 12px;
        margin-bottom: 8px;
      }

      #append-content .ds-progress {
        min-width: 0;
        flex: 1;
      }

      #append-content .ds-stage-panels {
        min-height: 0;
        margin-bottom: 14px;
      }

      #append-content .ds-panel {
        position: relative;
        inset: auto;
        display: none;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        transition: none;
      }

      #append-content .ds-panel.is-active {
        display: block;
      }

      #append-content .ds-stage-index {
        font-size: clamp(2rem, 10vw, 3.25rem);
        line-height: 0.92;
      }

      #append-content .ds-panel-title {
        font-size: clamp(2.35rem, 12vw, 4rem);
        line-height: 0.94;
        letter-spacing: -0.07em;
        margin: 0;
      }

      #append-content .ds-mobile-domain-head {
        display: grid;
        gap: 4px;
        margin-bottom: 10px;
      }

      #append-content .ds-mobile-domain-index {
        font-family: var(--serif);
        font-size: clamp(2rem, 9vw, 3rem);
        line-height: 0.9;
        letter-spacing: -0.08em;
        color: #0f172a;
      }

      #append-content .ds-mobile-domain-title {
        margin: 0;
        font-family: var(--open-sans);
        font-size: clamp(2.15rem, 11vw, 3.5rem);
        line-height: 0.96;
        letter-spacing: -0.07em;
        color: #0f172a;
      }

      #append-content .ds-step-question {
        font-size: clamp(1.45rem, 7.2vw, 2.1rem);
        line-height: 1.02;
      }

      #append-content .ds-step[data-domain="systems"] .ds-mobile-domain-title {
        font-size: clamp(1.95rem, 10vw, 3rem);
      }

      #append-content .ds-step[data-domain="systems"] .ds-step-question {
        font-size: clamp(1.32rem, 6.4vw, 1.8rem);
        line-height: 1.06;
      }
    }

    @keyframes heroFieldIn {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .ambient {
      z-index: 0;
      pointer-events: none;
      background:
        radial-gradient(ellipse 54% 48% at 22% 22%, rgba(59, 130, 246, .22) 0%, transparent 100%),
        radial-gradient(ellipse 56% 48% at 80% 78%, rgba(139, 92, 246, .24) 0%, transparent 100%),
        radial-gradient(ellipse 54% 40% at 52% 84%, rgba(13, 144, 58, .22) 0%, transparent 100%),
        radial-gradient(ellipse 42% 28% at 50% 66%, rgba(111, 243, 204, .10) 0%, transparent 100%);
      opacity: 0;
      transition: opacity 2.5s ease;
    }

    .ambient.on {
      opacity: 1;
    }

    .bg-grid {
      z-index: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(22, 44, 100, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(22, 44, 100, .12) 1px, transparent 1px);
      background-size: 50px 50px;
      mask-image: radial-gradient(circle at 50% 50%, black 20%, transparent 72%);
      opacity: 0;
      transition: opacity 2.5s ease;
    }

    .bg-grid.on {
      opacity: 1;
    }

    .particles {
      z-index: 0;
      pointer-events: none;
    }

    .particle {
      position: absolute;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 0 10px 1px rgba(255, 255, 255, 0.4);
      animation: twinkle var(--d) ease-in-out infinite alternate var(--dl);
    }

    @keyframes twinkle {
      from {
        opacity: 0.2;
        transform: scale(0.8);
      }

      to {
        opacity: 0.8;
        transform: scale(1.1);
      }
    }

    /* ── Intro Text Block ── */
    #text-block {
      z-index: 50;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      text-align: center;
      transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
      pointer-events: none;
      padding-top: var(--hero-safe-top);
      padding-bottom: clamp(32px, 6vh, 72px);
      height: var(--viewport-h);
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      visibility: visible;
      transform: translateZ(0);
      backface-visibility: hidden;
      will-change: opacity, transform;
      gap: clamp(14px, 2.4vh, 28px);
    }

    #text-block.is-detached {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
      transform: translate3d(0, -120vh, 0) !important;
      filter: none !important;
      transition: none !important;
      contain: layout paint style;
      will-change: auto;
    }

    /* Hide jargon in planetary phase */
    body.phase-planetary #text-block {
      opacity: 0;
      pointer-events: none;
      transform: translateY(-20px);
    }

    .tb-line {
      font-family: var(--open-sans);
      font-size: clamp(2.6rem, 5.5vw, 4.6rem);
      font-weight: 600;
      line-height: 1.1;
      letter-spacing: -0.03em;
      text-align: center;
      max-width: min(1000px, calc(100vw - (var(--page-gutter) * 2)));
      padding: 0 var(--page-gutter);
      margin-left: auto;
      margin-right: auto;
      text-wrap: balance;
    }

    .tb-part {
      display: inline-block;
      opacity: 0;
      transform: translateY(20px);
    }

    .tb-part.p1 {
      animation: partIn 1.2s cubic-bezier(.16, 1, 0.3, 1) forwards 0.6s;
    }

    .tb-part.p2 {
      animation: partIn 1.2s cubic-bezier(.16, 1, 0.3, 1) forwards 2.2s;
    }

    /* Subtext specific reveal */
    .tb-subtext {
      margin-top: 8px;
      margin-bottom: clamp(12px, 2vh, 20px);
      font-family: var(--fb);
      font-weight: 400;
      font-size: clamp(14px, 1.05vw, 18px);
      line-height: 1.68;
      color: rgba(255, 255, 255, 0.6);
      max-width: min(700px, calc(100vw - (var(--page-gutter) * 2)));
      text-align: center;
      opacity: 0;
      transform: translateY(16px);
      pointer-events: none;
      margin-left: auto;
      margin-right: auto;
      text-wrap: balance;
      animation: partIn .9s cubic-bezier(.16, 1, 0.3, 1) forwards 3.55s;
    }

    body.phase-planetary .tb-subtext {
      opacity: 0;
      transform: translateY(-20px);
    }

    .tb-subtext b {
      font-weight: 600;
      color: rgba(255, 255, 255, 0.9);
    }

    #text-block.revealed .tb-subtext {
      opacity: 0;
      pointer-events: none;
    }

    @keyframes partIn {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .tb-line .alpha-accent {
      color: var(--blue);
      font-style: italic;
      font-weight: 600;
      padding: 0 4px;
    }

    .tb-line .hard-accent {
      color: var(--emerald);
      text-shadow: 0 0 32px rgba(16, 185, 129, 0.22);
      font-weight: 600;
    }

    @keyframes lineIn {
      from {
        opacity: 0;
        transform: translateY(14px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Scroll Hint */
    .scroll-hint {
      position: fixed;
      bottom: 40px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 12px;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.3);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 15px;
      transition: opacity 0.6s ease, transform 0.8s ease;
      z-index: 60;
      will-change: opacity, transform;
    }

    .scroll-hint.hide {
      opacity: 0;
    }

    .mouse-icon {
      width: 22px;
      height: 36px;
      border: 2px solid rgba(255, 255, 255, 0.2);
      border-radius: 12px;
      position: relative;
    }

    .mouse-wheel {
      width: 4px;
      height: 8px;
      background: #fff;
      border-radius: 2px;
      position: absolute;
      top: 6px;
      left: 50%;
      transform: translateX(-50%);
      animation: wheelMove 1.5s ease-in-out infinite;
    }

    @keyframes wheelMove {
      0% {
        top: 6px;
        opacity: 0;
      }

      50% {
        top: 18px;
        opacity: 1;
      }

      100% {
        top: 24px;
        opacity: 0;
      }
    }

    /* ── Stage ── */
    #stage-wrap {
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      z-index: 10;
      opacity: 0;
      transition: opacity .5s ease;
      perspective: 1100px;
    }

    #stage-wrap.on {
      opacity: 1;
    }

    #stage-wrap.is-detached {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
      transition: none !important;
    }

    #zoom-overlay.is-detached {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
      transform: translateY(12px) !important;
      transition: none !important;
    }

    /* Core orb — zoom target for scroll-driven reveal */
    .planet-core {
      will-change: transform, opacity, filter;
      transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.8s ease, filter 0.8s ease;
    }

    #stage {
      position: absolute;
      top: 0;
      left: 0;
    }

    /* ── Sales Alpha Background Field ── */
    #stage::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 1720px;
      height: 1280px;
      transform: translate(-50%, -52%);
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(circle at 50% 50%, rgba(42, 88, 178, 0.14) 0%, transparent 30%),
        radial-gradient(circle at 50% 54%, color-mix(in srgb, var(--sa-field-bg) 78%, #091c3e) 0%, color-mix(in srgb, var(--sa-field-bg-deep) 72%, transparent) 48%, transparent 72%),
        radial-gradient(circle at 50% 50%, transparent 56%, rgba(255, 255, 255, 0.018) 56.3%, transparent 57.2%);
      opacity: 0.92;
      filter: blur(1px);
    }

    .orbit-halo {
      position: absolute;
      top: 0;
      left: 0;
      width: 940px;
      height: 940px;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      pointer-events: none;
      z-index: 1;
      background:
        radial-gradient(circle at 50% 50%, var(--sa-halo-core) 0%, var(--sa-halo-mid) 22%, rgba(22, 61, 126, 0.12) 38%, var(--sa-halo-edge) 58%, transparent 74%);
      filter: blur(6px);
      opacity: 0;
    }

    #stage-wrap.on .orbit-halo {
      animation: haloIn 1.8s ease-out forwards 0.2s, haloDrift 12s ease-in-out infinite 2.2s;
    }

    @keyframes haloIn {
      from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
      }

      to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }
    }

    @keyframes haloDrift {

      0%,
      100% {
        filter: blur(6px) saturate(1);
      }

      50% {
        filter: blur(10px) saturate(1.06);
      }
    }

    /* Faint orbits stay behind the orb and labels. */
    .ring {
      position: absolute;
      top: 0;
      left: 0;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      pointer-events: none;
      opacity: 0;
      z-index: 2;
    }

    #stage-wrap.on .ring {
      animation: ringIn 1.8s ease-out forwards;
    }

    #stage-wrap.on .ring-1 {
      animation-delay: 0.4s;
    }

    #stage-wrap.on .ring-2 {
      animation-delay: 0.8s;
    }

    #stage-wrap.on .ring-3 {
      animation-delay: 1.2s;
    }

    #stage-wrap.on .ring-4 {
      animation-delay: 1.45s;
    }

    @keyframes ringIn {
      to {
        opacity: 1;
      }
    }

    .ring-1 {
      width: 470px;
      height: 470px;
      border: 1px solid var(--sa-ring);
      box-shadow: 0 0 28px rgba(81, 144, 255, 0.08);
    }

    .ring-2 {
      width: 720px;
      height: 720px;
      border: 1px solid var(--sa-ring-soft);
    }

    .ring-3 {
      width: 1040px;
      height: 1040px;
      border: 1px solid rgba(143, 187, 255, 0.025);
    }

    .ring-4 {
      width: 1460px;
      height: 1460px;
      border: 1px solid rgba(131, 167, 221, 0.02);
    }

    .topo-field,
    .signal-field,
    .system-particles {
      position: absolute;
      top: 0;
      left: 0;
      transform: translate(-50%, -50%);
      pointer-events: none;
      opacity: 0;
    }

    .topo-field {
      width: 1520px;
      height: 1120px;
      z-index: 3;
      overflow: visible;
      filter: drop-shadow(0 0 14px rgba(41, 105, 196, 0.08));
    }

    #stage-wrap.on .topo-field {
      animation: contourIn 1.7s ease-out forwards 0.55s, topoDrift 22s ease-in-out infinite 3s;
    }

    @keyframes contourIn {
      from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.94);
      }

      to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }
    }

    @keyframes topoDrift {

      0%,
      100% {
        transform: translate(-50%, -50%) scale(1);
      }

      50% {
        transform: translate(-50%, calc(-50% + 10px)) scale(1.01);
      }
    }

    .topo-line,
    .signal-path {
      fill: none;
      stroke-linecap: round;
      vector-effect: non-scaling-stroke;
    }

    .topo-line {
      stroke: var(--sa-contour-soft);
      stroke-width: 1.2;
    }

    .topo-line.is-strong {
      stroke: var(--sa-contour);
      stroke-width: 1.4;
    }

    .topo-line.is-soft {
      opacity: 0.72;
    }

    .topo-line.dash {
      stroke-dasharray: 3 10;
      opacity: 0.42;
    }

    .signal-field {
      width: 1280px;
      height: 920px;
      z-index: 4;
    }

    #stage-wrap.on .signal-field {
      animation: signalIn 1.6s ease-out forwards 0.95s;
    }

    @keyframes signalIn {
      from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.98);
      }

      to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }
    }

    .signal-path {
      stroke-width: 1.4;
      opacity: 0.72;
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      animation: drawSignal 2.8s cubic-bezier(.22, 1, .36, 1) forwards;
    }

    .signal-path.blue {
      stroke: var(--sa-signal-blue);
    }

    .signal-path.green {
      stroke: var(--sa-signal-green);
    }

    .signal-path.soft {
      stroke-width: 1.1;
      opacity: 0.48;
    }

    .signal-path.delay-1 {
      animation-delay: 1.2s;
    }

    .signal-path.delay-2 {
      animation-delay: 1.45s;
    }

    .signal-node {
      fill: rgba(193, 225, 255, 0.28);
      opacity: 0;
      animation: nodeBloom 1s ease-out forwards;
    }

    .signal-node.delay-1 {
      animation-delay: 2.1s;
    }

    .signal-node.delay-2 {
      animation-delay: 2.35s;
    }

    .signal-node.delay-3 {
      animation-delay: 2.55s;
    }

    @keyframes drawSignal {
      to {
        stroke-dashoffset: 0;
      }
    }

    @keyframes nodeBloom {
      from {
        opacity: 0;
        transform: scale(0);
        transform-origin: center;
      }

      to {
        opacity: 0.6;
        transform: scale(1);
        transform-origin: center;
      }
    }

    .system-particles {
      width: 1220px;
      height: 900px;
      z-index: 5;
    }

    #stage-wrap.on .system-particles {
      animation: particlesIn 1.4s ease-out forwards 1.1s;
    }

    @keyframes particlesIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    .system-particles span {
      position: absolute;
      width: var(--size, 3px);
      height: var(--size, 3px);
      left: var(--x);
      top: var(--y);
      border-radius: 50%;
      background: var(--sa-particle);
      box-shadow: 0 0 8px rgba(119, 181, 255, 0.18);
      opacity: var(--alpha, 0.4);
      animation: particlePulse var(--dur, 7s) ease-in-out infinite var(--delay, 0s);
    }

    @keyframes particlePulse {

      0%,
      100% {
        opacity: calc(var(--alpha, 0.4) * 0.55);
        transform: scale(0.9);
      }

      50% {
        opacity: var(--alpha, 0.4);
        transform: scale(1.15);
      }
    }

    /* ── Planet / Sun Core ── */
    .planet-core {
      position: absolute;
      top: 0;
      left: 0;
      width: 360px;
      height: 360px;
      transform: translate(-50%, -50%) scale(0);
      border-radius: 47% 53% 50% 50% / 44% 48% 52% 56%;
      background:
        radial-gradient(circle at 35% 24%, rgba(255, 255, 255, .28) 0%, transparent 40%),
        radial-gradient(circle at 60% 60%, rgba(111, 243, 204, .15) 0%, transparent 50%),
        linear-gradient(150deg, rgba(26, 84, 159, .65), rgba(7, 20, 49, .95) 80%),
        url('/images/ambiz-tech/assets/planet_core_collage.png') center/cover no-repeat;
      background-blend-mode: overlay, overlay, multiply, normal;
      box-shadow: inset -20px -20px 50px rgba(0, 0, 0, 0.8), inset 10px 10px 30px rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(126, 227, 183, .16);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 36px;
      z-index: 20;
      overflow: visible;
    }

    /* ── Planet Text Ring ── */
    .planet-text-ring {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 440px;
      height: 440px;
      pointer-events: none;
      z-index: 21;
      opacity: 0;
      transition: opacity 1.5s ease 0.8s;
    }

    #stage-wrap.on .planet-text-ring {
      opacity: 1;
    }

    .planet-text-ring .ring-outer {
      animation: spinCW 60s linear infinite;
      transform-origin: center;
      transform-box: fill-box;
    }

    .planet-text-ring .ring-inner {
      animation: spinCCW 45s linear infinite;
      transform-origin: center;
      transform-box: fill-box;
    }

    @keyframes spinCW {
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes spinCCW {
      to {
        transform: rotate(-360deg);
      }
    }

    #stage-wrap.on .planet-core {
      animation:
        popIn 1.4s cubic-bezier(.34, 1.56, .64, 1) forwards 0.2s,
        corePulse 4.0s ease-in-out infinite 2.0s;
    }

    @keyframes popIn {
      from {
        transform: translate(-50%, -50%) scale(0);
      }

      to {
        transform: translate(-50%, -50%) scale(1);
      }
    }

    @keyframes corePulse {

      0%,
      100% {
        box-shadow:
          0 0 55px 8px rgba(59, 130, 246, .38),
          0 0 110px 20px rgba(59, 130, 246, .18),
          0 0 200px 55px rgba(99, 90, 246, .10),
          0 0 120px 44px rgba(16, 185, 129, .10),
          inset 0 0 45px rgba(0, 242, 255, .09);
      }

      50% {
        box-shadow:
          0 0 80px 14px rgba(59, 130, 246, .60),
          0 0 160px 36px rgba(59, 130, 246, .28),
          0 0 280px 80px rgba(99, 90, 246, .18),
          0 0 140px 54px rgba(16, 185, 129, .18),
          inset 0 0 70px rgba(0, 242, 255, .18);
      }
    }

    .planet-core::before {
      content: '';
      position: absolute;
      inset: -22px;
      border-radius: 44% 56% 48% 52% / 50% 42% 58% 50%;
      border: 1px solid rgba(111, 243, 204, .16);
      opacity: 0;
    }

    #stage-wrap.on .planet-core::before {
      animation: coronaPulse 4.5s ease-in-out infinite 2.2s;
    }

    .planet-core::after {
      content: '';
      position: absolute;
      inset: -52px;
      border-radius: 51% 49% 46% 54% / 58% 42% 58% 42%;
      border: 1px solid rgba(59, 130, 246, .08);
      opacity: 0;
    }

    #stage-wrap.on .planet-core::after {
      animation: coronaPulse 4.5s ease-in-out infinite 2.8s;
    }

    @keyframes coronaPulse {

      0%,
      100% {
        opacity: 0;
        transform: scale(0.96);
      }

      50% {
        opacity: 1;
        transform: scale(1.05);
      }
    }

    .planet-title {
      font-family: var(--fh);
      font-weight: 800;
      font-size: 56px;
      line-height: .93;
      background: linear-gradient(to bottom, #fff 20%, #90baff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      letter-spacing: -.04em;
      position: relative;
      z-index: 1;
      margin-bottom: 12px;
    }

    .planet-desc {
      font-size: 10px;
      line-height: 1.6;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.5);
      max-width: 250px;
      opacity: 0;
      letter-spacing: 0.02em;
    }

    #stage-wrap.on .planet-desc {
      animation: fadeIn 1.2s ease-out forwards 1.8s;
    }

    @keyframes fadeIn {
      to {
        opacity: 1;
      }
    }

    /* ── Satellites ── */
    .sat {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      pointer-events: auto;
      transform: translate(-50%, -50%);
    }

    #stage-wrap.on .sat {
      animation: satIn 1.5s ease-out forwards;
    }

    @keyframes satIn {
      to {
        opacity: 1;
      }
    }

    .sat-pill {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 11px 22px;
      border-radius: 36px 36px 36px 36px;
      background: linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
      border: 1px solid rgba(255, 255, 255, .10);
      backdrop-filter: blur(18px);
      font-family: var(--fh);
      font-weight: 700;
      font-size: 13px;
      letter-spacing: .10em;
      text-transform: uppercase;
      color: #fff;
      white-space: nowrap;
      transition: background .3s, border-color .3s, box-shadow .3s;
      cursor: default;
    }

    .sat-pill:hover {
      background: linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .05));
      border-color: rgba(255, 255, 255, .20);
      box-shadow: 0 10px 32px rgba(0, 0, 0, .35);
    }

    /* ── Orbiting Nodes (Solar System) ── */
    .orbit-system-wrapper {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      z-index: 15;
      opacity: 0;
      pointer-events: none;
      transform: scale(0.6) rotate(-20deg);
      transition: all 1.8s cubic-bezier(.34, 1.56, .64, 1) 0.6s;
    }

    #stage-wrap.on .orbit-system-wrapper {
      opacity: 1;
      transform: scale(1) rotate(0deg);
    }

    .sat-orbit-ring {
      position: absolute;
      top: -360px;
      left: -360px;
      width: 720px;
      height: 720px;
      border-radius: 50%;
      animation: orbitSpin 65s linear infinite;
      animation-delay: var(--rot);
    }

    .sat-orbit-node {
      position: absolute;
      top: 0;
      left: 50%;
      width: 0;
      height: 0;
      transform: translate(-50%, -50%);
      animation: reverseSpin 65s linear infinite;
      animation-delay: var(--rot);
      pointer-events: auto;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .orbit-avatar {
      position: absolute;
      width: 58px;
      height: 58px;
      border-radius: 50%;
      object-fit: cover;
      border: 1px solid rgba(255, 255, 255, 0.15);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), inset 0 0 10px rgba(91, 155, 248, 0.2);
      filter: contrast(1.15) brightness(0.95);
      mix-blend-mode: hard-light;
      pointer-events: auto;
      top: -68px;
      /* Position floating elegantly above the pill */
      opacity: 0.85;
      transition: all 0.35s ease;
    }

    .sat-orbit-node:hover .orbit-avatar {
      opacity: 1;
      transform: scale(1.08) translateY(-4px);
      border-color: rgba(91, 155, 248, 0.5);
      mix-blend-mode: normal;
    }

    @keyframes orbitSpin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes reverseSpin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(-360deg);
      }
    }

    /* Override planet vanish to also hide the avatar orbits gracefully */
    body.is-planet-vanish .orbit-system-wrapper {
      opacity: 0 !important;
      transform: scale(0.7) rotate(20deg) !important;
      transition: opacity 0.8s ease, transform 1.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .sat-icon {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      display: inline-grid;
      place-items: center;
      color: var(--c, var(--cyan));
      filter: drop-shadow(0 0 8px rgba(255, 255, 255, .12));
    }

    .sat-icon svg {
      width: 18px;
      height: 18px;
      display: block;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* ── Satellite Popup Detail ── */
    .sat-popup {
      position: absolute;
      bottom: calc(100% + 15px);
      left: 50%;
      transform: translateX(-50%) translateY(10px) scale(0.95);
      width: 240px;
      padding: 16px;
      background: rgba(10, 20, 40, 0.85);
      backdrop-filter: blur(25px);
      -webkit-backdrop-filter: blur(25px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-top: 2px solid var(--c, var(--cyan));
      border-radius: 12px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
      opacity: 0;
      pointer-events: none;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      text-align: left;
      z-index: 100;
    }

    .sat-popup::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-top-color: rgba(10, 20, 40, 0.85);
    }

    .sat:hover .sat-popup {
      opacity: 1;
      transform: translateX(-50%) translateY(0) scale(1);
      pointer-events: auto;
    }

    .popup-title {
      font-family: var(--fh);
      font-weight: 800;
      font-size: 14px;
      color: #fff;
      margin-bottom: 8px;
    }

    .popup-text {
      font-size: 11px;
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.6);
    }

    .popup-meta {
      font-weight: 800;
      color: var(--c, var(--cyan));
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      display: block;
      margin-bottom: 2px;
    }

    @keyframes floatUp {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-13px);
      }
    }

    @keyframes floatDown {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(13px);
      }
    }

    /* Positions (Orbiting items no longer need translation, managed by animation) */
    .enabler {
      --c: var(--purple);
    }

    #stage-wrap.on .enabler {
      animation-delay: 0.7s;
    }

    .execution {
      --c: var(--blue);
    }

    #stage-wrap.on .execution {
      animation-delay: 1.0s;
    }

    .customer-fit {
      --c: var(--amber);
    }

    #stage-wrap.on .customer-fit {
      animation-delay: 1.2s;
    }

    .driver {
      --c: var(--mint);
    }

    #stage-wrap.on .driver {
      animation-delay: 1.4s;
    }

    .performance {
      --c: var(--lime);
    }

    #stage-wrap.on .performance {
      animation-delay: 1.6s;
    }

    /* Performance gentle subtle float alongside orbit */
    .performance .sat-float {
      animation: floatDown 7s ease-in-out infinite 2.2s;
    }

    /* ── CARDS ── */
    .sat-card {
      position: absolute;
      top: 0;
      left: 0;
      width: 272px;
      background: rgba(6, 18, 50, .30);
      border: 1px solid rgba(255, 255, 255, .07);
      backdrop-filter: blur(28px);
      padding: 20px 24px;
      border-radius: 22px;
      display: flex;
      flex-direction: column;
      gap: 7px;
      box-shadow: 0 32px 64px rgba(0, 0, 0, .50);
      opacity: 0;
      pointer-events: auto;
    }

    #stage-wrap.on .sat-card {
      animation: cardIn 1.4s cubic-bezier(.23, 1, .32, 1) forwards 1.8s;
    }

    @keyframes cardIn {
      to {
        opacity: 1;
      }
    }

    .card-label {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .card-value {
      font-family: var(--fh);
      font-weight: 700;
      font-size: 15px;
      line-height: 1.42;
      color: #fff;
    }

    .context-card {
      transform: translate(calc(-50% + -470px), calc(-50% + 300px));
      border-left: 3px solid rgba(255, 255, 255, .22);
    }

    .signal-card {
      transform: translate(calc(-50% + 470px), calc(-50% + -300px));
      border-right: 3px solid var(--emerald);
      text-align: right;
      align-items: flex-end;
    }

      @media (max-width: 980px) {
      .nav-floating {
        top: 20px;
        left: 20px;
        padding: 10px 18px;
      }

      .brand-cycle {
        min-width: 250px;
      }

      #text-block.revealed {
        padding: 88px 0 0 24px;
      }

      #stage-wrap {
        scale: 0.82;
      }

      #stage::before {
        width: 1360px;
        height: 1080px;
      }

      .orbit-halo {
        width: 820px;
        height: 820px;
      }

      .ring-4,
      .topo-line.desktop-only,
      .signal-path.desktop-only,
      .system-particles .particle-desktop {
        display: none;
      }

      .topo-field {
        width: 1280px;
        height: 980px;
      }

      .signal-field {
        width: 1100px;
        height: 840px;
      }
    }

    @media (max-width: 720px) {

      html,
      body {
        min-height: 100%;
      }

      .nav-floating {
        right: 18px;
        left: 18px;
        width: auto;
      }

      .brand-cycle {
        min-width: 0;
      }

      .brand-detail {
        display: none;
      }

      #text-block.revealed {
        padding: 88px 18px 0;
      }

      .tb-line {
        font-size: clamp(24px, 8vw, 36px);
      }

      #text-block.revealed .tb-line {
        font-size: 14px;
      }

      #stage-wrap {
        scale: 0.62;
      }

      #stage::before {
        width: 880px;
        height: 760px;
        opacity: 0.88;
      }

      .orbit-halo {
        width: 620px;
        height: 620px;
      }

      .ring-3,
      .ring-4,
      .topo-line.tablet-down-hide,
      .signal-path.tablet-down-hide,
      .system-particles .particle-tablet {
        display: none;
      }

      .topo-field {
        width: 920px;
        height: 760px;
      }

      .signal-field {
        width: 760px;
        height: 620px;
      }

      .scroll-hint {
        bottom: 24px;
      }
    }

    @media (max-width: 520px) {
      #stage-wrap {
        scale: 0.52;
      }

      .ring-2 {
        width: 560px;
        height: 560px;
      }

      .topo-line.mobile-hide,
      .signal-field,
      .system-particles .particle-mobile {
        display: none;
      }

      .topo-field {
        width: 640px;
        height: 560px;
      }
    }

    #append-content {
      position: relative;
      z-index: 520;
      margin-top: 150vh;
      --ink: #020609;
      --ink2: #060D18;
      --ink3: #0A1525;
      --b: rgba(255, 255, 255, .06);
      --b2: rgba(255, 255, 255, .11);
      --b3: rgba(255, 255, 255, .18);
      --blue: #1A56B0;
      --blue-l: #5B9BF8;
      --blue-p: #A8C8FF;
      --green: #0B7B3A;
      --green-l: #22D468;
      --green-p: #86EFAC;
      --amber: #C57C06;
      --amber-l: #FBBF24;
      --purple: #6D28D9;
      --purple-l: #A78BFA;
      --coral: #C2410C;
      --coral-l: #FB923C;
      --teal: #0E7490;
      --teal-l: #22D3EE;
      --text: #ECF0FF;
      --mid: #7E95B8;
      --dim: #374966;
      --serif: 'Open Sans', sans-serif;
      --sans: 'Open Sans', sans-serif;
      --mono: 'Open Sans', sans-serif;
      --open-sans: 'Open Sans', sans-serif;
      --ibm-plex: 'Open Sans', sans-serif;
      --r: 8px;
      --rl: 16px;
      --rxl: 24px;
      font-family: var(--sans);
      color: var(--text);
    }

    #append-content .s {
      padding: var(--section-pad-y) clamp(1rem, 5vw, 3.5rem);
      position: relative;
    }

    #append-content .w {
      max-width: 1100px;
      margin: 0 auto;
    }

    #append-content #domains .w {
      max-width: 1360px;
    }

    #append-content .ey {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .13em;
      text-transform: uppercase;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
    }

    #append-content .ey::before {
      content: "";
      width: 16px;
      height: 1.5px;
      background: currentColor;
      border-radius: 1px;
    }

    #append-content .ey-b {
      color: var(--blue-p);
    }

    #append-content .ey-g {
      color: var(--green-p);
    }

    #append-content .ey-a {
      color: var(--amber-l);
    }

    #append-content .ey-p {
      color: var(--purple-l);
    }

    #append-content .ey-r {
      color: #F87171;
    }

    #append-content .h2 {
      font-family: var(--serif);
      font-size: clamp(1.6rem, 2.8vw, 2.4rem);
      font-weight: 700;
      line-height: 1.15;
      color: var(--text);
      letter-spacing: -.02em;
    }

    #append-content .lead {
      font-size: 1rem;
      color: var(--mid);
      line-height: 1.85;
      font-weight: 300;
    }

    #append-content .lead strong,
    #append-content .bd strong,
    #append-content .dp-lead strong,
    #append-content .dp-when-text strong,
    #append-content .svc-desc strong,
    #append-content .lc-desc strong,
    #append-content .tp-body strong,
    #append-content .ts-desc strong,
    #append-content .tout-v strong,
    #append-content .eng-desc strong,
    #append-content .cta-sub strong,
    #append-content .qreal strong,
    #append-content .qbot strong {
      color: var(--text);
      font-weight: 500;
    }

    #append-content .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 28px;
      border-radius: var(--r);
      font-family: var(--sans);
      font-size: 13.5px;
      font-weight: 600;
      text-decoration: none;
      transition: all .2s;
      cursor: pointer;
      border: none;
    }

    #append-content .btn-o {
      background: transparent;
      color: var(--text);
      border: 1px solid var(--b2);
    }

    #append-content .btn-o:hover {
      background: rgba(255, 255, 255, .04);
      border-color: var(--b3);
      transform: translateY(-2px);
    }

    #append-content .btn-g {
      background: var(--green);
      color: #fff;
      box-shadow: 0 3px 18px rgba(11, 123, 58, .35);
    }

    #append-content .btn-g:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 26px rgba(11, 123, 58, .5);
    }

    #append-content .rv {
      opacity: 0;
      transform: translateY(22px);
      filter: blur(14px);
      transition:
        opacity .9s cubic-bezier(0.16, 1, 0.3, 1),
        transform .9s cubic-bezier(0.16, 1, 0.3, 1),
        filter 1.1s cubic-bezier(0.16, 1, 0.3, 1);
    }

    #append-content .rv.in {
      opacity: 1;
      transform: none;
      filter: blur(0);
    }

    #append-content .d1 {
      transition-delay: .1s;
    }

    #append-content .d2 {
      transition-delay: .2s;
    }

    #append-content .d3 {
      transition-delay: .3s;
    }

    #append-content .d4 {
      transition-delay: .4s;
    }

    #append-content .d5 {
      transition-delay: .5s;
    }

    #append-content .d6 {
      transition-delay: .6s;
    }

    #append-content .d7 {
      transition-delay: .7s;
    }

    /* ── Diagnostic Background (Mosaic Outline) ── */
    /* ── Advanced Diagnostic Signal (Refined Neon Question Mark) ── */
    #append-content #q {
      background-color: var(--ink);
      border-top: 1px solid var(--b);
      border-bottom: 1px solid var(--b);
      font-family: var(--open-sans);
      overflow: hidden;
      /* Premium Diagnostic Variables - Refined for Visibility */
      --qm-base: rgba(148, 163, 184, 0.12);
      --qm-glow: rgba(99, 102, 241, 0.28);
      --qm-rim: rgba(6, 182, 212, 0.4);
      --qm-blur-main: 80px;
      --qm-blur-secondary: 20px;
      --qm-opacity-idle: 0.8;
      --qm-opacity-active: 0.95;
    }

    #append-content #q .diagnostic-signal-wrap {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      overflow: hidden;
      opacity: 0;
    }

    #append-content #q .diagnostic-signal-wrap.in {
      animation: qm-flicker-on 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    @keyframes qm-flicker-on {
      0% {
        opacity: 0;
        filter: blur(20px) brightness(0.2);
      }

      5% {
        opacity: 0.6;
        filter: blur(10px) brightness(1.5);
      }

      10% {
        opacity: 0.2;
        filter: blur(15px) brightness(0.5);
      }

      15% {
        opacity: 0.9;
        filter: blur(5px) brightness(1.8);
      }

      20% {
        opacity: 0.5;
        filter: blur(10px) brightness(0.8);
      }

      30% {
        opacity: 1;
        filter: blur(0) brightness(1.2);
      }

      100% {
        opacity: var(--qm-opacity-idle);
        filter: blur(0) brightness(1);
      }
    }

    .qm-svg {
      width: 75vh;
      height: 95vh;
      overflow: visible;
      transform: translateX(18%) rotate(8deg);
      /* Pushed right and tilted for editorial feel */
    }

    /* The 'Body' - Ghosted presence */
    .qm-body {
      fill: none;
      stroke: var(--qm-base);
      stroke-width: 14;
      stroke-linecap: round;
      filter: drop-shadow(0 0 5px var(--qm-glow)) drop-shadow(0 0 12px var(--qm-rim));
    }

    /* The 'Bloom' - Atmospheric atmosphere */
    .qm-bloom {
      fill: none;
      stroke: var(--qm-glow);
      stroke-width: 50;
      stroke-linecap: round;
      filter: blur(var(--qm-blur-main));
      animation: qm-breathe 8s ease-in-out infinite;
    }

    /* The 'Rim' - Selective highlights */
    .qm-highlight {
      fill: none;
      stroke: var(--qm-rim);
      stroke-width: 16;
      stroke-linecap: round;
      filter: blur(var(--qm-blur-secondary));
      stroke-dasharray: 180 800;
      animation: qm-highlight-drift 20s linear infinite;
    }

    /* Breathing animation: subtle intensity shift */
    @keyframes qm-breathe {

      0%,
      100% {
        opacity: 0.4;
        filter: blur(var(--qm-blur-main)) brightness(0.9);
        transform: scale(1);
      }

      50% {
        opacity: 0.9;
        filter: blur(calc(var(--qm-blur-main) * 0.8)) brightness(1.2);
        transform: scale(1.015);
      }
    }

    /* Drift animation: almost imperceptible movement */
    @keyframes qm-highlight-drift {
      0% {
        stroke-dashoffset: 0;
      }

      100% {
        stroke-dashoffset: 1050;
      }
    }

    /* Restricted Micro-Flicker: Signal Instability */
    .qm-flicker-layer {
      animation: qm-signal-glitch 18s infinite step-end;
    }

    @keyframes qm-signal-glitch {

      0%,
      94%,
      96%,
      100% {
        opacity: 1;
        transform: translate(0, 0);
      }

      95% {
        opacity: 0.8;
        transform: translate(-1px, 1px);
      }

      95.4% {
        opacity: 0.95;
        transform: translate(1px, -1px);
      }

      95.8% {
        opacity: 0.85;
        transform: translate(0, 0);
      }
    }

    /* Section Text and Card Content Overlays */

    #append-content #q .ey {
      font-family: var(--open-sans);
      font-weight: 700;
      z-index: 2;
      position: relative;
      color: #fbbf24 !important;
    }

    #append-content #q .h2 {
      font-family: var(--open-sans);
      font-weight: 600;
      letter-spacing: -0.03em;
      z-index: 2;
      position: relative;
      color: #f8fafc !important;
    }

    #append-content #q .lead {
      z-index: 2;
      position: relative;
      color: rgba(226, 232, 240, 0.9) !important;
    }

    #append-content #q .qtext,
    #append-content #q .qtag,
    #append-content #q .qreal,
    #append-content #q .qverd,
    #append-content #q .qverd strong {
      color: #f8fafc !important;
    }

    #append-content #q .qverd {
      background: rgba(255, 255, 255, 0.04) !important;
      border-color: rgba(255, 255, 255, 0.12) !important;
    }

    #append-content #q .q-num {
      background: rgba(255, 255, 255, 0.05) !important;
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.08) !important;
    }

    #append-content #q .w {
      z-index: 3;
      position: relative;
    }

    /* Responsiveness */
    @media (max-width: 1280px) {
      #append-content #q .diagnostic-signal-wrap {
        width: 60vh;
        right: -5%;
      }
    }

    @media (max-width: 1024px) {
      #append-content #q .diagnostic-signal-wrap {
        width: 50vh;
        opacity: 0.4 !important;
      }

      #q.in .diagnostic-signal-wrap {
        opacity: 0.4;
      }
    }

    @media (max-width: 768px) {
      #append-content #q .diagnostic-signal-wrap {
        width: 40vh;
        right: -10%;
        top: 60%;
        opacity: 0.2 !important;
        filter: blur(20px);
      }

      #q.in .diagnostic-signal-wrap {
        opacity: 0.2;
      }
    }

    @media (prefers-reduced-motion: reduce) {

      .qm-bloom,
      .qm-highlight,
      .qm-flicker-layer {
        animation: none !important;
      }
    }

    #append-content #outcomes,
    #append-content #cta,
    #append-content #lasting {
      background: var(--ink2);
      border-top: 1px solid var(--b);
      border-bottom: 1px solid var(--b);
    }

    #append-content #traps {
      position: relative;
      background: #f5f7fa;
      overflow: hidden;
      isolation: isolate;
    }

    #append-content #traps .traps-outer-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      background:
        linear-gradient(180deg, rgba(245, 247, 250, .02), rgba(245, 247, 250, .10));
      filter: saturate(1.12) contrast(1.14) brightness(.78);
      transform: scale(1.04);
      transform-origin: center;
      opacity: .98;
      pointer-events: none;
    }

    #append-content #traps.is-media-ready .traps-outer-bg {
      background:
        linear-gradient(180deg, rgba(245, 247, 250, .02), rgba(245, 247, 250, .10)),
        url("/images/ambiz-tech/assets/traps-office-bg.webp") center 46% / cover no-repeat;
    }

    #append-content #traps::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at center, rgba(255, 255, 255, .02) 0%, rgba(255, 255, 255, .10) 60%, rgba(245, 247, 250, .30) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, .00), rgba(255, 255, 255, .12));
      pointer-events: none;
      z-index: 1;
    }

    #append-content #traps .w {
      position: relative;
      z-index: 2;
    }

    #append-content #domains,
    #append-content #how,
    #append-content #engage {
      position: relative;
    }

    #append-content .qgrid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
      margin-top: 52px;
      padding-bottom: 0;
    }

    #append-content .qc {
      position: relative;
      height: clamp(310px, 25vw, 380px);
      width: 100%;
      max-width: none;
      cursor: default;
      margin-bottom: 0;
      transform: scale(0.96);
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease, box-shadow 0.4s ease;
    }

    #append-content .qc:hover,
    #append-content .qc.open {
      transform: scale(1);
    }



    #append-content .qgrid .qc:nth-child(1) {
      z-index: 10;
      --qc-color: var(--blue-l);
      --qc-glow: rgba(91, 155, 248, 0.3);
    }

    #append-content .qgrid .qc:nth-child(2) {
      z-index: 11;
      --qc-color: var(--green-l);
      --qc-glow: rgba(34, 212, 104, 0.3);
    }

    #append-content .qgrid .qc:nth-child(3) {
      z-index: 12;
      --qc-color: var(--purple-l);
      --qc-glow: rgba(167, 139, 250, 0.3);
    }

    #append-content .qgrid .qc:nth-child(4) {
      z-index: 13;
      --qc-color: var(--amber-l);
      --qc-glow: rgba(251, 191, 36, 0.3);
    }

    #append-content .qgrid .qc:nth-child(5) {
      z-index: 14;
      --qc-color: var(--coral-l);
      --qc-glow: rgba(251, 146, 60, 0.3);
    }

    #append-content .qgrid .qc:nth-child(6) {
      z-index: 15;
      --qc-color: var(--teal-l);
      --qc-glow: rgba(34, 211, 238, 0.3);
    }

    #append-content .qc-inner {
      position: relative;
      width: 100%;
      height: 100%;
      transition: transform 1.05s cubic-bezier(0.2, 0.9, 0.2, 1);
      transform-style: preserve-3d;
    }

    #append-content .qc.open .qc-inner {
      transform: rotateY(180deg);
    }

    #append-content .qc-front,
    #append-content .qc-back {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: var(--rl);
      border: none;
      padding: 32px 36px;
      box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.6), 0 0 60px var(--qc-glow);
      overflow: hidden;
      z-index: 1;
    }

    #append-content .qc-front::before,
    #append-content .qc-back::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 140%;
      height: 140%;
      background: radial-gradient(circle at center, var(--qc-color) 0%, transparent 70%);
      transform: translate(-50%, -50%);
      opacity: .18;
      z-index: -2;
    }

    #append-content .qc-front::after {
      content: "";
      position: absolute;
      inset: 2px;
      background:
        radial-gradient(circle at 16% 18%, rgba(255, 255, 255, .08) 0 1px, transparent 1.5px) 0 0 / 34px 34px,
        radial-gradient(circle at 82% 26%, rgba(255, 255, 255, .05) 0 1px, transparent 1.5px) 0 0 / 52px 52px,
        linear-gradient(140deg, rgba(34, 211, 238, .1), rgba(0, 119, 255, 0) 42%),
        linear-gradient(180deg, rgba(255, 255, 255, .015), rgba(255, 255, 255, 0) 24%),
        #020b12;
      border-radius: calc(var(--rl) - 2px);
      opacity: .95;
      z-index: -1;
    }

    #append-content .qc-back::after {
      content: "";
      position: absolute;
      inset: 2px;
      background:
        radial-gradient(circle at 22% 22%, rgba(255, 255, 255, .055) 0 1px, transparent 1.5px) 0 0 / 40px 40px,
        radial-gradient(circle at 76% 68%, rgba(255, 255, 255, .03) 0 1px, transparent 1.5px) 0 0 / 66px 66px,
        linear-gradient(135deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 50%),
        var(--ink2);
      border-radius: calc(var(--rl) - 2px);
      opacity: .88;
      z-index: -1;
    }

    #append-content .qc-front {
      background: var(--ink);
      display: grid;
      grid-template-columns: 60px minmax(0, 1fr) 100px;
      grid-template-rows: auto 1fr auto;
      column-gap: 24px;
      row-gap: 12px;
      align-items: start;
    }

    #append-content .qc-art {
      position: relative;
      grid-column: 3;
      grid-row: 1 / span 2;
      justify-self: end;
      align-self: start;
      width: 110px;
      height: 110px;
      pointer-events: none;
      opacity: .82;
      z-index: 2;
      filter: drop-shadow(0 0 16px rgba(255, 255, 255, .05));
      mix-blend-mode: screen;
    }

    #append-content .qc-art svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    #append-content .qc-front .qtext {
      position: relative;
      grid-column: 1 / span 3;
      grid-row: 2;
      z-index: 3;
      max-width: none;
      padding-right: 80px;
      font-size: clamp(1.2rem, 1.6vw, 1.45rem);
      line-height: 1.2;
    }

    #append-content .qc-front .q-num,
    #append-content .qc-front .qc-click-me {
      position: relative;
      z-index: 3;
    }

    #append-content .qc-front .q-num {
      grid-column: 1;
      grid-row: 1;
      width: 56px;
      height: 56px;
      margin-top: 2px;
    }

    #append-content .qc-front .q-num::after {
      content: "";
      position: absolute;
      inset: -10px;
      border-radius: 50%;
      border: 1px solid color-mix(in srgb, var(--qc-color) 36%, transparent);
      opacity: .6;
      pointer-events: none;
      filter: blur(.2px);
    }

    #append-content .qc-back {
      background: var(--ink2);
      transform: rotateY(180deg);
      border-color: rgba(251, 191, 36, 0.3);
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 12px;
    }

    #append-content .qc-toggle-btn {
      position: absolute;
      bottom: 24px;
      right: 24px;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.03);
      border: 1.5px solid var(--qc-color);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 10;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 0 15px var(--qc-glow);
    }

    #append-content .qc-toggle-btn::before,
    #append-content .qc-toggle-btn::after {
      content: "";
      position: absolute;
      background: var(--qc-color);
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Horizontal line */
    #append-content .qc-toggle-btn::before {
      width: 18px;
      height: 2px;
    }

    /* Vertical line */
    #append-content .qc-toggle-btn::after {
      width: 2px;
      height: 18px;
    }

    #append-content .qc.open .qc-toggle-btn {
      transform: rotate(135deg);
      /* Plus becomes a close (X) or minus-ish */
      background: var(--qc-color);
      box-shadow: 0 0 25px var(--qc-glow);
    }

    #append-content .qc.open .qc-toggle-btn::before,
    #append-content .qc.open .qc-toggle-btn::after {
      background: #000;
    }

    #append-content .qc-toggle-btn:hover {
      background: color-mix(in srgb, var(--qc-color) 20%, transparent);
      transform: scale(1.1);
    }

    #append-content .qc.open .qc-toggle-btn:hover {
      transform: rotate(135deg) scale(1.1);
    }

    #append-content .q-num {
      width: 52px;
      height: 52px;
      border: 1.5px solid var(--qc-color);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--serif);
      /* Open Sans */
      font-size: 22px;
      font-weight: 700;
      font-style: italic;
      color: var(--qc-color);
      background: rgba(255, 255, 255, 0.03);
      box-shadow: 0 0 20px var(--qc-glow);
      flex-shrink: 0;
    }

    #append-content .qtext {
      font-size: clamp(1.1rem, 1.4vw, 1.35rem);
      font-weight: 600;
      line-height: 1.2;
      color: var(--text);
      font-family: var(--open-sans);
      letter-spacing: -0.02em;
    }

    #append-content .qreal {
      font-size: 0.88rem;
      color: rgba(255, 255, 255, 0.7);
      line-height: 1.6;
      margin-bottom: 16px;
      font-family: var(--open-sans);
    }

    #append-content .qverd {
      padding: 18px 20px;
      border-radius: 12px;
      font-size: 0.78rem;
      line-height: 1.6;
      border: 1px dashed var(--qc-glow);
      background: rgba(2, 6, 12, 0.4);
      font-family: var(--open-sans);
      color: var(--text);
    }

    #append-content .qverd strong {
      color: var(--qc-color);
      font-weight: 600;
    }

    #append-content .qc-1 .qc-art {
      color: var(--blue-l);
    }

    #append-content .qc-2 .qc-art {
      color: var(--green-l);
    }

    #append-content .qc-3 .qc-art {
      color: var(--purple-l);
    }

    #append-content .qc-4 .qc-art {
      color: var(--amber-l);
    }

    #append-content .qc-5 .qc-art {
      color: var(--coral-l);
    }

    #append-content .qc-6 .qc-art {
      color: var(--teal-l);
    }

    #append-content .qc-1 .qc-front::after {
      background:
        radial-gradient(circle at 15% 18%, rgba(255, 255, 255, .08) 0 1px, transparent 1.5px) 0 0 / 34px 34px,
        radial-gradient(circle at 72% 30%, rgba(255, 255, 255, .04) 0 1px, transparent 1.5px) 0 0 / 52px 52px,
        linear-gradient(130deg, rgba(91, 155, 248, .06), rgba(255, 255, 255, 0) 46%),
        var(--ink);
    }

    #append-content .qc-2 .qc-front::after {
      background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 14px),
        radial-gradient(circle at 84% 24%, rgba(255, 255, 255, .05) 0 1px, transparent 1.5px) 0 0 / 46px 46px,
        linear-gradient(130deg, rgba(34, 212, 104, .07), rgba(255, 255, 255, 0) 48%),
        var(--ink);
    }

    #append-content .qc-3 .qc-front::after {
      background:
        radial-gradient(circle at 20% 82%, rgba(255, 255, 255, .05) 0 1px, transparent 1.5px) 0 0 / 40px 40px,
        repeating-linear-gradient(115deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 12px),
        linear-gradient(135deg, rgba(167, 139, 250, .08), rgba(255, 255, 255, 0) 50%),
        var(--ink);
    }

    #append-content .qc-4 .qc-front::after {
      background:
        radial-gradient(circle at 24% 22%, rgba(255, 255, 255, .05) 0 1px, transparent 1.5px) 0 0 / 36px 36px,
        radial-gradient(circle at 76% 76%, rgba(255, 255, 255, .04) 0 1px, transparent 1.5px) 0 0 / 58px 58px,
        linear-gradient(135deg, rgba(251, 191, 36, .08), rgba(255, 255, 255, 0) 50%),
        var(--ink);
    }

    #append-content .qc-5 .qc-front::after {
      background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 16px),
        radial-gradient(circle at 70% 20%, rgba(255, 255, 255, .04) 0 1px, transparent 1.5px) 0 0 / 48px 48px,
        linear-gradient(135deg, rgba(251, 146, 60, .08), rgba(255, 255, 255, 0) 50%),
        var(--ink);
    }

    #append-content .qc-6 .qc-front::after {
      background:
        radial-gradient(circle at 18% 28%, rgba(255, 255, 255, .05) 0 1px, transparent 1.5px) 0 0 / 38px 38px,
        radial-gradient(circle at 80% 74%, rgba(255, 255, 255, .035) 0 1px, transparent 1.5px) 0 0 / 62px 62px,
        linear-gradient(135deg, rgba(34, 211, 238, .08), rgba(255, 255, 255, 0) 50%),
        var(--ink);
    }

    #append-content .qbot {
      margin-top: 34px;
      padding: 40px;
      background: rgba(251, 191, 36, 0.03);
      border: 1px solid rgba(251, 191, 36, 0.1);
      border-radius: var(--rxl);
      text-align: center;
      max-width: 840px;
      margin-left: auto;
      margin-right: auto;
    }

    #append-content .qbot p {
      font-size: 1.05rem;
      color: var(--mid);
      line-height: 1.8;
    }

    #append-content .dbg {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(ellipse 50% 60% at 90% 50%, rgba(26, 86, 176, .07) 0%, transparent 65%);
    }

    /* ── Cinematic Domains Intro ── */
    #append-content .cinematic-intro {
      text-align: center;
      margin: 100px auto 120px auto;
      max-width: 900px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    #append-content .cinematic-intro::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 140%;
      height: 160%;
      transform: translate(-50%, -50%);
      background: radial-gradient(ellipse at center, rgba(167, 139, 250, 0.06), transparent 60%);
      pointer-events: none;
      z-index: -1;
      opacity: 0;
      transition: opacity 1.5s ease;
    }

    #append-content .cinematic-intro.in::before {
      opacity: 1;
    }

    #append-content .ci-ey {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--blue-l);
      margin-bottom: 24px;
      opacity: 0;
      transform: translateY(15px);
      transition: all 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
    }

    #append-content .cinematic-intro.in .ci-ey {
      opacity: 1;
      transform: translateY(0);
    }

    #append-content .ci-h2 {
      font-family: var(--open-sans);
      font-weight: 800;
      font-size: clamp(2.4rem, 4.5vw, 3.8rem);
      line-height: 1.15;
      margin-bottom: 36px;
      letter-spacing: -0.02em;
    }

    #append-content .ci-line {
      display: block;
      color: rgba(255, 255, 255, 0.9);
      opacity: 0;
      transform: translateY(20px) scale(0.98);
      transition: all 1.2s cubic-bezier(0.2, 0.9, 0.2, 1);
    }

    #append-content .cinematic-intro.in .ci-line {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    #append-content .cinematic-intro.in .ci-line:nth-child(1) {
      transition-delay: 0.2s;
    }

    #append-content .ci-highlight {
      background: linear-gradient(135deg, var(--green-l), var(--teal-l));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 0 24px rgba(34, 211, 238, 0.2));
    }

    #append-content .cinematic-intro.in .ci-line:nth-child(2) {
      transition-delay: 0.4s;
    }

    #append-content .ci-lead {
      font-family: var(--open-sans);
      font-size: clamp(1.05rem, 1.8vw, 1.25rem);
      line-height: 1.8;
      color: var(--muted);
      max-width: 680px;
      opacity: 0;
      transform: translateY(20px);
      transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
    }

    #append-content .cinematic-intro.in .ci-lead {
      opacity: 1;
      transform: translateY(0);
    }

    #append-content .ci-strong {
      color: var(--text);
      font-weight: 600;
      position: relative;
      display: inline-block;
    }

    #append-content .ci-strong::after {
      content: "";
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0;
      height: 1px;
      background: var(--teal-l);
      transition: width 1s cubic-bezier(0.16, 1, 0.3, 1) 1.2s;
    }

    #append-content .cinematic-intro.in .ci-strong::after {
      width: 100%;
    }

    #append-content .domains-shell {
      position: relative;
      padding: clamp(24px, 4vw, 36px);
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: calc(var(--rxl) + 4px);
      background:
        radial-gradient(circle at 10% 0%, rgba(91, 155, 248, .08), transparent 28%),
        radial-gradient(circle at 90% 100%, rgba(251, 191, 36, .06), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .01)),
        rgba(4, 8, 12, .88);
      box-shadow: 0 36px 90px rgba(0, 0, 0, .28);
      overflow: hidden;
    }

    #append-content .domains-shell::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
      background-size: 58px 58px;
      opacity: .18;
      pointer-events: none;
    }

    #append-content .domain-nav {
      position: relative;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 14px;
      margin-bottom: 30px;
      z-index: 1;
    }

    #append-content .dn {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      padding: 14px 12px 12px;
      text-align: center;
      cursor: pointer;
      background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .02));
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: 24px;

      /* Playful reveal initial state */
      opacity: 0;
      transform: translateY(30px) scale(0.8);

      /* Base transitions */
      transition:
        transform .5s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity .5s ease,
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;

      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
      overflow: hidden;
    }

    /* Reveal Trigger (Hooks into .rv.in system) */
    #append-content .rv.in .dn {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    /* Staggered Landing */
    #append-content .dn:nth-child(1) {
      transition-delay: 0.1s;
    }

    #append-content .dn:nth-child(2) {
      transition-delay: 0.2s;
    }

    #append-content .dn:nth-child(3) {
      transition-delay: 0.3s;
    }

    #append-content .dn:nth-child(4) {
      transition-delay: 0.4s;
    }

    #append-content .dn:nth-child(5) {
      transition-delay: 0.5s;
    }

    #append-content .dn.on {
      transition-delay: 0s !important;
      /* Reset delay for selection */
    }

    #append-content .dn::before {
      content: "";
      position: absolute;
      inset: auto 14px 10px;
      height: 1px;
      background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--domain-color) 75%, white 10%), transparent);
      opacity: .4;
      transition: opacity .3s ease;
    }

    #append-content .dn:hover {
      transform: translateY(-3px);
      border-color: color-mix(in srgb, var(--domain-color) 38%, rgba(255, 255, 255, .16));
      box-shadow: 0 18px 34px color-mix(in srgb, var(--domain-color) 12%, transparent);
    }

    #append-content .dn.on {
      background: linear-gradient(180deg, color-mix(in srgb, var(--domain-color) 12%, rgba(255, 255, 255, .05)), rgba(255, 255, 255, .02));
      border-color: color-mix(in srgb, var(--domain-color) 48%, rgba(255, 255, 255, .18));
      box-shadow: 0 22px 42px color-mix(in srgb, var(--domain-color) 16%, transparent), inset 0 1px 0 rgba(255, 255, 255, .08);
      transform: translateY(-4px);
    }

    #append-content .dn.on::before {
      opacity: .8;
    }

    #append-content .dn-icon {
      width: 56px;
      height: 56px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      color: var(--domain-color);
      background:
        radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .16), rgba(255, 255, 255, .02) 54%),
        rgba(7, 12, 18, .88);
      border: 1px solid color-mix(in srgb, var(--domain-color) 32%, rgba(255, 255, 255, .08));
      box-shadow: 0 0 0 6px color-mix(in srgb, var(--domain-color) 10%, transparent);

      transform: scale(0.9);
      transition: transform .4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .4s ease;
    }

    #append-content .rv.in .dn-icon {
      animation: dnPulse 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    #append-content .dn:nth-child(1) .dn-icon {
      animation-delay: 0.15s;
    }

    #append-content .dn:nth-child(2) .dn-icon {
      animation-delay: 0.25s;
    }

    #append-content .dn:nth-child(3) .dn-icon {
      animation-delay: 0.35s;
    }

    #append-content .dn:nth-child(4) .dn-icon {
      animation-delay: 0.45s;
    }

    #append-content .dn:nth-child(5) .dn-icon {
      animation-delay: 0.55s;
    }

    @keyframes dnPulse {
      0% {
        transform: scale(0.8);
        box-shadow: 0 0 0 0 var(--domain-color);
      }

      50% {
        transform: scale(1.1);
        box-shadow: 0 0 30px 4px color-mix(in srgb, var(--domain-color) 60%, transparent);
      }

      100% {
        transform: scale(1);
        box-shadow: 0 0 0 6px color-mix(in srgb, var(--domain-color) 10%, transparent);
      }
    }

    #append-content .dn-icon svg {
      width: 24px;
      height: 24px;
      stroke: currentColor;
      stroke-width: 1.75;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    #append-content .dn-name {
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: .1em;
      text-transform: uppercase;
      display: block;
      color: var(--dim);
      transition: color .2s;
    }

    #append-content .dn.on .dn-name {
      color: var(--text);
    }

    #append-content .dn-bar {
      width: 46px;
      height: 3px;
      border-radius: 999px;
      opacity: .2;
      transition: opacity .25s ease, transform .25s ease;
      transform: scaleX(.6);
    }

    #append-content .dn.on .dn-bar {
      opacity: 1;
      transform: scaleX(1);
    }

    #append-content .dpanel {
      display: none;
      position: relative;
      z-index: 1;
    }

    #append-content .dpanel.on {
      display: block;
    }

    #append-content .domain-shell {
      display: grid;
      grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
      gap: clamp(22px, 4vw, 42px);
      align-items: start;
    }

    #append-content .domain-stage {
      position: relative;
      min-height: 520px;
      padding: clamp(28px, 4vw, 40px);
      border-radius: 34px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .08);
      background:
        radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--domain-color) 24%, transparent), transparent 34%),
        radial-gradient(circle at 78% 76%, color-mix(in srgb, var(--domain-color) 15%, transparent), transparent 40%),
        linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)),
        rgba(4, 8, 12, .9);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 22px 52px rgba(0, 0, 0, .26);
    }

    #append-content .domain-stage::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .08) 0 1.4px, transparent 2px) 0 0 / 34px 34px,
        linear-gradient(130deg, color-mix(in srgb, var(--domain-color) 11%, transparent), transparent 58%);
      opacity: .55;
      pointer-events: none;
    }

    #append-content .domain-stage::after {
      content: "";
      position: absolute;
      inset: 18px;
      border-radius: 26px;
      border: 1px solid color-mix(in srgb, var(--domain-color) 16%, rgba(255, 255, 255, .06));
      pointer-events: none;
      opacity: .8;
    }

    #append-content .domain-stage-top,
    #append-content .domain-stage-copy,
    #append-content .domain-stage-badges {
      position: relative;
      z-index: 2;
    }

    #append-content .domain-stage-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 34px;
    }

    #append-content .domain-kicker {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: color-mix(in srgb, var(--domain-color) 68%, white 12%);
    }

    #append-content .domain-orbit {
      width: 84px;
      height: 84px;
      border-radius: 50%;
      border: 1px solid color-mix(in srgb, var(--domain-color) 40%, rgba(255, 255, 255, .1));
      display: grid;
      place-items: center;
      color: var(--domain-color);
      background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .16), rgba(255, 255, 255, .02) 55%);
      box-shadow: 0 0 0 10px color-mix(in srgb, var(--domain-color) 10%, transparent);
    }

    #append-content .domain-orbit svg {
      width: 38px;
      height: 38px;
      stroke: currentColor;
      stroke-width: 1.65;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    #append-content .domain-title {
      font-family: var(--ibm-plex);
      font-size: clamp(2rem, 4vw, 3.3rem);
      line-height: .95;
      letter-spacing: -.04em;
      margin-bottom: 16px;
      color: var(--text);
    }

    #append-content .domain-solve {
      font-size: clamp(1.15rem, 2vw, 1.42rem);
      line-height: 1.35;
      color: color-mix(in srgb, white 88%, var(--domain-color) 12%);
      margin-bottom: 16px;
      max-width: 18ch;
      font-weight: 700;
    }

    #append-content .domain-summary {
      font-size: .94rem;
      line-height: 1.82;
      color: var(--mid);
      max-width: 50ch;
    }

    #append-content .domain-stage-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 28px;
    }

    #append-content .domain-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--domain-color) 24%, rgba(255, 255, 255, .08));
      background: color-mix(in srgb, var(--domain-color) 6%, rgba(255, 255, 255, .03));
      color: color-mix(in srgb, white 82%, var(--domain-color) 18%);
      font-size: 11px;
      font-family: var(--mono);
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    #append-content .domain-badge::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--domain-color);
      box-shadow: 0 0 10px color-mix(in srgb, var(--domain-color) 45%, transparent);
    }

    #append-content .domain-stage-art {
      position: absolute;
      inset: auto 22px 22px auto;
      width: min(52%, 270px);
      aspect-ratio: 1;
      color: var(--domain-color);
      opacity: .9;
      pointer-events: none;
      filter: drop-shadow(0 0 24px color-mix(in srgb, var(--domain-color) 12%, transparent));
    }

    #append-content .domain-stage-art svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    #append-content .domain-copy {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    #append-content .domain-copy-top {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    #append-content .dp-when,
    #append-content .dp-eng,
    #append-content .domain-services {
      padding: 18px 20px;
      border-radius: 24px;
      background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .018));
      border: 1px solid rgba(255, 255, 255, .07);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
    }

    #append-content .dp-head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }

    #append-content .dp-head-icon {
      width: 32px;
      height: 32px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--domain-color);
      background: color-mix(in srgb, var(--domain-color) 10%, rgba(255, 255, 255, .03));
      border: 1px solid color-mix(in srgb, var(--domain-color) 20%, rgba(255, 255, 255, .08));
    }

    #append-content .dp-head-icon svg {
      width: 16px;
      height: 16px;
      stroke: currentColor;
      stroke-width: 1.65;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    #append-content .dp-when-label,
    #append-content .dp-eng-label,
    #append-content .domain-services-label {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: color-mix(in srgb, var(--domain-color) 58%, white 12%);
    }

    #append-content .dp-headline {
      display: none;
    }

    #append-content .dp-lead {
      display: none;
    }

    #append-content .dp-when {
      margin-bottom: 0;
    }

    #append-content .dp-when-text,
    #append-content .dp-cadence,
    #append-content .svc-desc,
    #append-content .lc-desc,
    #append-content .tp-body,
    #append-content .fi-body,
    #append-content .ts-desc,
    #append-content .tout-v,
    #append-content .eng-desc,
    #append-content .cta-sub {
      color: var(--mid);
    }

    #append-content .cta-sub {
      font-size: clamp(1rem, 1.18vw, 1.12rem);
      line-height: 1.7;
      max-width: 1040px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 36px;
    }

    #append-content .dp-when-text {
      font-size: .82rem;
      line-height: 1.65;
    }

    #append-content .dp-eng-type {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
      margin-bottom: 8px;
    }

    #append-content .dp-cadence {
      font-size: .78rem;
      line-height: 1.6;
      margin-top: 6px;
    }

    #append-content .domain-services {
      padding-bottom: 12px;
    }

    #append-content .domain-services-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 14px;
    }

    #append-content .domain-services-title {
      font-size: 1.02rem;
      font-weight: 700;
      color: var(--text);
      line-height: 1.3;
    }

    #append-content .domain-services-note {
      font-size: .76rem;
      color: var(--mid);
      line-height: 1.6;
      max-width: 34ch;
    }

    #append-content .services-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    #append-content .svc {
      background: rgba(6, 11, 17, .72);
      border: 1px solid color-mix(in srgb, var(--domain-color) 18%, rgba(255, 255, 255, .07));
      border-radius: 22px;
      overflow: hidden;
      cursor: pointer;
      transition: border-color .2s, transform .2s ease, background .2s ease;
    }

    #append-content .svc:hover {
      border-color: color-mix(in srgb, var(--domain-color) 34%, rgba(255, 255, 255, .18));
      transform: translateY(-2px);
    }

    #append-content .svc-head {
      padding: 16px 20px;
      display: flex;
      align-items: center;
      gap: 14px;
      border-bottom: 1px solid transparent;
      transition: border-color .2s;
    }

    #append-content .svc.open .svc-head {
      border-bottom-color: color-mix(in srgb, var(--domain-color) 16%, rgba(255, 255, 255, .06));
      background: color-mix(in srgb, var(--domain-color) 6%, rgba(255, 255, 255, .02));
    }

    #append-content .svc-icon {
      width: 36px;
      height: 36px;
      border-radius: 12px;
      flex-shrink: 0;
      display: grid;
      place-items: center;
      align-items: center;
      justify-content: center;
      border: 1px solid color-mix(in srgb, var(--domain-color) 18%, rgba(255, 255, 255, .08));
      position: relative;
      overflow: hidden;
    }

    #append-content .svc-icon svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    #append-content .svc-htext {
      flex: 1;
    }

    #append-content .svc-name {
      font-size: 13px;
      font-weight: 600;
      color: #0f172a;
      margin-bottom: 1px;
    }

    #append-content .svc-tagline {
      font-size: 11px;
      color: #475569;
    }

    #append-content .svc-arr {
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      border-radius: 50%;
      border: 1px solid color-mix(in srgb, var(--domain-color) 16%, rgba(255, 255, 255, .08));
      padding: 0;
      background: rgba(255, 255, 255, 0.78);
      font-size: 10px;
      color: var(--dim);
      cursor: pointer;
      pointer-events: auto;
      position: relative;
      z-index: 2;
      appearance: none;
      -webkit-appearance: none;
      transition: transform .2s, border-color .2s ease, background .2s ease;
    }

    #append-content .svc.open .svc-arr {
      transform: rotate(180deg);
    }

    #append-content .svc-arr:hover,
    #append-content .svc-arr:focus-visible {
      background: rgba(255, 255, 255, 0.96);
      border-color: color-mix(in srgb, var(--domain-color) 28%, rgba(255, 255, 255, .18));
      outline: none;
    }

    #append-content .svc-body {
      display: none;
      padding: 16px 20px 18px;
      background: rgba(4, 8, 12, .55);
    }

    #append-content .svc.open .svc-body {
      display: block;
    }

    #append-content .svc-desc {
      font-size: .82rem;
      line-height: 1.72;
      margin-bottom: 12px;
    }

    #append-content .svc-outputs,
    #append-content .eng-domains {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    #append-content .svc-out,
    #append-content .eng-d {
      font-size: 10px;
      padding: 3px 8px;
      border-radius: 4px;
      background: rgba(255, 255, 255, .04);
      border: 1px solid var(--b);
      color: var(--dim);
      font-family: var(--mono);
      letter-spacing: .04em;
    }

    #append-content .lasting-grid,
    #append-content .trap-g {
      display: grid;
      gap: 12px;
    }

    #append-content .lasting-grid {
      position: relative;
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 18px;
      margin-top: 34px;
      width: 100vw;
      margin-left: calc(50% - 50vw);
      padding: 34px clamp(20px, 4vw, 72px) 18px;
      align-items: end;
      overflow: visible;
    }

    #append-content .lasting-grid::before {
      content: "";
      position: absolute;
      inset: 0;
      background: transparent;
      border: none;
      box-shadow: none;
      pointer-events: none;
    }

    #append-content .lasting-signal {
      position: relative;
      display: inline-flex;
      align-items: end;
      gap: 8px;
      padding: 10px 14px 12px;
      margin-bottom: 26px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .028);
      border: 1px solid var(--b);
      box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
    }

    #append-content .lasting-signal::after {
      content: "";
      position: absolute;
      inset: auto 16px 6px;
      height: 1px;
      background: linear-gradient(90deg, rgba(91, 155, 248, .18), rgba(34, 212, 104, .2), rgba(251, 191, 36, .22));
    }

    #append-content .ls-step {
      width: 18px;
      border-radius: 8px 8px 4px 4px;
      background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06));
      border: 1px solid rgba(255, 255, 255, .08);
      position: relative;
      z-index: 1;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    }

    #append-content .ls-step.s1 {
      height: 14px;
      color: var(--blue-l);
      background: linear-gradient(180deg, rgba(91, 155, 248, .45), rgba(91, 155, 248, .12));
    }

    #append-content .ls-step.s2 {
      height: 24px;
      color: var(--green-l);
      background: linear-gradient(180deg, rgba(34, 212, 104, .45), rgba(34, 212, 104, .12));
    }

    #append-content .ls-step.s3 {
      height: 36px;
      color: var(--amber-l);
      background: linear-gradient(180deg, rgba(251, 191, 36, .45), rgba(251, 191, 36, .12));
    }

    #append-content .lasting-rail {
      position: absolute;
      inset: 74px 24px 34px;
      pointer-events: none;
      z-index: 0;
    }

    #append-content .lasting-rail svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    #append-content .lasting-rail-base {
      fill: none;
      stroke: rgba(255, 255, 255, .06);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    #append-content .lasting-rail-glow {
      fill: none;
      stroke: url(#lastingRailGradient);
      stroke-width: 4;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 0 10px rgba(91, 155, 248, .18));
      opacity: .78;
    }

    #append-content .lasting-node {
      fill: #07101c;
      stroke-width: 2;
    }

    #append-content .lasting-node.n1 {
      stroke: rgba(91, 155, 248, .7);
    }

    #append-content .lasting-node.n2 {
      stroke: rgba(34, 212, 104, .72);
    }

    #append-content .lasting-node.n3 {
      stroke: rgba(251, 191, 36, .76);
    }

    #append-content .lasting-node-core {
      opacity: .9;
    }

    #append-content .trap-g {
      grid-template-columns: 1fr 1fr 1fr;
    }

    #append-content .lc,
    #append-content .tp {
      border: 1px solid var(--b);
      border-radius: var(--rxl);
      transition: all .2s;
    }

    #append-content .lc {
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-height: 348px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .005)),
        var(--ink);
      backdrop-filter: blur(12px);
      z-index: 1;
      transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
      outline: none;
    }

    #append-content .lc::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 16% 16%, rgba(255, 255, 255, .07), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, .02), transparent 32%);
      pointer-events: none;
      opacity: .85;
    }

    #append-content .lc::after {
      content: "";
      position: absolute;
      inset: 12px;
      border-radius: calc(var(--rxl) - 10px);
      border: 1px solid rgba(255, 255, 255, .045);
      pointer-events: none;
    }

    #append-content .lc:hover {
      border-color: rgba(15, 23, 42, 0.15);
      transform: translateY(-8px);
      box-shadow: 0 40px 80px -20px rgba(15, 23, 42, 0.12);
    }

    #append-content .lc-bar {
      height: 3px;
      position: relative;
      z-index: 20;
    }

    #append-content .lc-body {
      position: relative;
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      padding: 28px 24px 18px;
      background: transparent;
      z-index: 1;
    }

    #append-content .lc-art {
      position: absolute;
      right: 14px;
      top: 12px;
      width: 132px;
      height: 132px;
      color: rgba(15, 23, 42, 0.08);
      pointer-events: none;
      opacity: .88;
      transition: opacity .35s ease, transform .35s ease, color .35s ease;
    }

    #append-content .lc-art svg {
      width: 100%;
      height: 100%;
    }

    #append-content .lc:hover .lc-art {
      opacity: 1;
      transform: translateY(-4px) scale(1.02);
      color: rgba(15, 23, 42, 0.12);
    }

    #append-content .lc-content {
      position: relative;
      z-index: 2;
      max-width: 78%;
    }

    #append-content .lc-phase,
    #append-content .ts-phase,
    #append-content .eng-num,
    #append-content .tout-l,
    #append-content .cta-note,
    #append-content .fr {
      font-size: 9px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #64748b;
    }

    #append-content .lc-phase {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-bottom: 14px;
      padding: 6px 11px;
      border-radius: 999px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      background: rgba(15, 23, 42, 0.02);
      width: fit-content;
      color: #64748b;
    }

    #append-content .lc-phase::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 12px currentColor;
      opacity: .9;
    }

    #append-content .lc-title {
      font-size: 1.32rem;
      font-weight: 700;
      line-height: 1.16;
      letter-spacing: -.03em;
      margin-bottom: 14px;
      color: #0f172a;
    }





    /* Industry row light mode */
    #append-content .ind-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 42px;
      padding: 24px 32px;
      background: rgba(15, 23, 42, 0.02);
      border: 1px solid rgba(15, 23, 42, 0.05);
      border-radius: 24px;
      align-items: center;
    }

    #append-content .ind-lbl {
      font-family: var(--mono);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: #94a3b8;
      margin-right: 12px;
    }

    #append-content .ind {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 14px;
      border-radius: 12px;
      background: #FFFFFF;
      border: 1px solid rgba(15, 23, 42, 0.06);
      font-size: 12px;
      color: #475569;
      transition: all 0.3s ease;
      box-shadow: 0 2px 4px rgba(15, 23, 42, 0.02);
    }

    #append-content .ind:hover {
      transform: translateY(-2px);
      border-color: rgba(15, 23, 42, 0.15);
      color: #0f172a;
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
    }

    #append-content .lc-phase {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-bottom: 14px;
      padding: 6px 11px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, .08);
      background: rgba(255, 255, 255, .025);
      width: fit-content;
    }

    #append-content .lc-phase::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 12px currentColor;
      opacity: .9;
    }

    #append-content .lc-title {
      font-size: 1.32rem;
      font-weight: 700;
      line-height: 1.16;
      letter-spacing: -.03em;
      margin-bottom: 14px;
      color: var(--text);
    }

    #append-content .lc-desc {
      font-size: .84rem;
      line-height: 1.82;
      color: var(--mid);
    }

    #append-content .lc-foot {
      position: relative;
      padding: 16px 18px 18px;
      border-top: 1px solid rgba(255, 255, 255, .06);
      background: rgba(255, 255, 255, .018);
      margin: 0 12px 12px;
      border-radius: 18px;
      z-index: 1;
    }

    #append-content .lc-foot-text {
      font-size: .74rem;
      color: var(--dim);
      line-height: 1.62;
      font-family: var(--mono);
    }

    #append-content .lc.lc-y1 {
      grid-column: 1 / span 4;
      transform: translateY(52px);
      --lc-accent: var(--blue-l);
    }

    #append-content .lc.lc-y2 {
      grid-column: 5 / span 4;
      transform: translateY(18px);
      --lc-accent: var(--green-l);
    }

    #append-content .lc.lc-y3 {
      grid-column: 9 / span 4;
      transform: translateY(-18px);
      --lc-accent: var(--amber-l);
    }

    #append-content .lc.lc-y1 .lc-phase {
      color: var(--blue-l);
    }

    #append-content .lc.lc-y2 .lc-phase {
      color: var(--green-l);
    }

    #append-content .lc.lc-y3 .lc-phase {
      color: var(--amber-l);
    }

    #append-content .lc.lc-y1 .lc-bar {
      background: linear-gradient(90deg, var(--blue), var(--blue-l));
    }

    #append-content .lc.lc-y2 .lc-bar {
      background: linear-gradient(90deg, var(--green), var(--green-l));
    }

    #append-content .lc.lc-y3 .lc-bar {
      background: linear-gradient(90deg, var(--amber), var(--amber-l));
    }

    #append-content .lc.lc-y1 .lc-art {
      color: rgba(91, 155, 248, .30);
    }

    #append-content .lc.lc-y2 .lc-art {
      color: rgba(34, 212, 104, .28);
    }

    #append-content .lc.lc-y3 .lc-art {
      color: rgba(251, 191, 36, .28);
    }

    #append-content .lc.lc-y3 {
      box-shadow: 0 16px 40px rgba(251, 191, 36, .06);
    }

    #append-content .lc.lc-y3::before {
      background:
        radial-gradient(circle at 82% 18%, rgba(251, 191, 36, .13), transparent 24%),
        radial-gradient(circle at 16% 16%, rgba(255, 255, 255, .06), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, .02), transparent 32%);
    }

    #append-content #lasting .lasting-grid:has(.lc.lc-y1:hover) .lasting-rail-glow,
    #append-content #lasting .lasting-grid:has(.lc.lc-y1:focus-visible) .lasting-rail-glow {
      opacity: .84;
    }

    #append-content #lasting .lasting-grid:has(.lc.lc-y2:hover) .lasting-rail-glow,
    #append-content #lasting .lasting-grid:has(.lc.lc-y2:focus-visible) .lasting-rail-glow {
      opacity: .95;
    }

    #append-content #lasting .lasting-grid:has(.lc.lc-y3:hover) .lasting-rail-glow,
    #append-content #lasting .lasting-grid:has(.lc.lc-y3:focus-visible) .lasting-rail-glow {
      opacity: 1;
      filter: drop-shadow(0 0 14px rgba(251, 191, 36, .18));
    }

    #append-content .tp {
      position: relative;
      background: #FFFFFF;
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 24px;
      padding: 32px 28px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
    }

    #append-content .tp::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: var(--tp-color, var(--blue-l));
      opacity: 0.8;
    }

    #append-content .tp:hover {
      transform: translateY(-8px);
      background: #FFFFFF;
      border-color: color-mix(in srgb, var(--tp-color, var(--blue-l)) 24%, rgba(15, 23, 42, 0.12));
      box-shadow: 0 30px 60px -20px rgba(15, 23, 42, 0.12);
    }

    #append-content .tp-no {
      position: absolute;
      top: 10px;
      right: 20px;
      font-family: var(--open-sans);
      font-size: 42px;
      font-weight: 800;
      color: var(--tp-color, var(--blue-l));
      opacity: 0.06;
      pointer-events: none;
      line-height: 1;
    }

    #append-content .tp-tag {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-weight: 700;
      color: var(--tp-color, var(--blue-l));
      margin-bottom: 4px;
    }

    #append-content .tp-title {
      font-size: 1.15rem;
      font-weight: 700;
      line-height: 1.25;
      color: #0f172a;
      margin-bottom: 4px;
    }

    #append-content .tp-body {
      font-size: 0.88rem;
      line-height: 1.65;
      color: #475569;
      margin-bottom: 8px;
    }

    #append-content .tp-body strong {
      color: #0f172a;
      font-weight: 600;
    }

    #append-content .tp-fix {
      margin-top: auto;
      padding: 16px;
      border-radius: 14px;
      font-size: 0.8rem;
      line-height: 1.5;
      background: color-mix(in srgb, var(--tp-color, var(--blue-l)) 8%, transparent);
      border: 1px solid color-mix(in srgb, var(--tp-color, var(--blue-l)) 15%, transparent);
    }

    #append-content .tp-fix span {
      display: block;
      color: var(--tp-color, var(--blue-l));
      font-weight: 600;
    }

    #append-content .story-modal.is-open .tp {
      animation: tpSlideIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      opacity: 0;
      transform: translateY(30px);
    }

    @keyframes tpSlideIn {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    #append-content .story-modal.is-open .tp:nth-child(1) {
      animation-delay: 0.1s;
    }

    #append-content .story-modal.is-open .tp:nth-child(2) {
      animation-delay: 0.2s;
    }

    #append-content .story-modal.is-open .tp:nth-child(3) {
      animation-delay: 0.3s;
    }

    #append-content .story-modal.is-open .tp:nth-child(4) {
      animation-delay: 0.4s;
    }

    #append-content .story-modal.is-open .tp:nth-child(5) {
      animation-delay: 0.5s;
    }

    #append-content .story-modal.is-open .tp:nth-child(6) {
      animation-delay: 0.6s;
    }

    #append-content .out-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1px;
      background: var(--b);
      border-radius: var(--rxl);
      overflow: hidden;
      margin-bottom: 14px;
    }

    #append-content .otile {
      background: var(--ink);
      padding: 28px 26px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    #append-content .onum {
      font-family: var(--serif);
      font-size: clamp(1.8rem, 3.5vw, 2.8rem);
      font-weight: 900;
      line-height: 1;
    }

    #append-content .onum.b {
      color: var(--blue-l);
    }

    #append-content .onum.g {
      color: var(--green-l);
    }

    #append-content .onum.a {
      color: var(--amber-l);
    }

    #append-content .olabel {
      font-size: 12.5px;
      color: var(--mid);
      line-height: 1.45;
    }

    #append-content .findings {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    #append-content .fi {
      background: var(--ink);
      border: 1px solid var(--b);
      border-radius: var(--rl);
      padding: 26px 28px;
      display: grid;
      grid-template-columns: 44px 1fr;
      gap: 20px;
      align-items: start;
      transition: all .2s;
    }

    #append-content .fi:hover {
      border-color: var(--b2);
      background: var(--ink2);
    }

    #append-content .fi-n {
      font-family: var(--serif);
      font-size: 2.2rem;
      font-weight: 900;
      line-height: 1;
      color: rgba(91, 155, 248, .1);
      letter-spacing: -.05em;
      padding-top: 2px;
    }

    #append-content .fi-title {
      font-size: .98rem;
      font-weight: 700;
      margin-bottom: 7px;
      line-height: 1.35;
    }

    #append-content .fi-body {
      font-size: .82rem;
      line-height: 1.8;
      margin-bottom: 9px;
    }

    #append-content .fi-so {
      font-size: .77rem;
      color: var(--blue-l);
      line-height: 1.6;
      padding-left: 11px;
      border-left: 2px solid rgba(91, 155, 248, .22);
      font-style: italic;
    }

    #append-content .timeline {
      display: flex;
      flex-direction: column;
    }

    #append-content .ts {
      display: grid;
      grid-template-columns: 90px 2px 1fr;
      gap: 0 28px;
      align-items: start;
      padding-bottom: 44px;
    }

    #append-content .ts:last-child {
      padding-bottom: 0;
    }

    #append-content .ts-n {
      font-family: var(--serif);
      font-size: 2.8rem;
      font-weight: 700;
      color: rgba(255, 255, 255, .05);
      text-align: right;
      line-height: 1;
      padding-top: 4px;
    }

    #append-content .ts-line {
      background: var(--b);
      position: relative;
    }

    #append-content .ts-line::before {
      content: "";
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--blue);
      box-shadow: 0 0 14px rgba(91, 155, 248, .55);
    }

    #append-content .ts-title {
      font-size: 1.2rem;
      font-weight: 700;
      margin-bottom: 9px;
      line-height: 1.25;
    }

    #append-content .ts-desc {
      font-size: .875rem;
      line-height: 1.8;
      margin-bottom: 14px;
    }

    #append-content .ts-outs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    #append-content .tout {
      background: var(--ink2);
      border: 1px solid var(--b);
      border-radius: var(--r);
      padding: 12px;
    }

    #append-content .tout-v {
      font-size: 11.5px;
      line-height: 1.5;
    }

    #append-content .eng-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      margin-top: 56px;
    }

    #append-content .eng-name {
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 4px;
    }

    #append-content .eng-tag {
      font-family: var(--mono);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      padding: 4px 12px;
      border-radius: 50px;
      display: inline-block;
      margin-bottom: 20px;
    }

    #append-content .eng-desc {
      font-size: 0.92rem;
      line-height: 1.65;
      color: #475569;
      margin-bottom: 28px;
    }

    #append-content .eng-desc strong {
      color: #0f172a;
      font-weight: 700;
    }

    #append-content .eng-domains {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: auto;
    }

    #append-content .eng-d {
      font-size: 10px;
      padding: 6px 14px;
      border-radius: 999px;
      background: #F1F5F9;
      border: 1px solid rgba(15, 23, 42, 0.05);
      color: #64748B;
      font-family: var(--mono);
      letter-spacing: 0.04em;
    }

    #append-content .eng-meta {
      background: rgba(248, 250, 252, 0.65);
      backdrop-filter: blur(24px) saturate(180%);
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      border-radius: 0 0 22px 22px;
      padding: 24px 32px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      border-top: 1px solid rgba(15, 23, 42, 0.05);
      position: relative;
      z-index: 1;
    }

    #append-content .emc {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    #append-content .eml {
      font-family: var(--mono);
      font-size: 9px;
      color: #64748b;
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-bottom: 2px;
    }

    #append-content .emv {
      font-size: 13px;
      color: #0f172a;
      font-weight: 600;
    }

    #append-content .e1 {
      background-image: url('/images/ambiz-tech/assets/lasting-strengthen-blue.png');
    }

    #append-content .e1 .eng-bar { background: #2563EB; }
    #append-content .e1 .eng-tag { background: rgba(37, 99, 235, 0.1); color: #1E40AF; border: 1px solid rgba(37, 99, 235, 0.2); }

    #append-content .e2 {
      background-image: url('/images/ambiz-tech/assets/lasting-strengthen-green-river.webp');
    }

    #append-content .e2 .eng-bar { background: #059669; }
    #append-content .e2 .eng-tag { background: rgba(5, 150, 105, 0.1); color: #065F46; border: 1px solid rgba(5, 150, 105, 0.2); }

    #append-content .e3 {
      background-image: url('/images/ambiz-tech/assets/lasting-build-office.png');
    }

    #append-content .e3 .eng-bar { background: #7C3AED; }
    #append-content .e3 .eng-tag { background: rgba(124, 58, 237, 0.1); color: #5B21B6; border: 1px solid rgba(124, 58, 237, 0.2); }

    #append-content .e4 {
      background-image: url('/images/ambiz-tech/assets/lasting-compound-gold-river.webp');
    }

    #append-content .e4 .eng-bar { background: #D97706; }
    #append-content .e4 .eng-tag { background: rgba(217, 119, 6, 0.1); color: #92400E; border: 1px solid rgba(217, 119, 6, 0.2); }

    /* Engage cards: rounded full-background cards with per-card image direction */
    #append-content #engage .eng-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
      margin-top: 52px;
      align-items: stretch;
    }

    #append-content #engage .eng {
      --eng-accent: #2563eb;
      --eng-accent-soft: rgba(37, 99, 235, 0.14);
      --eng-accent-line: rgba(37, 99, 235, 0.22);
      --eng-image: none;
      --eng-image-ready: none;
      position: relative;
      min-height: 400px;
      padding: 14px;
      border-radius: 30px;
      border: 1px solid rgba(148, 163, 184, 0.22);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.64) 0%, rgba(255, 255, 255, 0.72) 100%);
      box-shadow:
        0 28px 90px -42px rgba(15, 23, 42, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
      isolation: isolate;
    }

    #append-content #engage .eng::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
      z-index: 0;
    }

    #append-content #engage .eng::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0.02) 100%);
      transition: opacity 0.5s ease, background 0.5s ease;
      z-index: 0;
    }

    #append-content #engage .eng-media {
      position: absolute;
      inset: 0;
      border-radius: inherit;
      overflow: hidden;
      z-index: 0;
      background: #dbe4ef;
    }

    #append-content #engage .eng-media::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: var(--eng-image) center center / cover no-repeat;
      filter: saturate(1.14) contrast(1.06) brightness(0.95);
      transform: scale(1.08);
      transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), filter 0.65s ease;
    }

    #append-content #engage .eng-media::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 24%, rgba(12, 18, 30, 0.06) 46%, rgba(255, 255, 255, 0.72) 100%),
        linear-gradient(145deg, var(--eng-accent-soft), transparent 58%);
      transition: opacity 0.5s ease, background 0.5s ease;
    }

    #append-content #engage .eng:hover {
      transform: translateY(-5px);
      box-shadow:
        0 38px 100px -42px rgba(15, 23, 42, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    }

    #append-content #engage .eng-bar {
      position: absolute;
      left: 14px;
      right: 14px;
      top: 14px;
      height: 1px;
      opacity: 0.72;
      z-index: 2;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--eng-accent-line), rgba(255, 255, 255, 0));
    }

    #append-content #engage .eng-body {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      justify-content: space-between;
      gap: 12px;
      flex: 1;
      padding: 30px 18px 16px;
      border-radius: 22px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.18) 36%, rgba(255, 255, 255, 0.82) 100%);
      transition: padding 0.45s ease, background 0.45s ease, transform 0.45s ease;
    }

    #append-content #engage .eng-num {
      margin-bottom: 4px;
      color: #334155;
      font-size: 9px;
      letter-spacing: 0.14em;
    }

    #append-content #engage .eng-name {
      font-size: clamp(1.18rem, 1.55vw, 1.6rem);
      line-height: 1.02;
      font-weight: 700;
      letter-spacing: -0.04em;
      margin-bottom: 8px;
      color: #FFFFFF !important;
      text-shadow: 0 1px 14px rgba(15, 23, 42, 0.28);
      max-width: 10ch;
    }

    #append-content #engage .eng-tag {
      padding: 7px 12px;
      border-radius: 999px;
      font-size: 8px;
      letter-spacing: 0.1em;
      font-weight: 700;
      margin-bottom: 12px;
      background: rgba(255, 255, 255, 0.76);
      box-shadow: inset 0 0 0 1px var(--eng-accent-line);
    }

    #append-content #engage .eng-desc {
      max-width: none;
      font-size: 0.96rem;
      line-height: 1.56;
      color: #475569;
      margin-bottom: 18px;
    }

    #append-content #engage .eng-desc strong {
      color: #0f172a;
      font-weight: 700;
    }

    #append-content #engage .eng-reveal {
      max-height: 540px;
      opacity: 1;
      overflow: hidden;
      transition:
        max-height 0.65s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.45s ease,
        margin-top 0.45s ease;
    }

    #append-content #engage .eng-domains {
      gap: 8px;
      margin-top: auto;
      max-width: 100%;
    }

    #append-content #engage .eng-d {
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(241, 245, 249, 0.74);
      border: 1px solid rgba(148, 163, 184, 0.18);
      color: #64748b;
      font-size: 8px;
      letter-spacing: 0.06em;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
    }

    #append-content #engage .eng-meta {
      position: relative;
      z-index: 2;
      padding: 10px 4px 2px;
      border-radius: 0;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      background: none;
      border: none;
      box-shadow: none;
    }

    #append-content #engage .emc {
      padding: 10px 12px;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.7);
      border: 1px solid rgba(255, 255, 255, 0.56);
      min-height: 68px;
      justify-content: center;
    }

    #append-content #engage .eml {
      font-size: 8px;
      letter-spacing: 0.12em;
      color: #475569;
    }

    #append-content #engage .emv {
      font-size: 12px;
      line-height: 1.22;
      font-weight: 700;
      color: #0f172a;
    }

    #append-content #engage .eng-toggle {
      grid-column: 1 / -1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: fit-content;
      margin-top: 2px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.5);
      background: rgba(255, 255, 255, 0.66);
      color: #334155;
      font-family: var(--mono);
      font-size: 8px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      cursor: pointer;
      transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    }

    #append-content #engage .eng-toggle::before {
      content: "+";
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--eng-accent-soft);
      color: #0f172a;
      font-size: 11px;
      line-height: 1;
      letter-spacing: 0;
      font-family: var(--sans);
      font-weight: 600;
    }

    #append-content #engage .eng-toggle:hover,
    #append-content #engage .eng-toggle:focus-visible {
      transform: translateY(-1px);
      border-color: var(--eng-accent-line);
      background: rgba(255, 255, 255, 0.92);
      outline: none;
    }

    #append-content #engage .eng.is-collapsed {
      min-height: 340px;
    }

    #append-content #engage .eng.is-collapsed::before {
      opacity: 1;
    }

    #append-content #engage .eng:not(.is-collapsed) .eng-media::before {
      filter: saturate(1.04) contrast(1.02) brightness(0.88) blur(9px);
      transform: scale(1.16);
    }

    #append-content #engage .eng:not(.is-collapsed) .eng-media::after {
      background:
        radial-gradient(120% 100% at 50% 18%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06) 36%, transparent 62%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.18) 28%, rgba(255, 255, 255, 0.68) 100%),
        linear-gradient(145deg, var(--eng-accent-soft), transparent 58%);
    }

    #append-content #engage .eng.is-collapsed .eng-body {
      justify-content: flex-start;
      padding: 18px 12px 10px;
      border-radius: 0;
      background: none;
    }

    #append-content #engage .eng:not(.is-collapsed) .eng-body {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    #append-content #engage .eng.is-collapsed .eng-num,
    #append-content #engage .eng.is-collapsed .eng-tag {
      opacity: 0;
      max-height: 0;
      margin: 0;
      overflow: hidden;
      pointer-events: none;
    }

    #append-content #engage .eng.is-collapsed .eng-name {
      max-width: 9ch;
      margin-bottom: 0;
      font-size: clamp(1.15rem, 1.45vw, 1.5rem);
      color: #FFFFFF !important;
      text-shadow: 0 1px 14px rgba(15, 23, 42, 0.38);
    }

    #append-content #engage .eng.is-collapsed .eng-reveal {
      max-height: 0;
      opacity: 0;
      margin-top: 0;
      pointer-events: none;
    }

    #append-content #engage .eng.is-collapsed .eng-meta {
      padding: 8px 0 0;
    }

    #append-content #engage .eng:not(.is-collapsed) .eng-toggle::before {
      content: "-";
    }

    #append-content #engage .e1 {
      --eng-accent: #2563eb;
      --eng-accent-soft: rgba(37, 99, 235, 0.18);
      --eng-accent-line: rgba(37, 99, 235, 0.26);
      --eng-image-ready: url('/images/ambiz-tech/assets/engage-card-blue.webp');
    }

    #append-content #engage .e1 .eng-tag {
      color: #1d4ed8;
    }

    #append-content #engage .e2 {
      --eng-accent: #0f766e;
      --eng-accent-soft: rgba(16, 185, 129, 0.18);
      --eng-accent-line: rgba(5, 150, 105, 0.24);
      --eng-image-ready: url('/images/ambiz-tech/assets/engage-card-green.webp');
    }

    #append-content #engage .e2 .eng-tag {
      color: #0f766e;
    }

    #append-content #engage .e3 {
      --eng-accent: #7c3aed;
      --eng-accent-soft: rgba(124, 58, 237, 0.18);
      --eng-accent-line: rgba(124, 58, 237, 0.24);
      --eng-image-ready: url('/images/ambiz-tech/assets/engage-card-purple.webp');
    }

    #append-content #engage .e3 .eng-tag {
      color: #6d28d9;
    }

    #append-content #engage .e4 {
      --eng-accent: #d97706;
      --eng-accent-soft: rgba(245, 158, 11, 0.18);
      --eng-accent-line: rgba(217, 119, 6, 0.26);
      --eng-image-ready: url('/images/ambiz-tech/assets/engage-card-gold.webp');
    }

    #append-content #engage.is-media-ready .eng {
      --eng-image: var(--eng-image-ready);
    }

    #append-content #engage .e4 .eng-tag {
      color: #b45309;
    }

    #append-content .ind-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 32px;
      padding: 16px 0;
      background: none;
      border: none;
      border-radius: 0;
      align-items: center;
    }

    #append-content .ind-lbl {
      font-family: var(--mono);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: #94a3b8;
      margin-right: 8px;
    }

    #append-content .ind {
      display: inline-flex;
      align-items: center;
      padding: 6px 14px;
      border-radius: 999px;
      background: #F1F5F9;
      border: 1px solid rgba(15, 23, 42, 0.05);
      font-size: 11px;
      color: #475569;
      font-weight: 500;
      transition: all .2s;
    }

    #append-content .ind:hover {
      background: #E2E8F0;
      color: #0f172a;
    }

    #append-content .cta-timing {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: clamp(40px, 6vw, 80px);
      flex-wrap: nowrap !important;
      margin-bottom: 40px;
      padding: 0;
      background: none;
      border: none;
      border-radius: 0;
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
    }

    #append-content .ctt {
      text-align: center;
      transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
      animation: floatStats 5.6s ease-in-out infinite;
    }

    #append-content .ctt:nth-child(3) { animation-delay: 0.8s; }
    #append-content .ctt:nth-child(5) { animation-delay: 1.6s; }

    @keyframes floatStats {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-5px); }
    }

    #append-content .ctt:hover {
      transform: translateY(-7px);
      animation-play-state: paused;
    }

    #append-content .ctn {
      font-family: var(--serif);
      font-size: clamp(2.55rem, 4.6vw, 4rem);
      font-weight: 400;
      line-height: 1;
      letter-spacing: -.03em;
      background: linear-gradient(135deg, #0f172a 30%, #2563eb 74%, #22c55e 115%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 10px;
    }

    #append-content .ctl {
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 500;
      color: #6b7280;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      opacity: 0.8;
    }

    #append-content .ctsp {
      display: block;
      width: 1px;
      height: 52px;
      background: rgba(15, 23, 42, 0.08);
      align-self: center;
      opacity: 0.45;
    }

    #append-content .cta-mobile-grid {
      display: none;
    }

    #append-content .cta-btns {
      display: flex;
      gap: 16px;
      justify-content: center;
      flex-wrap: wrap;
    }


    #append-content .domain-blue {
      --domain-color: var(--blue-l);
    }

    #append-content .domain-purple {
      --domain-color: var(--purple-l);
    }

    #append-content .domain-amber {
      --domain-color: var(--amber-l);
    }

    #append-content .domain-green {
      --domain-color: var(--green-l);
    }

    #append-content .domain-coral {
      --domain-color: var(--coral-l);
    }

    /* ── Domains Remake: Sticky Instrument Sequence ── */
    #append-content .ds-sequence {
      --ds-card-width: min(100%, 548px);
      --ds-card-max-width: min(548px, calc(100vw - (var(--page-gutter) * 2)));
      --ds-card-right: clamp(28px, 3vw, 52px);
      --ds-card-min-height: clamp(420px, 48vh, 540px);
      position: relative;
      padding: clamp(18px, 2.5vw, 28px) 0 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      overflow: visible;
    }

    #append-content .ds-sequence::before {
      content: none;
    }

    #append-content .ds-header,
    #append-content .ds-layout {
      position: relative;
      z-index: 2;
    }

    #append-content .ds-header {
      max-width: 1360px;
      margin-bottom: 34px;
    }

    #append-content .ds-eyebrow,
    #append-content .ds-stage-label,
    #append-content .ds-detail-label,
    #append-content .ds-panel-meta,
    #append-content .ds-stage-kicker {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    #append-content .ds-eyebrow {
      color: var(--blue-l);
      margin-bottom: 12px;
    }

    #append-content .ds-title {
      font-size: clamp(2rem, 4.5vw, 4rem);
      line-height: 1.02;
      letter-spacing: -.05em;
      color: #0f172a;
      max-width: 12ch;
      margin-bottom: 14px;
    }

    #append-content .ds-summary {
      max-width: 58ch;
      color: #475569;
      line-height: 1.72;
      font-size: .95rem;
    }

    #append-content .ds-layout {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(0, .96fr);
      gap: clamp(24px, 4vw, 54px);
      align-items: start;
      max-width: 1360px;
    }

    #append-content .ds-stage-column {
      position: sticky;
      top: 104px;
      align-self: start;
      height: calc(100vh - 140px);
      z-index: 4;
    }

    /* Tablet Frame Miniature */
    #append-content .ds-tablet-mini {
      position: absolute;
      left: 6%; /* Shifted Left */
      top: 58%; /* Shifted Down */
      transform: translateY(-50%);
      width: min(79%, 472px);
      height: 344px;
      z-index: 10;
      opacity: 1 !important;
      visibility: visible !important;
    }

    #append-content .ds-tablet-bezel {
      width: 100%;
      height: 100%;
      background: #0f172a; /* Matte Black/Navy Bezel */
      padding: 14px;
      border-radius: 32px;
      border: 1px solid #1e293b;
      box-shadow: 
        0 40px 90px rgba(0,0,0,0.35),
        inset 0 1px 1px rgba(255,255,255,0.1);
      position: relative;
    }

    #append-content .ds-tablet-screen {
      width: 100%;
      height: 100%;
      background: #ffffff; /* Crisp White Screen */
      border-radius: 20px;
      overflow: hidden;
      position: relative;
      padding: 0;
      display: flex;
      flex-direction: column;
      box-shadow: inset 0 2px 10px rgba(0,0,0,0.03);
    }

    #append-content .ds-tablet-view {
      position: absolute;
      inset: 0;
      padding: clamp(20px, 3vw, 32px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 16px;
      z-index: 5;
      transition: opacity 0.8s ease;
      opacity: 1; /* Default to visible to prevent 'ghosting' */
      visibility: visible;
      animation-play-state: running !important; /* Force animations to play */
    }

    #append-content .view-revenue {
      animation: tabletToggle 12s infinite;
    }

    #append-content .view-table {
      animation: tabletToggleAlt 12s infinite;
    }

    /* Robust Tablet Toggle Keyframes */
    @keyframes tabletToggle {
      0%, 48% { opacity: 1; visibility: visible; transform: translateY(0); }
      50%, 98% { opacity: 0; visibility: hidden; transform: translateY(10px); }
      100% { opacity: 1; visibility: visible; transform: translateY(0); }
    }
    @keyframes tabletToggleAlt {
      0%, 48% { opacity: 0; visibility: hidden; transform: translateY(10px); }
      50%, 98% { opacity: 1; visibility: visible; transform: translateY(0); }
      100% { opacity: 0; visibility: hidden; transform: translateY(10px); }
    }


    /* Tablet Table Styling - Terminal Emerald Theme */
    #append-content .ds-tablet-table-wrap {
      color: #0f172a;
      font-family: var(--fb);
    }

    #append-content .ds-mini-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.75rem;
      margin-top: 10px;
    }

    #append-content .ds-mini-table th {
      text-align: left;
      padding: 8px 4px;
      color: #059669; /* Emerald Green */
      font-family: var(--mono);
      font-size: 8px;
      text-transform: uppercase;
      border-bottom: 1px solid #ecfdf5;
    }

    #append-content .ds-mini-table td {
      padding: 10px 4px;
      border-bottom: 1px solid #f8fafc;
      color: #0f172a; /* Black/Navy */
    }

    #append-content .t-tag {
      font-size: 8px;
      padding: 2px 6px;
      background: #ecfdf5;
      border: 1px solid #a7f3d0;
      border-radius: 4px;
      color: #065f46; /* Deep Green */
    }

    #append-content .ds-tablet-screen h4 {
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 10px;
      color: #065f46;
    }

    /* Cleaned up Tablet Screen Typography - Rapih Edition */
    #append-content .ds-tablet-screen .ds-systems-summary {
      position: relative !important;
      left: 0 !important;
      top: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
      text-align: left;
      opacity: 1 !important;
      visibility: visible !important;
      transform: none !important;
      padding: 0 !important;
      margin: 0 !important;
    }

    #append-content .ds-tablet-screen .csys-summary-value {
      font-size: 2.4rem !important;
      letter-spacing: -0.04em;
      margin-bottom: 4px;
      color: #0f172a !important;
      font-weight: 800 !important;
      opacity: 1 !important;
      visibility: visible !important;
      display: block !important;
      animation: tabletRevenueFadeIn 0.8s ease forwards;
    }

    /* Target the main revenue container to ensure it's not hidden */
    #append-content .ds-tablet-screen .csys-summary-main {
      opacity: 1 !important;
      visibility: visible !important;
      display: block !important;
      transform: none !important;
    }

    @keyframes tabletRevenueFadeIn {
      0% { opacity: 0; transform: translateY(10px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    #append-content .ds-tablet-screen .csys-summary-value * {
      color: inherit !important;
    }

    #append-content .ds-tablet-screen .csys-summary-line {
      font-size: 0.85rem !important;
      font-weight: 500;
      color: #059669 !important;
      opacity: 1 !important;
      visibility: visible !important;
    }

    #append-content .ds-tablet-screen .csys-summary-line strong {
      color: #f59e0b !important; /* Trend highlight */
    }

    #append-content .ds-tablet-screen .csys-summary-metrics {
      display: flex;
      gap: 40px;
      margin-top: 24px;
      padding-top: 24px;
      border-top: 1px solid #f1f5f9;
      opacity: 1 !important;
      visibility: visible !important;
    }

    #append-content .ds-tablet-screen .csys-metric {
      display: flex;
      flex-direction: column;
      gap: 4px;
      opacity: 1 !important;
      visibility: visible !important;
    }

    #append-content .ds-tablet-screen .csys-metric-label {
      font-family: var(--mono);
      font-size: 8px !important;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: #059669 !important;
      opacity: 1 !important;
      visibility: visible !important;
    }

    #append-content .ds-tablet-screen .csys-metric-value {
      font-size: 1.4rem !important;
      font-weight: 700;
      color: #0f172a !important;
      opacity: 1 !important;
      visibility: visible !important;
    }
    
    #append-content .ds-tablet-screen .t-val {
      font-size: inherit;
      color: inherit !important;
      opacity: 1 !important;
      visibility: visible !important;
    }

    #append-content .ds-tablet-screen .t-met-item {
      display: flex;
      flex-direction: column;
      gap: 4px;
      opacity: 1 !important;
      visibility: visible !important;
    }

    #append-content .ds-tablet-top-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 20px;
      background: #f8fafc;
      border-bottom: 1px solid #f1f5f9;
      font-family: var(--mono);
      font-size: 7px;
      letter-spacing: 0.1em;
      color: #94a3b8;
    }

    #append-content .t-status::before {
      content: "";
      display: inline-block;
      width: 5px;
      height: 5px;
      background: #10b981;
      border-radius: 50%;
      margin-right: 6px;
      vertical-align: middle;
      box-shadow: 0 0 8px #10b981;
    }

    #append-content .ds-stage-sticky {
      position: relative;
      min-height: 100%;
    }

    #append-content .ds-stage-topline {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 14px;
    }

    #append-content .ds-stage-index {
      font-family: var(--serif);
      font-size: clamp(1.7rem, 3.2vw, 3rem);
      line-height: .9;
      letter-spacing: -.08em;
      color: #0f172a;
    }

    #append-content .ds-detail-label {
      color: color-mix(in srgb, var(--domain-color) 70%, #475569 30%);
    }

    #append-content .ds-progress {
      display: inline-grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 6px;
      min-width: 120px;
    }

    #append-content .ds-progress-segment {
      height: 6px;
      border-radius: 999px;
      background: rgba(148, 163, 184, .28);
      transition: background .25s ease, transform .25s ease;
    }

    #append-content .ds-progress-segment.is-active {
      background: var(--domain-color);
      transform: scaleX(1.02);
      box-shadow: 0 0 16px color-mix(in srgb, var(--domain-color) 42%, transparent);
    }

    #append-content .ds-stage-panels {
      position: relative;
      min-height: 560px;
    }

    #append-content .ds-panel {
      position: absolute;
      inset: 0;
      opacity: 0;
      transform: translateY(18px) scale(.985);
      pointer-events: none;
      transition: opacity .38s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
    }

    #append-content .ds-panel.is-active {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }

    #append-content .ds-panel-title {
      font-size: clamp(1.95rem, 3.9vw, 3.4rem);
      line-height: .94;
      letter-spacing: -.06em;
      color: #0f172a;
      margin: 10px 0 12px;
    }

    #append-content .ds-mobile-domain-head {
      display: none;
    }

    #append-content .ds-panel-line {
      max-width: 26ch;
      font-size: 1rem;
      line-height: 1.55;
      color: #334155;
      margin-bottom: 22px;
    }

    #append-content .ds-panel-line.is-hidden {
      display: none;
    }

    #append-content .ds-sequence[data-active-domain="network"] .ds-stage-index,
    #append-content .ds-sequence[data-active-domain="systems"] .ds-stage-index,
    #append-content .ds-sequence[data-active-domain="systems"] .ds-panel-title,
    #append-content .ds-sequence[data-active-domain="systems"] .ds-stage-label,
    #append-content .ds-sequence[data-active-domain="systems"] .ds-panel-meta,
    #append-content .ds-sequence[data-active-domain="network"] .ds-panel-title,
    #append-content .ds-sequence[data-active-domain="network"] .ds-stage-label,
    #append-content .ds-sequence[data-active-domain="network"] .ds-panel-meta {
      color: rgba(255, 255, 255, .92);
    }

    #append-content .ds-sequence[data-active-domain="network"] .ds-progress-segment {
      background: rgba(255, 255, 255, .16);
    }

    #append-content .ds-sequence[data-active-domain="network"] .ds-progress-segment.is-active {
      background: color-mix(in srgb, var(--coral-l) 92%, white 8%);
      box-shadow: 0 0 16px color-mix(in srgb, var(--coral-l) 42%, transparent);
    }

    #append-content .ds-artifact {
      color: var(--domain-color);
      border-radius: 26px;
      border: 1px solid color-mix(in srgb, var(--domain-color) 18%, rgba(15, 23, 42, .06));
      background:
        radial-gradient(circle at 22% 18%, color-mix(in srgb, var(--domain-color) 16%, transparent), transparent 28%),
        linear-gradient(180deg, rgba(15, 23, 42, .02), rgba(15, 23, 42, .01)),
        rgba(255, 255, 255, .76);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
      overflow: hidden;
    }

    #append-content .ds-artifact-stage {
      width: 100%;
      min-height: 330px;
      padding: 18px;
      margin-bottom: 20px;
    }

    #append-content .ds-artifact-thumb {
      display: none;
    }

    #append-content .ds-artifact svg {
      width: 100%;
      height: auto;
      display: block;
    }

    #append-content .ds-steps {
      display: flex;
      flex-direction: column;
      gap: 30px;
      padding-right: clamp(0px, 1vw, 12px);
      overflow: visible;
      min-width: 0;
    }

    #append-content .ds-step {
      min-height: 74vh;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      position: relative;
      width: 100%;
    }

    #append-content .ds-step-card {
      width: var(--ds-card-width);
      position: relative;
      padding: clamp(18px, 2.6vw, 28px);
      border-radius: 24px;
      background: rgba(255, 255, 255, .82);
      border: 1px solid rgba(15, 23, 42, .08);
      box-shadow: 0 14px 34px rgba(15, 23, 42, .05);
      transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
      position: sticky;
      top: 140px;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    #append-content .ds-step:not(.ds-step-people) .ds-step-card {
      position: absolute;
      left: auto;
      right: var(--ds-card-right);
      top: 50%;
      bottom: auto;
      width: var(--ds-card-width);
      max-width: var(--ds-card-max-width);
      margin: 0;
      z-index: 3;
      transform: translateY(-50%);
      opacity: 0;
      visibility: hidden;
      transition: all .6s cubic-bezier(.2, .8, .2, 1);
      min-height: var(--ds-card-min-height);
    }

    #append-content .ds-step:not(.ds-step-people).is-active .ds-step-card {
      opacity: 1;
      visibility: visible;
      transform: translateY(calc(-50% - 3px));
    }

    #append-content .ds-step.is-active .ds-step-card {
      transform: translateY(-3px);
      border-color: color-mix(in srgb, var(--domain-color) 24%, rgba(15, 23, 42, .1));
      box-shadow: 0 24px 58px color-mix(in srgb, var(--domain-color) 10%, rgba(15, 23, 42, .06));
    }

    #append-content .ds-step-question {
      font-size: clamp(.98rem, 1.62vw, 1.42rem);
      line-height: 1.08;
      letter-spacing: -.045em;
      color: #0f172a !important;
      max-width: 27ch;
      margin: 10px 0 10px;
    }

    #append-content .ds-step-interpretation {
      max-width: 42ch;
      color: #334155 !important;
      line-height: 1.55;
      font-size: .84rem;
      margin-bottom: 14px;
    }

    #append-content .ds-engage-line {
      margin-top: 12px;
      color: #475569 !important;
      line-height: 1.55;
      font-size: .8rem;
    }

    #append-content .ds-engage-line span {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: color-mix(in srgb, var(--domain-color) 70%, #475569 30%);
      margin-right: 10px;
    }

    #append-content .ds-detail {
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid rgba(15, 23, 42, .08);
      margin-top: auto;
    }

    #append-content .ds-detail-summary {
      display: grid;
      grid-template-columns: 124px 1fr;
      gap: 12px;
      align-items: start;
      margin-bottom: 12px;
    }

    #append-content .ds-detail-summary p {
      color: #475569;
      font-size: .78rem;
      line-height: 1.6;
    }

    #append-content .ds-services {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    #append-content .ds-services .svc {
      background: rgba(248, 250, 252, .96);
      border-color: color-mix(in srgb, var(--domain-color) 16%, rgba(15, 23, 42, .08));
    }

    #append-content .ds-services .svc-head {
      padding: 13px 14px;
    }

    #append-content .ds-services .svc-icon {
      background: color-mix(in srgb, var(--domain-color) 10%, white 90%);
      border-color: color-mix(in srgb, var(--domain-color) 18%, rgba(15, 23, 42, .08));
      color: color-mix(in srgb, var(--domain-color) 76%, #334155 24%);
    }

    #append-content .ds-services .svc-body {
      background: rgba(255, 255, 255, .88);
    }

    #append-content .ds-step-people {
      min-height: min(980px, 96vh);
      padding: 28px 0 42px;
      isolation: isolate;
      overflow: visible;
      border-radius: 34px;
    }

    #append-content .ds-step[data-domain="network"] {
      min-height: min(980px, 96vh);
      padding: 28px 0 42px;
      isolation: isolate;
      overflow: visible;
      border-radius: 34px;
    }

    #append-content .ds-step[data-domain="network"] .ds-step-card {
      position: absolute;
      left: auto;
      right: var(--ds-card-right);
      top: 50%;
      bottom: auto;
      width: var(--ds-card-width);
      max-width: var(--ds-card-max-width);
      margin: 0;
      z-index: 3;
      transform: translateY(calc(-50% + 8px));
      background:
        linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .82)),
        rgba(255, 255, 255, .84);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-color: rgba(255, 143, 122, .16);
      box-shadow:
        0 26px 64px rgba(15, 23, 42, .1),
        0 0 0 1px rgba(255, 255, 255, .36) inset;
      min-height: var(--ds-card-min-height);
      opacity: .22;
      transition:
        opacity .42s ease,
        transform .62s cubic-bezier(.2, .7, .2, 1),
        border-color .3s ease,
        box-shadow .3s ease;
    }

    #append-content .ds-step[data-domain="network"].is-active .ds-step-card {
      transform: translateY(calc(-50% - 3px));
      opacity: 1;
    }

    /* Systems Step Artifact */
    #append-content .ds-systems-stage {
      position: fixed;
      inset: 0;
      width: 100%;
      height: var(--viewport-h);
      max-width: none;
      border-radius: 0;
      overflow: hidden;
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      z-index: 0;
      transform: translateY(24px) scale(1.015);
      transition: opacity .32s ease, transform .42s cubic-bezier(.2, .7, .2, 1), filter .32s ease;
      filter: saturate(.98);
      background:
        radial-gradient(760px 420px at 18% 18%, rgba(92, 214, 130, .18) 0%, transparent 56%),
        radial-gradient(900px 520px at 82% 18%, rgba(34, 197, 94, .16) 0%, transparent 60%),
        radial-gradient(920px 560px at 50% 104%, rgba(10, 110, 46, .34) 0%, transparent 64%),
        linear-gradient(180deg, #07120c 0%, #0b2414 42%, #11361e 100%);
      border-top: 1px solid rgba(18, 67, 39, .72);
      border-bottom: 1px solid rgba(18, 67, 39, .72);
    }

    #append-content .ds-sequence.is-domains-visible[data-active-domain="systems"] .ds-step[data-domain="systems"] .ds-systems-stage {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) scale(1);
      filter: saturate(1);
    }

    #append-content .ds-sequence.is-domains-visible:not([data-active-domain="systems"]) .ds-step[data-domain="systems"] .ds-systems-stage {
      opacity: 0;
      visibility: hidden;
      transform: translateY(14px) scale(1.01);
      filter: saturate(.92);
    }

    /* Removed paused state for tablet compatibility */

    #append-content .ds-systems-stage::before {
      content: "";
      position: absolute;
      inset: -12%;
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(34% 38% at 18% 22%, rgba(92, 214, 130, .18), transparent 72%),
        radial-gradient(28% 34% at 74% 18%, rgba(34, 197, 94, .16), transparent 70%),
        radial-gradient(40% 46% at 50% 118%, rgba(13, 144, 58, .3), transparent 76%);
      filter: blur(34px) saturate(124%);
      opacity: .72;
      animation: dsSystemsAurora 24s ease-in-out infinite alternate;
      animation-play-state: paused;
    }

    #append-content .ds-systems-stage::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background-image:
        linear-gradient(to right, rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .04) 1px, transparent 1px);
      background-size: 52px 52px;
      mask-image: radial-gradient(78% 68% at 50% 46%, black, transparent 82%);
      opacity: .24;
    }

    @keyframes dsSystemsAurora {
      0% { transform: translate3d(-2%, -1%, 0) scale(1.02); }
      50% { transform: translate3d(2%, 1%, 0) scale(1.06); }
      100% { transform: translate3d(-1%, 3%, 0) scale(1.03); }
    }

    #append-content .ds-systems-stage > * {
      position: relative;
      z-index: 1;
    }

    #append-content .ds-systems-shell {
      position: absolute;
      inset: 0;
      padding: clamp(78px, 8vh, 102px) clamp(28px, 3vw, 46px) clamp(30px, 4vh, 52px) clamp(28px, 3.8vw, 56px);
    }

    #append-content .ds-systems-summary {
      position: absolute;
      left: clamp(28px, 3.8vw, 56px);
      top: clamp(196px, 28vh, 292px);
      width: min(34vw, 520px);
      max-width: calc(100vw - 760px);
      padding: 0;
      color: #fff;
      opacity: 0;
      transform: translateY(18px);
      transition: opacity .7s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
    }

    #append-content .ds-systems-stage.is-revealed .ds-systems-summary {
      opacity: 1;
      transform: translateY(0);
    }

    #append-content .csys-summary-main,
    #append-content .csys-summary-metrics {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity .65s ease, transform .82s cubic-bezier(.2, .7, .2, 1);
    }

    #append-content .ds-systems-stage.is-revealed .csys-summary-main {
      opacity: 1;
      transform: translateY(0);
      transition-delay: .08s;
    }

    #append-content .ds-systems-stage.is-revealed .csys-summary-metrics {
      opacity: 1;
      transform: translateY(0);
      transition-delay: .18s;
    }

    #append-content .csys-summary-main {
      padding-bottom: 22px;
    }

    #append-content .csys-summary-value {
      font-family: var(--fb);
      font-size: clamp(2.2rem, 3.8vw, 4.2rem);
      line-height: .88;
      letter-spacing: -.06em;
      font-weight: 700;
      color: #fff;
    }

    #append-content .csys-summary-value .dim {
      color: rgba(255, 255, 255, .55);
    }

    #append-content .csys-summary-line {
      margin-top: 8px;
      font-size: clamp(.95rem, 1.15vw, 1.12rem);
      line-height: 1.34;
      color: rgba(255, 255, 255, .8);
    }

    #append-content .csys-summary-line strong {
      color: #ffbf2f;
      font-weight: 700;
    }

    #append-content .csys-summary-line .ok {
      color: #67d86f;
      font-weight: 700;
    }

    #append-content .csys-summary-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 24px;
    }

    #append-content .csys-metric {
      opacity: 0;
      transform: translateY(10px);
      transition: opacity .45s ease, transform .55s ease;
    }

    #append-content .ds-systems-stage.is-revealed .csys-metric.is-on {
      opacity: 1;
      transform: translateY(0);
    }

    #append-content .csys-metric-label {
      font-family: var(--mono);
      font-size: 8px;
      font-weight: 500;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .54);
      margin-bottom: 8px;
    }

    #append-content .csys-metric-value {
      font-family: var(--fb);
      font-size: clamp(1.9rem, 2.2vw, 2.7rem);
      line-height: 1;
      font-weight: 700;
      letter-spacing: -.03em;
      color: #fff;
    }

    #append-content .csys-metric-note {
      font-size: .95rem;
      color: rgba(255, 255, 255, .72);
      margin-top: 8px;
    }

    #append-content .ds-systems-grid {
      position: absolute;
      left: clamp(28px, 3.8vw, 56px);
      bottom: clamp(16px, 2.5vh, 28px);
      width: min(26vw, 360px);
      max-width: calc(100vw - 820px);
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      align-items: end;
      transform: none;
    }

    #append-content .ds-systems-card {
      position: relative;
      background: rgba(255, 255, 255, .9);
      border: 1px solid rgba(220, 225, 235, .82);
      border-radius: 18px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, .07);
      overflow: hidden;
      opacity: 0;
      transform: translateY(18px);
      transition: opacity .7s ease, transform .85s cubic-bezier(.2, .7, .2, 1);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    #append-content .ds-systems-stage.is-revealed .ds-systems-card.is-on {
      opacity: 1;
      transform: translateY(0);
    }

    #append-content .csys-card-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 10px;
      padding: 10px 12px 8px;
      border-bottom: 1px solid rgba(232, 232, 237, .9);
    }

    #append-content .csys-card-head h4 {
      margin: 0;
      font-family: var(--fb);
      font-size: 11px;
      font-weight: 300;
      letter-spacing: -.015em;
      color: #1d1d1f;
    }

    #append-content .csys-card-meta {
      font-family: var(--mono);
      font-size: 7px;
      font-weight: 300;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #86868b;
      white-space: nowrap;
    }

    #append-content .csys-map-wrap {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      align-items: start;
      padding: 10px 12px 12px;
    }

    #append-content .csys-radar-svg {
      width: 100%;
      height: auto;
      display: block;
    }

    #append-content .csys-island {
      fill: #eef3ee;
      stroke: #d4e0d5;
      stroke-width: 1;
      stroke-dasharray: 1400;
      stroke-dashoffset: 1400;
      transition: stroke-dashoffset 1.4s ease-out, fill 1s ease;
    }

    #append-content .ds-systems-stage.is-revealed .csys-map-card.is-on .csys-island {
      stroke-dashoffset: 0;
      fill: #e5ede6;
    }

    #append-content .csys-reg-list {
      display: grid;
      gap: 4px;
      padding-top: 4px;
    }

    #append-content .csys-bubble .csys-bub-halo,
    #append-content .csys-bubble .csys-bub-dot,
    #append-content .csys-bubble .csys-bub-lbl,
    #append-content .csys-bubble .csys-bub-val {
      opacity: 0;
      transition: opacity .45s ease, transform .6s cubic-bezier(.34, 1.56, .64, 1);
    }

    #append-content .csys-bubble .csys-bub-halo,
    #append-content .csys-bubble .csys-bub-dot {
      transform-box: fill-box;
      transform-origin: center;
      transform: scale(.35);
    }

    #append-content .csys-bubble.is-on .csys-bub-halo,
    #append-content .csys-bubble.is-on .csys-bub-dot,
    #append-content .csys-bubble.is-on .csys-bub-lbl,
    #append-content .csys-bubble.is-on .csys-bub-val {
      opacity: 1;
    }

    #append-content .csys-bubble.is-on .csys-bub-halo,
    #append-content .csys-bubble.is-on .csys-bub-dot {
      transform: scale(1);
    }

    #append-content .csys-reg-row {
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: 8px;
      align-items: center;
      padding: 5px 0;
      border-bottom: 1px solid rgba(240, 240, 244, .9);
      opacity: 0;
      transform: translateY(8px);
      transition: opacity .4s ease, transform .5s ease;
    }

    #append-content .csys-reg-row:last-child {
      border-bottom: none;
    }

    #append-content .csys-reg-row.is-on {
      opacity: 1;
      transform: translateY(0);
    }

    #append-content .csys-reg-name {
      font-size: 9px;
      font-weight: 300;
      color: #1d1d1f;
      letter-spacing: -.01em;
    }

    #append-content .csys-reg-rev {
      font-family: var(--fb);
      font-size: 10px;
      font-weight: 300;
      color: #1d1d1f;
      letter-spacing: -.01em;
    }

    #append-content .csys-tag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 38px;
      padding: 3px 6px;
      border-radius: 999px;
      font-family: var(--mono);
      font-size: 7px;
      font-weight: 300;
      letter-spacing: .08em;
      color: #fff;
    }

    #append-content .csys-tag.good { background: #1ea85f; }
    #append-content .csys-tag.info { background: #246bb2; }
    #append-content .csys-tag.risk { background: #c74a41; }

    #append-content .csys-radar-card {
      padding-bottom: 10px;
    }

    #append-content .csys-radar-wrap {
      padding: 8px 10px 12px;
    }

    #append-content .csys-radar-ring {
      fill: none;
      stroke: #eceef2;
      stroke-width: 1;
    }

    #append-content .csys-ax-line {
      stroke: #d9dfe5;
      stroke-width: 1;
      stroke-dasharray: 200;
      stroke-dashoffset: 200;
      transition: stroke-dashoffset .75s ease-out;
    }

    #append-content .csys-radar-card.is-on .csys-ax-line.is-on {
      stroke-dashoffset: 0;
    }

    #append-content .csys-radar-ghost {
      fill: rgba(110, 110, 115, .08);
      stroke: #a9b0b8;
      stroke-width: 1;
      stroke-dasharray: 4 4;
      opacity: 0;
      transition: opacity .6s ease;
    }

    #append-content .csys-radar-card.is-on .csys-radar-ghost.is-on {
      opacity: 1;
    }

    #append-content .csys-radar-poly {
      fill: rgba(13, 144, 58, .16);
      stroke: #0d903a;
      stroke-width: 2;
      stroke-linejoin: round;
      opacity: 0;
      transition: opacity .45s ease;
    }

    #append-content .csys-radar-card.is-on .csys-radar-poly.is-on {
      opacity: 1;
    }

    #append-content .csys-radar-vx {
      fill: #fff;
      stroke: #0d903a;
      stroke-width: 2;
      opacity: 0;
      transition: opacity .38s ease;
    }

    #append-content .csys-radar-vx.is-on {
      opacity: 1;
    }

    #append-content .csys-radar-lbl {
      font-family: var(--mono);
      font-size: 6.5px;
      font-weight: 300;
      letter-spacing: .08em;
      text-transform: uppercase;
      fill: #6e6e73;
      opacity: 0;
      transition: opacity .45s ease;
    }

    #append-content .csys-radar-lbl.is-on {
      opacity: 1;
    }

    #append-content .csys-radar-legend {
      display: flex;
      gap: 12px;
      justify-content: center;
      font-size: 8px;
      color: #6e6e73;
      padding: 2px 0 0;
      opacity: 0;
      transition: opacity .45s ease;
    }

    #append-content .csys-radar-card.is-on .csys-radar-legend.is-on {
      opacity: 1;
    }

    @media (max-width: 1440px) {
      #append-content .ds-systems-summary {
        width: min(38vw, 500px);
      }

      #append-content .ds-systems-grid {
        width: min(28vw, 360px);
      }
    }

    @media (max-width: 1180px) {
      #append-content .ds-systems-summary {
        max-width: calc(100vw - 820px);
      }

      #append-content .ds-systems-grid {
        max-width: calc(100vw - 820px);
        grid-template-columns: 1fr;
      }

      #append-content .csys-summary-metrics {
        gap: 18px;
      }
    }

    #append-content .ds-artifact-product {
      margin-top: 40px;
      margin-bottom: 32px;
      padding: 48px 32px 32px; /* More top padding for axis label */
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 28px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: fit-content;
      box-shadow: 
        0 20px 40px -10px rgba(0, 0, 0, 0.08),
        inset 0 1px 3px rgba(0,0,0,0.02);
      overflow: visible;
      position: relative;
    }

    /* Ambient Background Mesh */
    #append-content .product-ambient-mesh {
      position: absolute;
      inset: -100px;
      background-image: 
        radial-gradient(circle at 2px 2px, rgba(255, 178, 36, 0.08) 1px, transparent 0);
      background-size: 32px 32px;
      opacity: 0;
      transform: scale(1.1) rotate(-5deg);
      transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
      pointer-events: none;
      z-index: -1;
    }

    #append-content .ds-panel[data-domain="product"].is-active .product-ambient-mesh {
      opacity: 1;
      transform: scale(1) rotate(0);
    }

    #append-content .mini-fit-gap {
      position: relative;
      width: 340px; /* Increased from 280px */
      padding: 12px;
    }

    /* Axis Labels */
    #append-content .mini-axis-label {
      position: absolute;
      font-family: var(--mono);
      font-size: 8px;
      letter-spacing: 0.15em;
      color: #94a3b8;
      opacity: 0;
      transition: all 0.32s ease;
      transition-delay: 0.12s;
    }

    #append-content .axis-x {
      top: -12px;
      left: 50%;
      transform: translateX(-50%) translateY(-10px);
    }

    #append-content .axis-y {
      left: -40px;
      top: 50%;
      transform: rotate(-90deg) translateX(50%) translateY(10px);
      transform-origin: center;
    }

    #append-content .ds-panel.is-active .mini-axis-label {
      opacity: 1;
    }

    #append-content .ds-panel.is-active .axis-x { transform: translateX(-50%) translateY(0); }
    #append-content .ds-panel.is-active .axis-y { transform: rotate(-90deg) translateX(50%) translateY(0); }

    /* Multi-Panel Discipline Dashboard Expanded */
    #append-content .discipline-dashboard {
      margin-top: 40px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      width: 400px; /* Enlarge to 400px */
      perspective: 1000px;
    }

    #append-content .discipline-bg-flow {
      position: absolute;
      inset: -150px;
      background-image: 
        linear-gradient(rgba(16, 185, 129, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 185, 129, 0.05) 1px, transparent 1px);
      background-size: 40px 40px;
      opacity: 0;
      transform: perspective(1000px) rotateX(60deg) translateY(0);
      transition: all 1.5s cubic-bezier(0.16, 1, 0.3, 1);
      z-index: -1;
      pointer-events: none;
    }

    #append-content .ds-panel[data-domain="discipline"].is-active .discipline-bg-flow {
      opacity: 1;
      animation: flowGrid 20s linear infinite;
    }

    @keyframes flowGrid {
      from { background-position: 0 0; }
      to { background-position: 0 400px; }
    }

    #append-content .disc-card {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(8px);
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      padding: 24px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.03);
      opacity: 0;
      transform: translateY(20px) rotateX(5deg);
      transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      cursor: pointer;
    }

    #append-content .ds-panel.is-active .disc-card {
      opacity: 1;
      transform: translateY(0);
    }

    #append-content .ds-panel.is-active .disc-card:nth-child(1) { transition-delay: 0s; }
    #append-content .ds-panel.is-active .disc-card:nth-child(2) { transition-delay: 0.08s; }
    #append-content .ds-panel.is-active .disc-card:nth-child(3) { transition-delay: 0.16s; }

    #append-content .disc-card:hover {
      transform: translateY(-4px) scale(1.02);
      box-shadow: 0 20px 40px rgba(0,0,0,0.08);
      border-color: rgba(16, 185, 129, 0.3);
    }

    #append-content .disc-tag {
      font-family: var(--mono);
      font-size: 7px;
      letter-spacing: 0.1em;
      color: #94a3b8;
      margin-bottom: 12px;
    }

    #append-content .mini-svg {
      width: 100px; /* Enlarge */
      height: 100px;
      filter: drop-shadow(0 0 10px rgba(0,0,0,0.05));
    }

    #append-content .disc-rhythm-meta {
      font-size: 15px; /* Enlarge */
    }

    #append-content .streak-count {
      font-size: 32px; /* Enlarge */
    }

    #append-content .m-day {
      width: 32px; /* Enlarge */
      height: 32px;
      border-radius: 8px;
      font-size: 11px;
    }

    #append-content .s-today {
      animation: pulseToday 2s ease-in-out infinite;
    }

    @keyframes pulseToday {
      0%, 100% { box-shadow: 0 0 0 0 rgba(255, 178, 36, 0.4); }
      50% { box-shadow: 0 0 0 12px rgba(255, 178, 36, 0); }
    }

    #append-content .momentum-btn-wrap {
      position: relative;
      overflow: hidden;
      border-radius: 14px;
      margin-top: 8px;
    }

    #append-content .momentum-btn {
      background: #ffb224;
      color: #fff;
      font-family: var(--fb);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-align: center;
      padding: 10px 14px;
      position: relative;
      z-index: 2;
    }

    #append-content .momentum-btn::after {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 50%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
      animation: lightSweep 3s infinite;
    }

    @keyframes lightSweep {
      0% { left: -100%; }
      30% { left: 150%; }
      100% { left: 150%; }
    }
    #append-content .ds-artifact-discipline {
      margin-top: 32px;
      padding: 24px;
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 24px;
      width: 280px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.04);
      position: relative;
    }

    #append-content .mini-rhythm {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }

    #append-content .rhythm-visual {
      position: relative;
      width: 140px;
      height: 140px;
    }

    #append-content .rhythm-visual svg {
      transform: rotate(-90deg);
      width: 100%;
      height: 100%;
    }

    #append-content .ring-bg {
      fill: none;
      stroke: #f1f5f9;
      stroke-width: 8;
    }

    #append-content .ring-active {
      fill: none;
      stroke-width: 8;
      stroke-linecap: round;
      stroke-dasharray: 314.159; /* 2 * PI * r */
      stroke-dashoffset: 314.159;
      transition: stroke-dashoffset 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    #append-content .ring-active.r-red { stroke: #ef4444; stroke-dasharray: 314.159; --r: 50; }
    #append-content .ring-active.r-green { stroke: #10b981; stroke-dasharray: 238.761; --r: 38; }
    #append-content .ring-active.r-blue { stroke: #3b82f6; stroke-dasharray: 163.362; --r: 26; }

    /* Discipline Active States */
    #append-content .ds-panel.is-active .r-red,
    #append-content .ds-step-discipline.is-active .r-red { stroke-dashoffset: calc(314.159 * (1 - 72/100)); }
    #append-content .ds-panel.is-active .r-green,
    #append-content .ds-step-discipline.is-active .r-green { stroke-dashoffset: calc(238.761 * (1 - 88/100)); }
    #append-content .ds-panel.is-active .r-blue,
    #append-content .ds-step-discipline.is-active .r-blue { stroke-dashoffset: calc(163.362 * (1 - 50/100)); }

    #append-content .ds-panel.is-active .streak-day,
    #append-content .ds-step-discipline.is-active .streak-day {
      opacity: 1;
      transform: scale(1);
    }
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }

    #append-content .rhythm-stat {
      font-family: var(--fb);
      font-size: 20px;
      font-weight: 400;
      color: #0f172a;
    }

    #append-content .rhythm-label {
      font-family: var(--mono);
      font-size: 7px;
      letter-spacing: 0.1em;
      color: #94a3b8;
      margin-top: 2px;
    }

    #append-content .streak-grid {
      display: flex;
      gap: 6px;
    }

    #append-content .streak-day {
      width: 24px;
      height: 24px;
      border-radius: 6px;
      background: #f8fafc;
      border: 1px solid #f1f5f9;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--mono);
      font-size: 8px;
      color: #94a3b8;
      transition: all 0.4s ease;
      opacity: 0;
      transform: scale(0.8);
    }

    #append-content .ds-panel.is-active .streak-day {
      opacity: 1;
      transform: scale(1);
    }

    #append-content .streak-day.is-on {
      background: #1e293b;
      border-color: #1e293b;
      color: #fff;
    }

    #append-content .streak-day.is-today {
      background: #ffb224;
      border-color: #ffb224;
      color: #fff;
      box-shadow: 0 4px 12px rgba(255, 178, 36, 0.3);
    }

    /* Staggered streak reveal */
    #append-content .ds-panel.is-active .streak-day:nth-child(1) { transition-delay: 0.12s; }
    #append-content .ds-panel.is-active .streak-day:nth-child(2) { transition-delay: 0.16s; }
    #append-content .ds-panel.is-active .streak-day:nth-child(3) { transition-delay: 0.2s; }
    #append-content .ds-panel.is-active .streak-day:nth-child(4) { transition-delay: 0.24s; }
    #append-content .ds-panel.is-active .streak-day:nth-child(5) { transition-delay: 0.28s; }
    #append-content .ds-panel.is-active .streak-day:nth-child(6) { transition-delay: 0.32s; }
    #append-content .ds-panel.is-active .streak-day:nth-child(7) { transition-delay: 0.36s; }

    #append-content .rhythm-meta {
      width: 100%;
      display: flex;
      justify-content: center;
      gap: 16px;
      font-family: var(--mono);
      font-size: 8px;
      color: #64748b;
    }

    #append-content .r-row {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    #append-content .r-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
    }

    #append-content .r-dot.r-red { background: #ef4444; }
    #append-content .r-dot.r-green { background: #10b981; }

    #append-content .mini-impact-badge {
      position: absolute;
      top: -20px;
      right: -35px;
      background: #10b981;
      color: #fff;
      padding: 10px 16px;
      border-radius: 16px;
      box-shadow: 0 12px 30px rgba(16, 185, 129, 0.35);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      line-height: 1;
      opacity: 0;
      transform: scale(0.5) rotate(15deg);
      transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
      transition-delay: 0.8s;
      z-index: 10;
    }

    #append-content .ds-panel.is-active .mini-impact-badge {
      opacity: 1;
      transform: scale(1) rotate(0);
      animation: floatBadge 4s ease-in-out infinite;
    }

    @keyframes floatBadge {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-6px); }
    }

    /* Large Background Orbital Ring */
    #append-content .product-bg-orbital {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 600px;
      height: 600px;
      border: 1px solid rgba(255, 178, 36, 0.05);
      border-radius: 50%;
      transform: translate(-50%, -50%) scale(0.8);
      opacity: 0;
      transition: all 1.5s cubic-bezier(0.16, 1, 0.3, 1);
      pointer-events: none;
      z-index: -2;
    }

    #append-content .product-bg-orbital::before {
      content: "";
      position: absolute;
      inset: 40px;
      border: 1px dashed rgba(255, 178, 36, 0.03);
      border-radius: 50%;
      animation: rotateOrbital 60s linear infinite;
    }

    @keyframes rotateOrbital {
      from { transform: rotate(0); }
      to { transform: rotate(360deg); }
    }

    #append-content .ds-panel[data-domain="product"].is-active .product-bg-orbital {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }

    /* Scanning Legend Below Grid */
    #append-content .mini-legend-wrap {
      margin-top: 16px;
      width: 100%;
      position: relative;
      padding-top: 4px;
      opacity: 0;
      transform: translateY(10px);
      transition: all 0.6s ease;
      transition-delay: 0.2s;
    }

    #append-content .ds-panel.is-active .mini-legend-wrap {
      opacity: 1;
      transform: translateY(0);
    }

    #append-content .mini-legend-bar {
      height: 4px;
      border-radius: 2px;
      background: linear-gradient(to right, #fee2e2, #fef3c7, #d1fae5);
      width: 100%;
    }

    #append-content .mini-legend-pointer {
      position: absolute;
      top: 2px;
      left: 0;
      width: 2px;
      height: 8px;
      background: var(--accent);
      box-shadow: 0 0 8px var(--accent);
      animation: legendScan 4s ease-in-out infinite;
    }

    @keyframes legendScan {
      0%, 100% { left: 0%; }
      50% { left: 100%; }
    }

    #append-content .mini-legend-text {
      font-family: var(--mono);
      font-size: 7px;
      letter-spacing: 0.1em;
      color: #94a3b8;
      margin-top: 6px;
      text-align: center;
    }

    /* Technical Data Chips */
    #append-content .product-data-chips {
      margin-top: 40px;
      display: flex;
      gap: 12px;
      opacity: 0;
      transform: translateY(20px);
      transition: all 0.8s ease;
      transition-delay: 0.28s;
    }

    #append-content .ds-panel.is-active .product-data-chips {
      opacity: 1;
      transform: translateY(0);
    }

    #append-content .data-chip {
      padding: 6px 12px;
      border-radius: 8px;
      background: rgba(15, 23, 42, 0.03);
      border: 1px solid rgba(15, 23, 42, 0.04);
      font-family: var(--fb);
      font-size: 9px;
      color: #64748b;
      letter-spacing: -0.01em;
    }

    #append-content .data-chip span {
      font-family: var(--mono);
      font-size: 7px;
      color: #94a3b8;
      margin-right: 4px;
      letter-spacing: 0.05em;
    }
      opacity: 1;
      transform: scale(1) rotate(0);
      animation: floatBadge 4s ease-in-out infinite;
    }

    @keyframes floatBadge {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-6px); }
    }

    #append-content .impact-val {
      font-family: var(--fb);
      font-size: 14px;
      font-weight: 400;
    }

    #append-content .impact-label {
      font-family: var(--mono);
      font-size: 7px;
      letter-spacing: 0.05em;
      margin-top: 2px;
      opacity: 0.8;
    }

    #append-content .mini-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 6px; /* Slightly larger gap */
      position: relative;
      z-index: 2;
    }

    #append-content .mini-cell {
      height: 42px; /* Increased from 32px */
      border-radius: 8px;
      background: #f1f5f9;
      border: 1px solid rgba(0,0,0,0.03);
      opacity: 0;
      transform: scale(0.8) translateY(4px);
      transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #append-content .mini-cell span {
      font-family: var(--fb);
      font-size: 13px; /* Increased from 11px */
      font-weight: 400;
      letter-spacing: -0.01em;
      color: rgba(15, 23, 42, 0.8);
      opacity: 0;
      transition: opacity 0.4s ease;
      transition-delay: inherit;
    }

    /* Trigger animations when parent panel is active */
    #append-content .ds-panel.is-active .mini-cell,
    #append-content .ds-panel.is-active .mini-cell span {
      opacity: 1;
      transform: scale(1) translateY(0);
    }

    /* Staggered Delay for 20 cells */
    #append-content .ds-panel.is-active .mini-cell:nth-child(1) { transition-delay: 0.02s; }
    #append-content .ds-panel.is-active .mini-cell:nth-child(2) { transition-delay: 0.05s; }
    #append-content .ds-panel.is-active .mini-cell:nth-child(3) { transition-delay: 0.08s; }
    #append-content .ds-panel.is-active .mini-cell:nth-child(4) { transition-delay: 0.11s; }
    #append-content .ds-panel.is-active .mini-cell:nth-child(5) { transition-delay: 0.14s; }
    #append-content .ds-panel.is-active .mini-cell:nth-child(6) { transition-delay: 0.05s; }
    #append-content .ds-panel.is-active .mini-cell:nth-child(7) { transition-delay: 0.08s; }
    #append-content .ds-panel.is-active .mini-cell:nth-child(8) { transition-delay: 0.11s; }
    #append-content .ds-panel.is-active .mini-cell:nth-child(9) { transition-delay: 0.14s; }
    #append-content .ds-panel.is-active .mini-cell:nth-child(10) { transition-delay: 0.17s; }
    #append-content .ds-panel.is-active .mini-cell:nth-child(11) { transition-delay: 0.08s; }
    #append-content .ds-panel.is-active .mini-cell:nth-child(12) { transition-delay: 0.11s; }
    #append-content .ds-panel.is-active .mini-cell:nth-child(13) { transition-delay: 0.14s; }
    #append-content .ds-panel.is-active .mini-cell:nth-child(14) { transition-delay: 0.17s; }
    #append-content .ds-panel.is-active .mini-cell:nth-child(15) { transition-delay: 0.2s; }
    #append-content .ds-panel.is-active .mini-cell:nth-child(16) { transition-delay: 0.11s; }
    #append-content .ds-panel.is-active .mini-cell:nth-child(17) { transition-delay: 0.14s; }
    #append-content .ds-panel.is-active .mini-cell:nth-child(18) { transition-delay: 0.17s; }
    #append-content .ds-panel.is-active .mini-cell:nth-child(19) { transition-delay: 0.2s; }
    #append-content .ds-panel.is-active .mini-cell:nth-child(20) { transition-delay: 0.23s; }

    #append-content .mini-cell.m-red { background: #fee2e2; border-color: #fecaca; }
    #append-content .mini-cell.m-amber { background: #fef3c7; border-color: #fde68a; }
    #append-content .mini-cell.m-green { 
      background: #d1fae5; border-color: #a7f3d0;
      animation: miniPulse 4s ease-in-out infinite;
    }

    @keyframes miniPulse {
      0%, 100% { box-shadow: 0 0 0 rgba(16, 185, 129, 0); }
      50% { box-shadow: 0 0 12px rgba(16, 185, 129, 0.2); }
    }

    /* Scanning Light Sweep */
    #append-content .mini-fit-gap::after {
      content: "";
      position: absolute;
      top: 0; left: -100%;
      width: 50%; height: 100%;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
      );
      transform: skewX(-20deg);
      pointer-events: none;
      z-index: 3;
    }

    #append-content .ds-panel.is-active .mini-fit-gap::after {
      animation: miniScan 3s ease-in-out infinite;
      animation-delay: 1s;
    }

    @keyframes miniScan {
      0% { left: -100%; }
      100% { left: 200%; }
    }

    #append-content .mini-labels {
      position: absolute;
      inset: -2px;
      border-left: 1.5px solid #cbd5e1;
      border-bottom: 1.5px solid #cbd5e1;
      pointer-events: none;
      opacity: 0.6;
    }

    #append-content .ds-network-stage {
      position: fixed;
      inset: 0;
      width: 100%;
      height: var(--viewport-h);
      max-width: none;
      border-radius: 0;
      overflow: hidden;
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      z-index: 0;
      transform: translateY(28px) scale(1.02);
      transition:
        opacity .48s ease,
        transform .62s cubic-bezier(.2, .7, .2, 1),
        filter .48s ease,
        visibility 0s linear .48s;
      filter: saturate(.96);
      margin-left: 0;
      margin-right: 0;
      background:
        radial-gradient(900px 400px at 10% -10%, color-mix(in oklab, var(--coral-l) 16%, transparent) 0%, transparent 55%),
        radial-gradient(800px 420px at 110% 20%, color-mix(in oklab, #7ab6ff 10%, transparent) 0%, transparent 60%),
        radial-gradient(800px 500px at 50% 120%, color-mix(in oklab, #5bd8a6 8%, transparent) 0%, transparent 60%),
        linear-gradient(180deg, #09111c 0%, #07101a 100%);
      border-top: 1px solid rgba(29, 34, 48, .62);
      border-bottom: 1px solid rgba(29, 34, 48, .62);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
    }

    #append-content .ds-sequence.is-domains-visible[data-active-domain="network"] .ds-step[data-domain="network"] .ds-network-stage {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) scale(1);
      filter: saturate(1);
      transition-delay: 0s, 0s, 0s, 0s;
    }

    #append-content .ds-step-people:not(.is-live) .persona-artifact,
    #append-content .ds-step-people:not(.is-live) .persona-artifact::before,
    #append-content .ds-step-people:not(.is-live) .persona-artifact::after,
    #append-content .ds-step-people:not(.is-live) .persona-artifact *,
    #append-content .ds-step-people:not(.is-live) .persona-artifact *::before,
    #append-content .ds-step-people:not(.is-live) .persona-artifact *::after {
      animation-play-state: paused !important;
    }

    #append-content .ds-sequence.is-domains-visible:not([data-active-domain="network"]) .ds-step[data-domain="network"] .ds-network-stage {
      opacity: 0;
      visibility: hidden;
      transform: translateY(32px) scale(.985);
      filter: saturate(.88) blur(1.5px);
    }

    #append-content .ds-network-stage::before {
      content: "";
      position: absolute;
      inset: -18%;
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(38% 44% at 20% 30%, color-mix(in oklab, var(--coral-l) 34%, transparent), transparent 70%),
        radial-gradient(30% 40% at 80% 20%, color-mix(in oklab, #7ab6ff 24%, transparent), transparent 70%),
        radial-gradient(40% 50% at 60% 90%, color-mix(in oklab, #5bd8a6 22%, transparent), transparent 70%);
      filter: blur(28px) saturate(132%);
      opacity: .32;
      animation: dsNetworkAurora 22s ease-in-out infinite alternate;
    }

    #append-content .ds-network-stage::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background-image:
        linear-gradient(to right, rgba(255, 255, 255, .02) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .02) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: radial-gradient(80% 60% at 50% 50%, black, transparent 80%);
      opacity: .28;
    }

    @keyframes dsNetworkAurora {
      0% { transform: translate3d(-2%, -2%, 0) scale(1.02); }
      50% { transform: translate3d(3%, 1%, 0) scale(1.08); }
      100% { transform: translate3d(-1%, 3%, 0) scale(1.03); }
    }

    #append-content .ds-network-stage > * {
      position: relative;
      z-index: 1;
    }

    #append-content .ds-network-scene {
      position: absolute;
      left: clamp(-12px, -1vw, 12px);
      bottom: clamp(-4px, -.6vh, 8px);
      width: min(50vw, 740px, calc((100vh - 160px) * 560 / 520));
      aspect-ratio: 560 / 520;
      height: auto;
      perspective: 1400px;
    }

    #append-content .ds-network-scene .ca-svg {
      width: 100%;
      height: 100%;
      display: block;
      transform-origin: center;
      transform: none;
      animation: dsNetworkRotate 28s linear infinite;
    }

    @keyframes dsNetworkRotate {
      0% { transform: rotate(-1.2deg); }
      50% { transform: rotate(1.2deg); }
      100% { transform: rotate(-1.2deg); }
    }

    #append-content .ds-network-stage .ca-link {
      stroke: rgba(170, 179, 194, .35);
      fill: none;
      stroke-linecap: round;
      stroke-dasharray: var(--len, 300);
      stroke-dashoffset: 0;
      opacity: 1;
      transition: stroke-width .3s ease, stroke .3s ease;
    }

    #append-content .ds-network-stage .ca-link.s-high {
      stroke-width: 2.4;
      stroke: color-mix(in oklab, var(--coral-l) 60%, rgba(170, 179, 194, .7));
    }

    #append-content .ds-network-stage .ca-link.s-med { stroke-width: 1.6; }
    #append-content .ds-network-stage .ca-link.s-thin { stroke-width: 1; }
    #append-content .ds-network-stage .ca-link.s-hair {
      stroke-width: .7;
      stroke-dasharray: var(--len, 300);
    }

    #append-content .ds-network-stage .ca-link.is-drawn {
      opacity: 1;
      animation: dsNetworkDraw 1.1s cubic-bezier(.2, .7, .2, 1) forwards, dsNetworkPulseLine 3.6s ease-in-out 1.2s infinite;
      animation-delay: 0ms, 1200ms;
    }

    @keyframes dsNetworkDraw {
      0% { stroke-dashoffset: var(--len, 300); opacity: .4; }
      60% { opacity: 1; }
      100% { stroke-dashoffset: 0; opacity: 1; }
    }

    @keyframes dsNetworkPulseLine {
      0%, 100% { filter: none; }
      50% { filter: drop-shadow(0 0 8px color-mix(in oklab, var(--coral-l) 60%, transparent)); }
    }

    #append-content .ds-network-stage .ca-flow {
      fill: #fff;
      opacity: 0;
      filter: drop-shadow(0 0 6px var(--coral-l));
    }

    #append-content .ds-network-stage .ca-flow.is-drawn {
      opacity: 1;
      animation: dsNetworkFlow 2.8s linear infinite;
    }

    @keyframes dsNetworkFlow {
      0% { offset-distance: 0%; opacity: 0; }
      15% { opacity: 1; }
      85% { opacity: 1; }
      100% { offset-distance: 100%; opacity: 0; }
    }

    #append-content .ds-network-stage .ca-node {
      opacity: 1;
      transition: opacity .4s;
    }

    #append-content .ds-network-stage .ca-node .ca-node-inner {
      transform-box: fill-box;
      transform-origin: center;
      transform: scale(1);
      transition: transform .55s cubic-bezier(.34, 1.56, .64, 1);
    }

    #append-content .ds-network-stage .ca-node.is-drawn {
      opacity: 1;
    }

    #append-content .ds-network-stage .ca-node.is-drawn .ca-node-inner {
      transform: scale(1);
    }

    #append-content .ds-network-stage .ca-node .ca-dot {
      fill: #0c1019;
      stroke-width: 2.2;
      filter: drop-shadow(0 0 6px currentColor);
    }

    #append-content .ds-network-stage .ca-node[data-cat="Knowledge"] .ca-dot { stroke: #7ab6ff; color: #7ab6ff; }
    #append-content .ds-network-stage .ca-node[data-cat="Behavioral"] .ca-dot { stroke: #5bd8a6; color: #5bd8a6; }
    #append-content .ds-network-stage .ca-node[data-cat="Enabler"] .ca-dot { stroke: #b79bff; color: #b79bff; }
    #append-content .ds-network-stage .ca-node[data-status="weak"] .ca-dot { stroke-dasharray: 2.5 2.5; }

    #append-content .ds-network-stage .ca-node .ca-dot-inner {
      fill: currentColor;
      opacity: .25;
      transition: opacity .3s;
    }

    #append-content .ds-network-stage .ca-node.is-drawn .ca-dot-inner { opacity: .25; }

    #append-content .ds-network-stage .ca-label {
      font-family: var(--mono);
      font-size: 7px;
      font-weight: 300;
      letter-spacing: .1em;
      text-transform: uppercase;
      fill: #aab3c2;
      filter: url(#ca-text-bg);
      paint-order: stroke;
      stroke: rgba(7, 9, 15, .92);
      stroke-width: 3;
      stroke-linejoin: round;
      opacity: 1;
      transition: opacity .6s ease;
    }

    #append-content .ds-network-stage .ca-label.is-drawn {
      opacity: 1;
    }

    #append-content .ds-network-stage .ca-corr {
      font-family: var(--mono);
      font-size: 7.5px;
      fill: #aab3c2;
      filter: url(#ca-text-bg);
      paint-order: stroke;
      stroke: rgba(7, 9, 15, .95);
      stroke-width: 3;
      stroke-linejoin: round;
      opacity: 1;
      transform-box: fill-box;
      transform-origin: center;
      transform: scale(1);
      transition: opacity .35s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1);
    }

    #append-content .ds-network-stage .ca-corr.is-drawn {
      opacity: 1;
      transform: scale(1);
    }
    #append-content .ds-network-stage .ca-corr.is-drawn.is-top {
      fill: color-mix(in oklab, var(--coral-l) 85%, white 15%);
    }

    #append-content .ds-network-stage .ca-center {
      transform-origin: 280px 260px;
      transform-box: fill-box;
    }

    #append-content .ds-network-stage .ca-halo {
      fill: url(#ca-halo-grad-network);
      opacity: 0;
      transform-origin: center;
      transform-box: fill-box;
      transform: scale(.8);
      transition: opacity .9s ease-out, transform .9s cubic-bezier(.34, 1.56, .64, 1);
    }

    #append-content .ds-network-stage.is-revealed .ca-halo {
      opacity: .9;
      transform: scale(1);
      animation: dsNetworkHaloPulse 3.2s ease-in-out 1.1s infinite;
    }

    @keyframes dsNetworkHaloPulse {
      0%, 100% { opacity: .7; }
      50% { opacity: 1; }
    }

    #append-content .ds-network-stage .ca-ring {
      fill: none;
      stroke: color-mix(in oklab, var(--coral-l) 55%, transparent);
      stroke-width: 1;
      stroke-dasharray: 2 6;
      transform-origin: center;
      transform-box: fill-box;
      animation: dsNetworkRing 45s linear infinite;
    }

    #append-content .ds-network-stage .ca-ring-2 {
      stroke-dasharray: 8 10;
      opacity: .5;
      animation-direction: reverse;
      animation-duration: 60s;
    }

    @keyframes dsNetworkRing { to { transform: rotate(360deg); } }

    #append-content .ds-network-stage .ca-core {
      fill: #0c1019;
      stroke: var(--coral-l);
      stroke-width: 2.6;
      transform-origin: center;
      transform-box: fill-box;
      opacity: 0;
      transform: scale(.5);
      transition: opacity .7s ease-out, transform .9s cubic-bezier(.34, 1.56, .64, 1);
      filter: drop-shadow(0 0 22px color-mix(in oklab, var(--coral-l) 80%, transparent));
    }

    #append-content .ds-network-stage.is-revealed .ca-core {
      opacity: 1;
      transform: scale(1);
      animation: dsNetworkCorePulse 2.6s ease-in-out 1s infinite;
    }

    @keyframes dsNetworkCorePulse {
      0%, 100% { filter: drop-shadow(0 0 18px color-mix(in oklab, var(--coral-l) 65%, transparent)); }
      50% { filter: drop-shadow(0 0 32px color-mix(in oklab, var(--coral-l) 95%, transparent)); }
    }

    #append-content .ds-network-stage .ca-core-sub,
    #append-content .ds-network-stage .ca-core-title,
    #append-content .ds-network-stage .ca-core-c {
      text-anchor: middle;
      filter: url(#ca-text-bg);
      paint-order: stroke;
      stroke: rgba(7, 9, 15, .95);
      stroke-width: 3;
      stroke-linejoin: round;
      opacity: 0;
      transition: opacity .7s ease-out .4s;
    }

    #append-content .ds-network-stage.is-revealed .ca-core-sub,
    #append-content .ds-network-stage.is-revealed .ca-core-title,
    #append-content .ds-network-stage.is-revealed .ca-core-c { opacity: 1; }

    #append-content .ds-network-stage .ca-core-sub {
      font-family: var(--mono);
      font-size: 7.5px;
      font-weight: 300;
      letter-spacing: .12em;
      text-transform: uppercase;
      fill: color-mix(in oklab, var(--coral-l) 80%, white 20%);
    }

    #append-content .ds-network-stage .ca-core-title {
      font-family: var(--fb);
      font-size: 13px;
      font-weight: 300;
      fill: #fff;
      letter-spacing: -.01em;
    }

    #append-content .ds-network-stage .ca-core-c {
      font-family: var(--mono);
      font-size: 8px;
      font-weight: 300;
      fill: #eef2f8;
    }

    @media (max-width: 1440px) {
      #append-content .ds-network-stage {
        width: 100%;
        height: var(--viewport-h);
        margin-left: 0;
      }

      #append-content .ds-network-scene {
        left: clamp(-10px, -.9vw, 10px);
        bottom: clamp(-4px, -.5vh, 8px);
        width: min(48vw, 680px, calc((var(--viewport-h) - 180px) * 560 / 520));
      }
    }

    @media (max-width: 1180px) {
      #append-content .ds-network-stage {
        width: 100%;
        height: var(--viewport-h);
        margin-left: 0;
      }

      #append-content .ds-step[data-domain="network"] .ds-step-card {
        right: var(--ds-card-right);
        width: min(100%, 520px);
      }

      #append-content .ds-network-scene {
        left: clamp(-8px, -.8vw, 8px);
        bottom: clamp(-2px, -.4vh, 6px);
        width: min(44vw, 560px, calc((var(--viewport-h) - 220px) * 560 / 520));
      }
    }

    @media (max-width: 1560px) and (min-width: 901px) and (max-height: 920px),
    (max-width: 1440px) and (min-width: 901px) {
      #append-content .ds-step[data-domain="systems"] .ds-step-card {
        right: clamp(24px, 2.2vw, 40px);
        width: min(100%, 50vw);
        max-width: 760px;
        min-height: 0;
        padding: clamp(28px, 2.2vw, 38px);
      }

      #append-content .ds-step[data-domain="systems"] .ds-step-question {
        font-size: clamp(.98rem, 1.62vw, 1.42rem);
        line-height: 1.06;
        max-width: 27ch;
      }

      #append-content .ds-step[data-domain="systems"] .ds-step-interpretation {
        font-size: clamp(15px, 1vw, 18px);
        line-height: 1.45;
        max-width: 34ch;
      }

      #append-content .ds-step[data-domain="systems"] .ds-engage-line,
      #append-content .ds-step[data-domain="systems"] .ds-detail-summary p {
        font-size: clamp(14px, 0.96vw, 16px);
        line-height: 1.55;
      }

      #append-content .ds-step[data-domain="systems"] .ds-systems-stage {
        transform: translateY(18px) scale(1.01);
      }

      #append-content .ds-sequence.is-domains-visible[data-active-domain="systems"] .ds-step[data-domain="systems"] .ds-systems-stage {
        transform: translateY(0) scale(1);
      }

      #append-content .ds-step[data-domain="systems"] .ds-tablet-mini {
        width: min(42vw, 760px, calc((var(--viewport-h) - 190px) * 1.18));
      }
    }


    #append-content .ds-step-people .ds-step-card {
      position: absolute;
      left: auto;
      right: var(--ds-card-right);
      top: 50%;
      bottom: auto;
      width: var(--ds-card-width);
      max-width: var(--ds-card-max-width);
      margin: 0;
      z-index: 3;
      transform: translateY(-50%);
      background:
        linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .74)),
        rgba(255, 255, 255, .78);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-color: rgba(122, 182, 255, .18);
      box-shadow:
        0 26px 64px rgba(15, 23, 42, .1),
        0 0 0 1px rgba(255, 255, 255, .38) inset;
      min-height: var(--ds-card-min-height);
    }


    #append-content .ds-step-people .ds-step-card::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        linear-gradient(90deg, rgba(255, 255, 255, .3), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 36%);
      pointer-events: none;
      z-index: -1;
    }

    #append-content .ds-step-people.is-active .ds-step-card {
      transform: translateY(calc(-50% - 3px));
    }

    #append-content .ds-sequence.is-people-active .ds-step-people .ds-step-card {
      box-shadow:
        0 30px 72px rgba(15, 23, 42, .14),
        0 0 0 1px rgba(255, 255, 255, .42) inset;
    }

    #append-content .ds-sequence.is-people-leaving .ds-step-people .ds-step-card {
      opacity: .92;
    }

    #append-content .ds-people-artifact-shell {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      border-radius: 0;
      opacity: 0;
      visibility: hidden;
      transform: scale(1.015);
      filter: saturate(.92);
      transition: opacity .85s ease, filter .85s ease, transform .95s cubic-bezier(.2, .7, .2, 1);
      will-change: opacity, filter, transform;
      width: 100%;
      height: var(--viewport-h);
    }

    #append-content .ds-people-artifact-shell,
    #append-content .ds-people-artifact {
      border-radius: 0;
    }

    #append-content .ds-sequence.is-domains-visible .ds-people-artifact-shell {
      opacity: 1;
      visibility: visible;
      transform: scale(1);
      filter: saturate(1);
    }

    #append-content .ds-sequence.is-people-leaving .ds-people-artifact-shell {
      opacity: 1;
      transform: scale(1);
      filter: saturate(1);
    }

    #append-content .ds-domain-artifact-scenes {
      position: absolute;
      inset: 0;
      overflow: hidden;
    }

    #append-content .ds-domain-artifact-scene {
      position: absolute;
      inset: 0;
      opacity: 0;
      transform: translateY(14px) scale(1.015);
      transition: opacity .24s ease, transform .34s cubic-bezier(.2, .7, .2, 1), filter .24s ease;
      filter: saturate(1.02);
      pointer-events: none;
      display: grid;
      place-items: center;
      background: radial-gradient(circle at 50% 38%, color-mix(in oklab, var(--domain-color) 12%, transparent), transparent 56%);
    }

    #append-content .ds-domain-artifact-scene.is-active {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: none; /* Let events pass through the scene */
    }

    /* Domain visuals are decorative; keep interactions on the content card only. */
    #append-content .ds-domain-artifact-card {
      pointer-events: none;
    }

    #append-content .ds-domain-artifact-scene[data-domain="people"] {
      background: transparent;
    }

    #append-content .ds-domain-artifact-scene[data-domain="people"] .ds-domain-artifact-card {
      width: 100%;
      height: 100%;
    }



    #append-content .ds-domain-artifact-scene:not([data-domain="people"]) .ds-domain-artifact-card {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      max-height: none;
      padding: 0;
      display: block;
      border-radius: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }

    #append-content .ds-domain-artifact-scene:not([data-domain="people"]) .ds-domain-artifact-visual,
    #append-content .ds-domain-artifact-scene:not([data-domain="people"]) .ds-domain-artifact-visual * {
      pointer-events: none !important;
    }

    #append-content .ds-domain-artifact-scene:not([data-domain="people"]) .ds-domain-artifact-label {
      display: none;
    }

    #append-content .ds-domain-artifact-scene:not([data-domain="people"]) .ds-domain-artifact-visual {
      position: absolute;
      left: clamp(-300px, -16vw, -92px);
      bottom: clamp(-120px, -12vh, -40px);
      width: min(58vw, 920px, calc((var(--viewport-h) - 120px) * 900 / 640));
      height: auto;
      display: block;
      filter: drop-shadow(0 0 32px color-mix(in oklab, var(--domain-color) 18%, transparent));
    }

    #append-content .ds-domain-artifact-scene:not([data-domain="people"]) svg {
      width: 100%;
      height: auto;
      display: block;
      color: color-mix(in oklab, var(--domain-color) 82%, #0f172a 18%);
    }

    #append-content .ds-people-artifact-shell::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      background:
        radial-gradient(circle at 22% 26%, rgba(84, 132, 255, .08), transparent 20%),
        radial-gradient(circle at 78% 22%, rgba(52, 217, 196, .08), transparent 18%),
        linear-gradient(180deg, rgba(255, 255, 255, .55), transparent 16%, transparent 82%, rgba(15, 23, 42, .04));
    }

    #append-content .ds-people-artifact {
      --pap-text: #111827;
      --pap-mid: #4b5563;
      --pap-dim: #6b7280;
      --pap-border: #dbe3ef;
      --pap-accent: #34d9c4;
      --pap-accent-2: #16b89f;
      --pap-accent-3: #7ab6ff;
      position: absolute;
      inset: 0;
      margin: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 0;
      border-top: 1px solid rgba(148, 163, 184, .22);
      border-bottom: 1px solid rgba(148, 163, 184, .22);
      border-left: 0;
      border-right: 0;
      pointer-events: auto;
      background:
        radial-gradient(1100px 480px at 10% -10%, color-mix(in oklab, var(--pap-accent-3) 14%, transparent) 0%, transparent 55%),
        radial-gradient(900px 420px at 110% 10%, color-mix(in oklab, var(--pap-accent-2) 10%, transparent) 0%, transparent 60%),
        radial-gradient(900px 500px at 50% 120%, color-mix(in oklab, var(--pap-accent) 8%, transparent) 0%, transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #f6f8fc 100%);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .65),
        0 24px 52px rgba(15, 23, 42, .08);
      transition: opacity .75s ease, transform .95s cubic-bezier(.2, .7, .2, 1), filter .75s ease;
      will-change: opacity, transform, filter;
    }

    #append-content .ds-sequence.is-people-leaving .ds-people-artifact {
      opacity: .88;
      transform: translateX(-0.35%) scale(1.004);
      filter: saturate(.98) brightness(1);
    }

    #append-content .ds-people-artifact::before {
      content: "";
      position: absolute;
      inset: -20%;
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(38% 44% at 20% 30%, color-mix(in oklab, var(--pap-accent-3) 30%, transparent), transparent 70%),
        radial-gradient(30% 40% at 80% 20%, color-mix(in oklab, var(--pap-accent-2) 24%, transparent), transparent 70%),
        radial-gradient(40% 50% at 60% 90%, color-mix(in oklab, var(--pap-accent) 20%, transparent), transparent 70%);
      filter: blur(58px) saturate(120%);
      opacity: .38;
      animation: papAurora 22s ease-in-out infinite alternate;
    }

    #append-content .ds-people-artifact::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background-image:
        linear-gradient(to right, rgba(15, 23, 42, .035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15, 23, 42, .035) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: radial-gradient(80% 60% at 50% 45%, black, transparent 80%);
      opacity: .22;
    }

    #append-content .ds-people-artifact>* {
      position: relative;
      z-index: 1;
    }


    #append-content .pap-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 20px;
      padding: 32px 44px 0 clamp(120px, 10vw, 220px);
      margin-bottom: 10px;
    }

    #append-content .pap-header-left {
      max-width: 720px;
    }

    #append-content .pap-kicker {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: color-mix(in oklab, var(--pap-accent-3) 80%, #0f172a 20%);
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 6px 12px;
      border-radius: 999px;
      background: color-mix(in oklab, var(--pap-accent-3) 10%, white 90%);
      border: 1px solid color-mix(in oklab, var(--pap-accent-3) 22%, transparent);
      backdrop-filter: blur(6px);
    }

    #append-content .pap-kicker::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--pap-accent-3);
      box-shadow: 0 0 14px var(--pap-accent-3);
      animation: papPulse 2.4s ease-in-out infinite;
    }

    #append-content .pap-title {
      font-family: var(--fb);
      font-weight: 700;
      font-size: clamp(24px, 2.55vw, 34px);
      line-height: 1.08;
      letter-spacing: -.03em;
      margin: 14px 0 8px;
      color: var(--pap-text);
      text-wrap: balance;
      background: linear-gradient(180deg, #111827 0%, color-mix(in oklab, var(--pap-accent-3) 62%, #111827) 110%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    #append-content .pap-sub {
      color: var(--pap-mid);
      font-size: 14.5px;
      line-height: 1.55;
      max-width: 620px;
      margin: 0;
    }

    #append-content .pap-progress {
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: flex-end;
      min-width: 220px;
    }

    #append-content .pap-progress-label {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--pap-dim);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    #append-content .pap-progress-label em {
      font-style: normal;
      color: color-mix(in oklab, var(--pap-accent-3) 78%, white 22%);
    }

    #append-content .pap-progress-bars {
      display: grid;
      grid-template-columns: repeat(4, 40px);
      gap: 6px;
    }

    #append-content .pap-progress-bars span {
      height: 3px;
      border-radius: 3px;
      background: rgba(148, 163, 184, .16);
      position: relative;
      overflow: hidden;
    }

    #append-content .pap-progress-bars span::before {
      content: "";
      position: absolute;
      inset: 0;
      transform: scaleX(0);
      transform-origin: left;
      background: linear-gradient(90deg, var(--pap-accent-3), color-mix(in oklab, var(--pap-accent-3) 60%, white));
      box-shadow: 0 0 10px color-mix(in oklab, var(--pap-accent-3) 60%, transparent);
    }

    #append-content .pap-progress-bars span[data-state="done"]::before {
      transform: scaleX(1);
      opacity: .35;
    }

    #append-content .pap-progress-bars span[data-state="run"]::before {
      transform: scaleX(var(--t, 0));
    }

    #append-content .pap-stage {
      position: relative;
      margin-top: 18px;
      height: min(740px, 78vh);
    }

    #append-content .pap-stage-bg {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(55% 55% at 50% 52%, color-mix(in oklab, var(--pap-accent-3) 14%, transparent), transparent 72%);
      filter: blur(8px);
    }

    #append-content .pap-watermark {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--fb);
      font-weight: 700;
      letter-spacing: -.04em;
      font-size: clamp(96px, 14vw, 220px);
      line-height: .9;
      text-align: center;
      color: transparent;
      -webkit-text-stroke: 1px color-mix(in oklab, var(--pap-accent-3) 26%, transparent);
      opacity: .38;
      pointer-events: none;
      user-select: none;
      white-space: nowrap;
    }

    #append-content .pap-watermark span {
      display: block;
      transition: transform .9s cubic-bezier(.2, .7, .2, 1), opacity .6s;
    }

    #append-content .pap-watermark[data-leaving="true"] span {
      transform: translateY(-8px) scale(.97);
      opacity: 0;
    }

    #append-content svg.pap-radar {
      position: absolute;
      inset: 0;
      width: 118%;
      left: -10%;
      height: 100%;
      display: block;
      transform-style: preserve-3d;
      transform: rotateX(18deg) rotateZ(-2deg);
      animation: papTilt 16s ease-in-out infinite alternate;
    }

    #append-content .pap-radar .ring {
      fill: none;
      stroke: rgba(148, 163, 184, .18);
      stroke-width: 1;
      stroke-dasharray: 3 5;
    }

    #append-content .pap-radar .axis {
      stroke: rgba(71, 85, 105, .2);
      stroke-width: 1;
    }

    #append-content .pap-radar .axis-scan {
      stroke: var(--pap-accent-3);
      stroke-width: 1.2;
      opacity: 0;
    }

    #append-content .pap-radar .axis-scan.run {
      animation: papScan 1.1s ease-out;
    }

    #append-content .pap-radar .axis-label {
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: .18em;
      text-transform: uppercase;
      fill: var(--pap-mid);
    }

    #append-content .pap-radar .axis-label.top {
      font-weight: 600;
      fill: color-mix(in oklab, var(--pap-accent-3) 80%, white 20%);
    }

    #append-content .pap-radar .scale-label {
      font-family: var(--mono);
      font-size: 9px;
      fill: var(--pap-dim);
    }

    #append-content .pap-radar .shape {
      fill: url(#pap-grad);
      stroke: var(--pap-accent-3);
      stroke-width: 1.8;
      stroke-linejoin: round;
      filter: drop-shadow(0 0 24px color-mix(in oklab, var(--pap-accent-3) 70%, transparent));
    }

    #append-content .pap-radar .shape-ghost {
      fill: none;
      stroke: color-mix(in oklab, var(--pap-accent-3) 22%, transparent);
      stroke-width: 1;
      stroke-dasharray: 2 4;
      opacity: .42;
    }

    #append-content .pap-radar .icon-ring {
      fill: rgba(255, 255, 255, .96);
      stroke: color-mix(in oklab, var(--pap-accent-3) 34%, #dbe3ef);
      stroke-width: 1.2;
      transition: stroke .8s, fill .6s, r .6s cubic-bezier(.2, .7, .2, 1);
      cursor: pointer;
    }

    #append-content .pap-radar .icon-ring.top {
      stroke: var(--pap-accent-3);
      fill: color-mix(in oklab, var(--pap-accent-3) 16%, white);
      animation: papIconPulse 2.2s ease-in-out infinite;
    }

    #append-content .pap-radar .glyph {
      stroke: color-mix(in oklab, var(--pap-mid) 86%, #ffffff 14%);
      stroke-width: 1.6;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke .6s;
      pointer-events: none;
    }

    #append-content .pap-radar .glyph.top {
      stroke: color-mix(in oklab, var(--pap-accent-3) 80%, white 20%);
    }

    #append-content .pap-radar .vertex {
      fill: #fff;
      stroke: var(--pap-accent-3);
      stroke-width: 2;
      filter: drop-shadow(0 0 10px color-mix(in oklab, var(--pap-accent-3) 85%, transparent));
    }

    #append-content .pap-radar .halo {
      transform-origin: var(--pap-hc, 50%) var(--pap-hy, 50%);
      animation: papSpin 40s linear infinite;
    }

    #append-content .pap-radar .halo circle {
      fill: color-mix(in oklab, var(--pap-accent-3) 42%, white);
      opacity: .28;
    }

    #append-content .pap-pop {
      position: absolute;
      z-index: 3;
      width: min(340px, 42vw);
      background: rgba(255, 255, 255, .92);
      border: 1px solid color-mix(in oklab, var(--pap-accent-3) 28%, var(--pap-border));
      border-radius: 16px;
      padding: 18px 18px 16px;
      backdrop-filter: blur(12px);
      box-shadow:
        0 30px 60px -24px color-mix(in oklab, var(--pap-accent-3) 35%, transparent),
        0 0 0 1px color-mix(in oklab, var(--pap-accent-3) 18%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .72);
      transform-origin: var(--pap-pop-origin, 0% 50%);
      transition: left .9s cubic-bezier(.2, .7, .2, 1), top .9s cubic-bezier(.2, .7, .2, 1),
        border-color .8s, box-shadow .8s;
    }

    #append-content .pap-pop[data-state="in"] {
      animation: papPop .7s cubic-bezier(.34, 1.56, .64, 1);
    }

    #append-content .pap-pop-arrow {
      position: absolute;
      width: 14px;
      height: 14px;
      background: rgba(255, 255, 255, .92);
      border-left: 1px solid color-mix(in oklab, var(--pap-accent-3) 28%, var(--pap-border));
      border-bottom: 1px solid color-mix(in oklab, var(--pap-accent-3) 28%, var(--pap-border));
      transform: rotate(45deg);
      left: -8px;
      top: calc(50% - 7px);
    }

    #append-content .pap-pop[data-side="right"] .pap-pop-arrow {
      left: auto;
      right: -8px;
      border: none;
      border-top: 1px solid color-mix(in oklab, var(--pap-accent-3) 28%, var(--pap-border));
      border-right: 1px solid color-mix(in oklab, var(--pap-accent-3) 28%, var(--pap-border));
    }

    #append-content .pap-pop[data-side="top"] .pap-pop-arrow {
      left: calc(50% - 7px);
      top: auto;
      bottom: -8px;
      border: none;
      border-right: 1px solid color-mix(in oklab, var(--pap-accent-3) 28%, var(--pap-border));
      border-bottom: 1px solid color-mix(in oklab, var(--pap-accent-3) 28%, var(--pap-border));
    }

    #append-content .pap-pop-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--pap-dim);
      margin-bottom: 8px;
    }

    #append-content .pap-pop-row em {
      font-style: normal;
      color: color-mix(in oklab, var(--pap-accent-3) 80%, white 20%);
    }

    #append-content .pap-pop-name {
      font-family: var(--fb);
      font-weight: 700;
      font-size: 22px;
      letter-spacing: -.015em;
      line-height: 1.1;
      margin: 0 0 6px;
      background: linear-gradient(180deg, #111827, color-mix(in oklab, var(--pap-accent-3) 55%, #111827));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    #append-content .pap-pop-tag {
      font-style: italic;
      font-size: 13px;
      line-height: 1.45;
      color: var(--pap-mid);
      border-left: 2px solid var(--pap-accent-3);
      padding: 2px 0 2px 10px;
      margin: 8px 0 12px;
    }

    #append-content .pap-pop-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: color-mix(in oklab, var(--pap-accent-3) 10%, white 90%);
      border: 1px solid color-mix(in oklab, var(--pap-accent-3) 26%, transparent);
      color: color-mix(in oklab, var(--pap-accent-3) 76%, #111827 24%);
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .18em;
      text-transform: uppercase;
      padding: 5px 10px;
      border-radius: 999px;
      margin-bottom: 12px;
    }

    #append-content .pap-pop-pill span {
      color: var(--pap-text);
      text-transform: none;
      letter-spacing: 0;
      font-family: var(--fb);
      font-size: 12px;
      font-weight: 600;
    }

    #append-content .pap-pop-body {
      font-size: 13px;
      line-height: 1.6;
      color: var(--pap-mid);
      margin: 0;
    }

    #append-content .pap-pop-stagger>* {
      opacity: 0;
      transform: translateY(6px);
      animation: papStagIn .5s ease forwards;
    }

    #append-content .pap-pop-stagger>*:nth-child(1) {
      animation-delay: .1s;
    }

    #append-content .pap-pop-stagger>*:nth-child(2) {
      animation-delay: .18s;
    }

    #append-content .pap-pop-stagger>*:nth-child(3) {
      animation-delay: .26s;
    }

    #append-content .pap-pop-stagger>*:nth-child(4) {
      animation-delay: .34s;
    }

    #append-content .pap-pop-stagger>*:nth-child(5) {
      animation-delay: .42s;
    }

    #append-content .pap-pop-stagger>*:nth-child(6) {
      animation-delay: .5s;
    }

    #append-content .pap-spark {
      position: absolute;
      pointer-events: none;
      width: 2px;
      height: 2px;
      border-radius: 50%;
      background: var(--pap-accent-3);
      box-shadow: 0 0 8px var(--pap-accent-3);
      opacity: 0;
    }

    #append-content .pap-spark.go {
      animation: papSpark .9s ease-out forwards;
    }

    @keyframes papAurora {
      0% {
        transform: translate3d(-2%, -2%, 0) scale(1.02);
      }

      50% {
        transform: translate3d(3%, 1%, 0) scale(1.08);
      }

      100% {
        transform: translate3d(-1%, 3%, 0) scale(1.03);
      }
    }

    @keyframes papPulse {
      0%,
      100% {
        opacity: .6;
        transform: scale(1);
      }

      50% {
        opacity: 1;
        transform: scale(1.35);
      }
    }

    @keyframes papTilt {
      0% {
        transform: rotateX(18deg) rotateZ(-3deg) translateY(0);
      }

      50% {
        transform: rotateX(22deg) rotateZ(2deg) translateY(-4px);
      }

      100% {
        transform: rotateX(16deg) rotateZ(-1deg) translateY(0);
      }
    }

    @keyframes papScan {
      0% {
        opacity: .9;
        stroke-dasharray: 0 600;
        stroke-dashoffset: 0;
      }

      100% {
        opacity: 0;
        stroke-dasharray: 600 0;
        stroke-dashoffset: 0;
      }
    }

    @keyframes papIconPulse {
      0%,
      100% {
        filter: drop-shadow(0 0 6px color-mix(in oklab, var(--pap-accent-3) 40%, transparent));
      }

      50% {
        filter: drop-shadow(0 0 16px color-mix(in oklab, var(--pap-accent-3) 80%, transparent));
      }
    }

    @keyframes papSpin {
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes papPop {
      0% {
        opacity: 0;
        transform: scale(.6) rotate(-8deg);
      }

      50% {
        opacity: 1;
        transform: scale(1.06) rotate(2deg);
      }

      75% {
        transform: scale(.98) rotate(-1deg);
      }

      100% {
        opacity: 1;
        transform: scale(1) rotate(0);
      }
    }

    @keyframes papStagIn {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes papSpark {
      0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
      }

      100% {
        opacity: 0;
        transform: translate(var(--dx), var(--dy)) scale(.4);
      }
    }

    @media (max-width: 980px) {
      #append-content .ds-layout {
        grid-template-columns: 1fr;
      }

      #append-content .ds-stage-column {
        display: none;
      }

      #append-content .ds-step {
        min-height: auto;
        padding-block: 0;
        margin-bottom: 18px;
      }

      #append-content .ds-step-card {
        width: 100%;
        max-width: none;
        position: relative;
        top: auto;
        transform: none !important;
        min-height: 0 !important;
        gap: 10px;
      }

      #append-content .ds-artifact,
      #append-content .ds-artifact-thumb,
      #append-content .ds-domain-artifact-scenes,
      #append-content .ds-people-artifact-shell,
      #append-content .ds-systems-stage,
      #append-content .ds-network-stage {
        display: none !important;
      }

      #append-content .ds-step-people {
        min-height: auto;
        padding: 0;
        border-radius: 0;
        overflow: visible;
      }

      #append-content .ds-step-people .ds-step-card {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        top: auto;
        width: 100%;
        max-width: none;
        margin: 0;
      }

      #append-content .ds-step[data-domain="network"] .ds-step-card {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        top: auto;
        width: 100%;
        max-width: none;
        margin: 0;
        transform: none;
      }

      #append-content .ds-step:not(.ds-step-people) .ds-step-card,
      #append-content .ds-step-people .ds-step-card,
      #append-content .ds-step[data-domain="network"] .ds-step-card {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        width: 100%;
        max-width: none;
      }

      #append-content .ds-step-question,
      #append-content .ds-step-interpretation {
        max-width: none;
      }

      #append-content .ds-detail {
        margin-top: 8px;
      }

      #append-content .ds-detail-summary {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      #append-content .ds-services .svc-head {
        padding: 12px 13px;
      }

      #append-content .pap-header {
        flex-direction: column;
        padding: 22px 22px 0;
      }

      #append-content .pap-progress {
        align-items: flex-start;
      }

      #append-content .pap-stage {
        height: min(620px, 70vh);
      }

      #append-content .pap-pop {
        position: static !important;
        width: auto;
        margin: 14px 18px 0;
        transform: none !important;
      }

      #append-content .pap-pop-arrow {
        display: none;
      }
    }

    @media (max-width: 700px) {
      #append-content .ds-sequence {
        padding: 18px 0 0;
        border-radius: 0;
      }

      #append-content .ds-title {
        max-width: none;
      }

      #append-content .ds-step-card {
        padding: 18px 16px;
        border-radius: 20px;
      }

      #append-content .ds-step-question {
        max-width: none;
      }

      #append-content .pap-header {
        padding: 18px 18px 0;
      }

      #append-content .pap-stage {
        height: min(520px, 64vh);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #append-content .ds-people-artifact,
      #append-content .ds-people-artifact::before,
      #append-content .ds-people-artifact::after,
      #append-content .ds-people-artifact * {
        animation: none !important;
        transition: none !important;
      }
    }

    @media (max-width: 980px) {
      #append-content .domain-shell {
        grid-template-columns: 1fr;
      }

      #append-content .domain-stage {
        min-height: 440px;
      }

      #append-content .domain-copy-top {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 820px) {
      #append-content .domain-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      #append-content .dn:last-child {
        grid-column: 1 / -1;
        max-width: 260px;
        margin: 0 auto;
      }

      #append-content .qc-art {
        width: 120px;
        height: 120px;
        opacity: .78;
      }

      #append-content .qc-front .qtext {
        max-width: 100%;
        padding-right: 74px;
      }
    }

    @media (max-width: 980px) {
      #append-content #lasting .lc-container {
        grid-template-columns: 1fr;
        padding-inline: 0;
        max-width: min(720px, calc(100vw - (var(--page-gutter) * 2)));
      }

      #append-content #lasting .lasting-grid::before {
        inset: 34px 0 0 12px;
      }

      #append-content #lasting .lasting-rail {
        inset: 42px auto 28px 0;
        width: 72px;
      }

      #append-content #lasting .lc.lc-y1,
      #append-content #lasting .lc.lc-y2,
      #append-content #lasting .lc.lc-y3 {
        grid-column: auto;
        transform: none;
        margin-left: 18px;
      }

      #append-content #lasting .lc.lc-y2 {
        margin-left: 26px;
      }

      #append-content #lasting .lc.lc-y3 {
        margin-left: 34px;
      }
    }

    @media (max-width: 900px) {
      #append-content #engage .eng-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 800px) {
      #append-content .trap-g {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 700px) {

      #append-content .eng-grid,
      #append-content .out-row {
        grid-template-columns: 1fr;
      }

      #append-content #engage .eng {
        min-height: 500px;
        padding: 16px;
        border-radius: 32px;
      }

      #append-content #engage .eng.is-collapsed {
        min-height: 360px;
      }

      #append-content #engage .eng-bar {
        left: 16px;
        right: 16px;
        top: 16px;
      }

      #append-content #engage .eng-body {
        padding: 48px 22px 22px;
        border-radius: 24px 24px 20px 20px;
      }

      #append-content #engage .eng.is-collapsed .eng-body {
        padding: 196px 10px 10px;
        border-radius: 0;
      }

      #append-content #engage .eng-name {
        max-width: none;
        font-size: clamp(1.7rem, 8vw, 2.2rem);
      }

      #append-content #engage .eng-desc {
        max-width: none;
        font-size: 1.02rem;
        line-height: 1.62;
      }

      #append-content #engage .eng-domains {
        max-width: 100%;
      }

      #append-content #engage .eng-meta {
        grid-template-columns: 1fr;
        padding: 18px;
      }

      #append-content #engage .emc {
        min-height: 82px;
      }

      #append-content .domain-nav {
        grid-template-columns: 1fr;
      }

      body.is-light-mode .domain-nav {
        gap: 12px !important;
      }

      body.is-light-mode .dn,
      body.is-light-mode .dn:nth-child(1),
      body.is-light-mode .dn:nth-child(2),
      body.is-light-mode .dn:nth-child(3),
      body.is-light-mode .dn:nth-child(4),
      body.is-light-mode .dn:nth-child(5),
      body.is-light-mode .dn:last-child {
        min-height: 168px !important;
        transform: none !important;
        clip-path: none !important;
        max-width: none !important;
        margin: 0 !important;
      }

      #append-content .dn,
      #append-content .dn:last-child {
        max-width: none;
        margin: 0;
      }

      #append-content .dn-bar {
        display: none;
      }

      #append-content .domain-stage {
        min-height: 400px;
        padding: 24px;
      }

      #append-content .domain-stage-top {
        margin-bottom: 24px;
      }

      #append-content .domain-stage-art {
        width: min(52%, 180px);
        inset: auto 16px 16px auto;
      }

      #append-content .domain-title {
        font-size: 2.3rem;
      }

      #append-content .domain-solve {
        max-width: none;
      }

      #append-content .cta-timing {
        gap: 16px;
        justify-content: flex-start;
      }

      #append-content .ctsp {
        display: none;
      }

      #append-content #cta .cta-timing {
        display: none;
      }

      #append-content .cta-mobile-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 14px;
        margin: 0 0 28px;
      }

      #append-content .cta-mobile-item {
        text-align: center;
      }

      #append-content .cta-mobile-item .ctn {
        font-size: clamp(2rem, 9vw, 3rem);
        margin-bottom: 8px;
      }

      #append-content .cta-mobile-item .ctl {
        font-size: 9px;
        line-height: 1.45;
        letter-spacing: .13em;
      }

      #append-content .qc-front {
        grid-template-columns: 72px minmax(0, 1fr) 104px;
        column-gap: 16px;
        row-gap: 14px;
      }

      #append-content .qc-front .qtext {
        padding-right: 0;
        max-width: none;
        font-size: 1.06rem;
      }

      #append-content .qc-art {
        width: 92px;
        height: 92px;
        opacity: .72;
      }

      #append-content .qc-click-me {
        font-size: 8px;
        letter-spacing: .12em;
      }
    }

    @media (max-width: 640px) {
      :root {
        --page-gutter: 16px;
        --section-pad-y: clamp(56px, 11vw, 80px);
        --hero-safe-top: clamp(96px, 12svh, 136px);
      }

      #text-block {
        justify-content: center;
        gap: 18px;
      }

      .tb-line {
        font-size: clamp(2.2rem, 10vw, 3.2rem);
        line-height: 1.04;
      }

      .tb-subtext {
        font-size: clamp(0.96rem, 3.8vw, 1.06rem);
        line-height: 1.62;
      }

      .spec-deck {
        min-height: 300px;
      }

      #append-content .ds-sequence {
        padding: 18px;
        border-radius: 24px;
      }

      #append-content .ds-step-card {
        padding: 16px;
        border-radius: 22px;
      }

      #append-content .domain-stage {
        min-height: 360px;
        padding: 20px;
      }

      #append-content .story-trigger {
        min-height: 184px;
      }

      #append-content .story-open {
        margin-top: 14px;
      }

      #append-content .story-modal {
        padding: 12px;
      }

      #append-content .story-modal-panel {
        width: min(100vw - 24px, 1120px);
        max-height: min(calc(var(--viewport-h) - 24px), 920px);
        padding: 18px;
        border-radius: 20px;
      }
    }

    @media (max-width: 480px) {
      :root {
        --page-gutter: 14px;
        --hero-safe-top: 118px;
      }

      .nav-floating {
        top: 14px;
        left: 14px;
        right: 14px;
        width: auto;
        padding: 10px 16px;
        border-radius: 28px;
      }

      .brand-cycle {
        min-width: 0;
        height: 20px;
      }

      .brand-item {
        gap: 8px;
      }

      .brand-sa {
        font-size: clamp(0.95rem, 5.8vw, 1.2rem);
      }

      #text-block {
        justify-content: flex-start;
        padding-top: calc(var(--hero-safe-top) + 22px);
        padding-bottom: 14px;
        gap: 12px;
      }

      .tb-line,
      .tb-subtext {
        max-width: calc(100vw - (var(--page-gutter) * 2));
      }

      .tb-line {
        font-size: clamp(1.88rem, 11vw, 2.7rem);
        line-height: 0.96;
        letter-spacing: -0.05em;
      }

      .tb-subtext {
        font-size: clamp(0.84rem, 4.5vw, 0.96rem);
        line-height: 1.42;
        margin-top: 2px;
        margin-bottom: 0;
      }

      .tb-specimen {
        display: none !important;
      }

      .scroll-hint {
        bottom: 12px;
        gap: 6px;
        opacity: .66;
      }

      .scroll-hint span {
        font-size: 8px;
        letter-spacing: 0.18em;
      }

      .mouse-icon {
        width: 18px;
        height: 30px;
      }
    }



    @media (max-width: 1100px) {
      #append-content .qgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 760px) {
      #append-content .qgrid {
        grid-template-columns: 1fr;
      }

      #append-content .qc {
        height: 380px;
      }

      #append-content .qgrid .qc:nth-child(2n) {
        margin-top: 0;
      }
    }

    @media (max-width: 600px) {
      #append-content .ts {
        grid-template-columns: 56px 2px 1fr;
        gap: 0 14px;
      }

      #append-content .ts-n {
        font-size: 2rem;
      }
    }

    @media (max-width: 540px) {
      #append-content .fi {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 18px;
      }
    }

    @media (max-width: 500px) {

      #append-content .trap-g,
      #append-content .ts-outs {
        grid-template-columns: 1fr;
      }

      #append-content #lasting .lc-container {
        padding-inline: 0;
        gap: 14px;
        max-width: calc(100vw - (var(--page-gutter) * 2));
      }

      #append-content .lasting-signal {
        padding: 8px 12px 10px;
        gap: 6px;
      }

      #append-content .ls-step {
        width: 14px;
      }

      #append-content #lasting .lasting-rail {
        inset: 40px auto 22px 0;
        width: 56px;
      }

      #append-content #lasting .lc.lc-y1,
      #append-content #lasting .lc.lc-y2,
      #append-content #lasting .lc.lc-y3 {
        margin-left: 0;
      }

      #append-content #lasting .lc.lc-y2 {
        margin-left: 0;
      }

      #append-content #lasting .lc.lc-y3 {
        margin-left: 0;
      }

      #append-content #lasting .lc-art {
        width: 78px;
        height: 78px;
        right: 8px;
        top: 12px;
      }

      #append-content #lasting .lc-content {
        max-width: 100%;
        padding-right: 18px;
      }

      #append-content #lasting .lc-title {
        font-size: 1.14rem;
      }

      #append-content #lasting .lc-kicker {
        top: 14px;
        left: 18px;
        right: 18px;
        font-size: 1.1rem;
        letter-spacing: .1em;
      }

      #append-content #lasting .lc-year {
        left: 16px;
        bottom: 58px;
        font-size: 62px;
      }
    }

    @media (prefers-reduced-motion: reduce) {

      #append-content .dn,
      #append-content .svc,
      #append-content .svc-arr,
      #append-content .qc-inner,
      #append-content .qc-click-me,
      #append-content .qc-front::before,
      #append-content .qc-back::before,
      #append-content .lc,
      #append-content .lc-art {
        transition: none !important;
        animation: none !important;
      }
    }

/* ============================================================
     PERSONA ARTIFACT — all selectors scoped
     ============================================================ */
  #append-content #dp-people .persona-artifact{
    --accent:#7ab6ff;
    --accent-2:#a78bfa;
    --accent-3:#34d9c4;
    position:relative;
    margin:24px 0;
    padding:32px 32px 40px;
    min-height:min(820px, 92vh);
    border:1px solid var(--b);
    border-radius:var(--rxl);
    background:
      radial-gradient(1100px 480px at 10% -10%, color-mix(in oklab, var(--accent) 20%, transparent) 0%, transparent 55%),
      radial-gradient(900px 420px at 110% 10%, color-mix(in oklab, var(--accent-2) 14%, transparent) 0%, transparent 60%),
      radial-gradient(900px 500px at 50% 120%, color-mix(in oklab, var(--accent-3) 12%, transparent) 0%, transparent 60%),
      linear-gradient(180deg, #ffffff 0%, #f3f7ff 100%);
    overflow:hidden;
    isolation:isolate;
  }
  #append-content #dp-people .persona-artifact::before{
    content:"";position:absolute;inset:-20%;pointer-events:none;z-index:0;
    background:
      radial-gradient(38% 44% at 20% 30%, color-mix(in oklab, var(--accent) 38%, transparent), transparent 70%),
      radial-gradient(30% 40% at 80% 20%, color-mix(in oklab, var(--accent-2) 34%, transparent), transparent 70%),
      radial-gradient(40% 50% at 60% 90%, color-mix(in oklab, var(--accent-3) 28%, transparent), transparent 70%);
    filter:blur(52px) saturate(132%);
    opacity:.52;
    animation:paAurora 22s ease-in-out infinite alternate;
    transition:background .9s ease;
  }
  @keyframes paAurora{
    0%{transform:translate3d(-2%,-2%,0) scale(1.02);}
    50%{transform:translate3d(3%,1%,0) scale(1.08);}
    100%{transform:translate3d(-1%,3%,0) scale(1.03);}
  }
  #append-content #dp-people .persona-artifact::after{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background-image:
      linear-gradient(to right, rgba(15,23,42,.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(15,23,42,.05) 1px, transparent 1px);
    background-size:44px 44px;
    mask-image:radial-gradient(80% 60% at 50% 45%, black, transparent 80%);
    opacity:.28;
  }
  #append-content #dp-people .persona-artifact > *{position:relative;z-index:1;}

  /* ---------- Full-bleed radar stage ---------- */
  #append-content #dp-people .persona-artifact .pa-stage{
    position:absolute;
    left:clamp(12px, 2vw, 34px);
    bottom:clamp(20px, 4.2vh, 54px);
    top:auto;
    width:min(46vw, 760px, calc((100vh - 140px) * 900 / 640));
    aspect-ratio: 900 / 640;
    height:auto;
    margin:0;
    perspective:1400px;
  }
  #append-content #dp-people .persona-artifact .pa-stage-bg{
    position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(62% 62% at 32% 76%, color-mix(in oklab, var(--accent) 20%, transparent), transparent 72%);
    transition:background 1s ease;
    filter:blur(8px);
  }

  /* Giant persona watermark behind radar */
  #append-content #dp-people .persona-artifact .pa-watermark{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-family:var(--serif);font-weight:700;letter-spacing:-.04em;
    font-size:clamp(90px, 14vw, 220px);line-height:.9;text-align:center;
    color:transparent;
    -webkit-text-stroke:1px color-mix(in oklab, var(--accent) 34%, transparent);
    opacity:.48;
    pointer-events:none;user-select:none;
    transition:opacity .6s, -webkit-text-stroke-color .9s;
    white-space:nowrap;
  }
  #append-content #dp-people .persona-artifact .pa-watermark span{
    display:block;transition:transform .9s cubic-bezier(.2,.7,.2,1), opacity .6s;
  }
  #append-content #dp-people .persona-artifact .pa-watermark[data-leaving="true"] span{
    transform:translateY(-8px) scale(.97);opacity:0;
  }

  #append-content #dp-people .persona-artifact svg.pa-radar{
    position:absolute;inset:0;width:100%;height:100%;display:block;
    transform-style:preserve-3d;
    transform:rotateX(18deg) rotateZ(-2deg) translateY(16px) translateX(-18px);
    animation:paTilt 16s ease-in-out infinite alternate;
  }
  @keyframes paTilt{
    0%{transform:rotateX(18deg) rotateZ(-3deg) translateY(16px) translateX(-20px);}
    50%{transform:rotateX(22deg) rotateZ(2deg) translateY(8px) translateX(-14px);}
    100%{transform:rotateX(16deg) rotateZ(-1deg) translateY(18px) translateX(-22px);}
  }
  @media (prefers-reduced-motion: reduce){
    #append-content #dp-people .persona-artifact svg.pa-radar{animation:none;transform:none;}
  }

  #append-content #dp-people .persona-artifact .pa-radar .ring{
    fill:none;stroke:rgba(100,116,139,.28);stroke-width:1.1;stroke-dasharray:3 5;
  }
  #append-content #dp-people .persona-artifact .pa-radar .axis{
    stroke:rgba(51,65,85,.34);stroke-width:1.1;
  }
  #append-content #dp-people .persona-artifact .pa-radar .axis-scan{
    stroke:var(--accent);stroke-width:1.2;opacity:0;
    transition:stroke .8s;
  }
  #append-content #dp-people .persona-artifact .pa-radar .axis-scan.run{
    animation:paScan 1.1s ease-out;
  }
  @keyframes paScan{
    0%{opacity:.9;stroke-dasharray:0 600;stroke-dashoffset:0;}
    100%{opacity:0;stroke-dasharray:600 0;stroke-dashoffset:0;}
  }
  #append-content #dp-people .persona-artifact .pa-radar .axis-label{
    font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
    fill:#4b5563;
  }
  #append-content #dp-people .persona-artifact .pa-radar .axis-label.top{
    font-weight:700;fill:color-mix(in oklab, var(--accent) 86%, #0f172a 14%);
    transition:fill .8s;
  }
  #append-content #dp-people .persona-artifact .pa-radar .scale-label{
    font-family:var(--mono);font-size:9px;fill:#64748b;
  }
  #append-content #dp-people .persona-artifact .pa-radar .shape{
    fill:url(#pa-grad);
    stroke:var(--accent);
    stroke-width:2.15;stroke-linejoin:round;
    filter:drop-shadow(0 0 30px color-mix(in oklab, var(--accent) 78%, transparent));
    transition:stroke .8s;
  }
  #append-content #dp-people .persona-artifact .pa-radar .shape-ghost{
    fill:none;stroke:color-mix(in oklab, var(--accent) 30%, transparent);
    stroke-width:1.1;stroke-dasharray:2 4;opacity:.55;transition:stroke .8s;
  }
  #append-content #dp-people .persona-artifact .pa-radar .icon-ring{
    fill:rgba(255,255,255,.98);
    stroke:color-mix(in oklab, var(--accent) 48%, #cbd5e1);
    stroke-width:1.35;
    transition:stroke .8s, fill .6s, r .6s cubic-bezier(.2,.7,.2,1);
  }
  #append-content #dp-people .persona-artifact .pa-radar .icon-ring.top{
    stroke:var(--accent);
    fill:color-mix(in oklab, var(--accent) 24%, white);
    animation:paIconPulse 2.2s ease-in-out infinite;
  }
  @keyframes paIconPulse{
    0%,100%{filter:drop-shadow(0 0 6px color-mix(in oklab, var(--accent) 40%, transparent));}
    50%{filter:drop-shadow(0 0 16px color-mix(in oklab, var(--accent) 80%, transparent));}
  }
  #append-content #dp-people .persona-artifact .pa-radar .glyph{
    stroke:#4b5563;stroke-width:1.7;fill:none;
    stroke-linecap:round;stroke-linejoin:round;
    transition:stroke .6s;
  }
  #append-content #dp-people .persona-artifact .pa-radar .glyph.top{
    stroke:color-mix(in oklab, var(--accent) 88%, #0f172a 12%);
  }
  #append-content #dp-people .persona-artifact .pa-radar .vertex{
    fill:#fff;stroke:var(--accent);stroke-width:2;
    filter:drop-shadow(0 0 14px color-mix(in oklab, var(--accent) 88%, transparent));
    transition:stroke .8s;
  }
  /* Rotating particle halo */
  #append-content #dp-people .persona-artifact .pa-radar .halo{
    transform-origin:var(--hc, 50%) var(--hy, 50%);
    animation:paSpin 40s linear infinite;
  }
  @keyframes paSpin{to{transform:rotate(360deg);}}
  #append-content #dp-people .persona-artifact .pa-radar .halo circle{
    fill:color-mix(in oklab, var(--accent) 56%, white);
    opacity:.36;
  }

  /* ---------- Floating interpretation popup ---------- */
  #append-content #dp-people .persona-artifact .pa-pop{
    position:absolute;z-index:3;
    width:min(340px, 42vw);
    background:rgba(255,255,255,.97);
    border:1px solid color-mix(in oklab, var(--accent) 34%, #cbd5e1);
    border-radius:16px;
    padding:18px 18px 16px;
    backdrop-filter:blur(12px);
    box-shadow:
      0 32px 72px -24px color-mix(in oklab, var(--accent) 44%, transparent),
      0 0 0 1px color-mix(in oklab, var(--accent) 24%, transparent),
      inset 0 1px 0 rgba(255,255,255,.72);
    transform-origin:var(--pop-origin, 0% 50%);
    transition:left .9s cubic-bezier(.2,.7,.2,1), top .9s cubic-bezier(.2,.7,.2,1),
               border-color .8s, box-shadow .8s;
  }
  #append-content #dp-people .persona-artifact .pa-pop[data-state="in"]{
    animation:paPop .7s cubic-bezier(.34,1.56,.64,1);
  }
  @keyframes paPop{
    0%{opacity:0;transform:scale(.6) rotate(-8deg);}
    50%{opacity:1;transform:scale(1.06) rotate(2deg);}
    75%{transform:scale(.98) rotate(-1deg);}
    100%{opacity:1;transform:scale(1) rotate(0);}
  }
  #append-content #dp-people .persona-artifact .pa-pop-arrow{
    position:absolute;width:14px;height:14px;
    background:rgba(255,255,255,.97);
    border-left:1px solid color-mix(in oklab, var(--accent) 34%, #cbd5e1);
    border-bottom:1px solid color-mix(in oklab, var(--accent) 34%, #cbd5e1);
    transform:rotate(45deg);
    left:-8px;top:calc(50% - 7px);
  }
  #append-content #dp-people .persona-artifact .pa-pop[data-side="right"] .pa-pop-arrow{
    left:auto;right:-8px;border:none;
    border-top:1px solid color-mix(in oklab, var(--accent) 34%, #cbd5e1);
    border-right:1px solid color-mix(in oklab, var(--accent) 34%, #cbd5e1);
  }
  #append-content #dp-people .persona-artifact .pa-pop[data-side="top"] .pa-pop-arrow{
    left:calc(50% - 7px);top:auto;bottom:-8px;
    border:none;
    border-right:1px solid color-mix(in oklab, var(--accent) 34%, #cbd5e1);
    border-bottom:1px solid color-mix(in oklab, var(--accent) 34%, #cbd5e1);
  }
  #append-content #dp-people .persona-artifact .pa-pop-row{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#64748b;
    margin-bottom:8px;
  }
  #append-content #dp-people .persona-artifact .pa-pop-row em{
    font-style:normal;color:color-mix(in oklab, var(--accent) 88%, #0f172a 12%);transition:color .8s;
  }
  #append-content #dp-people .persona-artifact .pa-pop-name{
    font-family:var(--serif);font-weight:600;font-size:22px;letter-spacing:-.015em;line-height:1.1;
    margin:0 0 6px;
    background:linear-gradient(180deg, #0f172a, color-mix(in oklab, var(--accent) 68%, #0f172a));
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  }
  #append-content #dp-people .persona-artifact .pa-pop-tag{
    font-family:var(--serif);font-style:italic;font-size:13px;line-height:1.45;color:#475569;
    border-left:2px solid var(--accent);padding:2px 0 2px 10px;margin:8px 0 12px;
    transition:border-color .8s;
  }
  #append-content #dp-people .persona-artifact .pa-pop-pill{
    display:inline-flex;align-items:center;gap:8px;
    background:color-mix(in oklab, var(--accent) 14%, white 86%);
    border:1px solid color-mix(in oklab, var(--accent) 34%, transparent);
    color:color-mix(in oklab, var(--accent) 84%, #0f172a 16%);
    font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
    padding:5px 10px;border-radius:999px;margin-bottom:12px;
    transition:color .8s, background .8s, border-color .8s;
  }
  #append-content #dp-people .persona-artifact .pa-pop-pill span{
    color:#0f172a;text-transform:none;letter-spacing:0;font-family:var(--serif);font-size:12px;font-weight:600;
  }
  #append-content #dp-people .persona-artifact .pa-pop-body{
    font-size:13px;line-height:1.6;color:#334155;margin:0;
  }
  #append-content #dp-people .persona-artifact .pa-pop-stagger > *{
    opacity:0;transform:translateY(6px);
    animation:paStagIn .5s ease forwards;
  }
  #append-content #dp-people .persona-artifact .pa-pop-stagger > *:nth-child(1){animation-delay:.10s}
  #append-content #dp-people .persona-artifact .pa-pop-stagger > *:nth-child(2){animation-delay:.18s}
  #append-content #dp-people .persona-artifact .pa-pop-stagger > *:nth-child(3){animation-delay:.26s}
  #append-content #dp-people .persona-artifact .pa-pop-stagger > *:nth-child(4){animation-delay:.34s}
  #append-content #dp-people .persona-artifact .pa-pop-stagger > *:nth-child(5){animation-delay:.42s}
  #append-content #dp-people .persona-artifact .pa-pop-stagger > *:nth-child(6){animation-delay:.50s}
  @keyframes paStagIn{to{opacity:1;transform:translateY(0);}}

  /* Confetti spark burst */
  #append-content #dp-people .persona-artifact .pa-spark{
    position:absolute;pointer-events:none;width:2px;height:2px;border-radius:50%;
    background:var(--accent);box-shadow:0 0 8px var(--accent);
    opacity:0;
  }
  #append-content #dp-people .persona-artifact .pa-spark.go{
    animation:paSpark .9s ease-out forwards;
  }
  @keyframes paSpark{
    0%{opacity:1;transform:translate(0,0) scale(1);}
    100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.4);}
  }

  /* ---------- Responsive ---------- */
  @media (max-width:880px){
    #append-content #dp-people .persona-artifact .pa-stage{
      position:relative;
      left:auto;
      bottom:auto;
      width:100%;
      height:min(620px,70vh);
      margin-top:18px;
    }
    #append-content #dp-people .persona-artifact .pa-pop{
      position:static !important;width:auto;margin-top:14px;transform:none !important;
    }
    #append-content #dp-people .persona-artifact .pa-pop-arrow{display:none;}
  }
  @media (max-width:560px){
    #append-content #dp-people .persona-artifact{padding:22px 18px 30px;}
    #append-content #dp-people .persona-artifact .pa-stage{
      height:min(520px,64vh);
      margin-top:14px;
    }
  }

  @media (min-width: 1680px){
    #append-content #dp-people .persona-artifact .pa-stage{
      width:min(52vw, 920px, calc((100vh - 140px) * 900 / 640));
      left:clamp(20px, 3vw, 56px);
    }
  }

  @media (max-width: 1440px){
    #append-content #dp-people .persona-artifact .pa-stage{
      width:min(44vw, 700px, calc((100vh - 132px) * 900 / 640));
    }
  }

  @media (max-width: 1280px){
    #append-content #dp-people .persona-artifact .pa-stage{
      width:min(42vw, 640px, calc((100vh - 128px) * 900 / 640));
    }
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce){
    #append-content #dp-people .persona-artifact *,
    #append-content #dp-people .persona-artifact *::before,
    #append-content #dp-people .persona-artifact *::after{
      animation:none !important;transition:none !important;
    }
  }

/* ─────────── LIGHT MODE OVERRIDE for #lasting ─────────── */
        #append-content #lasting {
          background:
            radial-gradient(1200px 600px at 15% -10%, rgba(59, 130, 246, .12), transparent 60%),
            radial-gradient(900px 500px at 95% 110%, rgba(212, 160, 23, .12), transparent 60%),
            radial-gradient(700px 400px at 55% 50%, rgba(34, 197, 94, .08), transparent 60%),
            linear-gradient(180deg, #F7F5EF 0%, #EFEEE6 50%, #E9E6DA 100%);
          border-top: 1px solid rgba(20, 24, 36, .06);
          border-bottom: 1px solid rgba(20, 24, 36, .06);
          color: #1b2230;
          overflow: hidden;
          isolation: isolate;
        }

        /* paper-grain texture */
        #append-content #lasting::before {
          content: "";
          position: absolute;
          inset: 0;
          background:
            repeating-linear-gradient(0deg, rgba(20, 24, 36, .025) 0 1px, transparent 1px 64px),
            repeating-linear-gradient(90deg, rgba(20, 24, 36, .025) 0 1px, transparent 1px 64px);
          mask-image: radial-gradient(ellipse at 50% 50%, #000 20%, transparent 85%);
          pointer-events: none;
          z-index: 0;
        }

        #append-content #lasting>.w {
          position: relative;
          z-index: 2;
        }

        /* Ambient Organic Watermark Background */
        #append-content .ambient-leaves {
          position: absolute;
          inset: 0;
          pointer-events: none;
          z-index: 0;
          overflow: hidden;
        }

        #append-content .ambient-leaf {
          position: absolute;
          width: clamp(300px, 45vw, 600px);
          height: auto;
          opacity: 1;
        }

        #append-content .al-stroke {
          stroke: rgba(15, 23, 42, 0.04);
          stroke-width: 1.2;
          stroke-linecap: round;
          stroke-linejoin: round;
        }

        /* Gentle swaying motions */
        #append-content .al-1 {
          left: -10%;
          top: 5%;
          transform-origin: center bottom;
          animation: leafSway 24s ease-in-out infinite alternate;
        }

        #append-content .al-2 {
          right: -5%;
          top: 35%;
          transform-origin: center bottom;
          animation: leafSway 28s ease-in-out infinite alternate-reverse;
          width: clamp(250px, 35vw, 450px);
        }

        #append-content .al-3 {
          left: 35%;
          bottom: -15%;
          transform-origin: center bottom;
          animation: leafSway 32s ease-in-out infinite alternate;
          width: clamp(400px, 50vw, 800px);
          filter: blur(1px);
        }

        @keyframes leafSway {
          0% {
            transform: rotate(-5deg) translateY(0) scale(1);
          }

          100% {
            transform: rotate(5deg) translateY(-20px) scale(1.02);
          }
        }

        /* eyebrow + heading */
        #append-content #lasting .ey {
          color: #2a8a4e;
          background: rgba(34, 212, 104, .10);
          padding: 6px 12px;
          border-radius: 999px;
          width: fit-content;
          border: 1px solid rgba(34, 212, 104, .22);
        }

        #append-content #lasting .ey::before {
          display: none;
        }

        #append-content #lasting .h2 {
          color: #0f1624;
          font-family: var(--serif);
          letter-spacing: -.025em;
        }

        #append-content #lasting .h2 .accent-underline {
          position: relative;
          display: inline-block;
          white-space: nowrap;
        }

        #append-content #lasting .h2 .accent-underline::after {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          bottom: -6px;
          height: 8px;
          background: linear-gradient(90deg, rgba(59, 130, 246, .38), rgba(34, 197, 94, .46), rgba(212, 160, 23, .54));
          border-radius: 6px;
          transform-origin: left;
          animation: lsDrawUnderline 1.6s ease-out both;
        }

        @keyframes lsDrawUnderline {
          from {
            transform: scaleX(0);
          }

          to {
            transform: scaleX(1);
          }
        }

        #append-content #lasting .lead {
          color: #313a4a;
        }

        #append-content #lasting .lead strong {
          color: #0f1624;
          background: linear-gradient(180deg, transparent 62%, rgba(212, 160, 23, .35) 62%);
          padding: 0 2px;
        }

        #append-content #lasting .lasting-actions {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 16px;
          flex-wrap: wrap;
          margin: 16px 0 30px;
        }

        #append-content #lasting .lasting-toggle {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          padding: 14px 18px;
          border-radius: 999px;
          border: 1px solid rgba(20, 24, 36, .12);
          background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(246, 248, 252, .9));
          color: #0f1624;
          font-family: var(--mono);
          font-size: 11px;
          letter-spacing: .16em;
          text-transform: uppercase;
          font-weight: 800;
          cursor: pointer;
          box-shadow: 0 12px 26px -18px rgba(20, 24, 36, .28);
          transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
        }

        #append-content #lasting .lasting-toggle::before {
          content: "+";
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 22px;
          height: 22px;
          border-radius: 50%;
          background: linear-gradient(180deg, rgba(59, 130, 246, .12), rgba(34, 197, 94, .12));
          border: 1px solid rgba(20, 24, 36, .08);
          color: #0f1624;
          font-size: 14px;
          line-height: 1;
        }

        #append-content #lasting .lasting-toggle:hover,
        #append-content #lasting .lasting-toggle:focus-visible {
          transform: translateY(-2px);
          border-color: rgba(20, 24, 36, .18);
          box-shadow: 0 18px 34px -20px rgba(20, 24, 36, .34);
          outline: none;
        }

        #append-content #lasting .lasting-toggle-note {
          font-family: var(--mono);
          font-size: 10px;
          letter-spacing: .16em;
          text-transform: uppercase;
          color: #5b6477;
        }

        /* Living "heartbeat" — replaces the bar signal */
        #append-content .lasting-heartbeat {
          position: relative;
          display: inline-flex;
          align-items: center;
          gap: 14px;
          padding: 12px 22px;
          margin: 10px 0 34px;
          background: rgba(255, 255, 255, .82);
          border: 1px solid rgba(20, 24, 36, .08);
          border-radius: 999px;
          box-shadow: 0 12px 32px -14px rgba(20, 24, 36, .22), inset 0 1px 0 rgba(255, 255, 255, .8);
        }

        #append-content .lasting-heartbeat svg {
          display: block;
          height: 26px;
          width: 180px;
          overflow: visible;
        }

        #append-content .lasting-heartbeat .hb-path {
          fill: none;
          stroke: url(#hbGrad);
          stroke-width: 2.2;
          stroke-linecap: round;
          stroke-linejoin: round;
          stroke-dasharray: 360;
          stroke-dashoffset: 360;
          animation: hbDraw 3.6s cubic-bezier(.6, .2, .2, 1) 1 both;
        }

        @keyframes hbDraw {
          0% {
            stroke-dashoffset: 360;
          }

          100% {
            stroke-dashoffset: 0;
          }
        }

        #append-content .lasting-heartbeat .hb-text {
          font-family: var(--mono);
          font-size: 11px;
          letter-spacing: .14em;
          text-transform: uppercase;
          color: #2a3448;
        }

        #append-content .lasting-heartbeat .hb-dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: #22c55e;
          box-shadow: 0 0 0 0 rgba(34, 197, 94, .55);
          animation: hbPulse 1.6s ease-out infinite;
        }

        @keyframes hbPulse {
          0% {
            box-shadow: 0 0 0 0 rgba(34, 197, 94, .55);
          }

          80%,
          100% {
            box-shadow: 0 0 0 12px rgba(34, 197, 94, 0);
          }
        }

        @media (max-width: 900px) {
          #append-content .lasting-heartbeat {
            display: block;
            width: 100%;
            max-width: 100%;
            margin: 10px 0 24px;
            padding: 14px 18px;
            border-radius: 20px;
            box-sizing: border-box;
          }

          #append-content .lasting-heartbeat svg,
          #append-content .lasting-heartbeat .hb-dot {
            display: none;
          }

          #append-content .lasting-heartbeat .hb-text {
            display: block;
            width: 100%;
            max-width: 100%;
            font-size: 10px;
            line-height: 1.45;
            letter-spacing: .12em;
            text-align: left;
            white-space: normal;
            overflow-wrap: anywhere;
            text-wrap: balance;
          }

          #append-content #lasting .lasting-grid {
            padding-top: 20px;
            padding-inline: 0;
            overflow: visible;
          }

          #append-content #lasting .lasting-rail {
            display: none;
          }

          #append-content #lasting .lc-container {
            display: flex;
            flex-direction: column;
            gap: 16px;
            overflow: visible;
            padding: 0 var(--page-gutter) 20px;
            max-width: none;
            margin: 0;
          }

          #append-content #lasting .lc {
            flex: 0 0 auto;
            width: 100%;
            min-width: 0;
            transform: none !important;
            margin-bottom: 0 !important;
          }

          #append-content #lasting .lc.lc-y1,
          #append-content #lasting .lc.lc-y2,
          #append-content #lasting .lc.lc-y3 {
            transform: none !important;
            margin-left: 0 !important;
          }
        }

        /* Grid background + rail — light version */
        #append-content #lasting .lasting-grid {
          padding-top: 28px;
          width: 100%;
          margin-left: 0;
          position: relative;
          overflow: hidden;
          padding-inline: var(--page-gutter);
        }

        /* Constrained container for the cards themselves */
        #append-content #lasting .lc-container {
          display: grid;
          grid-template-columns: repeat(12, minmax(0, 1fr));
          gap: clamp(14px, 1.6vw, 24px);
          grid-column: 1 / -1;
          width: 100%;
          max-width: min(1320px, calc(100vw - (var(--page-gutter) * 2)));
          margin: 0 auto;
          position: relative;
          z-index: 2;
          padding: 0 0 20px;
        }

        /* Full-width decorative rail/chart */
        #append-content #lasting .lasting-rail {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          pointer-events: none;
          z-index: 1;
        }

        #append-content #lasting .lasting-rail svg {
          width: 100%;
          height: 100%;
          flex-shrink: 0;
          opacity: 0.68;
        }

        #append-content #lasting .lasting-grid::before {
          inset: 0;
          background: transparent;
          border: none;
          box-shadow: none;
        }

        #append-content #lasting .lasting-rail-base {
          stroke: rgba(20, 24, 36, .12);
        }

        #append-content #lasting .lasting-node {
          fill: #ffffff;
          stroke-width: 2.6;
        }

        #append-content #lasting .lasting-rail-glow {
          opacity: .92;
          stroke-width: 4.5;
          filter: drop-shadow(0 2px 8px rgba(59, 130, 246, .28));
        }

        #append-content #lasting .lasting-node.n1 {
          stroke: #3b82f6;
        }

        #append-content #lasting .lasting-node.n2 {
          stroke: #22c55e;
        }

        #append-content #lasting .lasting-node.n3 {
          stroke: #d4a017;
        }

        /* traveling pulse along rail */
        #append-content #lasting .rail-pulse {
          fill: #ffffff;
          stroke: #22c55e;
          stroke-width: 2;
          filter: drop-shadow(0 0 6px rgba(34, 197, 94, .8));
          offset-path: path("M96 420 C180 420 212 390 272 360 C334 328 388 302 470 282 C556 262 606 220 690 198 C788 172 860 150 946 118 C978 106 1014 92 1080 90");
          offset-rotate: 0deg;
          animation: railTravel 8s ease-in-out 1 both;
        }

        @keyframes railTravel {
          0% {
            offset-distance: 0%;
            fill: #3b82f6;
            stroke: #3b82f6;
          }

          100% {
            offset-distance: 100%;
            fill: #d4a017;
            stroke: #d4a017;
          }
        }

        #append-content #lasting .lasting-node.n1,
        #append-content #lasting .lasting-node.n2,
        #append-content #lasting .lasting-node.n3 {
          transform-box: fill-box;
        }

        /* Cards — light */
        #append-content #lasting .lc {
          background: linear-gradient(180deg, #ffffff 0%, #fbfcff 52%, #f7f8fb 100%);
          border: 1px solid rgba(20, 24, 36, .08);
          box-shadow:
            0 1px 0 rgba(255, 255, 255, .94) inset,
            0 34px 64px -30px rgba(20, 24, 36, .18),
            0 16px 36px -24px rgba(20, 24, 36, .12);
          backdrop-filter: none;
          animation: none;
          overflow: hidden !important;
          border-radius: var(--card-radius-xl) !important;
          min-height: 360px;
          transition: 
            min-height 0.7s cubic-bezier(0.16, 1, 0.3, 1),
            transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
            box-shadow 0.4s ease;
          
          /* Padding Extension for Hover Stability */
          padding-bottom: 20px !important;
          margin-bottom: -20px !important;
        }

        #append-content #lasting .lc.lc-y1 {
          --lc-accent-soft: rgba(59, 130, 246, .28);
        }

        #append-content #lasting .lc.lc-y2 {
          --lc-accent-soft: rgba(34, 197, 94, .28);
        }

        #append-content #lasting .lc.lc-y3 {
          --lc-accent-soft: rgba(212, 160, 23, .32);
        }

        #append-content #lasting .lc::before {
          background:
            radial-gradient(circle at 12% 10%, rgba(255, 255, 255, .9), transparent 40%),
            linear-gradient(180deg, rgba(255, 255, 255, .4), transparent 40%);
          opacity: 1;
        }

        #append-content #lasting .lc::after {
          border: 1px solid rgba(20, 24, 36, .04);
        }

        #append-content #lasting .lc:hover,
        #append-content #lasting .lc:focus-visible {
          border-color: rgba(20, 24, 36, .14);
          box-shadow: 0 44px 84px -30px rgba(20, 24, 36, .24), 0 18px 40px -18px var(--lc-accent-soft);
          transform: translateY(-10px);
        }

        /* Prevent movement on internal elements */
        #append-content #lasting .lc:hover .lc-img-wrap,
        #append-content #lasting .lc:hover .lc-body,
        #append-content #lasting .lc:hover .lc-bar,
        #append-content #lasting .lc:hover .lc-year,
        #append-content #lasting .lc:hover .lc-kicker {
          transform: none;
        }

        #append-content #lasting .lc-y1 {
          min-height: 320px;
          transform: translateY(54px);
        }

        #append-content #lasting .lc-y2 {
          min-height: 382px;
          transform: translateY(20px);
        }

        #append-content #lasting .lc-y3 {
          min-height: 446px;
          transform: translateY(-12px);
        }

        #append-content #lasting .lc.lc-y1 .lc-phase {
          color: #3b82f6;
        }

        #append-content #lasting .lc.lc-y2 .lc-phase {
          color: #22c55e;
        }

        #append-content #lasting .lc.lc-y3 .lc-phase {
          color: #d4a017;
        }

        #append-content #lasting .lc.lc-y1 .lc-bar {
          background: linear-gradient(90deg, #3b82f6, #8cb8ff);
        }

        #append-content #lasting .lc.lc-y2 .lc-bar {
          background: linear-gradient(90deg, #22c55e, #7ce6a0);
        }

        #append-content #lasting .lc.lc-y3 .lc-bar {
          background: linear-gradient(90deg, #d4a017, #f2d15d);
        }

        #append-content #lasting .lc-title {
          color: #ffffff !important;
        }

        #append-content #lasting .lc-desc {
          color: rgba(255, 255, 255, 0.9) !important;
        }

        #append-content #lasting .lc-desc strong {
          color: #ffffff !important;
        }

        #append-content #lasting .lc-phase {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 16px;
          padding: 7px 12px;
          border: 1px solid rgba(20, 24, 36, .08);
          border-radius: 999px;
          background: rgba(255, 255, 255, .92);
          box-shadow: 0 10px 24px -22px rgba(20, 24, 36, .18);
          font-size: 10px;
          letter-spacing: .18em;
          color: rgba(15, 22, 36, .62);
          font-weight: 800;
        }

        #append-content #lasting .lc-phase::before {
          display: none;
        }

        #append-content #lasting .lc-foot {
          background: linear-gradient(180deg, #F7FAFF, #EFF7F1 48%, #FCF5E3);
          border-top: 1px solid rgba(20, 24, 36, .06);
          border-radius: 14px;
        }

        #append-content #lasting .lc-foot-text {
          color: rgba(255, 255, 255, 0.7) !important;
        }

        #append-content #lasting .lc-foot-text strong {
          color: #ffffff !important;
        }

        /* Interaction: Elegant Reveal */
        #append-content #lasting .lc-reveal {
          max-height: 1000px;
          opacity: 1;
          overflow: hidden;
          transition: 
            max-height 0.7s cubic-bezier(0.16, 1, 0.3, 1),
            opacity 0.6s ease,
            margin-top 0.6s ease;
          margin-top: 24px;
        }

        #append-content #lasting .lc.is-collapsed .lc-reveal {
          max-height: 0;
          opacity: 0;
          overflow: hidden;
          margin-top: 0;
          pointer-events: none;
        }

        #append-content #lasting .lc.is-collapsed .lc-foot {
          opacity: 0;
          pointer-events: none;
        }

        #append-content #lasting .lc:not(.is-collapsed):hover .lc-reveal,
        #append-content #lasting .lc:not(.is-collapsed):focus-within .lc-reveal {
          max-height: 1000px;
          opacity: 1;
        }

        #append-content #lasting .lc-title {
          transition: transform 0.5s ease;
          transform: none;
          max-width: 100%;
          font-size: clamp(1.4rem, 1.8vw, 2.1rem);
          line-height: 1.1;
          letter-spacing: -.03em;
          margin-bottom: 12px;
        }

        #append-content #lasting .lc:hover .lc-title {
          transform: none;
        }

        /* Mountain / Stair art layer */
        #append-content #lasting .lc-img-wrap {
          position: absolute;
          inset: 0;
          height: 100%;
          margin-bottom: 0;
          z-index: 0;
          pointer-events: none;
          background: transparent;
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        #append-content #lasting .lc-svg-art {
          display: none;
        }

        #append-content #lasting .lc-img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
          filter: saturate(1.08) contrast(1.06) brightness(.99);
          transform: scale(1.005);
          transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
        }

        #append-content #lasting .lc:hover .lc-img {
          transform: scale(1.03) translateY(-2px);
          filter: saturate(1.12) contrast(1.1) brightness(1);
        }

        #append-content #lasting .lc:hover .lc-img-wrap {
          /* Handled by the bulk rule above */
        }

        #append-content #lasting .lc-img-overlay {
          position: absolute;
          inset: 0;
          background: linear-gradient(180deg, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0.7) 100%);
          z-index: 1;
          transition: background 0.6s ease, backdrop-filter 0.6s ease;
        }

        #append-content #lasting .lc:not(.is-collapsed) .lc-img-overlay,
        #append-content #lasting .lc:hover .lc-img-overlay,
        #append-content #lasting .lc:focus-within .lc-img-overlay {
          background: linear-gradient(180deg, rgba(15, 23, 42, 0.4) 0%, rgba(15, 23, 42, 0.95) 100%);
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
        }

        /* Big year badge in corner */
        #append-content #lasting .lc-year {
          position: absolute;
          left: 20px;
          bottom: 16px;
          font-family: var(--serif);
          font-size: 94px;
          font-weight: 800;
          line-height: 1;
          letter-spacing: -.04em;
          color: transparent;
          -webkit-text-stroke: 1.2px var(--lc-accent, rgba(20, 24, 36, .18));
          opacity: .35;
          pointer-events: none;
          z-index: 2;
          transition: opacity .4s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }

        #append-content #lasting .lc.lc-y1 .lc-year {
          color: transparent;
          -webkit-text-stroke-color: rgba(59, 130, 246, .6);
        }

        #append-content #lasting .lc.lc-y2 .lc-year {
          -webkit-text-stroke-color: rgba(34, 197, 94, .6);
        }

        #append-content #lasting .lc.lc-y3 .lc-year {
          -webkit-text-stroke-color: rgba(212, 160, 23, .7);
        }

        #append-content #lasting .lc:hover .lc-year,
        #append-content #lasting .lc:focus-visible .lc-year {
          opacity: .7;
          transform: translateY(-4px);
        }

        #append-content #lasting .lc-kicker {
          position: absolute;
          left: 24px;
          right: 24px;
          top: 22px;
          font-family: var(--serif);
          font-size: clamp(1.4rem, 1.9vw, 2.2rem);
          font-weight: 600;
          line-height: .82;
          letter-spacing: .14em;
          text-transform: uppercase;
          color: rgba(255, 255, 255, 0.8);
          pointer-events: none;
          z-index: 1;
          text-shadow: 0 4px 12px rgba(0,0,0,0.2);
          transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }

        #append-content #lasting .lc.lc-y1 .lc-kicker {
          color: rgba(147, 197, 253, 0.9) !important;
        }

        #append-content #lasting .lc.lc-y2 .lc-kicker {
          color: rgba(134, 239, 172, 0.9) !important;
        }

        #append-content #lasting .lc.lc-y3 .lc-kicker {
          color: rgba(253, 224, 71, 0.9) !important;
        }


        /* accent rail on top of cards — animated gradient */
        #append-content #lasting .lc-bar {
          height: 3px;
          background-size: 200% 100% !important;
          animation: barShimmer 5s ease-in-out 1 both;
          transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }

        @keyframes barShimmer {
          0% {
            background-position: 0% 50%;
          }

          100% {
            background-position: 100% 50%;
          }
        }

        /* Accommodate the floating cutout object */
        #append-content #lasting .lc-body {
          padding: 40px 32px;
          justify-content: flex-end;
          color: #FFFFFF !important;
          transition: padding 0.7s cubic-bezier(0.16, 1, 0.3, 1);
        }

        #append-content #lasting .lc-phase {
          display: none !important;
        }

        #append-content #lasting .lc-content {
          max-width: 100%;
        }

        #append-content #lasting .lc-desc {
          max-width: 100%;
          font-size: 0.95rem;
          line-height: 1.65;
          color: rgba(255, 255, 255, 0.9) !important;
        }

        #append-content #lasting .lc.is-collapsed .lc-body {
          padding: 24px 20px;
        }

        #append-content #lasting .lc.is-collapsed {
          min-height: 330px;
        }

        #append-content #lasting .lc.is-collapsed .lc-title {
          margin-bottom: 0;
        }

        #append-content #lasting .lc.is-collapsed .lc-content {
          display: flex;
          flex-direction: column;
          gap: 10px;
        }

        #append-content #lasting .lc.is-collapsed .lc-phase {
          margin-bottom: 0;
        }

        #append-content #lasting .lc-toggle-wrap {
          margin-top: 14px;
        }

        #append-content #lasting .lc-toggle {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          padding: 12px 16px;
          border-radius: 999px;
          border: 1px solid rgba(20, 24, 36, .12);
          background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(246, 248, 252, .92));
          color: #0f1624;
          font-family: var(--mono);
          font-size: 10px;
          letter-spacing: .16em;
          text-transform: uppercase;
          font-weight: 800;
          cursor: pointer;
          box-shadow: 0 12px 26px -18px rgba(20, 24, 36, .24);
          transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
        }

        #append-content #lasting .lc-toggle::before {
          content: "+";
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background: linear-gradient(180deg, rgba(59, 130, 246, .12), rgba(34, 197, 94, .12));
          border: 1px solid rgba(20, 24, 36, .08);
          color: #0f1624;
          font-size: 13px;
          line-height: 1;
        }

        #append-content #lasting .lc-toggle:hover,
        #append-content #lasting .lc-toggle:focus-visible {
          transform: translateY(-2px);
          border-color: rgba(20, 24, 36, .18);
          box-shadow: 0 18px 34px -20px rgba(20, 24, 36, .34);
          outline: none;
        }


        /* Respect reduced motion */
        @media (prefers-reduced-motion: reduce) {

          #append-content #lasting *,
          #append-content #lasting *::before,
          #append-content #lasting *::after {
            animation: none !important;
          }
        }



        /* ── How Section Gradient ── */
        body.is-light-mode #append-content #how.s,
        #append-content #how {
          background: linear-gradient(180deg, #0d9488 0%, #064e52 100%) !important;
          color: #FFFFFF !important;
          padding: 120px 0;
          overflow: hidden;
        }

        #append-content #how .h2 {
          color: #FFFFFF !important;
          text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        #append-content #how .ey-b {
          color: rgba(255, 255, 255, 0.85) !important;
        }

        #append-content #how .ey-b::before {
          background: #FFFFFF !important;
        }

        #append-content #how .lead {
          color: rgba(255, 255, 255, 0.9) !important;
          max-width: 720px;
        }

        #append-content #how .ts-n {
          color: rgba(255, 255, 255, 0.12) !important;
        }


        #append-content #how .ts-line {
          background: rgba(255, 255, 255, 0.15) !important;
          height: 100%;
          width: 2px;
          position: relative;
          justify-self: center;
        }

        #append-content #how .ts:last-child .ts-line {
          background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, transparent 100%) !important;
          height: 50px !important;
        }

        #append-content #how .ts-line::before {
          background: #FFFFFF !important;
          box-shadow: 0 0 15px rgba(255, 255, 255, 0.6) !important;
          z-index: 2;
        }

        #append-content #how .ts-title {
          color: #FFFFFF !important;
        }


        #append-content #how .ts-desc {
          color: rgba(255, 255, 255, 0.85) !important;
        }

        #append-content #how .ts-desc strong {
          color: #FFFFFF !important;
        }

        #append-content #how .tout {
          background: rgba(255, 255, 255, 0.08) !important;
          backdrop-filter: blur(8px);
          -webkit-backdrop-filter: blur(8px);
          border: 1px solid rgba(255, 255, 255, 0.2) !important;
        }

        #append-content #how .tout-l {
          color: rgba(255, 255, 255, 0.6) !important;
        }

        #append-content #how .tout-v {
          color: #FFFFFF !important;
        }

        #append-content #how .tout-v strong {
          color: #FFFFFF !important;
        }

        @media (max-width: 768px) {
          #append-content #how {
            padding: 80px 0;
          }
        }






        #append-content .cta-hl {
          font-size: clamp(2.6rem, 6vw, 4.9rem) !important;
          font-weight: 700 !important;
          line-height: 1.01 !important;
          letter-spacing: -0.03em !important;
          margin-bottom: 48px !important;
          max-width: 1040px;
          margin-left: auto;
          margin-right: auto;
          text-transform: none;
        }


        #append-content .cta-i {
          max-width: 100%;
          padding: 0 clamp(24px, 4vw, 64px);
        }

        @media (max-width: 768px) {
          #append-content .cta-hl {
            font-size: clamp(2.6rem, 12vw, 4.8rem) !important;
            margin-bottom: 34px !important;
          }
        }

        /* ── Timeline Scroll Progress ── */

        #append-content #how .ts {
          padding-bottom: 120px !important;
        }

        #append-content #how .ts:last-child {
          padding-bottom: 0 !important;
        }

        @media (max-width: 900px) {
          #append-content #how .ts {
            padding-bottom: 80px !important;
          }
        }

        #append-content .timeline {
          position: relative;
          --line-pos: 119px;
        }


        #append-content .timeline-progress-line,
        #append-content #how .timeline-progress-active {
          position: absolute;
          left: var(--line-pos);
          top: 0;
          bottom: 0;
          width: 4px;
          transform: translateX(-50%);
          z-index: 1;
          border-radius: 4px;
        }

        #append-content .timeline-progress-line {
          background: rgba(255, 255, 255, 0.1);
        }

        #append-content #how .timeline-progress-active {
          height: 0%;
          background: #FFFFFF !important;
          box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
          z-index: 3;
          opacity: 0;
          transition: opacity 0.3s ease;
        }

        #append-content #how .timeline-progress-circle {
          position: absolute;
          left: var(--line-pos);
          top: 0%;
          width: 18px;
          height: 18px;
          background: #FFFFFF !important;
          border-radius: 50%;
          transform: translate(-50%, -50%);
          box-shadow: 0 0 30px rgba(255, 255, 255, 1), 0 0 10px rgba(255, 255, 255, 0.5);
          z-index: 4;
          opacity: 0;
          transition: opacity 0.3s ease;
          pointer-events: none;
        }

        @media (max-width: 900px) {
          #append-content .timeline {
            --line-pos: 67px;
          }
        }

#append-content #lasting .last-panel {
              margin-top: 54px;
              padding: 40px;
              background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .65));
              border: 1px solid rgba(20, 24, 36, .08);
              border-radius: var(--rxl);
              box-shadow: 0 30px 60px -30px rgba(20, 24, 36, .18);
              backdrop-filter: blur(10px);
              position: relative;
              overflow: hidden;
            }

            #append-content #lasting .last-panel::before {
              content: "";
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              height: 3px;
              background: linear-gradient(90deg, #3b82f6, #22c55e, #d4a017);
              background-size: 200% 100%;
              animation: barShimmer 5s ease-in-out infinite;
            }

            #append-content #lasting .last-panel-grid {
              display: grid;
              grid-template-columns: 1fr minmax(0, 1.12fr);
              gap: 34px;
              align-items: center;
            }

            #append-content #lasting .last-panel-ey {
              display: inline-flex;
              align-items: center;
              gap: 6px;
              font-family: var(--mono);
              font-size: 10px;
              letter-spacing: .14em;
              text-transform: uppercase;
              color: #1d4ed8;
              background: rgba(59, 130, 246, .12);
              padding: 6px 12px;
              border-radius: 999px;
              border: 1px solid rgba(59, 130, 246, .22);
            }

            #append-content #lasting .last-panel-mark {
              display: inline-flex;
              align-items: center;
              justify-content: center;
              width: 12px;
              height: 12px;
              color: #1d4ed8;
              flex: 0 0 auto;
            }

            #append-content #lasting .last-panel-mark svg {
              width: 100%;
              height: 100%;
              fill: none;
              stroke: currentColor;
              stroke-width: 1.8;
              stroke-linecap: round;
              stroke-linejoin: round;
            }

            #append-content #lasting .last-panel-h {
              font-family: var(--serif);
              font-size: 1.6rem;
              font-weight: 700;
              color: #0f1624;
              line-height: 1.2;
              letter-spacing: -.02em;
              margin: 14px 0 10px;
            }

            #append-content #lasting .last-panel-meta {
              font-family: var(--mono);
              font-size: 11px;
              letter-spacing: .08em;
              color: #556074;
              text-transform: uppercase;
            }

            #append-content #lasting .last-panel-cards {
              display: none;
            }

            #append-content #lasting .last-panel-carousel {
              display: flex;
              flex-direction: column;
              gap: 14px;
              min-width: 0;
            }

            #append-content #lasting .last-panel-viewport {
              overflow: hidden;
              border-radius: 24px;
              min-height: 214px;
            }

            #append-content #lasting .last-panel-track {
              display: flex;
              will-change: transform;
              transition: transform .72s cubic-bezier(.22, 1, .36, 1);
            }

            #append-content #lasting .last-panel-track .lpcard {
              flex: 0 0 100%;
              min-height: 214px;
              margin: 0;
              box-shadow: 0 18px 40px -24px rgba(20, 24, 36, .28);
            }

            #append-content #lasting .last-panel-carousel-meta {
              display: flex;
              align-items: center;
              justify-content: space-between;
              gap: 16px;
              padding: 0 4px;
            }

            #append-content #lasting .last-panel-carousel-dots {
              display: inline-flex;
              align-items: center;
              gap: 8px;
            }

            #append-content #lasting .lp-dot {
              width: 10px;
              height: 10px;
              padding: 0;
              border-radius: 999px;
              border: 1px solid rgba(20, 24, 36, .16);
              background: rgba(20, 24, 36, .10);
              cursor: pointer;
              transition: transform .2s ease, background .2s ease, border-color .2s ease, width .2s ease;
            }

            #append-content #lasting .lp-dot.is-active {
              width: 28px;
              background: linear-gradient(90deg, #3b82f6, #22c55e, #d4a017);
              border-color: transparent;
            }

            #append-content #lasting .lp-dot:hover,
            #append-content #lasting .lp-dot:focus-visible {
              transform: translateY(-1px);
              outline: none;
            }

            #append-content #lasting .last-panel-carousel-count {
              font-family: var(--mono);
              font-size: 11px;
              letter-spacing: .12em;
              text-transform: uppercase;
              color: #556074;
            }

            #append-content #lasting .lpcard {
              position: relative;
              padding: 18px 18px 20px;
              background: #ffffff;
              border: 1px solid rgba(20, 24, 36, .07);
              border-radius: var(--rl);
              box-shadow: 0 10px 24px -18px rgba(20, 24, 36, .25);
              transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
              overflow: hidden;
            }

            #append-content #lasting .lpcard::before {
              content: "";
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 2px;
              background: var(--lpc-c, #5b9bf8);
              opacity: .7;
            }

            #append-content #lasting .lpcard:hover {
              transform: translateY(-4px);
              border-color: var(--lpc-c, rgba(20, 24, 36, .14));
              box-shadow: 0 20px 40px -20px rgba(20, 24, 36, .28);
            }

            #append-content #lasting .lpc-blue {
              --lpc-c: #3b82f6;
            }

            #append-content #lasting .lpc-green {
              --lpc-c: #22c55e;
            }

            #append-content #lasting .lpc-amber {
              --lpc-c: #d4a017;
            }

            #append-content #lasting .lpc-purple {
              --lpc-c: #a78bfa;
            }

            #append-content #lasting .lpc-ico {
              display: inline-flex;
              align-items: center;
              justify-content: center;
              width: 32px;
              height: 32px;
              border-radius: 10px;
              background: color-mix(in srgb, var(--lpc-c) 14%, white);
              margin-bottom: 10px;
              color: var(--lpc-c);
            }

            #append-content #lasting .lpc-ico svg {
              width: 18px;
              height: 18px;
              fill: none;
              stroke: currentColor;
              stroke-width: 1.7;
              stroke-linecap: round;
              stroke-linejoin: round;
            }

            #append-content #lasting .lpc-t {
              font-size: 13px;
              font-weight: 700;
              color: #0f1624;
              margin-bottom: 6px;
              letter-spacing: -.01em;
            }

            #append-content #lasting .lpc-d {
              font-size: .8rem;
              color: #455068;
              line-height: 1.6;
            }

            @media (max-width: 820px) {
              #append-content #lasting .last-panel-grid {
                grid-template-columns: 1fr;
                gap: 24px;
              }

              #append-content #lasting .last-panel-viewport {
                min-height: 194px;
              }

              #append-content #lasting .last-panel-track .lpcard {
                min-height: 194px;
              }

              #append-content #lasting .last-panel-carousel-meta {
                flex-wrap: wrap;
              }
            }

#append-content .story-trigger-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 18px;
        }

        #append-content .story-trigger {
          position: relative;
          overflow: hidden;
          min-height: 220px;
          padding: 26px 26px 24px;
          border-radius: 34px;
          border: 1px solid rgba(255, 255, 255, .08);
          background:
            radial-gradient(circle at 82% 24%, rgba(255, 255, 255, .08), transparent 18%),
            linear-gradient(180deg, rgba(8, 12, 20, .9), rgba(7, 11, 18, .95)),
            var(--ink2);
          box-shadow: 0 22px 60px rgba(0, 0, 0, .18);
          text-align: left;
          cursor: pointer;
          transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
        }

        #append-content .story-trigger:hover,
        #append-content .story-trigger:focus-visible {
          transform: translateY(-6px);
          border-color: rgba(255, 255, 255, .16);
          box-shadow: 0 30px 72px rgba(0, 0, 0, .28);
          outline: none;
        }

        #append-content .story-trigger::before {
          content: "";
          position: absolute;
          inset: 1px;
          border-radius: inherit;
          pointer-events: none;
          border: 1px solid rgba(255, 255, 255, .04);
        }

        #append-content .story-trigger::after {
          content: "";
          position: absolute;
          inset: auto -6% -22% auto;
          width: 54%;
          aspect-ratio: 1;
          border-radius: 50%;
          background: radial-gradient(circle, var(--story-glow, rgba(91, 155, 248, .22)) 0%, transparent 70%);
          filter: blur(24px);
          pointer-events: none;
        }

        #append-content .story-trigger.story-traps {
          --story-glow: rgba(248, 113, 113, .22);
        }

        #append-content .story-trigger.story-proof {
          --story-glow: rgba(91, 155, 248, .24);
        }

        #append-content .story-trigger-inner {
          position: relative;
          z-index: 1;
          max-width: 420px;
        }

        #append-content .story-kicker {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 14px;
          font-family: var(--mono);
          font-size: 10px;
          letter-spacing: .15em;
          text-transform: uppercase;
          color: var(--story-color, var(--blue-l));
        }

        #append-content .story-kicker::before {
          content: "";
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: currentColor;
          box-shadow: 0 0 16px currentColor;
        }

        #append-content .story-trigger h2 {
          margin: 0 0 12px;
        }

        #append-content .story-trigger p {
          color: var(--mid);
          max-width: 35ch;
        }

        #append-content .story-open {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          margin-top: 18px;
          font-family: var(--mono);
          font-size: 10px;
          letter-spacing: .16em;
          text-transform: uppercase;
          color: var(--text);
        }

        #append-content .story-open::after {
          content: "+";
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 22px;
          height: 22px;
          border-radius: 50%;
          border: 1px solid currentColor;
          font-size: 13px;
          line-height: 1;
        }

        #append-content .story-shape {
          position: absolute;
          right: 20px;
          bottom: 16px;
          width: 160px;
          height: 110px;
          opacity: .75;
          pointer-events: none;
        }

        #append-content .story-shape svg {
          width: 100%;
          height: 100%;
        }

        #append-content .story-traps .story-shape {
          color: rgba(248, 113, 113, .6);
        }

        #append-content .story-proof .story-shape {
          color: rgba(91, 155, 248, .62);
        }

        #append-content .story-shape path,
        #append-content .story-shape circle {
          fill: none;
          stroke: currentColor;
          stroke-width: 1.5;
          stroke-linecap: round;
          stroke-linejoin: round;
        }

        #append-content .story-modal {
          position: fixed;
          inset: 0;
          display: grid;
          place-items: center;
          padding: 30px;
          background: rgba(3, 8, 17, .62);
          backdrop-filter: blur(16px);
          opacity: 0;
          visibility: hidden;
          pointer-events: none;
          transition: opacity .24s ease, visibility .24s ease;
          z-index: 120;
        }

        #append-content .story-modal.is-open {
          opacity: 1;
          visibility: visible;
          pointer-events: auto;
        }

        #append-content .story-modal-panel {
          position: relative;
          width: min(1120px, calc(100vw - (var(--page-gutter) * 2)));
          max-height: min(calc(var(--viewport-h) - 40px), 920px);
          overflow: auto;
          padding: 42px;
          border-radius: var(--card-radius-lg);
          border: 1px solid rgba(15, 23, 42, .08);
          background: #FFFFFF;
          box-shadow: 0 60px 120px -20px rgba(15, 23, 42, .12);
          color: #0f172a;
        }

        #append-content .story-modal-panel::-webkit-scrollbar {
          width: 10px;
        }

        #append-content .story-modal-panel::-webkit-scrollbar-thumb {
          background: rgba(15, 23, 42, .12);
          border-radius: 999px;
        }

        #append-content .story-modal-top {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          gap: 18px;
          margin-bottom: 24px;
        }

        #append-content .story-modal-top .lead {
          max-width: 640px;
        }

        #append-content .story-close {
          flex: 0 0 auto;
          width: 44px;
          height: 44px;
          border-radius: 50%;
          border: 1px solid rgba(15, 23, 42, .08);
          background: #f8fafc;
          color: #0f172a;
          font-size: 24px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all .2s ease;
        }

        #append-content .story-close:hover {
          background: #f1f5f9;
          border-color: rgba(15, 23, 42, .18);
          transform: rotate(90deg);
        }

        #append-content .story-modal-top .h2 {
          color: #0f172a;
        }

        #append-content .story-modal-top .lead {
          color: #475569;
        }

        body.modal-open {
          overflow: hidden;
        }

        @media (max-width: 920px) {
          #append-content .story-trigger-grid {
            grid-template-columns: 1fr;
          }

          #append-content .story-modal-top {
            flex-direction: column;
          }
        }

        @media (max-width: 640px) {
          #append-content .story-trigger {
            min-height: 200px;
            border-radius: 26px;
            padding: 22px 22px 20px;
          }

          #append-content .story-shape {
            width: 120px;
            height: 88px;
          }

          #append-content .story-modal {
            padding: 16px;
          }

          #append-content .story-modal-panel {
            width: min(100vw - 18px, 1120px);
            max-height: 90vh;
            padding: 20px;
            border-radius: 22px;
          }
        }

        @media (max-width: 900px) {
          #append-content #lasting .lasting-heartbeat {
            display: block !important;
            width: 100% !important;
            max-width: 100% !important;
            margin: 10px 0 24px !important;
            padding: 14px 18px !important;
            border-radius: 20px !important;
            box-sizing: border-box !important;
          }

          #append-content #lasting .lasting-heartbeat svg,
          #append-content #lasting .lasting-heartbeat .hb-dot {
            display: none !important;
          }

          #append-content #lasting .lasting-heartbeat .hb-text {
            display: block !important;
            width: 100% !important;
            max-width: 100% !important;
            font-size: 10px !important;
            line-height: 1.45 !important;
            letter-spacing: .12em !important;
            text-align: left !important;
            white-space: normal !important;
            overflow-wrap: anywhere !important;
            text-wrap: balance;
          }

          #append-content #lasting .lasting-grid {
            padding-top: 20px !important;
            padding-inline: 0 !important;
            overflow: visible !important;
          }

          #append-content #lasting .lasting-grid::before,
          #append-content #lasting .lasting-rail {
            display: none !important;
          }

          #append-content #lasting .lc-container {
            display: flex !important;
            flex-direction: column !important;
            gap: 16px !important;
            width: 100% !important;
            max-width: none !important;
            margin: 0 !important;
            padding: 0 var(--page-gutter) 20px !important;
            overflow: visible !important;
          }

          #append-content #lasting .lc,
          #append-content #lasting .lc.lc-y1,
          #append-content #lasting .lc.lc-y2,
          #append-content #lasting .lc.lc-y3 {
            grid-column: auto !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: none !important;
            margin: 0 !important;
            transform: none !important;
          }
        }