/* The Features Multi-App tutorial (#multi-app-tutorial), ported from the live
   ridegrade.app under owner ruling W4 (2026-10-02). Source: the live-site
   snapshot of 2026-10-01, styles/features-polish.be2e1cec2d03.css.

   Every rule inside the feature-studio layer below is a live rule, only
   pretty-printed: each one compacts back (compactCssLexically in
   src/lib/css-delivery.mjs) to a rule found verbatim in the live stylesheet,
   which tests/multi-app-tutorial.test.mjs checks against the copy of those rules
   it holds. The blocks after the layer are this branch's own: the play/pause
   glyph swap that the live global stylesheet carried, and the panel span that
   puts the tutorial under the branch's two-column Multi-App panel. */

@layer feature-studio {
  .ma-tutorial {
    --ma-purple: #7045db;
    --ma-ink: #111a2b;
    --ma-muted: #5b687d;
    display: grid!important;
    gap: 22px!important;
    min-width: 0!important;
    font-family: var(--font-ui)!important;
    color: var(--ma-ink)!important;
  }
  .ma-tutorial :is(h3,p,ol,ul) {
    margin: 0!important;
    max-width: none!important;
    text-align: left!important;
    letter-spacing: normal!important;
  }
  .ma-tutorial p {
    font: 500 14px/1.6 var(--font-ui)!important;
    color: var(--ma-muted)!important;
  }
  .ma-tutorial h3 {
    font: 800 24px/1.2 var(--font-ui)!important;
    color: var(--ma-ink)!important;
  }
  .ma-tutorial .rg-icon {
    width: 20px!important;
    height: 20px!important;
    flex: 0 0 20px!important;
  }
  .ma-safety {
    display: flex!important;
    gap: 13px!important;
    padding: 18px 20px!important;
    background: #f0eaff!important;
    border: 1px solid #d3c2fa!important;
    border-radius: 16px!important;
  }
  .ma-safety strong {
    display: block!important;
    margin-bottom: 5px!important;
    font: 800 17px/1.3 var(--font-ui)!important;
    color: #402489!important;
  }
  .ma-prerequisites {
    display: grid!important;
    gap: 18px!important;
    padding: 22px!important;
    border: 1px solid #e3dcef!important;
    border-radius: 20px!important;
    background: #fff!important;
  }
  .ma-ready-heading {
    display: flex!important;
    flex-wrap: wrap!important;
    align-items: center!important;
    justify-content: space-between!important;
    gap: 8px!important;
  }
  .ma-ready-heading h3 {
    color: #6232c8!important;
    font-size: 20px!important;
  }
  .ma-ready-heading>span {
    color: #68768b!important;
    font: 600 11px/1.4 var(--font-ui)!important;
  }
  .ma-ready-grid {
    display: grid!important;
    grid-template-columns: repeat(3,minmax(0,1fr))!important;
    gap: 18px!important;
  }
  .ma-ready-item {
    display: flex!important;
    align-items: center!important;
    gap: 12px!important;
    min-width: 0!important;
    text-decoration: none!important;
    color: var(--ma-ink)!important;
  }
  .ma-ready-item + .ma-ready-item {
    border-left: 1px solid #e8e3f0!important;
    padding-left: 18px!important;
  }
  .ma-ready-item strong {
    font: 750 13px/1.4 var(--font-ui)!important;
  }
  .ma-ready-item p {
    margin: 3px 0 7px!important;
    font-size: 11px!important;
  }
  .ma-ready-art {
    display: grid!important;
    place-items: center!important;
    width: 48px!important;
    height: 54px!important;
    flex: 0 0 48px!important;
    border-radius: 14px!important;
    border: 1px solid #e6e2ee!important;
  }
  .ma-ready-art>.rg-icon {
    width: 28px!important;
    height: 28px!important;
  }
  .ma-ready-tag {
    display: inline-flex!important;
    align-items: center!important;
    gap: 5px!important;
    color: #5e438b!important;
    background: #f3eff9!important;
    border-radius: 6px!important;
    padding: 4px 6px!important;
    font: 700 10px/1.4 var(--font-ui)!important;
  }
  .ma-ready-tag .rg-icon {
    width: 12px!important;
    height: 12px!important;
    flex-basis: 12px!important;
  }
  .ma-ready-item[href] .ma-ready-tag {
    color: #075ad0!important;
    background: #ecf4ff!important;
  }
  .ma-demo-tabs {
    display: flex!important;
    justify-self: start!important;
    gap: 5px!important;
    padding: 5px!important;
    max-width: 100%!important;
    border: 1px solid #ded1f4!important;
    border-radius: 999px!important;
    background: #f3eefb!important;
  }
  .ma-demo-tabs [role=tab] {
    display: inline-flex!important;
    align-items: center!important;
    justify-content: center!important;
    gap: 8px!important;
    min-height: 46px!important;
    min-width: 0!important;
    padding: 10px 20px!important;
    border: 1px solid #0000!important;
    border-radius: 999px!important;
    background: #0000!important;
    color: #644994!important;
    box-shadow: none!important;
    font: 750 14px/1.3 var(--font-ui)!important;
    cursor: pointer;
  }
  .ma-demo-tabs [aria-selected=true] {
    background: #fff!important;
    color: #5923c6!important;
    border-color: #dbc9ff!important;
    box-shadow: 0 3px 8px #55269912!important;
  }
  .ma-demo[hidden] {
    display: none!important;
  }
  .ma-player {
    display: grid!important;
    gap: 24px!important;
    padding: 24px!important;
    border: 1px solid #dfd8ef!important;
    border-radius: 22px!important;
    background: #fff!important;
    box-shadow: 0 12px 34px -26px #4e27885c!important;
    min-width: 0!important;
  }
  .ma-demo {
    display: block!important;
    padding: 0!important;
    border: 0!important;
    border-radius: 0!important;
    background: none!important;
    box-shadow: none!important;
    overflow: visible!important;
    min-width: 0!important;
  }
  .ma-demo-heading {
    display: flex!important;
    align-items: center!important;
    gap: 12px!important;
    margin-bottom: 24px!important;
  }
  .ma-demo-emblem {
    display: grid!important;
    position: relative!important;
    place-items: center!important;
    flex: 0 0 58px!important;
    height: 58px!important;
    border-radius: 17px!important;
    border: 1px solid #8149f0!important;
    background: linear-gradient(140deg,#925bff,#5d27d3 80%)!important;
    box-shadow: inset 0 2px 2px #fff5,0 6px 14px -8px #6c37d9!important;
  }
  .ma-demo-emblem>.rg-icon {
    width: 35px!important;
    height: 35px!important;
    color: #fff!important;
  }
  .ma-demo-emblem>.rg-icon :is(svg,svg *) {
    color: #fff!important;
    stroke: #fff!important;
  }
  .ma-demo-number {
    display: grid!important;
    position: absolute!important;
    bottom: -5px!important;
    right: -5px!important;
    place-items: center!important;
    width: 24px!important;
    height: 24px!important;
    border: 2px solid #fff!important;
    border-radius: 50%!important;
    color: #fff!important;
    background: #6030cb!important;
    font: 800 10px var(--font-ui)!important;
  }
  .ma-demo-heading p {
    margin-top: 5px!important;
  }
  .ma-demo-body {
    display: grid!important;
    grid-template-columns: minmax(260px,.9fr) minmax(0,1fr)!important;
    align-items: center!important;
    gap: 36px!important;
  }
  .ma-phone-stage {
    display: grid!important;
    place-items: center!important;
    padding: 22px!important;
    background: linear-gradient(145deg,#f8fafc,#edf2f6)!important;
    border: 1px solid #e3e9ef!important;
    border-radius: 20px!important;
    min-width: 0!important;
  }
  .ma-stage-instruction {
    display: none!important;
  }
  .ma-guide {
    display: grid!important;
    gap: 18px!important;
    min-width: 0!important;
  }
  .ma-guide-label {
    display: flex!important;
    justify-content: space-between!important;
    align-items: center!important;
    gap: 10px!important;
  }
  .ma-guide-label strong {
    color: #442775!important;
    font: 750 13px/1.4 var(--font-ui)!important;
  }
  .ma-guide-label>span {
    font: 600 10px/1.4 var(--font-ui)!important;
    color: #69768a!important;
    white-space: nowrap!important;
  }
  .ma-step-list {
    display: grid!important;
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
    gap: 10px!important;
    padding: 0!important;
    list-style: none!important;
  }
  .ma-step-list li {
    margin: 0!important;
    padding: 0!important;
  }
  .ma-step-list button {
    display: flex!important;
    position: relative!important;
    flex-direction: column!important;
    align-items: flex-start!important;
    gap: 10px!important;
    width: 100%!important;
    height: 100%!important;
    min-height: 108px!important;
    padding: 13px!important;
    border: 1px solid #e5e1ec!important;
    border-radius: 14px!important;
    background: #fff!important;
    color: #435169!important;
    text-align: left!important;
    box-shadow: 0 2px 5px #22203b03!important;
    cursor: pointer;
  }
  .ma-step-number {
    display: grid!important;
    position: absolute!important;
    right: 12px!important;
    top: 12px!important;
    place-items: center!important;
    width: 24px!important;
    height: 24px!important;
    border-radius: 50%!important;
    color: #7857ae!important;
    background: #f1eafa!important;
    font: 800 11px var(--font-ui)!important;
  }
  .ma-step-art {
    display: grid!important;
    place-items: center!important;
    width: 38px!important;
    height: 38px!important;
    flex: 0 0 38px!important;
    border-radius: 11px!important;
  }
  .ma-step-art>.rg-icon {
    width: 25px!important;
    height: 25px!important;
  }
  .ma-step-art>.platform-icon {
    width: 29px!important;
    height: 29px!important;
    border-radius: 7px!important;
  }
  .ma-art-purple {
    background: #f0e8ff!important;
    color: #7040d9!important;
  }
  .ma-art-blue {
    background: #eaf2ff!important;
    color: #0867f2!important;
  }
  .ma-art-ink {
    background: #f0f1f4!important;
  }
  .ma-art-red {
    background: #fff0eb!important;
  }
  .ma-art-green {
    background: #eaf7f0!important;
  }
  .ma-art-gray {
    background: #edf0f5!important;
  }
  .ma-paired-apps {
    position: relative!important;
    display: block!important;
    width: 35px!important;
    height: 35px!important;
  }
  .ma-paired-apps .platform-icon {
    position: absolute!important;
    width: 25px!important;
    height: 25px!important;
    border: 2px solid #fff!important;
    border-radius: 7px!important;
  }
  .ma-paired-apps .platform-icon:first-child {
    top: 0!important;
    left: 0!important;
  }
  .ma-paired-apps .platform-icon:last-child {
    bottom: 0!important;
    right: 0!important;
  }
  .ma-recents-art {
    position: relative;
    width: 29px;
    height: 28px;
  }
  .ma-recents-art i {
    position: absolute;
    width: 16px;
    height: 23px;
    border: 1.5px solid #7040d9;
    border-radius: 4px;
    background: #fff;
    bottom: 0;
    right: 0;
  }
  .ma-recents-art i:first-child {
    transform: translate(-10px,-4px);
    opacity: .25;
  }
  .ma-recents-art i:nth-child(2) {
    transform: translate(-5px,-2px);
    opacity: .5;
  }
  .ma-reads-art {
    display: grid;
    gap: 4px;
    width: 27px;
  }
  .ma-reads-art i {
    height: 9px;
    border: 1.5px solid #14935a;
    background: #e2f6ec;
    border-radius: 5px;
  }
  .ma-reads-art i:last-child {
    border-color: #ba8107;
    background: #fff0cd;
  }
  .ma-step-list button b {
    font: 750 13px/1.4 var(--font-ui)!important;
  }
  .ma-step-list button[aria-current=step] {
    border-color: #8b60e5!important;
    background: #faf7ff!important;
    color: #5222b5!important;
    box-shadow: 0 0 0 2px #8a55e71a!important;
  }
  .ma-step-list button[aria-current=step] .ma-step-number {
    background: linear-gradient(140deg,#965cfc,#6330d0)!important;
    color: white!important;
  }
  .ma-step-description {
    min-height: 92px!important;
    border: 1px solid #e6dbf8!important;
    border-left: 3px solid #9466df!important;
    border-radius: 0 12px 12px 0!important;
    background: #faf7ff!important;
    padding: 14px 16px!important;
  }
  .ma-progress-track {
    display: flex!important;
    gap: 5px!important;
    height: 4px!important;
  }
  .ma-progress-track span {
    flex: 1!important;
    background: #e9e3f2!important;
    border-radius: 4px!important;
  }
  .ma-progress-track [data-reached=true] {
    background: #8050dc!important;
  }
  .ma-step-description [hidden] {
    display: none!important;
  }
  .ma-controls {
    display: flex!important;
    align-items: center!important;
    gap: 8px!important;
    flex-wrap: wrap!important;
  }
  .ma-controls button {
    display: inline-flex!important;
    align-items: center!important;
    justify-content: center!important;
    gap: 7px!important;
    min-height: 44px!important;
    padding: 10px 14px!important;
    border: 1px solid #dce2ed!important;
    border-radius: 10px!important;
    background: #fff!important;
    color: #243348!important;
    font: 750 12px/1.3 var(--font-ui)!important;
    cursor: pointer;
    box-shadow: none!important;
  }
  .ma-controls>span {
    margin-left: auto!important;
    font: 650 12px var(--font-ui)!important;
    color: #758093!important;
    font-variant-numeric: tabular-nums;
  }
  .ma-tutorial button:focus-visible,
  .ma-tutorial summary:focus-visible,
  .ma-tutorial a:focus-visible {
    outline: 3px solid #0867f2!important;
    outline-offset: 3px!important;
  }
  .ma-tutorial .ma-motion-note {
    font-size: 11px!important;
  }
  .ma-phone {
    width: min(100%,310px)!important;
    aspect-ratio: 320/600;
    position: relative!important;
    border: 8px solid #131c2b!important;
    border-radius: 36px!important;
    background: #141c2a!important;
    box-shadow: 0 15px 25px -16px #17203880!important;
    container-type: inline-size;
  }
  .ma-screen {
    position: absolute!important;
    inset: 0!important;
    overflow: hidden!important;
    border-radius: 27px!important;
    background: #edf3f4!important;
    isolation: isolate;
    font: 600 12px/1.4 var(--font-ui)!important;
  }
  .ma-screen :is(strong,b,small,span) {
    font-family: var(--font-ui)!important;
  }
  .ma-status {
    position: absolute!important;
    top: 0!important;
    left: 0!important;
    right: 0!important;
    height: 7%!important;
    display: flex!important;
    justify-content: space-between!important;
    align-items: center!important;
    padding: 0 7%!important;
    z-index: 20!important;
    color: #1b273a!important;
    font-size: clamp(10px,3.5cqw,12px)!important;
  }
  .ma-status-icons {
    width: 38px!important;
    height: 16px!important;
  }
  .ma-status-icons svg {
    width: 100%;
    height: 100%;
  }
  .ma-gesture {
    position: absolute!important;
    z-index: 22!important;
    bottom: 1.5%!important;
    left: 37%!important;
    width: 26%!important;
    height: 3px!important;
    border-radius: 5px!important;
    background: #253249!important;
  }
  .ma-home {
    position: absolute!important;
    inset: 0!important;
    background: #0000!important;
  }
  .ma-wallpaper {
    position: absolute!important;
    inset: 0!important;
    width: 100%!important;
    height: 100%!important;
    pointer-events: none;
  }
  .ma-system-shade {
    position: absolute!important;
    inset: 0!important;
    background: #102d40;
    opacity: 0;
    pointer-events: none;
  }
  [data-ma-demo=setup]:is([data-step="2"],[data-step="3"],[data-step="4"]) .ma-system-shade {
    opacity: .24;
  }
  .ma-home-time {
    position: absolute!important;
    top: 17%!important;
    width: 100%!important;
    text-align: center!important;
    font: 500 48px/1 var(--font-ui)!important;
    color: #253b4e!important;
  }
  .ma-home-date {
    position: absolute!important;
    top: 28%!important;
    width: 100%!important;
    text-align: center!important;
    font-size: 11px!important;
    color: #5f7384!important;
  }
  .ma-home-apps {
    position: absolute!important;
    bottom: 17%!important;
    left: 7%!important;
    right: 7%!important;
    display: grid!important;
    grid-template-columns: repeat(4,minmax(0,1fr))!important;
    gap: 8px!important;
  }
  .ma-home .ma-app-icon {
    color: #f6fbff!important;
  }
  .ma-setup-phone .ma-gesture {
    background: #e7f4f6!important;
  }
  .ma-app-icon {
    display: flex!important;
    flex-direction: column!important;
    align-items: center!important;
    gap: 8px!important;
    color: #28344a!important;
    font: 650 clamp(9px,3.1cqw,11px)/1.2 var(--font-ui)!important;
    white-space: nowrap;
  }
  .ma-app-icon>:is(.platform-icon,.ma-rg,.rg-icon) {
    width: 40px!important;
    height: 40px!important;
    flex-basis: 40px!important;
    border-radius: 12px!important;
    box-shadow: 0 3px 8px #18203514!important;
  }
  .ma-app-icon>.rg-icon {
    padding: 8px!important;
    background: #fff!important;
  }
  .ma-rg {
    display: grid!important;
    place-items: center!important;
    background: #fff!important;
    border: 1px solid #e1e6ec!important;
    border-radius: 8px!important;
  }
  .ma-rg img {
    display: block!important;
    width: 82%!important;
    height: auto!important;
    max-height: 80%!important;
    object-fit: contain!important;
  }
  .ma-map {
    position: absolute!important;
    inset: 0!important;
    width: 100%!important;
    height: 100%!important;
  }
  .ma-first-app,
  .ma-recents,
  .ma-app-menu,
  .ma-pinned-app,
  .ma-picker,
  .ma-second-app,
  .ma-ready-label,
  .ma-touch {
    position: absolute!important;
    opacity: 0;
    pointer-events: none;
  }
  .ma-first-app {
    inset: 7% 0 4%!important;
    transform: translate(-24%,30%) scale(.18);
    transform-origin: center;
    border-radius: 18px;
    overflow: hidden;
  }
  .ma-wait {
    position: absolute!important;
    inset: 0!important;
    color: #243348!important;
    font-size: clamp(10px,3.4cqw,12px)!important;
  }
  .ma-driver-toolbar {
    display: grid!important;
    grid-template-columns: 34px minmax(0,1fr) 34px!important;
    align-items: start!important;
    gap: 8px!important;
    position: absolute!important;
    top: 6%!important;
    left: 6%!important;
    right: 6%!important;
  }
  .ma-driver-round {
    display: grid!important;
    place-items: center!important;
    width: 34px!important;
    height: 34px!important;
    background: #fff!important;
    border: 1px solid #e0e5e7!important;
    border-radius: 50%!important;
    color: #171d24!important;
    box-shadow: 0 2px 6px #293e5012!important;
  }
  .ma-driver-round>svg {
    width: 18px!important;
    height: 18px!important;
  }
  .ma-driver-earnings {
    display: grid!important;
    justify-items: center!important;
    gap: 4px!important;
    justify-self: center!important;
    padding: 8px 16px!important;
    border-radius: 24px!important;
    background: #141414!important;
    color: #fff!important;
    box-shadow: 0 3px 8px #19212818!important;
  }
  .ma-driver-earnings strong {
    font: 800 clamp(17px,6.4cqw,22px)/1 var(--font-ui)!important;
    color: #fff!important;
  }
  .ma-driver-earnings small {
    font: 650 8px/1.2 var(--font-ui)!important;
    color: #e8ebef!important;
    white-space: nowrap;
  }
  .ma-wait .platform-icon {
    border-radius: 7px!important;
  }
  .ma-offer-app .platform-icon {
    width: 24px!important;
    height: 24px!important;
    border-radius: 7px!important;
  }
  .ma-wait-brand .platform-icon {
    width: 22px!important;
    height: 22px!important;
    flex: 0 0 22px!important;
  }
  .ma-driver-location {
    position: absolute!important;
    left: 55%!important;
    top: 43%!important;
    transform: translate(-50%,-50%);
    display: grid!important;
    place-items: center!important;
    width: 34px!important;
    height: 34px!important;
    background: #fff!important;
    border: 1px solid #a7c8ee!important;
    border-radius: 50%!important;
    box-shadow: 0 0 0 10px #0867f20b,0 2px 6px #315a7b24!important;
  }
  .ma-driver-location>.rg-icon {
    width: 20px!important;
    height: 20px!important;
    flex-basis: 20px!important;
    color: #0867f2!important;
  }
  .ma-wait[data-app=doordash] .ma-driver-location {
    border-color: #efc3a5!important;
    box-shadow: 0 0 0 10px #df6a230b,0 2px 6px #7b493124!important;
  }
  .ma-wait[data-app=doordash] .ma-driver-location>.rg-icon {
    color: #c25118!important;
  }
  .ma-wait-panel {
    position: absolute!important;
    left: 0!important;
    right: 0!important;
    bottom: 0!important;
    display: grid!important;
    gap: 7px!important;
    text-align: center!important;
    padding: 10px 12px 12px!important;
    background: #fff!important;
    border: 0!important;
    border-top: 1px solid #dce4ea!important;
    border-radius: 17px 17px 0 0!important;
    box-shadow: 0 -3px 14px #2531430e!important;
  }
  .ma-sheet-grip {
    width: 26px!important;
    height: 3px!important;
    background: #cdd2d6!important;
    border-radius: 3px!important;
    justify-self: center!important;
  }
  .ma-driver-state {
    display: grid!important;
    grid-template-columns: 24px minmax(0,1fr) 24px!important;
    align-items: center!important;
    gap: 5px!important;
  }
  .ma-driver-state>div {
    display: grid!important;
    gap: 3px!important;
  }
  .ma-driver-state strong {
    display: flex!important;
    justify-content: center!important;
    align-items: center!important;
    gap: 5px!important;
    font-size: clamp(12px,4.1cqw,15px)!important;
    line-height: 1.3!important;
    color: #151c25!important;
    white-space: nowrap!important;
  }
  .ma-online-dot {
    width: 5px!important;
    height: 5px!important;
    border-radius: 50%!important;
    background: #22854d!important;
  }
  .ma-driver-state small {
    font-size: 10px!important;
    line-height: 1.3!important;
    color: #596574!important;
  }
  .ma-driver-setting>.rg-icon {
    width: 18px!important;
    height: 18px!important;
    flex-basis: 18px!important;
    color: #25303c!important;
  }
  .ma-wait-panel>.ma-driver-context {
    font-size: 8px!important;
    line-height: 1.3!important;
    color: #687483!important;
  }
  :is(.ma-pinned-app,.ma-second-app,.ma-offer-half,.ma-recent-preview) .ma-driver-earnings {
    padding: 6px 12px!important;
  }
  :is(.ma-pinned-app,.ma-second-app,.ma-offer-half,.ma-recent-preview) .ma-driver-earnings strong {
    font-size: 16px!important;
  }
  :is(.ma-pinned-app,.ma-second-app,.ma-offer-half) .ma-wait-panel {
    gap: 5px!important;
    padding: 7px 10px 9px!important;
  }
  .ma-wait[data-app=doordash] .ma-driver-earnings {
    background: #b82f22!important;
  }
  .ma-recents {
    inset: 10% 12% 12%!important;
    transform: translateY(14px) scale(1.08);
  }
  .ma-recents-icon {
    display: grid!important;
    place-items: center!important;
    height: 12%!important;
  }
  .ma-recents-icon .platform-icon {
    width: 30px!important;
    height: 30px!important;
  }
  .ma-recent-preview {
    position: absolute!important;
    top: 14%!important;
    bottom: 8%!important;
    width: 100%!important;
    overflow: hidden!important;
    border-radius: 16px!important;
    border: 1px solid #d3d7e3!important;
  }
  .ma-recent-caption {
    position: absolute!important;
    bottom: 0!important;
    width: 100%!important;
    text-align: center!important;
    color: #f4f9fc!important;
    font-size: 10px!important;
  }
  .ma-app-menu {
    z-index: 4!important;
    top: 18%!important;
    left: 10%!important;
    right: 10%!important;
    padding: 10px!important;
    background: #fff!important;
    border: 1px solid #d8dbea!important;
    border-radius: 16px!important;
    box-shadow: 0 12px 30px #22233a24!important;
    transform: translateY(-8px);
  }
  .ma-app-menu>span {
    display: flex!important;
    align-items: center!important;
    gap: 8px!important;
    padding: 11px 8px!important;
    font-size: clamp(10px,3.7cqw,12px)!important;
    color: #34425a!important;
  }
  .ma-app-menu .platform-icon {
    width: 24px!important;
    height: 24px!important;
  }
  .ma-app-menu .ma-menu-choice {
    background: #f0eaff!important;
    color: #6038c6!important;
    border-radius: 9px!important;
  }
  .ma-pinned-app {
    top: 7%!important;
    bottom: 51%!important;
    left: 0!important;
    right: 0!important;
    overflow: hidden!important;
    transform: translateY(-14px);
  }
  .ma-picker {
    inset: 51% 0 4%!important;
    padding: 30px 20px!important;
    background: #0000!important;
    transform: translateY(55px);
  }
  .ma-picker>strong {
    display: block!important;
    text-align: center!important;
    color: #fff!important;
    font-size: 12px!important;
    margin-bottom: 28px!important;
  }
  .ma-picker .ma-app-icon {
    color: #f6fbff!important;
  }
  .ma-picker>div {
    display: flex!important;
    justify-content: center!important;
    gap: 32px!important;
  }
  .ma-second-app {
    top: 51%!important;
    bottom: 4%!important;
    left: 0!important;
    right: 0!important;
    overflow: hidden!important;
    transform: translateY(16px);
  }
  .ma-divider {
    position: absolute!important;
    z-index: 5!important;
    top: 49%!important;
    height: 2%!important;
    width: 100%!important;
    display: grid!important;
    place-items: center!important;
    background: #172032!important;
    opacity: 0;
  }
  .ma-divider i {
    width: 30px!important;
    height: 3px!important;
    border-radius: 3px!important;
    background: #a8afc1!important;
  }
  .ma-ready-label {
    z-index: 6!important;
    left: 12%!important;
    right: 12%!important;
    top: 46.3%!important;
    padding: 10px 8px!important;
    display: flex!important;
    justify-content: center!important;
    align-items: center!important;
    gap: 6px!important;
    background: #fff!important;
    border: 1px solid #c6b5ee!important;
    border-radius: 12px!important;
    font-size: 11px!important;
    color: #44316c!important;
    transform: translateY(8px);
  }
  .ma-touch {
    z-index: 25!important;
    width: 100%!important;
    height: 100%!important;
    left: 0!important;
    top: 0!important;
    transform: translate(12%,73%);
  }
  .ma-touch i {
    position: absolute;
    width: 28px;
    height: 28px;
    border: 2px solid #7145d9;
    border-radius: 50%;
    background: #b89ce760;
    box-shadow: 0 0 0 6px #b89ce728;
    opacity: 0;
  }
  [data-ma-demo=setup][data-step="0"] .ma-touch {
    opacity: 1;
  }
  [data-ma-demo=setup][data-step="1"] .ma-first-app {
    opacity: 1;
    transform: none;
  }
  [data-ma-demo=setup][data-step="1"] .ma-touch {
    opacity: 1;
    transform: translate(45%,89%);
  }
  [data-ma-demo=setup]:is([data-step="2"],[data-step="3"]) .ma-recents {
    opacity: 1;
    transform: none;
  }
  [data-ma-demo=setup][data-step="2"] .ma-touch {
    opacity: 1;
    transform: translate(45%,13%);
  }
  [data-ma-demo=setup][data-step="3"] .ma-app-menu {
    opacity: 1;
    transform: none;
  }
  [data-ma-demo=setup][data-step="3"] .ma-touch {
    opacity: 1;
    transform: translate(64%,40%);
  }
  [data-ma-demo=setup]:is([data-step="4"],[data-step="5"]) :is(.ma-pinned-app,.ma-divider),
  [data-ma-demo=setup][data-step="4"] .ma-picker {
    opacity: 1;
    transform: none;
  }
  [data-ma-demo=setup][data-step="4"] .ma-touch {
    opacity: 1;
    transform: translate(28%,71%);
  }
  [data-ma-demo=setup][data-step="5"] :is(.ma-second-app,.ma-ready-label) {
    opacity: 1;
    transform: none;
  }
  [data-ma-demo=setup]:not([data-step="0"]) .ma-home {
    opacity: 0;
  }
  .ma-offers-phone .ma-screen {
    background: #edf3f4!important;
  }
  .ma-offer-half {
    position: absolute!important;
    left: 0!important;
    right: 0!important;
    overflow: hidden!important;
  }
  .ma-offer-top {
    top: 7%!important;
    height: 42%!important;
  }
  .ma-offer-bottom {
    top: 51%!important;
    bottom: 4%!important;
  }
  .ma-offers-phone .ma-divider {
    opacity: 1;
  }
  .ma-offer {
    position: absolute!important;
    inset: 9% 6% 5%!important;
    display: flex!important;
    flex-direction: column!important;
    justify-content: center!important;
    padding: 10px 13px!important;
    background: #fff!important;
    border: 1px solid #dce3ec!important;
    border-radius: 17px!important;
    box-shadow: 0 5px 14px #25314312!important;
    opacity: 0;
    transform: translateY(36px) scale(.97);
  }
  .ma-offer-app {
    display: flex!important;
    align-items: center!important;
    gap: 6px!important;
    font-size: clamp(10px,3.4cqw,12px)!important;
  }
  .ma-offer-app small {
    margin-left: auto!important;
    font-size: 9px!important;
    color: #6b788e!important;
  }
  .ma-pay {
    display: block!important;
    margin: 6px 0 2px!important;
    color: #141a21!important;
    font: 800 clamp(23px,10cqw,34px)/1.1 var(--font-ui)!important;
  }
  .ma-offer-facts {
    font-size: clamp(10px,3.5cqw,12px)!important;
    color: #23324a!important;
  }
  .ma-offer>small {
    font-size: 9px!important;
    color: #718097!important;
    margin-top: 3px!important;
  }
  .ma-source-action {
    display: block!important;
    text-align: center!important;
    padding: 7px!important;
    margin-top: 8px!important;
    border-radius: 8px!important;
    background: #141414!important;
    color: #fff!important;
    font-size: 11px!important;
  }
  .ma-offer-doordash .ma-source-action {
    background: #e63021!important;
  }
  [data-ma-demo=offers]:not([data-step="0"]) .ma-offer-uber {
    opacity: 1;
    transform: none;
  }
  [data-ma-demo=offers]:not([data-step="0"]) .ma-offer-top .ma-wait,
  [data-ma-demo=offers]:not([data-step="0"]):not([data-step="1"]) .ma-offer-bottom .ma-wait {
    opacity: 0;
  }
  [data-ma-demo=offers]:not([data-step="0"]):not([data-step="1"]) .ma-offer-doordash {
    opacity: 1;
    transform: none;
  }
  .ma-double-read {
    position: absolute!important;
    z-index: 7!important;
    top: 40%!important;
    left: 10%!important;
    right: 10%!important;
    padding: 8px!important;
    border: 1.5px solid #865ddb!important;
    border-radius: 15px!important;
    background: #fff!important;
    box-shadow: 0 5px 20px #2a164b24!important;
    opacity: 0;
    transform: translateY(8px) scale(.98);
  }
  .ma-double-read>div:first-child {
    display: flex!important;
    align-items: center!important;
    gap: 5px!important;
    margin-bottom: 6px!important;
    font-size: 10px!important;
  }
  .ma-double-read .ma-rg {
    width: 23px!important;
    height: 23px!important;
    font-size: 10px!important;
  }
  .ma-double-read>div:first-child>span:last-child {
    margin-left: auto!important;
    color: #7045db!important;
    font-weight: 800!important;
  }
  .ma-read-row {
    display: flex!important;
    align-items: center!important;
    gap: 8px!important;
    padding: 5px 7px!important;
    border-radius: 8px!important;
    margin-top: 4px!important;
    font-size: clamp(10px,3.8cqw,13px)!important;
  }
  .ma-read-row>.ma-read-mark {
    display: grid!important;
    place-items: center!important;
    flex: 0 0 24px!important;
    width: 24px!important;
    height: 24px!important;
    min-width: 24px!important;
    margin: 0!important;
    padding: 0!important;
    border: 0!important;
    border-radius: 7px!important;
    background: var(--ma-read-fill)!important;
    color: #fff!important;
    -webkit-text-fill-color: #fff!important;
    font: 900 10px/1 var(--font-sans)!important;
    letter-spacing: 0!important;
    box-shadow: none!important;
  }
  .ma-read-row>span {
    margin-left: auto!important;
    font-size: 10px!important;
    font-weight: 700!important;
  }
  .ma-read-green {
    --ma-read-fill: #14935a;
    background: #e9f7ef!important;
    color: #087943!important;
  }
  .ma-read-yellow {
    --ma-read-fill: #e69500;
    background: #fff6dc!important;
    color: #946400!important;
  }
  .ma-missing-distance {
    display: none!important;
  }
  [data-ma-demo=offers]:is([data-step="3"],[data-step="4"],[data-step="5"]) .ma-double-read {
    opacity: 1;
    transform: none;
  }
  [data-ma-demo=offers]:is([data-step="4"],[data-step="5"]) .ma-known-distance {
    display: none!important;
  }
  [data-ma-demo=offers]:is([data-step="4"],[data-step="5"]) .ma-missing-distance {
    display: inline!important;
  }
  [data-ma-demo=offers]:is([data-step="4"],[data-step="5"]) .ma-read-yellow {
    --ma-read-fill: #7b8494;
    background: #edf0f5!important;
    color: #626d80!important;
  }
  .ma-choose-one {
    position: absolute!important;
    z-index: 9!important;
    bottom: 7%!important;
    left: 6%!important;
    right: 6%!important;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    gap: 5px!important;
    padding: 10px 5px!important;
    border: 1px solid #c3adef!important;
    background: #f6f1ff!important;
    border-radius: 10px!important;
    font-size: 11px!important;
    color: #543393!important;
    opacity: 0;
    transform: translateY(8px);
  }
  [data-ma-demo=offers][data-step="5"] .ma-choose-one {
    opacity: 1;
    transform: none;
  }
  .ma-faq {
    padding-top: 12px!important;
  }
  .ma-faq-intro {
    margin: 8px 0 20px!important;
  }
  .ma-faq details {
    border-bottom: 1px solid #dce2ed!important;
    padding: 0!important;
    background: none!important;
    box-shadow: none!important;
    border-radius: 0!important;
  }
  .ma-faq summary {
    display: flex!important;
    align-items: center!important;
    justify-content: space-between!important;
    gap: 15px!important;
    min-height: 56px!important;
    padding: 15px 2px!important;
    color: #253348!important;
    font: 750 15px/1.4 var(--font-ui)!important;
    cursor: pointer;
    list-style: none!important;
  }
  .ma-faq summary::after {
    content: none!important;
  }
  .ma-faq summary::-webkit-details-marker {
    display: none;
  }
  .ma-faq summary>.rg-icon {
    transform: rotate(90deg);
  }
  .ma-faq details[open] summary>.rg-icon {
    transform: rotate(-90deg);
  }
  .ma-faq details>p {
    padding: 0 2px 16px!important;
  }
  .ma-faq a {
    color: #5932ba!important;
    text-decoration: underline!important;
    text-underline-offset: 3px;
  }
  .ma-written-steps {
    display: grid!important;
    gap: 12px!important;
    padding: 0 0 20px 24px!important;
    font: 500 14px/1.65 var(--font-ui)!important;
    color: #53637a!important;
  }
  .ma-written-steps li {
    padding-left: 5px!important;
  }
  .ma-written-steps strong {
    color: #253348!important;
    font-weight: 750!important;
  }
  .ma-tutorial .ma-validation {
    font-size: 12px!important;
  }
  @media (prefers-reduced-motion:no-preference) {
    .ma-step-list button {
      transition: background-color 220ms ease,border-color 220ms ease,color 220ms ease;
    }
  }
  .ma-screen * {
    transition: none!important;
  }
  @media (max-width:760px) {
    .ma-player {
      padding: 18px!important;
    }
    .ma-demo-body {
      grid-template-columns: minmax(0,1fr)!important;
      gap: 22px!important;
    }
    .ma-demo-heading {
      flex-wrap: wrap!important;
      gap: 10px!important;
    }
    .ma-demo-heading>div {
      flex: 1!important;
    }
    .ma-demo-heading h3 {
      font-size: 21px!important;
    }
    .ma-phone-stage {
      padding: 16px!important;
    }
    .ma-stage-instruction {
      display: flex!important;
      align-items: center!important;
      gap: 9px!important;
      width: 100%!important;
      min-height: 40px!important;
      padding: 0 0 12px!important;
      color: #543490!important;
    }
    .ma-stage-instruction>span {
      font: 800 11px var(--font-ui)!important;
      white-space: nowrap;
    }
    .ma-stage-instruction>strong {
      font: 750 12px/1.4 var(--font-ui)!important;
    }
    .ma-step-description {
      min-height: 72px!important;
    }
    .ma-safety {
      padding: 16px!important;
    }
    .ma-ready-grid {
      grid-template-columns: minmax(0,1fr)!important;
      gap: 14px!important;
    }
    .ma-ready-item + .ma-ready-item {
      border-left: 0!important;
      padding-left: 0!important;
      border-top: 1px solid #e8e3f0!important;
      padding-top: 14px!important;
    }
    .ma-prerequisites {
      padding: 18px!important;
    }
    .ma-demo-tabs {
      justify-self: stretch!important;
    }
    .ma-demo-tabs [role=tab] {
      flex: 1!important;
      padding: 10px 9px!important;
      font-size: 13px!important;
    }
    .ma-step-list button {
      min-height: 112px!important;
    }
  }
  @media (max-width:380px) {
    .ma-player {
      padding: 12px!important;
    }
    .ma-phone-stage {
      padding: 6px!important;
    }
    .ma-phone {
      border-width: 6px!important;
      border-radius: 28px!important;
    }
    .ma-screen {
      border-radius: 22px!important;
    }
    .ma-app-icon>:is(.platform-icon,.ma-rg,.rg-icon) {
      width: 32px!important;
      height: 32px!important;
      flex-basis: 32px!important;
    }
    .ma-double-read {
      left: 5%!important;
      right: 5%!important;
    }
    .ma-safety {
      gap: 8px!important;
      padding: 12px!important;
    }
  }
}

/* Branch rule: the play/pause glyph swap that the live global stylesheet
   carried (2026-10-01), so the Pause button shows Play while a tutorial is
   paused. */
#multi-app-tutorial [data-playback-glyph] [data-glyph=play],
#multi-app-tutorial [data-playback-glyph][data-state=play] [data-glyph=pause] {
  display: none;
}

#multi-app-tutorial [data-playback-glyph][data-state=play] [data-glyph=play] {
  display: inline;
}