/* ==========================================================================
   /book (src/pages_book.py). Linked from that page only.
   Colours and fonts come ONLY from the var(--c-*) and var(--f-*) roles in tokens.css, with one exception:
   the dim layer behind the dialog (see ::backdrop), which cannot read custom properties in older Safari.
   House rules as everywhere else: nothing under 17px, flat fills and thin rules, square-ish corners, no hover
   lift, no shadows, no gradients. Readers are 60 to 75, so type is big and every tap target is 48px or taller.
   ========================================================================== */

/* ---------------------------------------------------------------- top: the logo and nothing else */
.book-head{background-color:var(--c-bg);border-bottom:2px solid var(--c-text)}
.book-head .wrap{display:flex;justify-content:center;align-items:center;min-height:92px}
.book-logo{display:inline-flex;align-items:center;text-decoration:none}
.book-logo .lockup{height:54px;width:auto}

/* ---------------------------------------------------------------- the page */
.book-column{max-width:860px}
.book-hero{padding:56px 0 76px}
.book-hero .book-column{text-align:center}
.book-hero h1{font-size:clamp(36px,5.4vw,62px);max-width:14em;margin:0 auto 18px}
.book-sub{font-size:clamp(21px,2.3vw,26px);line-height:1.5;max-width:30em;margin:0 auto}
.book-watch{font-size:clamp(21px,2.2vw,24px);line-height:1.5;max-width:28em;margin:30px auto 0}

/* the example (or the video) */
.book-stage{margin:34px auto 0;max-width:600px;padding:18px 20px 28px;background:var(--c-bg-alt);border:1px solid var(--c-line);border-radius:var(--radius)}
.book-stage .ex-tag{margin-bottom:24px}   /* clears the strip of tape the phone wears */
.book-stage .sd-phone{max-width:340px}
.book-stage--video{max-width:860px;padding:0;background:none;border:0}
.book-frame{position:relative;aspect-ratio:16/9;background:var(--c-dark);border-radius:var(--radius);overflow:hidden}
.book-video{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--c-dark)}

/* the big button, used twice */
.book-cta{margin-top:22px;min-height:76px;padding:18px 48px;font-size:clamp(22px,2.6vw,27px)}

.book-cover,.book-proof,.book-after{padding:68px 0}
.book-cover h2,.book-proof h2,.book-after h2{margin-bottom:28px}
.book-cover .benefits{max-width:none}

.book-stat-cards{grid-template-columns:minmax(0,1fr);gap:22px}   /* the same cards as every other page, one to a row */
.book-stat-cards .stat-card{padding:26px 26px 24px}

.book-after .book-column{text-align:center}
.book-after h2{margin-bottom:18px}
.book-after-copy{font-family:var(--f-display);font-weight:700;font-size:clamp(24px,2.8vw,31px);line-height:1.35;max-width:23em;margin:0 auto}

.book-foot{padding:34px 0 30px}
.book-foot .wrap{display:grid;gap:6px;justify-items:center;text-align:center}
.book-foot p{margin:0;font-size:17px;line-height:1.55}

/* ---------------------------------------------------------------- the question dialog */
html.book-lock{overflow:hidden}
.book-dialog{display:none;padding:0;margin:auto;width:min(720px,calc(100vw - 24px));max-width:none;
  max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow:hidden;
  background:var(--c-bg);color:var(--c-text);border:2px solid var(--c-text);border-radius:var(--radius);
  font-family:var(--f-body);font-size:21px;line-height:1.5}
.book-dialog[open]{display:flex;flex-direction:column}
.book-dialog[data-step="6"]{width:min(1040px,calc(100vw - 24px))}
/* the layer behind: the night colour at 66%. Written out because ::backdrop does not see var() in older Safari. */
.book-dialog::backdrop{background:rgb(26 34 44 / .66)}
.book-dialog.is-fallback[open]{position:fixed;inset:0;z-index:200;width:100%;height:100%;max-height:none;margin:0;border:0;border-radius:0}
.book-dialog ::selection{background:var(--c-accent);color:var(--c-cta-text)}
.book-dialog [hidden]{display:none!important}

