/* The Duet story section (src/pages/phones.rs), site-owned. Every rule is scoped to
   .duet-story, so nothing here reaches what site.css styles or site.js animates; the
   phone hardware (.phone, .scr) and the stage's scaling are site.css's.

   The screens follow the October 21 Duet mockups (ENG-168, ENG-169): each .ds-app is
   laid out at the mockups' native 390 x 874 points with their own sizes and colours,
   and scaled to the 298-pixel screen.

   The markup is the story's last frame, which reduced-motion and no-script visitors
   see. /a/2eaa744c6b7d3a95d743e4d94b4791b93824b66e87b03ced44683aa0e04e7cbc/homepage/duet.js adds .ds-play and steps through the story: under .ds-play a
   part shows once it is .on; the stage's data-day and data-step say where the story
   stands; on narrow stages data-focus brings the phone doing the work to the front. */
.duet-story{width:1280px;height:760px;--ds-ink:#202a27;--ds-secondary:#5f6b65;--ds-label:#66736b;--ds-green:#245b48;--ds-green-card:#f2f7f3;--ds-line:#e7ebe7;--ds-canvas:#fdfefd;--ds-ease:cubic-bezier(.22,.8,.24,1)}
.compact .duet-story{width:640px;height:820px}
.duet-story .ds-scr{background:var(--ds-canvas)}
.duet-story .ds-app{position:absolute;left:0;top:0;width:390px;height:874px;transform:scale(.7641);transform-origin:0 0;display:flex;flex-direction:column;background:var(--ds-canvas);color:var(--ds-ink);font-family:-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;text-align:left}
/* The mockups' base margins, below every component's own (:where adds nothing). */
.duet-story :where(.ds-app,.ds-clin) p{margin:0 0 12px}
.duet-story :where(.ds-app,.ds-clin) :where(h1,h2,h3){margin:0;letter-spacing:-.025em}

/* phone chrome */
.duet-story .ds-status{position:relative;height:54px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:14px;font-weight:600;background:var(--ds-canvas)}
.duet-story .ds-island{position:absolute;left:50%;top:10px;width:106px;height:28px;margin-left:-53px;border-radius:18px;background:#101514}
.duet-story .ds-home{position:absolute;bottom:7px;left:50%;width:122px;height:5px;margin-left:-61px;border-radius:5px;background:#1c2429;z-index:9}
.duet-story .ds-tabs{display:flex;gap:12px;flex-shrink:0;padding:7px 21px 21px;border-top:1px solid #edf0eb;background:#fff}
.duet-story .ds-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:48px;border-radius:19px;color:#768079;font-size:10px}
.duet-story .ds-tab.ds-on{background:#edf4ed;color:var(--ds-green);font-weight:600}
.duet-story .ds-tab .ds-icon{width:23px;height:23px;stroke-width:1.5}
.duet-story .ds-icon{width:22px;height:22px;flex-shrink:0;stroke-width:1.7}
.duet-story .ds-bar{height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 22px;background:var(--ds-canvas);font-size:14px}
.duet-story .ds-bar-side{min-width:44px;display:flex;align-items:center;color:var(--ds-green);font-size:15px}
.duet-story .ds-bar-edit{justify-content:flex-end}
.duet-story .ds-bar-title{flex:1;text-align:center;font-size:15px;font-weight:600;letter-spacing:-.2px}
.duet-story .ds-bar-date{font-size:12px;color:var(--ds-secondary);letter-spacing:.1px}
.duet-story .ds-scroll{flex:1;min-height:0;overflow:hidden;padding:6px 22px 28px;background:var(--ds-canvas)}
.duet-story .ds-face{width:25px;height:25px;flex-shrink:0;border-radius:50%;object-fit:cover;object-position:50% 18%}

/* shared pieces */
.duet-story .ds-caption{font-size:13px;color:var(--ds-secondary);line-height:1.5}
.duet-story .ds-section{display:flex;align-items:center;min-height:22px;margin:27px 0 12px;font-size:17px;font-weight:600;letter-spacing:-.35px}
.duet-story .ds-card{display:block;margin-bottom:12px;padding:18px;border:1px solid var(--ds-line);border-radius:22px;background:#fff}
.duet-story .ds-card-h{display:flex;align-items:center;gap:9px;margin-bottom:10px;font-size:14px;font-weight:550}
.duet-story .ds-card-title{margin-bottom:18px;font-size:22px;font-weight:550;line-height:1.26;letter-spacing:-.65px}
.duet-story .ds-flat{padding:2px 15px}
.duet-story .ds-row{display:flex;align-items:center;gap:12px;min-height:64px;padding:14px 0}
.duet-story .ds-copy{flex:1}
.duet-story .ds-row strong{display:block;font-size:15px;font-weight:550;line-height:1.35;letter-spacing:-.2px}
.duet-story .ds-row small{display:block;margin-top:5px;font-size:13px;color:var(--ds-secondary);line-height:1.4}
.duet-story .ds-row-icon{width:34px;height:34px;padding:7px;flex-shrink:0;border-radius:11px;background:#eef4ef;color:var(--ds-green);stroke-width:1.6}
.duet-story .ds-chevron{margin-left:auto;flex-shrink:0;color:#89958d;font-size:20px;font-weight:300}
.duet-story .ds-action{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:50px;padding:13px 16px;border-radius:18px;background:var(--ds-green);color:#fff;font-size:15px;font-weight:550;transition:transform .25s var(--ds-ease),filter .25s}
.duet-story .ds-action .ds-icon{width:20px;height:20px}
.duet-story .ds-text-link{display:flex;align-items:center;min-height:44px;padding:9px 0;color:var(--ds-green);font-size:14px}
.duet-story .ds-footer{flex-shrink:0;padding:12px 22px 20px;border-top:1px solid var(--ds-line);background:#fff}
.duet-story .ds-after{margin:8px 0 0;font-size:12px;color:var(--ds-secondary);text-align:center}
.duet-story .ds-doc-label{margin:0 0 13px;font-size:11px;font-weight:600;letter-spacing:.8px;color:#667563}
/* A tap: what Maya presses, briefly pressed in. */
.duet-story .press{transform:scale(.95);filter:brightness(.9)}
/* What Duet just brought arrives with a ring that fades once it has been seen. */
.duet-story .ds-card.glow,.duet-story .ds-object.glow,.duet-story .ds-update.glow{box-shadow:0 0 0 3px #b9d3c3}

/* Sections that open as the story reaches them. */
.duet-story .ds-coming,.duet-story .ds-fold{display:grid;grid-template-rows:1fr;transition:grid-template-rows .7s var(--ds-ease),opacity .5s var(--ds-ease)}
.duet-story .ds-coming>div,.duet-story .ds-fold>div{overflow:hidden;min-height:0}

/* 1 · Today */
.duet-story .ds-hero{margin:3px 0 25px;font-size:33px;font-weight:550;line-height:1.12;letter-spacing:-1.15px}
.duet-story[data-day=thu] .ds-mon,.duet-story[data-day=mon] .ds-thu{display:none}
.duet-story .ds-insight{padding:18px 19px 16px;border-color:#dce5db;box-shadow:0 4px 18px #263d2905;transition:box-shadow .6s var(--ds-ease),opacity .6s var(--ds-ease),transform .6s var(--ds-ease)}
.duet-story .ds-insight .ds-card-h{margin-bottom:15px;font-size:10px;font-weight:600;letter-spacing:.95px;text-transform:uppercase;color:#5b6e5e}
.duet-story .ds-insight .ds-face{width:24px;height:24px;padding:2px;background:#f1f4e8}
.duet-story.ds-play .ds-insight:not(.on){opacity:0;transform:translateY(10px)}
.duet-story .ds-compare{display:flex;flex-direction:column;gap:7px;margin:15px 0 4px}
.duet-story .ds-compare-cap{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--ds-secondary);font-variant-numeric:tabular-nums}
.duet-story .ds-compare-line{height:7px;border-radius:5px;background:#56836e}
.duet-story .ds-compare-line.ds-pale{background:#dce7de}
.duet-story .ds-insight-foot{display:flex;align-items:center;gap:5px;margin-top:15px;padding-top:12px;border-top:1px solid var(--ds-line);font-size:12px;color:#617165}
.duet-story .ds-insight-foot .ds-icon{width:13px;height:13px;stroke-width:1.5}
.duet-story .ds-insight-foot .ds-chevron{font-size:18px}
.duet-story.ds-play .ds-coming:not(.on){grid-template-rows:0fr;opacity:0}
.duet-story .ds-fd-update,.duet-story:is([data-step=ready],[data-step=review]) .ds-fd-saved{display:none}
.duet-story:is([data-step=ready],[data-step=review]) .ds-fd-update{display:inline}
.duet-story .ds-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.duet-story .ds-tiles .ds-card{margin-bottom:0;padding:15px 14px;border-color:#e7eee8;border-radius:18px;background:var(--ds-green-card)}
.duet-story .ds-tiles .ds-card-h{gap:7px;margin-bottom:13px;font-size:13px;font-weight:500;color:var(--ds-green)}
.duet-story .ds-measure{margin-bottom:7px;font-size:27px;font-weight:550;line-height:1.2;letter-spacing:-.8px;white-space:nowrap;font-variant-numeric:tabular-nums}
.duet-story .ds-measure small{margin-left:3px;font-size:15px;font-weight:400;letter-spacing:-.2px}
.duet-story .ds-tiles .ds-caption{margin:0;font-size:11px}
.duet-story .ds-spark{display:block;width:100%;height:40px;margin-top:15px;color:#4b8468;overflow:visible}

/* 2 · The conversation */
.duet-story .ds-chat-h{position:relative;flex-shrink:0;height:60px;display:flex;align-items:center;justify-content:center;gap:9px;border-bottom:1px solid var(--ds-line);background:#fff;font-size:16px;font-weight:550}
.duet-story .ds-chat{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;background:#fff}
.duet-story.ds-play .ds-chat{justify-content:flex-start}
.duet-story .ds-thread{position:relative;display:flex;flex-direction:column;gap:24px;padding:23px 22px 18px;transition:transform .6s var(--ds-ease)}
.duet-story .ds-date{margin-bottom:8px;font-size:11px;color:#78837c;text-align:center}
.duet-story .ds-bubble{align-self:flex-start;max-width:100%;font-size:16px;line-height:1.6}
.duet-story .ds-bubble p{margin:0 0 10px}
.duet-story .ds-bubble p:last-child{margin-bottom:0}
.duet-story .ds-bubble.ds-user{align-self:flex-end;max-width:86%;padding:12px 16px;border-radius:21px 21px 5px 21px;background:#f1f4ef}
.duet-story .ds-bubble .ds-action{margin-top:15px;font-size:14px}
.duet-story .ds-bubble .ds-caption{margin-top:8px}
.duet-story .ds-offer .ds-added,.duet-story .ds-offer.ds-accepted .ds-accept{display:none}
.duet-story .ds-offer.ds-accepted .ds-added{display:block}
.duet-story .ds-object{display:block;width:100%;min-height:90px;margin-top:16px;padding:17px;border:1px solid #dce5dc;border-radius:19px;background:#fff;box-shadow:0 3px 14px #21403106;transition:box-shadow .6s var(--ds-ease),transform .25s var(--ds-ease),filter .25s}
.duet-story .ds-msg.ds-object{margin-top:-8px}
.duet-story .ds-review-link{min-height:0;font-size:16px;font-weight:550;color:var(--ds-ink)}
.duet-story .ds-receipt{display:flex;align-items:center;gap:12px}
.duet-story .ds-receipt .ds-icon{width:38px;height:44px;padding:9px;border-radius:9px;background:#edf4ec;color:var(--ds-green)}
.duet-story .ds-receipt strong{display:block;font-size:17px;font-weight:550;line-height:1.35;letter-spacing:-.35px}
.duet-story .ds-receipt small{display:block;margin-top:5px;font-size:13px;color:var(--ds-secondary)}
/* In play, a message takes its place in the thread only once it arrives. */
.duet-story.ds-play .ds-msg:not(.on){display:none}
.duet-story.ds-play .ds-msg.on{animation:ds-arrive .45s var(--ds-ease)}
@keyframes ds-arrive{from{opacity:0;transform:translateY(8px)}}
/* The companion is working: dots where its message will appear. */
.duet-story .ds-typing{display:none;gap:5px;padding:8px 0}
.duet-story .ds-typing.on{display:flex}
.duet-story .ds-typing i{width:7px;height:7px;border-radius:50%;background:#9aa59f;animation:ds-dot 1s ease-in-out infinite}
.duet-story .ds-typing i:nth-child(2){animation-delay:.15s}
.duet-story .ds-typing i:nth-child(3){animation-delay:.3s}
@keyframes ds-dot{50%{opacity:.35;transform:translateY(-2px)}}
.duet-story .ds-compose-wrap{flex-shrink:0;padding:12px 16px 14px;background:#fff}
.duet-story .ds-composer{display:flex;align-items:center;gap:5px;padding:7px 6px 7px 16px;border:1px solid #e1e7df;border-radius:26px;background:#fff;box-shadow:0 4px 20px #253d260c}
.duet-story .ds-input{flex:1;padding:9px 0;font-size:16px;line-height:1.35;color:#9aa39c}
.duet-story .ds-input.typed{color:var(--ds-ink)}
.duet-story .ds-send{display:grid;place-items:center;width:34px;height:34px;margin:5px;border-radius:50%;background:var(--ds-green);color:#fff;font-size:22px;transition:transform .25s var(--ds-ease),filter .25s}

/* 3 · For my doctor: pushed screens, as in a navigation stack. */
.duet-story .ds-views{position:relative;flex:1;min-height:0;overflow:hidden}
.duet-story .ds-view{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--ds-canvas);transition:transform .55s var(--ds-ease)}
.duet-story .ds-v-review,.duet-story .ds-v-preview{transform:translateX(100%);box-shadow:-10px 0 30px #1c242912}
.duet-story[data-step=review] .ds-v-review,.duet-story[data-step=preview] .ds-v-preview{transform:none}
.duet-story:is([data-step=review],[data-step=preview]) .ds-v-page{transform:translateX(-30%)}
.duet-story .ds-kicker{margin:17px 0 6px}
.duet-story .ds-detail-title{margin:0 0 24px;font-size:29px;font-weight:550;line-height:1.16;letter-spacing:-.9px}
.duet-story .ds-saved-receipt{display:flex;align-items:center;gap:12px;margin:0 0 24px;padding:16px;border-radius:16px;background:#eef6ee;color:var(--ds-green)}
.duet-story .ds-saved-receipt strong{display:block;font-size:15px;font-weight:550}
.duet-story .ds-saved-receipt small{display:block;margin-top:4px;font-size:12px;color:#546c59}
.duet-story .ds-update{margin:0 0 25px;padding:20px;border:1px solid #d8e3d7;border-radius:22px;background:#f4f8ef;transition:box-shadow .6s var(--ds-ease)}
.duet-story .ds-update .ds-card-h{margin-bottom:20px;font-size:13px;color:#51664d}
.duet-story .ds-update h2{margin:0 0 13px;font-size:25px;font-weight:550;line-height:1.2;letter-spacing:-.6px}
.duet-story .ds-update p{font-size:15px;line-height:1.55}
.duet-story .ds-update .ds-caption{margin:14px 0 17px}
.duet-story:is([data-step=rest],[data-step=ready],[data-step=review]) .ds-fold-saved,.duet-story:is([data-step=rest],[data-step=saved],[data-step=preview]) .ds-fold-update{grid-template-rows:0fr;opacity:0}
.duet-story .ds-saved-label{display:flex;justify-content:space-between;align-items:center;margin:0 2px 12px;font-size:12px;color:var(--ds-secondary)}
.duet-story .ds-saved-label>span:first-child{font-size:15px;font-weight:550;color:var(--ds-ink)}
.duet-story .ds-oct12,.duet-story:is([data-step=saved],[data-step=preview]) .ds-oct1{display:none}
.duet-story:is([data-step=saved],[data-step=preview]) .ds-oct12{display:inline}
.duet-story .ds-peek{padding:20px;border:1px solid var(--ds-line);border-radius:19px;background:#fff}
.duet-story .ds-peek blockquote,.duet-story .ds-unchanged blockquote{margin:0;font-size:17px;line-height:1.55;letter-spacing:-.2px}
.duet-story .ds-peek-foot{display:flex;align-items:center;gap:6px;margin-top:20px;padding-top:13px;border-top:1px solid var(--ds-line);font-size:12px;color:var(--ds-secondary)}
.duet-story .ds-peek-foot .ds-icon{width:16px;height:16px}
.duet-story .ds-peek-foot .ds-text-link{flex:1;justify-content:flex-end;min-height:35px;padding:0;font-size:12px}
.duet-story .ds-footer-preview{transition:transform .5s var(--ds-ease)}
.duet-story:is([data-step=rest],[data-step=ready],[data-step=review]) .ds-footer-preview{position:absolute;left:0;right:0;bottom:0;transform:translateY(110%)}
.duet-story .ds-white{background:#fff}
.duet-story .ds-v-review .ds-detail-title{margin:16px 0 12px;font-size:30px}
.duet-story .ds-v-review .ds-caption{margin-bottom:20px}
.duet-story .ds-change{padding:19px 0 14px;border-top:1px solid #dfe5dc}
.duet-story .ds-change-h{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.duet-story .ds-change-h h2{font-size:17px;font-weight:600;letter-spacing:-.3px}
.duet-story .ds-tag{padding:5px 7px;border-radius:6px;background:#edf4e7;color:#376140;font-size:10px;font-weight:600;white-space:nowrap}
.duet-story .ds-change>p{margin:0 0 8px;font-size:15px;line-height:1.6}
.duet-story .ds-source{display:flex;align-items:center;gap:7px;min-height:44px;padding:8px 0;color:var(--ds-green);font-size:12px}
.duet-story .ds-source .ds-icon{width:16px;height:16px}
.duet-story .ds-unchanged{padding:20px 0 0;border-top:1px solid var(--ds-line)}
.duet-story .ds-unchanged .ds-doc-label{margin-bottom:10px}
.duet-story .ds-unchanged blockquote{font-size:15px}
.duet-story .ds-summary{margin:0;padding:12px 0;font-size:12px;color:#627061}
.duet-story .ds-paper-bg{padding-top:15px;background:#f6f7f2}
.duet-story .ds-preview-cap{margin:12px 0 17px;font-size:12px;color:var(--ds-secondary)}

/* Her page, as the preview and her clinician show it. */
.duet-story .ds-doc{display:block;padding:25px 21px;border:1px solid #e2e7df;border-radius:18px;background:#fff;color:var(--ds-ink)}
.duet-story .ds-doc header{margin-bottom:23px;padding-bottom:19px;border-bottom:1px solid var(--ds-line)}
.duet-story .ds-doc header .ds-doc-label{margin-bottom:12px;font-size:12px;letter-spacing:.7px;color:#597052}
.duet-story .ds-doc h2{margin:0 0 6px;font-size:29px;font-weight:550;line-height:1.2;letter-spacing:-.8px}
.duet-story .ds-doc-meta{margin:0;font-size:12px;color:var(--ds-secondary)}
.duet-story .ds-doc section{margin:0 0 23px}
.duet-story .ds-doc h3{margin:0 0 9px;font-size:13px;font-weight:600;color:#4f654e;letter-spacing:0}
.duet-story .ds-doc p,.duet-story .ds-doc blockquote{margin:0 0 12px;font-size:14px;line-height:1.65;letter-spacing:0}
.duet-story .ds-doc blockquote{margin:0;padding-left:14px;border-left:2px solid #abc09d;color:#26382a;font-size:16px}
.duet-story .ds-doc p:last-child{margin-bottom:0}
.duet-story .ds-cite{font-size:11px;color:#5c7757;white-space:nowrap}
.duet-story .ds-sources{padding-top:18px;border-top:1px solid var(--ds-line)}
.duet-story .ds-src{display:flex;align-items:center;gap:9px;min-height:52px;padding:9px 0;border-bottom:1px solid var(--ds-line);font-size:12px;font-weight:500;line-height:1.4}
.duet-story .ds-src small{display:block;margin-top:3px;font-size:11px;font-weight:400;line-height:1.5;color:var(--ds-secondary)}
.duet-story .ds-src i{margin-left:auto;font-style:normal;font-size:17px;font-weight:400;color:#75856c}
.duet-story .ds-src-n{display:grid;place-items:center;min-width:20px;height:22px;border-radius:4px;background:#f0f4ec;color:#5c7453;font-size:10px}
.duet-story .ds-doc-foot{margin-top:23px;padding-top:16px;border-top:1px solid var(--ds-line)}
.duet-story .ds-doc-foot p{margin:0;font-size:11px;line-height:1.6;color:var(--ds-secondary)}

/* The ending: the page her clinician receives, in a browser window, slides up into
   the frame, solid, from below its edge (the frame clips the stage). It is laid out
   at the mockups' clinician width and scaled with the window. */
.duet-story .ds-clin{position:absolute;left:846px;top:34px;width:500px;z-index:8;border:1px solid #cfd8cb;border-radius:15px;overflow:hidden;background:#fff;box-shadow:0 40px 70px -30px rgba(16,30,22,.5),0 18px 30px -20px rgba(16,30,22,.3);transform:scale(.76);transform-origin:0 0;font-family:-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",sans-serif;color:var(--ds-ink);line-height:1.5;text-align:left;transition:translate .9s var(--ds-ease)}
.compact .duet-story .ds-clin{left:130px;top:70px}
.duet-story.ds-play .ds-clin:not(.on){translate:0 1000px}
.duet-story .ds-browser{position:relative;padding:13px 17px;border-bottom:1px solid #dfe6d9;background:#ecf0e7;font-size:10px;color:#63715a;text-align:center}
.duet-story .ds-browser span{position:absolute;left:14px;font-size:8px;letter-spacing:2px;color:#bcc7b4}
.duet-story .ds-clin .ds-doc{padding:28px 30px;border:0;border-radius:0}
.duet-story .ds-clin .ds-doc h2{font-size:27px}
.duet-story .ds-clin .ds-doc p{font-size:13px}
.duet-story .ds-clin .ds-doc blockquote{font-size:16px}
.duet-story .ds-clin .ds-doc section{margin-bottom:21px}
.duet-story .ds-clin .ds-doc header{margin-bottom:20px;padding-bottom:17px}
.duet-story .ds-clin .ds-doc h3{font-size:12px}
.duet-story .ds-clin .ds-doc-meta{font-size:11px}
.duet-story .ds-clin .ds-doc-foot p{font-size:10px}

/* Between passes each screen is covered, reset out of sight, and uncovered. */
.duet-story .ds-scr::after{content:"";position:absolute;inset:0;z-index:10;background:var(--ds-canvas);opacity:0;pointer-events:none;transition:opacity .6s var(--ds-ease)}
.duet-story.ds-out .ds-scr::after{opacity:1}

/* Narrow stages: the phones keep their order (Today, chat, For my doctor) and slide
   as a row, all in transforms so they glide; the phone doing the work comes to the
   front (data-focus) and the one past the end tucks behind its neighbour. Without a
   focus, chat is in front. */
.duet-story{--ds-left:translate(-188px,54px) scale(.8) rotate(-2deg);--ds-right:translate(188px,54px) scale(.8) rotate(2deg);--ds-far-left:translate(-200px,70px) scale(.7) rotate(-2deg);--ds-far-right:translate(200px,70px) scale(.7) rotate(2deg)}
.compact .duet-story .phone{left:162px;top:66px;transform-origin:50% 50%;transition:transform 1s var(--ds-ease)}
.compact .duet-story .p1{transform:var(--ds-left);z-index:2}
.compact .duet-story .p2{transform:none;z-index:3}
.compact .duet-story .p3{transform:var(--ds-right);z-index:2}
.compact .duet-story[data-focus="1"] .p1,.compact .duet-story[data-focus="3"] .p3{transform:none;z-index:3}
.compact .duet-story[data-focus="1"] .p2{transform:var(--ds-right);z-index:2}
.compact .duet-story[data-focus="3"] .p2{transform:var(--ds-left);z-index:2}
.compact .duet-story[data-focus="1"] .p3{transform:var(--ds-far-right);z-index:1}
.compact .duet-story[data-focus="3"] .p1{transform:var(--ds-far-left);z-index:1}