:root{
  --red:#C42B30; --red-deep:#9E1F25;
  --cream:#F4ECDB; --paper:#FBF6EC; --white:#fff;
  --ink:#16120D; --ink-soft:#4f4234; --ink-faint:#8a7d6a;
  --line:#e4d9c2; --line-soft:#efe6d3;
  --fred:'Fredoka',system-ui,sans-serif; --inter:'Inter',system-ui,sans-serif;
  --cav:'Caveat',cursive; --mono:'JetBrains Mono',monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --accent:#C42B30; --accent-deep:#9E1F25; /* set per company via JS */
}
*{box-sizing:border-box} html,body{margin:0}
body{font-family:var(--inter);color:var(--ink);
  background:radial-gradient(120% 90% at 50% -10%, #fff6e9 0%, var(--cream) 55%, #e9dcc4 100%);
  background-attachment:fixed;-webkit-font-smoothing:antialiased;padding:0 0 70px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.masthead{padding:46px 24px 22px;text-align:center}
.wordmark{font-family:var(--fred);font-weight:600;font-size:24px;letter-spacing:-.01em}
.wordmark .ai{color:var(--red)}
.masthead h1{font-family:var(--fred);font-weight:600;font-size:clamp(24px,4vw,32px);margin:12px 0 4px;letter-spacing:-.02em}
.masthead p{color:var(--ink-soft);max-width:600px;margin:0 auto;font-size:14.5px;line-height:1.6}

/* STEP 1: company picker */
.pick{padding:40px 34px;background:var(--paper);border-radius:16px;border:1px solid var(--line);box-shadow:0 34px 70px -28px rgba(40,25,10,.45)}
.pick .wm{font-family:var(--fred);font-weight:600;font-size:24px;text-align:center}.pick .wm .ai{color:var(--red)}
.pick .q{font-family:var(--fred);font-weight:600;font-size:26px;text-align:center;margin:16px 0 2px;letter-spacing:-.01em}
.pick .sub{font-family:var(--cav);font-size:22px;color:var(--ink-soft);text-align:center;margin-bottom:26px}
.cos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.co{position:relative;background:var(--white);border:1.5px solid var(--line);border-radius:16px;padding:18px;cursor:pointer;transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease)}
.co .tag{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--co-accent);padding:3px 8px;border-radius:6px;margin-bottom:11px}
.co:hover{transform:translateY(-3px);border-color:var(--co-accent);box-shadow:0 14px 28px -20px var(--co-accent)}
.co:focus-visible{outline:3px solid var(--co-accent);outline-offset:2px;border-color:var(--co-accent)}
.co .conm{font-family:var(--fred);font-weight:600;font-size:18px;color:var(--co-accent)}
.co .cods{font-size:13px;color:var(--ink-soft);line-height:1.45;margin:6px 0 12px;min-height:38px}
.co .cocount{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--ink-soft);font-weight:500}
.catchall{grid-column:1/-1;margin-top:4px;background:var(--cream);border:1.5px dashed var(--line);display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:14px;cursor:pointer;transition:border-color .2s var(--ease)}
.catchall:hover{border-color:var(--red)}
.catchall:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.catchall .ca-t{font-family:var(--fred);font-weight:600;font-size:16px}
.catchall .ca-d{font-size:12.5px;color:var(--ink-soft);margin-top:1px}
.catchall .ca-go{margin-left:auto;color:var(--red);font-family:var(--cav);font-size:20px}

