/* book.css · digiCALLS: HIS BOOK A CALL WITH ME PAGE, AND A CALL'S OWN PAGE (Oct 29, 2026, Brian; link.js, book.js).
   calls.digi-discounts.com/<his business> wears HIS brand (Brian: "I want everything to be in his brand colors"): his logo in
   its squircle with his color behind it, his colors read from his logo (brand.js, the same rule as eco), deep enough for
   white words. Ours shows once, small, at the bottom: Powered by digiCALLS. Montserrat only, light and dark, reduced motion.
   His colours: --b (deep, white words on it), --bl (light), --bs (soft), --bn (night). Digi Green until his logo is read. */

@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/montserrat-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/montserrat-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

:root{
  --b:#05672a; --bl:#3fd28a; --bs:#e8f4ec; --bn:#04140b;
  --ground:#f5f5f8; --card:#ffffff; --ink:#1d1f22; --soft:#5f6168; --faint:#8b8e95; --line:rgba(33,33,33,.10); --field:#f7f8fa;
  --warn:#a3121d; --shadow:0 1px 2px rgba(16,24,20,.06),0 10px 30px -14px rgba(16,24,20,.22);
  --ease:cubic-bezier(.2,.75,.25,1);
}
@media (prefers-color-scheme: dark){
  :root{ --ground:#0c0d0f; --card:#16181b; --ink:#f3f4f6; --soft:#a9adb3; --faint:#7d8288; --line:rgba(255,255,255,.10); --field:#1d2024; --warn:#ff8a8a;
    --shadow:0 1px 0 rgba(255,255,255,.04),0 12px 34px -14px rgba(0,0,0,.7); }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0}
body{font-family:'Montserrat',system-ui,-apple-system,sans-serif;background:var(--ground);color:var(--ink);min-height:100dvh;display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit}
img{display:block}
a{color:inherit}
a.go,a.line{text-decoration:none}
:focus-visible{outline:3px solid var(--bl);outline-offset:2px}

.bk{width:100%;max-width:560px;margin:0 auto;padding:16px 16px 28px;flex:1}
.bk-load{display:grid;place-items:center;min-height:60dvh;color:var(--soft);font-weight:700;font-size:14px}
.bk-dot{width:34px;height:34px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--b);animation:bkSpin .8s linear infinite}
@keyframes bkSpin{to{transform:rotate(360deg)}}

/* HIS HERO: his squircle, his name, his colours */
.bk-hero{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:26px 20px 24px;border-radius:28px;color:#fff;
  background:radial-gradient(130% 100% at 15% 0%,var(--bl) 0%,var(--b) 52%,var(--bn) 125%);box-shadow:0 22px 44px -26px var(--b)}
.bk-hero::after{content:'';position:absolute;inset:auto -30% -60% -30%;height:70%;background:radial-gradient(closest-side,rgba(255,255,255,.14),transparent);pointer-events:none}
.bk-sq{flex:none;display:grid;place-items:center;width:84px;height:84px;border-radius:24%;overflow:hidden;background:var(--lbg,#fff);box-shadow:0 0 0 4px rgba(255,255,255,.22),0 16px 30px -14px rgba(0,0,0,.55)}
.bk-sq img{width:100%;height:100%;object-fit:contain}
.bk-sq b{font-size:34px;font-weight:900;color:var(--b)}
.bk-sq.sm{width:44px;height:44px;box-shadow:0 0 0 1px var(--line)}
.bk-sq.sm b{font-size:18px}
.bk-biz{margin:4px 0 0;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.9}
.bk-h{margin:0;font-size:clamp(24px,7vw,30px);font-weight:900;letter-spacing:-.02em;line-height:1.12}
.bk-sub{margin:0;font-size:14px;font-weight:600;opacity:.9;line-height:1.45}
.bk-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:4px}
.bk-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.16);font-size:12.5px;font-weight:800}
.bk-pill svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* a card on the ground */
.bk-card{margin-top:14px;padding:18px;border-radius:24px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.bk-k{margin:0 0 10px;font-size:11.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--b)}
@media (prefers-color-scheme: dark){ .bk-k{color:var(--bl)} }
.bk-t{margin:0 0 6px;font-size:20px;font-weight:900;letter-spacing:-.01em}
.bk-p{margin:0 0 12px;font-size:14.5px;line-height:1.55;color:var(--soft)}
.bk-p b{color:var(--ink)}
.bk-zone{display:flex;align-items:center;gap:6px;margin:12px 0 0;font-size:12.5px;font-weight:700;color:var(--faint)}
.bk-zone svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}

