/* Sky hero - premium-polish with the launch email's garden sky on the PDP (sections/pdp/hero.njk).
   premium-polish/variant.css loads first; this file only adds the new direction.

   1 Tokens · 2 Sky panel · 3 Scene · 4 Depth on scroll · 5 Idle motion · 6 Buy box on the sky · 7 The page below (incl. media quotes, mounting options) · 8 Header */

/* 1 ─ Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --sky-top: #C6E4F1;
  --sky-mid: #D6ECF6;
  --sky-low: #E7F3F8;
  --sky-end: #EEF5F4;
  --sky-glass: rgba(255, 255, 255, .42);
  --sky-glass-on: rgba(255, 255, 255, .7);
  --sky-edge: rgba(0, 51, 51, .12);
}

/* 2 ─ Sky panel ──────────────────────────────────────────────────────────── */
/* The hero's own box starts at the top of the page, under the transparent header, so the
   scene can be clipped to its rounded bottom edge (the theme painted the panel from -78px). */
body.lsbb-product .bbbc-bbbc-c5f434fa7b {
  margin-top: -78px; padding-top: 78px;
  overflow: hidden; overflow: clip; border-radius: 0 0 32px 32px; isolation: isolate;
}
body.lsbb-product .bbbc-bbbc-c5f434fa7b::before {
  top: 0; border-radius: 0;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 30%, var(--sky-low) 62%, var(--sky-end) 100%);
}
.sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.sky__clouds { position: absolute; top: 3%; left: -10%; width: 120%; }
.sky__clouds img { display: block; width: 100%; height: auto; opacity: .9; }

/* Title: the model name in the italic cut, as in the email ("needs a Nook.") */
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__title span:last-child { font-style: italic; }
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__title span { white-space: nowrap; }

/* Desktop under 1360px: control's two fixed 653/654px columns run off the right edge (the scene was
   cut off at 1024); here they share the width and the title scales with it. */
@media (min-width: 1024px) and (max-width: 1359.98px) {
  body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__inner { padding-left: 32px; padding-right: 32px; }
  body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(24px, 4vw, 56px); }
  body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__title { font-size: clamp(54px, 5.8vw, 80px); line-height: 1.08; }
}

/* 3 ─ Scene ──────────────────────────────────────────────────────────────── */
/* Above the theme's .nook__media img sizing; the book and feeder sit where the Figma "Nook + Book v1"
   frame puts them (left/top/width in % of the stage, from sections.hero.scene). */
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__head { position: relative; z-index: 3; }
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__media { position: relative; z-index: 2; }
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__body { position: relative; z-index: 4; }
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__media .scene img {
  display: block; width: 100%; max-width: none; height: auto; margin: 0; aspect-ratio: auto; object-fit: initial;
}
.scene { position: relative; margin: 36px -9% 0 -11%; }
/* Desktop: the buy box runs longer than the scene, so the scene keeps pace beside it
   (sticky needs overflow: clip on the panel - hidden would make it the scroller). It pins below the
   header with room for the cardinal's wings, which reach above the stage by about 13% of the column, so
   the bar never covers them when it slides back in. While pinned there is no page movement to read depth
   against, so its layers hold still (they drifted apart before); the clouds behind keep theirs. */
@media (min-width: 1024px) {
  body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__media { align-self: stretch; container-type: inline-size; }
  .scene { position: sticky; top: calc(var(--lsbb-header-h, 78px) + 8px + 13.4cqw); }
  .scene .sky__layer { animation: none; transform: none; }
}
/* Tablets and landscape phones (768-1023px): one column as on phones, at a readable width. Two columns this
   narrow ran the title under the scene, the seal off the edge and squeezed the cards. The scene scrolls
   with the page here, so its depth reads against it as on phones. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__inner { padding: 20px 40px 56px; }
  body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__row { grid-template-columns: minmax(0, 600px); justify-content: center; row-gap: 0; }
  body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__head { grid-column: 1; grid-row: 1; align-items: center; text-align: center; }
  body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__title-wrap { align-items: center; }
  body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__title { font-size: 68px; line-height: 1.06; }
  body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__media { grid-column: 1; grid-row: 2; }
  body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__body { grid-column: 1; grid-row: 3; }
  body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__tagline { text-align: center; }
  .scene { margin: 76px -12% 28px; }
}
.scene__stage { position: relative; aspect-ratio: 1714 / 995; }
.scene__book, .scene__feeder { position: absolute; left: var(--l); top: var(--t); width: var(--w); }
.scene__book img { transition: opacity .5s var(--bb-ease), transform .6s var(--bb-ease); }
body.lsbb-product .bbbc-bbbc-c5f434fa7b:has(#nook-plan-basic:checked) .scene__book img { opacity: 0; transform: translate3d(-4%, 3%, 0) scale(.96); }
.scene__branch, .scene__bird, .scene__seal { position: absolute; }
.scene__branch img { rotate: var(--rot, 0deg); }
.scene__branch--far { top: -44%; right: -34%; width: 106%; z-index: -1; }
.scene__branch--far img { --rot: -6deg; transform-origin: 100% 45%; }
.scene__branch--near { right: -21%; bottom: -21%; width: 84%; }
.scene__branch--near img { --rot: -16deg; transform-origin: 100% 60%; opacity: .96; }
/* The landing cardinal from the Figma hero (cardinal-action), flying in over the book's top corner;
   low enough that its wingtips clear the header */
.scene__bird { top: -17%; left: 9%; width: 24%; z-index: 1; }
.scene__bird img { rotate: -3deg; }
/* The price seal stays put while the layers around it drift */
.scene__seal { top: -15%; right: 7%; width: 15%; aspect-ratio: 1; }
.scene__seal img { position: absolute; inset: 0; rotate: 8deg; }
.scene__seal span {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; rotate: 8deg;
  font: italic 500 clamp(24px, 2.6vw, 40px)/1 AwesomeSerifVAR, AwesomeSerif, Georgia, serif; color: #fff;
}
.scene__seal small { margin: 0 0 3px; font: 600 clamp(9px, .78vw, 11.5px)/1 Inter, system-ui, sans-serif; letter-spacing: .07em; text-transform: uppercase; }
@media (min-width: 768px) and (max-width: 1023.98px) {
  .scene__branch--far { top: -24%; right: -27%; width: 70%; }
  .scene__branch--near { right: -22%; bottom: 0; width: 50%; }
  .scene__seal { top: -10%; right: 5%; width: 17%; }
  .scene__seal span { font-size: 34px; }
  .scene__seal small { font-size: 10.5px; }
}
@media (max-width: 767px) {
  .scene { margin: 6px -16px 0; padding: 26px 0 6px; }
  .scene__stage { width: 100%; }
  /* Branches stay in the scene's corners: no copy above or below ever sits on leaves */
  .scene__branch--far { top: -20%; right: -38%; width: min(84%, 400px); }
  .scene__branch--near { right: -34%; bottom: 9%; width: min(64%, 330px); }
  .scene__bird { top: -18%; left: 1%; width: 29%; }
  .scene__seal { top: -2%; right: 4%; width: 21%; }
  .scene__seal span { font-size: 23px; }
  .scene__seal small { font-size: 8.5px; margin-bottom: 2px; }
}

/* 4 ─ Depth on scroll ────────────────────────────────────────────────────── */
/* Each layer moves --sky-depth px per px scrolled: positive lags behind the page (far), negative
   runs ahead (near). Scroll timelines where supported; otherwise variant.js sets --sky-y. */
.sky__layer { transform: translate3d(0, calc(var(--sky-y, 0) * var(--sky-depth, 0) * 1px), 0); will-change: transform; }
@supports (animation-timeline: scroll()) {
  .sky__layer { transform: none; animation: sky-depth linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; }
}
@keyframes sky-depth { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, calc(var(--sky-depth, 0) * 100vh), 0); } }

/* 5 ─ Idle motion ────────────────────────────────────────────────────────── */
.scene__sway { animation: sky-sway 8s ease-in-out infinite alternate; }
.scene__branch--near .scene__sway { animation-duration: 9.5s; animation-delay: -4s; }
.scene__hover { animation: sky-hover 3.4s ease-in-out infinite alternate; }
.sky__drift { animation: sky-drift 48s ease-in-out infinite alternate; }
@keyframes sky-sway { from { transform: rotate(-.7deg); } to { transform: rotate(.7deg); } }
@keyframes sky-hover { from { transform: translateY(-4%); } to { transform: translateY(4%); } }
@keyframes sky-drift { from { transform: translateX(-1.5%); } to { transform: translateX(1.5%); } }
.sky-paused .scene__sway, .sky-paused .scene__hover, .sky-paused .sky__drift { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .sky__layer, .scene__sway, .scene__hover, .sky__drift { animation: none !important; transform: none !important; }
}