/* STEP 2: booking app */
.app{display:grid;grid-template-columns:300px 1fr;background:var(--paper);min-height:520px;border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:0 34px 70px -28px rgba(40,25,10,.45)}
.rail{padding:26px 24px;border-right:1px solid var(--line);background:linear-gradient(180deg,#fcf7ee,#f7efde)}
.rail .back{font-size:12px;color:var(--ink-faint);cursor:pointer;margin-bottom:14px;display:inline-block}
.rail .chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--accent);padding:4px 9px;border-radius:7px}
.rail .conm{font-family:var(--fred);font-weight:600;font-size:21px;margin:11px 0 1px;color:var(--accent-deep)}
.rail .menu-rule{height:2px;background:repeating-linear-gradient(90deg,var(--accent) 0 7px,transparent 7px 13px);margin:8px 0 4px;opacity:.55}
.rail .pull{font-family:var(--cav);font-size:19px;color:var(--ink-soft);margin-bottom:12px}
.menu-item{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:baseline;padding:12px 4px;border-bottom:1px dashed var(--line);cursor:pointer;transition:.16s var(--ease)}
.menu-item:hover{padding-left:8px}.menu-item:hover .mname{color:var(--accent-deep)}
.menu-item .mname{font-family:var(--fred);font-weight:600;font-size:16px;line-height:1}
.menu-item .mmin{font-family:var(--mono);font-size:12px;color:var(--ink-faint)}
.menu-item .pchip{font-family:var(--mono);font-size:11px;font-weight:600;color:#fff;background:var(--accent-deep);border-radius:6px;padding:3px 8px;justify-self:end;white-space:nowrap}
.menu-item .pchip.free{background:transparent;color:var(--ink-soft);border:1px solid var(--line)}
.menu-item:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:10px}
.menu-item .mmin2{grid-column:1/-1;font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);margin-top:4px;letter-spacing:.04em}
.menu-item .mds{grid-column:1/-1;font-size:12px;color:var(--ink-soft);margin-top:3px;line-height:1.4}
.paynote,.subnote{font-size:12px;line-height:1.45;border-radius:10px;padding:9px 11px;margin-bottom:12px}
.paynote{background:#fdeee2;border:1px solid #f0c9ad;color:#7a4a25}
.subnote{background:var(--cream);border:1px dashed var(--accent);color:var(--accent-deep)}
.menu-item.sel{background:var(--white);border-radius:12px;border-bottom-color:transparent;padding:12px;box-shadow:0 8px 20px -14px var(--accent);border:1.5px solid var(--accent)}
.menu-item.sel .mname{color:var(--accent-deep)}.menu-item.sel .mmin{color:var(--accent)}
.host{display:flex;align-items:center;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.host .av{width:40px;height:40px;border-radius:50%;background:var(--accent);color:#fff;font-family:var(--fred);font-weight:600;display:flex;align-items:center;justify-content:center;font-size:17px}
.host .nm{font-family:var(--fred);font-weight:600;font-size:14px}.host .rl{font-size:11.5px;color:var(--ink-soft)}

.panes{display:grid;grid-template-columns:1fr 290px}
.cal{padding:26px 24px;border-right:1px solid var(--line)}
.cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.cal-head .mo{font-family:var(--fred);font-weight:600;font-size:17px}
.cal-head .nav{color:var(--ink-faint);font-family:var(--mono);font-size:15px;letter-spacing:6px;cursor:pointer}
.cal-head .nav span{cursor:pointer;padding:0 2px}
.cal-head .nav span:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:4px}
.dow-row{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center;font-size:11px;color:var(--ink-faint);margin-bottom:7px;font-weight:600}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center}
.cell{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;position:relative;border-radius:10px;font-family:var(--fred);font-weight:500;font-size:14px;cursor:pointer;transition:.16s var(--ease)}
.cell.open:hover{background:var(--cream)}
.cell.closed{color:var(--ink-faint);opacity:.4;cursor:default}
.cell.past{opacity:.28;cursor:default}
.cell .od{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:var(--red);opacity:.6}
.cell.sel{background:var(--red);color:#fff}.cell.sel .od{background:#fff;opacity:.95}
.legend{margin-top:16px;font-size:11.5px;color:var(--ink-soft);display:flex;align-items:center;gap:7px}
.legend i{width:7px;height:7px;border-radius:50%;background:var(--red);opacity:.6;display:block}

.times{padding:26px 22px;display:flex;flex-direction:column}
.times .dayttl{font-family:var(--fred);font-weight:600;font-size:16px}
.tzbar{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft);background:var(--cream);border:1px solid var(--line);border-radius:11px;padding:9px 11px;margin:12px 0 14px;flex-wrap:wrap}
.tzbar .pin{color:var(--red)}.tzbar a{color:var(--red-deep);text-decoration:underline;text-underline-offset:2px;cursor:pointer;font-weight:600;margin-left:auto}
.tzbar select{font-family:var(--inter);font-size:12px;border:1.5px solid var(--line);background:#fff;border-radius:8px;padding:5px 8px;color:var(--ink);margin-left:auto;cursor:pointer}
.tzbar select:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.tlist{display:flex;flex-direction:column;gap:9px;overflow:auto;flex:1}
.slot{border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:12px 15px;text-align:left;font-family:var(--fred);font-weight:500;font-size:15px;color:var(--ink);cursor:pointer;transition:.16s var(--ease);display:flex;justify-content:space-between;align-items:center}
.slot:hover{border-color:var(--red);color:var(--red-deep);transform:translateX(2px)}
.slot .pk{font-family:var(--inter);font-size:11.5px;font-weight:600;color:#fff;background:var(--red);border-radius:7px;padding:5px 10px;opacity:0;transition:.16s var(--ease)}.slot:hover .pk{opacity:1}
.shimmer{height:45px;border-radius:12px;background:linear-gradient(100deg,#f1e8d6 30%,#fbf6ec 50%,#f1e8d6 70%);background-size:220% 100%;animation:sh 1.3s linear infinite}
@keyframes sh{from{background-position:120% 0}to{background-position:-120% 0}}
.empty{text-align:center;padding:28px 12px;margin:auto 0;color:var(--ink-soft)}
.empty .big{font-family:var(--cav);font-size:26px;color:var(--red-deep);line-height:1.1}.empty p{font-size:13px;margin:8px 0 0;line-height:1.5}
.field{margin-bottom:11px}.field label{display:block;font-size:12px;font-weight:600;color:var(--ink-soft);margin-bottom:5px}
.field input,.field textarea{width:100%;border:1.5px solid var(--line);background:#fff;border-radius:11px;padding:10px 12px;font-family:inherit;font-size:14px;color:var(--ink)}.field textarea{resize:none;height:54px}
.recap{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin-bottom:13px}
.recap .r1{font-family:var(--fred);font-weight:600;font-size:14px}.recap .r2{font-size:12px;color:var(--ink-soft);margin-top:3px}
.cta{display:block;width:100%;border:none;background:var(--red);color:#fff;font-family:var(--fred);font-weight:600;font-size:15px;padding:13px;border-radius:13px;cursor:pointer;transition:.18s var(--ease)}.cta:hover{background:var(--red-deep)}
.back2{font-size:12.5px;color:var(--ink-faint);cursor:pointer;margin-bottom:10px;display:inline-block}
.confirm{text-align:center;margin:auto 0;padding:8px}
.seal{width:62px;height:62px;border-radius:50%;background:var(--accent);margin:0 auto 14px;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--fred);font-size:29px}
.confirm h3{font-family:var(--fred);font-weight:600;font-size:20px;margin:0 0 4px}
.confirm .when{font-family:var(--fred);font-weight:600;color:var(--accent-deep);font-size:15px}
.confirm p{color:var(--ink-soft);font-size:13px;line-height:1.5;margin:10px auto 0;max-width:230px}
.confirm .cav{font-family:var(--cav);font-size:21px;color:var(--ink-soft);margin-top:12px}

.hide{display:none!important}

.foot{text-align:center;color:var(--ink-soft);font-size:13px;margin-top:42px}
.foot .cav{font-family:var(--cav);font-size:20px;color:var(--red-deep)}

/* headings: even line lengths */
.masthead h1,.pick .q,.confirm h3{text-wrap:balance}

/* focus-visible on every interactive control (keyboard) */
.slot:focus-visible,.cell.open:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.cta:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.tzbar a:focus-visible,.back:focus-visible,.back2:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:4px}
a,button,[role=button]{-webkit-tap-highlight-color:transparent}

/* respect reduced motion: no shimmer travel, no transforms */
@media (prefers-reduced-motion: reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .shimmer{animation:none;background:#f1e8d6}
  .co:hover,.menu-item:hover,.slot:hover{transform:none}
}

@media(max-width:820px){.cos{grid-template-columns:1fr}.app{grid-template-columns:1fr}.rail{border-right:none;border-bottom:1px solid var(--line)}.panes{grid-template-columns:1fr}.cal{border-right:none;border-bottom:1px solid var(--line)}}
/* on phones the slot list gets bigger tap targets */
@media(max-width:560px){.slot{padding:15px 16px;font-size:16px}.times{padding:22px 18px}.pick{padding:28px 20px}}