/* =========================================================================
   Page-specific styles: /features/photography-booking-software
   Loads after css/studiofolio-seo.css and css/editorial.css. Built in Stage
   M9B.2. Every image is a real capture of the booking page or the editor
   (tools/marketing-shots, booking-* shots) from the fictional Willow &
   Stone demo. Until licensed photography exists (docs/marketing/
   PHOTO_REQUESTS.md, P3) the opening pairs the packages with the phone
   booking flow; the slot for the full public page is documented in
   docs/marketing/FUTURE_IMAGERY.md and marked data-p3-slot below.
   ========================================================================= */

/* Breadcrumb: as on the other feature pages. */
.breadcrumb.wrap { padding-left: var(--gutter); padding-right: var(--gutter); }
nav.breadcrumb { margin-top: 1em; margin-bottom: 1em; }  /* vertical only: .wrap centres it */
.breadcrumb .sep { color: var(--text-muted); opacity: .55; }
.breadcrumb a { display: inline-block; padding: 5px 0; margin: -5px 0; }

.bk-intro { margin: 16px 0 0; max-width: 36rem; color: var(--text-muted); font-size: 16px; line-height: 1.65; }
.bk-note { margin: 16px 0 0; color: var(--text-muted); font-size: 14px; line-height: 1.6; }
.bk-link { display: inline-block; padding: 10px 0; font-size: 14px; font-weight: var(--weight-bold); color: var(--gold-ink); }
.bk-link:hover { color: var(--text); }
.bk-label { display: block; margin: 0 0 12px; font-size: var(--text-eyebrow); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--gold-ink); }
.bk-section-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 18px var(--split-gap); align-items: end; }
.bk-section-head p { margin: 0; color: var(--text-muted); font-size: 16px; line-height: 1.65; max-width: 36rem; }
.shot figcaption { font-size: 13px; }

/* ---- Opening ---- */
.bk-hero { padding: clamp(24px, 4vw, 56px) 0 clamp(56px, 7vw, 96px); }
.bk-hero__copy { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 24px var(--split-gap); align-items: end; }
.bk-hero h1 { font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
.bk-hero h1 .kicker { font-family: var(--font-body); line-height: 1.6; margin-bottom: 18px; }
.bk-hero h1 .h1-line { display: block; max-width: 12em; }
.bk-lede { margin: 0; max-width: 32rem; color: var(--text-muted); font-size: 18px; line-height: 1.6; }
.bk-actions { margin-top: 26px; }
.bk-facts { margin: 14px 0 0; color: var(--text-muted); font-size: 13px; }
.bk-facts span[aria-hidden] { margin: 0 6px; }
.bk-fact { white-space: nowrap; }
/* The sand plate that carries the opening captures. Once P3 photography is
   licensed, the full public booking page replaces this composition (the
   data-p3-slot element); the plate itself stays. */
.bk-plate { margin-top: clamp(36px, 5vw, 64px); background: var(--bg-alt); border-radius: var(--radius-lg); padding: clamp(16px, 4vw, 56px); }
.bk-plate .shot img { box-shadow: 0 1px 2px rgba(33,31,27,.05), 0 14px 32px -16px rgba(64,54,38,.28); }
.bk-hero__pair { display: grid; grid-template-columns: minmax(0, 976fr) minmax(0, 300fr); gap: clamp(16px, 3vw, 40px); align-items: center; }
.bk-hero__pair .shot--phone { max-width: none; }
.bk-plate__caption { margin: 18px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-muted); }

/* ---- Design ---- */
.bk-design { padding-top: 0; }
.bk-design > .wrap { border-top: 1px solid var(--border-strong); padding-top: clamp(48px, 6vw, 80px); }
.bk-specimen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); margin: clamp(36px, 5vw, 56px) 0 0; }
.bk-specimen h3 { font-family: var(--font-body); font-size: var(--text-eyebrow); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); margin: 0 0 12px; }
.bk-specimen ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--text); }
.bk-specimen li { padding: 9px 0; border-bottom: 1px solid var(--border-strong); font-size: 15px; font-weight: var(--weight-semibold); line-height: 1.35; }
.bk-specimen li small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: var(--weight-regular); color: var(--text-muted); }
.bk-specimen .bk-note { font-size: 13px; margin-top: 10px; }
.bk-styles li { font-family: var(--font-display); font-size: 19px; font-weight: var(--weight-bold); }
.bk-swatches { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px 0 12px; border-top: 1px solid var(--text); border-bottom: 1px solid var(--border-strong); }
.bk-swatches span { width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(33,31,27,.12); }
.bk-tones { display: flex; gap: 0; margin-top: 0; }
.bk-tones li { flex: 1; }
.bk-design__shot { margin-top: clamp(40px, 5vw, 64px); }
.bk-preview { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--split-gap); align-items: center; margin-top: clamp(48px, 6vw, 80px); }
.bk-preview p { margin: 14px 0 0; color: var(--text-muted); font-size: 16px; line-height: 1.65; max-width: 30rem; }
.bk-preview .shot { max-width: 680px; justify-self: end; width: 100%; }

