/* Christmas at Bethlehem Inn: site sections on top of os-refresh.css. Tokens only (tokens.css).
   Every rule traces to an audit item: A-numbers in inventory/mig-wo-2/AUDIT.md (MIG-WO-2, Level 1),
   B-numbers in AUDIT-2b.md (MIG-WO-2b), C-numbers in AUDIT-2c.md (MIG-WO-2c, the 12 November design audit).
   Section padding (C12.1): hero 32 -> 80, about 48 -> 80, photos 40 -> 56, steps 48 -> 64, quotes 48 -> 72,
   clock text panel 48, final CTA 32 -> 40, footer 20 px. Phone value at 390 px, desktop value from 1200 px up. */

/* ---- C3 type roles: line height and tracking per heading level; label size (audit "Type specification"). */
h1, .h1 { max-width: 30rem; line-height: var(--lh-display); letter-spacing: calc(var(--heading-tracking) + var(--track-h1)); }
h2, .h2 { max-width: 42.5rem; line-height: var(--lh-h2); letter-spacing: calc(var(--heading-tracking) + var(--track-h2)); }
h3, .h3 { max-width: 32ch; line-height: var(--lh-h3); letter-spacing: calc(var(--heading-tracking) + var(--track-h3)); }
label, legend, .gfield_label { font-size: 1rem; line-height: 1.5rem; }
.gform_wrapper .gform-field-label--type-sub,
.vc_figure-caption,
.post-meta { font-size: var(--fs-small); line-height: var(--lh-small); }

/* ---- C12.7 inline links: 1 px underline, 3 px offset; hover changes colour and thickness only. */
a {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.16s ease, text-decoration-thickness 0.16s ease;
}
a:hover { text-decoration-thickness: 2px; }

/* ---- C12.9 focus ring: 2 px, 3 px offset. Aqua on night, white on the teal bands, dark teal elsewhere. */
.site-header,
.cabi-hero { --color-focus: var(--color-focus-on-dark); }
.cabi-band,
.site-footer__bar { --color-focus: var(--color-focus-on-band); }

/* ---- C2.3, C12.8 buttons: 44 px, 18 px sides, 6 px radius, 14 / 20 px, 0.5 px tracking, 1 px border in every state. */
.button,
input[type="submit"],
button[type="submit"],
.gform_button,
.edd-submit,
.edd-submit.button.blue,
#edd-purchase-button {
  min-height: var(--btn-height);
  padding: 0 var(--btn-pad-x);
  border-width: 1px;
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.button:active,
input[type="submit"]:active,
button[type="submit"]:active,
.gform_button:active,
.edd-submit:active,
#edd-purchase-button:active {
  border-color: var(--color-accent-active);
  background: var(--color-accent-active);
}

/* ---- C4.1 one 1160 px container (tokens: --content-width, --gutter). Anchored sections clear the sticky header (C2.6). */
/* MIG-WO-2d C2: anchor offset now comes from the kit (html scroll-padding-top: 96 px = 80 px header + 16 px gap).
   The 2c scroll-margin-top on anchored groups is removed, because the two offsets added up (section 192 px down). */

