/* The booking page, medicare.myanchorgroup.com/book (redesign, 2026-10-13; rounds 2 to 5 the same day).
   Loaded after page.css, which supplies the tokens (:root), the fonts, the reset and the legal
   footer. Everything here is prefixed bk- or scoped to .book-page, so the registration, thank-you
   and join pages, which share page.css, cannot change.

   Ground. Everything above the footer is one navy section (.bk-sect) with the Anchor contour lines
   in it: the top bar, the headline, Danny, the steps and the white calendar card all sit on it, and
   it runs on past the card by the section's bottom padding. It wraps the content, so as the calendar
   grows (picking a time turns it into a form) the navy grows with it. The footer follows directly.

   Layout. One grid, three widths:
   - phones: a compact hero, the calendar card, then the steps and the phone alternative. The hero
     is held tight, and the calendar drops its own info box on its month step (the pasted calendar
     CSS, round 4), so all five rows of a month's dates sit on an iPhone 13's first screen (390 x 664).
   - 700 to 1199px: the same single column, the hero split in two (the headline and the line under
     it on the left, Danny on the right) so it uses the width. From 760px the card is wide enough
     for GoHighLevel's side-by-side layout (month and times together), which it switches to at an
     iframe width of 726px.
   - 1200px and up: two columns. Left (.bk-side, up to 408px): the headline, Danny, the steps and
     the phone. Right: the 760px calendar card. On a screen tall enough to hold it, the left column
     stays in view beside the card while the card is taller than the screen.
   On phones and tablets .bk-side is display: contents, so its two parts take their own rows and the
   steps follow the card.

   Type: three sizes outside the calendar. The headline, the body (--bk-body, 18px, 19px from 760px)
   and one small size (--bk-small, 16px, the floor). Bricolage Grotesque for the headline only. */

.book-page {
  --bk-body: 18px;
  --bk-small: 16px;
  --bk-bar-h: 58px;
  --bk-rule: rgba(255, 255, 255, 0.16);
  /* The placeholder in the calendar's own pale gold (its open days, its month and back buttons), so
     nothing changes colour when the calendar arrives (round 5). */
  --bk-skel: #F7F1E1;
  font-size: var(--bk-body);
  /* Navy behind everything, so a phone's overscroll above the bar or below the footer stays navy. */
  background: var(--ink);
}

/* ------------------------------------------------------------ the section */
/* The contour lines (myanchorgroup.com's hero texture) at about a quarter strength over flat navy,
   so the ground still reads as Anchor navy and every line of type on it keeps full contrast. They
   sit at the top (behind the bar and the headline) and again at the bottom (behind the steps on
   phones, the fallback link on desktop), each fading into plain navy, so the image is never
   stretched however tall the section grows. The fade is an opaque navy gradient inside the layer;
   the layer's opacity then turns it into navy over navy. */
.bk-sect { position: relative; isolation: isolate; background-color: var(--ink); color: var(--on-navy); }
.bk-sect::before, .bk-sect::after {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0;
  pointer-events: none; opacity: 0.26;
  background-repeat: no-repeat;
}
.bk-sect::before {
  top: 0;
  /* the image's own height at the width it is drawn (900 x 509, never narrower than 900px) */
  height: min(100%, max(509px, 56.6vw));
  background-image: linear-gradient(to bottom, rgba(10, 22, 40, 0) 42%, var(--ink) 96%), url("/assets/anchor-topo-900.webp");
  background-size: 100% 100%, max(100%, 900px) auto;
  background-position: 0 0, center top;
}
.bk-sect::after {
  bottom: 0; height: min(40%, 440px);
  background-image: linear-gradient(to top, rgba(10, 22, 40, 0) 30%, var(--ink) 100%), url("/assets/anchor-topo-900.webp");
  background-size: 100% 100%, max(100%, 900px) auto;
  background-position: 0 0, center bottom;
}

