/* Grow, Fix and Learn. The live kit owns materials, type and shadow recipes. */
.s2-page { margin: 0; background: var(--color-surface-page); }
.s2-frame { width: calc(100% - 96px); max-width: 1344px; margin-inline: auto; }
.s2-header { height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: var(--line-construction) solid var(--color-line-construction); }
.s2-brand { font-size: 21px; line-height: 28px; white-space: nowrap; }
.s2-nav { display: flex; gap: 24px; }
.s2-nav .nav__link, .s2-page .btn { font-size: 16px; line-height: 24px; }
.s2-skip { position: absolute; top: -80px; padding: 12px; background: var(--color-paper); z-index: 100; }
.s2-skip:focus { top: 8px; }
.s2-opening { padding-block: 96px 64px; }
.s2-opening-grid { display: grid; grid-template-columns: 660px 1fr; gap: 138px; margin-top: 16px; }
.s2-opening h1 { font: 400 50px/56px var(--p-font-family-display); letter-spacing: -.025em; }
.s2-lead { font-size: 21px; line-height: 28px; }
.s2-intro-copy { margin-top: 16px !important; color: var(--color-text-secondary); font-size: 16px; line-height: 24px; }
.s2-action { display: flex; align-items: center; gap: 24px; margin-top: 32px; }
.s2-action p { font-size: 16px; line-height: 24px; color: var(--color-text-secondary); }
.s2-stage { display: grid; grid-template-columns: minmax(0,888fr) minmax(0,432fr); gap: 24px; align-items: start; }
.s2-stage--wide { display: block; }
.s2-picture { min-width: 0; }
.s2-text { padding: 24px 0 0 24px; border-top: var(--line-structure) solid var(--color-text-primary); }
.s2-text h2 { font: 400 28px/32px var(--p-font-family-display); }
.s2-text > p { margin-top: 24px; font-size: 16px; line-height: 24px; color: var(--color-text-secondary); }
.s2-text .k-review { margin-top: 64px; padding-top: 0; }
.s2-text .k-review blockquote { font-size: 28px; line-height: 36px; }
.s2-text .k-review__name { font-size: 16px; line-height: 24px; }
.s2-after { margin-top: 96px; padding-top: 24px; border-top: var(--line-structure) solid var(--color-text-primary); display: grid; grid-template-columns: 432px 1fr; gap: 24px; }
.s2-after h2 { font: 400 28px/32px var(--p-font-family-display); }
.s2-after p { max-width: 660px; }
.s2-after .btn { margin-top: 24px; }
.s2-footer { margin-top: 96px; border-top: var(--line-construction) solid var(--color-line-construction); padding-block: 24px 48px; display: flex; justify-content: space-between; gap: 24px; font-size: 12px; line-height: 16px; color: var(--color-text-secondary); }
.s2-footer nav { display: flex; gap: 24px; }
.s2-footer [aria-current] { text-decoration: none; color: var(--color-text-primary); }

/* A separate ground lets an object cross the well without cropping its reading content. */
.s2-scene { position: relative; width: 100%; isolation: isolate; clip-path: inset(-200px -200px 0 -200px); }
.s2-stage--wide .s2-scene { width: calc(100% + 48px); }
.s2-light { position: absolute; inset: 24px 0 0; z-index: auto; }
.s2-object { position: absolute; z-index: 3; }
.s2-scene .k-body { height: 100%; }
.s2-phone { display: none; }
.s2-scene .k-route { width: 100%; height: 100%; }
.s2-scene .k-letterhead { white-space: nowrap; }
.s2-grid { inset: 32px 0 32px; height: calc(100% - 64px); }
.s2-mini-fields { margin-top: 12px !important; }
.s2-mini-fields > div { display: grid; grid-template-columns: 56px 1fr; gap: 12px; padding-block: 8px; box-shadow: inset 0 calc(-1 * var(--k-hair)) 0 var(--color-line-construction); }
.s2-mini-fields dt { color: var(--color-text-tertiary); }
.s2-route-future { fill: none; stroke: var(--color-text-tertiary); stroke-width: var(--line-construction); stroke-dasharray: 5 5; }

