/* Lona website: You section. A working copy of the Me tab (Views/Me/ProfileView.swift) and the pages it opens:
   Your look (LookView), Try-on body (BodyTypeView), the height wheel, Your colours (ColourProfileView), plus a piece's
   colour verdict (ColourFitRow). Sizes inside the phone are iOS points (var(--pt)), measured on an iPhone 17. */

.you-section {
  background: var(--sand);
  --you-pw: var(--demo-phone);          /* phone width */
  --you-sec: #6e6e73;                   /* iOS secondary label, a touch darker for contrast */
  --you-chev: #b9b9be;                  /* tertiary label: row chevrons */
  --you-sep: rgba(60, 60, 67, 0.17);
  --you-fill: rgba(118, 118, 128, 0.12);
  --you-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --you-push: 0.5s;
}

/* ---------- Layout ---------- */
/* One column, never wider than the container (an auto track would grow to the phone's padded width). */
.you-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(56px, 8vw, 80px); }
@media (min-width: 1000px) {
  .you-stage { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(56px, 7vw, 112px); align-items: center; }
}

.you-demo { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; min-width: 0; }
.you-demo__phonewrap { position: relative; display: grid; justify-items: center; width: min(100%, calc(var(--you-pw) + 112px)); padding-inline: clamp(0px, 5vw, 56px); }
/* The stage the phone stands on: a lighter step of the section's sand, so the phone's warm grey screen stands out. */
.you-demo__phonewrap::before {
  content: ""; position: absolute; z-index: 0; inset: 10% 0 5%;
  border-radius: 44px; background: rgba(255, 255, 255, 0.55);
}
@media (max-width: 599px) {
  .you-demo__phonewrap { width: 100%; padding-inline: 0; }
  .you-demo__phonewrap::before { display: none; }
}
.you-section .you-phone { position: relative; z-index: 1; --phone-w: var(--you-pw); }
/* One phone size across the page (base.css --demo-phone). */

/* Above the phone's long drop shadow, which paints over unpositioned content below it. */
.you-section .you-jump,
.you-section .you-note { position: relative; z-index: 1; }
.you-section .you-jump { margin-top: 26px; }
.you-section .you-note { max-width: 400px; margin-top: 12px; transition: color 0.3s; }
.you-section .you-note.is-pulse { animation: you-pulse 1.6s var(--ease); }
@keyframes you-pulse {
  0%, 100% { color: var(--ink-3); }
  12%, 55% { color: var(--accent-ink); }
}

.you-side { display: grid; gap: clamp(44px, 6vw, 56px); width: 100%; max-width: 560px; justify-self: start; min-width: 0; }