/* ---------------------------------------------------------------- top bar */
.bk-bar { position: relative; z-index: 3; height: var(--bk-bar-h); color: var(--on-navy); }
.bk-bar-in {
  height: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.bk-logo { display: block; width: auto; height: 23px; }

/* The office phone: a plain link (no pill, no circle). Hover and focus draw a gold rule under the
   number from the left and ring the handset once; with reduced motion the rule simply appears. */
.bk-call {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 0 2px;
  color: var(--on-navy); text-decoration: none; white-space: nowrap;
  font-size: var(--bk-body); font-weight: 600; letter-spacing: 0.01em;
  border-radius: 8px;
}
.bk-call svg { flex: none; color: var(--gold); width: 20px; height: 20px; }
.bk-call span { position: relative; padding: 4px 0; }
.bk-call span::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left center;
}
.bk-call:hover span::after, .bk-call:focus-visible span::after { transform: scaleX(1); }
.bk-sect a:focus-visible { outline-color: var(--on-navy); }
.bk-call:focus-visible { outline-offset: 4px; }

/* -------------------------------------------------------------- the grid */
.bk-main {
  display: grid;
  grid-template-columns: [full-start] 16px [main-start] minmax(0, 1fr) [main-end] 16px [full-end];
  padding-bottom: 40px;
}
.bk-side { display: contents; }
.bk-intro { grid-column: main; grid-row: 1; padding: 2px 0 16px; }
.bk-cardcol { grid-column: main; grid-row: 2; position: relative; min-width: 0; }
.bk-next { grid-column: main; grid-row: 3; padding-top: 26px; }

/* ------------------------------------------------------------------ hero */
.bk-h1 {
  font-family: var(--display); font-weight: 800;
  font-size: 42px; line-height: 0.98; letter-spacing: -0.02em;
  margin: 0; color: var(--on-navy); text-wrap: initial;
}
.bk-h1-em { display: block; color: var(--gold); }
.bk-sub {
  margin-top: 6px; max-width: 30em;
  font-size: var(--bk-body); line-height: 1.36; color: var(--on-navy-2);
}
.bk-host { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.bk-host-photo {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; object-position: 50% 12%;
  border: 2px solid var(--gold);
}
.bk-host-text { margin: 0; line-height: 1.3; min-width: 0; }
.bk-host-name { display: block; font-size: var(--bk-body); font-weight: 700; color: var(--on-navy); }
.bk-host-cred { display: block; font-size: var(--bk-small); color: var(--on-navy-2); }
/* Where the line has to break, it breaks after "agent," and never inside the firm's name. */
.bk-nowrap { white-space: nowrap; }

/* -------------------------------------------------------------- the card */
.bk-card {
  position: relative;
  background: var(--white);
  color: var(--ink);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), 0 30px 60px -24px rgba(0, 0, 0, 0.55);
  container-type: inline-size;
}
/* The calendar draws a 1px frame of its own (and, side by side, 16px of white above and below it).
   The iframe runs past the card on every side by exactly that much, so the card's rounded edge is
   the only frame. form_embed.js sets the height inline, always 5px over the calendar's own. */
.bk-frame {
  display: block; width: calc(100% + 2px); height: 700px;
  margin: -1px -1px -6px; border: 0; overflow: hidden;
}
/* With scripts on, the calendar stays invisible until form_embed.js shows it (the page script then
   marks the card ready); its inline left:-9999px is pulled back into the card so it lays out at the
   card's own width. The placeholder holds the card meanwhile. Without scripts the calendar simply
   shows at a fixed height and no placeholder appears. */
.js .bk-card:not(.is-ready) .bk-frame {
  position: absolute !important; top: 0 !important; left: 0 !important;
  visibility: hidden !important; opacity: 0 !important; pointer-events: none !important;
}

/* The placeholder: the calendar's own month step, measured in Playwright with the round 4 calendar
   CSS (no info box on that step; 2026-10-13), so the card is 535px tall loading or loaded in the
   narrow layout, 666px side by side, and the month, the weekdays and the six rows of dates sit where
   the calendar's will. In the narrow layout the line sits in the band the calendar leaves empty at
   its top, and the "Tap a day" line takes its place there once the calendar shows. Side by side the
   card trims that band off, and the line sits where the calendar's "Select Date & Time" will be. */
