/* Dark page surfaces echo the original portfolio's black and purple palette.
   Product specimens retain their original colours and screen dimensions. */
:root{
  color-scheme:dark;
  --paper:#0a0a0c;
  --white:#141417;
  --ink:#f5f1f7;
  --muted:#b5b0bd;
  --line:#303035;
  --dark:#08080a;
  --dark-muted:#b5b0bd;
  --accent:#df7afe;
  --accent-deep:#df7afe;
  --case-accent:#d4a4fa;
  --case-bright:#e2bdff;
  --case-tint:#241c30;
}
html,body,.page-case,.case-body{background:var(--paper);color:var(--ink)}
.page-case .case-crypto{--case-accent:#d4a4fa;--case-bright:#e2bdff;--case-tint:#241c30}
.page-case .case-new-down-syndrome{--case-accent:#bfda9c;--case-bright:#d2e9b7;--case-tint:#20271b}
.page-case .case-m-indicator{--case-accent:#f5a599;--case-bright:#ffc0b5;--case-tint:#2d1d1e}
.page-case .case-vr{--case-accent:#98d9e9;--case-bright:#b6eaf5;--case-tint:#18262c}
.page-case .case-meet-up{--case-accent:#e6cc94;--case-bright:#f4dfb4;--case-tint:#29251c}
::selection{background:#df7afe;color:#130c19}
.page-case :focus-visible,.page-case .site-header a:focus-visible,.case-hero a:focus-visible{outline-color:var(--accent)}
.page-case .site-header{background:#0a0a0cee;color:var(--ink)}
.page-case .site-header.is-scrolled{background:#0a0a0cf7;box-shadow:0 1px 0 #ffffff12}
.page-case .site-header .nav-inner{border-bottom-color:var(--line)}
.page-case .wordmark{color:#faf5ff}
.page-case .nav-links a,.page-case .nav-links a:last-child{color:#d0c9d8;background:transparent}
.page-case .nav-links a:hover,.page-case .nav-links a:last-child:hover,.page-case .nav-links a[aria-current]{color:var(--accent)}
.case-hero{background:#0a0a0c;color:var(--ink);border-bottom:1px solid var(--line)}
.case-subtitle,.case-role,.case-meta dt,.case-intro>.text-link{color:var(--muted)}
.case-role{border-color:var(--case-accent)}
.case-meta{border-color:var(--line)}
.case-meta dd{color:var(--ink)}
.case-hero .native-tags span,.native-tags span{background:var(--case-tint);border-color:var(--line);color:var(--case-bright)}
.case-hero-art,.case-meet-up .case-hero-art{background:transparent}
.page-case .screen-showcase,.case-hero-art>.screen-showcase{background:#1c1c21;border:1px solid #35353c}
.case-body .native-section-body,.native-section-body{color:var(--muted)}
.native-section-title,.native-card h3,.native-split h3{color:var(--ink)}
.case-body .native-card{background:#151518;border-color:var(--line)}
.case-body .native-split .native-card{background:transparent;border-color:var(--line)}
.native-quote{background:var(--case-tint);color:var(--ink)}
.native-table{background:#141417;border-color:var(--line)}
.native-table thead{background:var(--case-tint);color:var(--case-bright)}
.native-table tbody tr:last-child{background:#202024}
.native-table tbody th{color:var(--ink)}
.native-donut{background:conic-gradient(var(--case-accent) 0 85%,#34343b 85% 100%)}
.native-donut>span{background:var(--paper)}
.native-progress-chart{background:#151518;border-color:var(--line)}
.native-progress-chart .chart-grid{fill:#b5b0bd}
.native-progress-chart .chart-grid line{stroke:#35353c}
.native-progress-chart .chart-markers{stroke:#151518}
.core-idea-number{color:var(--case-accent)}
.core-idea-section .token-example{background:#211b2a;border-color:#40314e;color:#eee1fc}
.core-idea-section .token-example>small{color:#b5dfbd}
.core-idea-section .token-example>strong{color:#f4e9ff}
.core-idea-section .token-example>p{color:#bfb0cd}
.core-idea-section .token-example>div>div{background:#2b2237;border-color:#48365b;color:#c8b8d7}
.core-idea-section .token-example b{color:#e6c6ff}
.audio-walkthrough{background:#17151c;border-color:#38303f}
.audio-walkthrough h2{color:var(--ink)}
.audio-walkthrough p{color:var(--muted)}
.audio-walkthrough audio{color-scheme:dark}
.case-body .embed-shell{background:#17171b;border-color:var(--line)}
.case-figure.artifact-figure,.case-figure.compact-artifact{background:#19191e;border-color:#38383f}
.case-figure.artifact-figure>a,.case-figure.compact-artifact>a{background:#141418}
.artifact-figure figcaption,.case-figure.compact-artifact figcaption{background:transparent;color:#c6bfce}
.screen-collection figcaption{color:var(--muted)}
.page-case .case-footer,.case-footer{background:var(--paper);color:var(--ink);border-color:var(--line)}

/* Reconstructed device screens retain their original product palette. */
.product-device{
  color-scheme:light;
  --ink:#272332;
  --muted:#82778d;
  --white:#fff;
  --paper:#fafafa;
}
.design-board .ds-wallet>strong,.design-board .ds-wallet b{color:#fff}

/* The design-system exhibit uses the same surfaces and type as its case study.
   Each product component retains its own colours inside the dark exhibit. */
.design-board,.cook-design{
  --ink:#f2edf7;
  --muted:#b6aebf;
  color-scheme:dark;
  background:#111114;
  color:var(--ink);
  border-color:#343039;
  padding:clamp(22px,3.1vw,42px);
  font-family:var(--sans);
  box-shadow:0 22px 50px -35px #000b;
}
.design-board .ds-brand{border-color:#363039;padding-bottom:28px;margin-bottom:28px}
.design-board .ds-brand h3{font:400 clamp(2.4rem,3.6vw,3.4rem)/1.1 var(--editorial);letter-spacing:-.025em;color:var(--ink)}
.design-board .ds-brand p{font-family:var(--sans);color:#bcb2c7;font-size:15px}
.design-board .ds-brand-mark{background:#292139;color:#d3adff;border:1px solid #514068;border-radius:16px}
.design-board .ds-foundations,.design-board .ds-components{gap:22px;align-items:stretch}
.design-board .ds-specimen,.cook-design .ds-specimen{
  padding:clamp(20px,2.2vw,29px);
  background:#1b1a20;
  border-color:#38333f;
  color:var(--ink);
  box-shadow:none;
}
.design-board .ds-specimen>h3{font:500 16px/1.45 var(--sans);color:#eee5f6;margin-bottom:24px}
.design-board .ds-brand b{color:inherit}
.design-board .ds-foundations{margin-bottom:22px}
.design-board .ds-foundations .ds-specimen{background:#201b28;border-color:#44354f}
.design-board small,.design-board .ds-swatches span,.design-board .ds-grid-notes dd{color:#bcb2c7;font-size:13px}
.design-board .ds-swatches span{font-family:var(--sans);font-size:14px;margin-top:10px}
.design-board .ds-swatches i{height:64px;border-color:#ffffff20;border-radius:9px}
.design-board .ds-type-bold,.design-board .ds-type-regular{color:#f4edf9}
.design-board .ds-arial-type p{color:#f4edf9}
.design-board .ds-type-note{background:#2c3022;color:#d6dfc5;border-color:#a3b143;font-size:14px!important;line-height:1.65}
.design-board .ds-grid-notes{font-family:var(--sans);font-size:14px}
.design-board .ds-layout-grid{background:#15151b;border-color:#494050}
.design-board .ds-layout-grid>i{background:#7e5a9b38;border-inline:1px solid #a57bcb45}
.design-board .ds-story-icons,.design-board .ds-action-icons,.design-board .ds-component-nav{color:#d1c6da}
.design-board .ds-story-icons svg,.design-board .ds-component-nav>span:first-child svg{color:#cea4ef}
.design-board .ds-component-nav svg{color:#bcb2c7}
.design-board .ds-icon-set>span{background:#30273c;color:#d8b5f4;border:1px solid #4b3a5d}
.design-board .ds-updated{color:#b9adbf!important;font-size:13px!important}
.design-board .ds-verification{color:#e4dbea}
.design-board .ds-verification li:last-child{color:#b4a8bf}
.design-board .ds-order-head>.ds-up{color:#7edbbc!important}
.design-board .ds-market-header>span:last-child{color:#cfabf2}
.design-board .ds-rating-legend{color:#c9bed2;font-size:12px}
.design-board .ds-rating>span{color:#e4dbea}

/* Original light product surfaces are explicit, so page text colours cannot
   leak into a component or alter the meaning of its colour specimens. */
.design-board :is(.ds-market-pair>div,.ds-banking,.ds-bundle-example,.ds-search,.ds-chart-tabs,.ds-pills>span){
  --ink:#30333e;
  --muted:#737782;
  color:#30333e;
  color-scheme:light;
}
.design-board :is(.ds-market-pair,.ds-banking,.ds-bundle-example) small{color:#6d7380}
.design-board .ds-pills .selected{color:#fff}
.design-board .ds-recovery{--ink:#795e2d;color:#795e2d;color-scheme:light}
.design-board .ds-recovery p{color:inherit}
.design-board .ds-wallet{--ink:#fff;color:#fff}
.design-board .ds-wallet small{color:#dedbff}
.design-board .ds-search{color:#757b86}
.design-board .ds-chart-tabs>span:first-child{color:#4f46e5}
.design-board .ds-up{color:#2e9d76!important}
.design-board .ds-down{color:#ca6161!important}
.cook-design :is(.cook-voice,.cook-timer,.cook-routine,.cook-category,.cook-routine-detail){
  --ink:#563a22;
  color:#563a22;
  color-scheme:light;
}
.cook-design .cook-timer b,.cook-design .cook-routine strong,.cook-design .cook-routine-detail>strong{color:#563a22}
.cook-design .cook-alerts p,.cook-design .cook-involve{color:#ede2d7}
.cook-design .cook-restocked{background:#eee4d7;color:#35291e}
.cook-design .cook-colors i{border-color:#ffffff25;border-radius:12px}
.cook-design .cook-grid{background:repeating-linear-gradient(to bottom,transparent 0 23px,#d8c48924 23px 24px);border-color:#c8ba8644}
.cook-design .cook-grid i{background:#b7bf7430;border-color:#c8d49345}
.cook-design .cook-grid-labels{color:#d1d8b6;font-family:var(--sans);font-size:14px}
.cook-design .ds-brand>.source-viewport{background:#fffefa;border-radius:14px;padding:9px}
.design-board .ds-specimen>.source-viewport{background:#fff;border-radius:9px;padding:9px;box-sizing:border-box}
.cook-design .ds-icon-set>.source-viewport{background:#fffefa;padding:9px;border-radius:9px;max-height:none}

/* Photos, evidence figures and screen collections share a restrained mat. */
.case-body .story-photo{padding:12px;border:1px solid #37323e;border-radius:14px;background:#1b191f;box-shadow:0 18px 35px -27px #000b}
.case-body .story-photo>.source-viewport{border-radius:7px;width:100%;height:auto}
.page-case .screen-showcase,.case-hero-art>.screen-showcase{background:radial-gradient(ellipse at 50% 0,#2c2434 0,transparent 78%),#19191e;border-color:#3b3343}
.case-figure.artifact-figure{background:#18171c;border-color:#36313d;box-shadow:0 18px 35px -28px #000b}
.case-figure.artifact-figure>a{background:#222128;border-radius:9px}
.case-figure.artifact-figure figcaption{padding-top:16px;font:400 14px/1.6 var(--sans);color:#c1b5cb}
.case-vr .case-hero-art{padding:18px;border:1px solid #393441;border-radius:16px;background:#19191e}
.case-vr .case-hero-art>img{border-radius:9px}
.screen-collection>figure{padding:17px;border:1px solid #36313d;border-radius:14px;background:#1a181f}
.screen-collection figcaption{font:400 14px/1.5 var(--sans);color:#c6bbcf;margin-top:18px}
@media(max-width:650px){
  .design-board,.cook-design{padding:18px}
  .design-board .ds-foundations,.design-board .ds-components{gap:16px}
  .design-board .ds-specimen,.cook-design .ds-specimen{padding:20px}
  .design-board .ds-brand{gap:18px;padding-bottom:23px;margin-bottom:23px}
  .design-board .ds-brand-mark{width:64px;height:64px}
  .design-board .ds-brand-mark svg{width:34px;height:34px}
  .cook-design .ds-brand>.source-viewport{width:84px}
  .screen-collection>figure{padding:14px}
  .case-body .story-photo{padding:9px}
}

/* The outline is external; the screen's original aspect ratio is untouched. */
.product-device{outline:3px solid #09090b;outline-offset:0;box-shadow:0 0 0 4px #60606a,0 18px 30px -16px #0009!important;border-radius:12px!important}
.product-device>.device-display{border-radius:12px!important}
.device-tablet.product-device,.device-desktop.product-device{outline-width:4px;box-shadow:0 0 0 5px #60606a,0 18px 30px -16px #0009!important;border-radius:10px!important}
.device-tablet>.device-display,.device-desktop>.device-display{border-radius:10px!important}
.artwork-launch{background:#111114;color:#fff;border:1px solid #68646e;border-radius:6px;box-shadow:0 5px 12px #0005}
.artwork-launch:hover{background:#32263e;color:#fff}
.back-to-top{background:#231d2b;color:#edd8ff;border-color:#5d456f}
.back-to-top:hover{background:#41294f;color:#fff}
.artwork-dialog{background:#151519;color:#f5f1f7;border:1px solid #47434e;border-radius:12px;box-shadow:0 30px 100px #0008}
.artwork-dialog::backdrop{background:#030305bf;backdrop-filter:blur(8px)}
.artwork-toolbar{background:#101013;color:#f5f1f7;border-bottom:1px solid #38333f;padding-inline:24px}
.artwork-toolbar .close-button{color:#f5f1f7;border-color:#62586d;border-radius:6px}
.artwork-toolbar .close-button:hover{background:#302537}
.artwork-zoom{background:#df7afe;color:#1d1025;border-radius:6px;font-size:14px;min-height:44px}
.artwork-zoom:hover{background:#e7a0ff}
.artwork-scroll{padding:36px;background:#1b1b20}
.artwork-dialog:not(.is-zoomed) .artwork-content>.product-device{width:min(360px,100%,calc((92dvh - 175px)*var(--screen-ratio)));max-width:none}
.artwork-dialog:not(.is-zoomed) .artwork-content>.device-tablet,.artwork-dialog:not(.is-zoomed) .artwork-content>.device-desktop{width:min(1080px,100%,calc((92dvh - 175px)*var(--screen-ratio)))}

/* Copy starts immediately below its heading, beside the top of each screen. */
.case-crypto .native-feature .native-split{align-items:start;gap:32px}
.case-crypto .native-feature .native-section-title{margin-bottom:20px}
.case-crypto .native-feature .native-split>div:first-child{align-self:start}
.case-crypto .native-feature .native-tags{margin-top:0;margin-bottom:16px}
.case-crypto .audience-section .native-section-body>p{max-width:760px}
.case-crypto #section-25 .native-section-body>p{margin:0 0 24px;max-width:760px}

/* This light UI card owns its colours, independent of the dark case page. */
.case-crypto .showcase-card{padding:clamp(16px,3vw,34px)}
.case-crypto .portfolio-preview{
  --ink:#292332;
  --muted:#665e70;
  color-scheme:light;
  color:#292332;
  background:#fff;
  max-width:480px;
  padding:clamp(16px,2.2vw,26px);
}
.case-crypto .portfolio-preview :is(strong,b){color:#292332}
.case-crypto .portfolio-preview .mock-section-label{font-size:16px;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.case-crypto .portfolio-preview .mock-section-label>span{font-size:13px;white-space:nowrap}
.case-crypto .portfolio-row{display:grid;grid-template-columns:32px minmax(0,1fr) max-content;gap:10px;padding:16px 0}
.case-crypto .portfolio-row>div{min-width:0}
.case-crypto .portfolio-row :is(strong,b){font-size:14px;line-height:1.45}
.case-crypto .portfolio-row small{color:#665e70;font-size:13px;line-height:1.45}
.case-crypto .portfolio-row i{width:32px;height:32px;font-size:10px}
.case-crypto .portfolio-total{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;font-size:14px;line-height:1.5}
.case-crypto .portfolio-total strong{font-size:22px;white-space:nowrap}
.case-crypto .portfolio-preview .credit{color:#16734e!important}
.case-crypto .portfolio-preview .debit{color:#ae493e!important}

/* Crisp vector icons replace the tiny raster strip; routine specimens form
   a paired row with consistent, bounded component and thumbnail spacing. */
.cook-design .cook-ui-icons{gap:12px;margin-top:16px}
.cook-design .cook-ui-icons>span{width:52px;height:52px;border-radius:12px;background:#f5e4dc;color:#39281e;border-color:#ddc9be}
.cook-design .cook-ui-icons .ui-glyph{width:30px;height:30px;max-width:none}
.cook-design .cook-grid-specimen{grid-column:1 / -1}
.cook-design :is(.cook-routine,.cook-category,.cook-routine-detail,.cook-restocked){font-family:Arial,sans-serif}
.cook-design .cook-routine{min-height:132px;border-radius:12px;gap:12px}
.cook-design .cook-routine strong{font-size:24px;line-height:1.2;padding:20px;max-width:58%;text-wrap:balance}
.cook-design .cook-routine>.source-viewport{width:42%;max-width:180px;height:auto;align-self:center}
.cook-design .cook-category-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.cook-design .cook-category{margin:0;padding:13px 15px;font-size:18px;line-height:1.4;overflow-wrap:anywhere}
.cook-design .cook-photo-pair{gap:16px;margin-top:18px;align-items:start}
.cook-design .cook-photo-pair>.source-viewport{width:calc(50% - 8px);max-width:144px;height:auto;border-radius:10px}
.cook-design .cook-routine-detail{padding:20px;border-radius:12px}
.cook-design .cook-routine-detail>strong{font-size:24px;line-height:1.2}
.cook-design .cook-routine-detail>p{color:#60432d;font-size:16px;line-height:1.5;margin:4px 0 0!important}
.cook-design .cook-routine-detail .ds-search{color:#60432d;font-size:14px;line-height:1.45;gap:12px;padding:12px;margin-top:12px}
.cook-design .cook-routine-detail .ds-search>span{display:flex;flex:none}
.cook-design .cook-routine-detail .ds-search svg{width:20px;height:20px}
.cook-design .cook-task-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:center;margin-top:18px}
.cook-design .cook-task-tiles>.source-viewport{width:100%;height:auto;max-width:100px;max-height:100px;border-radius:8px}
.cook-design .cook-task-specimen>.cook-restocked{font-size:14px;line-height:1.4;margin-top:16px;padding:8px 16px}
.case-m-indicator #section-7 .story-photo>.source-viewport{border-radius:4%}
.case-m-indicator #section-13 .story-photo>.source-viewport{border-radius:2.5%}
@media(max-width:650px){
  .cook-design .cook-routine strong{font-size:20px;padding:14px;max-width:none;min-width:0;flex:1}
  .cook-design .cook-category-row{grid-template-columns:1fr;gap:10px}
  .cook-design .cook-category{font-size:16px}
  .artwork-dialog{border-radius:0}
  .artwork-toolbar{padding:12px;gap:10px}
  .artwork-toolbar p{font-size:13px}
  .artwork-scroll{padding:25px 22px}
  .artwork-dialog:not(.is-zoomed) .artwork-content>.product-device{width:min(340px,100%,calc((100dvh - 150px)*var(--screen-ratio)))}
  .artwork-dialog:not(.is-zoomed) .artwork-content>.device-tablet,.artwork-dialog:not(.is-zoomed) .artwork-content>.device-desktop{width:min(100%,calc((100dvh - 150px)*var(--screen-ratio)))}
}

/* Overview copy begins under its heading, beside the top of the image. */
.case-body .overview-section .native-section-title{margin-bottom:18px}
.case-body .overview-section .native-split{align-items:start}
.case-body .overview-section .native-split>div:first-child{align-self:start}
.case-figure.artifact-figure>.artifact-image{background:#222128;border-radius:9px}

/* Compact copy spacing, preserving the leading inside each paragraph. */
.case-body .native-section-title{margin-bottom:18px}
.case-body .native-section-body>p,.case-body .native-split>div>p,.case-body .native-card>p{margin-top:0;margin-bottom:14px}
.case-body .native-section-body>p:last-child,.case-body .native-split>div>p:last-child,.case-body .native-card>p:last-child{margin-bottom:0}
.case-body .native-feature .native-split{align-items:start}

/* One spacing rhythm for the case-study narrative and its UI exhibits. */
.page-case .case-hero>.wrap,.page-case .case-body{width:100%;max-width:1280px;padding-inline:clamp(20px,4vw,56px)}
.case-body .native-section{padding-block:44px}
.case-body .native-section-title{gap:14px;margin-bottom:16px}
.case-body .native-section-body{line-height:1.7}
.case-body .native-section-body>p{max-width:74ch}
.case-body .native-section-body>:first-child{margin-top:0}
.case-body .native-section-body>:last-child{margin-bottom:0}
.case-body .native-section-body>h3{margin:28px 0 12px}
.case-body .native-split{align-items:start;gap:32px}
.case-body .native-split>div>:first-child{margin-top:0}
.case-body .native-split>div>:last-child{margin-bottom:0}
.case-body .native-split>div>h3{margin:24px 0 12px}
.case-body .native-split>div>h3:first-child{margin-top:0}
.case-body .native-list{margin-block:16px}
.case-body .native-list>li{margin-block:10px}
.case-body .native-list>li:first-child{margin-top:0}
.case-body .native-list>li:last-child{margin-bottom:0}
.case-body .native-cards,.case-body .native-cards:has(>.native-card:nth-child(3):last-child){grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:20px;margin-block:24px}
.case-body .native-cards:first-child{margin-top:0}
.case-body .native-cards:last-child{margin-bottom:0}
.case-body .native-card{padding:24px;line-height:1.7}
.case-body .native-card>.card-index{margin-bottom:10px;line-height:1.4}
.case-body .native-card>h3{margin:0 0 10px;font-size:1.45rem;line-height:1.3}
.case-body .native-card>h3:not(:first-of-type){margin-top:22px}
.case-body .native-card>p{margin:0 0 12px}
.case-body .native-card>:last-child{margin-bottom:0}
.case-body .native-split .native-cards:has(>.native-card){grid-template-columns:1fr;gap:0;margin:0}
.case-body .native-split .native-card{padding:20px 0}
.case-body .native-split .native-card:first-child{padding-top:0}
.case-body .native-quote{margin-block:24px;padding:24px}
.case-body .native-quote>span{margin-bottom:10px}
.case-body .native-quote>p{margin:0}
.case-body .native-stats{gap:24px;margin-block:24px;padding-block:24px;align-items:start}
.case-body .native-stats>div{gap:10px;min-width:0}
.case-body .native-stats dd{font-size:clamp(2rem,4.8vw,3.5rem);line-height:1.1;overflow-wrap:anywhere}
.case-body .scenario-list{margin-top:24px}
.case-body .scenario-list .native-split{margin-block:28px}
.case-body .core-idea-layout{align-items:start;gap:36px}
.case-body .core-idea-list>li{gap:18px;padding-block:22px}
.case-body .core-idea-list>li:first-child{padding-top:0}
.case-body .core-idea-list h3{margin-bottom:10px}
.case-body .core-idea-list p{line-height:1.7}
.case-new-down-syndrome #section-13 .native-section-title{margin-bottom:12px}

/* Exhibits scale complete screens; no imposed screen height or crop. */
.case-body .screen-showcase{--screen-gap:24px;gap:var(--screen-gap);padding:clamp(20px,3vw,36px);border-radius:16px;align-items:start}
.case-body .native-section-body>.screen-showcase{margin-top:24px}
.case-body .native-section-body>.screen-showcase:first-child{margin-top:0}
.case-body .screen-showcase.showcase-phone{display:flex;flex-direction:row;justify-content:center;flex-wrap:nowrap}
.case-body .screen-showcase.showcase-phone.screens-2 .device-phone{width:min(calc((100% - var(--screen-gap))/2),300px)}
.case-body .screen-showcase.showcase-tablet:is(.screens-2,.screens-4){display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.case-body .native-split:has(.screens-3){grid-template-columns:1fr}
.case-body .native-split:has(.screens-3)>div:first-child{max-width:780px}
.case-body .screen-collection{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.case-body .screen-collection>figure{padding:18px;margin:0}
.case-body .screen-collection figcaption{margin-top:14px;line-height:1.5}
.case-body .story-photo{margin:0}
.case-body .case-figure figcaption{line-height:1.6;overflow-wrap:anywhere}
.case-body .design-board,.case-body .cookpal-system{padding:clamp(20px,3vw,32px);border-radius:16px}
.case-body .design-board .ds-foundations,.case-body .design-board .ds-components,.case-body .cp-foundations,.case-body .cp-components{gap:24px}
.case-body .ds-specimen,.case-body .cp-panel{padding:24px}
.case-body .ds-specimen>h3,.case-body .cp-panel>h3{margin-bottom:16px}
@media(max-width:1000px){
 .case-body .native-split{grid-template-columns:1fr;gap:24px}
 .case-body .native-split>div:has(>.story-photo){width:min(100%,640px);justify-self:start}
 .case-body .screen-collection{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
 .case-body .native-section{padding-block:32px}
 .case-body .native-section-title{gap:12px;margin-bottom:16px}
 .case-body .native-card{padding:20px}
 .case-body .native-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 18px}
 .case-body .native-stats:has(>div:only-child){grid-template-columns:1fr}
 .case-body .screen-showcase.showcase-tablet:is(.screens-2,.screens-4){grid-template-columns:1fr}
 .case-body .screen-showcase.showcase-phone:is(.screens-2,.screens-3){flex-direction:column;align-items:center;gap:28px}
 .case-body .screen-showcase.showcase-phone:is(.screens-2,.screens-3) .device-phone{width:min(100%,300px);max-width:300px!important}
 .case-body .screen-collection{grid-template-columns:1fr}
 .case-body .screen-collection>figure{padding:18px;max-width:520px;width:100%;justify-self:center}
 .case-body .design-board .ds-foundations,.case-body .design-board .ds-components,.case-body .cp-foundations,.case-body .cp-components{grid-template-columns:1fr;gap:20px}
 .case-body .ds-specimen,.case-body .cp-panel{padding:20px}
}

/* Headings and body copy share one left edge; related media has its own column. */
.case-body .native-section-title{display:block;margin:0 0 14px}
.case-body .native-section-title::before{display:block;margin:0 0 8px;font-size:12px;line-height:1.4}
.case-body .native-section-title h2{margin:0;max-width:900px}
.case-body .media-section{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.1fr);gap:32px clamp(28px,4vw,52px);align-items:start}
.case-body .section-copy,.case-body .section-media{min-width:0}
.case-body .section-copy .native-section-title{margin-bottom:14px}
.case-body .section-copy .native-section-title h2{font-size:clamp(1.85rem,2.65vw,2.5rem);line-height:1.22;text-wrap:pretty}
.case-body .section-copy .native-section-body{font-size:16px;line-height:1.7}
.case-body .section-copy .native-section-body>h3{font-size:1.35rem;margin:24px 0 10px}
.case-body .section-copy .native-section-body>:first-child{margin-top:0}
.case-body .section-copy .native-section-body>p{margin:0 0 12px}
.case-body .section-copy .native-section-body>.native-tags{margin:0 0 14px}
.case-body .section-copy .native-section-body>:last-child{margin-bottom:0}
.case-body .section-copy .native-cards{grid-template-columns:1fr;gap:0;margin:18px 0 0}
.case-body .section-copy .native-card{padding:18px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}
.case-body .section-copy .native-card:last-child{padding-bottom:0;border-bottom:0}
.case-body .section-copy .native-card>h3{font-size:1.3rem;margin-bottom:8px}
.case-body .section-media{width:100%;align-self:start;padding-top:20px}
.case-body .section-media>.screen-showcase{width:100%;margin:0;padding:6px 10px 12px;border:0;background:transparent;box-shadow:none}
.case-body .section-media>.story-photo{margin:0;padding:0;border:0;background:transparent;box-shadow:none}
.case-body .section-media>.story-photo>.source-viewport{border-radius:14px}
.case-body .section-followup{grid-column:1/-1;margin:0;padding:0}
.case-body .section-followup>h3:first-child{margin:0 0 12px}
.case-body .media-wide{grid-template-columns:1fr;gap:24px}
.case-body .media-wide .section-copy{max-width:780px}
.case-body .media-wide .section-media{padding-top:0}
.case-body .media-wide .section-media>.screen-showcase{padding:28px;border:1px solid var(--line);background:#141418}
.case-body .native-section-body>h3{margin:26px 0 10px}
.case-body .native-section-body>h3:first-child{margin-top:0}
.case-body .native-card>.card-index{margin-bottom:8px}
.case-body .native-card>h3{margin-bottom:10px}
.case-body .native-card>p{margin-bottom:12px}
.case-body .native-card>p:last-child{margin-bottom:0}
.case-body .native-section-body>h3+.native-list,.case-body .native-card>h3+.native-list{margin-top:0}
@media(max-width:960px){
 .case-body .media-section{grid-template-columns:1fr;gap:24px}
 .case-body .section-copy{max-width:780px}
 .case-body .section-media{width:100%;max-width:760px;padding-top:0;justify-self:start}
 .case-body .section-copy .native-section-title h2{font-size:clamp(1.8rem,4.2vw,2.4rem)}
}
@media(max-width:700px){
 .case-body .native-section-title{margin-bottom:12px}
 .case-body .section-copy .native-section-title{margin-bottom:12px}
 .case-body .section-media>.screen-showcase{padding:6px 8px 10px}
 .case-body .media-wide .section-media>.screen-showcase{padding:20px}
}
/* The updated StockChain PDFs are scrolling app canvases. A real phone-sized
   viewport crops the initial view, while every source pixel remains available. */
.product-device.stockchain-phone>.device-display{
  height:calc(100cqw / var(--screen-ratio))!important;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:#8d82ff #f7f7fa;
  background:#f8f8fa!important;
}
.product-device.stockchain-phone>.device-display:focus-visible{outline:3px solid #b8a8ff;outline-offset:4px}
.product-device.stockchain-phone>.device-display>img{
  display:block;
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
}
.case-body .screen-showcase.stockchain-showcase{flex-direction:column;align-items:center;gap:16px}
.case-body .stockchain-showcase .screen-scroll-hint{margin:0;font:400 12px/1.5 var(--sans);color:#b3abbc;text-align:center}
.stockchain-phone>.artwork-launch{right:-13px;bottom:-13px}
.artwork-content.is-scroll-screen{align-items:flex-start}
.artwork-dialog .artwork-content.is-scroll-screen>img{width:min(420px,100%);height:auto;max-height:none;margin:0 auto;border-radius:10px}
.artwork-dialog.is-zoomed .artwork-content.is-scroll-screen>img{width:780px;max-width:none;max-height:none}
.case-vr .case-figure.immersive-artwork{width:100%;max-width:960px;margin:32px auto 48px;padding:clamp(8px,1.2vw,14px)}
.case-vr .case-figure.immersive-artwork img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;border-radius:9px}
.case-figure[data-ui-artwork]>a{position:relative}
.case-figure[data-ui-artwork] .evidence-zoom{right:12px;bottom:12px}