/* Inner pages polish pass, Oct 2026
   Method: unslop by Damir Sokolovsky (@heydamir, CC BY 4.0), https://github.com/heydamir/unslop
   Loaded on every page except the homepage, before ps-a11y.css so the accessibility toolbox still wins.
   Remove the <link> to undo everything in this file.

   Type scale  desktop 12 14 16 18 20 26 36 48, mobile 12 14 16 18 22 28 32
   Text roles  primary #202020, secondary #686868, muted #737373 (greyscale, as decided on 16 Sep)
   Weights     400 and 500 only */

/* 1. Type and color roles, generated from the scale above and reviewed by hand */
@media (min-width:761px){
  html body .about-intro h2{font-size:36px !important}
  html body .about-intro p{font-size:18px !important;color:#686868 !important}
  html body .story > h3{font-size:26px !important}
  html body .story > p{color:#686868 !important}
  html body .button > span.ps-btn-label{font-size:16px !important}
  html body .simple-page > p.lede{font-size:20px !important;color:#686868 !important}
  html body .evidence-work-copy > p.project-subtitle{color:#202020 !important}
  html body .evidence-work-copy > span.evidence-read{color:#202020 !important}
  html body main p.scope-intro{color:#686868 !important}
  html body .scope-policy > strong{font-size:16px !important}
  html body .scope-policy > p{font-size:16px !important;color:#686868 !important}
  html body .scope-row h2{font-size:26px !important}
  html body .scope-row li{color:#686868 !important}
  html body .psb-cs-head > p.psb-lede{color:#686868 !important}
  html body .psb-stage > span.psk-label{font-weight:500 !important;color:#202020 !important}
  html body .psb-copy > p{font-size:16px !important;color:#686868 !important}
  html body .avatar-decision > h2{font-size:36px !important}
  html body .avatar-decision > p.avatar-lead{font-size:20px !important;color:#686868 !important}
  html body .avatar-decision-points h3{font-size:18px !important}
  html body .avatar-decision-points p{font-size:16px !important;color:#686868 !important}
  html body .avatar-model-header > span.am-title{font-size:18px !important;font-weight:500 !important;color:#202020 !important}
  html body .avatar-model-header > span.am-chip{font-weight:500 !important;color:#202020 !important}
  html body .am-ruler > span{color:#737373 !important}
  html body .am-track > span.am-label{font-weight:500 !important;color:#202020 !important}
  html body .am-lane > span.am-clip.am-clip--script{font-size:14px !important;font-weight:500 !important;color:#202020 !important}
  html body .am-lane > span.am-clip.am-clip--gesture{font-size:14px !important;font-weight:500 !important;color:#202020 !important}
  html body .avatar-model > figcaption{font-size:14px !important;color:#686868 !important}
  html body .scope-conversation > h2{font-size:36px !important}
  html body .scope-conversation > p{color:#686868 !important}
  html body .c-card__body > span.c-card__label{font-weight:500 !important;color:#202020 !important;text-transform:none !important;letter-spacing:0 !important}
  html body .c-card__body > span.c-card__value{font-size:18px !important;font-weight:500 !important}
  html body .c-card__body > span.c-card__note{color:#686868 !important}
  html body .call-card > h2.call-card__title{font-size:26px !important;font-weight:500 !important}
  html body .call-card > p.call-card__text{color:#686868 !important}
  html body .pg-intro > p{font-size:18px !important;color:#686868 !important}
  html body .pg-folder-front > span.pg-folder-label{font-weight:500 !important;color:#202020 !important}
  html body .pg-folder-label > small{font-size:12px !important;color:#202020 !important}
  html body .case > div.work-meta{color:#737373 !important}
  html body .work-meta > span.client-mark{font-size:12px !important;font-weight:500 !important;color:#202020 !important}
  html body .work-meta > span.dot{color:#737373 !important}
  html body .work-meta > span{color:#737373 !important}
  html body .evidence-figure strong{color:#202020 !important}
  html body .evidence-figure a{color:#202020 !important}
  html body .case-summary h2{font-weight:500 !important}
  html body .case-summary p{font-size:16px !important;color:#686868 !important}
  html body .case-context dt{font-size:14px !important;font-weight:500 !important}
  html body .case-context dd{color:#686868 !important}
  html body .decision-evidence h2{font-size:36px !important}
  html body .decision-evidence p{color:#686868 !important}
  html body .decision-copy > p{color:#686868 !important}
  html body .decision-block > p{color:#686868 !important}
  html body .story li{color:#686868 !important}
  html body .next-work > a{font-size:20px !important}
  html body .next-work > a.next-unlock{font-size:20px !important}
  html body .figma-evidence h2{font-size:36px !important}
  html body .figma-evidence > header > p{font-size:16px !important;color:#686868 !important}
  html body .decision-trail strong{font-size:16px !important}
  html body .decision-trail p{font-size:14px !important;color:#686868 !important}
  html body .decision-heading > h3{font-size:26px !important}
  html body .decision-heading > p{font-size:16px !important;color:#686868 !important}
  html body .city-input > span.diagram-label{font-size:12px !important;font-weight:500 !important;color:#202020 !important}
  html body .service-stack > span{font-size:14px !important;color:#686868 !important}
  html body .city-input > p{color:#686868 !important}
  html body .city-output > span.diagram-label{font-size:12px !important;font-weight:500 !important;color:#202020 !important}
  html body .intent-grid > span{font-weight:500 !important;color:#686868 !important}
  html body .city-output > p{color:#686868 !important}
  html body .decision-graphic > figcaption{font-size:14px !important;color:#686868 !important}
  html body .decision-trade p{color:#686868 !important}
  html body .decision-side > span.diagram-label{font-size:12px !important;font-weight:500 !important;color:#202020 !important}
  html body .interaction-sequence p{font-size:14px !important;color:#686868 !important}
  html body .decision-side > p.fe-small{color:#686868 !important}
  html body .delivery-note > p{color:#686868 !important}
  html body .action-example > span.diagram-label{font-size:12px !important;font-weight:500 !important;color:#202020 !important}
  html body .action-example > p{color:#686868 !important}
  html body .pg-wrap > a.pg-back{color:#737373 !important}
  html body .pg-detail-heading > h1{font-size:48px !important;color:#202020 !important}
  html body .pg-detail-heading > p.pg-detail-intro{color:#686868 !important}
  html body .pg-meta > span{font-size:12px !important;color:#737373 !important}
  html body .pg-ownership > h2{font-weight:500 !important;color:#202020 !important;letter-spacing:0 !important}
  html body .pg-ownership > p{color:#686868 !important}
  html body .pg-section-title > h2{font-size:36px !important;color:#202020 !important}
  html body .pg-process span.pg-step-number{font-size:12px !important;color:#737373 !important}
  html body .pg-process h3{color:#202020 !important}
  html body .pg-process p{color:#686868 !important}
  html body .pg-choice > h2{font-size:26px !important;color:#202020 !important}
  html body .pg-choice > p{font-size:16px !important;color:#686868 !important}
  html body .pg-capture strong{font-weight:500 !important;color:#202020 !important}
  html body .pg-capture p{color:#686868 !important}
  html body .pg-provenance > p{font-size:12px !important;color:#737373 !important}
  html body .pg-provenance a{font-size:12px !important;color:#202020 !important}
  html body .pg-related > h2{font-size:26px !important;color:#202020 !important}
  html body .pg-hero > figcaption{font-size:14px !important;color:#686868 !important}
  html body .pg-original-assets > h2{font-size:26px !important;color:#202020 !important}
  html body .pg-tool-art figcaption{font-size:14px !important;color:#686868 !important}
  html body .pg-original-assets > p{font-size:12px !important;color:#737373 !important}
  html body .bb-object-heading h2{font-size:36px !important;color:#202020 !important}
  html body .bb-object-heading > p{color:#686868 !important}
  html body .bb-stage-label > span{font-size:14px !important;color:#686868 !important}
  html body .bb-objects > p.bb-object-hint{color:#737373 !important}
  html body .bb-objects > p.bb-object-note{color:#737373 !important}
  html body .bb-tool > p{font-size:16px !important;color:#686868 !important}
  html body .bb-tool > span.bb-tool-name{font-size:18px !important;font-weight:500 !important;color:#202020 !important}
  html body .bb-compare span.bb-tag{font-weight:500 !important;color:#202020 !important}
}
@media (max-width:760px){
  html body .about-intro h2{font-size:28px !important}
  html body .about-intro p{font-size:18px !important;color:#686868 !important}
  html body .story > h2{font-size:28px !important}
  html body .story > h3{font-size:22px !important}
  html body .story > p{color:#686868 !important}
  html body .simple-page > p.lede{font-size:22px !important;color:#686868 !important}
  html body .evidence-work-copy > h3{font-size:22px !important}
  html body .evidence-work-copy > p.project-subtitle{color:#202020 !important}
  html body .evidence-work-copy > span.evidence-read{color:#202020 !important}
  html body main p.scope-intro{font-size:18px !important;color:#686868 !important}
  html body .scope-policy > p{color:#686868 !important}
  html body .scope-row h2{font-size:22px !important}
  html body .scope-row li{color:#686868 !important}
  html body .psb-cs-head > p.psb-lede{color:#686868 !important}
  html body .psb-stage > span.psk-label{font-weight:500 !important;color:#202020 !important}
  html body .psb-copy > p{font-size:16px !important;color:#686868 !important}
  html body .avatar-decision > p.avatar-lead{font-size:18px !important;color:#686868 !important}
  html body .avatar-decision-points h3{font-size:18px !important}
  html body .avatar-decision-points p{color:#686868 !important}
  html body .avatar-model-header > span.am-title{font-size:18px !important;font-weight:500 !important;color:#202020 !important}
  html body .avatar-model-header > span.am-chip{font-weight:500 !important;color:#202020 !important}
  html body .am-ruler > span{color:#737373 !important}
  html body .am-track > span.am-label{font-weight:500 !important;color:#202020 !important}
  html body .am-lane > span.am-clip.am-clip--script{font-size:12px !important;font-weight:500 !important;color:#202020 !important}
  html body .am-lane > span.am-clip.am-clip--gesture{font-size:12px !important;font-weight:500 !important;color:#202020 !important}
  html body .avatar-model > figcaption{font-size:14px !important;color:#686868 !important}
  html body .scope-conversation > p{color:#686868 !important}
  html body .c-card__body > span.c-card__label{font-weight:500 !important;color:#202020 !important;text-transform:none !important;letter-spacing:0 !important}
  html body .c-card__body > span.c-card__value{font-size:18px !important;font-weight:500 !important}
  html body .c-card__body > span.c-card__note{color:#686868 !important}
  html body .call-card > h2.call-card__title{font-size:22px !important;font-weight:500 !important}
  html body .call-card > p.call-card__text{color:#686868 !important}
  html body .pg-intro > p{color:#686868 !important}
  html body .pg-folder-front > span.pg-folder-label{font-size:22px !important;font-weight:500 !important;color:#202020 !important}
  html body .pg-folder-label > small{font-size:12px !important;color:#202020 !important}
  html body .case > div.work-meta{color:#737373 !important}
  html body .work-meta > span.client-mark{font-size:12px !important;font-weight:500 !important;color:#202020 !important}
  html body .work-meta > span.dot{color:#737373 !important}
  html body .work-meta > span{color:#737373 !important}
  html body .evidence-figure strong{color:#202020 !important}
  html body .evidence-figure a{color:#202020 !important}
  html body .case-summary h2{font-weight:500 !important}
  html body .case-summary p{color:#686868 !important}
  html body .case-context dt{font-size:14px !important;font-weight:500 !important}
  html body .case-context dd{color:#686868 !important}
  html body .decision-evidence p{color:#686868 !important}
  html body .decision-copy > h3{font-size:22px !important}
  html body .decision-copy > p{color:#686868 !important}
  html body .decision-block > h3{font-size:22px !important}
  html body .decision-block > p{color:#686868 !important}
  html body .story li{color:#686868 !important}
  html body .next-work > a{font-size:22px !important}
  html body .next-work > a.next-unlock{font-size:22px !important}
  html body .figma-evidence h2{font-size:28px !important}
  html body .figma-evidence > header > p{font-size:16px !important;color:#686868 !important}
  html body .decision-trail strong{font-size:16px !important}
  html body .decision-trail p{font-size:14px !important;color:#686868 !important}
  html body .decision-heading > h3{font-size:28px !important}
  html body .decision-heading > p{font-size:16px !important;color:#686868 !important}
  html body .city-input > span.diagram-label{font-size:12px !important;font-weight:500 !important;color:#202020 !important}
  html body .service-stack > span{font-size:14px !important;color:#686868 !important}
  html body .city-input > p{color:#686868 !important}
  html body .city-output > span.diagram-label{font-size:12px !important;font-weight:500 !important;color:#202020 !important}
  html body .intent-grid > span{font-weight:500 !important;color:#686868 !important}
  html body .city-output > p{color:#686868 !important}
  html body .decision-graphic > figcaption{font-size:14px !important;color:#686868 !important}
  html body .decision-trade p{color:#686868 !important}
  html body .decision-side > span.diagram-label{font-size:12px !important;font-weight:500 !important;color:#202020 !important}
  html body .interaction-sequence p{font-size:14px !important;color:#686868 !important}
  html body .decision-side > p.fe-small{color:#686868 !important}
  html body .delivery-note > p{color:#686868 !important}
  html body .action-example > span.diagram-label{font-size:12px !important;font-weight:500 !important;color:#202020 !important}
  html body .action-example > p{color:#686868 !important}
  html body .pg-wrap > a.pg-back{color:#737373 !important}
  html body .pg-detail-heading > h1{font-size:32px !important;color:#202020 !important}
  html body .pg-detail-heading > p.pg-detail-intro{color:#686868 !important}
  html body .pg-meta > span{font-size:12px !important;color:#737373 !important}
  html body .pg-ownership > h2{font-weight:500 !important;color:#202020 !important;letter-spacing:0 !important}
  html body .pg-ownership > p{color:#686868 !important}
  html body .pg-section-title > h2{color:#202020 !important}
  html body .pg-process span.pg-step-number{font-size:12px !important;color:#737373 !important}
  html body .pg-process h3{color:#202020 !important}
  html body .pg-process p{color:#686868 !important}
  html body .pg-choice > h2{font-size:28px !important;color:#202020 !important}
  html body .pg-choice > p{font-size:16px !important;color:#686868 !important}
  html body .pg-capture strong{font-weight:500 !important;color:#202020 !important}
  html body .pg-capture p{color:#686868 !important}
  html body .pg-provenance > p{font-size:12px !important;color:#737373 !important}
  html body .pg-provenance a{font-size:12px !important;color:#202020 !important}
  html body .pg-related > h2{font-size:22px !important;color:#202020 !important}
  html body .pg-hero > figcaption{font-size:14px !important;color:#686868 !important}
  html body .pg-original-assets > h2{font-size:22px !important;color:#202020 !important}
  html body .pg-tool-art figcaption{font-size:14px !important;color:#686868 !important}
  html body .pg-original-assets > p{font-size:12px !important;color:#737373 !important}
  html body .bb-object-heading h2{font-size:28px !important;color:#202020 !important}
  html body .bb-object-heading > p{color:#686868 !important}
  html body .bb-stage-label > span{font-size:14px !important;color:#686868 !important}
  html body .bb-objects > p.bb-object-hint{color:#737373 !important}
  html body .bb-objects > p.bb-object-note{color:#737373 !important}
  html body .bb-tool > p{font-size:16px !important;color:#686868 !important}
  html body .bb-tool > span.bb-tool-name{font-size:18px !important;font-weight:500 !important;color:#202020 !important}
  html body .bb-compare span.bb-tag{font-weight:500 !important;color:#202020 !important}
}

/* 2. Role decisions made by hand */
html body .evidence-work-copy > p.project-subtitle{color:#686868 !important}
html body .c-card__body > span.c-card__label{color:#686868 !important}
html body .am-lane > span.am-clip{font-size:12px !important}
html body .intent-grid > span{color:#202020 !important}
html body .ps-stack li > span{font-size:16px !important;color:#202020 !important}
html body .pg-detail-heading > h1 > span{font-size:20px !important;font-weight:400 !important;color:#686868 !important;letter-spacing:0 !important}
html body .pg-canvas .pg-folder-label{font-size:26px !important;letter-spacing:-.01em !important}
html body .pg-related .pg-folder-label{font-size:20px !important;letter-spacing:-.01em !important}
@media (min-width:761px){
  html body .about-intro h2{font-size:26px !important}
}
@media (max-width:760px){
  html body .about-intro h2,html body .decision-heading > h3,html body .pg-choice > h2{font-size:22px !important}
  html body .simple-page > p.lede,html body .next-work > a{font-size:18px !important}
  html body .pg-detail-heading > h1 > span{font-size:18px !important}
  html body .pg-canvas .pg-folder-label{font-size:22px !important}
  html body .pg-related .pg-folder-label{font-size:18px !important}
}

/* 3. Tracking: display sizes get a little tighter, small text never does */
html body main h1{letter-spacing:-.03em !important}
html body .story > h2,html body .psb-cs-head > h2,html body .figma-evidence h2,html body .decision-evidence h2,
html body .avatar-decision > h2,html body .scope-conversation > h2,html body .pg-section-title > h2,
html body .bb-object-heading h2,html body .delivery-record > h2{letter-spacing:-.02em !important;line-height:1.15 !important}
html body .case-summary h2,html body .pg-ownership > h2{letter-spacing:0 !important}

/* 4. Diagram labels typed in capitals read in sentence case */
html body .diagram-label{display:inline-block;text-transform:lowercase !important;letter-spacing:0 !important}
html body .diagram-label::first-letter{text-transform:uppercase}

/* 5. Tap targets of at least 44px */
html body .evidence-figure figcaption a,html body .pg-wrap > a.pg-back{display:inline-flex;align-items:center;min-height:44px}
html body .ps-cv__group > button{min-width:44px}

/* 6. Second pass after measuring */
html body main h1{color:#202020 !important}
html body .evidence-figure figcaption > span{color:#686868 !important}
html body .decision-trade > div > span{font-size:12px !important;text-transform:none !important;letter-spacing:0 !important;color:#686868 !important}
html body .diagram-arrow{color:#737373 !important}
/* the primary button in the Unlock diagram had grey text on dark blue (1.1:1); decision-story.css meant it to be white */
html body .action-after .mock-actions span{color:#fff !important}
html body .mock-actions span,html body .mock-actions small{font-size:12px !important}
html body .mock-actions span{padding:8px !important}
html body .mock-actions{gap:8px !important;margin-top:24px !important}
html body .bb-object-controls > button,html body .bb-stage-label > button{font-size:14px !important}
html body .bb-stage-label > button{min-height:44px}
@media (max-width:760px){
  html body main h1{font-size:32px !important;line-height:1.1 !important}
  html body .story > p{font-size:16px !important}
  html body .bb-object-controls > button{font-size:12px !important}
}

/* 7. Spacing: every component value on the 4px grid, generated from the measured values and reviewed */
@media (min-width:761px){
  html body .about-intro > div > p{margin-bottom:20px !important}
  html body .abstract-request > span.request-line{margin-top:4px !important;margin-bottom:12px !important}
  html body .action-example > p{margin-top:20px !important}
  html body .action-example > span.diagram-label{margin-bottom:24px !important}
  html body .am-canvas > div.am-ruler{margin-bottom:12px !important}
  html body .am-canvas > div.am-track{margin-top:12px !important}
  html body .am-lane > span.am-clip:not(.am-clip--icon){padding-right:12px !important;padding-left:12px !important;row-gap:8px !important;column-gap:8px !important}
  html body .avatar-decision > p.avatar-lead{margin-bottom:20px !important}
  html body .avatar-decision-points > div > h3{margin-bottom:8px !important}
  html body .avatar-model > div.am-canvas{padding-top:16px !important;padding-bottom:20px !important}
  html body .avatar-model > figcaption{margin-top:16px !important}
  html body .avatar-model-header > span.am-chip{padding-right:12px !important;padding-left:12px !important}
  html body .bb-stage-label > button{padding-top:8px !important;padding-right:16px !important;padding-bottom:8px !important;padding-left:16px !important}
  html body .bb-tag{padding-right:12px !important;padding-left:12px !important}
  html body .c-card__body > span.ps-cv{margin-top:16px !important}
  html body .call-band > div.call-card{row-gap:16px !important;column-gap:16px !important}
  html body .call-card > a.button{margin-top:12px !important}
  html body .case{padding-bottom:76px !important}
  html body .case > div.case-summary{padding-bottom:40px !important;margin-bottom:32px !important}
  html body .case > div.work-meta{margin-bottom:28px !important;row-gap:12px !important;column-gap:12px !important}
  html body .case > dl.case-context{row-gap:24px !important;column-gap:24px !important}
  html body .case > h1{margin-bottom:40px !important}
  html body .case > nav.next-work{margin-top:64px !important}
  html body .case > section.figma-evidence{padding-top:40px !important;margin-bottom:72px !important}
  html body .case > section.story{margin-bottom:64px !important}
  html body .city-input > p{margin-top:20px !important}
  html body .city-input > span.diagram-label{margin-bottom:24px !important}
  html body .city-output > div.intent-grid{row-gap:8px !important;column-gap:8px !important}
  html body .city-output > p{margin-top:20px !important}
  html body .city-output > span.diagram-label{margin-bottom:24px !important}
  html body .decision-block > p{margin-bottom:20px !important}
  html body .decision-copy > p{margin-bottom:20px !important}
  html body .decision-evidence > header > p{margin-bottom:20px !important}
  html body .decision-graphic > figcaption{margin-top:24px !important}
  html body .decision-side > p.fe-small{padding-top:20px !important;margin-bottom:20px !important}
  html body .decision-side > span.diagram-label{margin-bottom:24px !important}
  html body .delivery-note > p{margin-top:12px !important}
  html body .evidence-figure > figcaption{margin-top:16px !important;row-gap:8px !important;column-gap:8px !important}
  html body .evidence-work-copy > div.project-company{margin-bottom:16px !important;row-gap:16px !important;column-gap:16px !important}
  html body .evidence-work-copy > h3{margin-bottom:12px !important}
  html body .evidence-work-copy > p.project-subtitle{margin-top:16px !important;margin-bottom:20px !important}
  html body .fe-detail-pair > div.decision-side{padding-top:12px !important}
  html body .figma-evidence > aside.delivery-note{margin-top:40px !important}
  html body .figma-evidence > div.decision-trade{margin-bottom:32px !important}
  html body .figma-evidence > div.fe-detail-pair{row-gap:40px !important;column-gap:40px !important}
  html body .figma-evidence > figure.decision-graphic{padding-top:36px !important;padding-right:36px !important;padding-bottom:36px !important;padding-left:36px !important}
  html body .figma-evidence > header{margin-bottom:32px !important}
  html body .figma-evidence > header:not(.decision-heading) > p{margin-bottom:20px !important}
  html body .figma-evidence > header.decision-heading{margin-bottom:32px !important}
  html body .figma-evidence > ol.decision-trail{padding-bottom:32px !important}
  html body .interaction-sequence > li{padding-bottom:24px !important;padding-left:36px !important}
  html body .interaction-sequence > li > p{margin-top:8px !important}
  html body .next-work > a{padding-right:24px !important;padding-left:24px !important;row-gap:16px !important}
  html body .next-work > a.next-unlock{padding-right:24px !important;padding-left:24px !important;row-gap:16px !important}
  html body .pg-brand-stage > div > p{margin-bottom:20px !important}
  html body .pg-canvas > div.pg-folders{padding-top:40px !important;row-gap:48px !important;column-gap:44px !important}
  html body .pg-capture > figcaption{padding-top:16px !important;margin-top:16px !important}
  html body .pg-capture > figcaption > p{margin-top:8px !important}
  html body .pg-detail-heading > div.pg-meta{row-gap:12px !important;column-gap:12px !important}
  html body .pg-detail-heading > h1{margin-top:20px !important}
  html body .pg-detail-heading > p.pg-detail-intro{margin-bottom:20px !important}
  html body .pg-canvas .pg-folder > div.pg-folder-front{padding-top:16px !important;padding-right:20px !important;padding-bottom:16px !important;padding-left:20px !important}
  html body .pg-hero > div.pg-brand-stage{padding-top:40px !important;padding-right:40px !important;padding-bottom:40px !important;padding-left:40px !important}
  html body .pg-main > article.pg-wrap{padding-bottom:64px !important}
  html body .pg-meta > span{padding-top:8px !important;padding-bottom:8px !important}
  html body .pg-original-assets > div.pg-tool-art{padding-top:24px !important;padding-right:24px !important;padding-bottom:24px !important;padding-left:24px !important}
  html body .pg-original-assets > p{margin-bottom:20px !important}
  html body .pg-process > ol > li{row-gap:16px !important;column-gap:16px !important}
  html body .pg-provenance > p{margin-bottom:20px !important}
  html body .pg-related > nav.pg-related-folders{row-gap:24px !important;column-gap:24px !important}
  html body .pg-section-title > h2{margin-top:16px !important;margin-bottom:16px !important}
  html body .pg-canvas .pg-project[data-project="basyt"] .pg-sheet img{padding:24px !important}
  html body .pg-wrap > header.pg-detail-heading{margin-top:44px !important}
  html body .pg-wrap > section.pg-canvas{padding-top:28px !important;padding-right:28px !important;padding-bottom:36px !important;padding-left:28px !important;margin-top:4px !important;margin-bottom:72px !important}
  html body .pg-wrap > section.pg-captures{row-gap:36px !important}
  html body .pg-wrap > section.pg-choice{margin-bottom:40px !important}
  html body .pg-wrap > section.pg-intro{padding-top:64px !important;padding-bottom:32px !important}
  html body .pg-wrap > section.pg-ownership{margin-top:36px !important;row-gap:32px !important;column-gap:32px !important}
  html body .pg-wrap > section.pg-process{row-gap:32px !important;column-gap:32px !important}
  html body .pg-wrap > section.pg-related{padding-top:32px !important}
  html body .ps-stack > li{padding-right:16px !important;padding-left:16px !important}
  html body .psb-stage > span.psk-label{padding-right:12px !important;padding-left:12px !important}
  html body .scope-conversation > p{margin-bottom:20px !important}
  html body .scope-intro{margin-bottom:20px !important}
  html body .service-stack > span{padding-top:12px !important;padding-right:16px !important;padding-bottom:12px !important;padding-left:16px !important}
  html body .simple-page > div.about-intro{margin-top:44px !important;margin-bottom:72px !important}
  html body .simple-page > h1{margin-bottom:28px !important}
  html body .simple-page > p.lede{margin-bottom:56px !important}
  html body .simple-page > section.story{margin-bottom:64px !important}
  html body .story > figure{margin-bottom:32px !important}
  html body .story > h3{margin-top:32px !important;margin-bottom:16px !important}
  html body .story > ul:not(.ps-stack){padding-left:24px !important}
  html body .work-item > a{row-gap:32px !important;column-gap:32px !important}
}
@media (max-width:760px){
  html body .about-intro > div > p{margin-bottom:20px !important}
  html body .abstract-request > span.request-line{margin-top:4px !important;margin-bottom:12px !important}
  html body .action-example > p{margin-top:20px !important}
  html body .action-example > span.diagram-label{margin-bottom:24px !important}
  html body .am-canvas > div.am-ruler{margin-bottom:12px !important}
  html body .am-canvas > div.am-track{margin-top:12px !important}
  html body .am-lane > span.am-clip:not(.am-clip--icon){padding-right:8px !important;padding-left:8px !important;row-gap:8px !important;column-gap:8px !important}
  html body .avatar-decision > p.avatar-lead{margin-bottom:20px !important}
  html body .avatar-decision-points > div > h3{margin-bottom:8px !important}
  html body .avatar-model > div.am-canvas{padding-bottom:16px !important}
  html body .avatar-model > figcaption{margin-top:16px !important}
  html body .avatar-model-header > span.am-chip{padding-right:12px !important;padding-left:12px !important}
  html body .bb-stage-label > button{padding-top:8px !important;padding-right:16px !important;padding-bottom:8px !important;padding-left:16px !important}
  html body .bb-tag{padding-right:12px !important;padding-left:12px !important}
  html body .c-card__body > span.ps-cv{margin-top:16px !important}
  html body .call-band > div.call-card{row-gap:16px !important;column-gap:16px !important}
  html body .call-card > a.button{margin-top:12px !important}
  html body .case{padding-bottom:76px !important}
  html body .case > div.case-summary{padding-bottom:32px !important;margin-bottom:32px !important}
  html body .case > div.work-meta{margin-bottom:28px !important}
  html body .case > dl.case-context{margin-bottom:52px !important;row-gap:20px !important;column-gap:20px !important}
  html body .case > h1{margin-bottom:28px !important}
  html body .case > nav.next-work{margin-top:36px !important}
  html body .case > section.figma-evidence{margin-top:40px !important;margin-bottom:40px !important}
  html body .case > section.story{margin-bottom:44px !important}
  html body .city-input > p{margin-top:20px !important}
  html body .city-input > span.diagram-label{margin-bottom:24px !important}
  html body .city-output > div.intent-grid{row-gap:8px !important;column-gap:8px !important}
  html body .city-output > p{margin-top:20px !important}
  html body .city-output > span.diagram-label{margin-bottom:24px !important}
  html body .decision-block > p{margin-bottom:20px !important}
  html body .decision-copy > p{margin-bottom:20px !important}
  html body .decision-evidence > header > p{margin-bottom:20px !important}
  html body .decision-graphic > figcaption{margin-top:24px !important}
  html body .decision-side > p.fe-small{padding-top:20px !important;margin-bottom:20px !important}
  html body .decision-side > span.diagram-label{margin-bottom:24px !important}
  html body .decision-trail > li{padding-left:40px !important}
  html body .delivery-note > p{margin-top:12px !important}
  html body .evidence-figure > figcaption{margin-top:16px !important;row-gap:8px !important;column-gap:8px !important}
  html body .evidence-work-copy > h3{margin-bottom:12px !important}
  html body .fe-detail-pair > div.decision-side{padding-top:12px !important}
  html body .figma-evidence > aside.delivery-note{margin-top:40px !important}
  html body .figma-evidence > div.decision-trade{margin-bottom:32px !important;row-gap:20px !important;column-gap:20px !important}
  html body .figma-evidence > div.fe-detail-pair{row-gap:20px !important;column-gap:20px !important}
  html body .figma-evidence > figure.decision-graphic{padding-top:24px !important;padding-right:20px !important;padding-bottom:24px !important;padding-left:20px !important;row-gap:16px !important;column-gap:16px !important}
  html body .figma-evidence > header{margin-bottom:32px !important}
  html body .figma-evidence > header:not(.decision-heading) > p{margin-bottom:20px !important}
  html body .figma-evidence > header.decision-heading{margin-bottom:32px !important}
  html body .figma-evidence > ol.decision-trail{padding-bottom:32px !important;row-gap:24px !important;column-gap:24px !important}
  html body .intent-grid > span{padding-top:16px !important;padding-bottom:16px !important}
  html body .interaction-sequence > li{padding-bottom:24px !important;padding-left:36px !important}
  html body .interaction-sequence > li > p{margin-top:8px !important}
  html body .next-work > a{padding-right:24px !important;padding-left:24px !important;row-gap:16px !important}
  html body .next-work > a.next-unlock{padding-right:24px !important;padding-left:24px !important;row-gap:16px !important}
  html body .pg-brand-stage > div > p{margin-bottom:20px !important}
  html body .pg-canvas > div.pg-folders{padding-top:8px !important}
  html body .pg-capture > figcaption{padding-top:16px !important;margin-top:16px !important}
  html body .pg-capture > figcaption > p{margin-top:8px !important}
  html body .pg-detail-heading > div.pg-meta{row-gap:12px !important;column-gap:12px !important}
  html body .pg-detail-heading > h1{margin-top:20px !important}
  html body .pg-detail-heading > p.pg-detail-intro{margin-bottom:20px !important}
  html body .pg-canvas .pg-folder > div.pg-folder-front{padding-top:16px !important;padding-bottom:16px !important}
  html body .pg-hero > div.pg-brand-stage{row-gap:20px !important;column-gap:20px !important}
  html body .pg-main > article.pg-wrap{padding-bottom:64px !important}
  html body .pg-meta > span{padding-top:8px !important;padding-bottom:8px !important}
  html body .pg-original-assets > div.pg-tool-art{padding-top:16px !important;padding-right:16px !important;padding-bottom:16px !important;padding-left:16px !important}
  html body .pg-original-assets > p{margin-bottom:20px !important}
  html body .pg-process > ol > li{row-gap:16px !important;column-gap:16px !important}
  html body .pg-provenance > p{margin-bottom:20px !important}
  html body .pg-section-title > h2{margin-top:16px !important;margin-bottom:16px !important}
  html body .pg-canvas .pg-project[data-project="basyt"] .pg-sheet img{padding:24px !important}
  html body .pg-wrap > header.pg-detail-heading{margin-top:44px !important}
  html body .pg-wrap > section.pg-canvas{padding-top:24px !important;padding-bottom:32px !important;margin-top:4px !important}
  html body .pg-wrap > section.pg-captures{row-gap:28px !important;column-gap:28px !important}
  html body .pg-wrap > section.pg-choice{margin-bottom:40px !important}
  html body .pg-wrap > section.pg-ownership{margin-top:36px !important;row-gap:16px !important;column-gap:16px !important}
  html body .pg-wrap > section.pg-process{margin-top:40px !important;margin-bottom:40px !important;row-gap:16px !important;column-gap:16px !important}
  html body .ps-stack > li{row-gap:12px !important;column-gap:12px !important}
  html body .psb-stage > span.psk-label{padding-right:12px !important;padding-left:12px !important}
  html body .scope-conversation > p{margin-bottom:20px !important}
  html body .scope-intro{margin-bottom:20px !important}
  html body .service-stack > span{padding-top:12px !important;padding-right:16px !important;padding-bottom:12px !important;padding-left:16px !important}
  html body .simple-page{padding-top:64px !important;padding-bottom:64px !important}
  html body .simple-page > div.about-intro{margin-top:32px !important;margin-bottom:72px !important}
  html body .simple-page > h1{margin-bottom:28px !important}
  html body .simple-page > p.lede{margin-bottom:56px !important}
  html body .simple-page > section.story{margin-bottom:44px !important}
  html body .story > figure{margin-bottom:32px !important}
  html body .story > h3{margin-top:32px !important;margin-bottom:16px !important}
  html body .story > ul:not(.ps-stack){padding-left:24px !important}
}

/* 8. Spacing decisions made by hand: the work page cards match the homepage cards, folders match the homepage canvas */
html body .evidence-work-copy > div.project-company{margin:0 0 16px !important;row-gap:12px !important;column-gap:12px !important}
html body .evidence-work-copy > h3{margin:0 0 12px !important}
html body .evidence-work-copy > p.project-subtitle{margin:0 0 16px !important}
html body .evidence-work-item > a{column-gap:32px !important;row-gap:32px !important}
html body .pg-canvas .pg-folder-label small{margin-top:8px !important}
html body .pg-related .pg-folder-label small{margin-top:4px !important}
@media (min-width:761px){html body .pg-canvas > div.pg-folders{column-gap:40px !important}}
/* 9. Two values the generator could not reach: an older nav.next-work rule outranks a class selector, and step titles sit in unclassed wrappers */
html body .case nav.next-work > a{padding-left:24px !important;padding-right:24px !important}
html body .pg-process li > div > h3{margin-bottom:8px !important}

/* 10. Mobile card gap: 32px is the desktop rhythm, phones keep a tighter 16px between image and text */
@media (max-width:760px){html body .evidence-work-item > a{row-gap:16px !important;column-gap:16px !important}}

/* ── 11. Interaction clips (Storybooks World) ─────────────────────────────
   Short silent clips of the product in use. They play only while on screen,
   carry a 44px play and pause control under the clip (the app's own buttons
   sit in every corner of the frame) and stay still with reduced motion. */
.pg-clip-frame{position:relative;overflow:hidden;border-radius:12px;background:#f1f4f8;aspect-ratio:16/9}
.pg-clip-frame > video{display:block;width:100%;height:100%;object-fit:cover}
.pg-clip > figcaption{position:relative;padding-left:56px;padding-right:56px}
.pg-clip-toggle{position:absolute;right:0;top:4px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:999px;background:#f1f4f8;color:#202020;cursor:pointer;transition:background-color .18s cubic-bezier(.22,1,.36,1)}
.pg-clip-toggle:hover{background:#e4e8ee}
.pg-clip-toggle:active{transform:scale(.98)}
.pg-clip-toggle svg{width:20px;height:20px}
.pg-clip-toggle .i-pause,.pg-clip-toggle[data-state="playing"] .i-play{display:none}
.pg-clip-toggle[data-state="playing"] .i-pause{display:block}
@media (prefers-reduced-motion:reduce){.pg-clip-toggle{transition:none}}