/* ---- C2 header (audit "Header specification"). Full-width night band, 1 px white 12% rule, sticky at 80 px. */
.site-header {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  border-bottom: 1px solid var(--color-header-rule);
}
/* MIG-WO-2d A1: the kit adds data-pm-scrolled after 24 px (data-pm-header); same shadow as 2c, 240 ms. */
:root { --pm-header-shadow: var(--shadow-header); }
.site-header__inner {
  height: calc(5rem - 1px);
  min-height: 0;
  padding-block: 0;
  gap: 2rem;
}
/* PORCH-WO-59: the header box follows Porch Core's Header edge (content = the page edge, as before). */
.site-header__inner.wrap { width: calc(100% - 2 * var(--porch-header-inset, var(--page-inset))); }
.site-header__brand img { width: 8.5rem; height: auto; }
.site-header__menu { gap: 1.5rem; }
.site-nav ul { gap: 0 1.5rem; flex-wrap: nowrap; }
.site-nav a,
.site-header__actions a { font-size: var(--fs-ui); line-height: var(--lh-ui); }
.site-nav a { letter-spacing: var(--nav-tracking); white-space: nowrap; }
.site-header__actions { gap: 1rem; flex-wrap: nowrap; }
.site-header__actions a { letter-spacing: var(--ui-tracking); white-space: nowrap; }
.site-header__actions .button { min-height: var(--btn-height); padding-inline: var(--btn-pad-x); }
.site-header__actions .button--text { padding-inline: 0; }
.site-header .button--secondary { border-color: color-mix(in srgb, var(--color-on-band) 45%, transparent); }
.site-header .button--secondary:hover { border-color: var(--color-on-band); background: transparent; color: var(--color-on-band); }

/* C2.8 phone menu: text "Menu" control, full-height panel under the 72 px bar, 48 px rows, 44 px buttons.
   MIG-WO-2d A2: the kit (data-pm-menu) opens it as a dialog: 240 ms fade and 8 px drop, rows follow 30 ms apart,
   focus moves to the first link, Tab stays inside, Escape closes, focus returns, the page behind is locked
   (html.pm-menu-open, kit). The panel is display: flex only in the kit's overlay mode; the kit hides it with
   opacity and visibility when it is closed. Without JS (no .js class) the menu stays in the bar, as in 2c. */
@media (max-width: 1023px) {
  .js .site-header__inner { height: calc(4.5rem - 1px); flex-wrap: nowrap; gap: 1rem; }
  /* Without JS the menu stays in the page flow (os-refresh): the bar grows and wraps instead. */
  html:not(.js) .site-header__inner { height: auto; min-height: calc(4.5rem - 1px); }
  html:not(.js) .site-nav ul,
  html:not(.js) .site-header__actions { flex-wrap: wrap; }
  html:not(.js) .site-header { position: relative; }
  .site-header__brand img { width: 7.5rem; height: auto; }
  .js .site-header__toggle {
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    font: 700 var(--fs-ui) / var(--lh-ui) var(--font-display);
    letter-spacing: var(--ui-tracking);
  }
  .js .site-header__toggle:hover { color: var(--color-accent); }
  .js .site-header__menu[data-pm-menu-mode="overlay"] { display: flex; }
  .js .site-header__menu {
    position: fixed;
    inset: calc(4.5rem + var(--wp-admin--admin-bar--height, 0px)) 0 0; /* under the 72 px bar, to the bottom of the screen */
    overflow-y: auto;
    overscroll-behavior: contain;
    justify-content: flex-start;
    gap: 1rem;
    padding: 1rem var(--gutter) 2rem;
    box-shadow: var(--shadow-menu);
  }
  .js .site-nav ul { flex-wrap: nowrap; }
  .js .site-nav a,
  .js .site-header__actions .button--text {
    display: flex;
    align-items: center;
    min-height: 3rem;
    padding-block: 0;
    border-bottom: 1px solid var(--color-header-rule);
    font-size: 1.0625rem;
    line-height: 1.5rem;
    letter-spacing: var(--nav-tracking);
  }
  .js .site-header__actions { flex-direction: column; align-items: stretch; gap: 1rem; }
  .js .site-header__actions .button { width: 100%; }
}

/* ---- C1 hero (audit Hero 1-4). Copy 480 px on the container, 60 px gap, the photo from there to the window edge.
   MIG-WO-2e: a WPBakery Row (Section "Hero") with three columns: Hero text, Hero photo (a Single Image with Image
   source "Featured Image": editors change the photo with the page's Featured image, as in 2d), Book cover. */
