.mock { --line: color-mix(in oklch, var(--p-fg) 20%, transparent); --tint: color-mix(in oklch, var(--p-ac) 16%, transparent); }
.mock h4 { margin: 0; text-wrap: balance; }
.mock button { cursor: pointer; color: inherit; font: inherit; }
.mock button:focus-visible { outline: 2px solid var(--p-ac); outline-offset: 2px; }
.sl-label, .tt-wall-head, .br-board-head span { font: 500 var(--fs-xs)/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; opacity: .8; }

/* tattoo: loud headline + claimable flash wall */
.mock--tattoo { gap: var(--sp-5); }
.mock--tattoo .mock-name { text-transform: uppercase; letter-spacing: .14em; font-size: var(--fs-md); }
.tt-hero { display: grid; gap: var(--sp-2); border-bottom: 2px solid var(--p-fg); padding-bottom: var(--sp-4); }
.tt-hero h4 { font: 600 clamp(1.7rem, 3.6vw, 2.8rem)/0.98 var(--font-display); text-transform: uppercase; letter-spacing: -0.03em; }
.tt-hero p { opacity: .78; }
.tt-wall-head { display: flex; justify-content: space-between; gap: var(--sp-3); }
.tt-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.tt-tile {
  position: relative; overflow: hidden; display: grid; gap: 2px; align-content: start; text-align: left; min-height: 84px;
  padding: var(--sp-3); background: transparent; border: 1px dashed var(--line); border-radius: 2px; font-size: var(--fs-sm);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.tt-tile:hover { background: var(--tint); border-color: var(--p-ac); }
.tt-no { font: 400 var(--fs-xs)/1 var(--font-mono); opacity: .6; }
.tt-tile small { color: var(--p-ac); font-weight: 600; }
.tt-stamp {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%) rotate(-14deg) scale(1.6); opacity: 0;
  padding: 2px var(--sp-2); border: 2px solid var(--p-ac); color: var(--p-ac); background: var(--p-bg);
  font: 600 var(--fs-xs)/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  transition: opacity var(--t-fast), transform var(--t-med) var(--ease);
}
.tt-tile[aria-pressed="true"] { border-style: solid; border-color: var(--p-ac); }
.tt-tile[aria-pressed="true"] .tt-stamp { opacity: 1; transform: translate(-50%, -50%) rotate(-14deg) scale(1); }
.tt-strip { display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-sm); opacity: .9; }
.tt-strip b { color: var(--p-ac); }
.tt-strip i { font-style: normal; opacity: .5; }

/* salon: editorial split + shade finder */
.sl-nav .mock-name { font-style: italic; font-size: var(--fs-xl); }
.sl-split { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--sp-6); align-items: center; }
.sl-copy { display: grid; gap: var(--sp-3); }
.sl-copy h4 { font: 400 clamp(1.8rem, 3.6vw, 2.9rem)/1.02 "DM Serif Display", serif; }
.sl-copy p { opacity: .78; }
.sl-menu { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); font-size: var(--fs-sm); }
.sl-menu div { display: flex; align-items: baseline; gap: var(--sp-2); }
.sl-menu i { flex: 1; border-bottom: 1px dotted var(--line); }
.sl-menu b { color: var(--p-ac); font-weight: 600; }
.sl-finder { display: grid; justify-items: center; gap: var(--sp-3); padding: var(--sp-5) var(--sp-4); border: 1px solid var(--line); border-radius: 999px 999px var(--radius) var(--radius); text-align: center; }
.sl-swatch {
  width: 132px; aspect-ratio: 1; border-radius: 50%; transition: background var(--t-slow);
  background: radial-gradient(circle at 35% 30%, color-mix(in oklch, var(--c) 55%, white), var(--c) 55%, color-mix(in oklch, var(--c) 70%, black));
}
.sl-finder b { font: 400 var(--fs-lg)/1.2 "DM Serif Display", serif; }
.sl-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }
.sl-dot { width: var(--tap); height: var(--tap); border-radius: 50%; background: var(--c); border: 2px solid var(--line); transition: transform var(--t-fast); }
.sl-dot:hover { transform: scale(1.1); }
.sl-dot[aria-pressed="true"] { border-color: var(--p-fg); box-shadow: 0 0 0 3px var(--p-bg), 0 0 0 5px var(--p-fg); }

