/* book.css — Sprint CS (W4). Shared stylesheet for the /book/* sales pages
 * (real-estate, family-law, wills-probate, business-buy-sell), all built
 * from one template (scripts/book/generate-book-pages.mjs). Loaded AFTER
 * /styles.css, so it reuses that file's tokens (--tsl-*, --font-*,
 * --radius*, --shadow*) and shared components (.wrap, .wrap-narrow, .btn*,
 * .field, .frow, .eyebrow, bare <details>) rather than redefining them.
 *
 * Button classes (.cs-btn / .cs-btn--block / .cs-btn--secondary) are the
 * SPRINT CS shared contract, defined once in /styles.css by W1 (Service
 * polish) — this file only uses them, never redefines them (SPRINT-CS-SPEC.md
 * "Shared names"). Until W1's styles.css change lands, a .cs-btn button here
 * renders as plain text with no box — that is expected mid-sprint, not a
 * bug in this file.
 *
 * Also used, lightly, by /links.html (the .bk-linkspage/.bk-linkbtn rules
 * near the end) so that page doesn't need a stylesheet of its own.
 */

.bk-head{background:#fff;border-bottom:1px solid var(--border);padding:16px 0}
.bk-head .wrap{display:flex;align-items:center;justify-content:center}
.bk-logo{display:inline-flex}
.bk-logo img{height:26px;display:block}

.bk-hero{background:linear-gradient(155deg,var(--tsl-navy),var(--tsl-navy-2));color:#fff;padding:40px 0 36px}
.bk-hero .wrap{display:grid;gap:28px}
.bk-hero .eyebrow{color:var(--tsl-gold-soft);margin-bottom:14px}
.bk-hero h1{font-family:var(--font-display);font-weight:300;font-size:clamp(26px,4.2vw,38px);line-height:1.16;margin:0 0 14px}
.bk-sub{font-size:15.5px;line-height:1.6;color:#d9d5ea;margin:0 0 18px;max-width:52ch}
.bk-repeat{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:13px 16px;font-size:13px;line-height:1.55;text-align:left;max-width:520px;margin:0 0 22px}
.bk-getlist{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:11px;max-width:480px}
.bk-getlist li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.48}
.bk-getlist svg{width:17px;height:17px;flex:none;color:var(--tsl-green,#1f8a5b);margin-top:2px}
.bk-pricerow{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.bk-price{font-family:var(--font-display);font-weight:300;font-size:40px;color:#fff;line-height:1}
.bk-price sup{font-size:19px;vertical-align:top;position:relative;top:5px}
.bk-hst{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tsl-gold-soft);margin-top:4px}
.bk-credit{font-size:12.5px;color:#d9d5ea;line-height:1.5;margin:0;max-width:300px}
.bk-credit span{display:block;font-size:11px;color:#a9a3c4}

/* ---- booking card ---- */
.bk-book{background:#fff;color:var(--text-strong);border-radius:var(--radius-lg,16px);padding:26px 24px;box-shadow:0 24px 50px -20px rgba(0,0,0,.35)}
.bk-book h2{font-family:var(--font-display);font-weight:500;font-size:18px;margin:0 0 4px;text-align:center}
.bk-book .bk-bookhint{font-size:12.5px;color:var(--text-muted);text-align:center;margin:0 0 18px;line-height:1.5}
.bk-book .frow{margin-bottom:0}
.bk-book .field{margin-bottom:14px}
.bk-chiplabel{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);display:block;margin-bottom:8px}
.bk-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.bk-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border-strong);border-radius:100px;padding:8px 14px;font-size:12.5px;font-weight:600;color:var(--text-muted);cursor:pointer;background:#fff;transition:all .15s ease}
.bk-chip:has(input:checked){background:var(--tsl-navy);color:#fff;border-color:var(--tsl-navy)}
.bk-chip input{accent-color:var(--tsl-crimson);width:14px;height:14px}
.bk-hp{display:none!important}
.bk-bookfoot{font-size:11.5px;color:var(--text-muted);text-align:center;margin:12px 0 0;line-height:1.5}
.bk-msg{margin-top:12px;font-size:13px;text-align:center}
.bk-msg[hidden]{display:none}
.bk-done{display:none;text-align:center;padding:6px 2px}
.bk-done.show{display:block}
.bk-done svg{width:44px;height:44px;color:var(--tsl-green,#1f8a5b);margin:0 auto 10px;display:block}
.bk-done h2{margin-bottom:8px}
.bk-done p{font-size:13.5px;color:var(--text-muted);line-height:1.55;margin:0 0 6px}
.bk-form.hide{display:none}

/* ---- no-JS server-rendered response pages (api/contact.js isCall branch,
   Sprint CS verify-fixer) — .bk-done above is reused as-is (with "show"
   already applied server-side, since there's no JS here to add it); this
   adds only the plain wrapper and the new error variant. ---- */
.bk-serverpage{max-width:440px;margin:0 auto;padding:56px 20px 72px;text-align:center}
.bk-errpage svg{width:46px;height:46px;color:var(--tsl-crimson);margin:0 auto 14px;display:block}
.bk-errpage h2{margin-bottom:8px}
.bk-errpage p{font-size:13.5px;color:var(--text-muted);line-height:1.55;margin:0 0 16px}

/* ---- proof / counts / situations ---- */
.bk-section{padding:44px 0}
.bk-section h3{font-family:var(--font-display);font-weight:500;font-size:22px;margin:0 0 8px}
.bk-hint{font-size:12px;color:var(--text-muted);line-height:1.5;margin:0 0 18px}
.bk-proofgrid{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:24px}
.bk-proofcard{background:var(--bg-raised);border-left:3px solid var(--tsl-gold);border-radius:0 10px 10px 0;padding:15px 17px;font-size:13.5px;line-height:1.55}
.bk-proofcard a{display:block;margin-top:9px;font-size:12.5px;font-weight:600;color:var(--tsl-crimson);text-decoration:none}
.bk-proofcard a:hover{text-decoration:underline}
.bk-counts{background:#fff;border:1px solid var(--border-strong);border-radius:var(--radius,14px);padding:18px;box-shadow:var(--shadow-card);margin-bottom:24px}
.bk-countsrow{display:flex;align-items:baseline;gap:10px;padding:4px 0}
.bk-countsrow b{font-family:var(--font-display);font-size:19px;color:var(--tsl-crimson);flex:none;min-width:60px}
.bk-countsrow span{font-size:12.5px;color:var(--text-muted);line-height:1.4}
/* Adversarial fixer (sales, low): was color:#8a8378 (3.33:1 on --bg-raised,
 * below WCAG AA's 4.5:1 for this 10.5px caption text). Swapped to the site's
 * existing muted-text token (6.24:1 here), already used for .bk-hint on
 * this same page. */
.bk-countscap{font-size:10.5px;color:var(--text-muted);line-height:1.55;margin:10px 0 0;padding-top:10px;border-top:1px dashed var(--border)}
.bk-countscap code{background:var(--bg-raised);padding:1px 4px;border-radius:4px;font-size:10px}
.bk-situations{background:var(--bg-raised);border-radius:var(--radius,14px);padding:20px}
.bk-situations h4{font-family:var(--font-display);font-weight:500;font-size:16px;margin:0 0 4px}
.bk-situations ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:9px}
.bk-situations li{font-size:13.5px;line-height:1.5;color:#3a352e}

/* ---- reviews (empty until W5's injector fills it; the injected .revs-strip
   component supplies its own "What clients say" heading — see the generator
   comment above the marker — so this section has no h3 of its own) ---- */
.bk-reviews{padding:0 0 44px}
.bk-reviews .bk-hint{margin-bottom:16px}
/* Adversarial fixer (sales, medium): .revs-strip (reviews.css) already carries
 * its own padding:0 var(--gutter), sized for use at top level (index.html's
 * homeband, the 9 service pages, calculator pages). Here it sits inside this
 * template's <section class="bk-reviews"><div class="wrap-narrow">, which
 * carries that same padding — the two stack and double the side inset
 * against every other section on the /book/* pages (measured 36/48/80px vs
 * 18/24/40px at 320/768/1440px). Zero it out in this one nesting only. */
.bk-reviews .revs-strip{padding:0}

/* ---- steps ---- */
.bk-steps{padding:0 0 44px}
.bk-step{display:flex;gap:13px;margin-bottom:16px}
.bk-stepno{flex:none;width:28px;height:28px;border-radius:50%;background:var(--tsl-navy);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:13.5px}
.bk-step b{display:block;font-size:14.5px;margin-bottom:2px}
.bk-step span{font-size:13px;color:var(--text-muted);line-height:1.45}
/* .bk-stepno is itself a span, so the descendant rule above (specificity
 * 0,1,1) would otherwise win over a bare .bk-stepno color rule (0,1,0) and
 * paint the step-number digits in the muted body-copy color instead of the
 * light gold-soft they need against the navy circle. Scope under .bk-step
 * (0,2,0) so this wins regardless of source order. */
.bk-step .bk-stepno{color:var(--tsl-gold-soft)}

/* ---- faq ---- */
.bk-faq{padding:0 0 44px}

/* ---- final cta band ---- */
/* flex + align-items:center on .wrap (not text-align, and not on .bk-final
 * itself — same split as .bk-foot below) so the centring holds no matter
 * whether .cs-btn (defined by W1 in styles.css) ends up an inline or a
 * block-level element, and so .wrap still sizes as a normal block box
 * (max-width:var(--maxw), full column width) instead of becoming a
 * shrink-to-fit flex item of .bk-final — that shrink-wrap was freezing the
 * CTA button's width between the 470px and 701px breakpoints instead of
 * letting .cs-btn's 100% track the actual column width. */
.bk-final{background:var(--tsl-navy);color:#fff;text-align:center;padding:48px 0}
.bk-final .wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
.bk-final h3{font-family:var(--font-display);font-weight:400;font-size:22px;margin:0}
.bk-msglink{font-size:13px;font-weight:600;color:#d9d5ea;text-decoration:underline}

/* ---- slim footer ---- */
.bk-foot{background:#151130;color:#cfcadf;padding:26px 0;font-size:12px;text-align:center}
.bk-foot .wrap{display:flex;flex-direction:column;gap:7px}
.bk-foot b{color:#fff}
.bk-foot a{color:var(--tsl-gold-soft)}
.bk-foot .fine{font-size:11px;color:#9a93b8;max-width:70ch;margin:0 auto;line-height:1.5}

/* ---- desktop: hero grid + 3-col proof ---- */
@media(min-width:860px){
  .bk-hero .wrap{grid-template-columns:1.1fr .9fr;align-items:start;padding-top:14px}
  .bk-book{position:sticky;top:24px}
  .bk-proofgrid{grid-template-columns:repeat(2,1fr)}
  .bk-stepsgrid{display:flex;gap:30px}
  .bk-stepsgrid .bk-step{flex:1}
}
@media(min-width:1080px){
  .bk-proofgrid{grid-template-columns:repeat(4,1fr)}
}

/* ---- /links page (shares this stylesheet rather than getting its own) ---- */
.bk-linkspage{max-width:420px;margin:0 auto;padding:52px 20px 60px;text-align:center;display:flex;flex-direction:column;align-items:center}
.bk-linkspage .bk-logo{margin-bottom:6px}
.bk-linkssub{font-size:13px;color:var(--text-muted);margin:8px 0 28px}
.bk-linkspage .cs-btn{margin-bottom:12px;width:100%}
.bk-linksdiv{height:1px;background:var(--border);margin:4px 0 16px;width:100%}

@media(max-width:600px){
  .bk-section{padding:34px 0}
  .bk-final{padding:38px 0}
}