.bk-ph { display: none; position: relative; height: 535px; padding: 0 17px; }
.js .bk-card:not(.is-ready) .bk-ph { display: block; }
.bk-ph-line {
  position: relative; z-index: 1;
  min-height: 44px; margin: 0; padding: 9px 0 6px;
  font-size: var(--bk-body); line-height: 1.5; color: var(--ink-2);
}
/* Links in a sentence: the padding widens what a finger can hit to 44px or more (the text's own
   21 to 23px plus 24) without moving the line. */
.bk-ph-line a { padding: 12px 0; color: var(--ink); font-weight: 600; text-underline-offset: 3px; }

/* "Tap a day, then a time." Over the calendar's empty top band, on its first step, in the narrow
   layout only (the page script marks the step; side by side the calendar says it itself). Set like
   the loading line, in the same place, so one replaces the other. No background and no taps, so it
   could never hide or block anything under it. */
.bk-tip {
  display: none; position: absolute; z-index: 1; top: 0; left: 17px; right: 17px;
  margin: 0; padding: 9px 0 6px; pointer-events: none;
  font-size: var(--bk-body); line-height: 1.5; font-weight: 600; color: var(--ink);
}
.js .bk-card.is-first .bk-tip { display: block; }
.is-slow .bk-ph { height: auto; min-height: 535px; }
.bk-ph-shape { position: relative; overflow: hidden; }

.bk-ph-head { display: none; }
.bk-ph-month { display: flex; align-items: center; justify-content: center; gap: 46px; height: 44px; margin-top: 6px; }
.bk-ph-month i { display: block; width: 40px; height: 40px; border-radius: 50%; background: var(--bk-skel); }
/* The current month has no previous one, so the calendar draws that arrow with no disc. */
.bk-ph-month i:first-child { background: none; }
.bk-ph-month b { display: block; width: 118px; height: 18px; border-radius: 9px; background: var(--bk-skel); }
.bk-ph-week, .bk-ph-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); justify-items: center; }
.bk-ph-week { height: 20px; margin-top: 19px; align-items: center; }
.bk-ph-week span { display: block; width: 26px; height: 10px; border-radius: 5px; background: var(--bk-skel); }
.bk-ph-grid { margin-top: 4px; grid-auto-rows: 44px; align-items: center; }
.bk-ph-grid span { display: block; width: 34px; height: 34px; border-radius: 50%; background: var(--bk-skel); }
.bk-ph-times { display: none; }

/* Side by side, as the calendar lays itself out from an iframe width of 726px (card 724px). On its
   first step the calendar's top 56px is empty (its title and its info box, both hidden by the pasted
   CSS, sat there), so the card trims 32px more off the top and "Select Date & Time" starts 24px
   down, as far in as it is from the sides. Its other steps put the back button 24px down, so they
   are never trimmed. */
@container (min-width: 724px) {
  .bk-frame { margin: -17px -1px -22px; }
  .js .bk-card.is-first .bk-frame { margin-top: -49px; }
  .js .bk-card.is-first .bk-tip { display: none; }
  .bk-ph { height: 666px; padding: 24px 25px 0; }
  .is-slow .bk-ph { min-height: 666px; }
  /* the line over the shape, on the heading's own line (24px down, 30px tall) */
  .bk-ph-line { position: absolute; top: 24px; left: 25px; right: 25px; min-height: 0; padding: 0; line-height: 30px; }
  .is-slow .bk-ph-line { padding-bottom: 12px; background: var(--white); }
  .bk-ph-head { display: block; visibility: hidden; width: 228px; height: 30px; }
  .bk-ph-body { display: flex; gap: 36px; }
  .bk-ph-cal { flex: 0 0 410px; }
  .bk-ph-month { margin-top: 12px; }
  .bk-ph-week { height: 26px; margin-top: 21px; }
  .bk-ph-grid { margin-top: 6px; grid-auto-rows: 56px; }
  .bk-ph-grid span { width: 44px; height: 44px; }
  .bk-ph-times { display: grid; align-content: start; gap: 19px; flex: 0 1 240px; padding-top: 120px; }
  .bk-ph-times span { display: block; height: 50px; border-radius: 12px; background: var(--bk-skel); }
}
/* The card's own links take the dark focus ring, on white. */
.bk-sect .bk-card a:focus-visible { outline-color: var(--ink); }