/* THE DAYS, then THE TIMES */
.bk-days{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;margin:0 -2px;scroll-snap-type:x proximity;scrollbar-width:none}
.bk-days::-webkit-scrollbar{display:none}
.bk-day{flex:none;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:62px;padding:10px 6px;border-radius:16px;cursor:pointer;
  border:1px solid var(--line);background:var(--field);color:var(--ink);transition:transform .15s var(--ease),background .2s}
.bk-day small{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.bk-day b{font-size:22px;font-weight:900;font-variant-numeric:tabular-nums}
.bk-day i{font-style:normal;font-size:11px;font-weight:700;color:var(--faint)}
.bk-day.on{background:var(--b);border-color:var(--b);color:#fff}
.bk-day.on small,.bk-day.on i{color:rgba(255,255,255,.85)}
.bk-day:active{transform:scale(.96)}
.bk-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:6px}
.bk-time{min-height:46px;padding:0 10px;border-radius:14px;border:1.5px solid color-mix(in srgb,var(--b) 40%,var(--line));background:transparent;color:var(--ink);
  font-weight:800;font-size:15px;cursor:pointer;font-variant-numeric:tabular-nums;transition:background .15s,color .15s,transform .12s}
@media (prefers-color-scheme: dark){ .bk-time{border-color:color-mix(in srgb,var(--bl) 45%,var(--line))} }
.bk-time:hover{background:var(--bs);color:var(--b)}
@media (prefers-color-scheme: dark){ .bk-time:hover{background:color-mix(in srgb,var(--bl) 18%,transparent);color:var(--ink)} }
.bk-time.on{background:var(--b);border-color:var(--b);color:#fff}
.bk-time:active{transform:scale(.97)}
.bk-none{margin:6px 0 0;font-size:14px;font-weight:600;color:var(--soft)}

/* the chosen time, big */
.bk-when{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:18px;background:var(--bs);color:var(--b)}
@media (prefers-color-scheme: dark){ .bk-when{background:color-mix(in srgb,var(--bl) 14%,var(--card));color:var(--ink)} }
.bk-cal{flex:none;display:flex;flex-direction:column;align-items:center;width:56px;border-radius:12px;overflow:hidden;background:var(--card);box-shadow:0 0 0 1px var(--line)}
.bk-cal small{display:block;width:100%;padding:3px 0;background:var(--b);color:#fff;font-size:10.5px;font-weight:900;letter-spacing:.1em;text-align:center}
.bk-cal b{padding:4px 0 6px;font-size:22px;font-weight:900;color:var(--ink)}
.bk-when span{display:flex;flex-direction:column;min-width:0}
.bk-when strong{font-size:17px;font-weight:900;color:var(--ink)}
.bk-when em{font-style:normal;font-size:13px;font-weight:700;color:var(--soft)}

/* fields */
.fld{display:flex;flex-direction:column;gap:6px;margin:14px 0 0}
.fld span{font-size:13px;font-weight:800;color:var(--ink)}
.fld span i{font-style:normal;font-weight:600;color:var(--faint)}
.in{width:100%;min-height:50px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--field);color:var(--ink);font:600 16px 'Montserrat',system-ui,sans-serif}
textarea.in{min-height:84px;resize:vertical;line-height:1.45}
.in:focus{outline:2px solid var(--bl);border-color:transparent}
.in.bad{border-color:var(--warn)}
.in.code{letter-spacing:.5em;font-size:22px;text-align:center;font-variant-numeric:tabular-nums}
.cnt{align-self:flex-end;font-size:11.5px;font-weight:700;color:var(--faint)}
.err{min-height:0;margin:10px 0 0;font-size:13.5px;font-weight:700;color:var(--warn)}
.err:empty{display:none}
.ts{margin-top:12px}

/* buttons: his deep colour, the line, the quiet one */
.go{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 22px;border:0;border-radius:999px;cursor:pointer;
  background:var(--b);color:#fff;font-weight:900;font-size:15.5px;box-shadow:0 12px 26px -14px var(--b);transition:transform .12s,opacity .2s}
.go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.go:active{transform:scale(.97)}
.go:disabled{opacity:.45;cursor:default}
.go.full{width:100%;margin-top:16px}
.go.glow{animation:bkGlow 1.6s ease-in-out infinite}
@keyframes bkGlow{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--bl) 70%,transparent),0 12px 26px -14px var(--b)}50%{box-shadow:0 0 0 10px transparent,0 12px 26px -14px var(--b)}}
.line{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;border-radius:999px;cursor:pointer;background:transparent;
  border:1.5px solid var(--line);color:var(--ink);font-weight:800;font-size:14.5px}
