/* The Book here pill on a client site (Kinley Air). Shared by s1-friend.html, the site hero and section 9.
   State classes go on the phone: open, tap, hello, booking. Options P1 to P4. */
/* host site: an HVAC company, plain and real */
.host{padding:58px 20px 20px;background:#fff;min-height:100%}
.host .nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}
.host .logo{font-weight:600;font-size:18px;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.host .logo i{width:22px;height:22px;border-radius:6px;background:var(--sky-ink);display:inline-block}
.host .burger{width:24px;height:2px;background:var(--ink);box-shadow:0 7px 0 var(--ink),0 -7px 0 var(--ink)}
.host h1{font-family:var(--sans);font-weight:600;font-size:30px;line-height:1.1;letter-spacing:-.02em;margin-bottom:12px}
.host p{color:var(--ink-70);margin:0 0 16px;font-size:15px}
.host .cta{display:inline-block;background:var(--sky-ink);color:#fff;border-radius:8px;padding:12px 18px;font-weight:500;font-size:15px}
.host .art{height:190px;border-radius:14px;background:linear-gradient(135deg,#dbe7f1,#eef3f7);margin:22px 0;display:flex;align-items:center;justify-content:center;color:var(--sky-ink);font-size:13px;opacity:.9}
.host .row{display:flex;gap:10px;margin-top:12px}
.host .blk{flex:1;height:84px;border-radius:12px;background:#f2f4f6}
.scrim{position:absolute;inset:0;background:rgba(31,29,26,.2);opacity:0;transition:opacity .3s;pointer-events:none;z-index:5}
.open .scrim{opacity:1}

/* the pill, all options */
.friend{position:absolute;right:16px;bottom:22px;z-index:7;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.booking .friend{display:none}
.menu{position:absolute;right:16px;bottom:100px;z-index:8;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.menu .pill{box-shadow:var(--shadow);opacity:0;transform:translateY(10px) scale(.8);transform-origin:bottom right;font-size:16px;padding:14px 18px;background:#fff}
.tap .menu .pill{opacity:1;transform:none;transition:all .32s var(--pop)}
.tap .menu .pill:nth-child(1){transition-delay:.02s}.tap .menu .pill:nth-child(2){transition-delay:.08s}.tap .menu .pill:nth-child(3){transition-delay:.14s}
.menu .ico{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tap .book{background:var(--ink);color:#fff}
.tap .tip{opacity:0}
.book{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 20px 0 16px;border-radius:999px;font-weight:500;font-size:16px;border:1.5px solid var(--ink);background:#fff;color:var(--ink);box-shadow:0 8px 24px rgba(31,29,26,.14);transition:transform .2s var(--pop)}
.book:active{transform:scale(.97)}
.book svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.book .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);margin-left:-2px;box-shadow:0 0 0 0 rgba(76,175,110,.5);animation:ping 2.2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(76,175,110,.45)}70%{box-shadow:0 0 0 8px rgba(76,175,110,0)}100%{box-shadow:0 0 0 0 rgba(76,175,110,0)}}
.friend .by{font-size:11px;color:var(--ink-50);margin-right:6px}
.by b{font-family:var(--serif);font-weight:400;color:var(--ink-70)}
.tip{background:var(--ink);color:#fff;border-radius:12px;padding:9px 13px;font-size:14px;line-height:1.3;position:relative;opacity:0;transform:translateY(6px) scale(.94);transform-origin:bottom right;transition:all .36s var(--out);max-width:230px}
.tip::after{content:"";position:absolute;right:26px;bottom:-6px;width:12px;height:12px;background:var(--ink);transform:rotate(45deg)}
.hello .tip{opacity:1;transform:none}
.P2 .book{background:var(--ink);color:#fff}
.P2 .tip{background:#fff;color:var(--ink);border:1.5px solid var(--ink)}
.P2 .tip::after{background:#fff;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
.P3 .friend{flex-direction:column}
.P3 .book{padding-right:14px}
.P3 .duo{display:flex;gap:8px;align-items:center}
.P3 .call{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--ink);background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(31,29,26,.14)}
.P3 .call svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.P3 .book{background:var(--accent);border-color:var(--accent);color:#fff}
/* P4 friend on (round 2, R3): no pill. Mr Moodz peeks over the bottom edge, the hello card sits above him.
   Markup: .friend > .hicard + .peek > .dog. Book a time goes straight to the sheet, Just looking or the x closes the card. */
.P4 .friend{bottom:0;right:0;align-items:flex-end;gap:0}
.P4 .menu{display:none}
.peek{position:relative;width:132px;height:52px;overflow:hidden;transition:height .4s var(--pop)}
.peek .dog{position:absolute;left:-12px;bottom:-4px;width:140px}
.peek .dog img{animation:breathe 3.2s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.P4.hello .peek,.P4.tap .peek{height:98px}
.hicard{position:relative;width:258px;margin:0 38px 4px 0;padding:14px 14px 16px;background:#fffdf7;border:1.5px solid var(--ink);border-radius:14px;box-shadow:3px 4px 0 var(--ink);opacity:0;transform:translateY(8px) scale(.94);transform-origin:bottom right;transition:opacity .3s var(--out),transform .4s var(--pop);pointer-events:none}
.P4.hello .hicard,.P4.tap .hicard{opacity:1;transform:none;pointer-events:auto}
.hicard p{margin:0;font-family:var(--serif);font-size:19px;line-height:1.25;color:var(--ink);padding-right:8px}
.hicard small{display:block;margin:6px 0 12px;font-size:12px;color:var(--ink-50)}
.hicard .acts{display:flex;gap:8px}
.hicard .acts button{height:44px;padding:0 15px;border-radius:999px;border:1.5px solid var(--ink);background:#fff;font-size:14px;font-weight:500;white-space:nowrap}
.hicard .acts .go{background:var(--ink);color:#fff}
.hicard .x{position:absolute;right:-12px;top:-12px;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--ink);background:#fff;display:flex;align-items:center;justify-content:center;padding:0}
.hicard .x::before{content:"";position:absolute;inset:-9px}
.hicard .x svg{width:11px;height:11px;stroke:var(--ink);stroke-width:2.4;fill:none;stroke-linecap:round}