.cabi-hero {
  position: relative;
  isolation: isolate;
  background: var(--color-surface-3);
  color: var(--color-on-band);
  /* Left edge of the photo: container edge + copy column + 60 px gap (100% = the hero width where it is used). */
  --hero-cw: var(--porch-page-width, min(100% - 2 * var(--gutter), var(--content-width)));
  --hero-photo-x: calc((100% - var(--hero-cw)) / 2 + min(30rem, (var(--hero-cw) - 3.75rem) / 2) + 3.75rem);
}
.cabi-hero h1,
.cabi-hero h2 { color: var(--color-on-band); max-width: 30rem; }
.cabi-hero p { max-width: var(--measure); }
.entry-content .cabi-hero__copy .wpb_text_column { margin-top: 1.25rem; }
.cabi-hero__copy .wpb_text_column p:first-child {
  max-width: var(--measure-lead);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}
.entry-content .cabi-hero .wpb_text_column .wpb_wrapper > p + p { margin-top: 1rem; }
.entry-content .cabi-hero__copy .wpb_btn-container { margin-top: 1.75rem; }
.entry-content .cabi-hero .wpb_single_image img { width: 100%; border-radius: 0; }
.entry-content .cabi-hero__photo img {
  display: block;
  object-fit: cover;
  object-position: 72% 40%; /* C1.7: performers and choir stay in frame */
  border-radius: 0 !important;
}

@media (max-width: 781px) {
  /* C1.6: copy, button, then a 250 px photo region with the cover inside it. */
  .entry-content .cabi-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .entry-content .cabi-hero .cabi-hero__copy { grid-row: 1; padding: 2rem var(--gutter) 6.5rem; }
  .entry-content .cabi-hero .cabi-hero__photo { grid-row: 2; grid-column: 1; }
  .entry-content .cabi-hero__photo img { width: 100%; height: 15.625rem; }
  /* Hero B phone: the cover (144 px) sits on the right across the line between the text and the photo strip. */
  .entry-content .cabi-hero .cabi-cover {
    position: relative;
    z-index: 1;
    grid-row: 2;
    grid-column: 1;
    align-self: start;
    justify-self: end;
    width: 9rem;
    margin: -5rem var(--gutter) 0 0;
  }
}

@media (min-width: 782px) {
  .entry-content .cabi-hero { display: block; }
  .entry-content .cabi-hero .cabi-hero__copy {
    width: var(--porch-page-width, min(100% - 2 * var(--gutter), var(--content-width)));
    margin: 0 auto;
    padding-block: clamp(2rem, 0.7963rem + 4.9383vw, 5rem); /* 32 -> 80 px: about 620 px at 1440, set by the text (C1.3) */
  }
  .entry-content .cabi-hero .cabi-hero__copy > .vc_column-inner { max-width: min(30rem, (100% - 3.75rem) / 2); }
  /* C1.5: an explicit width, so the photo ends at the window edge. */
  .entry-content .cabi-hero .cabi-hero__photo {
    position: absolute;
    inset: 0 auto 0 var(--hero-photo-x);
    z-index: -1;
    width: calc(100% - var(--hero-photo-x));
  }
  .cabi-hero__photo :is(.vc_column-inner, .wpb_wrapper, .wpb_single_image, .vc_figure, .vc_single_image-wrapper),
  .entry-content .cabi-hero__photo img { height: 100%; }
  /* MIG-WO-2d hero B (Nolan, 12 Nov 20:48): the cover sits across the seam between the night panel and the photo,
     48 px over the night side and 48 px above the hero bottom, 200 to 260 px wide (260 px at 1440). Its own layer
     (z-index 1, the 2d-hero fix), so it always paints above the photo. */
  .entry-content .cabi-hero .cabi-cover {
    position: absolute;
    z-index: 1;
    left: calc(var(--hero-photo-x) - 3rem);
    bottom: 3rem;
    width: clamp(12.5rem, 18vw, 16.25rem);
  }
}

/* Hero B pose and the one entry moment (checklist B3). Supporting items only: the cover settles from -9 to -3 deg
   and rises 16 px; the second paragraph rises with the kit hero entry. The H1, the first paragraph and the button
   never move (checklist B1). Kit tokens only (assets/motion/porch-motion.css). Reduced motion: final pose at once. */