/* barber: poster type + live wait board */
.mock--barber { text-align: center; }
.br-nav .mock-name { font: 400 var(--fs-xl)/1 "Bebas Neue", sans-serif; letter-spacing: .08em; }
.br-hero { display: grid; gap: var(--sp-2); justify-items: center; }
.br-hero h4 { font: 400 clamp(2.4rem, 5.4vw, 4rem)/0.9 "Bebas Neue", sans-serif; letter-spacing: .02em; }
.br-hero p { opacity: .78; }
.br-board { border: 2px solid var(--p-fg); padding: var(--sp-4); display: grid; gap: var(--sp-4); }
.br-board-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.br-board-head .mock-btn { border: 0; min-height: var(--tap); }
.br-board-head .mock-btn:hover { background: color-mix(in oklch, var(--p-ac) 85%, var(--p-fg)); }
.br-chairs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.br-chair { display: grid; gap: 2px; padding: var(--sp-3); background: var(--tint); }
.br-chair span, .br-chair small { font: 400 var(--fs-xs)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; opacity: .75; }
.br-chair b { font: 400 2.6rem/1 "Bebas Neue", sans-serif; color: var(--p-ac); }
.br-chair b.bump { animation: bump var(--t-slow) var(--ease); }
@keyframes bump { 30% { transform: scale(1.3); } }
.br-you { font-size: var(--fs-sm); }
.br-prices { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.br-prices div { display: grid; padding: var(--sp-3); font-size: var(--fs-sm); border-right: 1px solid var(--line); }
.br-prices div:last-child { border-right: 0; }
.br-prices b { font: 400 var(--fs-xl)/1 "Bebas Neue", sans-serif; color: var(--p-ac); }

/* spa: calm centered + breathing orb + ritual builder */
.sp-nav { justify-content: center; }
.sp-nav .mock-name { font: 400 var(--fs-lg)/1 "DM Serif Display", serif; letter-spacing: .2em; text-transform: uppercase; }
.sp-center { display: grid; justify-items: center; text-align: center; gap: var(--sp-3); max-width: 480px; margin-inline: auto; }
.sp-orb {
  width: 108px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  font: 400 var(--fs-xs)/1 var(--font-mono); letter-spacing: .08em;
  background: radial-gradient(circle, var(--tint), transparent 70%); border: 1px solid var(--line);
  animation: breathe 8s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { transform: scale(0.8); } 50% { transform: scale(1.1); box-shadow: 0 0 40px var(--tint); } }
.sp-center h4 { font: 400 clamp(1.7rem, 3.4vw, 2.5rem)/1.08 "DM Serif Display", serif; }
.sp-center > p { opacity: .78; }
.sp-build { display: grid; gap: var(--sp-3); justify-items: center; width: 100%; padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.sp-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }
.sp-chip { min-height: var(--tap); padding: 0 var(--sp-4); border-radius: 999px; background: transparent; border: 1px solid var(--line); font-size: var(--fs-sm); transition: background var(--t-fast), border-color var(--t-fast); }
.sp-chip:hover { background: var(--tint); }
.sp-chip[aria-pressed="true"] { background: var(--p-ac); color: var(--p-bg); border-color: var(--p-ac); }
.sp-total { font-size: var(--fs-sm); }
.sp-total b { color: var(--p-ac); }
.sp-center .sl-menu { width: 100%; }

@media (max-width: 680px) {
  .tt-wall { grid-template-columns: repeat(2, 1fr); }
  .sl-split { grid-template-columns: 1fr; }
  .br-chairs, .br-prices { grid-template-columns: 1fr; }
  .br-prices div { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) { .sp-orb { animation: none; } }