/* The made-up sites on the Bot's screen (home-sites.js). Each is drawn at 800 x 500 and scaled. */
.pc-site{font:15px/1.45 "Manrope",system-ui,sans-serif;color:#2b2420;background:#fff}
.home .pc-site *{box-sizing:border-box;margin:0;padding:0}
.home .pc-site h1,.home .pc-site h2,.home .pc-site h3{font-family:inherit;line-height:1.2;letter-spacing:-.01em;font-size:28px;color:inherit}
.home .pc-site h2{font-size:19px}.home .pc-site h3{font-size:15px}
.home .pc-site p{color:inherit}


/* shared: a field the Bot types in, a button it presses */
.home .pc-site .s-fl{display:block;margin-top:12px}
.home .pc-site .s-fl>span{display:block;font-size:12px;color:#7a6c60;margin-bottom:5px}
.home .pc-site .s-in{min-height:40px;display:flex;align-items:center;padding:0 12px;border:1px solid #d8cbbb;border-radius:10px;background:#fff;font-size:14px;transition:border-color .2s,box-shadow .2s;overflow:hidden;white-space:nowrap}
.home .pc-site .s-in b{font-weight:500}
.home .pc-site .s-in.sm{min-height:30px;font:12.5px ui-monospace,Menlo,monospace}
.home .pc-site .s-in.big{align-items:flex-start;padding:12px;min-height:120px;white-space:normal;font-size:18px;line-height:1.45;position:relative;border:0}
.home .pc-site .s-in.big small{position:absolute;left:12px;top:12px;color:#9a9a9a;pointer-events:none}
.home .pc-site .s-in.big b:not(:empty)+small{display:none}
.home .pc-site .tall .s-in{min-height:96px;align-items:flex-start;padding-top:10px;white-space:normal;line-height:1.45}
.home .pc-site .pc-focus,.home .pc-site .s-in.pc-focus{border-color:#2b2420;box-shadow:0 0 0 3px rgba(255,212,59,.65)}
.home .pc-site .s-btn{margin-top:16px;display:grid;place-items:center;height:44px;border-radius:12px;background:#2b2420;color:#fff;font-weight:700;font-size:15px;transition:background .25s,transform .15s}
.home .pc-site .s-btn.pc-done{background:#2f8f5b}

/* Studio Lumen, the salon */
.home .pc-site .s-lumen{height:100%;background:#faf7f2;font-family:Georgia,serif}
.home .pc-site .s-lumen header{display:flex;justify-content:space-between;align-items:center;padding:20px 40px;border-bottom:1px solid #e7ded2}
.home .pc-site .s-lumen header b{font-size:22px;font-weight:600}
.home .pc-site .s-lumen nav{display:flex;gap:24px;font:14px system-ui;color:#7a6c60}.home .pc-site .s-lumen nav .on{color:#2b2420}
.home .pc-site .s-lumen main{display:grid;grid-template-columns:1.1fr 1fr;gap:36px;padding:30px 40px}
.home .pc-site .s-lumen h1{font-size:34px;font-weight:500;margin-bottom:6px}
.home .pc-site .s-lumen p{color:#7a6c60;font:14px system-ui;margin-bottom:18px}
.home .pc-site .s-lumen .who{display:flex;gap:12px;align-items:center;font:14px system-ui;margin-bottom:18px}
.home .pc-site .s-lumen .who i{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#d9b99b,#a57c5a)}
.home .pc-site .s-lumen .who small{display:block;color:#7a6c60;font-size:12px}
.home .pc-site .s-lumen .days{display:flex;gap:8px;font:13px system-ui;margin-bottom:14px}
.home .pc-site .s-lumen .days span{border:1px solid #e1d6c8;border-radius:10px;padding:7px 11px;text-align:center;background:#fff}
.home .pc-site .s-lumen .days b{display:block;font-size:17px}
.home .pc-site .s-lumen .days .on{background:#2b2420;color:#fff;border-color:#2b2420}
.home .pc-site .s-lumen .slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;font:13px system-ui}
.home .pc-site .s-lumen .slots span{border:1px solid #e1d6c8;border-radius:9px;padding:8px;text-align:center;background:#fff;transition:.2s}
.home .pc-site .s-lumen .slots .x{color:#c9bcae;text-decoration:line-through}
.home .pc-site .s-lumen .slots .pc-hit{border:2px solid #b5835a;background:#fff4ea;font-weight:700}
.home .pc-site .s-lumen aside{background:#fff;border:1px solid #e7ded2;border-radius:16px;padding:22px;font-family:system-ui}
.home .pc-site .s-lumen aside h2{font:500 21px Georgia,serif;margin-bottom:10px}
.home .pc-site .s-lumen .row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #f0e9df;font-size:13.5px}
.home .pc-site .s-lumen .row em{font-style:normal}
.home .pc-site .s-lumen .s-btn{background:#b5835a}.home .pc-site .s-lumen .s-btn.pc-done{background:#2f8f5b}

/* the calendar */
.home .pc-site .s-cal{display:grid;grid-template-columns:1fr 250px;grid-template-rows:auto 1fr;height:100%;background:#fff}
.home .pc-site .s-cal header{grid-column:1/-1;display:flex;gap:18px;align-items:center;padding:14px 22px;border-bottom:1px solid #eee}
.home .pc-site .s-cal header b{font-size:18px}.home .pc-site .s-cal header span{color:#666}.home .pc-site .s-cal header i{margin-left:auto;font-style:normal;font-size:13px;padding:5px 12px;border:1px solid #ddd;border-radius:8px}
.home .pc-site .s-cal .grid{display:grid;grid-template-columns:52px repeat(5,1fr);grid-auto-rows:72px;font-size:12px;color:#777}
.home .pc-site .s-cal .col{border-right:1px solid #f1f1f1;border-bottom:1px solid #f1f1f1;padding:4px;position:relative}
.home .pc-site .s-cal .col.h{height:34px;font-weight:600;color:#333;text-align:center;padding-top:8px}
.home .pc-site .s-cal .ev{display:block;font-style:normal;padding:6px 8px;border-radius:7px;font-weight:600;font-size:12px;color:#1f2a44}
.home .pc-site .s-cal .ev.a{background:#dbe7ff}.home .pc-site .s-cal .ev.b{background:#dff3e4}.home .pc-site .s-cal .ev.y{background:#fff1b8;outline:2px dashed #e0b400}
.home .pc-site .s-cal aside{border-left:1px solid #eee;padding:18px}
.home .pc-site .s-cal aside h2{font-size:18px}
.home .pc-site .s-cal .s-btn{background:#2d5bd7}.home .pc-site .s-cal .s-btn.pc-done{background:#2f8f5b}

/* chirp, a social network */
.home .pc-site .s-chirp{display:grid;grid-template-columns:180px 1fr;height:100%;background:#fff}
.home .pc-site .s-chirp aside{display:flex;flex-direction:column;gap:6px;padding:20px 18px;border-right:1px solid #eee;font-size:15px;color:#555}
.home .pc-site .s-chirp aside b{font-size:24px;color:#5b4ce0;margin-bottom:10px;letter-spacing:-.02em}
.home .pc-site .s-chirp aside .on{color:#111;font-weight:700}
.home .pc-site .s-chirp aside em{margin-top:12px;font-style:normal;text-align:center;padding:10px;border-radius:999px;background:#5b4ce0;color:#fff;font-weight:700}
.home .pc-site .s-chirp main{overflow:hidden}
.home .pc-site .s-chirp .q{margin:14px 18px 6px;padding:10px 16px;border-radius:999px;background:#f2f2f6;font-size:15px}
.home .pc-site .s-chirp .tabs{display:flex;gap:26px;padding:6px 22px 0;border-bottom:1px solid #eee;font-size:14px;color:#777}
.home .pc-site .s-chirp .tabs span{padding-bottom:9px}.home .pc-site .s-chirp .tabs .on{color:#111;font-weight:700;border-bottom:3px solid #5b4ce0}
.home .pc-site .s-chirp article{display:flex;gap:12px;padding:12px 20px;border-bottom:1px solid #f0f0f0;font-size:14px}
.home .pc-site .s-chirp article>i{flex:none;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#c8c2ff,#8f84f0)}
.home .pc-site .s-chirp article:nth-of-type(2n)>i{background:linear-gradient(135deg,#ffd0b5,#f08f6a)}
.home .pc-site .s-chirp article p{margin-bottom:3px}.home .pc-site .s-chirp article p span{color:#888}
.home .pc-site .s-chirp .m{display:flex;gap:22px;color:#888;font-size:12.5px}
.home .pc-site .s-chirp .compose{display:flex;gap:12px;padding:20px 20px 0}
.home .pc-site .s-chirp .compose>i{flex:none;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#ffe27a,#f2b700)}
.home .pc-site .s-chirp .compose .s-in{flex:1}
.home .pc-site .s-chirp .cbar{display:flex;justify-content:space-between;align-items:center;margin:0 20px 10px 76px;padding-top:10px;border-top:1px solid #eee;color:#5b4ce0;font-size:13px;font-weight:600}
.home .pc-site .s-chirp .cbar .s-btn{margin:0;height:38px;padding:0 22px;border-radius:999px;background:#5b4ce0}
.home .pc-site .s-chirp .cbar .s-btn.pc-done{background:#2f8f5b}
.home .pc-site .s-chirp article.dim{opacity:.5}

/* Rosie's Buns: the bakery's new site */
.home .pc-site .s-rosie{height:100%;background:#fff8ef;color:#3a1d0c;font-family:"Manrope",system-ui}
.home .pc-site .s-rosie header{display:flex;justify-content:space-between;align-items:center;padding:18px 40px}
.home .pc-site .s-rosie header b{font:700 22px Georgia,serif}.home .pc-site .s-rosie header em{color:#d4682a}
.home .pc-site .s-rosie nav{display:flex;align-items:center;gap:22px;font-size:14px;color:#8a5a3c}
.home .pc-site .s-rosie nav i{font-style:normal;padding:9px 16px;border-radius:999px;background:#3a1d0c;color:#fff8ef;font-weight:700}
.home .pc-site .s-rosie .hero{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:20px;padding:18px 40px 26px}
.home .pc-site .s-rosie .k{font-size:12px;font-weight:700;color:#d4682a;margin-bottom:8px}
.home .pc-site .s-rosie h1{font:600 38px/1.08 Georgia,serif;margin-bottom:12px;letter-spacing:-.02em}
.home .pc-site .s-rosie .hero p{color:#7d5a43;font-size:14.5px;max-width:36ch}
.home .pc-site .s-rosie .cta{display:flex;gap:10px;margin-top:16px;font-size:13.5px;font-weight:700}
.home .pc-site .s-rosie .cta .a{padding:10px 18px;border-radius:999px;background:#d4682a;color:#fff}
.home .pc-site .s-rosie .cta .b{padding:10px 18px;border-radius:999px;border:1.5px solid #e8cdb5}
.home .pc-site .s-rosie .buns{position:relative;height:210px}
.home .pc-site .s-rosie .buns span{position:absolute;filter:drop-shadow(0 14px 18px rgba(122,59,22,.35))}
.home .pc-site .s-rosie .b1{left:30px;top:16px}
.home .pc-site .s-rosie .b2{left:190px;top:-6px}
.home .pc-site .s-rosie .b3{left:186px;top:118px}
.home .pc-site .s-rosie .menu{margin:0 40px;padding:18px 0;border-top:1.5px solid #f0dcc8}
.home .pc-site .s-rosie .menu h2{font:600 20px Georgia,serif;margin-bottom:10px}
.home .pc-site .s-rosie .items{display:grid;grid-template-columns:1fr 1fr;gap:10px 30px}
.home .pc-site .s-rosie .items div{display:grid;grid-template-columns:1fr auto;font-size:14px}
.home .pc-site .s-rosie .items span{grid-row:2;color:#9a7356;font-size:12.5px}
.home .pc-site .s-rosie .items em{font-style:normal;font-weight:700;grid-row:1/3;grid-column:2;align-self:center}
.home .pc-site .s-rosie .info{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:24px;margin:16px 40px 0;font-size:13px;color:#7d5a43}
.home .pc-site .s-rosie .info h3{font-size:14px;color:#3a1d0c;margin-bottom:4px}
.home .pc-site .s-rosie .map{height:84px;border-radius:12px;background:linear-gradient(90deg,transparent 48%,#fff 48% 52%,transparent 52%),linear-gradient(0deg,transparent 40%,#fff 40% 46%,transparent 46%),#f1e3d2;position:relative}
.home .pc-site .s-rosie .map i{position:absolute;left:46%;top:24%;width:16px;height:16px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#d4682a}

/* a hosting panel, a registrar, a mail host: plain admin pages */
.home .pc-site .s-host{height:100%;background:#f6f7f9;color:#1d2433}
.home .pc-site .s-host header{display:flex;gap:24px;align-items:center;padding:14px 28px;background:#fff;border-bottom:1px solid #e5e8ee;font-size:14px;color:#5b6577}
.home .pc-site .s-host header b{color:#1d2433;font-size:16px;margin-right:12px}
.home .pc-site .s-host main{padding:24px 28px}
.home .pc-site .s-host h1{font-size:26px}
.home .pc-site .s-host .sub{color:#6b7385;font-size:13.5px;margin:4px 0 16px}
.home .pc-site .s-host .ok{color:#1f8a4c;font-weight:600;margin-right:10px}
.home .pc-site .s-host .panel{display:grid;grid-template-columns:1fr 1fr;gap:20px;background:#fff;border:1px solid #e5e8ee;border-radius:14px;padding:20px}
.home .pc-site .s-host .prev{border-radius:10px;background:#fff8ef;padding:16px;border:1px solid #f0dcc8}
.home .pc-site .s-host .mini b{font:700 18px Georgia,serif;color:#3a1d0c;display:block;margin-bottom:10px}
.home .pc-site .s-host .mini i{display:block;height:9px;border-radius:5px;background:#f0dcc8;margin-bottom:8px}.home .pc-site .s-host .mini i:nth-child(3){width:70%}.home .pc-site .s-host .mini i:nth-child(4){width:50%;background:#d4682a}
.home .pc-site .s-host .form .ok{display:block;margin:8px 0 0;font-size:13px}
.home .pc-site .s-host .form.wide{grid-column:1/-1;max-width:420px}
.home .pc-site .s-host .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.home .pc-site .s-host .plans div{background:#fff;border:1.5px solid #e5e8ee;border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:3px;transition:.2s}
.home .pc-site .s-host .plans span{color:#6b7385;font-size:13px}.home .pc-site .s-host .plans em{font-style:normal;font-weight:700;font-size:18px}.home .pc-site .s-host .plans small{font-weight:400;color:#6b7385}
.home .pc-site .s-host .plans .on,.home .pc-site .s-host .plans .pc-hit{border-color:#2d5bd7;box-shadow:0 0 0 3px #dbe5ff}
.home .pc-site .s-host .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:560px}
.home .pc-site .s-host .s-btn{max-width:200px;background:#2d5bd7}.home .pc-site .s-host .s-btn.pc-done{background:#1f8a4c}
.home .pc-site .s-host table{width:100%;border-collapse:collapse;background:#fff;border:1px solid #e5e8ee;border-radius:12px;overflow:hidden;font-size:13px}
.home .pc-site .s-host th{text-align:left;color:#6b7385;font-weight:600;padding:9px 12px;border-bottom:1px solid #e5e8ee}
.home .pc-site .s-host td{padding:8px 12px;border-bottom:1px solid #f0f2f5;font-family:ui-monospace,Menlo,monospace}
.home .pc-site .s-host tr.new{background:#fffbe6}

/* a bakery's own site, at its contact form (the hundred) */
.home .pc-site .s-lead{height:100%;background:var(--c2);color:var(--c1);font-family:"Manrope",system-ui}
.home .pc-site .s-lead header{display:flex;justify-content:space-between;align-items:center;padding:18px 36px}
.home .pc-site .s-lead header b{font:700 21px Georgia,serif}
.home .pc-site .s-lead nav{display:flex;gap:20px;font-size:13.5px;opacity:.8}.home .pc-site .s-lead nav .on{font-weight:700;opacity:1;border-bottom:2px solid currentColor}
.home .pc-site .s-lead main{display:grid;grid-template-columns:1fr 1.15fr;gap:30px;padding:10px 36px}
.home .pc-site .s-lead .k{font-size:12px;font-weight:700;opacity:.7;margin-bottom:6px}
.home .pc-site .s-lead h1{font:600 36px/1.05 Georgia,serif;margin-bottom:10px}
.home .pc-site .s-lead .intro p{font-size:14px;opacity:.85;max-width:30ch}
.home .pc-site .s-lead .pic{position:relative;height:150px;margin-top:20px}
.home .pc-site .s-lead .pic span{position:absolute;filter:drop-shadow(0 12px 16px rgba(0,0,0,.18))}
.home .pc-site .s-lead .pic span:first-child{left:0;top:6px}.home .pc-site .s-lead .pic span:last-child{left:116px;top:62px}
.home .pc-site .s-lead form{background:#fff;color:#2b2420;border-radius:18px;padding:20px 22px 22px;box-shadow:0 20px 40px -24px rgba(0,0,0,.35)}
.home .pc-site .s-lead .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.home .pc-site .s-lead .s-fl:first-child,.home .pc-site .s-lead .two .s-fl{margin-top:0}
.home .pc-site .s-lead .s-btn{background:var(--c1)}.home .pc-site .s-lead .s-btn.pc-done{background:#2f8f5b}
.home .pc-site .s-lead.v1 main{grid-template-columns:1.15fr 1fr}.home .pc-site .s-lead.v1 form{order:-1}
.home .pc-site .s-lead.v2{background:#fff}.home .pc-site .s-lead.v2 header{background:var(--c1);color:#fff}.home .pc-site .s-lead.v2 form{border:1.5px solid var(--c2);box-shadow:none}

/* Rosie's on a phone */
.home .pc-site .s-rosie.s-phone header{padding:16px 20px}
.home .pc-site .s-rosie.s-phone header i{font-style:normal;font-size:20px}
.home .pc-site .s-rosie.s-phone .hero{display:block;padding:4px 20px 18px}
.home .pc-site .s-rosie.s-phone .buns{height:170px;margin-bottom:8px}
.home .pc-site .s-rosie.s-phone .buns span{position:absolute;filter:drop-shadow(0 12px 16px rgba(122,59,22,.35))}
.home .pc-site .s-rosie.s-phone .b1{left:40px;top:6px}.home .pc-site .s-rosie.s-phone .b2{left:180px;top:60px}
.home .pc-site .s-rosie.s-phone h1{font:600 30px/1.08 Georgia,serif;margin-bottom:12px}
.home .pc-site .s-rosie.s-phone .menu{margin:0 20px}
.home .pc-site .s-rosie.s-phone .items{grid-template-columns:1fr}
.home .pc-site .s-rosie.s-phone .items em{grid-row:1}

/* a map search */
.home .pc-site .s-maps{display:grid;grid-template-columns:270px 1fr;height:100%;background:#fff}
.home .pc-site .s-maps aside{border-right:1px solid #e6e6e6;overflow:hidden}
.home .pc-site .s-maps .q{margin:12px;padding:10px 14px;border-radius:999px;box-shadow:0 1px 4px rgba(0,0,0,.18);font-size:14px}
.home .pc-site .s-maps .hit{padding:10px 16px;border-bottom:1px solid #f0f0f0;display:flex;flex-direction:column;font-size:13px}
.home .pc-site .s-maps .hit b{font-size:14.5px}.home .pc-site .s-maps .hit span{color:#666}.home .pc-site .s-maps .hit small{color:#b07a00}
.home .pc-site .s-maps .map{position:relative;background:linear-gradient(90deg,transparent 30%,#fff 30% 31.5%,transparent 31.5% 68%,#fff 68% 69%,transparent 69%),linear-gradient(0deg,transparent 40%,#fff 40% 42%,transparent 42% 75%,#fffbe8 75% 77%,transparent 77%),#e8efe3}
.home .pc-site .s-maps .map i{position:absolute;width:18px;height:18px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#e2463a;box-shadow:0 2px 4px rgba(0,0,0,.3)}