/* Grow. The shelf remains the hero's outline material. Three routes rise from it. */
.s2-grow { height: 1064px; --k-lx: -.75; }
.s2-grow .s2-light { inset: 152px 0 0; border-radius: 32px 0 0 0; background: linear-gradient(242deg, var(--k-mat-light-300) 0, var(--k-mat-light-000) 38%), radial-gradient(var(--k-pool-w) var(--k-pool-h) at var(--k-pool-x) var(--k-pool-y), var(--k-mat-light-860), var(--k-mat-light-520) 36%, var(--k-mat-light-160) 70%, var(--k-mat-light-000) 100%), var(--color-surface-well-deep); --k-pool-x: 65%; --k-pool-y: 47%; --k-pool-w: 50%; --k-pool-h: 64%; }
.s2-grow-field { inset: 152px 0 140px 496px; }
.s2-goal-one { left: 64px; top: 56px; width: 300px; }
.s2-goal-two { left: 560px; top: 52px; width: 280px; }
.s2-goal-three { left: 1016px; top: 52px; width: 300px; }
#s2-enquiry { left: 64px; top: 104px; width: 344px; height: 224px; }
#s2-enquiry .k-inbox__panes { grid-template-columns: 88px 1fr; }
#s2-enquiry .k-inbox__message { padding: 10px 12px; }
#s2-enquiry .k-inbox__row { padding-block: 10px; }
#s2-quote { left: 104px; top: 284px; width: 288px; height: 240px; rotate: -3deg; z-index: 5; }
#s2-quote .k-doc-title { margin-top: 8px !important; }
#s2-quote .k-signature { margin-top: 12px !important; }
#s2-diary { left: 296px; top: 540px; width: 240px; height: 244px; rotate: 1.5deg; z-index: 4; }
.s2-calendar-paper .k-body { padding: 16px 20px 16px 28px; }
.s2-calendar-paper::before { content: ''; position: absolute; left: 9px; top: 22px; bottom: 18px; width: 5px; background: radial-gradient(circle at 50% 3px,var(--color-surface-well-deep) 0 2px,transparent 3px) 0 0 / 5px 34px repeat-y; }
.s2-calendar { margin-top: 8px; padding-top: 6px; border-top: var(--line-construction) solid var(--color-text-secondary); }
.s2-calendar-days, .s2-calendar-dates { display: grid; grid-template-columns: repeat(7,1fr); text-align: center; }
.s2-calendar-days b { font-weight: 400; font-size: 8px; color: var(--color-text-secondary); }
.s2-calendar-dates { margin-top: 4px; row-gap: 0; }
.s2-calendar-dates span { font-size: 9px; line-height: 16px; }
.s2-calendar-dates .s2-ringed { outline: var(--line-structure) solid var(--color-text-primary); outline-offset: -1px; border-radius: 50%; width: 17px; justify-self: center; }
#s2-variation { left: 560px; top: 146px; width: 280px; height: 228px; rotate: 3deg; }
#s2-jobfile { left: 1016px; top: 160px; width: 300px; height: 296px; }
#s2-jobfile .k-folder__pocket { height: 124px; padding: 16px; }
.s2-file-leaf { position: absolute; left: 24px; top: 36px; width: 252px; height: 212px; rotate: -2.5deg; }
.s2-file-leaf p { margin-top: 8px; }
#s2-roadmap { left: 504px; top: 322px; width: 804px; height: 556px; z-index: 8; --k-pad: 24px; }
.s2-roadmap-head { display: flex; align-items: baseline; flex-wrap: wrap; margin-top: 12px; }
#s2-roadmap .s2-roadmap-head .k-doc-title { margin-top: 0 !important; }
.s2-roadmap-head .s2-example { margin: 0 0 0 12px !important; }
/* The roadmap's plan, drawn as the kit's roadmap: thick runs with a fine light line inside, the month
   rules running down through every run. Each run is an ink fill revealed by the kit's route primitive. */
