/* ===== attribution page. Dark theme first, html.light overrides follow each block. */
    .ma-hero { position: relative; overflow: hidden; padding: 128px 0 72px; }
    .ma-h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; color: #FFFFFF; margin: 6px 0 18px; text-wrap: balance; }
    .ma-sub { font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 600; line-height: 1.4; margin-bottom: 18px;
              background: linear-gradient(135deg, #C084FC 0%, #A78BFA 45%, #22D3EE 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
    .ma-body { color: #C8BED8; font-size: 1.05rem; line-height: 1.8; max-width: 62ch; }
    .ma-proof { display: flex; gap: 14px; align-items: flex-start; margin-top: 22px; padding: 14px 18px; max-width: 62ch;
                border-radius: 14px; background: rgba(124,58,237,0.10); border: 1px solid rgba(167,139,250,0.28); }
    .ma-proof p { color: #F5F5F5; font-weight: 600; line-height: 1.55; font-size: 0.95rem; }
    .ma-proof a { color: #C4B5FD; white-space: nowrap; font-weight: 600; }
    .ma-proof-ic { color: #C084FC; flex-shrink: 0; margin-top: 2px; }
    .ma-hero .btn-primary svg { margin-left: 2px; }
    .ma-hero-art { max-width: 540px; margin: 0 auto; }

    /* explainer video */
    .ma-video { margin: 0; max-width: 960px; border-radius: 16px; overflow: hidden; background: #0d1511;
                border: 1px solid rgba(167,139,250,0.22); box-shadow: 0 18px 50px rgba(0,0,0,0.35); }
    .ma-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #0d1511; }
    .ma-video figcaption { padding: 10px 16px; font-size: 0.82rem; color: #A99FBB; background: #120F18; }
    .ma-video figcaption a { color: #C4B5FD; text-decoration: underline; }
    .ma-yt { position: relative; aspect-ratio: 16 / 9; background: #0d1511; }
    .ma-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
    .ma-yt-play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: none; }
    .ma-yt-play img { display: block; width: 100%; height: 100%; object-fit: cover; }
    .ma-yt-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: transform .2s; filter: drop-shadow(0 4px 14px rgba(0,0,0,.35)); }
    .ma-yt-play:hover .ma-yt-icon, .ma-yt-play:focus-visible .ma-yt-icon { transform: translate(-50%, -50%) scale(1.1); }
    .ma-yt-play:focus-visible { outline: 3px solid #A78BFA; outline-offset: -3px; }
    .ma-transcript { max-width: 960px; margin-top: 14px; }
    .ma-transcript summary { cursor: pointer; font-weight: 600; color: #C4B5FD; }
    .ma-transcript div { margin-top: 10px; color: #C8BED8; line-height: 1.7; }
    .ma-transcript p + p { margin-top: 8px; }
    html.light .ma-video { border-color: #ECE9F5; box-shadow: 0 10px 30px rgba(17,24,39,0.08); }
    html.light .ma-video figcaption { color: #6B7280; background: #F8F7FE; }
    html.light .ma-video figcaption a { color: #6D28D9; }
    html.light .ma-transcript summary { color: #6D28D9; }
    html.light .ma-transcript div { color: #374151; }
    html.light .ma-h1 { color: #111827; }
    html.light .ma-sub { background: linear-gradient(135deg, #9333EA 0%, #7C3AED 45%, #0891B2 100%); -webkit-background-clip: text; background-clip: text; }
    html.light .ma-body { color: #374151; }
    html.light .ma-proof { background: rgba(124,58,237,0.06); border-color: rgba(124,58,237,0.22); }
    html.light .ma-proof p { color: #111827; } html.light .ma-proof a { color: #6D28D9; } html.light .ma-proof-ic { color: #7C3AED; }

    /* hero constellation */
    .cn-ring { fill: none; stroke: rgba(167,139,250,0.14); stroke-width: 1; stroke-dasharray: 3 6; }
    .cn-ring-2 { stroke: rgba(34,211,238,0.14); }
    .cn-link { stroke-linecap: round; opacity: 0.55; stroke-dasharray: 1 0; }
    .cn-link-on { stroke: #A78BFA; } .cn-link-off { stroke: #22D3EE; }
    .cn-glow { fill: rgba(147,51,234,0.22); }
    .cn-node { stroke-width: 1.2; }
    .cn-node-on { fill: #171222; stroke: rgba(167,139,250,0.55); } .cn-node-off { fill: #0F1A1F; stroke: rgba(34,211,238,0.55); }
    .cn-ic-on { stroke: #C4B5FD; } .cn-ic-off { stroke: #67E8F9; } .cn-ic-w { stroke: #FFFFFF; }
    .cn-new { fill: #22D3EE; }
    @media (prefers-reduced-motion: no-preference) {
      .cn-link { stroke-dasharray: 2 7; animation: ma-flow 2.4s linear infinite; }
      @keyframes ma-flow { to { stroke-dashoffset: -27; } }
    }
    html.light .cn-node-on { fill: #FFFFFF; stroke: rgba(124,58,237,0.45); } html.light .cn-node-off { fill: #FFFFFF; stroke: rgba(8,145,178,0.5); }
    html.light .cn-ic-on { stroke: #7C3AED; } html.light .cn-ic-off { stroke: #0891B2; }
    html.light .cn-link-on { stroke: #8B5CF6; } html.light .cn-link-off { stroke: #06B6D4; }
    html.light .cn-glow { fill: rgba(147,51,234,0.14); } html.light .cn-new { fill: #0891B2; }

    /* sticky in-page nav */
    .ma-subnav { position: sticky; top: 55px; z-index: 40; background: rgba(12,10,15,0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
                 border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); }
    .subnav-track { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0; scrollbar-width: none; }
    .subnav-track::-webkit-scrollbar { display: none; }
    .subnav-link { flex-shrink: 0; padding: 6px 14px; border-radius: 999px; font-size: 0.82rem; font-weight: 500; color: #A09AB8; text-decoration: none;
                   border: 1px solid transparent; transition: color 0.2s, background 0.2s, border-color 0.2s; }
    .subnav-link:hover { color: #FFFFFF; background: rgba(255,255,255,0.05); }
    .subnav-link.is-active { color: #FFFFFF; background: rgba(124,58,237,0.22); border-color: rgba(167,139,250,0.45); }
    html.light .ma-subnav { background: rgba(255,255,255,0.92); border-color: #EEEBF6; }
    html.light .subnav-link { color: #4B5563; } html.light .subnav-link:hover { color: #111827; background: rgba(124,58,237,0.06); }
    html.light .subnav-link.is-active { color: #6D28D9; background: rgba(124,58,237,0.10); border-color: rgba(124,58,237,0.3); }
    .ma-sec[id] { scroll-margin-top: 120px; }

    /* section scaffolding */
    .sec-h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; color: #FFFFFF; margin-top: 4px; text-wrap: balance; }
    .sec-lead { margin-top: 14px; font-size: 1.08rem; line-height: 1.8; color: #C8BED8; }
    .sec-module .sec-lead { color: #C4B5FD; font-weight: 600; }
    .sub-h3 { font-size: 1.3rem; font-weight: 700; color: #FFFFFF; margin: 56px 0 20px; }
    .sub-h3.mt-0 { margin-top: 0; }
    .mini-h { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #A78BFA; margin: 28px 0 12px; }
    .muted { color: #A0A0B0; line-height: 1.75; }
    .story { font-size: 1.08rem; line-height: 1.9; color: #C8BED8; }
    .fig-cap, .fig-note { font-size: 0.85rem; color: #9CA3AF; margin-top: 12px; line-height: 1.6; }
    .fig-cap { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
    .ma-card { background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.09); border-radius: 20px; }
    html.light .sec-h2, html.light .sub-h3 { color: #111827; } html.light .sec-lead, html.light .story { color: #374151; }
    html.light .sec-module .sec-lead { color: #6D28D9; } html.light .mini-h { color: #7C3AED; }
    html.light .muted { color: #4B5563; } html.light .fig-cap, html.light .fig-note { color: #6B7280; }
    html.light .ma-card { background: #FFFFFF; border-color: rgba(124,58,237,0.12); box-shadow: 0 2px 16px rgba(124,58,237,0.05); }

    /* diagrams */
    .dg-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    .dg-wrap:focus-visible, .journey-scroll:focus-visible, .article-table-wrap:focus-visible { outline: 2px solid #A78BFA; outline-offset: 2px; }
    main .grid > * { min-width: 0; }
    .dg { display: block; width: 100%; height: auto; font-family: 'Inter', system-ui, sans-serif; }
    .dg-wide .dg { min-width: 760px; } .dg-mid .dg { min-width: 520px; }
    .dg-t { fill: #E5E7EB; } .dg-m { fill: #9CA3AF; } .dg-w { fill: #FFFFFF; } .dg-acc-t { fill: #C4B5FD; } .dg-acc2-t { fill: #67E8F9; }
    .dg-box { fill: rgba(255,255,255,0.04); stroke: rgba(255,255,255,0.16); }
    .dg-box-strong { fill: rgba(124,58,237,0.14); stroke: rgba(167,139,250,0.45); }
    .dg-box-cyan { fill: rgba(6,182,212,0.10); stroke: rgba(34,211,238,0.45); }
    .dg-group { fill: rgba(124,58,237,0.04); stroke: rgba(167,139,250,0.55); stroke-width: 1.5; stroke-dasharray: 6 5; }
    .dg-group-2 { fill: rgba(6,182,212,0.04); stroke: rgba(34,211,238,0.55); }
    .dg-flow { stroke: #A78BFA; stroke-width: 2; fill: none; } .dg-arrowhead { fill: #A78BFA; }
    .dg-axis { stroke: rgba(255,255,255,0.18); stroke-width: 1; } .dg-axis-strong { stroke: rgba(255,255,255,0.4); stroke-width: 2; }
    .dg-bar-a { fill: #6B7280; } .dg-zebra { fill: rgba(255,255,255,0.025); }
    .dg-dot { fill: #A78BFA; } .dg-dot-ext { fill: #22D3EE; }
    .dg-pitch { fill: rgba(124,58,237,0.06); stroke: rgba(167,139,250,0.30); } .dg-stripe { fill: rgba(167,139,250,0.035); }
    .dg-pitchline { stroke: rgba(167,139,250,0.24); stroke-width: 1.5; } .dg-goal { fill: #C4B5FD; }
    .dg-player { stroke: #C4B5FD; stroke-width: 2; } .dg-player-halo { fill: rgba(167,139,250,0.18); }
    .dg-pass { stroke: #22D3EE; stroke-width: 2.4; stroke-dasharray: 7 5; } .dg-arrowhead-pass { fill: #22D3EE; }
    .dg-board { fill: rgba(124,58,237,0.14); stroke: rgba(167,139,250,0.35); }
    .dg-window { fill: rgba(124,58,237,0.30); } .dg-forecast { fill: rgba(6,182,212,0.25); }
    .dg-forecast-mid { stroke: #22D3EE; stroke-width: 2; stroke-dasharray: 5 4; }
    html.light .dg-forecast-mid { stroke: #0891B2; }
    .dg-today { stroke: #F5F5F5; stroke-width: 2; } .dg-today-dot { fill: #F5F5F5; }
    .dg-baseline { fill: none; stroke: #9CA3AF; stroke-width: 1.6; stroke-dasharray: 5 5; }
    .dg-actual { fill: none; stroke: #C4B5FD; stroke-width: 2.4; stroke-linejoin: round; }
    .dg-spotline { stroke: rgba(34,211,238,0.5); stroke-width: 1.2; stroke-dasharray: 3 4; }
    html.light .dg-t { fill: #1F2937; } html.light .dg-m { fill: #4B5563; } html.light .dg-acc-t { fill: #6D28D9; } html.light .dg-acc2-t { fill: #0E7490; }
    html.light .dg-box { fill: #FFFFFF; stroke: rgba(0,0,0,0.14); }
    html.light .dg-box-strong { fill: rgba(124,58,237,0.07); stroke: rgba(124,58,237,0.40); }
    html.light .dg-box-cyan { fill: rgba(6,182,212,0.07); stroke: rgba(8,145,178,0.45); }
    html.light .dg-group { stroke: rgba(124,58,237,0.5); } html.light .dg-group-2 { stroke: rgba(8,145,178,0.5); }
    html.light .dg-flow { stroke: #7C3AED; } html.light .dg-arrowhead { fill: #7C3AED; }
    html.light .dg-axis { stroke: rgba(0,0,0,0.16); } html.light .dg-axis-strong { stroke: rgba(0,0,0,0.4); }
    html.light .dg-bar-a { fill: #9CA3AF; } html.light .dg-zebra { fill: rgba(124,58,237,0.035); }
    html.light .dg-dot { fill: #7C3AED; } html.light .dg-dot-ext { fill: #0891B2; }
    html.light .dg-pitch { fill: rgba(124,58,237,0.05); stroke: rgba(124,58,237,0.25); } html.light .dg-stripe { fill: rgba(124,58,237,0.03); }
    html.light .dg-pitchline { stroke: rgba(124,58,237,0.22); } html.light .dg-goal { fill: #6D28D9; }
    html.light .dg-player { stroke: #EDE9FE; } html.light .dg-player-halo { fill: rgba(124,58,237,0.12); }
    html.light .dg-pass { stroke: #0891B2; } html.light .dg-arrowhead-pass { fill: #0891B2; }
    html.light .dg-board { fill: #FFFFFF; stroke: rgba(124,58,237,0.25); }
    html.light .dg-window { fill: rgba(124,58,237,0.16); } html.light .dg-forecast { fill: rgba(6,182,212,0.18); }
    html.light .dg-today { stroke: #111827; } html.light .dg-today-dot { fill: #111827; }
    html.light .dg-actual { stroke: #7C3AED; } html.light .dg-baseline { stroke: #6B7280; }

    /* journey phases */
    .journey-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
    .lg { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; }
    .lg-on { color: #C4B5FD; background: rgba(124,58,237,0.14); } .lg-off { color: #67E8F9; background: rgba(6,182,212,0.12); }
    .lg-ai { color: #FFFFFF; background: linear-gradient(135deg, #7C3AED, #06B6D4); }
    .journey-scroll { overflow-x: auto; padding-bottom: 6px; }
    .journey-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
    .phase { border-radius: 18px; padding: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); }
    .phase-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; color: #fff; font-weight: 700; font-size: 0.95rem;
                  background: linear-gradient(135deg, #9333EA, #6366F1); margin-bottom: 12px; }
    .phase:nth-child(2) .phase-head { background: linear-gradient(135deg, #8B5CF6, #6366F1); }
    .phase:nth-child(3) .phase-head { background: linear-gradient(135deg, #7C3AED, #4F46E5); }
    .phase:nth-child(4) .phase-head { background: linear-gradient(135deg, #6D28D9, #4338CA); }
    .phase:nth-child(5) .phase-head { background: linear-gradient(135deg, #5B21B6, #3730A3); }
    .phase-num { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.22); display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; }
    .phase-list { list-style: none; display: flex; flex-direction: column; gap: 7px; }
    .tp { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; font-size: 0.82rem; font-weight: 500; line-height: 1.3; color: #E5E7EB; }
    .tp-ic { flex-shrink: 0; }
    .tp-on { background: rgba(124,58,237,0.10); } .tp-on .tp-ic { color: #C4B5FD; }
    .tp-off { background: rgba(6,182,212,0.09); } .tp-off .tp-ic { color: #67E8F9; }
    .tp-ai { background: linear-gradient(135deg, rgba(124,58,237,0.28), rgba(6,182,212,0.22)); border: 1px solid rgba(167,139,250,0.5); color: #FFFFFF; font-weight: 600; }
    .tp-ai .tp-ic { color: #FFFFFF; }
    .tp-new { margin-left: auto; flex-shrink: 0; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px;
              color: #0C0A0F; background: #22D3EE; }
    .tp-new-lg { display: inline-block; margin: 0 0 8px; font-size: 0.68rem; }
    html.light .phase { background: #FFFFFF; border-color: rgba(124,58,237,0.12); }
    html.light .tp { color: #1F2937; } html.light .tp-on { background: rgba(124,58,237,0.07); } html.light .tp-on .tp-ic { color: #7C3AED; }
    html.light .tp-off { background: rgba(6,182,212,0.08); } html.light .tp-off .tp-ic { color: #0E7490; }
    html.light .tp-ai { color: #3B0764; border-color: rgba(124,58,237,0.4); background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(6,182,212,0.12)); }
    html.light .tp-ai .tp-ic { color: #6D28D9; }
    html.light .lg-on { color: #6D28D9; background: rgba(124,58,237,0.08); } html.light .lg-off { color: #0E7490; background: rgba(6,182,212,0.10); }
    html.light .tp-new { color: #FFFFFF; background: #0891B2; }

    /* AI card */
    .ai-card { display: flex; gap: 20px; margin-top: 28px; padding: 26px 28px; border-radius: 22px; position: relative; overflow: hidden;
               background: linear-gradient(135deg, rgba(124,58,237,0.16), rgba(6,182,212,0.10)); border: 1px solid rgba(167,139,250,0.35); }
    .ai-card-ic { flex-shrink: 0; width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #fff;
                  background: linear-gradient(135deg, #9333EA, #06B6D4); box-shadow: 0 8px 28px rgba(124,58,237,0.35); }
    .ai-card h3 { font-size: 1.25rem; font-weight: 700; color: #FFFFFF; margin-bottom: 8px; }
    .ai-card p { color: #C8BED8; line-height: 1.75; }
    .ai-card .ai-do { margin-top: 14px; font-weight: 700; color: #F5F5F5; font-size: 0.9rem; }
    .ai-card ul { list-style: none; margin-top: 8px; display: grid; gap: 8px; }
    .ai-card li { display: flex; gap: 10px; color: #D1D5DB; line-height: 1.6; font-size: 0.93rem; }
    .ai-tick { color: #22D3EE; flex-shrink: 0; margin-top: 3px; }
    html.light .ai-card { background: linear-gradient(135deg, rgba(124,58,237,0.07), rgba(6,182,212,0.07)); border-color: rgba(124,58,237,0.22); }
    html.light .ai-card h3, html.light .ai-card .ai-do { color: #111827; } html.light .ai-card p, html.light .ai-card li { color: #374151; }
    html.light .ai-tick { color: #0891B2; }
    @media (max-width: 640px) { .ai-card { flex-direction: column; padding: 22px; } }

    /* team play */
    .role-card { padding: 22px; border-radius: 18px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.09); }
    .role-icons { display: flex; gap: 6px; margin-bottom: 14px; }
    .role-icons span { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #C4B5FD; background: rgba(124,58,237,0.14); }
    .role-name { font-size: 1.15rem; font-weight: 800; color: #FFFFFF; }
    .role-kind { font-size: 0.85rem; font-weight: 600; color: #A78BFA; margin-bottom: 8px; }
    .role-card p { font-size: 0.9rem; color: #A0A0B0; line-height: 1.7; }
    .big-msg { margin-top: 34px; text-align: center; font-size: clamp(1.25rem, 2.4vw, 1.7rem); font-weight: 800; letter-spacing: -0.02em; color: #FFFFFF; text-wrap: balance; }
    html.light .role-card { background: #FFFFFF; border-color: rgba(124,58,237,0.12); }
    html.light .role-icons span { color: #7C3AED; background: rgba(124,58,237,0.08); }
    html.light .role-name, html.light .big-msg { color: #111827; } html.light .role-kind { color: #7C3AED; } html.light .role-card p { color: #4B5563; }

    /* model switcher */
    .model-switch { padding: 22px; }
    .mtabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
    .mtab { padding: 8px 16px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; color: #C8BED8; background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.12); cursor: pointer; transition: all 0.2s; font-family: inherit; }
    .mtab:hover { border-color: rgba(167,139,250,0.5); color: #FFFFFF; }
    .mtab[aria-selected="true"] { color: #FFFFFF; background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.35); }
    .mtab-ours { border-color: rgba(167,139,250,0.5); color: #C4B5FD; }
    .mtab-ours[aria-selected="true"] { background: linear-gradient(135deg, #9333EA, #6366F1); border-color: transparent; color: #FFFFFF; }
    .mtab:focus-visible { outline: 2px solid #A78BFA; outline-offset: 2px; }
    .mpanel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
    .mpanel-head h3 { font-size: 1.2rem; font-weight: 700; color: #FFFFFF; }
    .mbadge { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; color: #9CA3AF; border: 1px solid rgba(255,255,255,0.18); }
    .mbadge-ours { color: #FFFFFF; border-color: transparent; background: linear-gradient(135deg, #7C3AED, #06B6D4); }
    .crows { display: grid; gap: 10px; }
    .crow { display: grid; grid-template-columns: minmax(130px, 190px) 1fr 58px; gap: 14px; align-items: center; }
    .crow-lab { display: flex; align-items: center; gap: 9px; font-size: 0.9rem; font-weight: 600; color: #E5E7EB; }
    .crow-ic { color: #C4B5FD; flex-shrink: 0; }
    .crow-bar { height: 14px; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden; }
    .crow-bar span { display: block; height: 100%; border-radius: 999px; transition: width 0.45s cubic-bezier(.4,0,.2,1); }
    .bar-rule { background: #6B7280; } .bar-ours { background: linear-gradient(90deg, #9333EA, #6366F1, #22D3EE); }
    .crow-val { text-align: right; font-weight: 700; font-size: 0.9rem; color: #F5F5F5; font-variant-numeric: tabular-nums; }
    .mdesc { margin-top: 16px; color: #A0A0B0; line-height: 1.7; font-size: 0.95rem; }
    .mpanel[hidden] { display: none; }
    html.light .mtab { color: #374151; background: #FFFFFF; border-color: rgba(0,0,0,0.12); }
    html.light .mtab:hover { color: #111827; border-color: rgba(124,58,237,0.4); }
    html.light .mtab[aria-selected="true"] { color: #111827; background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.3); }
    html.light .mtab-ours { color: #6D28D9; border-color: rgba(124,58,237,0.4); }
    html.light .mtab-ours[aria-selected="true"] { color: #FFFFFF; }
    html.light .mpanel-head h3 { color: #111827; } html.light .mbadge { color: #6B7280; border-color: rgba(0,0,0,0.15); }
    html.light .crow-lab { color: #1F2937; } html.light .crow-ic { color: #7C3AED; } html.light .crow-bar { background: rgba(0,0,0,0.06); }
    html.light .bar-rule { background: #9CA3AF; } html.light .crow-val { color: #111827; } html.light .mdesc { color: #4B5563; }
    @media (max-width: 520px) { .crow { grid-template-columns: 1fr 52px; } .crow-lab { grid-column: 1 / -1; } }

    /* credit split: one stacked bar per model, same colours per touchpoint, no clicks needed */
    .sb-wrap { padding: 22px; }
    .sg-tv2 { background: #0891B2; } .sg-display2 { background: #A855F7; } .sg-seo2 { background: #6366F1; } .sg-sea2 { background: #7C3AED; } .sg-direct2 { background: #475569; }
    .sb-journey { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 18px; margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.08); }
    .sb-jh { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #9CA3AF; margin-right: 6px; }
    .sbj { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 10px; color: #FFFFFF; font-size: 0.84rem; font-weight: 700; }
    .sbj-nc { font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 6px; border-radius: 999px; background: rgba(0,0,0,0.25); }
    .sbj-order { background: transparent; color: #E5E7EB; border: 1px solid rgba(255,255,255,0.2); }
    .sbj-arrow { color: #6B7280; font-weight: 700; }
    .sb-rows { display: grid; gap: 4px; }
    .sb-row { display: grid; grid-template-columns: minmax(170px, 230px) 150px 1fr; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 14px; }
    .sb-name { font-weight: 700; color: #F5F5F5; font-size: 0.95rem; margin-right: 8px; }
    .sb-short { display: block; font-size: 0.78rem; color: #9CA3AF; margin-top: 2px; }
    .sb-tv { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 700; padding: 5px 9px; border-radius: 8px; white-space: nowrap; }
    .sb-tv-miss { color: #9CA3AF; border: 1px dashed rgba(156,163,175,0.5); }
    .sb-tv-hit { color: #FFFFFF; background: #0891B2; }
    .sb-bar { display: flex; height: 38px; border-radius: 9px; overflow: hidden; gap: 2px; }
    .sbs { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding: 0 6px; color: #FFFFFF; white-space: nowrap; overflow: hidden; }
    .sbs b { font-size: 0.8rem; font-weight: 800; }
    .sbs span { font-size: 0.8rem; font-weight: 600; opacity: 0.92; }
    .sb-ours { margin-top: 10px; padding: 14px 12px; background: linear-gradient(90deg, rgba(124,58,237,0.16), rgba(6,182,212,0.10)); border: 1px solid rgba(167,139,250,0.45); }
    .sb-ours .sb-name { font-size: 1.1rem; }
    .sb-ours .sb-short { color: #C4B5FD; font-weight: 600; }
    .sb-ours .sb-bar { height: 44px; }
    .sb-badge { display: inline-block; vertical-align: 2px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
                color: #FFFFFF !important; background: #7C3AED; }
    html.light .sb-journey { border-bottom-color: #EEEBF6; }
    html.light .sbj-order { color: #1F2937; border-color: #D9D4E8; }
    html.light .sb-name { color: #111827; } html.light .sb-short { color: #6B7280; }
    html.light .sb-tv-miss { color: #6B7280; border-color: #C9C4D9; }
    html.light .sb-ours { background: linear-gradient(90deg, rgba(124,58,237,0.08), rgba(6,182,212,0.06)); border-color: rgba(124,58,237,0.3); }
    html.light .sb-ours .sb-short { color: #6D28D9; }
    .sbs { min-width: 88px; }
    @media (max-width: 1100px) {
      .sb-row { grid-template-columns: 1fr auto; gap: 8px 10px; }
      /* below desktop: labelled chips instead of slivers too thin to read */
      .sb-bar, .sb-ours .sb-bar { grid-column: 1 / -1; height: auto; flex-wrap: wrap; gap: 6px; border-radius: 0; overflow: visible; }
      .sbs { width: auto !important; min-width: 0; flex-direction: row; gap: 5px; padding: 6px 10px; border-radius: 8px; }
      .sbs b, .sbs span { font-size: 0.78rem; }
    }

    /* eCommerce priorities */
    .cn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .cn-card { display: flex; flex-direction: column; padding: 22px; border-radius: 20px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.09); }
    .cn-ic { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 14px;
             background: linear-gradient(135deg, #9333EA, #6366F1); }
    .cn-card h3 { font-size: 1.08rem; font-weight: 800; color: #FFFFFF; line-height: 1.35; margin-bottom: 6px; }
    .cn-prob { color: #A0A0B0; font-size: 0.9rem; line-height: 1.6; margin-bottom: 14px; }
    .cn-ans { margin-top: auto; padding: 12px 14px; border-radius: 12px; background: rgba(6,182,212,0.08); border-left: 3px solid #22D3EE; }
    .cn-lab { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #67E8F9; margin-bottom: 4px; }
    .cn-ans p { color: #F5F5F5; font-weight: 600; font-size: 0.9rem; line-height: 1.55; }
    html.light .cn-card { background: #FFFFFF; border-color: #ECE9F5; } html.light .cn-card h3 { color: #111827; } html.light .cn-prob { color: #4B5563; }
    html.light .cn-ans { background: rgba(6,182,212,0.06); border-left-color: #0891B2; } html.light .cn-lab { color: #0E7490; } html.light .cn-ans p { color: #111827; }
    @media (max-width: 1023px) { .cn-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 640px) { .cn-grid { grid-template-columns: 1fr; } }

    /* results, fit, founder, CTA points, article */
    .pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .pf-card { padding: 24px; border-radius: 20px; background: linear-gradient(160deg, rgba(124,58,237,0.14), rgba(255,255,255,0.02)); border: 1px solid rgba(167,139,250,0.35); }
    .pf-ic { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 14px;
             background: linear-gradient(135deg, #9333EA, #6366F1); }
    .pf-card:nth-child(2) .pf-ic { background: linear-gradient(135deg, #7C3AED, #06B6D4); } .pf-card:nth-child(3) .pf-ic { background: linear-gradient(135deg, #06B6D4, #0E7490); }
    .pf-up { display: flex; align-items: center; gap: 8px; font-size: 1.3rem; font-weight: 800; color: #FFFFFF; margin-bottom: 6px; }
    .pf-arrow { color: #22D3EE; transform: rotate(-45deg); flex-shrink: 0; }
    .pf-card p { color: #A0A0B0; line-height: 1.65; font-size: 0.93rem; }
    .pf-note { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-weight: 600; color: #C4B5FD; font-size: 0.93rem; }
    html.light .pf-card { background: linear-gradient(160deg, rgba(124,58,237,0.07), #FFFFFF); border-color: rgba(124,58,237,0.22); }
    html.light .pf-up { color: #111827; } html.light .pf-card p { color: #4B5563; } html.light .pf-arrow { color: #0891B2; } html.light .pf-note { color: #6D28D9; }
    @media (max-width: 900px) { .pf-grid { grid-template-columns: 1fr; } }
    .fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .fit-card { padding: 24px; border-radius: 20px; }
    .fit-card h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: 14px; }
    .fit-card ul { list-style: none; display: grid; gap: 12px; }
    .fit-card li { display: flex; gap: 10px; line-height: 1.55; font-size: 0.95rem; }
    .fit-ic { flex-shrink: 0; margin-top: 2px; }
    .fit-yes { background: linear-gradient(160deg, rgba(124,58,237,0.16), rgba(99,102,241,0.04)); border: 1px solid rgba(167,139,250,0.45); }
    .fit-yes h3 { color: #FFFFFF; } .fit-yes li { color: #E5E7EB; } .fit-yes .fit-ic { color: #22D3EE; }
    .fit-no { background: rgba(255,255,255,0.025); border: 1px dashed rgba(255,255,255,0.18); }
    .fit-no h3 { color: #D1D5DB; } .fit-no li { color: #A0A0B0; } .fit-no .fit-ic { color: #9CA3AF; }
    .fit-note { margin-top: 16px; font-weight: 600; color: #C4B5FD; font-size: 0.92rem; line-height: 1.55; }
    .fit-data { display: flex; gap: 16px; align-items: flex-start; margin-top: 16px; padding: 20px 22px; border-radius: 18px;
                background: rgba(6,182,212,0.07); border: 1px solid rgba(34,211,238,0.28); }
    .fit-data-ic { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff;
                   background: linear-gradient(135deg, #06B6D4, #0E7490); }
    .fit-data h4 { font-weight: 800; color: #F5F5F5; margin-bottom: 4px; } .fit-data p { color: #C8BED8; line-height: 1.7; font-size: 0.93rem; }
    html.light .fit-yes { background: linear-gradient(160deg, rgba(124,58,237,0.07), #FFFFFF); border-color: rgba(124,58,237,0.3); }
    html.light .fit-yes h3 { color: #111827; } html.light .fit-yes li { color: #1F2937; } html.light .fit-yes .fit-ic { color: #0891B2; }
    html.light .fit-no { background: #FFFFFF; border-color: #D9D4E8; } html.light .fit-no h3 { color: #374151; } html.light .fit-no li { color: #4B5563; }
    html.light .fit-note { color: #6D28D9; }
    html.light .fit-data { background: rgba(6,182,212,0.05); border-color: rgba(8,145,178,0.25); } html.light .fit-data h4 { color: #111827; } html.light .fit-data p { color: #374151; }
    @media (max-width: 767px) { .fit-grid { grid-template-columns: 1fr; } }
    .founder-card { display: flex; gap: 16px; align-items: center; padding: 20px 22px; border-radius: 18px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.09); }
    .founder-card img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: center top; border: 2px solid rgba(167,139,250,0.5); flex-shrink: 0; }
    .founder-card h4 { font-weight: 800; color: #F5F5F5; } .founder-card h4 span { font-weight: 600; color: #A78BFA; font-size: 0.85rem; margin-left: 6px; }
    .founder-card p { color: #A0A0B0; line-height: 1.65; font-size: 0.93rem; margin-top: 2px; }
    html.light .founder-card { background: #FFFFFF; border-color: #ECE9F5; } html.light .founder-card h4 { color: #111827; }
    html.light .founder-card h4 span { color: #7C3AED; } html.light .founder-card p { color: #4B5563; }
    .dteam { margin-top: 0 !important; }
    .cta-points { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 20px auto 0; max-width: 640px; }
    .cta-points li { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; font-weight: 600; color: #E5E7EB; }
    .cta-points svg { color: #22D3EE; }
    html.light .cta-points li { color: #1F2937; } html.light .cta-points svg { color: #0891B2; }
    .art-hero { padding-bottom: 40px; }
    .art-meta { display: flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 0.88rem; font-weight: 600; color: #9CA3AF; }
    .art-meta img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: center top; }
    html.light .art-meta { color: #6B7280; }

    /* reasons + naive callout */
    .reasons { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; }
    .reason { display: flex; gap: 14px; padding: 18px; border-radius: 16px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); }
    .reason-ic { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #C4B5FD; background: rgba(124,58,237,0.14); }
    .reason h4 { font-weight: 700; color: #F5F5F5; margin-bottom: 4px; }
    .reason p { font-size: 0.88rem; color: #A0A0B0; line-height: 1.65; }
    .naive { margin-top: 24px; padding: 22px 24px; border-radius: 18px; border: 1px dashed rgba(34,211,238,0.45); background: rgba(6,182,212,0.05); }
    .naive h3 { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.05rem; color: #F5F5F5; margin-bottom: 14px; }
    .naive h3 svg { color: #22D3EE; }
    .naive ol { list-style: none; display: grid; gap: 12px; }
    .naive li { display: flex; gap: 12px; color: #C8BED8; line-height: 1.7; }
    .callout-num, .step-num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
            font-size: 0.8rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #9333EA, #6366F1); }
    html.light .reason { background: #FFFFFF; border-color: rgba(124,58,237,0.12); }
    html.light .reason-ic { color: #7C3AED; background: rgba(124,58,237,0.08); }
    html.light .reason h4, html.light .naive h3 { color: #111827; } html.light .reason p, html.light .naive li { color: #4B5563; }
    html.light .naive { background: rgba(6,182,212,0.05); border-color: rgba(8,145,178,0.4); } html.light .naive h3 svg { color: #0891B2; }

    .key-callout { border-left: 3px solid #A78BFA; background: linear-gradient(90deg, rgba(124,58,237,0.14), rgba(124,58,237,0.03)); border-radius: 0 14px 14px 0; padding: 18px 22px; }
    .key-callout p { color: #F5F5F5; font-size: 1.1rem; font-weight: 600; line-height: 1.6; }
    html.light .key-callout { background: linear-gradient(90deg, rgba(124,58,237,0.08), rgba(124,58,237,0.01)); border-left-color: #7C3AED; }
    html.light .key-callout p { color: #1F2937; }

    /* journey table */
    .chev { display: inline-flex; align-items: center; gap: 5px; padding: 5px 16px 5px 18px; margin: 2px -3px 2px 0; color: #fff; font-size: 0.74rem; font-weight: 700;
            clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%, 9px 50%); white-space: nowrap; }
    .chev:first-child { clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%); padding-left: 11px; }
    .chev-ic { flex-shrink: 0; opacity: 0.9; }
    .c-on1 { background: linear-gradient(135deg, #9333EA, #7E22CE); } .c-on2 { background: linear-gradient(135deg, #7C3AED, #6D28D9); }
    .c-on3 { background: linear-gradient(135deg, #6366F1, #4F46E5); } .c-on4 { background: linear-gradient(135deg, #5B21B6, #4C1D95); }
    .c-off1 { background: linear-gradient(135deg, #0891B2, #0E7490); } .c-off2 { background: linear-gradient(135deg, #0E7490, #155E75); }
    .c-ai { background: linear-gradient(135deg, #9333EA, #0891B2); }
    .leg { display: inline-flex; align-items: center; gap: 7px; }
    .leg-sw { display: inline-block; width: 14px; height: 14px; border-radius: 4px; }
    .journey-table td { white-space: nowrap; vertical-align: middle; }
    .journey-table td:first-child { font-weight: 400; }
    .journey-table .row-no td:first-child .chev { opacity: 0.8; }
    .journey-table .rule-col { border-left: 1px dashed rgba(255,255,255,0.12); }
    html.light .journey-table .rule-col { border-left-color: rgba(0,0,0,0.12); }
    .conv { display: inline-block; min-width: 3.2em; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }
    .conv-yes { background: rgba(124,58,237,0.18); color: #C4B5FD; border: 1px solid rgba(167,139,250,0.45); }
    .conv-no { color: #9CA3AF; border: 1px solid rgba(255,255,255,0.16); }
    html.light .conv-yes { color: #6D28D9; background: rgba(124,58,237,0.08); border-color: rgba(124,58,237,0.35); }
    html.light .conv-no { color: #4B5563; border-color: rgba(0,0,0,0.15); }
    .unused { font-size: 0.8rem; font-style: italic; color: #6B7280; text-decoration: line-through; text-decoration-color: rgba(156,163,175,0.5); }

    /* vs cards */
    .vs-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: stretch; margin-top: 40px; }
    .vs-card { padding: 24px; border-radius: 20px; }
    .vs-card h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 14px; }
    .vs-card ul { list-style: none; display: grid; gap: 12px; }
    .vs-card li { display: flex; gap: 10px; line-height: 1.6; font-size: 0.93rem; }
    .vs-ic { flex-shrink: 0; margin-top: 3px; }
    .vs-ours { background: linear-gradient(160deg, rgba(124,58,237,0.20), rgba(99,102,241,0.08)); border: 1px solid rgba(167,139,250,0.45); }
    .vs-ours h3 { color: #FFFFFF; } .vs-ours li { color: #E5E7EB; } .vs-ours .vs-ic { color: #22D3EE; }
    .vs-rule { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.09); }
    .vs-rule h3 { color: #9CA3AF; } .vs-rule li { color: #A0A0B0; } .vs-rule .vs-ic { color: #6B7280; transform: rotate(45deg); }
    .vs-mid { align-self: center; font-weight: 800; color: #6B7280; font-size: 0.9rem; }
    html.light .vs-ours { background: linear-gradient(160deg, rgba(124,58,237,0.09), rgba(99,102,241,0.03)); border-color: rgba(124,58,237,0.3); }
    html.light .vs-ours h3 { color: #4C1D95; } html.light .vs-ours li { color: #1F2937; } html.light .vs-ours .vs-ic { color: #0891B2; }
    html.light .vs-rule { background: #FFFFFF; border-color: rgba(0,0,0,0.08); } html.light .vs-rule h3 { color: #6B7280; } html.light .vs-rule li { color: #4B5563; }
    @media (max-width: 767px) { .vs-grid { grid-template-columns: 1fr; } .vs-mid { justify-self: center; } }

    /* modules overview */
    .suites { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: stretch; }
    .suite { padding: 28px; border-radius: 22px; display: flex; flex-direction: column;
             background: linear-gradient(160deg, rgba(124,58,237,0.16), rgba(99,102,241,0.04)); border: 1px solid rgba(167,139,250,0.38); }
    .suite:last-child { background: linear-gradient(160deg, rgba(6,182,212,0.12), rgba(124,58,237,0.05)); border-color: rgba(34,211,238,0.35); }
    .suite-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
    .suite-ic { flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff;
                background: linear-gradient(135deg, #9333EA, #6366F1); }
    .suite:last-child .suite-ic { background: linear-gradient(135deg, #06B6D4, #6366F1); }
    .suite h3 { font-size: 1.2rem; font-weight: 800; color: #FFFFFF; line-height: 1.3; }
    .suite-q { margin-top: 3px; font-weight: 600; color: #C4B5FD; }
    .suite:last-child .suite-q { color: #67E8F9; }
    .suite-inc { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #9CA3AF; margin-bottom: 10px; }
    .suite-list { list-style: none; display: grid; gap: 12px; }
    .suite-list li { display: flex; gap: 10px; }
    .suite-list h4 { font-weight: 700; color: #F5F5F5; font-size: 0.95rem; }
    .suite-list p { font-size: 0.87rem; color: #A0A0B0; line-height: 1.6; }
    .suite-list .vs-ic { color: #A78BFA; flex-shrink: 0; margin-top: 3px; }
    .suite-base { padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px dashed rgba(255,255,255,0.18); align-items: center; }
    .suite-base h4 { font-weight: 600 !important; }
    .suite-who { margin-top: auto; padding-top: 18px; font-size: 0.85rem; font-weight: 600; color: #9CA3AF; }
    .suite .service-read-more { align-self: flex-start; }
    .suites-or { align-self: center; }
    .suites-or span { display: inline-block; padding: 6px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; color: #9CA3AF;
                      border: 1px solid rgba(255,255,255,0.14); background: #0C0A0F; writing-mode: vertical-rl; transform: rotate(180deg); }
    .foundation { display: flex; align-items: center; gap: 18px; margin-top: 18px; padding: 22px 26px; border-radius: 20px;
                  background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.10); }
    .foundation-ic { flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff;
                     background: linear-gradient(135deg, #7C3AED, #06B6D4); }
    .foundation-k { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #A78BFA; }
    .foundation h3 { font-size: 1.1rem; font-weight: 800; color: #FFFFFF; }
    .foundation p { font-size: 0.92rem; color: #A0A0B0; line-height: 1.6; margin-top: 2px; }
    .foundation .service-read-more { margin: 0 0 0 auto; flex-shrink: 0; }
    html.light .suite { background: linear-gradient(160deg, rgba(124,58,237,0.07), #FFFFFF); border-color: rgba(124,58,237,0.25); }
    html.light .suite:last-child { background: linear-gradient(160deg, rgba(6,182,212,0.07), #FFFFFF); border-color: rgba(8,145,178,0.25); }
    html.light .suite h3, html.light .suite-list h4, html.light .foundation h3 { color: #111827; }
    html.light .suite-q { color: #6D28D9; } html.light .suite:last-child .suite-q { color: #0E7490; }
    html.light .suite-list p, html.light .foundation p { color: #4B5563; } html.light .suite-list .vs-ic { color: #7C3AED; }
    html.light .suite-base { background: rgba(124,58,237,0.04); border-color: rgba(124,58,237,0.25); }
    html.light .suites-or span { background: #F6F4FF; border-color: rgba(0,0,0,0.12); color: #6B7280; }
    html.light .foundation { background: #FFFFFF; border-color: rgba(124,58,237,0.15); } html.light .foundation-k { color: #7C3AED; }
    @media (max-width: 900px) {
      .suites { grid-template-columns: 1fr; } .suites-or { justify-self: center; } .suites-or span { writing-mode: horizontal-tb; transform: none; }
      .foundation { flex-direction: column; align-items: flex-start; } .foundation .service-read-more { margin-left: 0; }
    }

    /* journeys: both views at once (our model vs rule-based), optional one-time reveal */
    .jbox { padding: 22px; }
    .jmeters { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin-bottom: 18px; }
    .jm-lab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 7px; font-size: 0.86rem; }
    .jm-lab b { color: #F5F5F5; font-weight: 800; } .jm-lab span { color: #C8BED8; font-weight: 600; } .jm-lab .jm-bad { color: #FCA5A5; }
    .jmeter { height: 10px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
    .jmeter span { display: block; height: 100%; border-radius: 999px; }
    .jm-ours { width: 100%; background: linear-gradient(90deg, #9333EA, #6366F1, #22D3EE); }
    .jm-rule { width: 50%; background: #6B7280; }
    .jlist { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .jrow { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); }
    .jrow-no { border-style: dashed; border-color: rgba(255,255,255,0.14); background: rgba(156,163,175,0.07); }
    .jst { flex-shrink: 0; width: 130px; display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; }
    .jst-yes { color: #C4B5FD; } .jst-no { color: #9CA3AF; }
    .x-ic { transform: rotate(45deg); }
    .jchev { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
    .jflag { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; font-weight: 700; }
    .jflag-yes { color: #9CA3AF; } .jflag-no { color: #FCA5A5; }
    .jbox .fig-cap { margin-top: 16px; }
    /* one-time reveal: only when JS adds .janim (never with reduced motion); the end state equals the static page */
    .janim .jm-rule { width: 100%; transition: width 1s cubic-bezier(.4,0,.2,1) 0.2s; }
    .janim .jflag-no { opacity: 0; transform: translateX(6px); transition: opacity 0.4s ease, transform 0.4s ease; }
    .janim.jplay .jm-rule { width: 50%; }
    .janim.jplay .jflag-no { opacity: 1; transform: none; }
    html.light .jm-lab b { color: #111827; } html.light .jm-lab span { color: #374151; } html.light .jm-lab .jm-bad { color: #B91C1C; }
    html.light .jmeter { background: #EEEBF6; } html.light .jm-rule { background: #9CA3AF; }
    html.light .jrow { background: #FFFFFF; border-color: #ECE9F5; } html.light .jrow-no { background: #F7F7F9; border-color: #D9D4E8; }
    html.light .jst-yes { color: #6D28D9; } html.light .jst-no { color: #6B7280; }
    html.light .jflag-yes { color: #6B7280; } html.light .jflag-no { color: #B91C1C; }
    @media (max-width: 767px) { .jmeters { grid-template-columns: 1fr; } }
    @media (max-width: 600px) { .jrow { flex-wrap: wrap; gap: 8px; } .jst { width: auto; } .jchev { flex-basis: 100%; order: 3; }
      .jflag { margin-left: auto; flex-shrink: 1; min-width: 0; white-space: normal; text-align: right; line-height: 1.3; font-size: 0.7rem; } }
    .jins-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .jins { padding: 20px; border-radius: 18px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.09); }
    .jins-ch { margin-bottom: 12px; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
    .jins h4 { font-weight: 800; color: #F5F5F5; margin-bottom: 6px; }
    .jins p { font-size: 0.88rem; color: #A0A0B0; line-height: 1.6; }
    .jins:nth-child(1) { border-color: rgba(248,113,113,0.3); } .jins:nth-child(2) { border-color: rgba(167,139,250,0.5); background: rgba(124,58,237,0.08); }
    html.light .jins { background: #FFFFFF; border-color: #ECE9F5; } html.light .jins h4 { color: #111827; } html.light .jins p { color: #4B5563; }
    html.light .jins:nth-child(1) { border-color: rgba(185,28,28,0.25); } html.light .jins:nth-child(2) { border-color: rgba(124,58,237,0.35); background: rgba(124,58,237,0.04); }
    @media (max-width: 900px) { .jins-grid { grid-template-columns: 1fr; } }
    @media (max-width: 600px) { .jrow { flex-wrap: wrap; gap: 8px; } .jst { width: auto; } .jchev { flex-basis: 100%; } }

    /* modules: foundation first, two modules on top */
    .mod-num { display: inline-block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
               color: #FFFFFF; background: linear-gradient(135deg, #9333EA, #6366F1); }
    .mod-found { padding: 30px; border-radius: 26px; position: relative; overflow: hidden;
                 background: radial-gradient(circle at 0% 0%, rgba(147,51,234,0.20), transparent 55%), radial-gradient(circle at 100% 100%, rgba(6,182,212,0.12), transparent 55%), rgba(255,255,255,0.03);
                 border: 1px solid rgba(167,139,250,0.45); }
    .mf-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 18px; }
    .mf-tag { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
              color: #C4B5FD; border: 1px solid rgba(167,139,250,0.4); }
    .mf-note { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: #67E8F9;
               padding: 5px 12px; border-radius: 999px; background: rgba(6,182,212,0.12); }
    .mf-title { display: flex; gap: 16px; align-items: center; }
    .mf-ic { flex-shrink: 0; width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #fff;
             background: linear-gradient(135deg, #9333EA, #06B6D4); box-shadow: 0 8px 26px rgba(124,58,237,0.3); }
    .mod-found h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 800; color: #FFFFFF; letter-spacing: -0.02em; }
    .mf-role { color: #C4B5FD; font-weight: 600; margin-top: 2px; }
    .mf-lead { margin-top: 16px; color: #C8BED8; line-height: 1.75; max-width: 75ch; }
    .mf-parts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 22px; }
    .mf-part { padding: 16px; border-radius: 16px; background: rgba(12,10,15,0.35); border: 1px solid rgba(255,255,255,0.08); }
    .mf-part-ic { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #C4B5FD; background: rgba(124,58,237,0.16); margin-bottom: 10px; }
    .mf-part h4 { font-weight: 700; color: #F5F5F5; font-size: 0.95rem; margin-bottom: 4px; }
    .mf-part p { font-size: 0.84rem; color: #A0A0B0; line-height: 1.55; }
    .mf-result { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 20px; padding: 16px 20px; border-radius: 16px;
                 background: rgba(124,58,237,0.12); border-left: 3px solid #A78BFA; }
    .mf-rk { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #A78BFA; margin-bottom: 3px; }
    .mf-result p { color: #F5F5F5; font-weight: 600; line-height: 1.55; max-width: 70ch; }
    .mf-result .service-read-more { margin: 0; }
    .mod-branch { position: relative; display: flex; justify-content: center; padding: 26px 0; }
    .mod-branch::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%);
                          background: linear-gradient(180deg, rgba(167,139,250,0.7), rgba(34,211,238,0.5)); }
    .mod-branch span { position: relative; z-index: 1; padding: 6px 14px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; color: #C4B5FD;
                       background: #0C0A0F; border: 1px solid rgba(167,139,250,0.45); }
    .suites-2 { grid-template-columns: 1fr 1fr; }
    .suite-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
    .suite-builds { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 600; color: #9CA3AF; }
    html.light .mod-found { background: radial-gradient(circle at 0% 0%, rgba(147,51,234,0.09), transparent 55%), radial-gradient(circle at 100% 100%, rgba(6,182,212,0.07), transparent 55%), #FFFFFF;
                            border-color: rgba(124,58,237,0.28); box-shadow: 0 10px 40px rgba(124,58,237,0.08); }
    html.light .mf-tag { color: #6D28D9; border-color: rgba(124,58,237,0.3); }
    html.light .mf-note { color: #0E7490; background: rgba(6,182,212,0.09); }
    html.light .mod-found h3 { color: #111827; } html.light .mf-role { color: #6D28D9; } html.light .mf-lead { color: #374151; }
    html.light .mf-part { background: #FFFFFF; border-color: #ECE9F5; } html.light .mf-part-ic { color: #7C3AED; background: rgba(124,58,237,0.08); }
    html.light .mf-part h4 { color: #111827; } html.light .mf-part p { color: #4B5563; }
    html.light .mf-result { background: rgba(124,58,237,0.06); border-left-color: #7C3AED; } html.light .mf-rk { color: #7C3AED; } html.light .mf-result p { color: #111827; }
    html.light .mod-branch span { background: #FFFFFF; color: #6D28D9; border-color: rgba(124,58,237,0.3); }
    html.light .suite-builds { color: #6B7280; }
    @media (max-width: 1023px) { .mf-parts { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 767px) { .mf-parts, .suites-2 { grid-template-columns: 1fr; } .mf-note { margin-left: 0; } .mod-found { padding: 22px; } }

    /* module 1 */
    .feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
    .feat { padding: 20px; border-radius: 18px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); transition: border-color 0.2s, transform 0.2s; }
    .feat:hover { border-color: rgba(167,139,250,0.4); transform: translateY(-2px); }
    .feat-ic { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 14px;
               background: linear-gradient(135deg, #9333EA, #6366F1); }
    .feat h3 { font-weight: 700; color: #F5F5F5; margin-bottom: 6px; font-size: 1rem; }
    .feat p { font-size: 0.87rem; color: #A0A0B0; line-height: 1.65; }
    html.light .feat { background: #FFFFFF; border-color: rgba(124,58,237,0.12); } html.light .feat h3 { color: #111827; } html.light .feat p { color: #4B5563; }
    .two-models { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; }
    .tm-card { position: relative; padding: 24px; border-radius: 20px; background: rgba(255,255,255,0.03); border: 1px solid rgba(167,139,250,0.3); height: 100%; }
    .tm-tag { position: absolute; top: -12px; left: 20px; width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
              font-weight: 800; font-size: 0.8rem; color: #fff; background: linear-gradient(135deg, #9333EA, #6366F1); }
    .tm-card h4 { font-weight: 700; color: #F5F5F5; margin: 4px 0 8px; }
    .tm-card p { font-size: 0.9rem; color: #A0A0B0; line-height: 1.7; }
    .tm-mid span { display: flex; width: 72px; height: 72px; border-radius: 50%; align-items: center; justify-content: center; font-weight: 800; font-size: 0.85rem;
                   color: #fff; background: linear-gradient(135deg, #7C3AED, #06B6D4); box-shadow: 0 0 0 8px rgba(124,58,237,0.12); }
    .tm-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; color: #C4B5FD; font-weight: 600; text-align: center; }
    html.light .tm-card { background: #FFFFFF; border-color: rgba(124,58,237,0.22); } html.light .tm-card h4 { color: #111827; } html.light .tm-card p { color: #4B5563; }
    html.light .tm-note { color: #6D28D9; }
    @media (max-width: 767px) { .two-models { grid-template-columns: 1fr; } .tm-mid { justify-self: center; } }
    .off-panel { margin-top: 48px; padding: 28px; background: linear-gradient(135deg, rgba(6,182,212,0.07), rgba(124,58,237,0.05)); border-color: rgba(34,211,238,0.25); }
    .off-list { list-style: none; display: grid; gap: 14px; margin-top: 18px; }
    .off-list li { display: flex; gap: 12px; }
    .off-list h4 { font-weight: 700; color: #F5F5F5; font-size: 0.95rem; }
    .off-list p { font-size: 0.87rem; color: #A0A0B0; line-height: 1.6; }
    .off-ic { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff;
              background: linear-gradient(135deg, #06B6D4, #0E7490); }
    .off-ic-ai { background: linear-gradient(135deg, #9333EA, #0891B2); }
    html.light .off-panel { background: linear-gradient(135deg, rgba(6,182,212,0.06), rgba(124,58,237,0.03)); border-color: rgba(8,145,178,0.22); }
    html.light .off-list h4 { color: #111827; } html.light .off-list p { color: #4B5563; }
    .data-team .faq-a li { color: #A0A0B0; } html.light .data-team .faq-a li { color: #374151; }
    .dteam { display: flex; gap: 16px; align-items: flex-start; margin-top: 32px; padding: 20px 22px; border-radius: 18px;
             background: rgba(255,255,255,0.03); border: 1px dashed rgba(167,139,250,0.4); }
    .dteam-ic { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff;
                background: linear-gradient(135deg, #9333EA, #6366F1); }
    .dteam h4 { font-weight: 800; color: #F5F5F5; margin-bottom: 4px; }
    .dteam p { color: #A0A0B0; line-height: 1.7; font-size: 0.93rem; }
    html.light .dteam { background: #FFFFFF; border-color: rgba(124,58,237,0.3); } html.light .dteam h4 { color: #111827; } html.light .dteam p { color: #4B5563; }

    /* module 2 stepper */
    .stepper { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; position: relative; counter-reset: s; }
    .step { position: relative; padding: 20px; border-radius: 18px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); }
    .step:not(:last-child)::after { content: ''; position: absolute; top: 34px; right: -12px; width: 10px; height: 10px; border-top: 2px solid #A78BFA; border-right: 2px solid #A78BFA;
                                    transform: rotate(45deg); z-index: 1; }
    .step-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
    .step-ic { color: #A78BFA; }
    .step h4 { font-weight: 700; color: #F5F5F5; margin-bottom: 6px; }
    .step p { font-size: 0.87rem; color: #A0A0B0; line-height: 1.65; }
    .key-inline { margin-top: 12px; border-left: 3px solid #22D3EE; padding-left: 10px; color: #E5E7EB !important; font-weight: 600; }
    html.light .step { background: #FFFFFF; border-color: rgba(124,58,237,0.12); } html.light .step h4 { color: #111827; } html.light .step p { color: #4B5563; }
    html.light .key-inline { color: #1F2937 !important; border-left-color: #0891B2; } html.light .step-ic { color: #7C3AED; }
    @media (max-width: 1023px) { .stepper { grid-template-columns: repeat(2, 1fr); } .step::after { display: none; } }
    @media (max-width: 600px) { .stepper { grid-template-columns: 1fr; } }

    /* module 2: decisions, curves, scenarios */
    .q-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .q-card { padding: 24px; border-radius: 20px; background: linear-gradient(160deg, rgba(124,58,237,0.14), rgba(255,255,255,0.02)); border: 1px solid rgba(167,139,250,0.3); }
    .q-ic { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 14px;
            background: linear-gradient(135deg, #9333EA, #6366F1); }
    .q-card:nth-child(2) .q-ic { background: linear-gradient(135deg, #7C3AED, #06B6D4); }
    .q-card:nth-child(3) .q-ic { background: linear-gradient(135deg, #06B6D4, #0E7490); }
    .q-card h3 { font-size: 1.35rem; font-weight: 800; color: #FFFFFF; margin-bottom: 6px; }
    .q-card p { color: #A0A0B0; line-height: 1.65; font-size: 0.93rem; }
    html.light .q-card { background: linear-gradient(160deg, rgba(124,58,237,0.07), #FFFFFF); border-color: rgba(124,58,237,0.2); }
    html.light .q-card h3 { color: #111827; } html.light .q-card p { color: #4B5563; }
    @media (max-width: 900px) { .q-grid { grid-template-columns: 1fr; } }
    .cv { fill: none; stroke-width: 3.2; stroke-linecap: round; }
    .cv-search { stroke: #A78BFA; fill: #A78BFA; } .cv-tv { stroke: #22D3EE; fill: #22D3EE; } .cv-social { stroke: #818CF8; fill: #818CF8; }
    .cv.cv-search, .cv.cv-tv, .cv.cv-social { fill: none; }
    .cv-halo { opacity: 0.25; stroke: none; } .cv-dot { stroke: #0C0A0F; stroke-width: 2; }
    .cv-panel { fill: rgba(255,255,255,0.03); stroke: rgba(255,255,255,0.09); }
    .cv-area { stroke: none; opacity: 0.10; }
    .cv-drop { stroke: rgba(255,255,255,0.25); stroke-width: 1; stroke-dasharray: 3 4; }
    .cv-pill { opacity: 0.16; stroke: none; }
    .cv-pill-t { fill: #F5F5F5; }
    html.light .cv-panel { fill: #FFFFFF; stroke: rgba(124,58,237,0.14); }
    html.light .cv-drop { stroke: rgba(0,0,0,0.25); } html.light .cv-pill-t { fill: #1F2937; } html.light .cv-pill { opacity: 0.12; }
    .cv-state { stroke: none; }
    .cv-hint-out { fill: #FCA5A5; } .cv-hint-in { fill: #67E8F9; }
    html.light .cv-search { stroke: #7C3AED; fill: #7C3AED; } html.light .cv-tv { stroke: #0891B2; fill: #0891B2; } html.light .cv-social { stroke: #4F46E5; fill: #4F46E5; }
    html.light .cv.cv-search, html.light .cv.cv-tv, html.light .cv.cv-social { fill: none; }
    html.light .cv-dot { stroke: #FFFFFF; } html.light .cv-hint-out { fill: #B91C1C; } html.light .cv-hint-in { fill: #0E7490; }
    .sc-wrap { padding: 22px; }
    .sc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .sc-card { padding: 20px; border-radius: 16px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.09); }
    .sc-hl { border-color: rgba(167,139,250,0.5); background: linear-gradient(160deg, rgba(124,58,237,0.14), rgba(255,255,255,0.02)); }
    .sc-name { font-size: 1.15rem; font-weight: 800; color: #FFFFFF; }
    .sc-sub { display: inline-block; margin-top: 4px; font-size: 0.75rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; color: #C4B5FD; background: rgba(124,58,237,0.16); }
    .sc-q { margin: 12px 0 14px; color: #D1D5DB; font-weight: 600; line-height: 1.5; font-size: 0.93rem; }
    .sc-row { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: center; margin-top: 8px; }
    .sc-lab { font-size: 0.75rem; font-weight: 600; color: #9CA3AF; }
    .sc-track { height: 18px; }
    .sc-bar { display: flex; height: 100%; border-radius: 6px; overflow: hidden; gap: 2px; }
    .sc-bar span { display: block; height: 100%; }
    .sg-tv { background: #06B6D4; } .sg-ooh { background: #0E7490; } .sg-search { background: #7C3AED; } .sg-social { background: #6366F1; } .sg-display { background: #A78BFA; }
    .sc-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 18px; }
    .sc-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; }
    .sc-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: #C8BED8; }
    .sc-leg span { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
    .sc-rules { display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; font-weight: 600; color: #67E8F9; }
    .sc-illus { margin-top: 10px; font-size: 0.75rem; font-style: italic; color: #6B7280; }
    html.light .sc-card { background: #FFFFFF; border-color: rgba(0,0,0,0.08); }
    html.light .sc-hl { background: linear-gradient(160deg, rgba(124,58,237,0.07), #FFFFFF); border-color: rgba(124,58,237,0.3); }
    html.light .sc-name { color: #111827; } html.light .sc-sub { color: #6D28D9; background: rgba(124,58,237,0.08); }
    html.light .sc-q { color: #1F2937; } html.light .sc-lab { color: #6B7280; } html.light .sc-leg { color: #374151; } html.light .sc-rules { color: #0E7490; }
    @media (max-width: 900px) { .sc-grid { grid-template-columns: 1fr; } }
    .fin-list { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    @media (max-width: 900px) { .fin-list { grid-template-columns: 1fr; } }
    .fin-list li { display: flex; gap: 14px; padding: 16px 18px; border-radius: 16px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); }
    .fin-ic { flex-shrink: 0; color: #22D3EE; margin-top: 2px; }
    .fin-list h4 { font-weight: 700; color: #F5F5F5; }
    .fin-list p { font-size: 0.88rem; color: #A0A0B0; line-height: 1.6; }
    html.light .fin-list li { background: #FFFFFF; border-color: rgba(0,0,0,0.08); } html.light .fin-ic { color: #0891B2; }
    html.light .fin-list h4 { color: #111827; } html.light .fin-list p { color: #4B5563; }

    /* MMM table */
    .mmm-table th[scope="row"] { text-align: left; font-weight: 600; color: #D0D0E0; padding: 12px 16px; text-transform: none; letter-spacing: 0; font-size: 0.9rem; white-space: normal; }
    .mmm-table th[scope="col"] { white-space: normal; min-width: 140px; vertical-align: bottom; }
    .mmm-table th[scope="col"] span { display: block; font-size: 0.7rem; font-weight: 500; text-transform: none; letter-spacing: 0; opacity: 0.8; margin-top: 2px; }
    .mmm-table td { font-weight: 400 !important; }
    .mmm-table .us { background: rgba(124,58,237,0.10); color: #F5F5F5 !important; font-weight: 600 !important; }
    .mmm-table thead .us { background: rgba(124,58,237,0.22); }
    .yn { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
    .yn-yes { color: #C4B5FD; } .yn-no { color: #6B7280; }
    html.light .mmm-table th[scope="row"] { color: #1F2937; } html.light .mmm-table .us { background: rgba(124,58,237,0.06); color: #111827 !important; }
    html.light .mmm-table thead .us { background: rgba(124,58,237,0.14); } html.light .yn-yes { color: #6D28D9; } html.light .yn-no { color: #9CA3AF; }

    /* channels */
    .chan-group { padding: 22px; border-radius: 20px; }
    .chan-group h3 { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 16px; }
    .chan-group-on { background: rgba(124,58,237,0.06); border: 1px solid rgba(167,139,250,0.22); } .chan-group-on h3 { color: #C4B5FD; }
    .chan-group-off { background: rgba(6,182,212,0.05); border: 1px solid rgba(34,211,238,0.22); } .chan-group-off h3 { color: #67E8F9; }
    .chan-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
    .chan { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 12px; font-size: 0.88rem; font-weight: 500; color: #E5E7EB;
            background: rgba(12,10,15,0.35); border: 1px solid rgba(255,255,255,0.07); }
    .chan-ic { flex-shrink: 0; }
    .chan-on .chan-ic { color: #C4B5FD; } .chan-off .chan-ic { color: #67E8F9; }
    html.light .chan-group-on { background: rgba(124,58,237,0.04); border-color: rgba(124,58,237,0.18); } html.light .chan-group-on h3 { color: #6D28D9; }
    html.light .chan-group-off { background: rgba(6,182,212,0.05); border-color: rgba(8,145,178,0.2); } html.light .chan-group-off h3 { color: #0E7490; }
    html.light .chan { background: #FFFFFF; color: #1F2937; border-color: rgba(0,0,0,0.07); }
    html.light .chan-on .chan-ic { color: #7C3AED; } html.light .chan-off .chan-ic { color: #0E7490; }

    /* engagement */
    .eng-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .eng { padding: 24px; border-radius: 20px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.09); position: relative; }
    .eng:nth-child(2) { border-color: rgba(167,139,250,0.4); background: linear-gradient(160deg, rgba(124,58,237,0.12), rgba(255,255,255,0.02)); }
    .eng-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
    .eng-dur { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; font-weight: 700; color: #67E8F9; padding: 4px 10px; border-radius: 999px; background: rgba(6,182,212,0.12); }
    .eng h3 { font-size: 1.15rem; font-weight: 800; color: #FFFFFF; margin-bottom: 6px; }
    .eng .muted { font-size: 0.9rem; }
    .eng { display: flex; flex-direction: column; }
    .eng ul { margin-bottom: 18px; }
    .eng-decide { margin-top: auto; padding: 12px 14px; border-radius: 12px; background: rgba(6,182,212,0.10); border-left: 3px solid #22D3EE; }
    .eng-decide .eng-get { margin: 0 0 4px; color: #67E8F9; }
    .eng-decide p { color: #F5F5F5; font-weight: 600; font-size: 0.9rem; line-height: 1.55; }
    html.light .eng-decide { background: rgba(6,182,212,0.07); border-left-color: #0891B2; }
    html.light .eng-decide .eng-get { color: #0E7490; } html.light .eng-decide p { color: #111827; }
    .eng-get { margin: 16px 0 8px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #A78BFA; }
    .eng ul, .why-list, .data-list { list-style: none; display: grid; gap: 9px; }
    .eng li, .why-list li { display: flex; gap: 9px; font-size: 0.88rem; line-height: 1.55; color: #D1D5DB; }
    .eng .vs-ic, .why-list .vs-ic { color: #A78BFA; }
    html.light .eng { background: #FFFFFF; border-color: rgba(124,58,237,0.12); }
    html.light .eng:nth-child(2) { background: linear-gradient(160deg, rgba(124,58,237,0.07), #FFFFFF); border-color: rgba(124,58,237,0.3); }
    html.light .eng h3 { color: #111827; } html.light .eng li, html.light .why-list li { color: #374151; } html.light .eng-get { color: #7C3AED; }
    html.light .eng-dur { color: #0E7490; background: rgba(6,182,212,0.10); } html.light .eng .vs-ic, html.light .why-list .vs-ic { color: #7C3AED; }
    @media (max-width: 1023px) { .eng-grid { grid-template-columns: 1fr; } }
    .data-list li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
                    color: #D1D5DB; font-size: 0.92rem; line-height: 1.5; }
    .data-ic { flex-shrink: 0; color: #A78BFA; }
    .gdpr { padding: 26px; border-radius: 20px; background: linear-gradient(160deg, rgba(6,182,212,0.10), rgba(124,58,237,0.06)); border: 1px solid rgba(34,211,238,0.28); }
    .gdpr-ic { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #06B6D4, #0E7490); margin-bottom: 14px; }
    .gdpr h4 { font-weight: 800; color: #FFFFFF; font-size: 1.1rem; margin-bottom: 8px; }
    .gdpr p { color: #C8BED8; line-height: 1.75; font-size: 0.93rem; }
    .gdpr a { color: #67E8F9; }
    html.light .data-list li { background: #FFFFFF; border-color: rgba(0,0,0,0.07); color: #374151; } html.light .data-ic { color: #7C3AED; }
    html.light .gdpr { background: linear-gradient(160deg, rgba(6,182,212,0.07), rgba(124,58,237,0.03)); border-color: rgba(8,145,178,0.25); }
    html.light .gdpr h4 { color: #111827; } html.light .gdpr p { color: #374151; } html.light .gdpr a { color: #0E7490; }

    /* why */
    .why-list li { font-size: 0.98rem; }
    .why-case { padding: 24px; border-radius: 20px; background: linear-gradient(160deg, rgba(124,58,237,0.16), rgba(6,182,212,0.06)); border: 1px solid rgba(167,139,250,0.35); }
    .why-case-num { font-size: 1.9rem; line-height: 1.15; font-weight: 900; line-height: 1; letter-spacing: -0.04em;
                    background: linear-gradient(135deg, #EDE9FE 0%, #C084FC 45%, #22D3EE 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
    .why-case p { margin: 10px 0 4px; color: #E5E7EB; font-weight: 600; line-height: 1.6; }
    html.light .why-case { background: linear-gradient(160deg, rgba(124,58,237,0.08), rgba(6,182,212,0.04)); border-color: rgba(124,58,237,0.25); }
    html.light .why-case-num { background: linear-gradient(135deg, #7C3AED, #0891B2); -webkit-background-clip: text; background-clip: text; }
    html.light .why-case p { color: #1F2937; }

    /* related */
    .related-link { display: inline-block; padding: 7px 14px; border-radius: 999px; font-size: 0.84rem; font-weight: 500; text-decoration: none;
            border: 1px solid rgba(167,139,250,0.35); color: #C4B5FD; transition: border-color 0.2s, background 0.2s; }
    a.related-link:hover { background: rgba(124,58,237,0.12); border-color: rgba(167,139,250,0.7); }
    .related-plain { border-color: rgba(255,255,255,0.12); color: #9CA3AF; }
    html.light .related-link { color: #6D28D9; border-color: rgba(124,58,237,0.35); } html.light .related-plain { color: #4B5563; border-color: rgba(0,0,0,0.12); }

    /* CTA */
    .ma-cta { position: relative; overflow: hidden; max-width: 760px; margin: 0 auto; text-align: center; padding: 52px 32px; border-radius: 28px;
              background: radial-gradient(circle at 20% 0%, rgba(147,51,234,0.35), transparent 55%), radial-gradient(circle at 90% 100%, rgba(6,182,212,0.25), transparent 50%), rgba(255,255,255,0.03);
              border: 1px solid rgba(167,139,250,0.35); }
    .ma-cta-art { display: flex; justify-content: center; gap: 10px; margin-bottom: 22px; }
    .ma-cta-art svg { width: 40px; height: 40px; padding: 9px; border-radius: 12px; color: #fff; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); }
    .ma-cta h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; color: #FFFFFF; margin-bottom: 12px; letter-spacing: -0.02em; text-wrap: balance; }
    .ma-cta > p { color: #C8BED8; line-height: 1.75; margin: 0 auto 26px; max-width: 58ch; }
    .ma-cta-mail { margin-top: 18px !important; font-size: 0.9rem; color: #9CA3AF !important; }
    .ma-cta-mail a { color: #C4B5FD; }
    html.light .ma-cta { background: radial-gradient(circle at 20% 0%, rgba(147,51,234,0.14), transparent 55%), radial-gradient(circle at 90% 100%, rgba(6,182,212,0.12), transparent 50%), #FFFFFF;
                         border-color: rgba(124,58,237,0.22); }
    html.light .ma-cta-art svg { color: #7C3AED; background: rgba(124,58,237,0.06); border-color: rgba(124,58,237,0.15); }
    html.light .ma-cta h2 { color: #111827; } html.light .ma-cta > p { color: #374151; } html.light .ma-cta-mail a { color: #6D28D9; }

    a:focus-visible, summary:focus-visible { outline: 2px solid #A78BFA; outline-offset: 3px; border-radius: 4px; }
    @media (max-width: 640px) { .ma-hero { padding: 104px 0 48px; } .model-switch { padding: 16px; } .off-panel { padding: 20px; } }