/* ---- From blank page to booking-ready ---- */
.bk-steps { list-style: none; margin: clamp(36px, 5vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); counter-reset: bk-step; }
.bk-steps > li { counter-increment: bk-step; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(20px, 2.5vw, 32px); }
.bk-steps h3 { display: flex; align-items: baseline; gap: 12px; margin: 0; font-size: 22px; line-height: 1.25; }
.bk-steps h3::before { content: counter(bk-step); flex: none; font-family: var(--font-body); font-size: 13px; font-weight: var(--weight-heavy); color: var(--gold-ink); }
.bk-steps p { margin: 8px 0 0; color: var(--text-muted); font-size: 15px; line-height: 1.6; }
/* The step's capture sits at the bottom of its card, never above 1x. */
.bk-steps .shot { margin-top: auto; padding-top: 22px; }
.bk-step__live { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 22px; }
.bk-step__live .shot { margin-top: 0; padding-top: 0; }
.bk-steps .shot img { box-shadow: none; }
.bk-step__shot--live { max-width: 264px; }
.bk-step__shot--page { width: 100%; max-width: 280px; }
.bk-step__shot--page img { border-radius: 22px 22px 0 0; }
.bk-step__shot--style { max-width: 460px; }
.bk-step__shot--narrow { max-width: 390px; }
.bk-steps__note { margin-top: 24px; max-width: 46rem; }

/* ---- Packages ---- */
.bk-packages__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--split-gap); align-items: start; margin-top: clamp(36px, 5vw, 56px); }
.bk-facts-list { margin: 0; }
.bk-facts-list > div { border-top: 1px solid var(--text); padding: 16px 0 18px; }
.bk-facts-list dt { font-weight: var(--weight-bold); font-size: 15.5px; }
.bk-facts-list dd { margin: 6px 0 0; color: var(--text-muted); font-size: 15px; line-height: 1.6; }
.bk-packages__shots { display: grid; gap: var(--grid-gap); }
.bk-extras { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--split-gap); align-items: center; margin-top: clamp(48px, 6vw, 80px); }
.bk-extras .shot { max-width: 600px; }
.bk-deposit { border-left: 2px solid var(--gold); padding-left: 20px; }
.bk-deposit h3 { font-size: 24px; margin: 0; }
.bk-deposit p { margin: 10px 0 0; color: var(--text-muted); font-size: 15.5px; line-height: 1.65; }

/* ---- The client's side (ink) ---- */
.bk-client h2 { color: #fff; }
.bk-client .bk-section-head p { color: var(--ink-soft); }
.bk-flow { list-style: none; margin: clamp(36px, 5vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 32px); }
.bk-flow li { margin: 0; }
/* The scrolling container on narrow screens; focusable so the arrow keys
   scroll it. Its focus ring shows at every width. */
.bk-flow-region:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 4px; }
.bk-flow-hint { display: none; margin: 28px 0 0; font-size: 13px; font-weight: var(--weight-semibold); color: var(--ink-soft); }
.bk-flow h3 { margin: 0 0 14px; font-family: var(--font-body); font-size: 14px; font-weight: var(--weight-bold); letter-spacing: 0; color: #fff; }
.bk-flow h3 span { display: block; margin-bottom: 4px; font-size: var(--text-eyebrow); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--gold); }
.bk-flow .shot--phone { max-width: none; }
.bk-flow .shot img { border-color: var(--ink-panel-border); box-shadow: none; }
.bk-flow figcaption { color: var(--ink-soft); }
.bk-flow figcaption b { color: #fff; }
.bk-promise { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 18px var(--split-gap); margin-top: clamp(40px, 5vw, 64px); padding-top: 28px; border-top: 1px solid var(--ink-panel-border); }
.bk-promise blockquote { margin: 0; font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); line-height: 1.2; color: #fff; }
.bk-promise blockquote p { margin: 0; }
.bk-promise blockquote p::before { content: "\201C"; color: var(--gold); }
.bk-promise blockquote p::after { content: "\201D"; color: var(--gold); }
.bk-promise > p { margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.65; }

/* ---- After they book ---- */
.bk-after__row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--split-gap); align-items: start; margin-top: clamp(40px, 5vw, 64px); }
.bk-after__row + .bk-after__row { padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--border-strong); }
.bk-after__row h3 { margin: 0; font-size: var(--text-h3); line-height: 1.2; }
.bk-after__row p { margin: 12px 0 0; color: var(--text-muted); font-size: 15.5px; line-height: 1.65; }
.bk-will { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--text); }
.bk-will li { padding: 11px 0; border-bottom: 1px solid var(--border-strong); font-size: 15px; line-height: 1.55; }
.bk-confirm-shot { max-width: 488px; }