.s2-plan { margin-top: 20px; }
.s2-plan-axis, .s2-plan-run { display: grid; grid-template-columns: 176px repeat(12,minmax(0,1fr)); }
.s2-plan-axis { padding-bottom: 6px; border-bottom: var(--line-construction) solid var(--color-text-primary); color: var(--color-text-secondary); font-size: 9px; line-height: 12px; }
.s2-plan-axis > span:not(:first-child) { grid-column: span 4; padding-left: 8px; }
.s2-plan-runs { position: relative; padding-bottom: 4px; }
.s2-plan-rules { position: absolute; left: 176px; right: 0; top: 0; bottom: 0; display: grid; grid-template-columns: repeat(3,1fr); pointer-events: none; }
.s2-plan-rules i { box-shadow: inset var(--k-hair) 0 0 var(--k-ink-rule); }
.s2-plan-run { position: relative; align-items: center; min-height: 24px; box-shadow: inset 0 calc(-1 * var(--k-hair)) 0 var(--color-line-construction); }
.s2-plan-run > span:first-child { font-size: 11px; line-height: 14px; padding-right: 12px; }
.s2-plan-goal { padding: 7px 0 2px; font-size: 9px; line-height: 12px; color: var(--color-text-tertiary); box-shadow: inset 0 calc(-1 * var(--k-hair)) 0 var(--color-line-construction); }
.s2-plan-done { grid-column: 2 / span 6; display: flex; align-items: center; gap: 6px; padding-left: 8px; font-size: 10px; line-height: 14px; color: var(--color-text-secondary); }
.s2-bar { position: relative; display: block; height: 14px; grid-column: calc(var(--s2-start) + 1) / span var(--s2-span); }
.s2-bar svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.s2-bar .k-route__line { fill: var(--color-text-secondary); stroke: none; }
.s2-bar--quiet .k-route__line { fill: var(--color-line-ui); }
.s2-bar::after { content: ''; position: absolute; inset: 4px 6px; box-shadow: inset 0 var(--k-hair) 0 var(--color-paper-under); pointer-events: none; }
.s2-reports { table-layout: fixed; width: 100%; border-collapse: collapse; margin-top: 6px; }
.s2-report-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 14px; font-size: 10px; line-height: 14px; color: var(--color-text-secondary); }
.s2-reports caption { text-align: left; font-size: 10px; line-height: 14px; color: var(--color-text-secondary); padding-bottom: 6px; }
.s2-reports th { font-size: 10px; line-height: 14px; text-align: left; font-weight: 500; padding: 7px 8px; border-top: var(--line-construction) solid var(--color-text-secondary); box-shadow: inset var(--k-hair) 0 0 var(--color-line-construction), inset 0 calc(-1 * var(--k-hair)) 0 var(--color-line-construction); }
.s2-reports th:first-child { padding-left: 0; box-shadow: inset 0 calc(-1 * var(--k-hair)) 0 var(--color-line-construction); }
.s2-reports td { padding: 6px 0; font-size: 10px; line-height: 14px; font-style: italic; font-family: var(--p-font-family-display); color: var(--color-text-secondary); border-bottom: var(--line-construction) solid var(--color-text-secondary); }
.s2-cadence { display: flex; gap: 16px; font-size: 9px; line-height: 12px; color: var(--color-text-secondary); }
.s2-cadence span + span { padding-left: 16px; box-shadow: inset var(--k-hair) 0 0 var(--color-line-construction); }
#s2-roadmap .k-footline { margin-top: 10px !important; font-size: 9px; }
#s2-grow-sam { left: 250px; top: 822px; }
#s2-grow-pat-signs { left: 874px; top: 116px; }
#s2-grow-pat-checks { left: 1212px; top: 100px; }
#s2-grow-pat-checks .k-person__name { white-space: nowrap; }
.s2-shelf { position: absolute; left: 32px; right: 48px; top: 904px; z-index: 2; display: grid; grid-template-columns: 1fr 1fr 1.4fr 1.35fr 1.1fr 1fr; gap: 26px; }
.s2-department h3 { font-size: 16px; line-height: 24px; white-space: nowrap; }
.s2-shelf-objects { display: flex; align-items: flex-end; gap: 12px; height: 90px; border-bottom: var(--line-construction) solid var(--color-line-ui); margin-top: 12px; }
.s2-outline { fill: none; stroke: var(--color-text-tertiary); stroke-width: var(--line-construction); stroke-linejoin: round; overflow: visible; }
.s2-outline * { vector-effect: non-scaling-stroke; }
.s2-shelf .s2-outline { max-width: 80px; max-height: 80px; width: 100%; min-width: 0; flex: 1; }
.s2-shelf .s2-outline--whiteboard { max-width: 112px; flex: 2; }
.s2-build-marks { display: flex; gap: 5px; flex: none; }
.s2-build-marks i { width: 10px; height: 10px; background: var(--color-route); }
.s2-build-marks:empty { display: none; }
/* A person stop that sets with its own route: the kit's verdict primitive (ink square, then the words). */
.s2-scene .s2-stop { display: grid; grid-template-columns: 12px auto; column-gap: 10px; align-items: start; }
.s2-scene .s2-stop .k-person__square { width: 12px; height: 12px; margin-top: 8px; }
.s2-scene .s2-stop-word.k-smallcaps { font: inherit; letter-spacing: 0; font-feature-settings: normal; }