/* 6 ─ Buy box on the sky ─────────────────────────────────────────────────── */
/* premium-polish's glass cards, cooled from the sunrise browns to the sky's ink. */
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__opt-inner { border-color: var(--sky-edge); background: var(--sky-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__opt:hover .nook__opt-inner { border-color: rgba(0, 51, 51, .26); }
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__opt input:checked + .nook__opt-inner {
  border-color: var(--bb-ink); background: var(--sky-glass-on);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 8px 22px rgba(30, 80, 110, .1);
}
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__opt-inner::before { border-color: rgba(0, 51, 51, .3); }
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__trust-item { background: rgba(255, 255, 255, .5); border: 1px solid rgba(0, 51, 51, .07); }
/* The tagline leads with what the Nook is: "The Essential Smart Bird Feeder" in bold */
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__tagline { font-weight: 400; }
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__tagline strong { font-weight: 700; }
/* Rating: "70,000+" is the figure people read, so it gets the weight (the live block set it in 10.6px
   under the stars); the stars sit above it, and the row tightens up to fit the count. */
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__rating { gap: 32px; }
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__rating-group { gap: 18px; }
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__rating-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__rating-meta .nook__stars { width: 106px; height: 18px; }
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__rating-count { font: 500 14px/24px Inter, system-ui, sans-serif; color: var(--bb-ink-soft); white-space: nowrap; }
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__rating-count strong { margin-right: 2px; font-size: 24px; font-weight: 700; letter-spacing: -.015em; color: var(--bb-ink); font-variant-numeric: tabular-nums; }
body.lsbb-product .bbbc-bbbc-c5f434fa7b a.nook__rating-count { text-decoration: none; }
body.lsbb-product .bbbc-bbbc-c5f434fa7b a.nook__rating-count:hover { color: var(--bb-ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
/* Plans stack on desktop too, so the bundle name has the width it needs */
@media (min-width: 768px) {
  body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__group--plan .nook__options { flex-direction: column; gap: 10px; }
  body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__group--plan .nook__opt { flex: none; }
  body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__group--plan .nook__opt-inner { min-height: 0; padding: 16px 18px 16px 50px; }
}
/* Each bundle lists what's in it (sections.hero.planItems): the radio and price line up with the bundle's
   name, the contents follow with a green check each, and the membership terms sit in small print below. */
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__group--plan .nook__opt-inner { align-items: flex-start; }
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__group--plan .nook__opt-inner::before { top: 17px; margin-top: 0; }
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__plan:has(.nook__opt-badge) .nook__opt-inner::before { top: 22px; }
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__group--plan .nook__opt-name { font-size: 17px; line-height: 22px; font-weight: 650; letter-spacing: -.01em; }
/* The price sits beside the name only, so the list below runs the card's full width */
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__group--plan .nook__opt-text { flex: 1; }
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__group--plan .nook__opt-name { padding-right: 60px; }
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__group--plan .nook__opt-price { position: absolute; top: 16px; right: 16px; line-height: 22px; }
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__plan:has(.nook__opt-badge) .nook__opt-price { top: 21px; }
@media (min-width: 768px) { body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__group--plan .nook__opt-price { right: 18px; } }
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__opt-list { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__opt-item {
  position: relative; display: block; padding-left: 22px;
  font: 400 14px/19px Inter, system-ui, sans-serif; color: var(--bb-ink-soft); text-wrap: pretty;
}
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__opt-item::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 15px; height: 15px;
  background: var(--bb-check-green) center / contain no-repeat;
}
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__opt-item:first-child { font-weight: 500; color: var(--bb-ink); }
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__group--plan .nook__opt-sub { margin-top: 10px; white-space: normal; }
/* Buy Now sits at the bottom of the chosen bundle card (hero.njk): .nook__plan draws the card while
   its plan is checked and the label inside goes flat, so the button reads as part of the bundle. The
   standalone price above the old button is dropped - the card already shows it. */
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__plan { border-radius: 18px; transition: background-color .25s var(--bb-ease), box-shadow .3s var(--bb-ease); }
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__plan:has(input:checked) {
  background: var(--sky-glass-on); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px var(--bb-ink), inset 0 1px 0 rgba(255, 255, 255, .8), 0 8px 22px rgba(30, 80, 110, .1);
}
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__plan .nook__opt input:checked + .nook__opt-inner {
  border-color: transparent; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__cta--plan { width: auto; align-items: stretch; padding: 0 18px 18px; }
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__plan:not(:has(input:checked)) .nook__cta--plan { display: none; }
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__cta--plan .lsbb-a2c { width: 100%; }
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__total { display: none; }
/* A pill on the bundle's top edge (sections.hero.planBadges), e.g. "Most popular" */
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__plan:has(.nook__opt-badge) { margin-top: 10px; }
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__plan:has(.nook__opt-badge) .nook__opt-inner { padding-top: 21px; }
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__opt-badge {
  position: absolute; top: 0; left: 16px; translate: 0 -50%; z-index: 1;
  padding: 4px 11px; border-radius: 999px; background: var(--bb-ink); color: #fff;
  font: 600 12px/16px Inter, system-ui, sans-serif; letter-spacing: .01em; white-space: nowrap;
}
/* A hand-drawn note over a model card (sections.hero.modelNotes), in the title's italic, its arrow
   pointing down at the model's name; it sits in the label row beside "Model" and lets clicks through. */
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__opt-note {
  position: absolute; left: 54px; bottom: calc(100% + 5px); z-index: 1;
  display: flex; align-items: flex-end; gap: 4px; width: max-content; max-width: calc(100% - 54px);
  pointer-events: none; color: var(--bb-ink);
  font: italic 400 19px/1.05 AwesomeSerifVAR, AwesomeSerif, Georgia, serif; letter-spacing: -.005em;
}
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__opt-arrow {
  flex: none; width: 30px; height: 26px; margin-bottom: -16px; rotate: -4deg;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__opt-note > span { padding-bottom: 6px; text-wrap: balance; }
@media (max-width: 767px) {
  body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__opt-note { left: 49px; max-width: calc(100% - 49px); font-size: 16px; }
  body.lsbb-product .bbbc-bbbc-c5f434fa7b .nook__opt-arrow { width: 24px; height: 21px; margin-bottom: -14px; }
}

/* 7 ─ The page below ────────────────────────────────────────────────────── */
/* Photo strip (sections/pdp/ugc.njk): a bold lead-in, and on every photo a quiet
   "identified" label over the feeder tray - an AI sparkle, the species and "Learn more" (variant.js
   takes it to species recognition in "Truly clever"). */
body.lsbb-product .ugc__body strong { font-weight: 700; color: var(--bb-ink); }
.ugc__shot { position: relative; margin: 0; }
.ugc__shot .ugc__img { display: block; }
.ugc__id {
  position: absolute; left: 12px; bottom: 12px; z-index: 1; display: flex; align-items: stretch; max-width: calc(100% - 24px);
  border-radius: 999px; overflow: hidden; color: #fff; background: rgba(10, 34, 32, .42);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 4px 14px rgba(0, 0, 0, .12);
  font: 600 13px/16px Inter, system-ui, sans-serif; letter-spacing: .005em; white-space: nowrap;
}
.ugc__id-name { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px 7px 9px; }
.ugc__id-name svg { flex: none; width: 13px; height: 13px; fill: #8DF5BE; }
.ugc__id-more {
  display: inline-flex; align-items: center; padding: 7px 12px 7px 10px; border-left: 1px solid rgba(255, 255, 255, .2);
  color: rgba(255, 255, 255, .8); font-weight: 500; text-decoration: none; transition: color .2s, background-color .2s;
}
.ugc__id-more::after { content: "\2192"; margin-left: 5px; transition: translate .2s var(--bb-ease); }
.ugc__id-more:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.ugc__id-more:hover::after { translate: 2px 0; }
.ugc__id-more:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
@media (max-width: 767px) {
  .ugc__id { left: 9px; bottom: 9px; max-width: calc(100% - 18px); font-size: 12px; line-height: 15px; }
  .ugc__id-name { gap: 5px; padding: 6px 9px 6px 8px; }
  .ugc__id-name svg { width: 12px; height: 12px; }
  .ugc__id-more { padding: 6px 10px 6px 9px; }
}

/* "Never miss a visit" and "Your birds, your view" share one band that was the hero's sunrise (with
   its own clouds); it becomes the same daytime sky. Same gradient line, so the two still join seamlessly
   (the mounting section between them is painted in the band's colour at that join). */
body.lsbb-product .bbbc-bbbc-0bacae8616 { background: linear-gradient(180deg, rgba(214, 236, 246, 0) -554px, #DCEFF7 -169px, #A9D3EA 2016px); }
body.lsbb-product .bbbc-bbbc-45b15bafad { background: linear-gradient(180deg, rgba(214, 236, 246, 0) -1284px, #DCEFF7 -899px, #A9D3EA 1286px) top / 100% calc(100% - 22px) no-repeat; }
@media (min-width: 768px) {
  body.lsbb-product .bbbc-bbbc-0bacae8616 { background: none; }
  body.lsbb-product .bbbc-bbbc-0bacae8616::before { background: linear-gradient(180deg, rgba(214, 236, 246, 0) 0, #DCEFF7 385px, #A9D3EA 2570px); }
}
@media (max-width: 767px) {
  body.lsbb-product .bbbc-bbbc-0bacae8616 { background: linear-gradient(180deg, rgba(214, 236, 246, 0) 0%, #DCEFF7 25%, #C4E2F1 100%); }
  /* The mounting section continues the band below, so this card doesn't round off at the bottom */
  body.lsbb-product .bbbc-bbbc-0bacae8616 { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
}

/* premium-polish rises each section in on its own; these six share one sky band, so the band stays
   put and only what's on it rises - otherwise a strip of page shows between them while they move. */
body.lsbb-product :is(.bbbc-bbbc-0bacae8616, .sky-clever, .sky-book, .bbbc-bbbc-793062d693, .sky-mounts, .sky-reviews, .bbbc-bbbc-45b15bafad).bb-reveal { opacity: 1; transform: none; transition: none; }
body.lsbb-product :is(.bbbc-bbbc-0bacae8616, .sky-clever, .sky-book, .bbbc-bbbc-793062d693, .sky-mounts, .sky-reviews, .bbbc-bbbc-45b15bafad).bb-reveal > * {
  opacity: 0; transform: translateY(22px); transition: opacity .9s var(--bb-ease), transform .9s var(--bb-ease);
}
body.lsbb-product :is(.bbbc-bbbc-0bacae8616, .sky-clever, .sky-book, .bbbc-bbbc-793062d693, .sky-mounts, .sky-reviews, .bbbc-bbbc-45b15bafad).bb-reveal.is-in > * { opacity: 1; transform: none; }

/* Closing card (sections/pdp/closing.njk): the hero's sky once more, the email's line, back to the buy box */
#buy { scroll-margin-top: 96px; }
.sky-close { padding: 24px 50px 120px; }
.sky-close__card {
  position: relative; overflow: hidden; isolation: isolate; max-width: 1340px; margin: 0 auto; border-radius: 32px;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 45%, var(--sky-low) 100%);
}
.sky-close__sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sky-close__clouds { position: absolute; top: -8%; left: -6%; width: 112%; max-width: none; opacity: .85; }
/* Decoration keeps to the card's corners and the band above the headline: never behind copy */
.sky-close__branch { position: absolute; top: 0; right: -9%; width: clamp(260px, 30%, 420px); max-width: none; translate: 0 -44%; rotate: -8deg; transform-origin: 100% 45%; }
.sky-close__soft { position: absolute; bottom: -26%; left: -10%; width: 40%; max-width: none; scale: -1 1; rotate: 10deg; transform-origin: 0% 60%; opacity: .9; }
.sky-close__body { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 104px clamp(32px, 17%, 240px) 112px; text-align: center; }
.sky-close__bird { position: absolute; top: 14%; left: 3%; width: clamp(140px, 15vw, 240px); max-width: none; rotate: -8deg; }
.sky-close__title { margin: 0; font: 500 72px/1 AwesomeSerifVAR, AwesomeSerif, Georgia, serif; letter-spacing: -.01em; word-spacing: .08em; color: var(--bb-ink); text-wrap: balance; }
.sky-close__title em { font-style: italic; }
.sky-close__text { margin: 0; font: 500 18px/1.5 Inter, system-ui, sans-serif; color: rgba(0, 51, 51, .8); }
.sky-close__cta { margin-top: 10px; min-width: 280px; }
@media (max-width: 767px) {
  .sky-close { padding: 8px 16px 72px; }
  .sky-close__card { border-radius: 24px; }
  .sky-close__clouds { top: -4%; left: -40%; width: 180%; }
  .sky-close__branch { right: -22%; width: min(60%, 290px); translate: 0 -18%; }
  .sky-close__soft { bottom: -14%; left: -34%; width: 80%; }
  .sky-close__bird { top: 10px; left: 20px; width: 92px; }
  .sky-close__body { gap: 14px; padding: 168px 20px 92px; }
  .sky-close__title { font-size: 44px; }
  .sky-close__text { font-size: 16px; }
  .sky-close__cta { align-self: stretch; min-width: 0; }
}
/* Media quotes (the home page's slider), between the book and the mounting section: on the same sky band
   (the band's colour there), closer to its neighbours than the live 120px. The CNN logo sized like the live
   block sizes its Wirecutter and TechRadar logos. */
body.lsbb-product .bbbc-bbbc-793062d693 { background: #C4E2F1; padding-top: 24px; padding-bottom: 64px; }
body.lsbb-product .bbbc-bbbc-793062d693 .lsbb-ts__logo[alt="CNN"] { height: 34px !important; }
body.lsbb-product .bbbc-bbbc-793062d693 .lsbb-ts__logo[alt="The Verge"] { height: 26px !important; }
/* A byline under the logo (The Verge's reviewer); without a logo the source's name in text */
body.lsbb-product .bbbc-bbbc-793062d693 .lsbb-ts__source { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 10px 0 0; color: var(--bb-ink); }
body.lsbb-product .bbbc-bbbc-793062d693 .lsbb-ts__source strong { font: 800 22px/1.1 Inter, system-ui, sans-serif; letter-spacing: -.01em; }
body.lsbb-product .bbbc-bbbc-793062d693 .lsbb-ts__source span { font: 500 14px/1.35 Inter, system-ui, sans-serif; color: var(--bb-ink-soft); text-wrap: balance; }
/* Quotes a size down from the live block (32/40px desktop, 28/34px phones), so the longer ones sit
   comfortably in the card */
body.lsbb-product .bbbc-bbbc-793062d693 .lsbb-ts__text { font-size: 26px !important; line-height: 34px !important; }
/* Shorter cards: 300px floor (live 406-432px) and less padding above and below (live 80px), so the
   floor isn't just pushed back up by the padding */
body.lsbb-product .bbbc-bbbc-793062d693 .lsbb-ts__card { min-height: 300px; }
@media (min-width: 768px) { body.lsbb-product .bbbc-bbbc-793062d693 .lsbb-ts__card { padding-top: 48px !important; padding-bottom: 48px !important; } }
@media (max-width: 767px) {
  body.lsbb-product .bbbc-bbbc-793062d693 { padding-top: 16px; padding-bottom: 40px; }
  body.lsbb-product .bbbc-bbbc-793062d693 .lsbb-ts__text { font-size: 21px !important; line-height: 28px !important; }
  /* Narrower than the live full-width card, so the cards either side peek in and it reads as swipeable */
  body.lsbb-product .bbbc-bbbc-793062d693 .lsbb-ts__slide { flex: 0 0 calc(100vw - 80px) !important; max-width: calc(100vw - 80px) !important; }
}

/* One heading system for the run of sections under the hero - the photo strip, "A powerful little
   camera", "A hand illustrated book", "Hang it, or mount it" and the reviews: the serif title at one size with one
   italic word, the green pill under it where there is one, then the same lead text, 16px apart. */
body.lsbb-product :is(.ugc__title, .nmv__title, .sky-book__title, .sky-mounts__title, .sky-reviews__title, .sky-clever__title) {
  margin: 0; font: 525 64px/1.05 AwesomeSerifVAR, AwesomeSerif, Georgia, serif; font-variation-settings: "hght" 1000; font-synthesis: none;
  letter-spacing: -.01em; color: var(--bb-ink); text-wrap: balance;
}
/* (the live theme's PDP heading cut: weight 525 on the tall axis, the italic word at 580) */
body.lsbb-product :is(.ugc__title, .nmv__title, .sky-book__title, .sky-mounts__title, .sky-reviews__title, .sky-clever__title) em { font-style: italic; font-weight: 580; }
/* "A powerful little camera" at the font's own line height */
body.lsbb-product .nmv__title { line-height: normal; }
body.lsbb-product :is(.ugc__body, .sky-book__text, .sky-mounts__lede, .sky-reviews__lede, .sky-clever__lede) {
  margin: 0; font: 400 18px/1.55 Inter, system-ui, sans-serif; color: var(--bb-ink-soft); text-wrap: pretty;
}
body.lsbb-product .bbbc-bbbc-1d7ff1f6fd .ugc__head { gap: 16px; }
body.lsbb-product .ugc__body { max-width: 640px; }
/* The pill ("Both FREE in the box", "FREE with the Premium bundle") in the brand green, as Add To Cart
   and the price seal, FREE in bold */
.sky-pill {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 10px 20px 10px 15px; border-radius: 999px;
  background: var(--bb-green); color: var(--bb-ink); box-shadow: 0 6px 18px rgba(0, 150, 75, .22);
  font: 600 17px/20px Inter, system-ui, sans-serif; letter-spacing: .005em;
}
.sky-pill strong { font-weight: 800; letter-spacing: .04em; }
.sky-pill svg { flex: none; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1023px) {
  body.lsbb-product :is(.ugc__title, .nmv__title, .sky-book__title, .sky-mounts__title, .sky-reviews__title, .sky-clever__title) { font-size: 52px; }
}
@media (max-width: 767px) {
  body.lsbb-product :is(.ugc__title, .nmv__title, .sky-book__title, .sky-mounts__title, .sky-reviews__title, .sky-clever__title) { font-size: 40px; }
  body.lsbb-product :is(.ugc__body, .sky-book__text, .sky-mounts__lede, .sky-reviews__lede, .sky-clever__lede) { font-size: 16px; line-height: 1.5; }
  body.lsbb-product .bbbc-bbbc-1d7ff1f6fd .ugc__head { gap: 14px; }
  .sky-pill { padding: 9px 17px 9px 13px; font-size: 15.5px; }
}

/* "A powerful little camera" on tablets: the captured layout keeps its fixed 371 + 543px columns and 164px sides
   down to 768px, which ran the text off the edge; here the columns share the width */
@media (min-width: 768px) and (max-width: 1023.98px) {
  body.lsbb-product .bbbc-bbbc-0bacae8616 .nmv__inner { padding: 56px 40px; gap: 40px; }
  body.lsbb-product .bbbc-bbbc-0bacae8616 .nmv__text { flex: 1 1 0; width: auto; min-width: 0; gap: 40px; }
  body.lsbb-product .bbbc-bbbc-0bacae8616 .nmv__media img { width: 320px; height: 344px; }
}

/* "Your birds, your view" with the rendered Nook (your-view.njk): the Nook on the left of the stage, the feed card at
   its right. Turning the camera (a tap on the Nook or the button) plays the turn frames over the still and sets
   .is-portrait, and the card reshapes from 16:9 to 9:16 as the two photos cross over. --lw is the landscape card's
   width; the portrait card is the same picture area stood on end. */
body.lsbb-product .sky-view .vv__card { padding: 72px 96px; gap: 48px; }
body.lsbb-product .sky-view .vv__text { flex: 0 0 400px; width: 400px; }
.sky-view__turn {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; margin-top: 12px; padding: 12px 20px 12px 16px;
  border: 0; border-radius: 999px; background: #fff; color: var(--bb-ink); cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 51, 51, .1), 0 6px 18px rgba(30, 80, 110, .1);
  font: 600 16px/20px Inter, system-ui, sans-serif; transition: box-shadow .2s, transform .2s var(--bb-ease);
}
.sky-view__turn:hover { box-shadow: inset 0 0 0 1px rgba(0, 51, 51, .2), 0 8px 22px rgba(30, 80, 110, .14); }
.sky-view__turn:active { transform: scale(.97); }
.sky-view__turn:focus-visible { outline: 2px solid var(--bb-ink); outline-offset: 3px; }
.sky-view__turn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: rotate .8s var(--bb-ease); }
.sky-view.is-portrait .sky-view__turn svg { rotate: 90deg; }

.sky-view__stage { --lw: 300px; --nw: 420px; position: relative; flex: 1 1 auto; min-width: 0; height: calc(var(--nw) * 7 / 6); }
.sky-view__nook {
  position: absolute; left: 0; top: 0; width: var(--nw); aspect-ratio: 6 / 7; margin: 0; padding: 0; border: 0; background: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.sky-view__nook:focus-visible { outline: 2px solid var(--bb-ink); outline-offset: 4px; border-radius: 28px; }
.sky-view__still { display: block; width: 100%; height: 100%; }
/* the turn: one frame of the strip at a time (variant.js moves it); its edges are feathered into the still */
.sky-view__frames { position: absolute; background-repeat: no-repeat; background-position: 0 0; pointer-events: none; }
.sky-view__frames.is-ready { background-image: var(--strip); }
.sky-view__hint {
  position: absolute; left: 50%; bottom: -14px; margin: 0; translate: -50% 0; white-space: nowrap; pointer-events: none;
  padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .7); color: var(--bb-ink-soft);
  font: 500 13px/16px Inter, system-ui, sans-serif; opacity: 0; transition: opacity .4s var(--bb-ease);
}
.sky-view__hint { opacity: 1; }
.sky-view.is-turned .sky-view__hint { opacity: 0; }

.sky-view__feed {
  position: absolute; right: 0; top: 50%; z-index: 1; margin: 0; translate: 0 -50%;
  width: var(--lw); height: calc(var(--lw) * .5625); overflow: hidden; border-radius: 22px; background: #29312C;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 26px 54px rgba(0, 40, 60, .28);
  transition: width .85s cubic-bezier(.65, 0, .35, 1), height .85s cubic-bezier(.65, 0, .35, 1);
}
.sky-view.is-portrait .sky-view__feed { width: calc(var(--lw) * .6); height: calc(var(--lw) * 1.0667); }
.sky-view__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s var(--bb-ease) .2s; }
/* (beats premium-polish's image fade-in, img.bb-fade.is-loaded) */
.sky-view img.sky-view__shot.sky-view__shot--portrait { opacity: 0; }
.sky-view.is-portrait img.sky-view__shot.sky-view__shot--portrait { opacity: 1; }
.sky-view.is-portrait img.sky-view__shot.sky-view__shot--landscape { opacity: 0; }
.sky-view__mode {
  position: absolute; left: 10px; bottom: 10px; padding: 5px 10px; border-radius: 999px;
  background: rgba(0, 30, 30, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff; font: 600 12px/14px Inter, system-ui, sans-serif; letter-spacing: .02em;
}
@media (max-width: 1359.98px) {
  body.lsbb-product .sky-view .vv__card { padding: 64px 56px; }
  body.lsbb-product .sky-view .vv__text { flex-basis: 340px; width: 340px; }
  .sky-view__stage { --lw: 250px; --nw: 380px; }
}
/* Tablets and phones: the text on top, then the stage; on phones the card sits over the Nook's lower right */
@media (max-width: 1023.98px) {
  body.lsbb-product .sky-view .vv__card { flex-direction: column; align-items: center; gap: 32px; padding: 56px 32px; }
  body.lsbb-product .sky-view .vv__text { flex: 0 0 auto; width: 100%; max-width: 560px; align-items: center; text-align: center; }
  body.lsbb-product .sky-view :is(.vv__title, .vv__lede) { text-align: center; }
  .sky-view__turn { align-self: center; }
  .sky-view__stage { flex: 0 0 auto; width: 100%; max-width: 640px; }
}
@media (max-width: 767px) {
  body.lsbb-product .sky-view .vv__card { padding: 56px 16px 48px; gap: 24px; }
  .sky-view__stage { --lw: 180px; --nw: 280px; height: 400px; }
  .sky-view__hint { left: 34%; }
  .sky-view__frames.is-ready { background-image: var(--strip-sm); }
  .sky-view__feed { top: auto; bottom: 0; translate: none; border-radius: 16px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 18px 40px rgba(0, 40, 60, .26); }
  .sky-view__hint { bottom: 4px; font-size: 12.5px; }
  .sky-view__turn { font-size: 15px; padding: 11px 18px 11px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .sky-view__feed, .sky-view__shot, .sky-view__turn svg { transition: none; }
}

/* "A Hand Illustrated Book" (sections/pdp/book.njk), under "A Powerful Little Camera" on the same sky band
   (the band's colour where the camera section ends, as the mounting section below picks up). The cover
   beside the copy, and the making-of video as a link to YouTube. Hidden while Basic is picked. */
.sky-book { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: #C4E2F1; color: var(--bb-ink); }
.sky-book__inner {
  box-sizing: border-box; max-width: 1120px; margin: 0 auto; padding: 32px 50px 72px;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 64px;
}
.sky-book__cover { justify-self: center; width: min(100%, 480px); }
/* The image carries the book's shadow on its left, so the book itself sits right of centre; shift it back */
.sky-book__cover img { display: block; width: 100%; height: auto; translate: -8.8% 0; rotate: -3deg; }
.sky-book__body { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.sky-book__text { max-width: 520px; }
.sky-book__text em { font-style: italic; color: var(--bb-ink); }
.sky-book__video {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 8px; padding: 10px 20px 10px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(0, 51, 51, .08), 0 6px 18px rgba(30, 80, 110, .08);
  color: var(--bb-ink); text-decoration: none; transition: background-color .2s, box-shadow .2s, transform .2s var(--bb-ease);
}
.sky-book__video:hover { background: rgba(255, 255, 255, .8); transform: translateY(-1px); }
.sky-book__video:focus-visible { outline: 2px solid var(--bb-ink); outline-offset: 3px; }
.sky-book__play { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bb-green); }
.sky-book__play svg { width: 16px; height: 16px; fill: var(--bb-ink); translate: 1px 0; }
.sky-book__video-text { display: flex; flex-direction: column; gap: 1px; font: 400 13.5px/18px Inter, system-ui, sans-serif; color: var(--bb-ink-soft); }
.sky-book__video-text strong { font-size: 15.5px; line-height: 20px; font-weight: 600; color: var(--bb-ink); }
body:has(#nook-plan-basic:checked) .sky-book { display: none; }
@media (max-width: 1023px) {
  .sky-book__inner { padding: 24px 32px 64px; gap: 40px; }
}
@media (max-width: 767px) {
  .sky-book__inner { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 16px 16px 48px; text-align: center; }
  .sky-book__cover { width: min(78%, 310px); }
  .sky-book__body { align-items: center; gap: 14px; }
  .sky-book__video { margin-top: 4px; text-align: left; }
}

/* "Truly clever" (sections/pdp/clever.njk), under the camera section on the same sky band: the four smart
   features beside a phone that plays a short demo of the chosen one, drawn in HTML over feeder-cam photos
   (no video). Every size inside the phone is in em of --tc-w, so the whole device scales as one. The demos'
   resting state is their last frame; the animations only run from the first frame while a screen is on
   (and not at all with reduced motion). Phones and tablets: the phone, four tabs under it, then the text. */
.sky-clever { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: #C4E2F1; color: var(--bb-ink); }
.sky-clever__inner { box-sizing: border-box; max-width: 1180px; margin: 0 auto; padding: 24px 50px 72px; }
.sky-clever__head { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 640px; margin: 0 auto 12px; text-align: center; }
.sky-clever__lede { max-width: 560px; }
.sky-clever__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px; }

/* The features: four cards, the chosen one forward with a line that fills until the next one's turn */
.tc-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tc-feature {
  position: relative; margin: 0; padding: 18px 22px 22px 18px; border-radius: 22px; cursor: pointer;
  background: rgba(255, 255, 255, .26); box-shadow: inset 0 0 0 1px rgba(0, 51, 51, .06);
  transition: background-color .35s var(--bb-ease), box-shadow .35s var(--bb-ease);
}
.tc-feature:hover { background: rgba(255, 255, 255, .45); }
.tc-feature.is-active { background: rgba(255, 255, 255, .84); box-shadow: inset 0 0 0 1px rgba(0, 51, 51, .05), 0 14px 34px rgba(30, 80, 110, .12); }
.tc-feature__btn {
  display: flex; align-items: center; gap: 14px; width: 100%; margin: 0; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.tc-feature__btn:focus-visible { outline: 2px solid var(--bb-ink); outline-offset: 8px; border-radius: 14px; }
.tc-feature__icon {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
  background: rgba(255, 255, 255, .72); color: var(--bb-ink); transition: background-color .35s var(--bb-ease);
}
.tc-feature__icon svg { width: 22px; height: 22px; }
.tc-feature.is-active .tc-feature__icon { background: var(--bb-green); }
.tc-feature__short { display: none; }
.tc-feature__title { font: 600 20px/1.25 Inter, system-ui, sans-serif; letter-spacing: -.01em; }
.tc-feature__text { margin: 6px 0 0 58px; font: 400 16px/1.5 Inter, system-ui, sans-serif; color: var(--bb-ink-soft); transition: color .35s; text-wrap: pretty; }
.tc-feature:not(.is-active) .tc-feature__text { color: rgba(0, 51, 51, .58); }
.tc-feature__progress { position: absolute; left: 76px; right: 22px; bottom: 11px; height: 3px; border-radius: 3px; overflow: hidden; background: rgba(0, 51, 51, .08); opacity: 0; transition: opacity .3s; }
.tc-feature__progress i { display: block; height: 100%; border-radius: inherit; background: var(--bb-green); transform: scaleX(0); transform-origin: left; }
.sky-clever.is-playing .tc-feature.is-active .tc-feature__progress { opacity: 1; }
.sky-clever.is-playing .tc-feature.is-active .tc-feature__progress i { animation: tc-progress 7s linear forwards; }
@keyframes tc-progress { to { transform: scaleX(1); } }
/* Off screen, hovered or in a background tab, the turn and the demo wait */
.sky-clever.is-paused :is(.tc-feature__progress i, .tc-screen.is-on, .tc-screen.is-on *) { animation-play-state: paused !important; }

/* The phone, on a soft halo, with the blue tit landing on its corner */
.tc-stage { --tc-w: 284px; --tc-pad: 44px; position: relative; display: grid; place-items: center; padding: var(--tc-pad) 0; }
.tc-halo { position: absolute; width: calc(var(--tc-w) * 2); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .8), rgba(255, 255, 255, .3) 58%, rgba(255, 255, 255, 0)); }
.tc-bird {
  position: absolute; z-index: 2; width: calc(var(--tc-w) * .3); height: auto;
  left: calc(50% + var(--tc-w) * .19); top: calc(var(--tc-pad) - var(--tc-w) * .33);
  rotate: 6deg; animation: sky-hover 3.4s ease-in-out infinite alternate;
}
.tc-phone {
  position: relative; z-index: 1; box-sizing: border-box; width: var(--tc-w); aspect-ratio: 300 / 618;
  padding: .6em; border-radius: 3em; font-size: calc(var(--tc-w) / 300 * 16);
  background: linear-gradient(150deg, #223232, #0B1515 60%);
  box-shadow: inset 0 0 0 .12em rgba(255, 255, 255, .1), 0 44px 80px -24px rgba(0, 40, 60, .5), 0 18px 36px -18px rgba(0, 40, 60, .35);
}
.tc-phone__screen { position: relative; height: 100%; overflow: hidden; border-radius: 2.45em; background: #F4F7F6; isolation: isolate; font-family: Inter, system-ui, sans-serif; color: var(--bb-ink); }
.tc-phone__screen p { margin: 0; }
.tc-phone__island { position: absolute; z-index: 6; top: .62em; left: 50%; width: 5.4em; height: 1.55em; margin-left: -2.7em; border-radius: 1em; background: #050909; }
.tc-phone__screen::after { content: ""; position: absolute; z-index: 6; bottom: .4em; left: 50%; width: 7.4em; height: .28em; margin-left: -3.7em; border-radius: 1em; background: rgba(0, 20, 20, .32); }
.tc-status { position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; height: 2.8em; padding: .2em 1.45em 0 2.05em; box-sizing: border-box; font: 600 .82em/1 Inter, system-ui, sans-serif; }
.tc-status svg { width: 3.3em; height: auto; fill: currentColor; }
.tc-status--light { color: #fff; }
.tc-screen { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: scale(1.04); transition: opacity .5s var(--bb-ease), transform .7s var(--bb-ease), visibility 0s .5s; }
.tc-screen.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--bb-ease), transform .7s var(--bb-ease), visibility 0s; }
@keyframes tc-pop { from { opacity: 0; transform: translateY(.6em) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes tc-rise { from { opacity: 0; transform: translateY(.7em); } to { opacity: 1; transform: none; } }
@keyframes tc-blink { 50% { opacity: 0; } }

/* 1 Species recognition: the cam finds the bird, locks on, names it, and the card slides up */
.tc-cam { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 28% 50%; }
.tc-screen--id::before { content: ""; position: absolute; z-index: 1; inset: 0 0 auto; height: 7em; background: linear-gradient(rgba(0, 0, 0, .38), rgba(0, 0, 0, 0)); }
.tc-live {
  position: absolute; z-index: 2; top: 4.1em; left: 1.4em; display: inline-flex; align-items: center; gap: .45em;
  padding: .35em .75em .35em .6em; border-radius: 1em; background: rgba(0, 0, 0, .34); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font: 700 .66em/1.2 Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase;
}
.tc-live i { width: .6em; height: .6em; border-radius: 50%; background: #FF5A4E; animation: tc-blink 1.4s ease-in-out infinite; }
.tc-screen--id { --x: 15%; --y: 20%; --w: 60%; --h: 31%; }
.tc-reticle { position: absolute; z-index: 2; left: var(--x); top: var(--y); width: var(--w); height: var(--h); }
.tc-reticle b { position: absolute; width: 1.5em; height: 1.5em; border: 0 solid var(--bb-green); }
.tc-reticle b:nth-child(1) { top: 0; left: 0; border-width: .17em 0 0 .17em; border-top-left-radius: .6em; }
.tc-reticle b:nth-child(2) { top: 0; right: 0; border-width: .17em .17em 0 0; border-top-right-radius: .6em; }
.tc-reticle b:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 .17em .17em; border-bottom-left-radius: .6em; }
.tc-reticle b:nth-child(4) { bottom: 0; right: 0; border-width: 0 .17em .17em 0; border-bottom-right-radius: .6em; }
.tc-reticle i { position: absolute; left: 4%; right: 4%; top: 0; height: .14em; border-radius: 1em; background: rgba(255, 255, 255, .95); box-shadow: 0 0 .9em .2em rgba(255, 255, 255, .55); opacity: 0; }
.tc-found {
  position: absolute; z-index: 3; left: var(--x); top: calc(var(--y) - 2.5em);
  display: inline-flex; align-items: center; gap: .35em; padding: .45em .8em .45em .6em; border-radius: 1em;
  background: rgba(255, 255, 255, .95); box-shadow: 0 4px 14px rgba(0, 0, 0, .18); font: 700 .74em/1.2 Inter, system-ui, sans-serif;
}
.tc-found svg, .tc-sheet__kicker svg { width: 1.15em; height: 1.15em; color: var(--bb-green-deep); }
.tc-sheet {
  position: absolute; z-index: 3; left: .45em; right: .45em; bottom: .45em; padding: .6em 1.15em 1.5em; border-radius: 2em;
  background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 -10px 30px rgba(0, 0, 0, .14);
}
.tc-sheet__grip { display: block; width: 2.4em; height: .3em; margin: 0 auto .9em; border-radius: 1em; background: rgba(0, 51, 51, .16); }
.tc-sheet__kicker { display: flex; align-items: center; gap: .35em; margin-bottom: .45em !important; font: 600 .68em/1.2 Inter, system-ui, sans-serif; color: var(--bb-green-deep); }
.tc-sheet__name { font: 525 1.7em/1.05 AwesomeSerifVAR, AwesomeSerif, Georgia, serif; font-variation-settings: "hght" 1000; font-synthesis: none; }
.tc-sheet__latin { margin: .3em 0 1em !important; font: italic 400 .8em/1.3 Inter, system-ui, sans-serif; color: var(--bb-ink-soft); }
.tc-pill-btn { display: flex; justify-content: center; padding: .75em 1em; border-radius: 2em; background: var(--bb-ink); color: #fff; font: 600 .8em/1.2 Inter, system-ui, sans-serif; }
.tc-screen--id.is-on .tc-cam { animation: tc-zoom 7s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes tc-zoom { from { transform: scale(1.14); } }
.tc-screen--id.is-on .tc-reticle { animation: tc-lock 1.1s .35s var(--bb-ease) both; }
@keyframes tc-lock { from { opacity: 0; transform: scale(1.3); } 55% { opacity: 1; } }
.tc-screen--id.is-on .tc-reticle b { animation: tc-green .3s 1.45s both; }
@keyframes tc-green { from { border-color: #fff; } }
.tc-screen--id.is-on .tc-reticle i { animation: tc-scan 1.1s .45s ease-in-out both; }
@keyframes tc-scan { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.tc-screen--id.is-on .tc-found { animation: tc-pop .5s 1.6s var(--bb-spring) both; }
.tc-screen--id.is-on .tc-sheet { animation: tc-sheet .7s 2.2s var(--bb-ease) both; }
@keyframes tc-sheet { from { transform: translateY(112%); } }

/* 2 Name that bird: a regular gets a name, and its week of visits fills in */
.tc-screen--name, .tc-screen--care { display: flex; flex-direction: column; gap: .7em; padding: 3.3em .85em 1.2em; box-sizing: border-box; background: linear-gradient(180deg, #DDEEF7 0, #F4F7F6 11em); }
.tc-apphead { margin: .1em .35em 0 !important; font: 525 1.5em/1.1 AwesomeSerifVAR, AwesomeSerif, Georgia, serif; font-variation-settings: "hght" 1000; font-synthesis: none; }
.tc-card { padding: .5em .5em .85em; border-radius: 1.5em; background: #fff; box-shadow: 0 6px 18px rgba(0, 40, 40, .07); }
.tc-card__photo { position: relative; height: 11.2em; overflow: hidden; border-radius: 1.1em; }
.tc-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.tc-badge { position: absolute; top: .6em; left: .6em; padding: .35em .7em; border-radius: 1em; background: rgba(255, 255, 255, .92); font: 700 .6em/1.2 Inter, system-ui, sans-serif; letter-spacing: .03em; }
.tc-nameplate {
  position: absolute; left: .6em; bottom: .6em; display: inline-flex; align-items: center; gap: .3em;
  padding: .4em .8em .4em .55em; border-radius: 1em; background: var(--bb-green); box-shadow: 0 4px 14px rgba(0, 120, 60, .3);
  font: 700 .85em/1.2 Inter, system-ui, sans-serif;
}
.tc-nameplate svg { width: 1.05em; height: 1.05em; }
.tc-card__prompt { margin: .7em .35em .55em !important; font: 500 .76em/1.35 Inter, system-ui, sans-serif; }
.tc-field {
  position: relative; display: flex; align-items: center; height: 2.6em; margin: 0 .35em; padding: 0 .9em; box-sizing: border-box;
  border-radius: .9em; background: #F1F5F4; box-shadow: inset 0 0 0 .1em var(--bb-ink); font: 600 .85em/1 Inter, system-ui, sans-serif;
}
.tc-field__ph { position: absolute; left: .9em; color: rgba(0, 51, 51, .42); font-weight: 500; opacity: 0; }
.tc-field__val { display: inline-block; width: calc(var(--n, 5) * 1ch); overflow: hidden; white-space: nowrap; }
.tc-caret { width: .1em; height: 1.2em; margin-left: .08em; background: var(--bb-ink); animation: tc-blink 1s steps(1) infinite; }
.tc-pill-btn--save { margin: .65em .35em 0; background: var(--bb-green); color: var(--bb-ink); }
.tc-visits { padding: .8em .95em .95em; border-radius: 1.3em; background: #fff; box-shadow: 0 6px 18px rgba(0, 40, 40, .07); }
.tc-visits p { margin-bottom: .7em !important; font: 700 .6em/1.2 Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--bb-ink-soft); }
.tc-visits ol { display: flex; justify-content: space-between; margin: 0; padding: 0; list-style: none; }
.tc-visits li { display: flex; flex-direction: column; align-items: center; gap: .45em; margin: 0; font: 600 .62em/1 Inter, system-ui, sans-serif; color: var(--bb-ink-soft); }
.tc-visits li i { width: 2.3em; height: 2.3em; border-radius: 50%; background: #EAF0EF; }
.tc-visits li.is-on i { background: var(--bb-green); }
.tc-screen--name.is-on .tc-field { animation: tc-focus .3s .4s both; }
@keyframes tc-focus { from { box-shadow: inset 0 0 0 .1em transparent; } }
.tc-screen--name.is-on .tc-field__ph { animation: tc-placeholder .2s .75s both; }
@keyframes tc-placeholder { from { opacity: 1; } }
.tc-screen--name.is-on .tc-field__val { animation: tc-type .9s .8s both; animation-timing-function: steps(var(--n, 5), end); }
@keyframes tc-type { from { width: 0; } }
.tc-screen--name.is-on .tc-pill-btn--save { animation: tc-press .4s 1.9s both; }
@keyframes tc-press { from { background: var(--bb-ink); color: #fff; } 50% { transform: scale(.95); } }
.tc-screen--name.is-on .tc-nameplate { animation: tc-pop .5s 2.3s var(--bb-spring) both; }
.tc-screen--name.is-on .tc-visits li.is-on i { animation: tc-fill .45s calc(2.7s + var(--d) * .1s) var(--bb-spring) both; }
@keyframes tc-fill { from { background: #EAF0EF; } 50% { transform: scale(.8); } }

/* 3 Bird care: an alert about a visitor, then three things to do, ticked off one by one */
.tc-snap { flex: none; height: 12em; overflow: hidden; border-radius: 1.3em; }
.tc-snap img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.tc-alert {
  position: relative; display: flex; align-items: flex-start; gap: .7em; margin: -2.9em .55em 0; padding: .85em .9em;
  border-radius: 1.2em; background: #fff; box-shadow: 0 12px 26px rgba(120, 40, 20, .16), inset 0 0 0 1px rgba(214, 90, 60, .16);
}
.tc-alert__icon { position: relative; flex: none; display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: .75em; background: #FFE5DC; color: #D2553A; }
.tc-alert__icon svg { width: 1.35em; height: 1.35em; }
.tc-alert__icon::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(210, 85, 58, .45); }
.tc-alert__title { font: 700 .78em/1.25 Inter, system-ui, sans-serif; color: #B8442B; }
.tc-alert__text { margin-top: .2em !important; font: 400 .72em/1.35 Inter, system-ui, sans-serif; }
.tc-tips__title { margin: .55em .35em 0 !important; font: 700 .76em/1.3 Inter, system-ui, sans-serif; }
.tc-tips { display: flex; flex-direction: column; gap: .45em; margin: 0; padding: 0; list-style: none; }
.tc-tips li { display: flex; align-items: center; gap: .65em; margin: 0; padding: .75em .85em; border-radius: 1em; background: #fff; box-shadow: 0 3px 10px rgba(0, 40, 40, .05); font: 500 .74em/1.3 Inter, system-ui, sans-serif; }
.tc-tips li span { flex: none; display: grid; place-items: center; width: 1.75em; height: 1.75em; border-radius: 50%; background: var(--bb-green); }
.tc-tips li svg { width: 1.1em; height: 1.1em; fill: none; stroke: var(--bb-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tc-screen--care.is-on .tc-alert { animation: tc-drop .65s .45s var(--bb-spring) both; }
@keyframes tc-drop { from { opacity: 0; transform: translateY(-1.4em) scale(.95); } }
.tc-screen--care.is-on .tc-alert__icon::after { animation: tc-ping 1.6s 1.1s ease-out 2; }
@keyframes tc-ping { to { box-shadow: 0 0 0 .7em rgba(210, 85, 58, 0); } }
.tc-screen--care.is-on .tc-tips__title { animation: tc-rise .45s 1.3s var(--bb-ease) both; }
.tc-screen--care.is-on .tc-tips li { animation: tc-rise .45s calc(1.6s + var(--d) * .45s) var(--bb-ease) both; }
.tc-screen--care.is-on .tc-tips li span { animation: tc-tick .35s calc(2s + var(--d) * .45s) var(--bb-spring) both; }
@keyframes tc-tick { from { background: #EAF0EF; transform: scale(.85); } }

/* 4 Pet alert: the lock screen, a notification drops in and opens onto the snapshot */
.tc-screen--pet { background: linear-gradient(180deg, var(--sky-top), #E9F4F9); }
.tc-wall { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 22% 0; opacity: .85; }
.tc-lock__day, .tc-lock__time { position: absolute; z-index: 1; left: 0; right: 0; text-align: center; color: rgba(0, 45, 45, .82); }
.tc-lock__day { top: 4.4em; font: 600 .9em/1 Inter, system-ui, sans-serif; }
.tc-lock__time { top: 1.15em; font: 500 4.4em/1 Inter, system-ui, sans-serif; letter-spacing: -.04em; }
.tc-notif {
  position: absolute; z-index: 2; top: 12.6em; left: .65em; right: .65em; padding: .8em; border-radius: 1.45em;
  background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 12px 32px rgba(0, 40, 60, .2);
}
.tc-notif__row { display: flex; align-items: flex-start; gap: .65em; }
.tc-appicon { flex: none; display: flex; align-items: center; justify-content: flex-start; width: 2.35em; height: 2.35em; padding-left: .37em; box-sizing: border-box; overflow: hidden; border-radius: .7em; background: var(--bb-green); color: var(--bb-ink); }
.tc-appicon svg { flex: none; width: auto; height: 1.6em; }
.tc-notif__copy { flex: 1; min-width: 0; }
.tc-notif__meta { display: flex; justify-content: space-between; margin-bottom: .2em !important; font: 500 .6em/1.2 Inter, system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: rgba(0, 51, 51, .62); }
.tc-notif__meta b { font-weight: 700; }
.tc-notif__title { display: flex; align-items: center; gap: .3em; font: 700 .82em/1.25 Inter, system-ui, sans-serif; }
.tc-notif__title svg { width: 1.05em; height: 1.05em; }
.tc-notif__text { margin-top: .1em !important; font: 400 .76em/1.3 Inter, system-ui, sans-serif; }
.tc-notif__more { display: grid; grid-template-rows: 1fr; }
.tc-notif__more > div { min-height: 0; overflow: hidden; }
.tc-notif__more img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3.6; object-fit: cover; object-position: 50% 62%; margin-top: .75em; border-radius: .95em; }
.tc-screen--pet.is-on .tc-notif { animation: tc-notif .7s .5s var(--bb-spring) both; }
@keyframes tc-notif { from { opacity: 0; transform: translateY(-3.5em) scale(.92); } }
.tc-screen--pet.is-on .tc-notif__more { animation: tc-expand .65s 1.8s var(--bb-ease) both; }
@keyframes tc-expand { from { grid-template-rows: 0fr; } }

/* Phones and tablets: under the phone, one frosted card (.tc-panel) holds the four tabs as a segmented
   control - the chosen one raised in white with its line filling - and below a hairline, the chosen
   feature's title and text, so none of it sits loose on the sky. */
.tc-captions { display: none; }

@media (max-width: 1023.98px) {
  .sky-clever__inner { padding: 24px 32px 72px; }
  .sky-clever__head { margin-bottom: 8px; }
  .sky-clever__body { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0; }
  .tc-stage { --tc-w: 272px; --tc-pad: calc(var(--tc-w) * .33 + 12px); order: -1; width: 100%; }
  .tc-panel {
    box-sizing: border-box; width: 100%; max-width: 560px; padding: 6px; border-radius: 26px;
    background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 16px 40px rgba(30, 80, 110, .14);
  }
  .tc-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 0; border-radius: 20px; background: rgba(214, 234, 245, .7); }
  .tc-feature { padding: 11px 4px 15px; border-radius: 20px; background: transparent; box-shadow: none; }
  .tc-feature:hover { background: transparent; }
  .tc-feature.is-active { background: #fff; box-shadow: 0 1px 2px rgba(0, 40, 40, .06), 0 6px 16px rgba(30, 80, 110, .12); }
  .tc-feature__btn { flex-direction: column; justify-content: center; gap: 7px; text-align: center; }
  .tc-feature__icon { width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, .8); }
  .tc-feature__icon svg { width: 20px; height: 20px; }
  .tc-feature__short { display: block; font: 600 13.5px/1.2 Inter, system-ui, sans-serif; letter-spacing: -.005em; color: var(--bb-ink-soft); transition: color .3s; }
  .tc-feature.is-active .tc-feature__short { color: var(--bb-ink); }
  .tc-feature__title, .tc-feature__text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .tc-feature__progress { left: 16px; right: 16px; bottom: 6px; height: 2.5px; }
  .tc-captions { display: grid; padding: 16px 16px 14px; }
  .tc-caption { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .35s var(--bb-ease), transform .45s var(--bb-ease), visibility 0s .35s; }
  .tc-caption.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--bb-ease) .1s, transform .45s var(--bb-ease) .1s, visibility 0s; }
  .tc-caption__title { margin: 0 0 4px; font: 600 18px/1.3 Inter, system-ui, sans-serif; letter-spacing: -.01em; }
  .tc-caption__text { margin: 0; font: 400 16px/1.5 Inter, system-ui, sans-serif; color: var(--bb-ink-soft); text-wrap: pretty; }
}
@media (max-width: 767px) {
  .sky-clever__inner { padding: 16px 16px 56px; }
  .tc-stage { --tc-w: 240px; --tc-pad: 28px; }
  .tc-bird { display: none; }
  .tc-feature__short { font-size: 12px; }
  .tc-captions { padding: 14px 12px 10px; }
  .tc-caption__title { font-size: 17px; }
  .tc-caption__text { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .sky-clever :is(.tc-screen, .tc-screen *), .tc-bird { animation: none !important; }
  .tc-screen, .tc-caption { transition: none !important; transform: none !important; }
}

/* Ratings and reviews (sections/pdp/reviews.njk), on the sky band just before "Your birds, your view" (the
   band's colour there, as the press quotes and mounting section carry it). Desktop: the summary
   card (score, histogram, count) stays in view beside a grid of review cards, all one size (one-line title,
   three lines of text); a card whose review doesn't fit shows "Read more" and opens it in a dialog. Under
   1024px the summary lies flat; on phones the cards become a swipeable row. The histogram bars fill in when
   the section rises in (premium-polish's reveal); the smallest still show as a dot. */
.sky-reviews { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: #C7E3F2; color: var(--bb-ink); scroll-margin-top: 80px; }
/* With "Your birds, your view" hidden the reviews end the sky band: rounded off like the hero panel */
.sky-reviews { border-radius: 0 0 40px 40px; }
@media (max-width: 767px) { .sky-reviews { border-radius: 0 0 28px 28px; } }
.sky-reviews__inner { box-sizing: border-box; max-width: 1240px; margin: 0 auto; padding: 24px 50px 88px; }
.sky-reviews__head { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 640px; margin: 0 auto 48px; text-align: center; }
.sky-reviews__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px; align-items: start; }
.sky-reviews__summary, .sky-review { box-sizing: border-box; border-radius: 26px; background: #FBFAF8; box-shadow: inset 0 0 0 1px rgba(0, 51, 51, .06); }
.sky-reviews__summary { position: sticky; top: 104px; padding: 34px 30px 28px; }
.sky-reviews__score { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; }
.sky-reviews__score-num { font: 525 92px/.86 AwesomeSerifVAR, AwesomeSerif, Georgia, serif; font-variation-settings: "hght" 1000; font-synthesis: none; letter-spacing: -.02em; }
.sky-reviews__score-of { font: 500 16px/1 Inter, system-ui, sans-serif; color: var(--bb-ink-soft); }
.sky-reviews__stars { display: inline-flex; gap: 3px; }
.sky-reviews__stars svg { width: 17px; height: 17px; fill: var(--bb-ink); }
.sky-reviews__stars--lg svg { width: 22px; height: 22px; }
.sky-reviews__bars { list-style: none; display: grid; gap: 9px; margin: 26px 0 20px; padding: 0; }
.sky-reviews__bar { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 12px; }
.sky-reviews__bar-stars { display: flex; justify-content: flex-end; gap: 1px; }
.sky-reviews__bar-stars svg { width: 11px; height: 11px; fill: var(--bb-ink-soft); }
.sky-reviews__bar-track { position: relative; height: 8px; overflow: hidden; border-radius: 999px; background: rgba(0, 51, 51, .08); }
.sky-reviews__bar-track i {
  position: absolute; inset: 0; border-radius: inherit; background: var(--bb-green); transform-origin: left;
  transform: scaleX(max(var(--share), .018)); transition: transform 1.1s var(--bb-ease) calc(var(--i) * 90ms + 200ms);
}
.sky-reviews.bb-reveal:not(.is-in) .sky-reviews__bar-track i { transform: scaleX(0); }
.sky-reviews__count { margin: 0; font: 500 14px/20px Inter, system-ui, sans-serif; color: var(--bb-ink-soft); }
.sky-reviews__count strong { margin-right: 2px; font-size: 20px; font-weight: 700; color: var(--bb-ink); font-variant-numeric: tabular-nums; }
.sky-reviews__list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; }
.sky-review { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; margin: 0; padding: 26px 28px 24px; transition: transform .2s var(--bb-ease), box-shadow .2s var(--bb-ease); }
/* (position: the hidden screen-reader labels inside a card stay in it, so the phone row can't widen the page) */
.sky-review__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.sky-reviews__stars svg.is-empty { fill: rgba(0, 51, 51, .16); }
/* Every review says it's verified and where it's from */
.sky-review__source { display: inline-flex; align-items: center; gap: 4px; font: 600 12px/16px Inter, system-ui, sans-serif; letter-spacing: .01em; color: var(--bb-ink-soft); white-space: nowrap; }
.sky-review__source svg { flex: none; width: 13px; height: 13px; fill: none; stroke: var(--bb-green-deep); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* The first six, then "Show all" (phones swipe through all of them) */
.sky-reviews__list:not(.is-all) > .is-extra { display: none; }
.sky-reviews__all {
  display: block; margin: 24px auto 0; padding: 13px 26px; border: 1px solid rgba(0, 51, 51, .16); border-radius: 999px;
  background: transparent; color: var(--bb-ink); cursor: pointer; font: 600 15px/20px Inter, system-ui, sans-serif; transition: background-color .2s, border-color .2s;
}
.sky-reviews__all:hover { background: rgba(0, 51, 51, .05); border-color: rgba(0, 51, 51, .26); }
.sky-reviews__list.is-all + .sky-reviews__all { display: none; }
.sky-review__title { max-width: 100%; margin: 4px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 19px/1.3 Inter, system-ui, sans-serif; letter-spacing: -.005em; color: var(--bb-ink); }
.sky-review__text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  min-height: calc(3 * 1.55em); margin: 0; font: 400 16px/1.55 Inter, system-ui, sans-serif; color: var(--bb-ink);
}
.sky-review__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: auto; padding-top: 4px; }
.sky-review__meta { margin: 0; font: 500 13.5px/20px Inter, system-ui, sans-serif; color: var(--bb-ink-soft); }
/* The whole card opens the dialog when its review is cut short; "Read more" says so */
.sky-review__open {
  flex: none; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 14px/20px Inter, system-ui, sans-serif; color: var(--bb-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.sky-review__open::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.sky-review__open:focus-visible { outline: none; }
.sky-review:has(.sky-review__open:focus-visible) { outline: 2px solid var(--bb-ink); outline-offset: 3px; }
.sky-review:has(.sky-review__open:not([hidden])):hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(0, 51, 51, .1), 0 10px 24px rgba(40, 30, 10, .07); }
/* The full review */
.sky-review-dialog { width: min(560px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 48px); padding: 0; border: 0; background: none; color: var(--bb-ink); overflow: visible; }
.sky-review-dialog::backdrop { background: rgba(0, 32, 32, .42); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sky-review-dialog[open] .sky-review-dialog__card { animation: sky-pop .28s var(--bb-ease); }
@keyframes sky-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.sky-review-dialog__card:focus { outline: none; }
.sky-review-dialog__card { position: relative; box-sizing: border-box; max-height: calc(100dvh - 48px); overflow: auto; padding: 32px 32px 28px; border-radius: 26px; background: #FBFAF8; box-shadow: 0 24px 64px rgba(0, 0, 0, .22); }
.sky-review-dialog__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
/* The top row (stars, Verified · platform) leaves room for the close button */
.sky-review-dialog__body .sky-review__top { padding-right: 48px; }
.sky-review-dialog__body .sky-review__title { white-space: normal; font-size: 22px; }
.sky-review-dialog__body .sky-review__text { display: block; min-height: 0; overflow: visible; font-size: 17px; line-height: 1.6; }
.sky-review-dialog__body .sky-review__foot { margin-top: 4px; }
.sky-review-dialog__close {
  position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(0, 51, 51, .07); color: var(--bb-ink); cursor: pointer; transition: background-color .2s;
}
.sky-review-dialog__close:hover { background: rgba(0, 51, 51, .13); }
.sky-review-dialog__close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
html:has(.sky-review-dialog[open]) { overflow: hidden; }
@media (max-width: 1023px) {
  .sky-reviews__inner { padding: 16px 32px 72px; }
  .sky-reviews__grid { grid-template-columns: minmax(0, 1fr); }
  .sky-reviews__summary {
    position: static; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "score bars" "stars bars" "count bars";
    column-gap: 32px; align-items: center; padding: 26px 28px;
  }
  .sky-reviews__score { grid-area: score; }
  .sky-reviews__stars--lg { grid-area: stars; }
  .sky-reviews__bars { grid-area: bars; margin: 0; }
  .sky-reviews__count { grid-area: count; margin-top: 12px; }
}
@media (max-width: 767px) {
  .sky-reviews__inner { padding: 8px 16px 56px; }
  .sky-reviews__head { gap: 14px; margin-bottom: 28px; }
  .sky-reviews__summary { column-gap: 20px; padding: 22px 20px; border-radius: 22px; }
  .sky-reviews__score-num { font-size: 64px; }
  .sky-reviews__score-of { font-size: 13px; }
  .sky-reviews__stars--lg svg { width: 16px; height: 16px; }
  .sky-reviews__bar { grid-template-columns: 50px minmax(0, 1fr); gap: 8px; }
  .sky-reviews__bar-stars svg { width: 9px; height: 9px; }
  /* The count runs across the card under both columns, on one line */
  .sky-reviews__summary { grid-template-areas: "score bars" "stars bars" "count count"; }
  .sky-reviews__count { margin-top: 16px; font-size: 13.5px; line-height: 20px; white-space: nowrap; }
  .sky-reviews__count strong { font-size: 18px; }
  .sky-reviews__list {
    display: flex; align-items: stretch; gap: 12px; margin: 16px -16px 0; padding: 0 16px 6px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .sky-reviews__list::-webkit-scrollbar { display: none; }
  .sky-review { flex: 0 0 84%; margin: 0; padding: 22px 22px 20px; border-radius: 22px; scroll-snap-align: start; }
  .sky-review__title { font-size: 17px; }
  .sky-reviews__list:not(.is-all) > .is-extra { display: flex; }
  .sky-reviews__all { display: none; }
  .sky-review__text { font-size: 15px; }
  .sky-review-dialog__card { padding: 26px 22px 22px; border-radius: 22px; }
  .sky-review-dialog__body .sky-review__title { font-size: 19px; }
  .sky-review-dialog__body .sky-review__text { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .sky-reviews__bar-track i { transition: none; } }

/* Mounting options (sections/pdp/mounts.njk), between "Never miss a visit" and "Your birds, your view":
   it carries their sky band through (the colour where the band's gradient meets it, so all three read
   as one band). Two cards; with the sky look the hanger card's branch runs in from its top edge and the
   pole out of the other card's bottom, so each layer is drawn edge to edge; captions sit underneath. */
.sky-mounts { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: linear-gradient(180deg, #C4E2F1, #C7E3F2); color: var(--bb-ink); }
.sky-mounts__inner { box-sizing: border-box; max-width: 1340px; margin: 0 auto; padding: 40px 50px 96px; }
.sky-mounts__head { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 640px; margin: 0 auto 56px; text-align: center; }
.sky-mounts__lede { max-width: 520px; }
.sky-mounts__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1224px; margin: 0 auto; }
.sky-mount { margin: 0; }
.sky-mount__card {
  position: relative; aspect-ratio: 414 / 401; overflow: hidden; border-radius: 32px; isolation: isolate;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 42%, #E3F0F6 100%);
}
.sky-mount__layer { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* The yard photos are square and fill the card */
.sky-mount__card--photo { aspect-ratio: 1; }
.sky-mount__card--photo .sky-mount__layer { object-fit: cover; }
/* The Nook and the bit of hook in front of the branch swing together, from where the hook sits */
.sky-mount__swing { transform-origin: 61.8% 10.3%; animation: sky-swing 5.5s ease-in-out infinite alternate; animation-delay: -2.75s; }
@keyframes sky-swing { from { rotate: -1.1deg; } to { rotate: 1.1deg; } }
.sky-paused .sky-mount__swing { animation-play-state: paused; }
.sky-mount__body { padding: 22px 8px 0; }
.sky-mount__name { margin: 0 0 4px; font: 600 22px/1.3 Inter, system-ui, sans-serif; letter-spacing: -.005em; }
.sky-mount__text { margin: 0; font: 400 17px/1.5 Inter, system-ui, sans-serif; color: var(--bb-ink-soft); }
@media (max-width: 1023px) {
  .sky-mounts__inner { padding: 32px 32px 80px; }
}
@media (max-width: 767px) {
  .sky-mounts__inner { padding: 24px 16px 56px; }
  .sky-mounts__head { gap: 14px; margin-bottom: 32px; }
  .sky-mounts__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .sky-mount__card { border-radius: 28px; }
  .sky-mount__body { padding: 16px 6px 0; }
  .sky-mount__name { font-size: 19px; }
  .sky-mount__text { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) { .sky-mount__swing { animation: none; } }

/* 8 ─ Header ─────────────────────────────────────────────────────────────── */
/* The frosted bar picks up the sky instead of premium-polish's warm white. */
body.lsbb-product .lsbb-site-header::before { background: rgba(244, 250, 252, .8); }

/* Phone menu: a panel that slides in from the left while the page dims and blurs behind it
   (partials/site-header.njk). Alpine's x-transition classes drive it: --from (opening) and --out
   (closing) are the closed state; --anim's duration only tells Alpine how long to wait. The account and
   bag icons are the header's own masks; the section icons are one filled set on the same 24px grid. */
@media (max-width: 1023px) {
  html:has(body.lsbb-nav-open) { overflow: hidden; }
  /* Over the sticky buy bar (z-index 1337) for as long as the menu shows, closing animation included */
  .lsbb-site-header:has(> .sky-menu:not([x-cloak], [style*="display: none"])) { z-index: 2000; }
  /* (one class more than control's white full-screen sheet, whose <style> sits later in the page) */
  .lsbb-site-header .lsbb-site-header__mobile-menu.sky-menu {
    display: block; padding: 0; background: transparent;
    --hdr-logo: #003333; --hdr-text: #003333;
  }
  .sky-menu--anim { transition: opacity .9s linear; }
  .sky-menu--leaving { transition-duration: .36s; }

  .sky-menu__scrim {
    position: absolute; inset: 0;
    background: rgba(0, 38, 38, .22);
    -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
    transition: opacity .5s var(--bb-ease);
  }
  .sky-menu__panel {
    position: absolute; top: 0; bottom: 0; left: 0;
    display: flex; flex-direction: column;
    width: min(90vw, 400px); box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    border-radius: 0 28px 28px 0;
    background: linear-gradient(180deg, #D9ECF7 0, #EEF6FA 150px, #FBFAF8 300px);
    box-shadow: 1px 0 0 rgba(0, 51, 51, .05), 24px 0 64px rgba(0, 38, 38, .18);
    transition: transform .62s cubic-bezier(.32, .72, 0, 1);
  }
  .sky-menu--from .sky-menu__scrim, .sky-menu--out .sky-menu__scrim { opacity: 0; }
  .sky-menu--from .sky-menu__panel, .sky-menu--out .sky-menu__panel { transform: translateX(calc(-100% - 32px)); }
  .sky-menu--leaving .sky-menu__panel { transition: transform .34s cubic-bezier(.4, 0, 1, 1); }
  .sky-menu--leaving .sky-menu__scrim { transition-duration: .34s; }

  /* What's in the panel follows it in, one after another */
  .sky-menu :is(.lsbb-site-header__mobile-menu-header, .sky-menu__label, .sky-menu__tiles li, .sky-menu__site, .lsbb-region-menu--mobile, .sky-menu__foot) {
    transition: opacity .5s var(--bb-ease), transform .7s var(--bb-ease);
    transition-delay: calc(110ms + var(--i, 0) * 32ms);
  }
  .sky-menu .lsbb-site-header__mobile-menu-header { --i: -2; }
  .sky-menu .sky-menu__label { --i: -1; }
  .sky-menu .sky-menu__site { --i: 8; }
  .sky-menu .lsbb-region-menu--mobile { --i: 9; }
  .sky-menu .sky-menu__foot { --i: 6; }
  .sky-menu--from :is(.lsbb-site-header__mobile-menu-header, .sky-menu__label, .sky-menu__tiles li, .sky-menu__site, .lsbb-region-menu--mobile) { opacity: 0; transform: translateX(-18px); }
  .sky-menu--from .sky-menu__foot { opacity: 0; transform: translateY(14px); }

  /* Top row: close where the menu button was, the logo, account and bag */
  .lsbb-site-header .sky-menu .lsbb-site-header__mobile-menu-header { flex: none; gap: 8px; padding: 15px 16px 10px; }
  .lsbb-site-header .sky-menu .lsbb-site-header__mobile-menu-close {
    flex: none; width: 48px; height: 48px; border-radius: 50%;
    color: var(--bb-ink); background: rgba(255, 255, 255, .72);
    box-shadow: inset 0 0 0 1px var(--bb-line);
    transition: transform .2s var(--bb-ease), background-color .2s;
  }
  .lsbb-site-header .sky-menu .lsbb-site-header__mobile-menu-close:active { transform: scale(.94); }
  .lsbb-site-header .sky-menu .lsbb-site-header__mobile-menu-close svg { width: 22px; height: 22px; }
  .lsbb-site-header .sky-menu .lsbb-site-header__mobile-menu-logo { justify-content: flex-start; padding-left: 6px; }
  .lsbb-site-header .sky-menu .lsbb-site-header__mobile-menu-logo svg { width: 128px; }
  .lsbb-site-header .sky-menu .lsbb-site-header__mobile-menu-icons { gap: 2px; }
  .lsbb-site-header .sky-menu .lsbb-site-header__mobile-menu-icons a {
    position: relative; width: 40px; height: 40px; align-items: center; justify-content: center; color: var(--bb-ink);
  }
  .lsbb-site-header .sky-menu .lsbb-site-header__cart-badge { top: 2px; right: 0; }

  .sky-menu__scroll {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 10px 16px 24px;
  }
  .lsbb-site-header .lsbb-site-header__mobile-menu.sky-menu nav { flex: none; display: block; padding: 0; }
  .sky-menu__label { margin: 0 2px 10px; font: 600 12px/1.2 Inter, system-ui, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--bb-muted); }

  /* "On this page": two tiles a row; a lone last tile takes the row */
  .sky-menu__tiles { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .sky-menu__tiles li { flex: 1 1 calc(50% - 4px); min-width: 0; margin: 0; }
  .lsbb-site-header .sky-menu .sky-menu__tile {
    display: flex; align-items: center; gap: 9px;
    min-height: 58px; height: 100%; box-sizing: border-box; padding: 9px 8px;
    border: 0; border-radius: 18px; background: #fff;
    box-shadow: inset 0 0 0 1px var(--bb-line), 0 1px 2px rgba(0, 40, 40, .04);
    font: 600 14.5px/1.2 Inter, system-ui, sans-serif; letter-spacing: -.01em; color: var(--bb-ink);
    text-decoration: none; -webkit-tap-highlight-color: transparent;
    transition: transform .2s var(--bb-ease), box-shadow .2s var(--bb-ease);
  }
  .lsbb-site-header .sky-menu .sky-menu__tile:active { transform: scale(.97); }
  .sky-menu__icon {
    flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px;
    background: #E2F0F8; color: var(--bb-ink);
    transition: background-color .25s var(--bb-ease), color .25s var(--bb-ease);
  }
  .sky-menu__icon svg { display: block; width: 20px; height: 20px; }
  .sky-menu__text { min-width: 0; }
  /* The section you're reading */
  .lsbb-site-header .sky-menu .is-here .sky-menu__tile { box-shadow: inset 0 0 0 1.5px var(--bb-green), 0 1px 2px rgba(0, 40, 40, .04); }
  .sky-menu .is-here .sky-menu__icon { background: var(--bb-green); color: #fff; }
  /* The book section is hidden while Basic is picked, so is its tile */
  body:has(#nook-plan-basic:checked) .sky-menu__tiles li[data-target="book"] { display: none; }

  /* Shop · Support · Blog */
  .lsbb-site-header .sky-menu .sky-menu__site { margin-top: 22px; }
  .lsbb-site-header .sky-menu .sky-menu__site a {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 15px 4px; font: 500 17px/1.3 Inter, system-ui, sans-serif; color: var(--bb-ink);
    border-bottom: 1px solid var(--bb-line);
  }
  .sky-menu__site a:first-child { border-top: 1px solid var(--bb-line); }
  .sky-menu__site svg { flex: none; width: 16px; height: 16px; color: var(--bb-muted); }
  .lsbb-site-header .sky-menu .lsbb-region-menu--mobile { padding: 14px 4px 0; }
  .lsbb-site-header .sky-menu .lsbb-region-menu--mobile .lsbb-region-menu__text { font-size: 16px; }

  .sky-menu__foot {
    flex: none; padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--bb-line); border-bottom-right-radius: 28px;
    background: rgba(251, 250, 248, .92);
  }
  .sky-menu__cta { display: flex; width: 100%; box-sizing: border-box; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .sky-menu--anim, .sky-menu__panel, .sky-menu__scrim,
  .sky-menu :is(.lsbb-site-header__mobile-menu-header, .sky-menu__label, .sky-menu__tiles li, .sky-menu__site, .lsbb-region-menu--mobile, .sky-menu__foot) { transition-duration: .01s !important; transition-delay: 0s !important; }
  .sky-menu--from .sky-menu__panel, .sky-menu--out .sky-menu__panel { transform: none; opacity: 0; }
}
.sky-menu__panel:focus { outline: none; }
/* Room under the header for anything the menu jumps to (sections with their own margin keep it) */
:where(body.lsbb-product [data-section]) { scroll-margin-top: 80px; }

/* 9 ─ Footer ─────────────────────────────────────────────────────────────── */
/* The control footer's <style> sits in the body, after this file, so every rule here carries
   .lsbb-site-footer.lsbb-block-22591d4e to outrank it. All widths: the accessibility switch is a chip
   with the accessibility mark, and the social links are round buttons. */
.lsbb-site-footer.lsbb-block-22591d4e .lsbb-site-footer__accessibility { display: flex; }
.lsbb-site-footer.lsbb-block-22591d4e .lsbb-site-footer__accessibility :is(.en-accessibility, .dis-accessibility) {
  padding: 7px 14px 7px 10px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px;
  font-size: 13px; line-height: 18px; font-weight: 500; -webkit-user-select: none; user-select: none;
  transition: background-color .2s, border-color .2s;
}
.lsbb-site-footer.lsbb-block-22591d4e .lsbb-site-footer__accessibility :is(.en-accessibility, .dis-accessibility)::before {
  content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 7px; vertical-align: -4px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10.2'/%3E%3Ccircle cx='12' cy='6.8' r='1.3' fill='black' stroke='none'/%3E%3Cpath d='M6.8 9.7l5.2 1 5.2-1M12 10.7V14m0 0l-2.3 4.6M12 14l2.3 4.6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10.2'/%3E%3Ccircle cx='12' cy='6.8' r='1.3' fill='black' stroke='none'/%3E%3Cpath d='M6.8 9.7l5.2 1 5.2-1M12 10.7V14m0 0l-2.3 4.6M12 14l2.3 4.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lsbb-site-footer.lsbb-block-22591d4e .lsbb-site-footer__accessibility :is(.en-accessibility, .dis-accessibility):hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .34); }
.lsbb-site-footer.lsbb-block-22591d4e .lsbb-site-footer__social { gap: 10px; }
.lsbb-site-footer.lsbb-block-22591d4e .lsbb-site-footer__social a {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, .08); opacity: 1; transition: background-color .2s, color .2s, transform .15s var(--bb-ease);
}
.lsbb-site-footer.lsbb-block-22591d4e .lsbb-site-footer__social a:hover { background: rgba(255, 255, 255, .16); color: #fff; opacity: 1; }
.lsbb-site-footer.lsbb-block-22591d4e .lsbb-site-footer__social a:active { transform: scale(.94); }
.lsbb-site-footer.lsbb-block-22591d4e .lsbb-site-footer__social svg { width: 19px; height: 19px; }

/* Phones (the footer's own 768px breakpoint): everything on one left edge. The brand row (logo, the
   accessibility chip beside it, then the app badges and a two-line Trustpilot), the link groups as tight
   rows that open smoothly, the newsletter on its own card with the button inside the field, round social
   buttons across the width, and the small print under a hairline. Control's 28px gap between the groups
   (it outranked premium-polish's 0) is what left each heading floating over an empty band. */
@media (max-width: 768px) {
  .lsbb-site-footer.lsbb-block-22591d4e { border-radius: 36px 36px 0 0; }
  .lsbb-site-footer.lsbb-block-22591d4e .lsbb-site-footer__inner { padding: 40px 20px 32px; }
  .lsbb-site-footer.lsbb-block-22591d4e .lsbb-site-footer__top { gap: 32px; margin-bottom: 0; }

  .lsbb-site-footer.lsbb-block-22591d4e .lsbb-site-footer__brand {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 12px; text-align: left;
  }
  .lsbb-site-footer.lsbb-block-22591d4e .lsbb-site-footer__logo { order: 0; }
  .lsbb-site-footer.lsbb-block-22591d4e .lsbb-site-footer__logo img { display: block; width: 128px; }
  .lsbb-site-footer.lsbb-block-22591d4e .lsbb-site-footer__accessibility { order: 1; margin: 0; }
  .lsbb-site-footer.lsbb-block-22591d4e .lsbb-site-footer__app-links { order: 2; flex: 0 0 100%; margin: 0; gap: 8px; justify-content: flex-start; }
  .lsbb-site-footer.lsbb-block-22591d4e .lsbb-site-footer__app-links a img { height: 36px; }
  .lsbb-site-footer.lsbb-block-22591d4e .lsbb-site-footer__trustpilot { order: 3; flex: 0 0 100%; margin: -4px 0 0; justify-content: flex-start; }
  .lsbb-site-footer.lsbb-block-22591d4e .lsbb-site-footer__trustpilot .trustpilot-widget { max-width: none; max-height: none; margin: 0; }
  .lsbb-site-footer .bb-tp { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; gap: 8px 12px; height: auto; text-align: left; }
  .lsbb-site-footer .bb-tp__brand { margin: 0; font-size: 19px; line-height: 22px; }
  .lsbb-site-footer .bb-tp__brand svg { width: 20px; height: 20px; }
  .lsbb-site-footer .bb-tp__stars, .lsbb-site-footer .bb-tp__stars svg { width: 110px; height: 21px; }
  .lsbb-site-footer .bb-tp__score { grid-column: 1 / -1; margin: 0; color: rgba(255, 255, 255, .8); }

  .lsbb-site-footer.lsbb-block-22591d4e .lsbb-site-footer__columns { gap: 0; }
  .lsbb-site-footer.lsbb-block-22591d4e .bb-footer-col { border-top: 1px solid rgba(255, 255, 255, .12); text-align: left; }
  .lsbb-site-footer.lsbb-block-22591d4e .bb-footer-col:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .lsbb-site-footer.lsbb-block-22591d4e .bb-footer-col > summary {
    min-height: 58px; margin: 0; padding: 8px 0; box-sizing: border-box; font-size: 16px; line-height: 22px;
    -webkit-tap-highlight-color: transparent;
  }
  .lsbb-site-footer.lsbb-block-22591d4e .bb-footer-col > summary::after {
    width: 30px; height: 30px; margin: 0; border: 0; border-radius: 50%; flex: none;
    background: rgba(255, 255, 255, .08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 6.2L8 9.7l3.5-3.5'/%3E%3C/svg%3E") center / 14px no-repeat;
    transform: none; transition: transform .35s var(--bb-ease), background-color .2s;
  }
  .lsbb-site-footer.lsbb-block-22591d4e .bb-footer-col[open] > summary::after { transform: rotate(180deg); background-color: rgba(255, 255, 255, .14); }
  .lsbb-site-footer.lsbb-block-22591d4e .bb-footer-col ul { margin: 0; padding: 0 0 14px; }
  .lsbb-site-footer.lsbb-block-22591d4e .bb-footer-col li { margin: 0; font-size: 15px; line-height: 20px; }
  .lsbb-site-footer.lsbb-block-22591d4e .bb-footer-col a { display: block; padding: 8px 0; font-size: 15px; color: rgba(255, 255, 255, .78); }
  .lsbb-site-footer.lsbb-block-22591d4e .bb-footer-col a:hover { color: #00CC66; opacity: 1; }
  .lsbb-site-footer.lsbb-block-22591d4e .bb-footer-col { interpolate-size: allow-keywords; }
  .lsbb-site-footer.lsbb-block-22591d4e .bb-footer-col::details-content {
    block-size: 0; overflow: hidden; transition: block-size .4s var(--bb-ease), content-visibility .4s allow-discrete;
  }
  .lsbb-site-footer.lsbb-block-22591d4e .bb-footer-col[open]::details-content { block-size: auto; }

  .lsbb-site-footer.lsbb-block-22591d4e .lsbb-site-footer__bar { padding-top: 28px; border-top: 0; }
  .lsbb-site-footer.lsbb-block-22591d4e .lsbb-site-footer__newsletter { gap: 28px; padding-bottom: 28px; }
  .lsbb-site-footer.lsbb-block-22591d4e .lsbb-site-footer__newsletter-content {
    box-sizing: border-box; min-width: 0; padding: 24px 20px 22px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 24px;
    background: rgba(255, 255, 255, .06); text-align: left;
  }
  .lsbb-site-footer.lsbb-block-22591d4e .lsbb-site-footer__newsletter-heading { margin: 0 0 16px; font-size: 26px; line-height: 1.15; text-align: left; }
  .lsbb-site-footer.lsbb-block-22591d4e .lsbb-site-footer__newsletter-form {
    flex-direction: row; gap: 6px; max-width: none; padding: 5px; border-radius: 999px; background: #fff;
    transition: box-shadow .2s;
  }
  .lsbb-site-footer.lsbb-block-22591d4e .lsbb-site-footer__newsletter-form:focus-within { box-shadow: 0 0 0 3px rgba(0, 204, 102, .5); }
  .lsbb-site-footer.lsbb-block-22591d4e .lsbb-site-footer__newsletter-form input[type="email"] {
    flex: 1 1 auto; width: auto; min-width: 0; min-height: 44px; padding: 10px 4px 10px 16px; background: transparent;
  }
  .lsbb-site-footer.lsbb-block-22591d4e .lsbb-site-footer__newsletter-form button { flex: none; width: auto; min-width: 0; min-height: 44px; padding: 10px 22px; }
  .lsbb-site-footer.lsbb-block-22591d4e .lsbb-site-footer__newsletter-msg { text-align: left; }
  .lsbb-site-footer.lsbb-block-22591d4e .lsbb-site-footer__newsletter-disclaimer {
    max-width: none; margin: 14px 0 0; font-size: 11.5px; line-height: 1.55; text-align: left; color: rgba(255, 255, 255, .62);
  }
  .lsbb-site-footer.lsbb-block-22591d4e .lsbb-site-footer__legal-link { margin-top: 12px; text-align: left; color: rgba(255, 255, 255, .85); }
  .lsbb-site-footer.lsbb-block-22591d4e .lsbb-site-footer__newsletter-aside { justify-content: stretch; }
  .lsbb-site-footer.lsbb-block-22591d4e .lsbb-site-footer__social {
    display: grid; grid-template-columns: repeat(7, minmax(0, 42px)); justify-content: space-between; gap: 0; width: 100%;
  }
  .lsbb-site-footer.lsbb-block-22591d4e .lsbb-site-footer__social a { width: 100%; height: auto; aspect-ratio: 1; }

  .lsbb-site-footer.lsbb-block-22591d4e .lsbb-site-footer__bottom-row {
    align-items: flex-start; gap: 16px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); text-align: left;
  }
  .lsbb-site-footer.lsbb-block-22591d4e .lsbb-site-footer__copyright { font-size: 12px; line-height: 1.6; text-align: left; color: rgba(255, 255, 255, .6); }
  .lsbb-site-footer.lsbb-block-22591d4e .lsbb-site-footer__payments { justify-content: flex-start; }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .lsbb-site-footer.lsbb-block-22591d4e .bb-footer-col::details-content { transition: none; }
  .lsbb-site-footer.lsbb-block-22591d4e .bb-footer-col > summary::after { transition: none; }
}

/* 10 ─ Cart: what comes free with the Nook ──────────────────────────────── */
/* The Metal Hanger and Pole Mounting Adapter (catalog gifts) at the foot of the feeder's card, each with
   its own photo from the box shot and a green FREE where a price would be; the same as FREE items under
   the feeder in the checkout summary and on the order page. */
.bb-line .bb-gifts { grid-column: 1 / -1; margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--bb-line); }
.bb-gifts__title { margin: 0 0 8px; font: 600 11.5px/1.2 Inter, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--bb-muted); }
.bb-gifts__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bb-gift { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0; }
.bb-gift__media { display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border-radius: 12px; background: var(--bb-paper); }
.bb-gift__media img { width: 100%; height: 100%; object-fit: contain; }
.bb-gift__name { min-width: 0; font: 500 14px/1.3 Inter, system-ui, sans-serif; color: var(--bb-ink); }
.bb-gift__qty { color: var(--bb-muted); font-weight: 400; }
.bb-gift__price { font: 700 13px/1 Inter, system-ui, sans-serif; letter-spacing: .03em; }

/* Checkout summary: under their feeder without a rule between, on a smaller tile */
#order_review .bb-sum__item + .bb-sum__item--gift { border-top: 0; }
#order_review .bb-sum__item--gift { align-items: center; padding: 0 0 12px; }
#order_review .bb-sum__item--gift .bb-sum__thumb { justify-self: center; width: 44px; height: 44px; border-radius: 12px; }
#order_review .bb-sum__item--gift .bb-sum__thumb img { width: 44px; height: 44px; border-radius: 12px; object-fit: contain; }
#order_review .bb-sum__item--gift .bb-sum__item-name { font-weight: 500; font-size: 14px; }
#order_review .bb-sum__item--gift .bb-sum__item-price.bb-free { font: 700 13px/1.3 Inter, system-ui, sans-serif; letter-spacing: .03em; color: var(--bb-green-deep); }
/* Order page */
.bb-ty__line--gift .bb-ty__line-name { font-weight: 500; font-size: 14px; }
.bb-ty__line--gift .bb-ty__line-price.bb-free { font-size: 13px; letter-spacing: .03em; color: var(--bb-green-deep); }

/* 11 ─ Bird story demo ───────────────────────────────────────────────────── */
/* Under the photo strip, a button with a story ring opens a chapter of the app's bird stories (the White-breasted
   Nuthatch's first chapter, assets/stories/nuthatch-ch1/, drawn for a Columbus, Ohio feeder from saved map data).
   It plays in an iPhone (bezel, titanium band, side buttons, Dynamic Island), scaled to the screen with some room
   around it (--s, from variant.js), over the dimmed and blurred page; on phones it's closed with the story's own ×.
   While the story loads, the phone shows the dark, blurred postcard its first screen opens on. */
/* "Experience your first visit": a heading and lede, the button, then the species' chapters on a patch of sky
   (as the story's own chapters screen has them), only the first open; the whole list starts chapter 1. */
.ugc__story { display: flex; flex-direction: column; align-items: center; gap: 26px; margin-top: 64px; padding: 0 20px; }
.sky-story-head { display: grid; gap: 12px; max-width: 640px; text-align: center; }
.sky-story-head__title {
  margin: 0; font: 525 46px/1.05 AwesomeSerifVAR, AwesomeSerif, Georgia, serif; font-variation-settings: "hght" 1000; font-synthesis: none;
  letter-spacing: -.01em; color: var(--bb-ink); text-wrap: balance;
}
.sky-story-head__title em { font-style: italic; font-weight: 580; }
.sky-story-head__lede { margin: 0; font: 400 17px/1.5 Inter, system-ui, sans-serif; color: var(--bb-ink-soft); text-wrap: balance; }
.sky-chapters {
  display: grid; gap: 6px; width: 100%; max-width: 440px; margin-top: -4px; padding: 10px; border: 0; border-radius: 28px;
  cursor: pointer; text-align: left; color: #285168;
  background: var(--clouds) 50% 30% / cover no-repeat, linear-gradient(180deg, #B9DAEE 0%, #DCECF4 60%, #EEF3F0 100%);
  box-shadow: 0 0 0 1px rgba(40, 81, 104, .08), 0 26px 50px -26px rgba(40, 81, 104, .5);
  transition: transform .35s var(--bb-ease), box-shadow .35s var(--bb-ease); -webkit-tap-highlight-color: transparent;
}
.sky-chapters:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(40, 81, 104, .1), 0 32px 60px -26px rgba(40, 81, 104, .55); }
.sky-chapters:active { transform: scale(.99); }
.sky-chapters:focus-visible { outline: 3px solid rgba(0, 204, 102, .6); outline-offset: 4px; }
.sky-chapter {
  display: flex; align-items: center; gap: 14px; padding: 11px 14px; border-radius: 18px;
  border: 1px solid rgba(255, 249, 241, .6); background: rgba(255, 249, 241, .5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: .8;
}
.sky-chapter.is-open { opacity: 1; border-color: rgba(255, 249, 241, .9); background: rgba(255, 249, 241, .94); box-shadow: 0 10px 22px -12px rgba(40, 81, 104, .45); }
.sky-chapter__n { flex: none; width: 24px; text-align: center; font: 400 28px/1 AwesomeSerifVAR, AwesomeSerif, Georgia, serif; font-variation-settings: "hght" 1000; opacity: .7; }
.sky-chapter__text { flex: 1; min-width: 0; }
.sky-chapter__name { display: block; font: 450 23px/1.1 AwesomeSerifVAR, AwesomeSerif, Georgia, serif; font-variation-settings: "hght" 1000; font-synthesis: none; }
.sky-chapter__note { display: block; margin-top: 3px; font: 500 12.5px/16px Inter, system-ui, sans-serif; opacity: .75; }
.sky-chapter__state { flex: none; display: grid; place-items: center; width: 28px; height: 28px; color: rgba(40, 81, 104, .55); }
.sky-chapter__state svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sky-chapter__state--open { border-radius: 50%; background: #00CC66; color: #FFF9F1; transition: transform .35s var(--bb-ease); }
.sky-chapter__state--open svg { stroke-width: 2.4; }
.sky-chapters:hover .sky-chapter__state--open { transform: scale(1.1); }
/* The button: a dark teal pill in the story's own colours, the nuthatch in a turning aurora ring with a soft glow,
   "● First visit" as on the story's first slide, the title in the page's tall serif, a pulsing play button, and
   a sheen that crosses it every few seconds. */
.sky-story-cta {
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 14px; max-width: 100%;
  padding: 9px 10px 9px 9px; border: 0; border-radius: 999px; cursor: pointer; text-align: left; color: #FFF9F1;
  background: radial-gradient(120% 160% at 0% 0%, #0f544b 0%, #003a39 45%, #002a2a 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 249, 241, .1), inset 0 1px 0 rgba(255, 249, 241, .14), 0 20px 40px -18px rgba(0, 51, 51, .65), 0 6px 14px -6px rgba(0, 51, 51, .35);
  transition: transform .35s var(--bb-ease), box-shadow .35s var(--bb-ease); -webkit-tap-highlight-color: transparent;
}
.sky-story-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 249, 241, .16) 48%, rgba(255, 249, 241, .04) 56%, transparent 66%) 130% 0 / 260% 100% no-repeat;
  animation: sky-cta-sheen 6s var(--bb-ease) 1.5s infinite;
}
.sky-story-cta:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(255, 249, 241, .14), inset 0 1px 0 rgba(255, 249, 241, .18), 0 28px 50px -18px rgba(0, 51, 51, .7), 0 0 0 6px rgba(0, 204, 102, .12); }
.sky-story-cta:active { transform: scale(.98); }
.sky-story-cta:focus-visible { outline: 3px solid rgba(0, 204, 102, .7); outline-offset: 3px; }
.sky-story-cta__ring { position: relative; flex: none; width: 60px; height: 60px; border-radius: 50%; }
.sky-story-cta__ring::before, .sky-story-cta__ring::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, #00CC66, #7ABED3, #FAC370, #FF8A6B, #00CC66);
  animation: sky-cta-spin 4s linear infinite;
}
.sky-story-cta__ring::after { inset: -2px; filter: blur(9px); opacity: .55; }
.sky-story-cta__ring img {
  position: relative; z-index: 1; display: block; width: 100%; height: 100%; box-sizing: border-box; border-radius: 50%;
  border: 3px solid #003533; object-fit: cover; transform: scale(.94); transition: transform .5s var(--bb-ease);
}
.sky-story-cta:hover .sky-story-cta__ring img { transform: scale(1); }
.sky-story-cta__text { display: flex; flex-direction: column; min-width: 0; }
.sky-story-cta__eyebrow {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 4px;
  font: 700 10.5px/1 Inter, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #7CE8B0;
}
.sky-story-cta__eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: #00CC66; animation: sky-cta-live 2s ease-out infinite; }
.sky-story-cta__label {
  font: 525 22px/1.05 AwesomeSerifVAR, AwesomeSerif, Georgia, serif; font-variation-settings: "hght" 1000; font-synthesis: none;
  letter-spacing: -.005em; color: #FFF9F1; white-space: nowrap;
}
.sky-story-cta__sub { margin-top: 3px; font: 400 12.5px/1.3 Inter, system-ui, sans-serif; color: rgba(255, 249, 241, .66); }
.sky-story-cta__play {
  position: relative; flex: none; display: grid; place-items: center; width: 46px; height: 46px; margin-left: 8px; border-radius: 50%;
  background: var(--bb-green, #00CC66); color: #003333; box-shadow: 0 6px 16px -4px rgba(0, 204, 102, .55);
  transition: transform .35s var(--bb-ease);
}
.sky-story-cta__play::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(0, 204, 102, .55); animation: sky-cta-pulse 2.4s ease-out infinite; }
.sky-story-cta:hover .sky-story-cta__play { transform: scale(1.08); }
.sky-story-cta__play svg { width: 16px; height: 16px; margin-left: 3px; fill: currentColor; }
@keyframes sky-cta-spin { to { transform: rotate(1turn); } }
@keyframes sky-cta-sheen { 0% { background-position: 130% 0; } 28%, 100% { background-position: -30% 0; } }
@keyframes sky-cta-live { 0% { box-shadow: 0 0 0 0 rgba(0, 204, 102, .6); } 100% { box-shadow: 0 0 0 7px rgba(0, 204, 102, 0); } }
@keyframes sky-cta-pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 204, 102, .5); } 70%, 100% { box-shadow: 0 0 0 12px rgba(0, 204, 102, 0); } }
@media (prefers-reduced-motion: reduce) {
  .sky-story-cta::before, .sky-story-cta__ring::before, .sky-story-cta__ring::after, .sky-story-cta__eyebrow i, .sky-story-cta__play::after { animation: none; }
}

.sky-story {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: transparent; overflow: hidden; color: #fff;
}
.sky-story::backdrop { background: rgba(0, 26, 26, .55); -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1); }
.sky-story[open]::backdrop { animation: sky-story-fade .35s ease-out both; }
.sky-story__stage { position: absolute; inset: 0; display: grid; place-items: center; }
/* The iPhone: a black bezel and a brushed titanium band around the screen, with the action button and the two
   volume buttons on the left and the side button on the right; everything is in screen pixels times --s */
.sky-story__device {
  --bz: calc(13px * var(--s, 1)); --ti: calc(4px * var(--s, 1));
  position: relative; padding: var(--bz); border: var(--ti) solid transparent;
  border-radius: calc(52px * var(--s, 1) + var(--bz) + var(--ti));
  background: linear-gradient(#050606, #050606) padding-box,
    linear-gradient(140deg, #9a9fa4 0%, #45494d 22%, #7d8287 48%, #33363a 74%, #8f9499 100%) border-box;
  box-shadow: inset 0 0 0 calc(1.5px * var(--s, 1)) #1b1d1f, 0 0 0 1px rgba(0, 0, 0, .5), 0 40px 90px -20px rgba(0, 0, 0, .6);
}
.sky-story__device::before, .sky-story__device::after {
  content: ""; position: absolute; width: calc(4px * var(--s, 1)); background: #6a6f74;
}
.sky-story__device::before {
  left: calc(-4px * var(--s, 1) - var(--ti)); top: calc(150px * var(--s, 1)); height: calc(202px * var(--s, 1));
  border-radius: calc(2px * var(--s, 1)) 0 0 calc(2px * var(--s, 1));
  background: linear-gradient(to bottom, #6a6f74 0 calc(32px * var(--s, 1)), transparent calc(32px * var(--s, 1)) calc(62px * var(--s, 1)),
    #6a6f74 calc(62px * var(--s, 1)) calc(128px * var(--s, 1)), transparent calc(128px * var(--s, 1)) calc(142px * var(--s, 1)),
    #6a6f74 calc(142px * var(--s, 1)) 100%);
}
.sky-story__device::after {
  right: calc(-4px * var(--s, 1) - var(--ti)); top: calc(232px * var(--s, 1)); height: calc(102px * var(--s, 1));
  border-radius: 0 calc(2px * var(--s, 1)) calc(2px * var(--s, 1)) 0;
}
.sky-story__phone {
  position: relative; width: calc(390px * var(--s, 1)); height: calc(844px * var(--s, 1)); overflow: hidden;
  border-radius: calc(52px * var(--s, 1)); background: #003333; isolation: isolate;
}
.sky-story__phone::before {
  content: ""; position: absolute; inset: -60px; z-index: -1; background: var(--poster) center / cover no-repeat;
  filter: blur(34px) saturate(1.15); opacity: .6; transition: opacity .3s .5s;
}
.sky-story__phone::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 70% at 50% 32%, rgba(0, 51, 51, 0) 0%, rgba(0, 40, 40, .5) 58%, rgba(0, 30, 30, .92) 100%);
}
/* once the story is up, its own screen takes over: no blurred postcard left to show at the scaled edges */
.sky-story.is-ready .sky-story__phone::before, .sky-story.is-ready .sky-story__phone::after { opacity: 0; }
.sky-story__phone::after { transition: opacity .3s .5s; }
.sky-story__island {
  position: absolute; z-index: 2; top: calc(11px * var(--s, 1)); left: 50%; width: calc(124px * var(--s, 1)); height: calc(36px * var(--s, 1));
  border-radius: 999px; background: #000; transform: translateX(-50%); pointer-events: none;
}
.sky-story[open] .sky-story__device { animation: sky-story-in .55s var(--bb-ease) both; }
.sky-story__phone iframe {
  position: absolute; left: 0; top: 0; width: 390px; height: 844px; border: 0; background: transparent;
  transform: scale(var(--s, 1)); transform-origin: 0 0; opacity: 0; transition: opacity .4s ease-out;
}
.sky-story.is-ready .sky-story__phone iframe { opacity: 1; }
.sky-story__close {
  position: absolute; top: 20px; right: 20px; display: grid; place-items: center; width: 46px; height: 46px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background-color .2s;
}
.sky-story__close:hover { background: rgba(255, 255, 255, .24); }
.sky-story__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
html.sky-story-open { overflow: hidden; }
@keyframes sky-story-fade { from { opacity: 0; } }
@keyframes sky-story-in { from { opacity: 0; transform: translateY(28px) scale(.96); } }
@media (max-width: 599px) {
  .ugc__story { gap: 22px; margin-top: 48px; }
  .sky-story-head__title { font-size: 36px; }
  .sky-story-head__lede { font-size: 16px; }
  .sky-chapter__name { font-size: 21px; }
  .sky-story-cta__chapter { display: none; }
  .sky-story::backdrop { background: rgba(0, 26, 26, .72); }
  .sky-story__close { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sky-story[open] .sky-story__device, .sky-story[open]::backdrop { animation: none; }
}

/* 12 ─ Stripe checkout ─────────────────────────────────────────────────────── */
/* sky-hero takes real payments: Stripe's Address Element in the address step and its Payment Element in the
   payment step (assets/js/pages/checkout.js), each with a quiet line while it loads and a clear one if it
   can't (Place order is then switched off). The fields themselves are styled through Stripe's appearance. */
body.lsbb-checkout .bb-stripe-el { margin: 4px 0 18px; }
body.lsbb-checkout .bb-stripe-address { margin-top: 14px; }
/* Stripe's address suggestions hang below the field; the step's slide-in leaves it its own layer, so it
   sits above what follows (the trust badges' own animation put them over the list and its taps) */
body.lsbb-checkout .lsbb-co-step.lsbb-co-address { position: relative; z-index: 5; }
body.lsbb-checkout .bb-stripe-payment { margin-bottom: 20px; }
body.lsbb-checkout .bb-stripe-loading,
body.lsbb-checkout .bb-stripe-error {
  margin: 0; padding: 16px 18px; border-radius: 12px; font: 500 14px/1.45 Inter, system-ui, sans-serif;
}
body.lsbb-checkout .bb-stripe-loading { background: rgba(0, 51, 51, .04); color: var(--bb-muted); animation: sky-stripe-wait 1.4s ease-in-out infinite alternate; }
body.lsbb-checkout .bb-stripe-error { background: #FFF4EC; color: #9A3412; box-shadow: inset 0 0 0 1px rgba(194, 65, 12, .2); }
body.lsbb-checkout #place_order[disabled] { opacity: .45; cursor: not-allowed; }
/* Express buttons: two shimmering placeholders while Stripe loads (its own box laid out but kept to no height,
   so it can size the buttons), the real ones easing in once drawn, or the whole section fading if there are none */
body.lsbb-checkout .bb-express__skeleton { display: none; grid-template-columns: 1fr 1fr; gap: 10px; }
body.lsbb-checkout .bb-express--pending .bb-express__skeleton { display: grid; }
body.lsbb-checkout .bb-express__skeleton span {
  height: 48px; border-radius: 12px;
  background: linear-gradient(100deg, rgba(0, 20, 20, .07) 30%, rgba(0, 20, 20, .14) 50%, rgba(0, 20, 20, .07) 70%) 0 0 / 220% 100%;
  animation: sky-express-shimmer 1.4s ease-in-out infinite;
}
body.lsbb-checkout .bb-express--pending .bb-stripe-express { height: 0; overflow: hidden; }
body.lsbb-checkout .bb-express:not(.bb-express--pending) .bb-stripe-express { animation: sky-express-in .35s ease-out both; }
body.lsbb-checkout .bb-express { transition: opacity .25s ease, height .4s var(--bb-ease), margin .4s var(--bb-ease); }
body.lsbb-checkout .bb-express.is-gone { opacity: 0; height: 0 !important; margin-top: 0; margin-bottom: 0; overflow: hidden; }
@keyframes sky-express-shimmer { from { background-position: 100% 0; } to { background-position: -120% 0; } }
@keyframes sky-express-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  body.lsbb-checkout .bb-express__skeleton span { animation: none; }
  body.lsbb-checkout .bb-express:not(.bb-express--pending) .bb-stripe-express { animation: none; }
}
@keyframes sky-stripe-wait { to { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { body.lsbb-checkout .bb-stripe-loading { animation: none; } }