/* Screen geometry has one source of truth: the dimensions on each specimen.
   Containers scale the full screen by width; no preview imposes a height. */
.product-device{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:var(--screen-ratio)!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  border-radius:12px;
  box-shadow:0 14px 28px -20px #183a4b35;
}
.product-device>.device-display{
  display:block!important;
  height:auto!important;
  min-height:0;
  aspect-ratio:var(--screen-ratio);
  background:transparent!important;
  border:0;
  border-radius:10px;
  overflow:hidden;
}
.product-device.source-screen>.device-display>.source-viewport{
  display:block;
  width:100%!important;
  height:auto!important;
  aspect-ratio:var(--screen-ratio);
}
.product-device.native-screen>.device-display{height:calc(100cqw / var(--screen-ratio))!important}
.native-screen>.device-display>.refined-app,.native-screen>.device-display>.mock-app{height:100%;min-height:0}
.screen-showcase{--screen-gap:28px;gap:var(--screen-gap);align-items:center}
.screen-showcase.showcase-phone .device-phone{width:min(280px,100%);max-width:280px!important;flex:none}
.screen-showcase.showcase-phone.screens-2 .device-phone{width:min(calc((100% - var(--screen-gap))/2),280px)}
.screen-showcase.showcase-phone.screens-3 .device-phone{width:min(calc((100% - 2 * var(--screen-gap))/3),280px)}
.screen-showcase .product-device.device-tablet,.screen-showcase .product-device.device-desktop{width:100%;max-width:970px}
.project-visual:has(>.screen-showcase),.featured .project-visual:has(>.screen-showcase){display:block;aspect-ratio:auto;height:auto;min-height:0;overflow:visible}
.case-hero-art:has(>.screen-showcase),.case-meet-up .case-hero-art:has(>.screen-showcase){display:block;aspect-ratio:auto;height:auto;min-height:0;overflow:visible}
.project-visual>.screen-showcase.showcase-compact,.case-hero-art>.screen-showcase.showcase-compact{
  position:relative;
  inset:auto;
  width:100%;
  height:auto;
  min-height:0;
  padding:38px 32px;
  container-type:normal;
  overflow:visible;
}
.screen-showcase.showcase-compact .product-device.device-phone{width:min(calc((100% - var(--screen-gap))/2),230px);max-width:230px!important}
.screen-showcase.showcase-compact.screens-1 .product-device.device-phone{width:min(100%,270px);max-width:270px!important}
.screen-showcase.showcase-compact .product-device.device-tablet,.screen-showcase.showcase-compact .product-device.device-desktop{width:100%;max-width:100%}
.screen-collection .product-device{width:100%}
.screen-collection .device-display{border-radius:7px}
.artwork-content>.product-device{height:auto!important;aspect-ratio:var(--screen-ratio)!important}
.artwork-content>.product-device>.device-display{border-radius:10px}

/* The mobile specimens fit their actual canvases without clipping their copy. */
.native-screen .mock-app .wallet-balance{padding-block:5cqw}
.native-screen .mock-app .mock-actions{margin-bottom:5cqw}
.native-screen .mock-app .transaction-main{padding-block:3cqw}
.native-screen .mock-app .transaction-receipt{padding-block:2cqw}
.native-screen .mock-app .mock-intro{margin-bottom:4cqw!important}
.native-screen .mock-app .order-stock{padding-block:3.5cqw}
.native-screen .mock-app .order-grid{gap:3cqw}
.native-screen .mock-app .fee-list>div{margin-block:2.5cqw}
.native-screen .mock-app .net-payable{padding-block:3cqw}
.native-screen .mock-app .hash-verification{padding-block:3.5cqw}
.native-screen .mock-app .mock-primary{padding-block:3.5cqw}
.transit-app .clean-status{padding-block:2cqw 1.5cqw;font-size:2.8cqw}
.transit-header{padding-block:3.5cqw}
.journey-map{height:37cqw}
.journey-sheet{padding-top:2.5cqw}
.journey-sheet .sheet-handle{margin-bottom:3cqw}
.journey-sheet h3{font-size:3.5cqw;line-height:1.4}
.journey-sheet .train-card{margin-top:4cqw}
.journey-stops{margin-top:4cqw}
.journey-stops>div{min-height:13cqw}
.carbon-overview{padding:8cqw 7cqw}
.carbon-history{padding:7cqw 6cqw 3cqw}
.carbon-history>div{margin-bottom:3cqw}
.carbon-refresh{margin-bottom:5cqw;padding-block:3cqw}