.book-top{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding:12px 20px;border-bottom:2px solid var(--c-text);background:var(--c-bg)}
.book-back,.book-close{min-height:52px;padding:0 8px;background:none;border:0;border-radius:var(--radius);cursor:pointer;
  font:700 21px/1 var(--f-display);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.book-back{color:var(--c-accent)}
.book-close{color:var(--c-text)}
.book-back:hover,.book-close:hover{text-decoration-thickness:2px}
.book-back::before{content:"";display:inline-block;width:10px;height:10px;margin-right:12px;border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:translateY(-1px) rotate(45deg)}
.book-dialog[data-step="1"] .book-back{display:none}
.book-meter{order:2;flex:1 1 220px;display:flex;align-items:center;gap:14px;min-width:0}
.book-close{order:3}
.book-bar{flex:1;min-width:0;height:16px;background:var(--c-card);border:1px solid var(--c-text);border-radius:var(--radius);overflow:hidden}
.book-bar span{display:block;height:100%;width:100%;background:var(--c-accent);transform:scaleX(0);transform-origin:left center}
.book-pct{min-width:3.4ch;text-align:right;font:700 21px/1 var(--f-display)}

.book-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:30px 32px 34px;overscroll-behavior:contain}
.book-step{padding:0}
.book-step h2{font-size:clamp(27px,3.3vw,38px);margin:0 0 24px;outline:none}
.book-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.book-option{display:flex;align-items:center;min-height:72px;padding:14px 20px;text-align:left;cursor:pointer;
  font:700 22px/1.3 var(--f-display);color:var(--c-text);background:var(--c-card);border:2px solid var(--c-text);border-radius:var(--radius);}
.book-option:hover{background:var(--c-accent-tint)}
.book-option[aria-pressed="true"]{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-cta-text)}

.book-form{display:grid;gap:26px;max-width:520px}
.book-field label{display:block;margin-bottom:8px;font:700 22px/1.3 var(--f-display)}
.book-optional{font:400 19px/1.3 var(--f-body);color:var(--c-muted)}
.book-field input{display:block;width:100%;min-height:68px;padding:12px 16px;font:400 24px/1.3 var(--f-body);color:var(--c-text);
  background:var(--c-screen);border:2px solid var(--c-text);border-radius:var(--radius);caret-color:var(--c-cta);appearance:none}
.book-field input[aria-invalid="true"]{border-color:var(--c-alert)}
.book-note{margin:10px 0 0;font-size:19px;line-height:1.5}
.book-error{margin:10px 0 0;font-size:19px;line-height:1.45;font-weight:700;color:var(--c-alert)}
.book-trap{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.book-continue{min-height:72px;width:100%;font-size:24px;cursor:pointer}

.book-cal{background:var(--c-screen);border:1px solid var(--c-line);border-radius:var(--radius)}
.book-cal iframe{display:block;width:100%;height:clamp(520px,calc(100vh - 330px),760px);height:clamp(520px,calc(100dvh - 330px),760px);border:0}
.book-after-cal{margin:16px 0 0;font-size:20px;line-height:1.5}
.book-dialog[data-step="6"] .book-body{padding:22px 24px 26px}
.book-dialog[data-step="6"] .book-step h2{margin-bottom:16px}

@media (max-width:700px){
  .book-options{grid-template-columns:minmax(0,1fr)}
  .book-continue{font-size:23px}
}
@media (max-width:640px){
  .book-head .wrap{min-height:80px}
  .book-logo .lockup{height:48px}
  .book-hero{padding:36px 0 56px}
  .book-stage{padding:14px 12px 22px}
  .book-cta{width:100%;padding:18px 20px}
  .book-cover,.book-proof,.book-after{padding:52px 0}
  .book-dialog,.book-dialog[data-step="6"]{width:100%;height:100vh;height:100dvh;max-height:none;margin:0;border:0;border-radius:0}
  .book-top{padding:6px 12px 12px}
  .book-back{order:1}
  .book-close{order:2;margin-left:auto}
  .book-meter{order:3;flex-basis:100%}
  .book-body{padding:22px 16px 30px}
  .book-dialog[data-step="6"] .book-body{padding:16px 12px 24px}
  .book-cal iframe{height:clamp(480px,calc(100vh - 290px),760px);height:clamp(480px,calc(100dvh - 290px),760px)}
}
@media (prefers-reduced-motion:no-preference){
  .book-bar span{transition:transform .35s cubic-bezier(.22,1,.36,1)}
  .book-option{transition:background-color .2s ease,border-color .2s ease,color .2s ease}
}