/* Fix. The unknown system stays an unfilled survey, in ink, behind a numbered working sheet. */
.s2-fix { height: 1040px; --k-lx: .65; }
.s2-fix .s2-light { inset: 112px 0 0; background: linear-gradient(118deg, var(--k-mat-light-300) 0, var(--k-mat-light-000) 36%), radial-gradient(var(--k-pool-w) var(--k-pool-h) at var(--k-pool-x) var(--k-pool-y), var(--k-mat-light-860), var(--k-mat-light-520) 36%, var(--k-mat-light-160) 70%, var(--k-mat-light-000) 100%), var(--color-surface-well-deep); --k-pool-x: 52%; --k-pool-y: 42%; --k-pool-w: 60%; --k-pool-h: 66%; }
.s2-fix .s2-grid { width: calc(100% - 32px); left: 16px; top: 112px; height: calc(100% - 144px); }
.s2-survey { position: absolute; inset: 0; z-index: 1; }
.s2-survey-label { position: absolute; left: 32px; top: 24px; font: 400 21px/28px var(--p-font-family-display); max-width: 232px; }
.s2-survey-part { position: absolute; left: 28px; width: 156px; height: 108px; }
.s2-survey-part .s2-outline { width: 112px; height: 80px; }
.s2-survey-part .s2-outline > :first-child { stroke-dasharray: 5 4; }
.s2-survey .s2-outline { stroke: var(--color-text-secondary); }
/* Each surveyed part carries the number of the backlog row it is entered into; its name is in that row. */
.s2-survey-part p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.s2-part-no { position: absolute; top: 2px; left: 122px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--color-text-primary); }
.s2-links .k-route__line.s2-link { stroke: var(--color-text-secondary); stroke-width: var(--line-structure); }
.s2-part-1 { top: 228px; }.s2-part-2 { top: 362px; }.s2-part-3 { top: 500px; }.s2-part-4 { top: 640px; }.s2-part-5 { top: 778px; }
.s2-part-1 .s2-part-no { left: 116px; top: 40px; }.s2-part-2 .s2-part-no { left: 120px; top: 44px; }.s2-part-3 .s2-part-no { left: 84px; top: 40px; }.s2-part-4 .s2-part-no { left: 80px; top: 48px; }.s2-part-5 .s2-part-no { left: 122px; top: 38px; }
.s2-part-3 .s2-outline, .s2-part-4 .s2-outline { width: 76px; }
.s2-loose-wire { fill: none; stroke: var(--color-text-tertiary); stroke-width: var(--line-structure); stroke-dasharray: 5 5; }
#s2-review { left: 280px; top: 48px; width: 300px; height: 244px; rotate: -4deg; }
#s2-review .k-doc-title { margin-top: 16px !important; }
#s2-review .s2-mini-fields { margin-top: 12px !important; }
#s2-review .k-detail > .k-doc-subtitle { margin-top: 32px !important; }
#s2-backlog { left: 248px; top: 236px; width: 608px; height: 528px; z-index: 6; --k-pad: 24px; }
#s2-backlog .k-doc-title { margin-top: 12px !important; }
.s2-backlog-table { margin-top: 24px !important; font-size: 12px; line-height: 16px; }
.s2-backlog-table .s2-col-number { width: 28px; }.s2-backlog-table .s2-col-item { width: 168px; }
#s2-backlog .s2-backlog-table td { height: 56px; padding: 10px 8px 10px 0; }
#s2-backlog .s2-backlog-table td:nth-child(3) { position: relative; padding-right: 40px; }
#s2-backlog .s2-backlog-table td:nth-child(3) > .k-tick { position: absolute; right: 8px; top: 50%; margin: -8px 0 0; width: 16px; height: 16px; }
.s2-backlog-table td:nth-child(2) strong { font-weight: 500; }
.s2-backlog-table td:nth-child(3) { color: var(--color-text-secondary); }
#s2-backlog .s2-backlog-foot { font-size: 10px; line-height: 14px; margin-top: 20px !important; }
#s2-day { left: 284px; top: 700px; width: 340px; height: 284px; z-index: 5; rotate: -1.5deg; }
#s2-day .k-body { padding: 16px 24px; }
#s2-day .k-doc-title { margin-top: 52px !important; }
#s2-day .k-register th:first-child { width: 24px; }#s2-day .k-register th:nth-child(2) { width: 112px; }#s2-day .k-register td:nth-child(3) { color: var(--color-text-secondary); }
.s2-day-number { display: flex; align-items: baseline; gap: 8px; position: absolute; right: 24px; top: 88px; }
.s2-day-number strong { font: 400 38px/44px var(--p-font-family-display); }
#s2-day .k-doc-subtitle { max-width: 220px; }
#s2-day .k-register { margin-top: 24px; }
#s2-fix-pat { left: 668px; top: 940px; }