.cabi-cover img {
  transform: rotate(-3deg);
  filter: var(--shadow-cover-lift);
}
@media (prefers-reduced-motion: no-preference) {
  .cabi-cover img { animation: cabi-cover-settle var(--pm-dur-enter) var(--pm-ease-out) 200ms both; }
  .cabi-hero__copy .wpb_text_column p:nth-child(2) { animation: pm-enter var(--pm-dur-enter) var(--pm-ease-out) var(--pm-enter-stagger) both; }
}
@keyframes cabi-cover-settle {
  from { opacity: 0; transform: translate3d(0, var(--pm-reveal-distance), 0) rotate(-9deg); }
  to { opacity: 1; transform: rotate(-3deg); }
}

/* ---- A3, A6 teal bands with the pine texture. C5.2, C8.3: pattern at about 7% (was 10%); file not edited.
   Position top: the light upper part of the file sits behind the text, the branches stay low. */
.cabi-band {
  background-color: var(--color-band);
  background-image:
    linear-gradient(var(--color-band-tint), var(--color-band-tint)),
    url("img/pine-texture.webp");
  background-size: cover;
  background-position: center top;
  color: var(--color-on-band);
}
.cabi-band h2,
.cabi-band h3 { color: var(--color-on-band); }
.cabi-band a { color: var(--color-on-band); }
/* Bands with one column: the column is the 1160 px container (C4.1). */
.entry-content :is(.cabi-quotes, .cabi-steps, .cabi-photos) { display: block; }
.entry-content :is(.cabi-quotes, .cabi-steps, .cabi-photos) > .wpb_column {
  width: var(--porch-page-width, min(100% - 2 * var(--gutter), var(--content-width)));
  margin-inline: auto;
}
/* C4.1: band headings sit on the container's left edge (680 px wide), not centred. */
.cabi-quotes h2,
.cabi-steps h2 { max-width: 42.5rem; }

/* ---- C5 author (audit Author 1-3). One swirl above the heading; heading 380 px, gap 64, letter up to 600 px.
   MIG-WO-2e: Row (Section "letter") with a heading column and a letter column (one Text Block). */
.entry-content .cabi-about { display: block; padding-block: clamp(3rem, 2.037rem + 3.9506vw, 5rem); }
.cabi-about h2::before {
  content: "";
  display: block;
  width: 7rem;
  height: 1.7rem;
  margin-bottom: 1.5rem;
  background: url("img/swirl-top.png") left center / contain no-repeat;
}
.entry-content .cabi-about .wpb_text_column .wpb_wrapper > * + * { margin-top: 1rem; }
.cabi-about .wpb_text_column p { max-width: var(--measure); }
.cabi-about .wpb_text_column p:first-child {
  max-width: var(--measure-lead);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}
.entry-content .cabi-about .wpb_text_column .wpb_wrapper > p:last-of-type {
  margin-top: 1.5rem;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}
.cabi-about .wpb_text_column p:last-of-type::before {
  content: "";
  display: block;
  width: 10rem;
  height: 1px;
  margin-bottom: 1rem;
  background: var(--color-accent);
}

/* MIG-WO-2d G1: under 900 px the letter is one column; heading and paragraphs start on one left edge. */
@media (max-width: 899px) {
  .entry-content .cabi-about > .wpb_column { width: auto; margin-inline: var(--page-inset); }
  .entry-content .cabi-about > .wpb_column + .wpb_column { margin-top: 1.5rem; }
}
@media (min-width: 900px) {
  /* MIG-WO-2d G2 (Nolan 18:35): the heading column takes the free space and the 600 px letter column ends on the
     container's right edge. The letter column width sets the line length (600 px, about 70 characters at 17 px). */
  .entry-content .cabi-about {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 37.5rem);
    column-gap: 4rem;
    align-items: start;
    padding-inline: var(--page-inset);
  }
  .entry-content .cabi-about > .wpb_column { width: auto; margin: 0; }
  .cabi-about .wpb_text_column p,
  .cabi-about .wpb_text_column p:first-child { max-width: none; }
  .cabi-about h2 { position: relative; max-width: 25rem; }
  /* The swirl sits in the top padding, so the heading and the first paragraph start on one line. */
  .cabi-about h2::before { position: absolute; bottom: 100%; left: 0; }
}

