.working-page .content-heading{flex-direction:column;align-items:flex-start;gap:54px}
.rhythm-navigation{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:var(--line)}
.rhythm-navigation[hidden]{display:none}
.rhythm-carousel button{border:0;border-radius:0;background:#fff;color:var(--ink);font:inherit;cursor:pointer}
.rhythm-navigation button{padding:24px 12px;font-size:18px;min-width:0;transition:background .15s,color .15s}
.rhythm-navigation button+button{border-left:var(--line)}
.rhythm-navigation button:hover{background:#f1f1f1}
.rhythm-navigation button[aria-current="true"]{background:#2448c5;color:#fff}
.rhythm-carousel :focus-visible{outline:3px solid #c72d23;outline-offset:-5px}
.rhythm-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.rhythm-track::-webkit-scrollbar{display:none}
.rhythm-slide{flex:0 0 100%;min-width:0;display:grid;grid-template-columns:50% 50%;scroll-snap-align:start;scroll-snap-stop:always;min-height:480px}
.working-page .rhythm-slide .cadence-description{padding:54px var(--gutter);margin:0;font-size:clamp(21px,2vw,28px);line-height:1.5;align-self:center}
.cadence-preview{padding:34px 38px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#f7f7f4;min-width:0}
.cadence-preview>small{font:400 12px/1.4 var(--body);color:#666}
.update-preview,.report-preview,.deck-preview{width:100%;max-width:370px;border:1px solid #191919;background:#fff;font:400 13px/1.5 var(--body);color:#191919;text-align:left}
.preview-masthead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid #191919}
.preview-masthead>strong{font:800 30px/1 var(--display);letter-spacing:-.07em}
.preview-masthead>span{font-size:12px}
.preview-email{padding:20px;display:flex;flex-direction:column;gap:12px}
.preview-portal{color:#2448c5;border:1px solid #d2d2d2;padding:10px 12px}
.preview-portal>span{float:right}
.portal-progress{display:flex;gap:4px;margin-top:9px}
.portal-progress i{height:4px;flex:1;background:#2448c5}
.portal-progress i:nth-last-child(-n+2){background:#e4e4e4}
.preview-item{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #ddd;padding-bottom:7px}
.preview-item>span{color:#2448c5;font-size:12px}
.preview-signoff{margin-top:2px}
.preview-report-body{padding:24px 22px}
.working-page .cadence-preview h3{font:800 34px/1.05 var(--display);margin:0;padding:0;border:0}
.report-bars{height:110px;display:flex;align-items:flex-end;gap:10px;border-bottom:1px solid #191919;margin-top:22px}
.report-bars i{flex:1;background:#2448c5;height:35%}
.report-bars i:nth-child(2){height:44%}.report-bars i:nth-child(3){height:38%}.report-bars i:nth-child(4){height:60%}.report-bars i:nth-child(5){height:55%}.report-bars i:nth-child(6){height:71%}.report-bars i:nth-child(7){height:66%}.report-bars i:nth-child(8){height:83%}
.report-topics{display:flex;justify-content:space-between;gap:10px;font-size:12px;margin-top:10px}
.report-note{margin-top:26px;line-height:1.7}
.deck-preview{background:#2448c5;color:white}
.deck-preview .preview-masthead{border-color:rgba(255,255,255,.5)}
.preview-deck-body{padding:28px 24px 24px}
.working-page .preview-deck-body h3{font-size:56px;color:inherit}
.deck-agenda{margin-top:28px;display:flex;flex-direction:column;gap:8px}
.deck-agenda span{padding-top:8px;border-top:1px solid rgba(255,255,255,.4)}
@media(max-width:700px){
 .working-page .content-heading{gap:36px}
 .rhythm-navigation button{font-size:14px;padding:22px 5px}
 .rhythm-slide{grid-template-columns:1fr;grid-template-rows:1fr auto;align-content:start}
 .cadence-preview{border-right:0;border-bottom:var(--line);padding:28px 26px}
 .working-page .rhythm-slide .cadence-description{padding:28px 26px 36px;font-size:20px;align-self:start}
 .preview-masthead{padding:12px 16px}
 .preview-email{padding:16px;gap:10px}
}
@media(prefers-reduced-motion:reduce){.rhythm-navigation button{transition:none}}

.responsibility-art{height:clamp(220px,28vw,420px);display:flex;align-items:center;justify-content:center;margin:-20px 0 38px}
.responsibility-art img{display:block;width:100%;height:100%;object-fit:contain}
/* Phones: each box is exactly its picture's height, so both characters sit the same distance from
   the cell's top and from their heading. The box reaches the cell's side lines (the art inside
   keeps the text width), so a character sliding in appears from the cell edge. */
@media(max-width:700px){.responsibility-art{height:auto;margin:0 -26px 32px;padding:0 26px}.responsibility-art img{height:auto}}
/* Phones: the cowboy faces right, so the horse's hind legs stand over "Humans." The flip uses the
   separate scale property, so the script's sideways slide flips with it (see working-style.js). */
@media(max-width:700px){.responsibility-art img[src$="humans-cowboy-print.webp"]{scale:-1 1}}

 .vision-preview{width:100%;max-width:370px;border:1px solid #191919;background:#fff;color:#191919;text-align:left}
.vision-sketch{display:block;width:100%;height:auto;padding:6px 10px 12px}
.marker-writing{font-family:"Bradley Hand","Segoe Print","Comic Sans MS",cursive;font-size:19px;font-weight:400}
.whiteboard-tray{border-top:1px solid #191919;height:14px;display:flex;gap:8px;justify-content:flex-end;padding-right:24px;align-items:center}
.whiteboard-tray i{display:block;width:30px;height:4px;background:#2448c5;transform:rotate(-2deg)}
.whiteboard-tray i:nth-child(2){background:#c72d23;transform:rotate(2deg)}
.whiteboard-tray i:nth-child(3){background:#191919}

/* Shared rows keep both responsibility columns aligned despite different copy lengths. */
@media(min-width:701px){
 .working-page .responsibility-grid{grid-template-rows:repeat(7,auto)}
 .working-page .responsibility-grid>article{grid-row:1 / span 7;display:grid;grid-template-rows:subgrid;align-content:start}
 .working-page .responsibility-grid>article:first-child{grid-column:1}
 .working-page .responsibility-grid>article:nth-child(2){grid-column:2}
 .working-page .responsibility-grid>article>p{margin:0;padding-bottom:32px}
 .working-page .responsibility-grid dl{display:contents}
 .working-page .responsibility-grid dl>div{margin:0;padding:32px 0;border-top:var(--line)}
}
.responsibility-art{overflow:hidden}
.responsibility-art img{will-change:transform}

@media(prefers-reduced-motion:reduce){.responsibility-art img{transform:none!important}}
@media(min-width:701px){.responsibility-art{margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));padding-left:var(--gutter);padding-right:var(--gutter)}}
/* The split between preview and text is drawn on the text cell's left edge, the same side the tab
   dividers above use, so the two lines land on the same pixel. */
.rhythm-slide .cadence-description{border-left:var(--line)}
.working-page .rhythm-slide .cadence-description{align-self:stretch;display:flex;flex-direction:column;justify-content:center}
@media(max-width:700px){.working-page .rhythm-slide .cadence-description{align-self:start;display:block}}
@media(max-width:700px){.rhythm-slide .cadence-description{border-left:0}}