/* ---------- Check a piece ---------- */
.you-check {
  display: grid; gap: 14px;
  padding: clamp(20px, 3vw, 28px);
  border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-1);
}
.you-check .h3 { font-size: clamp(26px, 2.4vw, 30px); }
.you-check__text { font-size: 16px; margin-top: -6px; }
.you-check__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
@media (max-width: 420px) { .you-check__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.you-piece {
  position: relative; aspect-ratio: 5 / 6; border-radius: 14px; overflow: hidden;
  background: var(--paper-2);
  transition: transform 0.2s var(--ease), box-shadow 0.2s;
}
.you-piece img { position: absolute; inset: 12%; width: 76%; height: 76%; object-fit: contain; pointer-events: none; }
.you-piece:hover { transform: translateY(-2px); }
.you-piece:active { transform: scale(0.96); }
.you-piece[aria-pressed="true"] { box-shadow: inset 0 0 0 2.5px var(--accent); }

.you-result { display: grid; gap: 12px; margin-top: 6px; }
.you-result__head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.you-result__photo { position: relative; flex: none; width: 64px; height: 64px; border-radius: 14px; background: var(--paper-2); overflow: hidden; }
.you-result__photo img { position: absolute; inset: 10%; width: 80%; height: 80%; object-fit: contain; transition: opacity 0.2s; }
.you-result__photo img.is-out { opacity: 0; }
.you-result__name { display: grid; gap: 2px; min-width: 0; }
.you-result__name b { font-family: var(--font-serif); font-size: 21px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.you-result__name span { font-size: 14px; color: var(--ink-3); }

/* As ColourFitRow: the rating's symbol and title in its tint, the reason under it, on an 8% wash of the tint. */
.you-fit {
  --fit: var(--good); --fit-bg: rgba(61, 133, 84, 0.09);
  display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start;
  padding: 12px 14px; border-radius: 14px; background: var(--fit-bg);
  transition: background-color 0.3s;
}
.you-fit--neutral { --fit: var(--ink-2); --fit-bg: rgba(60, 60, 67, 0.06); }
.you-fit--tricky { --fit: var(--tricky); --fit-bg: rgba(199, 115, 31, 0.1); }
.you-fit__icon { color: var(--fit); padding-top: 1px; }
.you-fit__icon svg { width: 20px; height: 20px; }
.you-fit__body { display: grid; gap: 2px; font-size: 15px; line-height: 1.4; }
.you-fit__body b { font-weight: 650; color: var(--fit); }
.you-fit__body span { color: var(--ink-2); }
.you-fit.is-pop { animation: you-pop 0.45s var(--ease); }
@keyframes you-pop { from { opacity: 0.25; transform: scale(0.97); } }
.you-check__fine { margin-top: 2px; }

/* ---------- Points ---------- */
.you-section .you-points { margin-top: 0; gap: 22px 36px; }
@media (min-width: 700px) and (max-width: 999px) {
  .you-section .you-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =====================================================================================================
   Inside the phone
   ===================================================================================================== */
.you-screen { background: var(--stage); }
.you-screen .ios-tabbar { transition: transform 0.45s var(--you-ease), opacity 0.3s; }
/* Try-on body hides the tab bar, as in the app. */
.you-screen.is-tabless .ios-tabbar { transform: translateY(calc(var(--pt) * 120)); opacity: 0; }

/* Pages: Me underneath, the others pushed over it from the right. */
.you-page {
  position: absolute; inset: 0; z-index: 2; overflow: hidden;
  background: var(--you-bg, var(--stage));
  transform: translateX(100%); visibility: hidden;
  transition: transform var(--you-push) var(--you-ease), visibility 0s linear var(--you-push);
  box-shadow: 0 0 calc(var(--pt) * 28) rgba(0, 0, 0, 0.12);
}
.you-page[data-pos="current"] {
  transform: none; visibility: visible;
  transition: transform var(--you-push) var(--you-ease), visibility 0s;
}
.you-me { z-index: 1; box-shadow: none; }
.you-me[data-pos="left"] { transform: translateX(-30%); }
.you-me::after {
  content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none;
  background: rgba(0, 0, 0, 0.1); opacity: 0;
  transition: opacity var(--you-push) var(--you-ease);
}
.you-me[data-pos="left"]::after { opacity: 1; }
.you-look { --you-bg: var(--stage); }
.you-body { --you-bg: var(--sand); }
.you-colours { --you-bg: #ffffff; }

/* Navigation bar: a back button, the title, and the page fading out under it. */
.you-nav {
  position: absolute; z-index: 6; inset: 0 0 auto 0;
  height: calc(var(--pt) * 124);
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: calc(var(--pt) * 62) calc(var(--pt) * 16) 0;
  background: linear-gradient(var(--you-bg, var(--stage)) 76%, transparent);
  pointer-events: none;
}
.you-nav > * { pointer-events: auto; }
.you-nav--plain { background: none; }
.you-nav__title {
  position: absolute; left: calc(var(--pt) * 70); right: calc(var(--pt) * 70); top: calc(var(--pt) * 62);
  height: calc(var(--pt) * 44); display: grid; place-items: center;
  font-size: calc(var(--pt) * 17); font-weight: 600; white-space: nowrap; pointer-events: none;
}
.you-section .you-back,
.you-section .you-more { width: calc(var(--pt) * 44); padding: 0; transition: transform 0.15s, background 0.15s; }
.you-section .you-back:active,
.you-section .you-back.is-pressed { transform: scale(0.92); background: #f0f0f0; }
.you-section .you-more { margin-left: auto; }

.you-scroll {
  position: absolute; inset: 0;
  overflow-x: hidden; overflow-y: auto;
  padding: calc(var(--pt) * 106) 0 calc(var(--pt) * 112);
  scrollbar-width: none;
}
.you-scroll::-webkit-scrollbar { display: none; }

/* Pressed and inert controls. */
.you-section [data-inert] { cursor: default; transition: opacity 0.15s; }
.you-section [data-inert].is-pressed { opacity: 0.5; }

/* What a control does in the app, when this copy can't: a glass card for a moment, above the tab bar (on Try-on
   body, which has none, over the figure's feet, clear of the numbers and the Save button). */
.you-toast {
  position: absolute; z-index: 28; left: 50%; bottom: calc(var(--pt) * 100);
  width: max-content; max-width: calc(var(--pt) * 330);
  display: grid; gap: calc(var(--pt) * 2);
  padding: calc(var(--pt) * 11) calc(var(--pt) * 18) calc(var(--pt) * 12);
  border-radius: calc(var(--pt) * 20);
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 calc(var(--pt) * 6) calc(var(--pt) * 22) rgba(0, 0, 0, 0.14);
  text-align: center; color: #000; text-wrap: balance;
  pointer-events: none; opacity: 0; translate: -50% calc(var(--pt) * 10);
  transition: opacity 0.25s, translate 0.4s var(--you-ease);
}
.you-toast.is-shown { opacity: 1; translate: -50% 0; }
.you-screen.is-tabless .you-toast { bottom: calc(var(--pt) * 228); }
.you-toast b { font-size: calc(var(--pt) * 15); font-weight: 600; line-height: 1.3; }
.you-toast span { font-size: calc(var(--pt) * 13); line-height: 1.3; color: var(--you-sec); }

/* ---------- Me ---------- */
.you-me__list { overflow-y: hidden; padding-bottom: calc(var(--pt) * 40); }
.you-me.is-wheel-open .you-me__list { overflow-y: auto; padding-bottom: calc(var(--pt) * 112); }
.you-head {
  padding: calc(var(--pt) * 28) calc(var(--pt) * 32) calc(var(--pt) * 10);
  font-size: calc(var(--pt) * 20); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em;
}
.you-head:first-child { padding-top: calc(var(--pt) * 18); }
.you-card { margin: 0 calc(var(--pt) * 16); border-radius: calc(var(--pt) * 26); background: #fff; overflow: hidden; }
.you-card--last { margin-top: calc(var(--pt) * 36); }

.you-row {
  position: relative; display: flex; align-items: center; gap: calc(var(--pt) * 12);
  width: 100%; min-height: calc(var(--pt) * 52);
  padding: calc(var(--pt) * 14.5) calc(var(--pt) * 16);
  color: #000; text-align: left; text-decoration: none;
  font-size: calc(var(--pt) * 17); line-height: 1.25;
  transition: background-color 0.2s;
}
.you-section a.you-row, .you-section button.you-row { cursor: pointer; }
.you-section .you-row:focus-visible { outline-offset: -3px; border-radius: calc(var(--pt) * 26); }
.you-row:active, .you-row.is-pressed { background: rgba(0, 0, 0, 0.07); transition: none; }
@media (hover: hover) { .you-section button.you-row:hover, .you-section a.you-row:hover { background: rgba(0, 0, 0, 0.03); } }
.you-card .you-row + .you-row::before {
  content: ""; position: absolute; top: 0; left: calc(var(--pt) * 72); right: calc(var(--pt) * 16);
  height: 1px; background: var(--you-sep);
}
.you-row--static { cursor: default; }

.you-thumb { flex: none; display: flex; justify-content: center; width: calc(var(--pt) * 44); }
.you-thumb img {
  width: calc(var(--pt) * 32); height: calc(var(--pt) * 48); padding: calc(var(--pt) * 3);
  object-fit: contain; border-radius: calc(var(--pt) * 7); background: var(--stage);
}
.you-thumb--body img { background: var(--sand); }
.you-icon { flex: none; display: grid; place-items: center; width: calc(var(--pt) * 44); color: var(--accent); }
.you-icon svg { width: calc(var(--pt) * 25); height: calc(var(--pt) * 25); }
.you-row__text { flex: 1; min-width: 0; display: grid; gap: calc(var(--pt) * 2); }
.you-row__title { font-size: calc(var(--pt) * 17); line-height: 1.25; }
.you-row__sub { font-size: calc(var(--pt) * 15); line-height: 1.27; color: var(--you-sec); }
.you-chev { flex: none; width: calc(var(--pt) * 15); height: calc(var(--pt) * 15); margin-left: auto; color: var(--you-chev); }

.you-row--height .you-row__title { flex: 1; }
.you-row__value { color: var(--you-sec); font-variant-numeric: tabular-nums; transition: color 0.2s; }
.you-row--height[aria-expanded="true"] .you-row__value { color: var(--accent-ink); }

.you-dots { display: flex; gap: calc(var(--pt) * 6); margin-bottom: calc(var(--pt) * 4); }
.you-dots i {
  flex: none; width: calc(var(--pt) * 22); height: calc(var(--pt) * 22); border-radius: 50%;
  background: var(--c); box-shadow: inset 0 0 0 calc(var(--pt) * 0.5) rgba(0, 0, 0, 0.15);
}

/* The height wheel, opened under its row. */
.you-wheelwrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--you-ease); }
.you-wheelwrap.is-open { grid-template-rows: 1fr; }
.you-wheelwrap__in { position: relative; min-height: 0; overflow: hidden; }
.you-wheelwrap__in::before {
  content: ""; position: absolute; z-index: 2; top: 0; left: calc(var(--pt) * 16); right: calc(var(--pt) * 16);
  height: 1px; background: var(--you-sep);
}
.you-wheel { position: relative; height: calc(var(--pt) * 216); }
.you-section .you-wheel:focus-visible { outline-offset: -4px; border-radius: calc(var(--pt) * 14); }
.you-wheel__band {
  position: absolute; left: calc(var(--pt) * 12); right: calc(var(--pt) * 12); top: 50%;
  height: calc(var(--pt) * 34); margin-top: calc(var(--pt) * -17);
  border-radius: calc(var(--pt) * 9); background: rgba(118, 118, 128, 0.12);
}
.you-wheel__scroll {
  position: absolute; inset: 0; overflow-y: scroll; overflow-x: hidden;
  scroll-snap-type: y mandatory; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
  cursor: grab;
}
.you-wheel__scroll::-webkit-scrollbar { display: none; }
.you-wheel.is-dragging .you-wheel__scroll,
.you-wheel.is-tweening .you-wheel__scroll { scroll-snap-type: none; }
.you-wheel.is-dragging .you-wheel__scroll { cursor: grabbing; }
.you-section .you-wheel__list { margin: 0; padding: calc(var(--pt) * 91) 0; list-style: none; }
.you-wheel__list li { height: calc(var(--pt) * 34); scroll-snap-align: center; cursor: pointer; }
/* The text turns on the drum; the row itself stays put, so it snaps where it is. */
.you-wheel__list span {
  display: grid; place-items: center; height: 100%;
  font-size: calc(var(--pt) * 21); font-variant-numeric: tabular-nums; color: #000;
  backface-visibility: hidden; pointer-events: none;
}

/* ---------- Your look ---------- */
.you-hero { display: flex; flex-direction: column; gap: calc(var(--pt) * 8); height: calc(var(--pt) * 481); padding-bottom: calc(var(--pt) * 8); }
.you-hero__figure { position: relative; flex: 1; min-height: 0; display: flex; justify-content: center; }
.you-hero__figure img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.you-hero__actions {
  position: absolute; left: calc(var(--pt) * 24); right: calc(var(--pt) * 24); bottom: calc(var(--pt) * 12);
  display: grid; justify-items: center; gap: calc(var(--pt) * 10);
  animation: you-rise 0.35s var(--you-ease);
}
.you-hero__actions[hidden] { display: none; }
@keyframes you-rise { from { opacity: 0; transform: translateY(calc(var(--pt) * 8)); } }
.you-heronote {
  padding: calc(var(--pt) * 8) calc(var(--pt) * 14); border-radius: calc(var(--pt) * 14);
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  font-size: calc(var(--pt) * 13); line-height: 1.3; text-align: center;
}
.you-herobtn {
  display: inline-flex; align-items: center; gap: calc(var(--pt) * 8);
  height: calc(var(--pt) * 50); padding: 0 calc(var(--pt) * 22); border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: calc(var(--pt) * 17); font-weight: 600; white-space: nowrap;
  box-shadow: 0 calc(var(--pt) * 6) calc(var(--pt) * 18) rgba(74, 75, 196, 0.3);
  transition: transform 0.15s;
}
.you-herobtn svg { width: calc(var(--pt) * 21); height: calc(var(--pt) * 21); }
.you-section button.you-herobtn:active { transform: scale(0.96); }
.you-hero__made {
  display: flex; justify-content: center; align-items: center; gap: calc(var(--pt) * 5);
  font-size: calc(var(--pt) * 12); line-height: 1.3;
}
.you-hero__made svg { width: calc(var(--pt) * 12); height: calc(var(--pt) * 12); }

.you-face { display: grid; justify-items: center; gap: calc(var(--pt) * 22); padding: calc(var(--pt) * 16); }
.you-face__title { justify-self: stretch; font-size: calc(var(--pt) * 20); font-weight: 600; line-height: 1.2; }
.you-face__photo { width: calc(var(--pt) * 160); height: calc(var(--pt) * 160); border-radius: 50%; overflow: hidden; }
.you-face__photo img { width: 100%; height: 100%; object-fit: cover; }
.you-face__buttons { display: flex; gap: calc(var(--pt) * 10); }
.you-bordered {
  display: inline-flex; align-items: center; gap: calc(var(--pt) * 6);
  height: calc(var(--pt) * 36); padding: 0 calc(var(--pt) * 15); border-radius: 999px;
  background: var(--you-fill); color: var(--accent-ink);
  font-size: calc(var(--pt) * 17); font-weight: 500;
}
.you-bordered svg { width: calc(var(--pt) * 19); height: calc(var(--pt) * 19); }
.you-tickcard {
  justify-self: stretch; padding: calc(var(--pt) * 14);
  border-radius: calc(var(--pt) * 14); background: #fff;
}
.you-tickcard.is-flash { animation: you-flash 1.4s var(--ease); }
@keyframes you-flash { 20%, 60% { box-shadow: 0 0 0 calc(var(--pt) * 2.5) var(--accent); } }
.you-tick { display: flex; align-items: center; gap: calc(var(--pt) * 12); width: 100%; text-align: left; color: #000; }
.you-tick svg { flex: none; width: calc(var(--pt) * 27); height: calc(var(--pt) * 27); }
.you-tick__on { color: var(--accent); }
.you-tick__off { display: none; color: var(--you-sec); }
.you-tick[aria-pressed="false"] .you-tick__on { display: none; }
.you-tick[aria-pressed="false"] .you-tick__off { display: block; }
.you-tick__text { display: grid; gap: calc(var(--pt) * 2); }
.you-tick__text b { font-size: calc(var(--pt) * 15); font-weight: 600; line-height: 1.3; }
.you-tick__text span { font-size: calc(var(--pt) * 12); color: var(--you-sec); line-height: 1.3; }
.you-tips {
  justify-self: stretch; display: grid; gap: calc(var(--pt) * 10);
  padding: calc(var(--pt) * 16); border-radius: calc(var(--pt) * 14); background: #fff;
  font-size: calc(var(--pt) * 15); line-height: 1.3;
}
.you-tips__title { font-size: calc(var(--pt) * 17); font-weight: 600; }
.you-tips p:not(.you-tips__title) { display: flex; align-items: center; gap: calc(var(--pt) * 8); }
.you-tips svg { flex: none; width: calc(var(--pt) * 19); height: calc(var(--pt) * 19); }

/* ---------- Try-on body ---------- */
.you-body__inner {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: calc(var(--pt) * 114) calc(var(--pt) * 24) calc(var(--pt) * 42);
}
.you-body__title { font-size: calc(var(--pt) * 30); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.you-body__text { margin-top: calc(var(--pt) * 8); font-size: calc(var(--pt) * 17); line-height: 1.29; color: var(--you-sec); }
.you-seg {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; flex: none;
  margin-top: calc(var(--pt) * 16); height: calc(var(--pt) * 34); padding: calc(var(--pt) * 2);
  border-radius: 999px; background: rgba(118, 118, 128, 0.14);
}
.you-seg__thumb {
  position: absolute; top: calc(var(--pt) * 2); bottom: calc(var(--pt) * 2); left: calc(var(--pt) * 2);
  width: calc(50% - var(--pt) * 2); border-radius: 999px; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  transition: translate 0.45s var(--you-ease);
}
.you-seg.is-woman .you-seg__thumb { translate: 100% 0; }
.you-seg button { position: relative; z-index: 1; border-radius: 999px; font-size: calc(var(--pt) * 14); font-weight: 500; color: #000; }
.you-figure { position: relative; flex: 1; min-height: 0; margin: calc(var(--pt) * 12) 0; }
.you-figure img[data-figure] {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transition: opacity 0.25s ease-in-out;
}
.you-figure img[data-figure].is-shown { opacity: 1; }
.you-polaroid {
  position: absolute; z-index: 1; top: calc(var(--pt) * 16); right: 0;
  padding: calc(var(--pt) * 8) calc(var(--pt) * 8) calc(var(--pt) * 20);
  background: #fff; box-shadow: 0 calc(var(--pt) * 3) calc(var(--pt) * 8) rgba(0, 0, 0, 0.15);
  rotate: 4deg;
}
.you-polaroid img { width: calc(var(--pt) * 104); height: calc(var(--pt) * 104); object-fit: cover; }
.you-body__name { text-align: center; font-size: calc(var(--pt) * 15); font-weight: 500; line-height: 1.3; color: var(--you-sec); }
.you-body__ready {
  display: flex; justify-content: center; align-items: center; gap: calc(var(--pt) * 4);
  margin-top: calc(var(--pt) * 2); height: calc(var(--pt) * 16);
  font-size: calc(var(--pt) * 12); color: var(--you-sec);
  transition: opacity 0.25s;
}
.you-body__ready svg { width: calc(var(--pt) * 12); height: calc(var(--pt) * 12); }
.you-body__ready.is-hidden { opacity: 0; }
.you-types {
  flex: none; margin: calc(var(--pt) * 10) calc(var(--pt) * -24) 0 0;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.you-types::-webkit-scrollbar { display: none; }
.you-types__track { display: flex; gap: calc(var(--pt) * 4); width: max-content; padding-right: calc(var(--pt) * 24); }
.you-types__photo { display: flex; align-items: center; height: calc(var(--pt) * 50); padding: 0 calc(var(--pt) * 12); font-size: calc(var(--pt) * 20); white-space: nowrap; }
.you-types button {
  position: relative; flex: none; width: calc(var(--pt) * 50); height: calc(var(--pt) * 50);
  border-radius: calc(var(--pt) * 16); font-size: calc(var(--pt) * 20); color: #000;
  transition: background-color 0.2s;
}
.you-types button[aria-pressed="true"] { font-weight: 600; background: rgba(0, 0, 0, 0.07); }
.you-types button.is-ready::after {
  content: ""; position: absolute; left: 50%; bottom: calc(var(--pt) * 6);
  width: calc(var(--pt) * 5); height: calc(var(--pt) * 5); margin-left: calc(var(--pt) * -2.5);
  border-radius: 50%; background: var(--accent);
}
.you-section .you-types button:focus-visible { outline-offset: -3px; }
.you-body__save {
  display: block; flex: none; width: 100%; margin-top: calc(var(--pt) * 18);
  padding: calc(var(--pt) * 18) 0; border-radius: 999px;
  background: var(--accent); color: #fff; text-align: center;
  font-size: calc(var(--pt) * 17); font-weight: 600; line-height: calc(var(--pt) * 22);
  transition: transform 0.15s, opacity 0.15s;
}
.you-body__save:active { transform: scale(0.98); }
.you-body__save.is-pressed { opacity: 0.6; }

/* ---------- Your colours ---------- */
.you-colours .you-scroll {
  display: flex; flex-direction: column; gap: calc(var(--pt) * 20);
  padding: calc(var(--pt) * 122) calc(var(--pt) * 16) calc(var(--pt) * 112);
}
.you-colours__group { display: grid; gap: calc(var(--pt) * 8); }
.you-label { font-size: calc(var(--pt) * 13); font-weight: 600; color: var(--you-sec); }
.you-feats { display: flex; flex-wrap: wrap; gap: calc(var(--pt) * 8); }
.you-feat {
  display: inline-flex; align-items: center; gap: calc(var(--pt) * 6);
  padding: calc(var(--pt) * 6) calc(var(--pt) * 10) calc(var(--pt) * 6) calc(var(--pt) * 6);
  border-radius: 999px; background: var(--you-fill);
  font-size: calc(var(--pt) * 13); font-weight: 500; line-height: 1.25; color: #000; white-space: nowrap;
  transition: background-color 0.15s;
}
.you-feat i { flex: none; width: calc(var(--pt) * 16); height: calc(var(--pt) * 16); border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 calc(var(--pt) * 0.5) rgba(0, 0, 0, 0.15); }
.you-feat svg { flex: none; width: calc(var(--pt) * 10); height: calc(var(--pt) * 10); color: var(--you-sec); }
.you-feat--undertone { padding-left: calc(var(--pt) * 10); }
.you-feat__sec { color: var(--you-sec); font-weight: 400; }
.you-feat b { font-weight: 500; }
.you-feat[aria-expanded="true"], .you-feat.is-pressed { background: rgba(118, 118, 128, 0.24); }
.you-summary { font-size: calc(var(--pt) * 15); line-height: 1.33; color: var(--you-sec); }
.you-swatches {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(var(--pt) * 10) calc(var(--pt) * 6);
  margin: 0; padding: 0; list-style: none;
}
.you-swatches li {
  display: grid; justify-items: center; align-content: start; gap: calc(var(--pt) * 4);
  text-align: center; font-size: calc(var(--pt) * 11); line-height: 1.2; color: #000;
}
.you-swatches i {
  position: relative; width: calc(var(--pt) * 40); height: calc(var(--pt) * 40); border-radius: 50%;
  background: var(--c); box-shadow: inset 0 0 0 calc(var(--pt) * 0.5) rgba(0, 0, 0, 0.14);
}
.you-swatches--avoid i { overflow: hidden; }
.you-swatches--avoid i::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: calc(var(--pt) * 2); height: calc(var(--pt) * 46);
  background: rgba(255, 255, 255, 0.85); transform: translate(-50%, -50%) rotate(45deg);
}
.you-swatches--avoid li:nth-child(3) i::after { background: rgba(0, 0, 0, 0.12); }
.you-cap { font-size: calc(var(--pt) * 12); line-height: 1.33; color: var(--you-sec); }

/* A Menu (Picker) for one of the colours: the options, the current one ticked. */
.you-menu {
  position: absolute; z-index: 8; top: 0; left: 0;
  width: calc(var(--pt) * 262); max-height: calc(100% - var(--pt) * 120); overflow-y: auto;
  padding: calc(var(--pt) * 6) 0; border-radius: calc(var(--pt) * 22);
  background: rgba(250, 250, 250, 0.94);
  -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 calc(var(--pt) * 14) calc(var(--pt) * 44) rgba(0, 0, 0, 0.2);
  transform-origin: var(--you-ox, 50%) var(--you-oy, 0);
  opacity: 0; scale: 0.4;
  transition: opacity 0.2s, scale 0.35s var(--you-ease);
  scrollbar-width: none;
}
.you-menu::-webkit-scrollbar { display: none; }
.you-menu[hidden] { display: none; }
.you-menu.is-open { opacity: 1; scale: 1; }
.you-menu__item {
  display: grid; grid-template-columns: calc(var(--pt) * 18) 1fr; gap: calc(var(--pt) * 8); align-items: start;
  width: 100%; padding: calc(var(--pt) * 10) calc(var(--pt) * 16) calc(var(--pt) * 10) calc(var(--pt) * 14);
  text-align: left; font-size: calc(var(--pt) * 17); line-height: 1.25; color: #000;
}
.you-menu__item svg { width: calc(var(--pt) * 16); height: calc(var(--pt) * 16); margin-top: calc(var(--pt) * 2); visibility: hidden; }
.you-menu__item[aria-checked="true"] svg { visibility: visible; }
.you-menu__item small { display: block; margin-top: calc(var(--pt) * 2); font-size: calc(var(--pt) * 13); line-height: 1.3; color: var(--you-sec); }
.you-menu__item:hover, .you-menu__item.is-pressed { background: rgba(0, 0, 0, 0.06); }
.you-section .you-menu__item:focus-visible { outline-offset: -3px; border-radius: calc(var(--pt) * 12); background: rgba(0, 0, 0, 0.06); }