/* ---- C6 production photos (audit Gallery 1-3): 8 px gutters, 6 px corners, one crop per photo.
   MIG-WO-2d D1, D2: each photo links to its large file (Single Image "On click: Link to large image"); the kit
   lightbox (Column "Photo grid": pm-gallery, PhotoSwipe, MIT) opens it with click, Enter or Space. Hover scale 1.03
   over 420 ms on these links only (kit). F2: the band gets the pale aqua tint. */
.cabi-photos {
  padding-block: clamp(2.5rem, 2.0185rem + 1.9753vw, 3.5rem);
  background: var(--color-surface-2);
}
.cabi-gallery a {
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  cursor: zoom-in;
}
.cabi-gallery a:focus-visible { outline: var(--pm-focus-ring); outline-offset: var(--pm-focus-offset); }
.cabi-gallery > .vc_column-inner > .wpb_wrapper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}
.entry-content .cabi-gallery .wpb_wrapper > .wpb_single_image { margin: 0; }
.cabi-gallery .wpb_single_image :is(.vc_figure, .vc_single_image-wrapper) { height: 100%; }
.cabi-gallery .wpb_single_image img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
}
.cabi-gallery .wpb_single_image:first-child { grid-column: span 2; grid-row: span 2; }
.cabi-gallery .wpb_single_image:first-child img { height: 100%; aspect-ratio: auto; }
/* C6.2: crops by photo, around faces and gestures (same order as the gallery). */
.cabi-gallery .wpb_single_image:nth-child(1) img { object-position: 58% 30%; } /* The Innkeeper's Family: the central performers */
.cabi-gallery .wpb_single_image:nth-child(2) img { object-position: 55% 25%; } /* Joseph and Mary */
.cabi-gallery .wpb_single_image:nth-child(3) img { object-position: 50% 25%; } /* The shepherds */
.cabi-gallery .wpb_single_image:nth-child(4) img { object-position: 80% 20%; } /* The wise man */
.cabi-gallery .wpb_single_image:nth-child(5) img { object-position: 45% 55%; } /* The manger */
.cabi-gallery .wpb_single_image:nth-child(6) img { object-position: 50% 20%; } /* Jacob and Joseph */
.cabi-gallery .wpb_single_image:nth-child(7) img { object-position: 50% 45%; } /* The set */
.cabi-gallery .wpb_single_image:nth-child(8) img { object-position: 50% 20%; } /* Proud of Jacob */
.cabi-gallery .wpb_single_image:nth-child(9) img { object-position: 50% 15%; } /* Jacob gets a what-for */

@media (max-width: 781px) {
  /* C6.3: the lead photo full width, then two columns. All nine photos; no swipe row, no carousel. */
  .cabi-gallery > .vc_column-inner > .wpb_wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cabi-gallery .wpb_single_image:first-child { grid-column: 1 / -1; grid-row: auto; }
  .cabi-gallery .wpb_single_image:first-child img { height: auto; aspect-ratio: 3 / 2; }
}

/* ---- C7 three steps (audit Steps 1-3): one white panel, pale teal-gray lines, 28 px card padding.
   MIG-WO-2d F2: the steps band gets the existing pine texture at about 7% over white (the same file and the same
   one-colour layer as the teal bands, not a new texture). MIG-WO-2e: an Inner Row of three "Step card" columns. */