/* ---- Plans ---- */
.bk-plans .bk-section-head { align-items: start; }
.bk-plans .bk-section-head .bk-intro { margin-top: 16px; }
.bk-plans .bk-section-head p + p { margin-top: 8px; }
.bk-planlist { margin: 0; }
.bk-planlist > div { border-top: 1px solid var(--text); padding: 18px 0 22px; }
.bk-planlist dt { font-family: var(--font-display); font-size: 24px; font-weight: var(--weight-bold); }
.bk-planlist dt span { display: block; margin-top: 4px; font-family: var(--font-body); font-size: 14px; font-weight: var(--weight-semibold); color: var(--gold-ink); }
.bk-planlist dd { margin: 10px 0 0; color: var(--text-muted); font-size: 15.5px; line-height: 1.6; }

/* ---- FAQ ---- */
#faq details p { font-size: 15px; line-height: 1.65; }
#faq summary { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
#faq summary::after { float: none; flex: none; }

/* ---- Closing ---- */
.bk-end { padding-top: 0; }
.bk-end__inner { border-top: 1px solid var(--border-strong); padding-top: clamp(48px, 6vw, 80px); }
.bk-end__title { max-width: 14em; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); line-height: 1.08; letter-spacing: -0.02em; }
.bk-end__actions { display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; margin-top: 28px; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .bk-specimen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .bk-hero__copy, .bk-section-head, .bk-preview, .bk-packages__grid, .bk-extras, .bk-promise, .bk-after__row { grid-template-columns: minmax(0, 1fr); }
  .bk-preview .shot { justify-self: start; }
  .bk-extras .bk-deposit { order: -1; }
}
@media (max-width: 860px) {
  .bk-steps { grid-template-columns: minmax(0, 1fr); }
  /* The four phone steps become a row that scrolls inside itself. */
  .bk-flow-hint { display: block; }
  .bk-flow-region { overflow-x: auto; scroll-snap-type: x mandatory; margin: 14px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 12px; scroll-padding-left: var(--gutter); }
  .bk-flow-region:focus-visible { outline-offset: -2px; }
  .bk-flow { display: flex; gap: 16px; width: max-content; margin: 0; }
  .bk-flow li { flex: 0 0 auto; width: min(260px, 72vw); scroll-snap-align: start; }
}
@media (max-width: 640px) {
  .bk-lede { font-size: 17px; }
  .bk-actions .btn, .bk-end__actions .btn { width: 100%; }
  /* Phones see the phone capture of the packages (art-directed), so the
     separate phone step would only repeat it; it returns in the flow below. */
  .bk-hero__pair { grid-template-columns: minmax(0, 1fr); }
  .bk-hero__phone { display: none; }
  /* The same two screens appear readably on phones in the hero and the
     booking steps below; the desktop captures would be too small here. */
  .bk-packages__shots, .bk-extras > .shot { display: none; }
  .bk-packages__grid { margin-top: 28px; }
  .bk-extras { margin-top: 32px; }
  .bk-specimen { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .bk-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .bk-steps h3 { font-size: 20px; }
  #faq h2 { font-size: 28px; }
}
@media (max-width: 380px) {
  .bk-hero h1 .kicker { letter-spacing: .09em; }
  .bk-hero h1 .kicker::before { display: none; }
  .ed-h2, .bk-end__title, #faq h2 { font-size: 26px; }
}
@media (max-width: 340px) {
  .bk-hero h1 .kicker { font-size: 10px; letter-spacing: .08em; }
}