:root{--workspace:#747d85;--phone:#222;--panel:#2f2f2f;--ink:#fff;--muted:#c7c7c3;--line:#777;--purple:#9742ff}
*{box-sizing:border-box}body{margin:0;background:var(--workspace);font-family:Arial,Helvetica,sans-serif;color:#fff}.back{text-decoration:none;font-size:13px}
.states{display:flex;flex-direction:column;gap:2px;overflow:visible;padding:0}
.state{position:relative;display:grid;grid-template-columns:24px 1fr;align-items:center;min-height:34px;color:#fff}
.state:not(:last-child):after{content:"";position:absolute;left:11px;top:28px;width:1px;height:10px;background:rgba(255,255,255,.34)}
.state-eye{width:24px;height:30px;border:0;background:transparent;color:#e6e6e3;padding:5px 4px;display:grid;place-items:center;cursor:pointer}
.state-eye svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.state-select{width:100%;height:30px;border:0;background:transparent;color:inherit;padding:0 4px;display:grid;grid-template-columns:22px 1fr;gap:7px;align-items:center;text-align:left;font-size:11px;font-weight:700;cursor:pointer}
.state-num{width:20px;height:20px;border:1px solid rgba(255,255,255,.58);display:grid;place-items:center;font-size:9px;font-weight:700}
.state-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.state.active .state-select{background:#fff;color:#111}
.state.active .state-num{background:#111;color:#fff;border-color:#111}
.state.complete .state-num:before{content:"✓";font-size:10px}
.state.complete .state-num{font-size:0}
.state.hidden-step{opacity:.35}
.state.hidden-step .state-label{text-decoration:line-through;text-decoration-thickness:1px}
.state.hidden-step .state-eye{opacity:.7}.phone{position:relative;width:414px;height:866px;padding:12px;background:#090a0b;border:2px solid #25272a;border-radius:48px;overflow:visible;box-shadow:0 26px 70px rgba(0,0,0,.45),inset 0 0 0 1px #000;transform-origin:center center}.device-screen{width:390px;height:842px;background:var(--phone);border-radius:36px;overflow:hidden;position:relative}.phone:before{content:"";position:absolute;z-index:8;top:5px;left:50%;transform:translateX(-50%);width:58px;height:5px;border-radius:999px;background:#292b2e}.phone:after{content:"";position:absolute;z-index:8;top:8px;right:70px;width:6px;height:6px;border-radius:50%;background:#1b1d20;box-shadow:0 0 0 1px #303236}.head{height:78px;padding:0 20px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;position:sticky;top:0;z-index:5;background:var(--phone)}.menu{justify-self:end;color:#aaa;font-size:24px;line-height:1}.screen{padding:14px 22px 32px}.screen h2{font-size:36px;line-height:1.02;letter-spacing:-.04em;margin:10px 0 28px}.lead{font-size:22px;line-height:1.35;color:var(--muted);margin:0 0 36px}.field{margin:0 0 18px}.field label{display:block;font-size:13px;color:#d2d2ce;margin-bottom:8px}.field input,.field select{width:100%;height:56px;border:1px solid #aaa;background:#333;color:#fff;padding:0 14px;font-size:16px;border-radius:9px}.action{width:100%;height:56px;border:1px solid #777;border-radius:999px;background:#151515;color:#fff;font-size:20px;margin-top:24px}.action.purple{border-color:var(--purple)}.hero{min-height:750px;background:#f4cf16 url("/barber-game/chop-it-up/sunburst-bkgrd.png") center center/cover no-repeat;margin:-14px -22px -32px;padding:60px 28px;display:flex;flex-direction:column;justify-content:flex-end}.hero .mark{font-family:Georgia,serif;font-weight:700;font-size:40px;margin:auto 0;text-align:center}.hero .action{background:#050505;border-color:#fff}.choices{display:grid;gap:14px;margin:26px 16px}.choices button{height:96px;border:2px solid #666;border-radius:16px;background:#2f2f2f;color:#fff;text-align:left;padding:0 32px;font-size:20px}.choices button.on{background:#d7d7d7;color:#222}.list{display:grid;gap:18px;margin-top:28px}.row{display:grid;grid-template-columns:24px 1fr auto auto 28px;gap:10px;align-items:center}.check{width:18px;height:18px;border:1px solid #fff;border-radius:50%;display:grid;place-items:center;font-size:11px}.pill{border:1px solid #bbb;border-radius:6px;padding:6px 8px;font-size:12px}.photo{width:198px;height:198px;border-radius:50%;background:#5a5a5a;margin:48px auto 24px;display:grid;place-items:center}.card{border:1px solid #888;padding:18px;margin-top:26px}.ready{display:grid;gap:16px}.reminder{background:#1b1b1b;padding:20px;min-height:110px}.reminder strong{display:block;font-size:16px}.reminder span{display:block;color:#aaa;font-size:13px;margin-top:8px}.caption{text-align:center;color:rgba(255,255,255,.76);font-size:12px;margin-top:12px}@media(max-width:800px){.states{flex-direction:row;gap:12px;overflow:auto;padding:0 0 10px;scrollbar-width:none}.state{flex:0 0 142px;grid-template-columns:22px 1fr}.state:not(:last-child):after{display:none}.state-select{height:32px}.phone{width:414px;height:866px;border-radius:48px}}
.profile-preview{padding:4px 0 18px}
.profile-top{display:grid;grid-template-columns:92px 1fr;gap:16px;align-items:center;margin-bottom:28px}
.profile-photo{width:92px;height:92px;border-radius:50%;object-fit:cover;background:#555}
.profile-photo.fallback{display:grid;place-items:center;font-size:28px;font-weight:700}
.profile-top h2{font-size:32px;margin:5px 0 6px}
.profile-kicker{font-size:12px;color:#aaa}
.profile-meta{font-size:12px;color:#bbb}
.profile-section{border-top:1px solid #555;padding:18px 0}
.profile-section p{margin:7px 0 0;color:#bbb;font-size:13px;line-height:1.4}
.profile-label{display:block;color:#999;font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.profile-service{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid #3d3d3d;font-size:13px}
.photo{background-size:cover;background-position:center;cursor:pointer}

.hero .mark{display:grid;place-items:center}
.hero .mark img{width:240px;max-width:88%;height:auto;object-fit:contain}

.states::-webkit-scrollbar,.phone::-webkit-scrollbar{display:none;width:0;height:0}

.action,.choices button,.state-select,.state-eye,.text-action{cursor:pointer;touch-action:manipulation}
.text-action{display:block;width:100%;border:0;background:transparent;color:#eee;text-decoration:underline;text-underline-offset:3px;margin-top:18px;font-size:14px}

html,body{overflow:hidden}.screen{min-height:764px;overflow:hidden}

.phone{position:absolute;left:50%;top:50%}

.field-message{min-height:17px;margin-top:6px;font-size:11px;color:#a9a9a5}
.field.invalid input{border-color:#e66262}
.field.invalid .field-message{color:#ff7777}
.gated-next{opacity:.38;transition:opacity .16s ease,background .16s ease,border-color .16s ease}
.gated-next.ready{opacity:1;background:#151515;border-color:#8f8f8a}
.gated-next:disabled{cursor:default}

.action{display:flex;align-items:center;justify-content:center;line-height:1;padding:0 20px}

.shop-list{display:grid;gap:9px;margin:18px 0 10px}
.shop-choice{height:54px;border:1.5px solid #686868;border-radius:12px;background:#303030;color:#fff;display:flex;align-items:center;gap:14px;padding:0 18px;font-size:16px;text-align:left;cursor:pointer}
.shop-choice .pin{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:18px;line-height:1}
.shop-choice.on{background:#d8d8d8;color:#222;border-color:#d8d8d8}
.shop-choice.on .pin{color:#111}

.service-editor{display:grid;gap:14px;margin-top:18px}
.service-card{border:1px solid #565656;background:#2a2a2a;border-radius:14px;padding:14px}
.service-card-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:14px}
.service-card-head strong{display:block;font-size:15px}
.service-card-head span{display:block;font-size:10px;color:#a9a9a5;margin-top:4px}
.service-duplicate{border:0;background:transparent;color:#ddd;text-decoration:underline;text-underline-offset:3px;font-size:11px;cursor:pointer;padding:2px 0}
.service-grid{display:grid;grid-template-columns:1.6fr .8fr .8fr;gap:8px}
.service-grid label{font-size:10px;color:#bdbdb9}
.service-grid input,.service-grid select{width:100%;height:38px;margin-top:6px;border:1px solid #777;border-radius:8px;background:#363636;color:#fff;padding:0 9px;font:inherit;font-size:12px}
.price-field{position:relative}
.price-field span{position:absolute;left:9px;top:16px;color:#aaa;font-size:12px}
.price-field input{padding-left:20px}
.service-add{margin-top:12px;border:0;background:transparent;color:#eee;text-decoration:underline;text-underline-offset:3px;font-size:12px;padding:4px 0;cursor:pointer}

.hours-editor{display:grid;gap:8px;margin-top:18px}
.hours-row{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid #393939;opacity:.48}
.hours-row.active{opacity:1}
.day-toggle{width:24px;height:24px;border:1px solid #777;border-radius:50%;background:transparent;color:#fff;padding:0;display:grid;place-items:center;cursor:pointer}
.hours-row.active .day-toggle{border-color:#fff}
.day-toggle span{font-size:12px;line-height:1}
.day-name{font-size:14px;font-weight:700}
.time-pair{display:grid;grid-template-columns:74px auto 74px;gap:6px;align-items:center}
.time-pair select{height:34px;border:1px solid #777;border-radius:7px;background:#303030;color:#fff;padding:0 7px;font-size:11px}
.time-pair select:disabled{opacity:.35}
.time-pair span{font-size:10px;color:#aaa}
.hours-copy{margin:14px 0 0;border:0;background:transparent;color:#eee;text-decoration:underline;text-underline-offset:3px;font-size:11px;padding:2px 0;cursor:pointer}

.service-card-actions{display:flex;gap:10px;align-items:center}
.service-delete{border:0;background:transparent;color:#f18b8b;text-decoration:underline;text-underline-offset:3px;font-size:11px;cursor:pointer;padding:2px 0}
.service-delete:disabled{opacity:.28;cursor:default;text-decoration:none}

.onboarding-titlebar{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.onboarding-titlebar .back{margin:0!important;font-size:18px;line-height:1;text-decoration:none;color:#38444c}
.flow-sidebar .onboarding-titlebar h1{font-size:26px;line-height:1;letter-spacing:-.035em;margin:0;white-space:nowrap}
.flow-sidebar .flow-subtitle{font-size:11px;line-height:1.25;margin:0 0 12px;max-width:260px}
.flow-sidebar .states{margin-top:0}
.state{min-height:30px}
.state:not(:last-child):after{top:25px;height:7px}
.state-eye{height:26px;padding:4px}
.state-select{height:26px;font-size:10px;line-height:1.05;grid-template-columns:20px 1fr;gap:6px}
.state-num{width:18px;height:18px;font-size:8px}
@media(max-width:800px){
  .flow-sidebar .onboarding-titlebar h1{font-size:24px}
  .onboarding-titlebar{margin-bottom:4px}
}

.hero-video{position:relative;overflow:hidden;background:#111!important;background-image:none!important;margin:-14px -22px -32px;padding:0 28px 36px;min-height:750px;display:flex;flex-direction:column;justify-content:flex-end}
.hero-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
.hero-video-shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.10) 0%,rgba(0,0,0,.10) 56%,rgba(0,0,0,.42) 100%);pointer-events:none}
.hero-actions{position:relative;z-index:2;display:grid;gap:12px;width:100%;max-width:100%;margin:0 auto;justify-items:center}
.hero-video .action{margin-top:0;background:rgba(8,8,8,.34);border-color:rgba(255,255,255,.32);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 24px rgba(0,0,0,.12)}
.hero-video .action:first-child{margin-top:0}
.hero-video .secondary-action{margin-top:2px;width:auto;height:auto;padding:4px 8px;border:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0;font-size:14px;text-decoration:underline;text-underline-offset:4px;color:rgba(255,255,255,.82)}

.hero-brand{position:absolute;z-index:2;top:28%;left:28px;right:28px;width:calc(100% - 56px);height:auto;max-height:120px;object-fit:contain;pointer-events:none;user-select:none}

.hero-video~*{}
.device-screen:has(.hero-video) .head{background:rgba(20,20,20,.38);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.05)}
.device-screen:has(.hero-video) .menu{color:rgba(255,255,255,.72)}
.hero-version{text-align:center;font-size:8px;line-height:1;letter-spacing:.14em;color:rgba(255,255,255,.42);margin-top:2px;text-transform:uppercase}

.sound-toggle{display:none}
.device-screen:has(.hero-video) .sound-toggle{display:grid;place-items:center;justify-self:start;width:34px;height:34px;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(8,8,8,.18);color:rgba(255,255,255,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font:inherit;font-size:11px;line-height:1;cursor:pointer}
.sound-toggle .sound-off{display:none}
.sound-toggle.muted .sound-on{display:none}
.sound-toggle.muted .sound-off{display:inline}

.header-brand{display:none}
.device-screen:has(.hero-video) .head{grid-template-columns:1fr auto;padding:0 18px}
.device-screen:has(.hero-video) .header-brand{display:block;width:145px;max-width:56%;height:auto}
.device-screen:has(.hero-video) .header-actions{display:flex;align-items:center;gap:12px}
.device-screen:has(.hero-video) .sound-toggle{justify-self:auto}
.device-screen:has(.hero-video) .menu{justify-self:auto}