.cabi-steps {
  padding-block: clamp(3rem, 2.5185rem + 1.9753vw, 4rem);
  background-color: var(--color-surface-1);
  background-image:
    linear-gradient(var(--color-paper-tint), var(--color-paper-tint)),
    url("img/pine-texture.webp");
  background-size: cover;
  background-position: center;
}
.entry-content .cabi-steps .vc_inner {
  gap: 0;
  margin-top: 2rem;
  align-items: stretch;
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius);
  background: var(--color-surface-1);
}
.entry-content .vc_row .cabi-card { padding: 1.75rem; }
.cabi-card::before {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  margin-bottom: 1.5rem;
  background: var(--color-accent);
}
.entry-content .cabi-card .wpb_wrapper > * + *,
.entry-content .cabi-card .wpb_wrapper > * + :is(h2, h3, h4) { margin-top: 1rem; }
.cabi-card p,
.cabi-card li { max-width: var(--measure); }
.cabi-card + .cabi-card { border-left: 1px solid var(--color-panel-border); }
.cabi-card h3 { color: var(--color-link); }

@media (min-width: 782px) {
  .cabi-card h3 { min-height: calc(2 * var(--lh-h3)); } /* body text starts at one height in all three */
}
@media (max-width: 781px) {
  .entry-content .vc_row .cabi-card { padding: 1.5rem; }
  .cabi-card + .cabi-card { border-left: 0; border-top: 1px solid var(--color-panel-border); }
}

/* ---- C8 testimonials (audit Testimonials 1-3): 56 / 44 columns, 64 px gap, first lines on one line.
   MIG-WO-2e: an Inner Row of three columns, each a Text Block with one quote (blockquote and cite). */
.cabi-quotes { padding-block: clamp(3rem, 2.2778rem + 2.963vw, 4.5rem); }
.entry-content .cabi-quotes .vc_inner { gap: 2rem; margin-top: 2rem; }
.cabi-quotes blockquote {
  margin: 0;
  border: 0;
  padding: 0;
  color: var(--color-on-band);
}
.cabi-quotes blockquote p { max-width: var(--measure); font-size: var(--fs-lead); line-height: var(--lh-lead); }
.cabi-quotes blockquote p:has(> cite:only-child) { font-size: inherit; line-height: inherit; }
.cabi-quotes cite {
  display: block;
  margin-top: 1rem;
  color: var(--color-on-band);
  font-size: var(--fs-small);
  font-style: normal;
  font-weight: 600;
  line-height: var(--lh-small);
}
.cabi-quotes .vc_inner > .wpb_column:first-child blockquote {
  padding-left: 1.25rem;
  border-left: 2px solid var(--color-accent);
}
.cabi-quotes .vc_inner > .wpb_column:first-child blockquote p:not(:has(> cite)) {
  font-size: clamp(1.25rem, 1.1898rem + 0.2469vw, 1.375rem);    /* 20 -> 22 px */
  line-height: clamp(1.875rem, 1.7847rem + 0.3704vw, 2.0625rem); /* 30 -> 33 px */
}

@media (min-width: 900px) {
  .entry-content .cabi-quotes .vc_inner {
    display: grid;
    grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
    gap: 2rem 4rem;
    align-items: start;
  }
  .cabi-quotes .vc_inner > .wpb_column:first-child { grid-row: span 2; }
  .cabi-quotes .vc_inner > .wpb_column:nth-child(3) blockquote {
    padding-top: 2rem;
    border-top: 1px solid var(--color-rule-on-band);
  }
}

/* ---- C9 "Don't Wait too Long!" (audit Don't Wait 1-3). Photo bleeds left, text panel right; the photo follows the text height.
   MIG-WO-2d D3: a taller photo (96 px panel padding), the crop on the two speaking actors, phone 280 px high. CSS only;
   the file is not edited. F2: the text panel gets the pale aqua tint and the photo stays full bleed. The photo fades
   in once (Column Motion "Fade in"). */