/* Under the card, light on navy. */
.bk-after { margin: 6px 0 0; text-align: center; font-size: var(--bk-small); line-height: 1.5; }
.bk-after a {
  display: inline-block; min-height: 44px; padding: 10px 6px;
  color: var(--on-navy-2); text-underline-offset: 4px;
  text-decoration-color: rgba(199, 208, 219, 0.55);
  border-radius: 6px;
}
.bk-after a:hover { color: var(--on-navy); text-decoration-color: var(--gold); }

/* ------------------------------------------------------ what happens next */
.bk-next-title {
  margin: 0 0 14px;
  font-family: var(--body); font-size: var(--bk-small); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.4;
  color: var(--gold);
}
.bk-steps { list-style: none; margin: 0; padding: 0; counter-reset: bk-step; display: grid; gap: 10px; }
.bk-steps li {
  counter-increment: bk-step;
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px;
  font-size: var(--bk-body); line-height: 1.45; color: var(--on-navy);
}
.bk-steps li::before {
  content: counter(bk-step);
  font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gold);
}
.bk-alt {
  display: flex; align-items: center; gap: 12px;
  margin: 24px 0 0; padding-top: 12px;
  border-top: 1px solid var(--bk-rule);
  font-size: var(--bk-body); line-height: 1.45; color: var(--on-navy-2);
}
.bk-alt svg { flex: none; color: var(--gold); }
.bk-alt a {
  display: inline-block; padding: 10px 0;
  color: var(--on-navy); font-weight: 700; white-space: nowrap;
  text-decoration: underline; text-decoration-color: var(--gold);
  text-decoration-thickness: 2px; text-underline-offset: 5px;
}

/* ---------------------------------------------------------------- footer */
/* page.css's legal footer, unchanged, with the Anchor logo in place of the typed name, and its
   edges lined up with the page above. Its gold rule is the line between the section and it. */
.book-page .legal-brand .bk-foot-logo { display: block; width: auto; height: 24px; }
.book-page .legal .shell { padding: 0 16px; }

/* ================================================================ widths */
@media (min-width: 760px) {
  .book-page { --bk-body: 19px; --bk-bar-h: 76px; }
  .bk-sect::before {
    height: min(100%, max(906px, 56.6vw));
    background-image: linear-gradient(to bottom, rgba(10, 22, 40, 0) 42%, var(--ink) 96%), url("/assets/anchor-topo-1600.webp");
    background-size: 100% 100%, max(100%, 1600px) auto;
  }
  .bk-sect::after {
    height: min(40%, 560px);
    background-image: linear-gradient(to top, rgba(10, 22, 40, 0) 30%, var(--ink) 100%), url("/assets/anchor-topo-1600.webp");
    background-size: 100% 100%, max(100%, 1600px) auto;
  }
  .bk-bar-in { padding: 0 32px; max-width: 944px; box-sizing: border-box; }
  .bk-logo { height: 27px; }
  .bk-call svg { width: 22px; height: 22px; }

  .bk-main {
    grid-template-columns: [full-start] minmax(32px, 1fr) [main-start] minmax(0, 880px) [main-end] minmax(32px, 1fr) [full-end];
    padding-bottom: 64px;
  }
  .bk-intro { padding: 36px 0 40px; }
  .bk-next { padding-top: 36px; }
  .bk-h1 { font-size: 56px; line-height: 1.02; }
  .bk-sub { margin-top: 14px; max-width: 22em; line-height: 1.45; }
  .bk-host { gap: 16px; margin-top: 24px; }
  .bk-host-photo { width: 72px; height: 72px; }
  .bk-after { margin-top: 10px; }

  .book-page .legal p { font-size: var(--bk-body); }
  .book-page .legal .shell { max-width: 944px; padding: 0 32px; }
}

