/* joanai.io product moments (WO-WEB-C21; Latif, 2026-10-03, on the four mock-ups: "let's go with this."). The approved
   mock-ups (Joan-website-internal/visuals-2026-10-03, make.py) ported class by class, every class prefixed `pm-` so
   nothing here reaches another part of the site; the site's colour tokens where one matches the mock-ups' colour.
   Each window is a drawn product screen (aria-hidden; nothing in it is a control). The moments keep the mock-ups'
   1,240px content width at 1,440px (heading 410px, gap 64px, window 766px), so every row sits as it does in the
   mock-ups. Motion: one entrance on the site's reveal (data-reveal), the rows in sequence; reduced motion, no script
   and print show the final state. Loaded on the four pages with a moment only (the route's `extraStylesheet`).
   For older readers: no text under 13px.
   WO-WEB-C22 (Latif, 2026-10-03: "approved, build them all"): ten more moments from make2.py, the same kit with its new
   parts (pm- classes again), the home showcase (the one interactive moment: tabs by kind of firm), and one heading style
   for all fourteen: one plain sentence in one colour at 38px. Loaded on every page with a moment. */

/* ------------------------------------------------------------ the section and its heading block */
.pm-sec { position: relative; padding: 76px 0 26px; background: var(--paper); border-top: 1px solid var(--line); color: var(--ink); font-size: 16px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.pm-wrap { max-width: calc(1240px + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
.pm-split { display: grid; grid-template-columns: 410px minmax(0, 1fr); gap: 64px; align-items: center; }
.pm-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; font-weight: 600; font-size: 16px; color: var(--green); }
.pm-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--copper-bright); }
/* The heading: one plain sentence in one colour, at the mock-ups' 38px (WO-WEB-C22; Latif, 2026-10-03: no two-tone headlines). */
.pm-sec .pm-h { margin: 0 0 22px; font: 400 38px/1.14 var(--serif); letter-spacing: -.015em; font-variation-settings: normal; text-wrap: wrap; color: var(--ink); }
.pm-lede { margin: 0; font-size: 19px; line-height: 1.6; color: var(--muted); }
.pm-ticks { margin: 28px 0 0; padding: 0; list-style: none; }
.pm-ticks li { display: flex; align-items: center; gap: 11px; padding: 7px 0; font-size: 16.5px; font-weight: 600; color: var(--ink-2); }
.pm-ticks .pm-ic { flex: none; color: #fff; background: #2f5c50; border-radius: 50%; padding: 3px; width: 21px; height: 21px; }
/* The illustration line: real information, so #6a645a (5.5:1 on paper), not the mock-ups' #9a9285 (2.9:1); WO-WEB-C21, deviation 1. */
.pm-ill { margin: 18px 0 0; text-align: right; font-size: 13.5px; line-height: 20px; color: #6a645a; }
/* One sentence for screen readers, in place of the drawn screen (aria-hidden). */
.pm-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ------------------------------------------------------------ the window and its shared parts */
.pm-win { position: relative; background: #fff; border: 1px solid var(--line-soft); border-radius: 18px; box-shadow: 0 1px 0 rgba(16, 35, 30, .04), 0 18px 30px -22px rgba(16, 35, 30, .35), 0 50px 90px -50px rgba(16, 35, 30, .45); overflow: hidden; }
.pm-ic { flex: none; }
.pm-bar { display: flex; align-items: center; gap: 11px; height: 56px; padding: 0 20px; border-bottom: 1px solid #eee8dc; background: linear-gradient(#fdfcf9, #faf8f3); }
.pm-glyph { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, #2f5c50, #1f463c); color: #f1ebdd; }
.pm-glyph .pm-ic { width: 17px; height: 17px; }
.pm-bar b { font-size: 16.5px; font-weight: 700; }
.pm-bar .pm-sub { font-size: 14.5px; color: #8a8276; }
.pm-pill { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px; border-radius: 999px; background: #eef4f0; color: #1f463c; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.pm-pill .pm-ic { width: 14px; height: 14px; }
.pm-pill.pm-pill--grey { background: #f2eee6; color: #6a645a; }
.pm-pill.pm-pill--solid { background: #1f463c; color: #fff; }
.pm-av { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; color: #fff; font: 700 13px var(--sans); font-style: normal; letter-spacing: .02em; }
.pm-av--sw { background: #2f5c50; }
.pm-av--jo { background: var(--copper); }
.pm-av--dr { background: #4a6fa5; }
.pm-av--ps { background: #8a6d1f; }
.pm-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 7px; background: #f5f2ec; border: 1px solid #e6dfd1; color: #4a463f; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.pm-chip .pm-ic { color: #6a645a; }
.pm-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 17px; border-radius: 10px; font: 700 15px var(--sans); border: 1px solid #d9d0bf; background: #fff; color: var(--ink-2); }
.pm-btn.pm-btn--p { background: #1f463c; border-color: #1f463c; color: #fff; box-shadow: 0 8px 16px -10px rgba(16, 35, 30, .8); }
.pm-foot { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 12px 26px; border-top: 1px solid #eee8dc; background: #faf8f3; font-size: 14px; color: #6a645a; }
.pm-foot .pm-ic { color: #2f5c50; }
/* A line with its source: the answers of moments 1 and 2. */
.pm-it { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 0; font-size: 17px; line-height: 1.4; }
.pm-it + .pm-it { border-top: 1px solid #f0ebe1; }
.pm-it b { font-weight: 700; }

/* ------------------------------------------------------------ 1: the adviser's assistant */
.pm-chat { padding: 24px 26px 18px; }
.pm-q { display: flex; justify-content: flex-end; align-items: flex-end; gap: 10px; }
.pm-q p { margin: 0; max-width: 460px; padding: 12px 17px; border-radius: 16px 16px 4px 16px; background: #1f463c; color: #fff; font-size: 17px; font-weight: 500; }
.pm-ans { display: flex; gap: 12px; margin-top: 20px; }
.pm-ans > .pm-glyph { width: 34px; height: 34px; border-radius: 50%; }
.pm-body { flex: 1; min-width: 0; }
.pm-meta { margin: 6px 0 10px; font-size: 13.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a8276; }
.pm-flag { margin-top: 14px; padding: 16px 18px; border-radius: 12px; background: #fdf3ea; border: 1px solid #f0d3bd; }
.pm-fh { display: flex; align-items: center; gap: 9px; font-size: 17.5px; font-weight: 700; color: #6b3518; }
.pm-fh .pm-ic { color: var(--copper-bright); width: 19px; height: 19px; }
.pm-flag p { margin: 5px 0 0 28px; font-size: 15.5px; color: #6a5547; }
.pm-acts { display: flex; align-items: center; gap: 10px; margin: 14px 0 0 28px; }
.pm-comp { display: flex; align-items: center; gap: 10px; margin: 16px 26px 0; padding: 0 8px 0 16px; height: 50px; border-radius: 12px; border: 1px solid var(--line-soft); background: #fbfaf7; color: #a39b8d; font-size: 16px; }
.pm-send { margin-left: auto; display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 9px; background: #e9e3d7; color: #8a8276; }

/* ------------------------------------------------------------ 2: same question, different person */
.pm-head2 { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 60px; align-items: end; margin-bottom: 40px; }
.pm-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.pm-who { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #eee8dc; background: linear-gradient(#fdfcf9, #faf8f3); }
.pm-who b { display: block; font-size: 17px; }
.pm-who span { font-size: 14px; color: #8a8276; }
.pm-who .pm-pill { margin-left: auto; }
.pm-pane { padding: 20px 22px 0; min-height: 300px; }
.pm-qrow { display: flex; justify-content: flex-end; }
.pm-q2 { display: inline-block; margin-left: auto; padding: 11px 16px; border-radius: 14px 14px 4px 14px; background: #f1ede5; font-size: 16.5px; font-weight: 600; }
.pm-a2 { margin-top: 18px; }
.pm-a2 .pm-it { font-size: 16.5px; }
.pm-denied { display: grid; place-items: center; text-align: center; margin-top: 26px; padding: 28px 20px; border-radius: 14px; background: #faf8f3; border: 1px dashed #d9d0bf; }
.pm-lk { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--bone-2); color: #6a645a; }
.pm-lk .pm-ic { width: 24px; height: 24px; }
.pm-denied b { display: block; margin-top: 12px; font-size: 18px; }
.pm-denied p { margin: 5px 0 16px; font-size: 15.5px; color: #6a645a; }
.pm-pfoot { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding: 13px 22px; border-top: 1px solid #eee8dc; font-size: 14.5px; font-weight: 600; }
.pm-pfoot.pm-pfoot--g { color: #1f463c; background: #f3f7f4; }
.pm-pfoot.pm-pfoot--n { color: #6a645a; background: #faf8f3; }

/* ------------------------------------------------------------ 3: the access review before Copilot */
.pm-stats { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #eee8dc; }
.pm-st { padding: 20px 24px; }
.pm-st + .pm-st { border-left: 1px solid #eee8dc; }
.pm-st .pm-l { font-size: 14.5px; font-weight: 600; color: #6a645a; }
.pm-st .pm-n { display: flex; align-items: baseline; gap: 14px; margin-top: 6px; font: 500 46px/1 var(--serif); }
.pm-st .pm-n s { color: #c08a6a; text-decoration-thickness: 2.5px; font-size: 34px; }
.pm-st .pm-n .pm-ic { align-self: center; color: #b9af9b; width: 22px; height: 22px; }
.pm-st .pm-n em { font-style: normal; color: #1f463c; }
.pm-tbl { padding: 6px 24px 8px; }
.pm-r { display: grid; grid-template-columns: 1.25fr 1.5fr auto; gap: 18px; align-items: center; padding: 14px 0; }
.pm-r + .pm-r { border-top: 1px solid #f0ebe1; }
.pm-fn { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; }
.pm-fn .pm-ic { color: #8a8276; width: 19px; height: 19px; }
.pm-chg { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pm-old { font-size: 14px; font-weight: 600; color: #a0705a; text-decoration: line-through; text-decoration-color: #d8a98b; }
.pm-chg .pm-ic { color: #b9af9b; width: 15px; height: 15px; }
.pm-to { display: inline-flex; align-items: center; gap: 8px; } /* the arrow stays with the new access when the line wraps */
.pm-new { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px; background: #e7f0ea; color: #1f463c; font-size: 14px; font-weight: 700; }
.pm-ok { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; color: #2f6b55; }
.pm-ok .pm-ic { width: 15px; height: 15px; }

/* ------------------------------------------------------------ 4: exam-ready, every day */
.pm-kpis { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid #eee8dc; }
.pm-kp { padding: 18px 22px; }
.pm-kp + .pm-kp { border-left: 1px solid #eee8dc; }
.pm-kp .pm-n { font: 500 40px/1 var(--serif); }
.pm-kp .pm-l { margin-top: 6px; font-size: 14.5px; color: #6a645a; font-weight: 600; }
.pm-kp.pm-kp--g .pm-n { color: #1f463c; }
.pm-lg { padding: 4px 22px 10px; }
/* The status column is never narrower than its pill (the same widths as the mock-ups at 1,440px). */
.pm-lh, .pm-lr { display: grid; grid-template-columns: 62px 1.15fr 1.25fr 1.05fr minmax(max-content, 1.15fr); gap: 12px; align-items: center; }
.pm-lh { padding: 12px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9a9285; }
.pm-lr { padding: 11px 0; border-top: 1px solid #f0ebe1; font-size: 15.5px; }
.pm-lr .pm-d { color: #8a8276; font-size: 14.5px; }
.pm-lr .pm-c { font-weight: 700; }
.pm-ap { display: flex; align-items: center; gap: 8px; }
.pm-ap .pm-av { width: 26px; height: 26px; font-size: 13px; }
.pm-stt { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 13.5px; font-weight: 700; background: #e7f0ea; color: #1f463c; white-space: nowrap; }
.pm-stt.pm-stt--returned { background: #fbefe5; color: var(--copper); }
.pm-drawer { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 6px; padding: 12px 14px; border-radius: 10px; background: #f7f4ee; font-size: 14px; color: #4a463f; }
.pm-step { display: inline-flex; align-items: center; gap: 10px; }
.pm-drawer i { font-style: normal; color: #b9af9b; }
.pm-drawer b { color: #1f463c; }

/* ------------------------------------------------------------ WO-WEB-C22: the new moments' parts (make2.py) */
/* People's round marks by tone (the mock-ups' av(initials, colour) style attribute, as classes). */
.pm-av--g { background: #2f5c50; }
.pm-av--b { background: #4a6fa5; }
.pm-av--y { background: #8a6d1f; }
/* The new assistants' question and answer (make2's x-ask and x-ans): the same bubble and mark, 470px at most, 18px apart. */
.pm-q.pm-q--x p { max-width: 470px; }
.pm-ans.pm-ans--x { margin-top: 18px; }
.pm-lead { margin: 2px 0 6px; font-size: 18px; line-height: 1.45; }
.pm-lead b { font-weight: 700; }
.pm-src { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; }
.pm-note { display: flex; align-items: center; gap: 9px; margin-top: 14px; padding: 12px 15px; border-radius: 11px; background: #f5f2ec; font-size: 15px; color: #4a463f; }
.pm-note .pm-ic { color: #6a645a; }
/* Numbered rows: the 100-day plan, buyer questions and drawing changes (make2's x-list and dl). */
.pm-list { padding: 4px 24px 6px; }
.pm-dl { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 13px 0; }
.pm-dl + .pm-dl { border-top: 1px solid #f0ebe1; }
.pm-k { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #fbefe5; color: #9a4a22; font-weight: 800; font-size: 15px; }
.pm-dt { font-size: 16.5px; font-weight: 600; }
.pm-ds { margin-top: 2px; font-size: 14.5px; color: #6a645a; }
/* An owner and a date: the mark at 26px with 13px initials (the mock-ups' 24px with 10.5px is under the 13px floor). */
.pm-own { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 2px; border-radius: 999px; background: #eef4f0; color: #1f463c; font-size: 14px; font-weight: 700; white-space: nowrap; }
.pm-own .pm-av { width: 26px; height: 26px; font-size: 13px; }
.pm-due { font-size: 14px; font-weight: 600; color: #6a645a; white-space: nowrap; }
/* The flag inside a list window, where the mock-ups set its margins in a style attribute. */
.pm-win--bq > .pm-flag { margin: 4px 24px 18px; }
.pm-win--dc > .pm-flag { margin: 6px 24px 18px; }
.pm-win--sh > .pm-flag { margin: 16px 24px 18px; }
/* Family workspaces: who joined, and each family with what the person can open. */
.pm-evt { display: flex; align-items: center; gap: 12px; margin: 18px 24px 4px; padding: 14px 16px; border-radius: 12px; background: #fbefe5; border: 1px solid #f0d3bd; font-size: 16px; }
.pm-evt .pm-av { width: 32px; height: 32px; }
.pm-evt b { font-weight: 700; }
.pm-tm { margin-left: auto; font-size: 14px; color: var(--copper); font-weight: 700; white-space: nowrap; }
.pm-fam { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 24px; border-top: 1px solid #f0ebe1; font-size: 16px; font-weight: 600; }
.pm-fam.pm-fam--dim { color: #9a9285; }
.pm-acc { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.pm-acc .pm-ic { width: 14px; height: 14px; }
.pm-acc.pm-acc--on { background: #e7f0ea; color: #1f463c; }
.pm-acc.pm-acc--new { background: #1f463c; color: #fff; }
.pm-acc.pm-acc--off { background: #f2eee6; color: #8a8276; }
/* Drawing changes: the old and new revision. */
.pm-rev { display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-bottom: 1px solid #eee8dc; font-size: 15.5px; }
.pm-rev .pm-ic { color: #b9af9b; }
.pm-tag { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 7px; font-weight: 700; font-size: 14px; }
.pm-tag.pm-tag--o { background: #f2eee6; color: #8a8276; text-decoration: line-through; }
.pm-tag.pm-tag--n { background: #1f463c; color: #fff; }
.pm-revnote { margin-left: 6px; }
/* The sales handover: what was promised beside the signed contract. The column labels are spans (make2's h5). */
.pm-cols { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #eee8dc; }
.pm-cols > div { padding: 12px 24px 4px; }
.pm-cols > div + div { border-left: 1px solid #eee8dc; }
.pm-colh { display: block; margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #8a8276; }
.pm-cmp { display: grid; grid-template-columns: 1fr 1fr; }
.pm-cmp > div { display: flex; align-items: center; gap: 9px; padding: 13px 24px; border-top: 1px solid #f0ebe1; font-size: 15.5px; }
.pm-cmp > div:nth-child(even) { border-left: 1px solid #eee8dc; }
.pm-cmp > .pm-miss { background: #fdf3ea; }
.pm-yes, .pm-no { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.pm-yes { color: #2f6b55; }
.pm-no { color: #9a4a22; }
.pm-yes .pm-ic, .pm-no .pm-ic { width: 16px; height: 16px; }

/* ------------------------------------------------------------ WO-WEB-C22: the home showcase (make2.py: show, tabs, tab, tabcap, homewin) */
.pm-show { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 40px; }
.pm-tabs, .pm-links { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
/* A tab: a real button with the script, a plain link without it; the chosen one is a white card, its caption under it. */
.pm-tab { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; height: 50px; padding: 0 16px; border: 1px solid transparent; border-radius: 12px; background: transparent; font: 600 16.5px/1.2 var(--sans); color: #4a463f; text-align: left; text-decoration: none; cursor: pointer; }
.pm-tab .pm-ic { color: #b9af9b; width: 16px; height: 16px; }
.pm-tab:hover { color: var(--ink); }
.pm-tab[aria-selected="true"], .pm-tab.pm-tab--on { background: #fff; border-color: var(--line-soft); color: var(--ink); box-shadow: 0 14px 26px -20px rgba(16, 35, 30, .5); }
.pm-tab[aria-selected="true"] .pm-ic, .pm-tab.pm-tab--on .pm-ic { color: #1f463c; }
.pm-tabcap { display: none; margin: 0 0 6px; padding: 2px 16px 10px; font-size: 15px; color: #6a645a; }
.pm-tab[aria-selected="true"] + .pm-tabcap, .pm-links .pm-tabcap { display: block; }
.pm-panel > .pm-win { width: 100%; }
/* "Compact": in the showcase every assistant window takes the home mock-up's tighter chat padding (make2's .homewin .chat). */
.pm-panel .pm-win .pm-chat { padding: 22px 24px 16px; }
/* The link under the window: the site's text link, in the darker copper (7:1 or better on paper). */
.pm-panel > .pm-more { margin-top: 18px; color: var(--copper-hover); }

/* ------------------------------------------------------------ motion: one quiet entrance */
/* Each window carries data-reveal: joan-site.js adds `in` once it is in view, and joan-site.css fades it up. Its rows
   (.pm-seq) then rise in sequence, 0.1s apart from 0.15s, each in 0.4s, and everything rests. Only with .js.motion:
   reduced motion, no script, or a script that never arrives (joan-boot.js drops `motion`) show the final state. */
.js.motion .pm-win .pm-seq { transition: opacity .4s var(--ease), transform .45s var(--ease); }
/* Only a window that enters on the reveal (data-reveal) waits for it; a window shown without it (the home showcase's
   panels after the first, WO-WEB-C22) is in its final state at once. */
.js.motion .pm-win[data-reveal]:not(.in) .pm-seq { opacity: 0; transform: translateY(10px); }
.js.motion .pm-win .pm-t1 { transition-delay: .15s; }
.js.motion .pm-win .pm-t2 { transition-delay: .25s; }
.js.motion .pm-win .pm-t3 { transition-delay: .35s; }
.js.motion .pm-win .pm-t4 { transition-delay: .45s; }
.js.motion .pm-win .pm-t5 { transition-delay: .55s; }
.js.motion .pm-win .pm-t6 { transition-delay: .65s; }
.js.motion .pm-win .pm-t7 { transition-delay: .75s; }
.js.motion .pm-win .pm-t8 { transition-delay: .85s; }
.js.motion .pm-win .pm-t9 { transition-delay: .95s; }
.js.motion .pm-win.pm-win--late { transition-delay: .12s; } /* moment 2: James's window follows Sarah's */

/* ------------------------------------------------------------ narrower screens */
/* The heading block goes above the window once the window would be narrower than about 700px. */
@media (max-width: 1240px) {
  .pm-split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .pm-head { max-width: 640px; }
}
/* The showcase: from 1,100px down its tabs go above the window as a block of pills, the chosen tab's caption under them. */
@media (max-width: 1100px) {
  .pm-show { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 32px; }
  .pm-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
  .pm-tabs .pm-tab { width: auto; height: auto; min-height: 44px; padding: 9px 16px; border-color: var(--line-soft); border-radius: 999px; background: #fbfaf7; font-size: 15.5px; }
  .pm-tabs .pm-tab .pm-ic { display: none; }
  .pm-tabs .pm-tab[aria-selected="true"] { background: #fff; border-color: #1f463c; color: var(--ink); box-shadow: 0 10px 20px -16px rgba(16, 35, 30, .5); }
  .pm-tabs .pm-tabcap { order: 1; flex: 0 0 100%; margin: 6px 0 0; padding: 0 2px; }
  .pm-links { max-width: 420px; }
}
@media (max-width: 860px) {
  .pm-sec { padding-top: 56px; }
  .pm-head2 { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-bottom: 32px; }
  .pm-head2 .pm-h { margin-bottom: 0; }
  .pm-pair { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pm-pane { min-height: 0; }
}
/* Phones: 16px gutters and a window the full width, each part laid out for 390 and 320px (WO-WEB-C21, phone layouts). */
@media (max-width: 640px) {
  .pm-sec { padding: 44px 0 20px; }
  .pm-wrap { padding: 0 16px; }
  .pm-split { gap: 28px; }
  .pm-sec .pm-h { font-size: 30px; margin-bottom: 16px; }
  .pm-lede { font-size: 17px; }
  .pm-ticks { margin-top: 20px; }
  .pm-ticks li { font-size: 16px; }
  .pm-ill { margin-top: 14px; text-align: left; }
  .pm-win { border-radius: 14px; }
  /* the title bar: the mark, then the title, its second line and its pill one under another */
  .pm-bar { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; column-gap: 11px; row-gap: 2px; height: auto; padding: 12px 16px; }
  .pm-bar .pm-glyph { grid-row: 1 / span 2; }
  .pm-bar b, .pm-bar .pm-sub, .pm-bar .pm-pill { grid-column: 2; }
  .pm-bar .pm-pill { justify-self: start; margin: 6px 0 0; }
  .pm-foot { padding: 12px 16px; }
  .pm-it { grid-template-columns: minmax(0, 1fr); gap: 8px; font-size: 16px; }
  .pm-it .pm-chip { justify-self: start; }
  .pm-btn { height: auto; min-height: 40px; padding: 9px 14px; justify-content: center; text-align: center; }
  /* 1: the answer's mark beside its first line; source chips under their line; the flag's buttons stacked */
  .pm-chat, .pm-panel .pm-win .pm-chat { padding: 18px 16px 14px; }
  .pm-q p { max-width: none; font-size: 16px; padding: 10px 14px; }
  .pm-ans { position: relative; display: block; margin-top: 16px; }
  .pm-ans > .pm-glyph { position: absolute; left: 0; top: 0; width: 28px; height: 28px; }
  .pm-ans > .pm-glyph .pm-ic { width: 15px; height: 15px; }
  .pm-meta { display: flex; align-items: center; min-height: 28px; margin: 0 0 6px 38px; }
  .pm-flag { padding: 14px; }
  .pm-fh { font-size: 16.5px; align-items: flex-start; }
  .pm-flag p { margin-left: 0; font-size: 15px; }
  .pm-acts { flex-direction: column; align-items: stretch; gap: 8px; margin-left: 0; }
  .pm-comp { margin: 14px 16px 0; height: 46px; font-size: 15px; }
  /* 2: the panels stacked, Sarah's first; the person, then the pill under the name */
  .pm-who { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 8px; padding: 14px 16px; }
  .pm-who .pm-av { grid-row: 1 / span 2; align-self: start; }
  .pm-who .pm-pill { grid-column: 2; justify-self: start; margin-left: 0; }
  .pm-pane { padding: 16px 16px 0; }
  .pm-q2 { padding: 10px 14px; font-size: 15.5px; }
  .pm-a2 { margin-top: 14px; }
  .pm-a2 .pm-it { font-size: 15.5px; }
  .pm-denied { margin-top: 18px; padding: 22px 14px; }
  .pm-denied b { font-size: 17px; }
  .pm-denied p { font-size: 15px; }
  .pm-pfoot { padding: 12px 16px; font-size: 14px; }
  /* 3: the two numbers side by side, smaller; each folder row stacked: name, old → new, Fixed */
  .pm-st { display: flex; flex-direction: column; padding: 14px; }
  .pm-st .pm-l { font-size: 13px; }
  .pm-st .pm-n { gap: 8px; margin-top: auto; padding-top: 6px; font-size: 32px; } /* both numbers on one line, whatever their labels' length */
  .pm-st .pm-n s { font-size: 24px; }
  .pm-st .pm-n .pm-ic { width: 16px; height: 16px; }
  .pm-tbl { padding: 4px 16px 6px; }
  .pm-r { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px 0; }
  .pm-fn { font-size: 15.5px; }
  .pm-ok { justify-self: start; }
  /* 4: the three figures in one row, smaller; the table a list (client and date, then the message, then approver and status) */
  .pm-kp { padding: 12px 10px; }
  .pm-kp .pm-n { font-size: 28px; }
  .pm-kp .pm-l { font-size: 13px; }
  .pm-lg { padding: 2px 16px 8px; }
  .pm-lh { display: none; }
  .pm-lh + .pm-lr { border-top: 0; }
  /* each row a short list: client and date, then the message, then the approver and the status (which drops under the
     approver, still on the right, when the two do not fit one line) */
  .pm-lr { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 6px; font-size: 15px; }
  .pm-lr .pm-c { order: 1; flex: 1 1 0; min-width: 0; }
  .pm-lr .pm-d { order: 2; }
  .pm-lr .pm-m { order: 3; flex: 0 0 100%; }
  .pm-lr .pm-ap { order: 4; flex: 1 1 auto; white-space: nowrap; }
  .pm-lr .pm-sts { order: 5; margin-left: auto; }
  .pm-lr + .pm-drawer { margin-top: 2px; }
  .pm-drawer { padding: 10px 12px; column-gap: 10px; row-gap: 6px; }
  /* WO-WEB-C22, the new moments on a phone (each laid out for 390 and 320px): */
  /* the answers: a lead line a size smaller, sources wrapping, the note's padding to the window's 16px */
  .pm-lead { font-size: 17px; }
  .pm-note { padding: 12px; font-size: 14.5px; align-items: flex-start; }
  /* numbered rows: the number, then the row's words, with its owner, place or status under them */
  .pm-list { padding: 2px 16px 4px; }
  .pm-dl { grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; row-gap: 8px; }
  .pm-dl > .pm-own, .pm-dl > .pm-due, .pm-dl > .pm-stt { grid-column: 2; justify-self: start; }
  .pm-dt { font-size: 16px; }
  .pm-win--bq > .pm-flag, .pm-win--dc > .pm-flag, .pm-win--sh > .pm-flag { margin: 6px 16px 16px; }
  /* family workspaces: who joined, with the time under it; each family's pill beside its name, or under it when long */
  .pm-evt { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; margin: 14px 16px 4px; padding: 12px 14px; }
  .pm-evt .pm-av { grid-row: 1 / span 2; align-self: start; }
  .pm-tm { margin-left: 0; }
  .pm-fam { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px 16px; font-size: 15.5px; }
  .pm-fam .pm-acc { justify-self: start; }
  /* drawing changes: the revisions on one line, the note under them */
  .pm-rev { flex-wrap: wrap; padding: 12px 16px; row-gap: 6px; }
  .pm-revnote { flex: 0 0 100%; margin-left: 0; font-size: 15px; }
  /* the sales handover: still two columns, closer in */
  .pm-cols > div { padding: 10px 12px 2px; }
  .pm-cmp > div { padding: 12px; font-size: 14.5px; align-items: flex-start; }
  .pm-yes .pm-ic, .pm-no .pm-ic { flex: none; margin-top: 2px; }
  .pm-yes, .pm-no { align-items: flex-start; }
}

/* ------------------------------------------------------------ print: the final state, with or without the script */
@media print {
  .js.motion .pm-win[data-reveal]:not(.in) .pm-seq { opacity: 1; transform: none; }
  .pm-win { box-shadow: none; break-inside: avoid; }
}