/* Each idea gets a full readable row, with the token example alongside it. */
.core-idea-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(290px,.8fr);gap:65px;align-items:center}
.core-idea-list{list-style:none;margin:0;padding:0;min-width:0}
.core-idea-list>li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:22px;padding:27px 0;border-bottom:1px solid var(--line)}
.core-idea-list>li:first-child{padding-top:0}
.core-idea-list>li:last-child{border:0;padding-bottom:0}
.core-idea-number{font-size:13px;line-height:1.5;color:#9382ad;padding-top:5px;font-variant-numeric:tabular-nums}
.core-idea-list h3{font:400 1.6rem/1.3 var(--editorial);letter-spacing:-.025em;color:var(--ink);margin:0 0 10px}
.core-idea-list p{font-size:1rem;line-height:1.8;color:var(--muted);margin:0;max-width:600px}
.core-idea-section .token-example{width:100%;padding:32px 25px;background:#f2eff8;border:1px solid #e4deee;border-radius:16px;color:#4a4259;box-shadow:none}
.core-idea-section .token-example>span{font-size:16px;font-weight:500}
.core-idea-section .token-example>small{font-size:13px;color:#3a8266;margin-top:7px;display:block}
.core-idea-section .token-example>strong{font:500 clamp(2.35rem,3.2vw,3rem)/1.2 var(--sans);color:#413258;letter-spacing:-.04em;margin-top:23px}
.core-idea-section .token-example>p{color:#786e83;font-size:14px;margin-top:7px}
.core-idea-section .token-example>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:28px 0 20px}
.core-idea-section .token-example>div>div{padding:15px 6px;background:#fff;border:1px solid #e4deee;border-radius:8px;min-width:0;font-size:12px;color:#8b8194}
.core-idea-section .token-example b{color:#655280;font-size:13px;margin-top:5px;font-weight:600}
.case-vr .case-hero-art{width:min(100%,420px);max-width:420px;justify-self:center;aspect-ratio:auto;height:auto;background:transparent}
.case-vr .case-hero-art>img{width:100%;height:auto;padding:0}
.case-vr .case-figure.compact-artifact{max-width:580px;width:100%;margin-inline:auto}
.case-vr .case-figure.compact-artifact img{width:100%;height:auto;max-height:410px;object-fit:contain}
@media(max-width:900px){.core-idea-layout{grid-template-columns:minmax(0,1.2fr) minmax(260px,.85fr);gap:32px}.core-idea-list>li{gap:17px}.core-idea-section .token-example{padding:28px 20px}.case-vr .case-hero-art{max-width:380px}}
@media(max-width:650px){
  .core-idea-layout{grid-template-columns:1fr;gap:32px}
  .core-idea-list>li{grid-template-columns:28px minmax(0,1fr);gap:16px;padding-block:23px}
  .core-idea-list h3{font-size:1.4rem;margin-bottom:9px}
  .core-idea-list p{font-size:1rem;line-height:1.75}
  .core-idea-section .token-example{max-width:420px;justify-self:center;padding:28px 23px}
  .screen-showcase{--screen-gap:20px}
  .project-visual>.screen-showcase.showcase-compact,.case-hero-art>.screen-showcase.showcase-compact{padding:32px 22px}
  .screen-showcase.showcase-phone.screens-3{flex-direction:column;flex-wrap:nowrap}
  .screen-showcase.showcase-phone.screens-3 .device-phone{width:min(280px,100%);max-width:280px!important}
  .case-vr .case-hero-art{max-width:340px}
  .case-vr .case-figure.compact-artifact{max-width:420px}
  .case-vr .case-figure.compact-artifact img{max-height:310px}
}
@media(prefers-reduced-motion:reduce){.product-device{transition:none!important}}