/* Hands Computer feature page.
   One rebuilt desktop component (.pc-desk) shows the five real layouts of the
   Computer tab; the hero rebuilds the console's retro start computer. Sizes use
   container units, so the same desktop works in the small monitor, the large
   picker and the phone. Everything else follows the shared feature tokens. */

.computer-page {
  --pc-orange: #e8762f;
  --pc-shot-shadow: 0 0 0 1px rgb(255 129 67 / 10%), 0 26px 80px rgb(0 0 0 / 34%), 0 0 70px rgb(165 66 21 / 16%);
}

/* ---------- Hero ---------- */
.pc-hero { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(36px, 5vw, 72px); }
.pc-hero h1 { max-width: 14ch; font-size: clamp(42px, 4.4vw, 64px); text-wrap: balance; }
@media (min-width: 561px) {
  .pc-hero .feature-proof-points { width: max-content; flex-wrap: nowrap; gap: 8px clamp(12px, 1.4vw, 18px); }
  .pc-hero .feature-proof-points li { white-space: nowrap; }
}

/* ---------- The desktop ---------- */
.pc-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.pc-desk {
  --k: 1; /* bar and icon scale: larger on the narrow phone screen */
  --pc-bar: calc(var(--k) * 2.6cqw);
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  color: #f4eadc;
  background:
    radial-gradient(24% 32% at 50% 44%, rgb(214 106 52 / 22%), transparent 72%),
    radial-gradient(120% 100% at 50% 40%, #151b25, #090b10 76%);
  isolation: isolate;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.pc-wall {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: calc(var(--k) * .5cqw);
  text-align: center;
  pointer-events: none;
}
.pc-wall img { width: calc(var(--k) * 7.5cqw); height: auto; }
.pc-wall b { font: 800 calc(var(--k) * 3.2cqw) / 1 var(--font-body); letter-spacing: -.01em; color: #f6efe6; }
.pc-wall small { font: 650 calc(var(--k) * .95cqw) / 1 var(--font-body); letter-spacing: .2em; color: rgb(244 234 220 / 52%); }
.pc-wall i { width: calc(var(--k) * 7cqw); height: max(1px, calc(var(--k) * .2cqw)); margin-top: calc(var(--k) * .7cqw); background: linear-gradient(90deg, transparent, #c4532f, transparent); }

.pc-ico { width: calc(var(--k) * 2.5cqw); height: calc(var(--k) * 2.5cqw); flex: none; display: block; }
.pc-tray { display: flex; align-items: center; gap: calc(var(--k) * .6cqw); }
.pc-tray em { width: calc(var(--k) * 2.3cqw); height: calc(var(--k) * 1.25cqw); border-radius: 99px; background: var(--pc-orange); }
.pc-tray i { width: calc(var(--k) * .85cqw); height: calc(var(--k) * .85cqw); box-sizing: border-box; border: max(1px, calc(var(--k) * .14cqw)) solid #ddd6cc; border-radius: 50%; }

/* Every piece of chrome is in the markup once; the layout decides what shows and where. */
.pc-top, .pc-taskbar, .pc-dock, .pc-touch, .pc-title {
  opacity: 0;
  visibility: hidden;
  transition: opacity .32s ease, visibility 0s linear .32s;
}
.pc-desk:is([data-layout="macos"], [data-layout="ubuntu"], [data-layout="touch"], [data-layout="gnome"]) .pc-top,
.pc-desk[data-layout="windows"] .pc-taskbar,
.pc-desk:is([data-layout="macos"], [data-layout="ubuntu"]) .pc-dock,
.pc-desk[data-layout="touch"] .pc-touch,
.pc-desk .pc-title:not(:empty) {
  opacity: 1;
  visibility: visible;
  transition: opacity .32s ease, visibility 0s;
}
.pc-desk.is-switching :is(.pc-top, .pc-taskbar, .pc-dock, .pc-touch, .pc-title) { opacity: 0; transition-duration: .16s; }

.pc-top {
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  height: var(--pc-bar);
  padding: 0 calc(var(--k) * 1cqw);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #0b0b0d;
  font: 650 calc(var(--k) * 1.1cqw) / 1 var(--font-body);
  color: #ece6de;
}
.pc-top-act { display: flex; align-items: center; gap: calc(var(--k) * .3cqw); padding: calc(var(--k) * .32cqw) calc(var(--k) * .55cqw); border-radius: 99px; background: rgb(255 255 255 / 13%); }
.pc-top-act i { width: calc(var(--k) * .42cqw); height: calc(var(--k) * .42cqw); border-radius: 99px; background: #e6e0d8; }
.pc-top-act i:first-child { width: calc(var(--k) * 1.3cqw); }
.pc-top-clock { position: absolute; left: 50%; transform: translateX(-50%); }

.pc-taskbar {
  position: absolute;
  inset: auto 0 0;
  z-index: 3;
  height: calc(var(--k) * 4.4cqw);
  padding: 0 calc(var(--k) * 1.2cqw);
  display: flex;
  align-items: center;
  gap: calc(var(--k) * 1.1cqw);
  border-top: 1px solid rgb(255 255 255 / 7%);
  background: rgb(13 13 16 / 94%);
  font: 650 calc(var(--k) * 1.05cqw) / 1 var(--font-body);
  color: #ece6de;
}
.pc-taskbar > img { width: calc(var(--k) * 2.4cqw); height: auto; }
.pc-taskbar .pc-tray { margin-left: auto; gap: calc(var(--k) * .9cqw); }

.pc-dock {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: calc(var(--k) * .9cqw);
  padding: calc(var(--k) * .7cqw);
  border: 1px solid rgb(255 255 255 / 9%);
  background: rgb(40 40 46 / 84%);
}
.pc-desk[data-layout="macos"] .pc-dock { left: 50%; bottom: calc(var(--k) * 1.1cqw); transform: translateX(-50%); border-radius: calc(var(--k) * 1.4cqw); }
.pc-desk[data-layout="macos"] .pc-dock .pc-ico { width: calc(var(--k) * 3.4cqw); height: calc(var(--k) * 3.4cqw); }
.pc-desk[data-layout="ubuntu"] .pc-dock {
  top: var(--pc-bar);
  bottom: 0;
  left: 0;
  width: calc(var(--k) * 4.4cqw);
  padding: calc(var(--k) * .9cqw) 0;
  flex-direction: column;
  border-width: 0 1px 0 0;
  border-radius: 0;
  background: #1b1b1f;
}
.pc-desk[data-layout="ubuntu"] .pc-dock .pc-dock-grid { margin-top: auto; }

.pc-touch {
  position: absolute;
  inset: auto 0 0;
  z-index: 3;
  height: calc(var(--k) * 3.8cqw);
  padding: 0 calc(var(--k) * 1.4cqw);
  display: flex;
  align-items: center;
  gap: calc(var(--k) * 2.4cqw);
  background: #0b0b0d;
  color: #e6e0d8;
}
.pc-touch svg { width: calc(var(--k) * 1.6cqw); height: calc(var(--k) * 1.6cqw); flex: none; }
.pc-touch-mid { margin-left: auto; display: flex; gap: calc(var(--k) * 2.4cqw); }
.pc-touch-end { margin-left: auto; display: flex; gap: calc(var(--k) * 2.4cqw); }

/* The layout's name floats on the screen, as in the Computer tab's picker. */
.pc-title {
  position: absolute;
  top: calc(var(--pc-bar) + calc(var(--k) * 1.6cqw));
  left: calc(var(--k) * 2cqw);
  z-index: 4;
  padding: 7px 14px;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 99px;
  background: rgb(10 10 12 / 58%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font: 700 clamp(12px, 1.7cqw, 18px) / 1.2 var(--font-body);
}
.pc-desk[data-layout="ubuntu"] .pc-title { left: calc(var(--k) * 6.2cqw); }

/* Windows on the desktop */
.pc-win {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: calc(var(--k) * .9cqw);
  background: #232327;
  box-shadow: 0 calc(var(--k) * 1.4cqw) calc(var(--k) * 4cqw) rgb(0 0 0 / 55%);
  font: 500 calc(var(--k) * 1.35cqw) / 1.4 var(--font-body);
  color: #e9e4dd;
}
.pc-win-bar {
  height: calc(var(--k) * 3.2cqw);
  padding: 0 calc(var(--k) * 1.1cqw);
  display: flex;
  align-items: center;
  gap: calc(var(--k) * .8cqw);
  flex: none;
  background: #2c2c31;
  font-weight: 750;
}
.pc-win-bar .pc-ico { width: calc(var(--k) * 1.8cqw); height: calc(var(--k) * 1.8cqw); }
.pc-win-bar b { margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 750; }
.pc-win-bar em {
  padding: calc(var(--k) * .3cqw) calc(var(--k) * .8cqw);
  border-radius: 99px;
  background: rgb(232 118 47 / 22%);
  color: #ffb58a;
  font-style: normal;
  font-size: .82em;
  font-weight: 750;
}
.pc-win-ctl { display: flex; gap: calc(var(--k) * .55cqw); }
.pc-win-ctl i { width: calc(var(--k) * 1.1cqw); height: calc(var(--k) * 1.1cqw); border-radius: 50%; background: rgb(255 255 255 / 15%); }
.pc-win-body { flex: 1; min-height: 0; padding: calc(var(--k) * 1.2cqw) calc(var(--k) * 1.4cqw); }

.pc-path {
  margin-bottom: calc(var(--k) * 1cqw);
  padding: calc(var(--k) * .5cqw) calc(var(--k) * .9cqw);
  display: inline-flex;
  border-radius: calc(var(--k) * .6cqw);
  background: rgb(255 255 255 / 7%);
  color: #cfc7bc;
  font-weight: 650;
}
.pc-rows { margin: 0; padding: 0; display: grid; gap: calc(var(--k) * .3cqw); list-style: none; }
.pc-rows li {
  padding: calc(var(--k) * .55cqw) calc(var(--k) * .8cqw);
  display: flex;
  align-items: center;
  gap: calc(var(--k) * .9cqw);
  border-radius: calc(var(--k) * .6cqw);
}
.pc-rows li .pc-ico { width: calc(var(--k) * 2cqw); height: calc(var(--k) * 2cqw); }
.pc-rows li span { margin-right: auto; }
.pc-rows li small { color: #9b9187; font-size: .85em; }
.pc-rows li.is-new { background: rgb(232 118 47 / 18%); box-shadow: inset 0 0 0 1px rgb(232 118 47 / 45%); }
.pc-rows li.is-new small { color: #ffb58a; font-weight: 750; }

.pc-doc { display: grid; gap: calc(var(--k) * .8cqw); }
.pc-doc strong { font-size: 1.25em; font-weight: 800; color: #fff; }
.pc-doc p { margin: 0; color: #d9d2c8; }
.pc-doc .pc-caret::after {
  content: '';
  display: inline-block;
  width: max(1px, calc(var(--k) * .16cqw));
  height: 1.1em;
  margin-left: 2px;
  vertical-align: -.15em;
  background: #ffb58a;
  animation: pc-caret 1s steps(1) infinite;
}
.pc-doc i { display: block; height: calc(var(--k) * .9cqw); border-radius: 99px; background: rgb(255 255 255 / 10%); }
.pc-doc i:nth-of-type(2) { width: 86%; }
.pc-doc i:nth-of-type(3) { width: 64%; }
@keyframes pc-caret { 50% { opacity: 0; } }

/* ---------- Hero: the console's retro start computer ---------- */
.pc-retro {
  --pc-face-top: var(--color-neutral-100);
  --pc-face-bottom: var(--color-neutral-200);
  --pc-line: var(--color-neutral-300);
  container-type: inline-size;
  position: relative;
  width: min(100%, 560px);
  margin: 0 auto;
  padding-bottom: 6cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
}
:root[data-theme="dark"] .pc-retro {
  --pc-face-top: color-mix(in srgb, var(--color-neutral-300) 55%, var(--color-neutral-200));
  --pc-face-bottom: var(--color-neutral-200);
}
.pc-monitor {
  width: 78cqw;
  box-sizing: border-box;
  padding: 4.4cqw 4.8cqw 0;
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--pc-line);
  border-radius: 5cqw 5cqw 3.2cqw 3.2cqw;
  background: linear-gradient(180deg, var(--pc-face-top), var(--pc-face-bottom));
  box-shadow: var(--shadow-md);
}
.pc-glass {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 5.4cqw / 6.4cqw;
  background: radial-gradient(110% 100% at 50% 40%, #1b1916, #090807);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 60%), inset 0 0 9cqw rgb(0 0 0 / 70%);
}
.pc-glass .pc-desk { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.pc-glow { position: absolute; inset: 0; opacity: 0; background: radial-gradient(85% 80% at 50% 45%, #2f2922, #100d0a 80%); }
.pc-boot {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2cqw;
  opacity: 0;
  transition: opacity .35s ease;
}
.pc-boot img { width: 10cqw; height: auto; }
.pc-boot b { font: 700 3.2cqw / 1 var(--font-body); color: #f4eadc; }
.pc-boot span { position: relative; width: 16cqw; height: 2px; margin-top: 1.2cqw; overflow: hidden; border-radius: 2px; background: rgb(233 149 93 / 20%); }
.pc-boot span i { position: absolute; inset: 0 auto 0 0; width: 5cqw; border-radius: 2px; background: #e9955d; animation: pc-progress 1.4s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
.pc-glare { position: absolute; inset: 0; z-index: 6; pointer-events: none; background: radial-gradient(60% 40% at 30% 18%, rgb(255 255 255 / 7%), transparent 70%); }
.pc-chin { height: 7.6cqw; padding: 0 .4cqw; display: flex; align-items: center; justify-content: space-between; }
.pc-chin b { font: 750 2.3cqw / 1 var(--font-body); letter-spacing: .04em; color: var(--color-neutral-500); }
.pc-knobs { display: flex; align-items: center; gap: 1.3cqw; }
.pc-knobs i { width: 1.8cqw; height: 1.8cqw; box-sizing: border-box; border: 1px solid var(--pc-line); border-radius: 50%; background: var(--pc-face-bottom); }
.pc-foot { width: 40cqw; height: 2.2cqw; box-sizing: border-box; border: 1.5px solid var(--pc-line); border-top: 0; border-radius: 0 0 1.8cqw 1.8cqw; background: var(--pc-face-bottom); }
.pc-case {
  position: relative;
  width: 100cqw;
  height: 14.4cqw;
  box-sizing: border-box;
  padding: 0 4.2cqw;
  display: flex;
  align-items: center;
  gap: 3.2cqw;
  border: 1.5px solid var(--pc-line);
  border-radius: 2cqw;
  background: linear-gradient(180deg, var(--pc-face-top), var(--pc-face-bottom));
  box-shadow: var(--shadow-md);
}
.pc-bay { width: 29.6cqw; height: 6.4cqw; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 1.8cqw; border: 1px solid var(--pc-line); border-radius: .9cqw; }
.pc-slot { width: 20.4cqw; height: .95cqw; border-radius: 1cqw; background: rgb(0 0 0 / 40%); }
.pc-eject { width: 2.3cqw; height: 1.2cqw; box-sizing: border-box; border: 1px solid var(--pc-line); border-radius: .4cqw; }
.pc-vents { margin-right: auto; display: flex; gap: 1.15cqw; }
.pc-vents i { width: .46cqw; height: 4.6cqw; border-radius: 1px; background: var(--pc-line); }
.pc-leds { display: flex; flex-direction: column; gap: 1.4cqw; }
.pc-leds i { width: 1.15cqw; height: 1.15cqw; border-radius: 50%; background: var(--pc-line); transition: background-color .3s ease, box-shadow .3s ease; }
.pc-power {
  width: 10.6cqw;
  height: 6.4cqw;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border: 1px solid var(--pc-line);
  border-radius: 1.4cqw;
  background: var(--color-neutral-100);
  color: var(--color-accent);
  box-shadow: 0 2px 0 var(--pc-line), 0 3px 6px rgb(0 0 0 / 18%);
  transition: transform .12s ease, box-shadow .2s ease;
}
.pc-power svg { width: 3.2cqw; height: 3.2cqw; }
/* A Hands floppy appears under the drive and slides into the slot (the track's top edge). */
.pc-floppy-track { position: absolute; top: 50%; left: 19cqw; width: 25.6cqw; height: 32.6cqw; overflow: hidden; transform: translateX(-50%); pointer-events: none; }
.pc-floppy { position: absolute; top: 10.7cqw; left: 3cqw; width: 19.5cqw; height: 20.5cqw; opacity: 0; filter: drop-shadow(0 3px 6px rgb(0 0 0 / 30%)); }
.pc-floppy-body {
  position: absolute;
  inset: 0;
  border-radius: 0 .9cqw .9cqw .9cqw;
  background: linear-gradient(180deg, #31503d, #1f3026);
  clip-path: polygon(1.9cqw 0, 100% 0, 100% 100%, 0 100%, 0 1.9cqw);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%), inset 0 0 0 1px rgb(0 0 0 / 18%);
}
.pc-floppy-shutter { position: absolute; top: 0; left: 5.1cqw; width: 9.8cqw; height: 7.2cqw; border-radius: 0 0 .5cqw .5cqw; background: linear-gradient(180deg, #f1eee9, #c3bdb2); }
.pc-floppy-shutter i { position: absolute; top: 1.16cqw; right: 2.1cqw; width: 2.1cqw; height: 4.4cqw; border-radius: 1px; background: #1f3026; }
.pc-floppy-label { position: absolute; left: 1.86cqw; right: 1.86cqw; bottom: 0; height: 11.2cqw; display: grid; place-items: center; border-radius: .7cqw .7cqw 0 0; background: #f5ead8; }
.pc-floppy-label img { width: 8.8cqw; height: auto; }

/* Boot states, set by the page script: off → booting → on → ending. The markup starts "on",
   so without the script (or with reduced motion) the desktop is simply visible. */
.pc-retro .pc-glass .pc-desk { opacity: 0; }
.pc-retro[data-boot="on"] .pc-glass .pc-desk { opacity: 1; animation: pc-reveal .7s cubic-bezier(.2, .8, .2, 1) both; }
.pc-retro:is([data-boot="booting"], [data-boot="on"]) .pc-leds i:first-child { background: var(--color-accent-2, #7aa35c); box-shadow: 0 0 6px var(--color-accent-2, #7aa35c); }
.pc-retro[data-boot="booting"] .pc-leds i:last-child { background: var(--color-accent); animation: pc-disk .45s ease-in-out .9s infinite alternate; }
.pc-retro[data-boot="booting"] .pc-power { transform: translateY(2px); box-shadow: 0 0 0 var(--pc-line), inset 0 1px 3px rgb(0 0 0 / 30%); }
.pc-retro[data-boot="booting"] .pc-floppy { animation: pc-floppy .9s both; }
.pc-retro[data-boot="booting"] .pc-glow { animation: pc-crt-on .7s cubic-bezier(.2, .7, .2, 1) .9s both; }
.pc-retro[data-boot="booting"] .pc-boot { opacity: 1; transition-delay: 1.4s; }
.pc-retro[data-boot="ending"] .pc-glass .pc-desk { opacity: 1; animation: pc-crt-off .5s ease-in both; }
@keyframes pc-floppy {
  0% { opacity: 0; transform: translateY(3cqw); animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  30% { opacity: 1; transform: translateY(0); }
  42% { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(.55, 0, .35, 1); }
  100% { opacity: 1; transform: translateY(-32cqw); }
}
@keyframes pc-crt-on {
  0% { opacity: 0; transform: scale(.35, .006); filter: brightness(2.4); }
  35% { opacity: 1; transform: scale(1, .006); filter: brightness(2.4); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes pc-crt-off {
  0% { opacity: 1; transform: none; filter: none; }
  55% { opacity: 1; transform: scale(1, .006); filter: brightness(2.2); }
  100% { opacity: 0; transform: scale(.2, .006); filter: brightness(2.2); }
}
@keyframes pc-reveal { from { opacity: 0; transform: scale(.94); filter: brightness(1.6); } }
@keyframes pc-progress { to { transform: translateX(11cqw); } }
@keyframes pc-disk { to { opacity: .25; } }

/* ---------- Layout picker ---------- */
.pc-picker { padding: clamp(14px, 2.4vw, 26px); border-radius: 28px; }
.pc-picker .pc-desk { border-radius: 16px; box-shadow: 0 0 0 1px rgb(255 255 255 / 6%); cursor: grab; }
.pc-tabs {
  margin: 0 0 clamp(14px, 2vw, 20px);
  display: flex;
  justify-content: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.pc-tabs::-webkit-scrollbar { display: none; }
.pc-tab {
  flex: none;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgb(245 238 231 / 14%);
  border-radius: 99px;
  background: rgb(245 238 231 / 5%);
  color: #cfc2b3;
  font: 700 14px / 1 var(--font-body);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.pc-tab:hover { color: #fff; border-color: rgb(245 238 231 / 28%); }
.pc-tab[aria-selected="true"] { color: #1b120c; border-color: #fb8951; background: #fb8951; }
.pc-tab:focus-visible { outline: 2px solid #fb8951; outline-offset: 3px; }

/* ---------- Working together with your Hand ---------- */
.pc-together {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  place-items: center stretch;
  gap: clamp(16px, 2.6vw, 28px);
  border-radius: 28px;
}
.pc-together > * { min-width: 0; }
/* The desktop measures itself (container units), so it needs an explicit width in the grid. */
.pc-together .pc-desk { width: 100%; border-radius: 16px; }
.pc-together .pc-win { transition: opacity .45s ease, transform .45s ease; }
.pc-win--files { left: 5%; top: 8%; width: 50%; height: 66%; }
.pc-win--editor { left: 33%; top: 22%; width: 60%; height: 62%; z-index: 3; }
.pc-apps { margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pc-app {
  padding: 18px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border: 1px solid var(--color-divider);
  border-radius: 20px;
  background: color-mix(in srgb, var(--color-neutral-100) 62%, transparent);
}
.pc-app svg { width: 36px; height: 36px; flex: none; }
.pc-app strong { display: block; font-size: 16px; }
.pc-app span { color: var(--feature-ink-soft); font-size: 14px; }

/* ---------- Phone ---------- */
.pc-mobile-panel {
  padding: clamp(28px, 5vw, 60px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  border-radius: 32px;
  color: #f5eee7;
  background:
    radial-gradient(circle at 85% 10%, rgb(251 137 81 / 20%), transparent 24rem),
    #1b1b19;
  box-shadow: var(--shadow-md);
}
.pc-mobile-panel h2 { color: #f5eee7; }
.pc-mobile-panel h2 span { color: #fb8951; }
.pc-mobile-panel p { max-width: 54ch; color: #cfc2b3; font-size: 17px; }
.pc-mobile-panel .eyebrow { color: #fb8951; }
.pc-phone {
  width: clamp(200px, 22vw, 250px);
  padding: 7px;
  border: 1px solid rgb(245 238 231 / 16%);
  border-radius: 38px;
  background: #0d0c0b;
  box-shadow: 0 30px 70px rgb(0 0 0 / 45%), 0 0 0 1px rgb(0 0 0 / 50%);
}
.pc-desk--phone { --k: 2.7; aspect-ratio: 9 / 19; border-radius: 31px; }
.pc-desk--phone .pc-top { padding-inline: calc(var(--k) * 2cqw); }

/* ---------- Facts ---------- */
.pc-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pc-fact {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--color-divider);
  border-radius: 24px;
  background: color-mix(in srgb, var(--color-neutral-100) 62%, transparent);
}
.pc-fact h3 { margin: 0; font-family: var(--font-body); font-size: 19px; font-weight: 780; }
.pc-fact p { margin: 0; color: var(--feature-ink-soft); }
.pc-fact a { margin-top: auto; padding-top: 10px; color: var(--color-accent); font-size: 13px; font-weight: 750; text-decoration: none; }
.pc-fact a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pc-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 6px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .pc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .pc-hero { grid-template-columns: 1fr; }
  .pc-together { grid-template-columns: 1fr; }
  .pc-mobile-panel { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .pc-mobile-panel p { margin-inline: auto; }
}
@media (max-width: 640px) {
  .pc-tabs { justify-content: flex-start; margin-inline: -4px; padding-inline: 4px; }
  .pc-apps { grid-template-columns: 1fr; }
  .pc-facts { grid-template-columns: 1fr; }
  .pc-together .stage-msg { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-retro .pc-glass .pc-desk,
  .pc-retro[data-boot] .pc-glass .pc-desk { opacity: 1; animation: none; }
  .pc-boot span i { width: 100%; animation: none; }
  .pc-doc .pc-caret::after { animation: none; }
  .pc-top, .pc-taskbar, .pc-dock, .pc-touch, .pc-title, .pc-tab { transition: none; }
}

/* Figures and lists without browser defaults */
.pc-hero-visual, .pc-phone { margin: 0; }
.pc-apps { margin-bottom: 0; padding: 0; list-style: none; }
.pc-mobile-panel h2 { max-width: 16ch; margin: 10px 0 14px; font-size: clamp(32px, 3.8vw, 52px); line-height: 1.04; }
@media (max-width: 900px) { .pc-mobile-panel h2 { margin-inline: auto; } }

/* A Files window on the picker's desktop; its buttons sit where each layout puts them. */
/* Off-centre, so the Hands wallpaper stays visible next to it. */
.pc-win--browse { left: 4%; top: 24%; width: 36%; height: 54%; }
.pc-desk[data-layout="ubuntu"] .pc-win--browse { left: 9%; }
.pc-desk[data-layout="macos"] .pc-win-ctl { order: -1; }
.pc-desk[data-layout="macos"] .pc-win-ctl i:nth-child(1) { background: #ff5f57; }
.pc-desk[data-layout="macos"] .pc-win-ctl i:nth-child(2) { background: #febc2e; }
.pc-desk[data-layout="macos"] .pc-win-ctl i:nth-child(3) { background: #28c840; }
.pc-desk[data-layout="macos"] .pc-win-bar b { margin-right: 0; margin-inline: auto; }
.pc-desk[data-layout="macos"] .pc-win-bar .pc-ico { display: none; }
.pc-win--browse { transition: opacity .32s ease; }
.pc-desk.is-switching .pc-win--browse { opacity: 0; transition-duration: .16s; }