/* Ledger row reveal — CSS stagger so each row stays under the
         per-section transform budget. */
      .mlp-fw-ledger-row {
        opacity: 0;
        transform: translateX(-16px);
        animation: mlpFwLedgerIn 0.48s cubic-bezier(0.22, 0.61, 0.36, 1) both;
      }
      @keyframes mlpFwLedgerIn {
        0%   { opacity: 0; transform: translateX(-16px); }
        100% { opacity: 1; transform: translateX(0); }
      }

      /* Connector packet loop (Workspace section). 6s round trip. */
      .mlp-anim-fw-packet {
        animation: mlpFwPacket 6s linear infinite;
      }
      @keyframes mlpFwPacket {
        0%   { transform: translate(8%, 0);  opacity: 0; }
        10%  { opacity: 1; }
        50%  { transform: translate(72%, 0); opacity: 1; }
        60%  { opacity: 0.6; }
        90%  { opacity: 0; }
        100% { transform: translate(92%, 0); opacity: 0; }
      }

      /* Monitoring LIVE dot — soft heartbeat (transform/opacity only). */
      .mlp-anim-fw-live {
        animation: mlpFwLive 2.2s ease-in-out infinite;
      }
      @keyframes mlpFwLive {
        0%, 100% { opacity: 0.55; transform: scale(0.82); }
        50%      { opacity: 1;    transform: scale(1.15); }
      }

      /* Monitoring — live pulse dot (breathes), orbit dot (rotates
         around the agent wheel), and the energy-comet on live edges.
         transform/opacity only. */
      .mlp-anim-fw-mon-live {
        animation: mlpFwMonLive 2s ease-in-out infinite;
      }
      @keyframes mlpFwMonLive {
        0%, 100% { opacity: 0.85; transform: scale(1); }
        50%      { opacity: 1;    transform: scale(1.35); }
      }
      .mlp-anim-fw-mon-orbit {
        animation: mlpFwMonOrbit 14s linear infinite;
      }
      @keyframes mlpFwMonOrbit {
        to { transform: rotate(360deg); }
      }
      .mlp-anim-fw-mon-comet {
        animation: mlpFwMonComet 1.5s linear infinite;
      }
      @keyframes mlpFwMonComet {
        0%   { transform: translateX(-6px); opacity: 0; }
        25%  { opacity: 1; }
        100% { transform: translateX(28px); opacity: 0; }
      }

      /* Logs — audit row hover tint. */
      .mlp-fw-log-row { transition: background 0.15s ease; }
      .mlp-fw-log-row:hover {
        background: color-mix(in srgb, var(--mel-accent-violet, #8B5CF6) 6%, transparent);
      }

      /* Pause loops while scrolling (motion-tokens.md §1.4). */
      html[data-mlp-scrolling="1"] [class*="mlp-anim-fw-"],
      html[data-mlp-scrolling="1"] [data-mlp-loop="true"] {
        animation-play-state: paused !important;
      }

      /* Reduced-motion kill switch. */
      @media (prefers-reduced-motion: reduce) {
        [class*="mlp-anim-fw-"],
        [data-mlp-loop="true"],
        .mlp-fw-ledger-row {
          animation: none !important;
        }
      }

      /* Mobile-only elements — hidden by default so the desktop
         render stays untouched. The mobile tiers below reveal them. */
      .mlp-fw-step-sub-mobile,
      .mlp-fw-topo-vwire {
        display: none;
      }

      /* Neu step tiles lift on hover, like the real canvas cards. */
      .mlp-fw-step {
        transition: transform 0.22s ease, box-shadow 0.22s ease;
      }
      .mlp-fw-step:hover {
        transform: translateY(-3px);
      }
      @media (prefers-reduced-motion: reduce) {
        .mlp-fw-step:hover { transform: none; }
      }

      .mlp-fw-faq-inner {
        width: 100%;
        max-width: 1220px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
        gap: clamp(44px, 7vw, 112px);
        align-items: start;
      }
      .mlp-fw-faq-heading { position: sticky; top: 116px; }
      .mlp-fw-faq-heading h2 {
        max-width: 15ch;
        margin: 24px 0 16px;
        color: var(--mel-text-primary);
        font: 750 clamp(2rem, 3.2vw, 3rem)/1.1 Poppins, system-ui, sans-serif;
        letter-spacing: -0.035em;
      }
      .mlp-fw-faq-heading > p {
        max-width: 45ch;
        margin: 0;
        color: var(--mel-text-secondary, rgba(220,228,255,0.74));
        font: 400 16px/1.7 Poppins, system-ui, sans-serif;
      }
      .mlp-fw-faq-list { display: grid; gap: 11px; }
      .mlp-fw-faq-list details {
        border: 1px solid color-mix(in srgb, var(--mel-text-primary) 12%, transparent);
        border-radius: 18px;
        background: color-mix(in srgb, var(--mel-text-primary) 3%, transparent);
        overflow: hidden;
        transition: border-color 180ms ease, background 180ms ease;
      }
      .mlp-fw-faq-list details[open] {
        border-color: color-mix(in srgb, #8B5CF6 42%, transparent);
        background: color-mix(in srgb, #8B5CF6 7%, transparent);
      }
      .mlp-fw-faq-list summary {
        min-height: 68px;
        padding: 18px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 22px;
        cursor: pointer;
        list-style: none;
        color: var(--mel-text-primary);
        font: 650 16px/1.45 Poppins, system-ui, sans-serif;
      }
      .mlp-fw-faq-list summary::-webkit-details-marker { display: none; }
      .mlp-fw-faq-list summary i {
        width: 10px;
        height: 10px;
        flex: 0 0 10px;
        border-right: 1.5px solid #22D3EE;
        border-bottom: 1.5px solid #22D3EE;
        transform: rotate(45deg) translateY(-2px);
        transition: transform 180ms ease;
      }
      .mlp-fw-faq-list details[open] summary i { transform: rotate(225deg) translate(-1px, -1px); }
      .mlp-fw-faq-list details > p {
        margin: -4px 0 0;
        padding: 0 20px 21px;
        color: var(--mel-text-secondary, rgba(220,228,255,0.74));
        font: 400 14.5px/1.72 Poppins, system-ui, sans-serif;
      }

      /* Mobile (sm: 0–767, design-tokens.md §3) — every 2/3-col grid
         collapses to single column. */
      @media (max-width: 767px) {
        .mlp-fw-faq-inner { grid-template-columns: 1fr; gap: 30px; }
        .mlp-fw-faq-heading { position: static; }
        .mlp-fw-faq-heading h2 { margin-top: 18px; max-width: 18ch; }
        .mlp-fw-faq-list summary { min-height: 0; padding: 16px; font-size: 14.5px; gap: 14px; }
        .mlp-fw-faq-list details > p { padding: 0 16px 18px; font-size: 13.5px; }
        .mlp-fw-catalog-grid,
        .mlp-fw-compose-grid,
        .mlp-fw-memory-grid,
        .mlp-fw-workspace-grid {
          grid-template-columns: 1fr !important;
          row-gap: 32px !important;
        }
        /* Overflow guard: every named grid's children may shrink
           below min-content so one long token can never push the
           layout past 100vw on a phone. */
        :is(.mlp-fw-catalog-grid, .mlp-fw-compose-grid, .mlp-fw-memory-grid,
            .mlp-fw-workspace-grid, .mlp-fw-trigger-strip, .mlp-fw-connector-strip,
            .mlp-fw-stat-row, .mlp-fw-persona-row,
            .mlp-fw-step, .mlp-fw-tick-labels,
            .mlp-fw-start-grid, .mlp-fw-start-card, .mlp-fw-start-cta,
            .mlp-fw-mon-bar, .mlp-fw-mon-views, .mlp-fw-mon-table, .mlp-fw-mon-card,
            .mlp-fw-log-panel, .mlp-fw-log-head, .mlp-fw-log-row,
            .mlp-fw-tpl-grid, .mlp-fw-tpl-card) > * {
          min-width: 0;
        }
        /* Monitoring: the two views (cards + table) stack on mobile. */
        .mlp-fw-mon-views { grid-template-columns: 1fr !important; }
        .mlp-fw-mon-bar-readouts { display: none !important; }
        /* Table view: keep only pipeline · status · last/next on phones. */
        .mlp-fw-mon-tcol-agents,
        .mlp-fw-mon-tcol-model,
        .mlp-fw-mon-tcol-trigger,
        .mlp-fw-mon-tcol-runs { display: none !important; }
        .mlp-fw-mon-trow { grid-template-columns: 1fr 76px 74px !important; }
        /* Get-started white-label CTA: stack the copy over full-width actions. */
        .mlp-fw-start-cta { flex-direction: column; align-items: stretch !important; }
        .mlp-fw-start-cta-actions { width: 100%; }
        .mlp-fw-start-cta-actions a { flex: 1 1 auto; justify-content: center; }
        /* Logs audit table: drop the Agent/Model + Cost columns and
           re-grid to 4 tracks so the row stays readable with no
           horizontal scroll. */
        .mlp-fw-log-col-agent,
        .mlp-fw-log-col-pipeline,
        .mlp-fw-log-col-conn,
        .mlp-fw-log-col-appr,
        .mlp-fw-log-col-cost { display: none !important; }
        .mlp-fw-log-table { min-width: 0 !important; }
        .mlp-fw-log-head,
        .mlp-fw-log-row {
          grid-template-columns: 92px 1.7fr 52px 78px !important;
          gap: 10px !important;
        }
        /* Templates → single column. */
        .mlp-fw-tpl-grid { grid-template-columns: 1fr !important; }
        /* Section rhythm: step the desktop 64-96px vertical padding
           down to a phone-scale beat, and trim the inner gutter (the
           outer .mlp-product-section already carries the frame's
           mobile side padding, so full inner padding double-gutters). */
        .mlp-fw-section-pad {
          padding-top: clamp(36px, 6vh, 56px) !important;
          padding-bottom: clamp(36px, 6vh, 56px) !important;
        }
        .mlp-product-section .mlp-fw-section-pad {
          padding-left: 8px !important;
          padding-right: 8px !important;
        }
        .mlp-fw-opening {
          gap: 28px !important;
        }
        .mlp-fw-run-stack {
          gap: 32px !important;
        }

        /* ── Compose neu step tiles on mobile: swap the terse mono
           sub for the plain-language completion ("DRAG · a persona
           onto the canvas") so each tile reads as a clear step. The
           tile chrome (icon chip + badge + soft shadow) is unchanged. ── */
        .mlp-fw-step {
          padding: 12px 14px !important;
        }
        .mlp-fw-step-sub-desktop {
          display: none !important;
        }
        .mlp-fw-step-sub-mobile {
          display: block !important;
          font-family: Poppins, system-ui, sans-serif;
          font-size: 13px;
          line-height: 1.4;
          color: var(--mel-text-secondary, rgba(220,228,255,0.74));
        }

        /* ── Catalog: shrink the mega numerals and give the ledger
           a comfortable phone rhythm (fixed 15px labels instead of
           the weighted desktop scale). ── */
        .mlp-fw-mega {
          font-size: clamp(3rem, 16vw, 4.5rem) !important;
        }
        .mlp-fw-ledger {
          gap: 10px !important;
        }
        .mlp-fw-ledger-row > span:first-child {
          font-size: 15px !important;
          line-height: 1.35 !important;
        }
        /* CatalogSection LEFT column: two numerals + hairline.
           Center horizontally on mobile so the stack reads as a
           tidy column instead of a left-pinned wall of text.
           column-reverse so SUBAGENT TEMPLATES sits on top and TOOLS
           drops to the bottom of the stack — directly above the
           category ledger, which breaks down the tools (not the
           subagent templates). Prevents the ledger being misread as
           a subagent breakdown once the grid stacks to one column. */
        .mlp-fw-catalog-grid > div:first-child {
          align-items: center !important;
          flex-direction: column-reverse !important;
        }
        .mlp-fw-catalog-grid > div:first-child > div > div {
          align-items: center !important;
          text-align: center !important;
        }
        /* Workspace sharing meta: 2-up neu tiles collapse to a single
           column on phones so long values ("username or shareable
           link") never clip. */
        .mlp-fw-meta-grid {
          grid-template-columns: 1fr !important;
        }
        /* Workspace project card: trim the padding and decongest the
           3-up stat row (less label tracking) so PIPELINES / CONNECTORS /
           RUNS each stay on one line at 360px instead of clipping. */
        .mlp-fw-project-card {
          padding: 14px 16px !important;
        }
        .mlp-fw-project-stats {
          gap: 10px !important;
        }
        .mlp-fw-project-stats > div > div:first-child {
          letter-spacing: 0.1em !important;
        }
        .mlp-fw-trigger-strip {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }
        /* RunReplay stat row: 4 stats with long labels (e.g.
           "concurrent lanes", "runs / mo Citadel"). Force 2-col
           2-row layout so labels aren't crushed into one strip. */
        .mlp-fw-stat-row {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
          gap: 16px 12px !important;
        }
      }
      @media (max-width: 480px) {
        /* Tight phone tier: stat row collapses to a single column
           so the 4 cards read like a vertical list. */
        .mlp-fw-stat-row {
          grid-template-columns: 1fr !important;
        }
        /* Monitoring heatmap: the fleet bar keeps FLEET + uptime +
           LIVE; the extended readouts (p95 / err / throughput) yield
           so nothing crowds at 360px. Name gutter and cell gaps
           tighten but every row keeps dot · name · cells · uptime. */
        .mlp-fw-hm-bar-ext {
          display: none !important;
        }
        .mlp-fw-hm-row {
          grid-template-columns: minmax(0, 92px) minmax(0, 1fr) 40px !important;
          gap: 7px !important;
        }
        .mlp-fw-hm-name {
          font-size: 9.5px !important;
        }
        .mlp-fw-hm-strip {
          gap: 2px !important;
        }
        /* Logs trace waterfall: each span stacks label-above-bar at
           full width; bars stay % proportional. The cross-row
           scanline and the axis gutter retire with the gutter, and
           only the 0s / 4.2s endpoints keep the axis. */
        .mlp-fw-trace-row {
          grid-template-columns: 1fr !important;
          row-gap: 3px !important;
        }
        .mlp-fw-trace-scanwrap,
        .mlp-fw-trace-axisgut,
        .mlp-fw-trace-tick-mid {
          display: none !important;
        }
        /* Trace header meta ("8 spans · 4.2 s · OTEL") yields. */
        .mlp-fw-trace-meta {
          display: none !important;
        }
        /* Logs readout strip reads as a vertical ledger. */
        .mlp-fw-logs-strip {
          flex-direction: column;
          align-items: flex-start !important;
        }
        /* Workspace connector strip: 4 nowrap chips overflow past
           ~375px, so fold them into a 2x2 grid and retire the
           looping packet (its horizontal track assumes one row). */
        .mlp-fw-connector-strip {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
          row-gap: 8px !important;
        }
        .mlp-fw-connector-strip .mlp-anim-fw-packet {
          display: none !important;
        }
        /* Workspace topology: stack the persona tiles as rows and
           swap the curved SVG (hardcoded x anchors) for a simple
           vertical wire so nothing misaligns. */
        .mlp-fw-topo-svg {
          display: none !important;
        }
        .mlp-fw-topo-vwire {
          display: block !important;
          width: 1.5px;
          height: 28px;
          margin: -10px auto;
          background: linear-gradient(180deg, #22D3EE88 0%, #8B5CF688 100%);
        }
        .mlp-fw-persona-row {
          grid-template-columns: 1fr !important;
          gap: 10px !important;
        }
        .mlp-fw-persona-row > div {
          flex-direction: row !important;
          justify-content: center !important;
          gap: 12px !important;
        }
        /* Compose pipeline: reclaim wire padding and let the slot
           card header wrap (model badge drops to its own line) so
           agent + role labels stay readable at 360px. */
        .mlp-fw-compose-cards {
          padding-left: 36px !important;
        }
        .mlp-fw-slot-head {
          flex-wrap: wrap !important;
        }
        .mlp-fw-slot-model {
          flex-basis: 100%;
          padding-left: 52px;
          margin-top: -2px;
        }
      }
      @media (max-width: 430px) {
        /* Narrow phone tier: trigger strip goes single column so
           cron bodies and the WEBHOOK label never crowd. */
        .mlp-fw-trigger-strip {
          grid-template-columns: 1fr !important;
        }
        /* Run-history rows: drop the "Replay" word (keep the ↺ icon)
           so status · time · model · replay never crowd at ~360px. */
        .mlp-fw-run-replay-label {
          display: none !important;
        }
        /* Monitoring heatmap legend: the "1 cell = 1 hour" caption
           yields so the four state swatches breathe at ~360px. */
        .mlp-fw-hm-caption {
          display: none !important;
        }
      }