.entry-content .cabi-clock { gap: 0; align-items: stretch; padding-block: 0; background: var(--color-surface-2); }
.entry-content .cabi-clock > .wpb_column:first-child img {
  width: 100%;
  height: 17.5rem; /* phone: 280 px */
  object-fit: cover;
  object-position: 30% 38%; /* the guard and the innkeeper speaking, and the table */
  border-radius: 0;
}
.entry-content .cabi-clock > .wpb_column:last-child { padding: 2.5rem var(--gutter) 3rem; align-self: center; }
.cabi-clock > .wpb_column:last-child > .vc_column-inner > .wpb_wrapper > * { max-width: var(--measure-lead); }
.cabi-clock > .wpb_column:last-child .wpb_text_column p { max-width: var(--measure-lead); }
/* Every gap in the text panel is 1rem. (2d had 0.5rem under the heading, 1.5rem under the badge and 1.75rem over the
   button in its CSS, but its column rule "> * + *" was stronger, so the page showed 1rem: kept as approved.) */
.entry-content .cabi-clock .wpb_wrapper > * + * { margin-top: 1rem; }
/* C9.1: the client's "The Clock is Ticking..." words as plain 14 / 21 semibold text in muted dark red: no pill, no fill, no capitals. */
.cabi-badge {
  display: block;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--color-label);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