.line.warn{color:var(--warn)}
.line[data-sure]{border-color:var(--warn);color:var(--warn)}
.quiet{border:0;background:transparent;color:var(--soft);font-weight:700;font-size:13.5px;padding:10px 8px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}

/* booked: the check in his colour */
.bk-done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.bk-check{display:grid;place-items:center;width:74px;height:74px;border-radius:50%;background:var(--b);color:#fff;box-shadow:0 0 0 10px var(--bs)}
@media (prefers-color-scheme: dark){ .bk-check{box-shadow:0 0 0 10px color-mix(in srgb,var(--bl) 16%,transparent)} }
.bk-check svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion: no-preference){
  .bk-check{animation:bkPop .5s var(--ease) both}
  .bk-check svg path{stroke-dasharray:30;stroke-dashoffset:30;animation:bkDraw .45s .25s ease forwards}
  .bk-in{animation:bkIn .35s var(--ease) both}
}
@keyframes bkPop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes bkDraw{to{stroke-dashoffset:0}}
@keyframes bkIn{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.bk-note{margin:12px 0 0;padding:10px 14px;border-left:3px solid var(--b);border-radius:0 12px 12px 0;background:var(--field);font-size:14px;line-height:1.5}

.bk-foot{padding:18px 16px calc(18px + env(safe-area-inset-bottom));text-align:center;font-size:12px;font-weight:700;color:var(--faint)}
.bk-foot .dgi{color:var(--soft)}
.dgi{font-weight:500}
.dgi b{font-weight:900}

.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translate(-50%,20px);z-index:90;max-width:calc(100vw - 32px);padding:12px 18px;border-radius:14px;
  background:#14161c;color:#fff;font-size:14px;font-weight:700;text-align:center;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* what the call screen (call.js, call.css) needs from the page around it */
.st-b{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18)}
.st-b svg{width:22px;height:22px}
.st-b.off{background:#fff;color:#111}
.st-n{min-width:58px;height:50px;padding:0 14px;border-radius:999px;font-size:16px;font-weight:900;cursor:pointer;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18)}
.gl{background:rgba(20,24,22,.86);border:1px solid rgba(255,255,255,.12);color:#f5f5f8}
.ahc .go{background:var(--c,#05672a)}
.ahc .line{color:#f5f5f8;border-color:rgba(255,255,255,.25)}
.sq{position:relative;flex:none;width:92px;height:92px}
.sq-f{width:100%;height:100%;border-radius:24%;overflow:hidden;background:var(--lbg,#fff);display:grid;place-items:center}
.sq-f img{width:100%;height:100%;object-fit:cover}
.sq-f.logo img{object-fit:contain}
.sq-f.ini{background:linear-gradient(150deg,var(--cl,#3fd28a),var(--c,#05672a));color:#fff;font-size:34px;font-weight:900}
.sq-r{display:none}
.sq.big{width:120px;height:120px}
.sq.big .sq-f.ini{font-size:44px}
.sq.tiny{width:30px;height:30px}
.sq.tiny .sq-f.ini{font-size:12px}

@media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important} }
@media (min-width:700px){ .bk{padding-top:40px} .bk-times{grid-template-columns:repeat(4,1fr)} }