/* Learn. A large time plot, heavy card stock, a workshop sheet, and four real session slips. */
.s2-learn { height: 916px; --k-lx: 1; }
.s2-learn .s2-light { inset: 48px 0 0; border-radius: 0 0 0 48px; background: linear-gradient(90deg, var(--k-mat-light-300) 0, var(--k-mat-light-000) 30%), radial-gradient(var(--k-pool-w) var(--k-pool-h) at var(--k-pool-x) var(--k-pool-y), var(--k-mat-light-860), var(--k-mat-light-520) 36%, var(--k-mat-light-160) 70%, var(--k-mat-light-000) 100%), var(--color-surface-well-deep); --k-pool-x: 36%; --k-pool-y: 46%; --k-pool-w: 56%; --k-pool-h: 76%; }
.s2-learn-field { left: 432px; top: 96px; right: 0; bottom: 64px; }
.s2-learn-route { left: 80px; top: 122px; }
#s2-workshop { left: 556px; top: 18px; width: 376px; height: 330px; rotate: 3deg; z-index: 3; }
#s2-workshop .k-body { padding: 24px; }
#s2-workshop .k-doc-title { margin-top: 16px !important; }
#s2-workshop .k-footline { margin-top: 8px !important; }
.s2-session-meta { display: flex; gap: 32px; margin-top: 16px; padding-block: 8px; border-block: var(--line-construction) solid var(--color-text-secondary); }
.s2-session-meta strong { font-weight: 500; }
.s2-session-fields { margin-top: 8px !important; }
.s2-session-fields > div { display: grid; grid-template-columns: 80px 1fr; gap: 12px; padding-block: 12px; box-shadow: inset 0 calc(-1 * var(--k-hair)) var(--color-line-construction); }
.s2-session-fields dt { color: var(--color-text-tertiary); }
.s2-session-fields dd { line-height: 20px; }
#s2-learn-book { left: 112px; top: 180px; width: 284px; height: 236px; rotate: -5deg; }
#s2-learn-book .k-pack__spine { width: 16px; z-index: 2; }
#s2-learn-book .k-body { padding-left: 32px; }
.s2-runbook-lines { margin-top: 8px; }
.s2-runbook-lines p { padding-block: 6px; box-shadow: inset 0 calc(-1 * var(--k-hair)) var(--color-line-construction); }
#s2-learn-book .s2-runbook-lines p:first-child { padding-block: 0 24px; }
#s2-week { left: 48px; top: 300px; width: 860px; height: 424px; z-index: 8; }
#s2-week .k-body { padding: 24px 32px; }
#s2-week .k-doc-title { margin-top: 12px !important; }
/* The first week at read scale: days across, and every cell filled from the example's own jobs. Each day
   is a kit verdict: its person square lands, then the day's words write in. */
.s2-plan-week { display: grid; grid-template-columns: 104px repeat(5,minmax(0,1fr)); grid-template-rows: auto auto auto auto auto; margin-top: 22px; }
.s2-wk-labels, .s2-wk-day { display: grid; grid-row: 1 / span 5; grid-template-rows: subgrid; }
.s2-wk-labels span { font-size: 9px; line-height: 12px; color: var(--color-text-tertiary); padding: 8px 8px 8px 0; box-shadow: inset 0 calc(-1 * var(--k-hair)) 0 var(--color-line-construction); }
.s2-wk-labels span:first-child { box-shadow: inset 0 calc(-1 * var(--line-construction)) 0 var(--color-text-primary); }
.s2-wk-day { position: relative; align-items: stretch; gap: 0; box-shadow: inset var(--k-hair) 0 0 var(--color-line-construction); }
.s2-wk-head { grid-row: 1; font-weight: 500; font-size: 12px; line-height: 16px; padding: 6px 10px; box-shadow: inset 0 calc(-1 * var(--line-construction)) 0 var(--color-text-primary); }
.s2-wk-words.k-smallcaps { grid-row: 2 / span 4; display: grid; grid-template-rows: subgrid; font: inherit; letter-spacing: 0; font-feature-settings: normal; }
.s2-wk-words p { padding: 8px 10px; box-shadow: inset 0 calc(-1 * var(--k-hair)) 0 var(--color-line-construction); }
.s2-wk-dept { font-size: 11px; line-height: 14px; color: var(--color-text-secondary); }
.s2-wk-job { font-size: 16px; line-height: 20px; }
.s2-wk-reads { font-size: 11px; line-height: 15px; color: var(--color-text-secondary); }
.s2-wk-who { font-size: 12px; line-height: 16px; font-weight: 500; padding-left: 26px !important; }
.s2-wk-mark { position: absolute; grid-row: 5; left: 10px; bottom: 11px; width: 8px; height: 8px; z-index: 1; }
.s2-week-end { display: flex; justify-content: space-between; gap: 24px; margin-top: 16px; padding-top: 12px; border-top: var(--line-structure) solid var(--color-text-secondary); font-size: 9px; line-height: 12px; }
.s2-week-end p { max-width: 360px; }
.s2-week-end > span { white-space: nowrap; color: var(--color-text-secondary); }
.s2-coaching { position: absolute; inset: 0; }
.s2-coaching-slip { width: 296px; height: 208px; }
.s2-coaching-slip .k-body { padding: 16px 20px; }
.s2-coaching-slip .k-doc-title { font-size: 11px; line-height: 16px; margin-top: 10px !important; }
.s2-session-no { position: absolute; top: 46px; right: 20px; display: flex; align-items: baseline; gap: 6px; }
.s2-session-no > span { font-size: 7px; color: var(--color-text-tertiary); }
.s2-session-no strong { font-size: 11px; font-weight: 600; }.s2-session-no small { font-size: 7px; font-weight: 400; }
.s2-coach-fields { margin-top: 16px !important; }
.s2-coach-fields > div { padding-block: 9px; box-shadow: inset 0 calc(-1 * var(--k-hair)) var(--color-line-construction); }
.s2-coach-fields dt { font-size: 8px; color: var(--color-text-tertiary); margin-bottom: 4px; }
.s2-coach-fields dd { max-width: 234px; font-size: 9px; line-height: 14px; }
/* Four slips held as a fan from one corner: each shows its own session number where it fans out. */
#s2-coaching-1 { left: 1058px; top: 196px; rotate: 7deg; z-index: 3; }
#s2-coaching-2 { left: 1030px; top: 270px; rotate: 3deg; z-index: 4; }
#s2-coaching-3 { left: 1000px; top: 344px; rotate: -1deg; z-index: 5; }
#s2-coaching-4 { left: 968px; top: 418px; rotate: -5deg; z-index: 6; }
#s2-oprev { left: 1112px; top: 656px; width: 244px; height: 176px; rotate: 2.5deg; z-index: 4; }
#s2-oprev .k-body { padding: 16px 20px; }
#s2-oprev .k-doc-title { font-size: 11px; line-height: 16px; margin-top: 10px !important; }
#s2-oprev .s2-coach-fields dd { max-width: 200px; }
#s2-learn-sam { left: 214px; top: 816px; }
#s2-learn-pat { left: 960px; top: 760px; }