@media (min-width: 782px) {
  .entry-content .cabi-clock { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cabi-clock > .wpb_column:first-child { position: relative; }
  .cabi-clock > .wpb_column:first-child .wpb_single_image { position: absolute; inset: 0; }
  .cabi-clock > .wpb_column:first-child :is(.vc_figure, .vc_single_image-wrapper) { height: 100%; }
  .entry-content .cabi-clock > .wpb_column:first-child img { height: 100%; }
  .entry-content .cabi-clock > .wpb_column:last-child {
    padding: 6rem max(var(--gutter), (100vw - var(--content-width)) / 2) 6rem 4rem;
  }
}

/* ---- MIG-WO-2d E3: action links outside running text are buttons with the client's own words (Level 1, no
   copy change). MIG-WO-2e: the Button element looks (Aqua, Outline, Dark teal, Full sentence, Arrow) are in
   assets/wpbakery.css. The arrow mask below is shared with them. */
/* A whole-sentence action link with an arrow (step one: "To read the sample script, just click here."). The arrow is
   an SVG line icon drawn with a mask in the text colour; it nudges 3 px on hover and focus (kit token). */
.cabi-action a { font-weight: 700; }
.cabi-action a::after {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-left: 0.375rem;
  vertical-align: -0.1875rem;
  background: currentColor;
  -webkit-mask: var(--cabi-arrow-mask) center / contain no-repeat;
  mask: var(--cabi-arrow-mask) center / contain no-repeat;
  transition: transform var(--pm-dur-micro) var(--pm-ease-micro);
}
@media (prefers-reduced-motion: no-preference) {
  .cabi-action a:hover::after,
  .cabi-action a:focus-visible::after { transform: translate3d(var(--pm-btn-icon-shift), 0, 0); }
}
:root { --cabi-arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E"); }

/* ---- C10 final aqua call to action (audit Final CTA 1-3): one row, 32 px gap; dark teal button with white text. */
.site-footer__cta {
  padding-block: clamp(2rem, 1.7593rem + 0.9877vw, 2.5rem);
  background: var(--color-accent);
  color: var(--color-text-1);
}
.site-footer__cta .wrap { display: grid; gap: 0.5rem 2rem; align-items: center; }
.site-footer__cta h2 { font-size: var(--fs-cta); line-height: var(--lh-cta); }
.site-footer__cta p { max-width: var(--measure); }
.site-footer__cta .button--strong {
  justify-self: stretch;
  margin-top: 1rem;
  border-color: var(--color-cta-strong);
  background: var(--color-cta-strong);
  color: var(--color-on-band);
}
.site-footer__cta .button--strong:hover { border-color: var(--color-cta-strong-hover); background: var(--color-cta-strong-hover); color: var(--color-on-band); }
.site-footer__cta .button--strong:active { border-color: var(--color-text-1); background: var(--color-text-1); }

@media (min-width: 782px) {
  .site-footer__cta .wrap { grid-template-columns: minmax(0, 1fr) auto; }
  .site-footer__cta h2,
  .site-footer__cta p { grid-column: 1; }
  .site-footer__cta .button--strong { grid-column: 2; grid-row: 1 / span 2; justify-self: end; margin-top: 0; }
}

/* ---- C11 footer bar (audit Footer 1-2): 14 / 21 px, 8 px between lines, 20 px padding, on the container edge. */
.site-footer__bar {
  padding-block: 1.25rem;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  text-align: left;
}
.site-footer__bar p + p { margin-top: 0.5rem; }

/* ---- MIG-WO-2d C1 motion: the 2c reveal (site.js, 250 ms, 8 px, two groups) is replaced by the Porch Motion kit
   reveal (560 ms, 16 px rise, ease-out, once, 80 ms stagger) on five sections: author letter, gallery, three steps,
   testimonies and Don't Wait. Markup: the kit classes pm-reveal-group / pm-reveal-fade in the blocks' extra class
   field (2d seed). MIG-WO-2e: the Motion dropdowns of Row, Inner Row, Column and Text Block (inc/wpbakery.php). The old .reveal class is no longer used; if an old copy of the content
   still has it, it stays visible (os-refresh.css would hide it, and site.js no longer shows it). */
.js .reveal { opacity: 1; transform: none; }

/* ---- MIG-WO-2d E1, E2: action buttons with the kit touch (data-pm-btn). One system with the 2c buttons: same
   height, radius and colours. The arrow is an SVG line icon (functions.php cabi_arrow_icon). */
.button[data-pm-btn] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition:
    background-color var(--pm-dur-micro) var(--pm-ease-micro),
    border-color var(--pm-dur-micro) var(--pm-ease-micro),
    color var(--pm-dur-micro) var(--pm-ease-micro),
    box-shadow var(--pm-dur-micro) var(--pm-ease-micro),
    transform var(--pm-dur-micro) var(--pm-ease-micro);
}
.pm-btn__icon { flex: none; line-height: 0; }
.pm-btn__icon svg { width: 1rem; height: 1rem; }
/* The closing "Read the Script" button: the arrow slides in once when the button first enters view, then the kit's
   one soft ring (dark teal, so it shows on the aqua band). Never a loop. Reduced motion: no ring, arrow in place. */
.site-footer__cta [data-pm-btn="attention"] { --color-accent: var(--color-cta-strong); }
@media (prefers-reduced-motion: no-preference) {
  .pm-ready [data-pm-btn="attention"]:not(.pm-in) .pm-btn__icon { opacity: 0; transform: translate3d(-0.5rem, 0, 0); }
  .pm-ready [data-pm-btn="attention"].pm-in .pm-btn__icon { animation: cabi-arrow-in var(--pm-dur-reveal) var(--pm-ease-out) 150ms backwards; }
}
@keyframes cabi-arrow-in {
  from { opacity: 0; transform: translate3d(-0.5rem, 0, 0); }
}

/* Inner pages: card for "What's in the box" on the product page (Column "Tinted box"). */
.entry-content .vc_row .cabi-box {
  padding: var(--space-lg);
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius);
  background: var(--color-surface-2);
}
.cabi-box h2 { color: var(--color-link); font-size: var(--fs-h3); line-height: var(--lh-h3); }

/* Product page purchase button (EDD prints it after the content). */
.edd_download_purchase_form { margin-top: var(--space-lg); }
.single-download .entry-content > .edd_download_purchase_form,
.single-download .entry-content > form { width: var(--porch-page-width, min(100% - 2 * var(--gutter), var(--content-width))); margin-inline: auto; margin-bottom: var(--section-pad); }