/* Tablets: the hero in two. The headline and the line under it on the left, Danny on the right,
   past a hairline, his photo larger, so the hero has no empty half above the full-width card. */
@media (min-width: 700px) and (max-width: 1199px) {
  .bk-intro {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    /* Danny's column is the taller one; any height left over goes above the headline, so the
       headline and the line under it stay together. */
    grid-template-rows: 1fr auto;
    column-gap: 40px; align-items: end;
  }
  .bk-h1, .bk-sub { grid-column: 1; }
  .bk-sub { margin-bottom: 4px; }
  .bk-host {
    grid-column: 2; grid-row: 1 / span 2;
    flex-direction: column; align-items: flex-start; gap: 14px;
    margin: 0; padding: 4px 0 4px 36px;
    border-left: 1px solid var(--bk-rule);
  }
  .bk-host-photo { width: 96px; height: 96px; }
  .bk-host-cred { max-width: 13em; }
}

@media (min-width: 1200px) {
  .book-page { --bk-bar-h: 84px; }
  .bk-bar-in { max-width: 1264px; }
  .bk-logo { height: 29px; }

  .bk-main {
    grid-template-columns:
      [full-start] minmax(32px, 1fr)
      [left-start] minmax(clamp(0px, 100% - 828px, 408px), 408px) [left-end]
      40px
      [right-start] minmax(724px, 760px) [right-end]
      minmax(32px, 1fr) [full-end];
    padding-bottom: 72px;
  }
  /* (The left column's floor gives it the width first, between 1200 and about 1240px, so the steps
     keep to one line; the card gives up to 36px of its 760 there and stays wide enough, at 724px,
     for GoHighLevel's side-by-side layout.) */
  .bk-side { display: block; grid-column: left; grid-row: 1; align-self: start; margin-top: 52px; }
  .bk-intro, .bk-next { padding: 0; }
  .bk-next { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--bk-rule); }
  .bk-cardcol { grid-column: right; grid-row: 1; padding-top: 44px; }
  .bk-h1 { font-size: clamp(54px, 4.6vw, 64px); }

  .book-page .legal .shell { max-width: 1264px; }
}
/* The left column stays beside the card while the card is taller than the screen (the booking form
   after a time is picked runs to about 1070px). Only where the whole column (about 620px at most)
   fits on screen with room to spare, so nothing in it is ever out of reach. Its grid cell ends at the fallback link, so it stops there. */
@media (min-width: 1200px) and (min-height: 700px) {
  .bk-side { position: sticky; top: 32px; }
}

/* ---------------------------------------------------------------- motion */
/* Everything that moves is inside this gate. With reduced motion nothing waits on an animation:
   the gold rule under the phone number simply appears, the placeholder is still, and the calendar
   shows at once. */
@media (prefers-reduced-motion: no-preference) {
  .bk-call span::after { transition: transform 0.32s var(--ease); }
  .bk-call:hover svg, .bk-call:focus-visible svg { animation: bk-ring 0.6s ease-in-out 1; }

  .bk-ph-shape::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 70%);
    transform: translateX(-100%);
    animation: bk-sheen 2.6s ease-in-out infinite;
  }
  .js .bk-card.is-ready .bk-frame { animation: bk-in 0.3s ease-out backwards; }
}
@keyframes bk-ring {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-14deg); }
  40% { transform: rotate(11deg); }
  60% { transform: rotate(-7deg); }
  80% { transform: rotate(4deg); }
}
@keyframes bk-sheen { to { transform: translateX(100%); } }
@keyframes bk-in { from { opacity: 0; } }