@media (min-width: 1441px) { .s2-stage--wide .s2-scene { width: 1392px; } }

/* Recompose the phone from its own coordinates, retaining paper width and content overlap. */
@media (max-width: 1439px) {
 .s2-frame { width: auto; max-width: 624px; margin-inline: auto; padding-inline: 16px; }
 .s2-header { height: 72px; gap: 12px; }.s2-brand { font-size: 16px; line-height: 24px; }
 .s2-nav { display: none; }.s2-header .btn { padding: 10px 16px; font-size: 12px; line-height: 16px; }
 .s2-opening { padding-block: 64px 48px; }.s2-opening-grid { display: block; margin-top: 16px; }
 .s2-opening h1 { font-size: 38px; line-height: 44px; }.s2-opening-copy { margin-top: 24px; }
 .s2-lead { font-size: 21px; line-height: 28px; }.s2-intro-copy { font-size: 16px; line-height: 24px; }
 .s2-action { display: block; margin-top: 24px; }.s2-action p { margin-top: 16px; font-size: 12px; line-height: 16px; max-width: 300px; }
 .s2-stage { display: block; }.s2-stage--wide .s2-scene, .s2-scene { width: 374px; }
 .s2-scene { max-width: calc(100vw - 16px); }
 .s2-desktop { display: none; }.s2-phone { display: block; }
 .s2-text { margin-top: 48px; padding: 20px 0 0; }.s2-text h2 { font-size: 21px; line-height: 28px; }
 .s2-text .k-review { margin-top: 40px; }.s2-text .k-review blockquote { font-size: 28px; line-height: 36px; }
 .s2-after { margin-top: 64px; grid-template-columns: 1fr; gap: 20px; }.s2-after h2 { font-size: 21px; line-height: 28px; }
 .s2-footer { margin-top: 64px; flex-direction: column; }
 .s2-grow { height: 2644px; }
 .s2-department:nth-child(1) h3 { padding-left: 16px; }
 .s2-grow .s2-light { inset: 160px 0 0; --k-pool-x: 60%; --k-pool-y: 47%; --k-pool-w: 86%; --k-pool-h: 62%; }
 .s2-grow-field { left: 48px; top: 160px; bottom: 64px; }
 .s2-goal-one { left: 32px; top: 24px; width: 300px; font-size: 21px; }
 .s2-goal-two { left: 32px; top: 868px; width: 300px; font-size: 21px; }
 .s2-goal-three { left: 32px; top: 1416px; width: 300px; font-size: 21px; }
 #s2-enquiry { left: 24px; top: 104px; width: 300px; height: 220px; }
 #s2-enquiry .k-inbox__message { padding-inline: 10px; }
 #s2-quote { left: 16px; top: 276px; width: 320px; height: 228px; rotate: 0deg; }
 #s2-diary { left: 60px; top: 456px; width: 248px; height: 184px; z-index: 4; }
 #s2-diary .k-body { padding-top: 52px; }
 #s2-diary .k-letterhead { display: none; }
 #s2-diary .k-doc-title { margin-top: 0 !important; }
 #s2-diary .s2-calendar { margin-top: 4px; padding-top: 3px; }
 #s2-diary .s2-calendar-dates { row-gap: 0; }
 #s2-diary .s2-calendar-dates span { line-height: 13px; font-size: 8px; }
 #s2-diary .s2-calendar-dates .s2-ringed { width: 15px; }
 #s2-diary .k-doc-subtitle { display: none; }
 #s2-grow-sam { left: 178px; top: 650px; }
 #s2-variation { left: 40px; top: 940px; width: 276px; height: 208px; rotate: -3deg; }
 #s2-grow-pat-signs { left: 40px; top: 1164px; }.s2-grow .k-person__name { font-size: 16px; line-height: 24px; }.s2-grow .k-person__role { font-size: 12px; line-height: 16px; }
 #s2-jobfile { left: 34px; top: 1496px; width: 300px; height: 280px; }
 #s2-grow-pat-checks { left: 40px; top: 1452px; }
 #s2-grow-pat-checks .k-person__name { width: auto; }
 #s2-roadmap { left: 16px; top: 1728px; width: 330px; height: 748px; --k-pad: 16px; }
 #s2-roadmap .k-doc-title { font-size: 28px; line-height: 32px; }
 .s2-roadmap-head .s2-example { flex-basis: 100%; margin: 2px 0 0 !important; }
 .s2-plan-axis, .s2-plan-run { grid-template-columns: repeat(12,minmax(0,1fr)); }
 .s2-plan-axis > span:first-child { display: none; }.s2-plan-axis > span:not(:first-child) { padding-left: 4px; }
 .s2-plan-rules { left: 0; }
 .s2-plan-run { row-gap: 2px; padding-block: 5px 6px; min-height: 0; }
 .s2-plan-run > span:first-child { grid-column: 1 / -1; font-size: 11px; line-height: 16px; padding: 0; }
 .s2-plan-done { grid-column: 1 / -1; padding-left: 0; }
 .s2-bar { height: 12px; }.s2-bar::after { inset: 3px 5px; }
 .s2-reports { margin-top: 14px; }.s2-reports th { font-size: 9px; line-height: 12px; padding-inline: 4px; vertical-align: top; }
 .s2-report-head { display: block; }.s2-cadence { flex-direction: column; gap: 2px; margin-top: 4px; }.s2-cadence span + span { padding-left: 0; box-shadow: none; }
 .s2-scene .s2-stop .k-person__square { margin-top: 6px; }
 .s2-plan-goal { padding-top: 8px; }
 #s2-roadmap .k-footline { font-size: 9px; line-height: 12px; }
 .s2-shelf { display: contents; }
 .s2-department { position: absolute; z-index: 2; width: 145px; }
 .s2-department:nth-child(odd) { left: 24px; }
 .s2-department:nth-child(even) { left: 197px; }
 .s2-department:nth-child(1), .s2-department:nth-child(2) { top: 724px; }
 .s2-department:nth-child(3), .s2-department:nth-child(4) { top: 1244px; }
 .s2-department:nth-child(5), .s2-department:nth-child(6) { top: 2514px; }
 .s2-department h3 { font-size: 12px; line-height: 16px; }.s2-shelf-objects { height: 66px; margin-top: 8px; gap: 8px; }
 .s2-shelf .s2-outline { max-height: 62px; }.s2-build-marks { gap: 3px; }.s2-build-marks i { width: 8px; height: 8px; }

 .s2-fix { height: 1512px; }.s2-fix .s2-light { inset: 176px 0 0; --k-pool-x: 48%; --k-pool-y: 46%; --k-pool-w: 92%; --k-pool-h: 60%; }
 .s2-survey-label { left: 24px; top: 24px; font-size: 21px; line-height: 28px; max-width: 286px; }
 .s2-survey-part { width: 112px; height: 108px; }.s2-survey-part .s2-outline { width: 84px; height: 72px; }.s2-part-no { left: 88px; top: 0; }
 .s2-survey-part .s2-part-no { left: 88px; top: 0; }
 .s2-part-1 { left: 44px; top: 144px; }.s2-part-2 { left: 230px; top: 144px; }.s2-part-3 { left: 28px; top: 280px; }.s2-part-4 { left: 142px; top: 280px; }.s2-part-5 { left: 254px; top: 280px; }
 .s2-part-3 .s2-outline, .s2-part-4 .s2-outline { width: 60px; }.s2-part-3 .s2-part-no, .s2-part-4 .s2-part-no { left: 66px; }
 #s2-review { left: 40px; top: 416px; width: 280px; height: 204px; rotate: -3deg; }
 .s2-fix .s2-grid { top: 176px; height: calc(100% - 208px); }
 #s2-review .s2-mini-fields { margin-top: 4px !important; }
 #s2-review .s2-mini-fields > div { padding-block: 6px; }
 #s2-review .k-detail > .k-doc-subtitle { margin-top: 20px !important; }
 #s2-backlog { left: 16px; top: 568px; width: 330px; height: 644px; --k-pad: 16px; }
 #s2-backlog .k-backlog__clip { left: 262px; }
 #s2-backlog::before { left: 268px; }
 #s2-backlog .k-doc-title { font-size: 28px; line-height: 32px; }
 .s2-backlog-table { display: block; font-size: 11px; line-height: 16px; margin-top: 24px !important; }
 .s2-backlog-table colgroup { display: none; }
 .s2-backlog-table thead, .s2-backlog-table tbody { display: block; }
 .s2-backlog-table tr { display: grid; grid-template-columns: 22px minmax(0,1fr); }
 .s2-backlog-table thead tr { border-bottom: var(--line-construction) solid var(--color-text-primary); }
 .s2-backlog-table th { font-size: 10px; line-height: 14px; border-bottom: 0; padding: 5px 8px 5px 0; }
 .s2-backlog-table th:nth-child(3) { display: none; }
 .s2-backlog-table tbody tr { grid-template-rows: 16px 1fr; gap: 4px 0; min-height: 80px; padding-block: 12px; box-shadow: inset 0 calc(-1 * var(--k-hair)) var(--color-line-construction); }
 #s2-backlog .s2-backlog-table td { height: auto; padding: 0 8px 0 0; box-shadow: none; }
 .s2-backlog-table td:first-child { grid-column: 1; grid-row: 1 / span 2; }
 .s2-backlog-table td:nth-child(2) { grid-column: 2; grid-row: 1; }
 .s2-backlog-table td:nth-child(3) { grid-column: 2; grid-row: 2; }
 #s2-backlog .s2-backlog-table td:nth-child(3) { padding-right: 32px; }#s2-backlog .s2-backlog-table td:nth-child(3) > .k-tick { right: 4px; }
 #s2-backlog .s2-backlog-foot { display: block; font-size: 10px; line-height: 14px; margin-top: 16px !important; }#s2-backlog .s2-backlog-foot .k-inline-person { display: flex; margin-top: 6px; }
 #s2-day { left: 38px; top: 1150px; width: 288px; height: 240px; rotate: 0deg; z-index: 5; }
 #s2-day .k-body { padding: 16px 20px; }#s2-day .k-doc-title { margin-top: 32px !important; }.s2-day-number { top: 52px; }
 #s2-day .k-register { margin-top: 16px; }
 #s2-fix-pat { left: 170px; top: 1412px; }

 .s2-learn { height: 1744px; }.s2-learn .s2-light { inset: 24px 0 0; --k-pool-x: 35%; --k-pool-y: 43%; --k-pool-w: 90%; --k-pool-h: 72%; }
 .s2-learn-field { left: 32px; top: 120px; bottom: 40px; }
 .s2-learn-route { left: 48px; top: 34px; font-size: 21px; }
 #s2-workshop { left: 36px; top: 100px; width: 288px; height: 340px; rotate: -3deg; }
 #s2-workshop .k-body { padding: 20px; }.s2-session-meta { font-size: 8px; gap: 8px; }
 .s2-session-fields > div { grid-template-columns: 68px 1fr; gap: 8px; }.s2-session-fields dd { line-height: 18px; }
 #s2-learn-book { left: 48px; top: 928px; width: 280px; height: 184px; rotate: 0deg; z-index: 4; }
 #s2-learn-book .k-body { padding-top: 16px; }#s2-learn-book .k-doc-title { margin-top: 32px !important; }.s2-runbook-lines { margin-top: 8px; }.s2-runbook-lines p { padding-block: 4px; }
 #s2-learn-book .s2-runbook-lines p:first-child { padding-block: 4px; }
 #s2-week { left: 16px; top: 388px; width: 330px; height: 588px; }
 #s2-week .k-body { padding: 20px; }
 #s2-week .k-doc-title { font-size: 28px; line-height: 32px; }
 .s2-plan-week { display: block; margin-top: 16px; border-top: var(--line-construction) solid var(--color-text-primary); }
 .s2-wk-labels { display: none; }
 .s2-wk-day { display: grid; grid-template-columns: 34px minmax(0,1fr); grid-template-rows: auto; padding-block: 8px; box-shadow: inset 0 calc(-1 * var(--k-hair)) 0 var(--color-line-construction); }
 .s2-wk-head { grid-row: 1; grid-column: 1; box-shadow: none; padding: 0; font-size: 11px; }
 .s2-wk-words.k-smallcaps { grid-row: 1; grid-column: 2; display: block; }
 .s2-wk-words p { padding: 0; box-shadow: none; }
 .s2-wk-dept { font-size: 10px; line-height: 14px; }.s2-wk-job { font-size: 14px; line-height: 18px; margin-top: 1px; }.s2-wk-reads { font-size: 10px; line-height: 14px; margin-top: 2px; }
 .s2-wk-who { margin-top: 4px; padding-left: 14px !important; font-size: 11px; line-height: 14px; }
 .s2-wk-mark { grid-row: 1; left: 34px; bottom: 11px; width: 7px; height: 7px; }
 .s2-week-end { display: block; margin-top: 12px; font-size: 9px; }.s2-week-end > span { display: block; margin-top: 8px; }
 .s2-coaching-slip { width: 280px; height: 208px; }
 #s2-coaching-1 { left: 48px; top: 1184px; rotate: 4deg; }
 #s2-coaching-2 { left: 42px; top: 1258px; rotate: 2deg; }
 #s2-coaching-3 { left: 36px; top: 1332px; rotate: 0deg; }
 #s2-coaching-4 { left: 30px; top: 1406px; rotate: -2deg; }
 #s2-learn-sam { left: 158px; top: 1124px; z-index: 6; }
 #s2-learn-pat { left: 178px; top: 1648px; }
 #s2-oprev { display: none; }
}