/* ============================================================================
   booking-confirmed.css  ·  Post-booking confirmation page (slug: booking-confirmed).
   The payoff screen: Zoho redirects here after a meeting is booked. The unlocked
   cryptex is the reward, the combination accepted. Shared header + footer, sand
   surface, a two-column resolution: the message on the left, the open instrument
   on the right, its diagnostic readout powered on and blue.
   Scoped to .bc-page. Loaded after base.css + sention.css.
   ============================================================================ */

/* ---- WordPress chrome fix (NOT needed in the local preview) ----------------
   On sention.agency the theme enqueues its OWN header.css / footer.css via
   wp_head(), and both paint .site-header and .site-footer white (var(--bg-raised)).
   Those load AFTER our sention.css, so they win, and the shared header/footer flash
   white over the sand page. The other standalone slugs escape this because a WPCode
   snippet dequeues the theme's chrome CSS by slug; booking-confirmed is a new slug
   not on that list yet. Until it is added, force the chrome back onto the sand
   surface. !important because our stylesheet loads before the theme's.
   The definitive fix is to add this slug to the dequeue snippet, after which these
   three rules become harmless. */
.site-header { background-color: transparent !important; }
.site-header--scrolled { background-color: color-mix(in srgb, var(--bg-base) 82%, transparent) !important; }
.site-footer { background-color: var(--bg-base) !important; }

.bc-page {
  background: var(--bg-base);
  color: var(--text-primary);
  overflow-x: clip;
}

/* ----------------------------------------------------------------------------
   LAYOUT  ·  message left, open cryptex right. Stacks on tablet, the cryptex
   landing beneath the message as the payoff (mirrors the home's close section).
   -------------------------------------------------------------------------- */
.bc-page .bc-confirm {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-top: clamp(7rem, 5rem + 6vw, 10rem);   /* clears the fixed header */
  padding-bottom: clamp(4rem, 3rem + 5vw, 7rem);
  padding-inline: var(--container-pad);
  display: grid;
  gap: clamp(2.5rem, 1rem + 4vw, 5.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 940px) {
  .bc-page .bc-confirm {
    grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
  }
}

/* ----------------------------------------------------------------------------
   COPY  ·  the confirmation, in the brand voice.
   -------------------------------------------------------------------------- */
.bc-page .bc-status {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 clamp(1rem, 0.7rem + 1vw, 1.5rem);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}
/* the lit pip: a steady blue dot, the instrument is powered on and resolved */
.bc-page .bc-status__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 55%, transparent);
  animation: bc-ping 2.6s var(--ease-out) infinite;
}
@keyframes bc-ping {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 45%, transparent); }
  70%  { box-shadow: 0 0 0 9px color-mix(in oklab, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .bc-page .bc-status__dot { animation: none; }
}

.bc-page .bc-title {
  margin: 0;
  max-width: 14ch;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4rem);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
  text-wrap: balance;
}
.bc-page .bc-sub {
  margin: clamp(1rem, 0.7rem + 1vw, 1.5rem) 0 0;
  max-width: 46ch;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--text-primary);
}
.bc-page .bc-sub strong {
  font-weight: 500;
  color: var(--ink);
}

/* ---- BRING  ·  what to arrive with. Recovers the briefing that the booking
   page dropped; here, after the commitment, it reads as preparation not friction. */
.bc-page .bc-bring {
  margin: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem) 0 0;
  padding-top: clamp(1.2rem, 0.8rem + 1.2vw, 1.75rem);
  border-top: 1px solid var(--line);
}
.bc-page .bc-bring__label {
  margin: 0 0 0.9rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.bc-page .bc-bring__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.7rem;
}
.bc-page .bc-bring__list li {
  position: relative;
  padding-left: 1.15rem;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--text-primary);
}
.bc-page .bc-bring__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 5px;
  height: 5px;
  background: var(--accent);
}

/* ---- ACTIONS  ·  a mono note for the missing email + a quiet way back ------ */
.bc-page .bc-actions {
  margin: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1.5rem;
}
.bc-page .bc-back {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}
.bc-page .bc-back .arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out);
}
.bc-page .bc-back:hover { color: var(--accent-ink); }
.bc-page .bc-back:hover .arrow { transform: translateX(4px); }
.bc-page .bc-note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.bc-page .bc-note a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bc-page .bc-note a:hover { color: var(--accent-ink); }

/* ----------------------------------------------------------------------------
   INSTRUMENT  ·  the open cryptex, large and frameless (hero treatment), with
   its diagnostic readout powered on and blue. The reward for booking.
   -------------------------------------------------------------------------- */
.bc-page .bc-instrument {
  position: relative;
  margin: 0;
  isolation: isolate;
  /* self-contained entrance: the payoff rises in on load, no JS, no observer */
  animation: bc-rise 0.9s var(--ease-out) 0.15s both;
}
@keyframes bc-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .bc-page .bc-instrument { animation: none; }
}
.bc-page .bc-instrument__img {
  display: block;
  width: 100%;
  max-width: min(44rem, 100%);
  height: auto;
  margin-inline: auto;
  /* a soft blue floor-glow, the instrument lit from within */
  filter: drop-shadow(0 24px 60px color-mix(in oklab, var(--accent) 22%, transparent));
}

/* the readout rides under the steel: hairline-topped mono caption, a real <dl> */
.bc-page .bc-readout {
  margin: clamp(1.1rem, 0.6rem + 1.4vw, 1.85rem) auto 0;
  max-width: min(44rem, 100%);
  padding-top: clamp(0.9rem, 0.5rem + 1.2vw, 1.4rem);
  border-top: 1px solid var(--line-strong);
}
.bc-page .bc-readout__id {
  margin: 0 0 clamp(0.7rem, 0.4rem + 0.8vw, 1.1rem);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.bc-page .bc-readout__id b {
  font-weight: 500;
  color: var(--accent);
}
.bc-page .bc-hud {
  margin: 0;
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 0.6ch;
  row-gap: 0;
  font-family: var(--font-mono);
}
.bc-page .bc-hud-row { display: contents; }
.bc-page .bc-hud-row dt,
.bc-page .bc-hud-row dd {
  font-size: 13px;
  line-height: 2.2;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.bc-page .bc-hud-row dt {
  margin: 0;
  color: #474747;
}
.bc-page .bc-hud-row dt::after { content: ":"; }
.bc-page .bc-hud-row dd {
  margin: 0;
  font-weight: 500;
  color: var(--accent);   /* powered on: this is the resolved state */
}
.bc-page .bc-hud-row dd.is-calm { color: var(--ink); }
/* lit pip before the active readings */
.bc-page .bc-hud-row dd.is-lit::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.55em;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 0.06em;
}
.bc-page .bc-mech {
  margin: clamp(0.85rem, 0.5rem + 0.8vw, 1.25rem) 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(71, 71, 71, 0.55);
}

/* ----------------------------------------------------------------------------
   RESPONSIVE  ·  stacked, the message leads and the cryptex lands beneath it.
   -------------------------------------------------------------------------- */
@media (max-width: 939px) {
  .bc-page .bc-instrument { order: 1; }
  .bc-page .bc-instrument__img { max-width: min(32rem, 88%); }
  .bc-page .bc-readout { max-width: min(32rem, 100%); margin-inline: 0; }
  .bc-page .bc-instrument__img { margin-inline: 0; }
}
@media (max-width: 560px) {
  .bc-page .bc-readout__id { font-size: 11px; }
  .bc-page .bc-hud-row dt,
  .bc-page .bc-hud-row dd { font-size: 12px; line-height: 2; }
}