/* "Who it's for" on Home: a shop front per business, the owner's dashboard on the counter monitor.
   Drawn with sample numbers; the real dashboard screen replaces it at go-live. Built from comp-who3.html (approved 4 Oct 2026). */
.who .w-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.who .w-card { border: 1px solid var(--line-2); border-radius: 16px; background: var(--bg-2); overflow: hidden; display: flex; flex-direction: column; }
.who .w-body { padding: 26px 30px 30px; display: grid; gap: 12px; }
.who .w-body .k { font: 600 12px var(--rf-font); letter-spacing: .18em; color: var(--accent); }
.who .w-body h3 { font-size: 24px; line-height: 1.2; margin: 0; color: var(--head); }
.who .w-body p { margin: 0; color: var(--lead); font-size: 15.5px; }
.who .w-body ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 9px; }
.who .w-body li { display: flex; gap: 12px; color: var(--text-2); font-size: 15px; }
.who .w-body li::before { content: ''; width: 14px; height: 2px; background: var(--brand); margin-top: 11px; flex: none; }
.who .w-body .go { margin-top: 8px; color: var(--accent); font-weight: 500; font-size: 15.5px; }
.who .street { position: relative; height: 500px; background: #0C1C18; border-bottom: 1px solid var(--line); overflow: hidden; }
.who .shop { position: absolute; left: 50%; top: 0; width: 556px; height: 500px; margin-left: -278px; }
.who .facade { position: absolute; left: 0; right: 0; top: 0; bottom: 46px; background: #2E3B37; box-shadow: inset 0 -1px 0 rgba(0,0,0,.4); }
.who .facade::before, .who .facade::after { content: ''; position: absolute; top: 0; bottom: 0; width: 14px; background: #26322F; }
.who .facade::before { left: 0; }
.who .facade::after { right: 0; }
.who .sb { position: absolute; left: 14px; right: 14px; top: 16px; height: 76px; border-radius: 3px; display: flex; align-items: center; justify-content: center; gap: 18px;
  box-shadow: 0 10px 16px -10px rgba(0,0,0,.7), inset 0 0 0 4px rgba(255,255,255,.14), inset 0 0 0 5px rgba(0,0,0,.18); }
.who .sb b { display: block; font: 700 31px/1 var(--rf-font); letter-spacing: .09em; }
.who .sb small { display: block; font: 500 10.5px var(--mono); letter-spacing: .16em; margin-top: 7px; opacity: .85; }
.who .sb i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: rgba(0,0,0,.35); }
.who .sb i:nth-child(1) { left: 9px; top: 9px; }
.who .sb i:nth-child(2) { right: 9px; top: 9px; }
.who .sb i:nth-child(3) { left: 9px; bottom: 9px; }
.who .sb i:nth-child(4) { right: 9px; bottom: 9px; }
.who .sb .ico { flex: none; }
.who .awn { position: absolute; left: 8px; right: 8px; top: 102px; height: 24px; background: repeating-linear-gradient(90deg, var(--a1) 0 36px, var(--a2) 36px 72px); z-index: 4; box-shadow: 0 6px 8px -4px rgba(0,0,0,.5); }
.who .awn::after { content: ''; position: absolute; left: 0; right: 0; bottom: -9px; height: 9px;
  background: radial-gradient(circle at 18px 0, var(--a1) 17px, transparent 18px) 0 0 / 72px 9px, radial-gradient(circle at 54px 0, var(--a2) 17px, transparent 18px) 0 0 / 72px 9px; }
.who .front { position: absolute; left: 22px; right: 22px; top: 126px; bottom: 46px; background: #3B5A51; overflow: hidden; }
.who .front .floor { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: #2A3F39; }
.who .front .floor::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #22342F; }
.who .frame { position: absolute; inset: 0; border: 8px solid #A3ACA8; border-bottom-width: 10px; z-index: 6; pointer-events: none; }
.who .mull { position: absolute; top: 0; bottom: 0; width: 8px; background: #A3ACA8; z-index: 6; }
.who .transom { position: absolute; left: 0; right: 0; top: 34px; height: 6px; background: #A3ACA8; z-index: 6; }
.who .glare { position: absolute; top: -30px; width: 22px; height: 140%; background: rgba(255,255,255,.07); transform: rotate(28deg); z-index: 5; }
.who .glare.thin { width: 7px; }
.who .counter { position: absolute; left: 34px; width: 318px; bottom: 10px; height: 74px; z-index: 2; }
.who .counter .top { height: 10px; background: #A57A4F; border-radius: 2px; }
.who .counter .panel { height: 64px; background: #6E4C31; box-shadow: inset 0 -6px 0 rgba(0,0,0,.18); }
.who .counter .panel::before { content: ''; display: block; margin: 12px 18px 0; height: 36px; border: 1px solid rgba(255,255,255,.08); border-radius: 3px; }
.who .mon { position: absolute; left: 50px; bottom: 84px; width: 286px; z-index: 3; }
.who .mon .scr { border: 9px solid #0E1412; border-bottom-width: 12px; border-radius: 9px; background: #F6F8F7; overflow: hidden; box-shadow: 0 10px 18px -10px rgba(0,0,0,.7); }
.who .mon .neck { width: 22px; height: 20px; margin: 0 auto; background: #151C19; }
.who .mon .base { width: 90px; height: 6px; margin: 0 auto; border-radius: 3px; background: #151C19; }
.who .kbd { position: absolute; left: 128px; bottom: 82px; width: 128px; height: 9px; background: #1A2220; border-radius: 2px; transform: perspective(60px) rotateX(30deg); z-index: 4; }
.who .mug { position: absolute; left: 290px; bottom: 84px; width: 16px; height: 18px; background: #E9EEF2; border-radius: 2px 2px 4px 4px; z-index: 4; }
.who .mug::after { content: ''; position: absolute; right: -6px; top: 4px; width: 6px; height: 8px; border: 2px solid #E9EEF2; border-left: 0; border-radius: 0 5px 5px 0; }
.who .dsh { padding: 9px 10px 10px; font-family: var(--rf-font); color: #1C2A26; }
.who .dsh .hd { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.who .dsh .hd b { font-size: 12.5px; font-weight: 600; }
.who .dsh .hd span { font: 400 8.5px var(--mono); color: #6A7772; }
.who .dsh .tl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 7px; }
.who .dsh .tl div { background: #fff; border: 1px solid #DCE3E0; border-top: 3px solid var(--c); border-radius: 5px; padding: 5px 6px 6px; }
.who .dsh .tl span { display: block; font: 600 7px var(--mono); color: #6A7772; letter-spacing: .02em; white-space: nowrap; }
.who .dsh .tl b { display: block; font-size: 16px; font-weight: 600; line-height: 1.15; margin-top: 2px; white-space: nowrap; }
.who .dsh .ls { background: #fff; border: 1px solid #DCE3E0; border-radius: 5px; }
.who .dsh .ls div { display: grid; grid-template-columns: 58px 1fr auto; gap: 6px; padding: 5px 7px; border-top: 1px solid #EEF2F0; font-size: 9px; align-items: center; white-space: nowrap; }
.who .dsh .ls div:first-child { border-top: 0; font-weight: 600; font-size: 9.5px; grid-template-columns: 1fr; }
.who .dsh .ls b { font: 600 8.5px var(--mono); }
.who .dsh .ls em { font-style: normal; font-size: 8px; padding: 1px 5px; border-radius: 4px; }
.who .amber { color: #8A5A00; background: #FFF3D6; }
.who .red { color: #B23B2E; background: #FDE6E2; }
.who .door { position: absolute; top: 40px; bottom: 0; right: 0; width: 150px; z-index: 6; pointer-events: none; }
.who .door .bar { position: absolute; left: 14px; top: 46%; width: 6px; height: 74px; border-radius: 3px; background: #D5DBD8; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.who .door .tag { position: absolute; left: 40px; top: 30px; transform: rotate(-4deg); background: #F4F1EA; color: #1E5A3F; font: 700 11px var(--rf-font); letter-spacing: .08em; padding: 6px 9px; border-radius: 3px; box-shadow: 0 6px 8px -6px rgba(0,0,0,.6); white-space: nowrap; }
.who .door .tag::before, .who .door .tag::after { content: ''; position: absolute; top: -22px; width: 1px; height: 23px; background: #CCD3D0; }
.who .door .tag::before { left: 14px; transform: rotate(18deg); }
.who .door .tag::after { right: 14px; transform: rotate(-18deg); }
.who .door .hrs { position: absolute; left: 34px; top: 92px; font: 500 8.5px/1.5 var(--mono); color: rgba(244,241,234,.75); letter-spacing: .04em; }
.who .wallkb { position: absolute; right: 24px; top: 176px; width: 96px; height: 84px; background-color: #CDD3CF; background-image: radial-gradient(circle, rgba(38,48,44,.42) 1.2px, transparent 1.6px); background-size: 10px 10px;
  border: 5px solid #8E9894; border-radius: 3px; z-index: 1; }
.who .wallkb span { position: absolute; top: 18px; width: 14px; height: 22px; border-radius: 3px 3px 6px 6px; }
.who .wallkb span::before { content: ''; position: absolute; left: 50%; top: -9px; width: 2px; height: 9px; margin-left: -1px; background: #6E7874; }
.who .clock { position: absolute; left: 44px; top: 56px; width: 38px; height: 38px; border-radius: 50%; background: #F4F1EA; border: 3px solid #1A2220; z-index: 1; }
.who .clock::before { content: ''; position: absolute; left: 50%; top: 50%; width: 2px; height: 10px; margin-left: -1px; background: #1A2220; transform-origin: 50% 100%; transform: translateY(-100%) rotate(254deg); }
.who .clock::after { content: ''; position: absolute; left: 50%; top: 50%; width: 1.5px; height: 14px; margin-left: -.75px; background: #B23B2E; transform-origin: 50% 100%; transform: translateY(-100%) rotate(264deg); }
.who .cal { position: absolute; left: 44px; top: 50px; width: 40px; height: 46px; background: #F4F1EA; border-radius: 2px; z-index: 1; text-align: center; font: 700 9px/1 var(--rf-font); color: #B23B2E; padding-top: 6px; box-sizing: border-box; }
.who .cal b { display: block; font-size: 17px; color: #1A2220; margin-top: 4px; }
.who .car { position: absolute; right: -40px; bottom: 16px; width: 190px; z-index: 1; }
.who .kaki { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; background-color: #9FA7A3;
  background-image: linear-gradient(90deg, rgba(0,0,0,.14) 1px, transparent 1px), linear-gradient(rgba(0,0,0,.14) 1px, transparent 1px); background-size: 46px 23px; }
.who .kaki::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: #7E8783; }

/* Phone: one shop per row, the drawing scaled to fit (6 Oct 2026 phone check) */
@media (max-width: 760px) {
  .who .w-grid { grid-template-columns: 1fr; gap: 22px; }
  .who .street { height: 330px; }
  .who .shop { transform: scale(.64); transform-origin: top center; }
  .who .w-body { padding: 22px 22px 24px; }
}
.who .w-from { font: 600 14px var(--mono); color: var(--head); background: var(--brand-tint); border: 1px solid var(--brand-edge); border-radius: 8px; padding: 6px 10px; justify-self: start; margin-top: 6px; }