/* ==========================================================================
   09 Book band (#book). Boards d13-book (1280) and m04-book (390), snapshot v353.
   Phone is centred and stacked (button full width, trust under it); from 768px the
   button and the trust note sit side by side; 1024px up is the desktop board.
   The one energy border of this screen is the panel's (booking moment).
   ========================================================================== */

#book{position:relative;isolation:isolate;overflow:clip;padding:48px 0 56px}

#book .bk__glows{position:absolute;inset:0;z-index:0;pointer-events:none}
#book .bk__glows .glow{position:absolute;border-radius:50%}
#book .bk__g1{left:calc(50% - 25px);top:360px;width:420px;height:420px;filter:blur(32px);
  background:radial-gradient(circle,rgba(23,212,208,.12) 0%,rgba(0,95,214,.20) 30%,rgba(0,95,214,.08) 50%,rgba(0,95,214,0) 70%)}
#book .bk__g2{left:calc(50% - 395px);top:-170px;width:400px;height:400px;filter:blur(32px);
  background:radial-gradient(circle,rgba(0,95,214,.22) 0%,rgba(0,95,214,.09) 40%,rgba(0,95,214,0) 70%)}

#book .bk__wrap{position:relative;z-index:1}

/* the panel: photo, scrim, content. The scrim was .94, .9 and .62 on the board; eased to .91, .85 and .52 (Bobby, 12 Oct: "see the
   imagery a tiny bit more without affecting the text too much"), darkest still behind the text; AAA measured after the change. */
#book .bk__panel{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--navy)}
#book .bk__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%}
#book .bk__scrim{position:absolute;inset:0;
  background-image:radial-gradient(ellipse 120% 100% at 50% 50%,rgba(4,16,39,.91) 0%,rgba(4,16,39,.85) 50%,rgba(4,16,39,.52) 100%)}
#book .bk__body{position:relative;display:flex;flex-direction:column;align-items:center;padding:48px 20px;text-align:center}

#book .bk__h{max-width:310px}
#book .bk__l{display:block}
#book .bk__sub{margin-top:16px;color:var(--muted)}

/* button and trust note */
#book .bk__cta{box-sizing:border-box;display:flex;flex-direction:column;gap:20px;align-items:center;justify-content:center;width:100%;margin-top:28px}
#book .bk__cta .nv-book{width:100%;min-height:52px;line-height:1.55}

#book .bk__trust{position:relative;display:inline-flex;flex-direction:column;gap:4px;box-sizing:border-box;max-width:100%;
  padding:16px 0 0;border-top:1px solid var(--line-strong);
  text-align:center;font-size:14px;line-height:1.4;color:var(--muted-img)}
#book .bk__trust p{margin:0}
#book .bk__trust b{font-weight:600;color:var(--bone)}
#book .bk__rate{display:flex;align-items:center;justify-content:center;gap:10px}
/* D-197: "4.9 Uber driver rating" is too long to sit beside the stars at 320, so the phrase drops under them whole, never split */
#book .bk__rate{flex-wrap:wrap;row-gap:2px}
#book .bk__rate > span:last-child{white-space:nowrap}
#book .bk__stars{position:relative;display:inline-flex;flex:none;gap:3px;color:var(--line-strong)}
#book .bk__stars svg{display:block;flex:none}
#book .bk__fill{position:absolute;left:0;top:0;bottom:0;width:98%;display:inline-flex;gap:3px;overflow:hidden;color:var(--teal)}
#book .bk__fine{font-size:12px;text-wrap:balance}

/* the promise line: 14px (S10); the number is a teal link as the board has it (T6 overruled, D-159) */
#book .bk__promise{margin:24px -8px 0;max-width:700px;font-size:14px;line-height:1.5;color:var(--muted)}
#book .bk__promise b{font-weight:600;color:var(--bone)}
#book .bk__pay{display:block;text-wrap:balance}
#book .bk__nf,#book .bk__talk{white-space:nowrap}
#book .bk__sep{display:inline-block;width:3px;height:3px;margin:0 9px;vertical-align:middle;border-radius:50%;background:var(--line-strong)}
#book .bk__call{display:inline-block;padding:13px 0;margin:-13px 0;font-weight:600;white-space:nowrap;color:var(--teal);text-decoration:none;
  transition:color 150ms ease-out}
#book a.bk__call:hover,#book a.bk__call:focus-visible{color:var(--teal-hi)}

@media (min-width:768px){
  #book{padding:96px 0}
  #book .bk__g1{left:calc(50% + 310px);top:370px;width:560px;height:560px;filter:blur(32px)}
  #book .bk__g2{left:calc(50% - 840px);top:-180px;width:480px;height:480px}
  #book .bk__scrim{background-image:radial-gradient(ellipse 640px 100% at 50% 50%,rgba(4,16,39,.91) 0%,rgba(4,16,39,.85) 50%,rgba(4,16,39,.52) 100%)}
  #book .bk__promise{margin-inline:0}
  #book .bk__body{padding:88px 64px}
  #book .bk__h{max-width:518px}
  #book .bk__sub{max-width:661px}
  #book .bk__cta{flex-direction:row;gap:24px;width:auto;margin-top:32px}
  #book .bk__cta .nv-book{width:auto;min-height:48px}
  #book .bk__trust{padding:4px 0 4px 24px;border-top:0;border-left:1px solid var(--line-strong);text-align:left}
  #book .bk__rate{justify-content:flex-start}
}
@media (min-width:1024px){
  #book .bk__body,#book .bk__sub{font-size:16.64px}
  #book .bk__promise{line-height:1.55}
  #book .bk__pay{display:inline;text-wrap:wrap}
}

@media (prefers-reduced-motion:reduce){
  #book .bk__call{transition:none!important}
}