diff --git a/picker/styles/picker.css b/picker/styles/picker.css
index 674506641..1ec67418c 100644
--- a/picker/styles/picker.css
+++ b/picker/styles/picker.css
@@ -1062,17 +1062,22 @@ html.light .ks-button.ks-button-ghost:hover {
 
 .picker-strategy-grid {
   display: grid;
-  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
+  grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
   gap: 50px;
   align-items: center;
 }
 
+/* One raised panel, hairline rows — same vocabulary as the palette bands
+   on screen 02, not four floating SaaS cards. */
 .picker-strategy-options {
   min-width: 0;
   display: grid;
-  gap: 10px;
+  gap: 0;
   padding: 0;
-  border: 0;
+  background: var(--ks-lacquer-raised);
+  border: 1px solid var(--ks-rule);
+  border-radius: 2px;
+  overflow: hidden;
 }
 
 .picker-strategy-options > legend,
@@ -1086,50 +1091,67 @@ html.light .ks-button.ks-button-ghost:hover {
   white-space: nowrap;
 }
 
-/* Selection reads from the card itself: a champagne-tinted ground plus a
-   doubled hairline (border + inset ring), no radio dot spending a column. */
 .picker-strategy-option {
   position: relative;
   display: grid;
-  gap: 14px;
+  gap: 6px;
   align-items: start;
-  padding: 16px 18px;
-  background: var(--ks-lacquer-raised);
-  border: 1px solid color-mix(in oklab, var(--ks-patina-deep) 32%, var(--ks-rule));
-  border-radius: 2px;
+  padding: 20px 24px 20px 28px;
+  background: transparent;
+  border: 0;
+  border-bottom: 1px solid var(--ks-rule);
+  border-radius: 0;
   cursor: pointer;
   transition:
     background-color 180ms var(--ks-ease),
-    border-color 180ms var(--ks-ease),
-    box-shadow 180ms var(--ks-ease);
+    color 180ms var(--ks-ease);
+}
+
+.picker-strategy-option:last-child {
+  border-bottom: 0;
+}
+
+/* Patina spine: hover previews, checked commits. */
+.picker-strategy-option::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 3px;
+  background: transparent;
+  transition: background-color 180ms var(--ks-ease);
 }
 
 .picker-strategy-option:hover {
-  border-color: var(--ks-patina-deep);
+  background: color-mix(in oklab, var(--ks-patina-deep) 4%, var(--ks-lacquer-raised));
+}
+
+.picker-strategy-option:hover::before,
+.picker-strategy-option:has(input:checked)::before {
+  background: var(--ks-patina-deep);
 }
 
 .picker-strategy-copy {
   display: grid;
-  gap: 5px;
+  gap: 6px;
 }
 
 .picker-strategy-copy strong {
   color: var(--ks-champagne);
-  font-size: var(--ks-type-title-size);
-  font-weight: 600;
-  line-height: 1.2;
+  font-family: var(--ks-font-display);
+  font-size: 1.22rem;
+  font-weight: 500;
+  line-height: 1.15;
+  letter-spacing: -0.01em;
 }
 
 .picker-strategy-copy span {
   color: var(--ks-text-muted);
-  font-size: 0.82rem;
-  line-height: 1.45;
+  font-size: 0.88rem;
+  line-height: 1.5;
 }
 
 .picker-strategy-option:has(input:checked) {
   background: color-mix(in oklab, var(--ks-patina-deep) 7%, var(--ks-lacquer-raised));
-  border-color: var(--ks-patina-deep);
-  box-shadow: inset 0 0 0 1px var(--ks-patina-deep);
 }
 
 .picker-strategy-option:has(input:checked) .picker-strategy-copy strong {
@@ -1138,7 +1160,8 @@ html.light .ks-button.ks-button-ghost:hover {
 
 .picker-strategy-option:has(input:focus-visible) {
   outline: 2px solid var(--ks-patina-deep);
-  outline-offset: 3px;
+  outline-offset: -2px;
+  z-index: 1;
 }
 
 /* Screen 03 shows one editorial landing page at desktop and phone sizes.
@@ -1154,21 +1177,25 @@ html.light .ks-button.ks-button-ghost:hover {
   --pv-bone: color-mix(in oklab, var(--pv-neutral) 62%, var(--pv-n-ink));
   --pv-strong: color-mix(in oklab, var(--pv-neutral) 22%, var(--pv-n-ink));
   --pvs-ground: var(--pv-neutral);
-  --pvs-headline: var(--pv-strong);
-  --pvs-eyebrow: var(--pv-bone);
+  --pvs-surface: var(--pv-surface-2);
+  --pvs-headline: color-mix(in oklab, var(--pv-primary) 80%, var(--pv-strong));
+  --pvs-eyebrow: var(--pv-tertiary);
   --pvs-copy: var(--pv-bone);
   --pvs-title: var(--pv-strong);
   --pvs-cta: var(--pv-primary);
   --pvs-signal: var(--pv-primary);
-  --pvs-ghost: var(--pv-bone);
+  --pvs-ghost: color-mix(in oklab, var(--pv-neutral) 88%, var(--pv-secondary));
+  --pvs-ghost-edge: color-mix(in oklab, var(--pv-secondary) 55%, var(--pv-neutral));
   --pvs-image: var(--pv-surface-2);
-  --pvs-image-edge: var(--pv-bone);
+  --pvs-image-a: color-mix(in oklab, var(--pv-secondary) 26%, var(--pv-neutral));
+  --pvs-image-b: color-mix(in oklab, var(--pv-secondary) 50%, var(--pv-neutral));
+  --pvs-image-edge: color-mix(in oklab, var(--pv-secondary) 58%, var(--pv-neutral));
   --pvs-bars: var(--pv-bone);
   --pvs-rule: var(--ks-rule);
-  --pvs-accent-a: var(--pv-strong);
-  --pvs-accent-b: var(--pv-bone);
+  --pvs-accent-a: var(--pv-secondary);
+  --pvs-accent-b: color-mix(in oklab, var(--pv-secondary) 38%, var(--pv-neutral));
   --pvs-accent-c: var(--pv-primary);
-  --pvs-accent-d: var(--pv-surface-2);
+  --pvs-accent-d: var(--pv-tertiary);
   width: 100%;
   aspect-ratio: 1.865 / 1;
   display: grid;
@@ -1184,8 +1211,11 @@ html.light .ks-button.ks-button-ghost:hover {
 #picker-form:not(:has(.picker-strategy-option:hover input[name="color-strategy"])):has(input[name="color-strategy"][value="committed"]:checked) .picker-strategy-preview {
   --pvs-headline: color-mix(in oklab, var(--pv-primary) 80%, var(--pv-strong));
   --pvs-eyebrow: var(--pv-primary);
-  --pvs-ghost: var(--pv-primary);
+  --pvs-ghost: color-mix(in oklab, var(--pv-primary) 14%, var(--pv-neutral));
+  --pvs-ghost-edge: var(--pv-primary);
   --pvs-image: var(--pv-primary);
+  --pvs-image-a: var(--pv-primary);
+  --pvs-image-b: color-mix(in oklab, var(--pv-primary) 72%, var(--pv-neutral));
   --pvs-image-edge: var(--pv-primary);
   --pvs-accent-a: var(--pv-primary);
   --pvs-accent-b: color-mix(in oklab, var(--pv-primary) 70%, var(--pv-neutral));
@@ -1200,8 +1230,11 @@ html.light .ks-button.ks-button-ghost:hover {
 #picker-form:not(:has(.picker-strategy-option:hover input[name="color-strategy"])):has(input[name="color-strategy"][value="full-palette"]:checked) .picker-strategy-preview {
   --pvs-headline: color-mix(in oklab, var(--pv-primary) 80%, var(--pv-strong));
   --pvs-eyebrow: var(--pv-tertiary);
-  --pvs-ghost: var(--pv-secondary);
+  --pvs-ghost: color-mix(in oklab, var(--pv-secondary) 18%, var(--pv-neutral));
+  --pvs-ghost-edge: var(--pv-secondary);
   --pvs-image: var(--pv-primary);
+  --pvs-image-a: var(--pv-primary);
+  --pvs-image-b: color-mix(in oklab, var(--pv-secondary) 32%, var(--pv-primary));
   --pvs-image-edge: var(--pv-primary);
   --pvs-signal: var(--pv-tertiary);
   --pvs-accent-a: var(--pv-secondary);
@@ -1216,13 +1249,17 @@ html.light .ks-button.ks-button-ghost:hover {
 #picker-form:has(.picker-strategy-option:hover input[name="color-strategy"][value="drenched"]) .picker-strategy-preview,
 #picker-form:not(:has(.picker-strategy-option:hover input[name="color-strategy"])):has(input[name="color-strategy"][value="drenched"]:checked) .picker-strategy-preview {
   --pvs-ground: var(--pv-primary);
+  --pvs-surface: color-mix(in oklab, var(--pv-p-ink) 10%, var(--pv-primary));
   --pvs-headline: var(--pv-p-ink);
   --pvs-eyebrow: color-mix(in oklab, var(--pv-p-ink) 70%, var(--pv-primary));
   --pvs-copy: color-mix(in oklab, var(--pv-p-ink) 55%, var(--pv-primary));
   --pvs-title: var(--pv-p-ink);
   --pvs-cta: var(--pv-p-ink);
-  --pvs-ghost: color-mix(in oklab, var(--pv-p-ink) 35%, var(--pv-primary));
+  --pvs-ghost: color-mix(in oklab, var(--pv-p-ink) 22%, var(--pv-primary));
+  --pvs-ghost-edge: color-mix(in oklab, var(--pv-p-ink) 45%, var(--pv-primary));
   --pvs-image: color-mix(in oklab, var(--pv-p-ink) 20%, var(--pv-primary));
+  --pvs-image-a: color-mix(in oklab, var(--pv-p-ink) 16%, var(--pv-primary));
+  --pvs-image-b: color-mix(in oklab, var(--pv-p-ink) 28%, var(--pv-primary));
   --pvs-image-edge: color-mix(in oklab, var(--pv-p-ink) 40%, var(--pv-primary));
   --pvs-signal: var(--pv-tertiary);
   --pvs-bars: color-mix(in oklab, var(--pv-p-ink) 45%, var(--pv-primary));
@@ -1239,7 +1276,8 @@ html.light .ks-button.ks-button-ghost:hover {
   min-height: 0;
   overflow: hidden;
   background-color: var(--pvs-ground);
-  border: 1px solid var(--ks-rule);
+  border: 1px solid color-mix(in oklab, var(--pvs-rule) 72%, var(--ks-rule));
+  box-shadow: 0 16px 32px -20px oklch(0% 0 0 / 0.28);
 }
 
 .ps-desktop {
@@ -1267,10 +1305,11 @@ html.light .ks-button.ks-button-ghost:hover {
 }
 
 .ps-brand-block {
-  width: clamp(28px, 3.35vw, 48px);
-  height: clamp(6px, 22%, 11px);
+  width: clamp(8px, 1.15vw, 12px);
+  height: auto;
+  aspect-ratio: 1;
   background-color: var(--pvs-cta);
-  border-radius: 2px;
+  border-radius: 50%;
 }
 
 .ps-nav-bars {
@@ -1331,7 +1370,7 @@ html.light .ks-button.ks-button-ghost:hover {
 }
 
 .ps-headline i:last-child {
-  width: 100%;
+  width: 72%;
 }
 
 .ps-copy {
@@ -1342,14 +1381,14 @@ html.light .ks-button.ks-button-ghost:hover {
 
 .ps-copy i {
   display: block;
-  width: 70%;
+  width: 64%;
   height: 7px;
   background-color: var(--pvs-copy);
   border-radius: 2px;
 }
 
 .ps-copy i:last-child {
-  width: 70%;
+  width: 48%;
 }
 
 .ps-actions {
@@ -1367,17 +1406,31 @@ html.light .ks-button.ks-button-ghost:hover {
 
 .ps-actions i:last-child {
   background-color: var(--pvs-ghost);
+  border: 1px solid var(--pvs-ghost-edge);
 }
 
 .ps-image {
+  position: relative;
   width: 100%;
   height: 100%;
   min-height: 0;
   background-color: var(--pvs-image);
+  background-image: linear-gradient(135deg, var(--pvs-image-a), var(--pvs-image-b));
   border: 1px solid var(--pvs-image-edge);
   border-radius: 2px;
 }
 
+.ps-image::after {
+  content: "";
+  position: absolute;
+  top: 8%;
+  right: 8%;
+  width: clamp(6px, 1.1vw, 10px);
+  aspect-ratio: 1;
+  background-color: var(--pvs-accent-d);
+  border-radius: 50%;
+}
+
 .ps-proof {
   min-width: 0;
   display: grid;
@@ -1572,12 +1625,12 @@ html.light .ks-button.ks-button-ghost:hover {
   align-items: center;
   min-height: 0;
   padding: 0 6%;
+  background-color: var(--pvs-surface);
   border-bottom: 1px solid var(--pvs-rule);
 }
 
 .ps-phone-top .ps-brand-block {
-  width: 22%;
-  height: 8px;
+  width: 9px;
 }
 
 .ps-phone-top .ps-nav-action {
@@ -1588,13 +1641,14 @@ html.light .ks-button.ks-button-ghost:hover {
 .ps-phone-body {
   min-height: 0;
   display: grid;
-  grid-template-rows: 29.5% auto auto auto 36px auto minmax(0, 1fr);
-  gap: 5px;
+  grid-template-rows: 31% auto auto auto 34px auto minmax(0, 1fr);
+  gap: 6px;
   padding: 6%;
 }
 
 .ps-phone-body .ps-image {
   margin: 0;
+  min-height: 0;
 }
 
 .ps-phone-body .ps-headline i {
@@ -1602,46 +1656,48 @@ html.light .ks-button.ks-button-ghost:hover {
 }
 
 .ps-phone-body .ps-headline {
-  margin: 8px 0 0;
+  margin: 6px 0 0;
 }
 
 .ps-phone-body .ps-headline i:first-child {
-  width: 57%;
+  width: 54%;
   height: 8px;
 }
 
 .ps-phone-body .ps-headline i:last-child {
-  width: 86%;
+  width: 82%;
   height: 7px;
 }
 
 .ps-phone-body .ps-copy {
-  margin: 4px 0 0;
+  margin: 2px 0 0;
 }
 
 .ps-phone-body .ps-copy i {
-  width: 70%;
+  width: 68%;
   height: 5px;
 }
 
 .ps-phone-body .ps-copy i:last-child {
-  display: none;
+  display: block;
+  width: 52%;
 }
 
 .ps-phone-body .ps-actions {
   gap: 7px;
-  margin-top: 8px;
+  margin-top: 6px;
 }
 
 .ps-phone-body .ps-actions i {
   width: 43%;
-  height: 20px;
+  height: 18px;
 }
 
 .ps-phone-body .ps-proof {
   grid-template-columns: repeat(2, minmax(0, 1fr));
   margin-inline: -6.5%;
-  margin-top: 6.5px;
+  margin-top: 5px;
+  border-block-color: var(--pvs-rule);
 }
 
 .ps-phone-body .ps-proof-item {
@@ -1650,7 +1706,7 @@ html.light .ks-button.ks-button-ghost:hover {
 }
 
 .ps-phone-body .ps-proof-item i {
-  width: 11px;
+  width: 10px;
 }
 
 .ps-phone-body .ps-proof-item span {
@@ -1659,12 +1715,12 @@ html.light .ks-button.ks-button-ghost:hover {
 }
 
 .ps-phone-body .ps-editorial-copy strong {
-  width: 33%;
+  width: 38%;
   height: 6px;
 }
 
 .ps-phone-body .ps-editorial-copy {
-  margin-top: 9.5px;
+  margin-top: 8px;
 }
 
 .ps-phone-body .ps-editorial-copy span i {
@@ -1672,14 +1728,14 @@ html.light .ks-button.ks-button-ghost:hover {
 }
 
 .ps-phone-body .ps-gallery {
-  grid-template-columns: 1.1fr 0.95fr;
-  gap: 12.5%;
+  grid-template-columns: 1.05fr 0.95fr;
+  gap: 10%;
   margin-left: 1px;
-  margin-top: 8px;
+  margin-top: 6px;
 }
 
 .ps-phone-body .ps-gallery-item {
-  grid-template-rows: 31px auto;
+  grid-template-rows: 36px auto;
   gap: 6px;
 }
 
@@ -1698,6 +1754,7 @@ html.light .ks-button.ks-button-ghost:hover {
   justify-content: space-around;
   min-height: 0;
   padding-inline: 6%;
+  background-color: var(--pvs-surface);
   border-top: 1px solid var(--pvs-rule);
 }
 
@@ -1718,6 +1775,7 @@ html.light .ks-button.ks-button-ghost:hover {
   .ps-copy i,
   .ps-actions i,
   .ps-image,
+  .ps-image::after,
   .ps-proof-item i,
   .ps-proof-item span,
   .ps-editorial-copy strong,
@@ -1733,7 +1791,9 @@ html.light .ks-button.ks-button-ghost:hover {
 ) {
   transition:
     background-color 280ms var(--ks-ease),
+    background-image 280ms var(--ks-ease),
     border-color 280ms var(--ks-ease),
+    box-shadow 280ms var(--ks-ease),
     color 280ms var(--ks-ease);
 }
 
@@ -1754,7 +1814,7 @@ html.light .ks-button.ks-button-ghost:hover {
 
 .picker-type-grid {
   display: grid;
-  grid-template-columns: minmax(340px, 400px) minmax(0, 1fr);
+  grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
   gap: 50px;
   align-items: stretch;
 }
@@ -1771,14 +1831,14 @@ html.light .ks-button.ks-button-ghost:hover {
   inset: 0;
   overflow-y: auto;
   align-content: start;
-  gap: 10px;
-  padding-right: 12px;
+  padding-right: 10px;
   scrollbar-width: thin;
+  scrollbar-color: color-mix(in oklab, var(--ks-patina-deep) 35%, transparent) transparent;
 }
 
 .picker-type-option {
-  gap: 14px;
-  padding: 18px 20px;
+  gap: 0;
+  padding: 22px 24px 22px 28px;
 }
 
 .picker-type-copy {