/* =========================================================================
   PAUSES (Dhuhr) and SABR (Asr into Maghrib)
   The approved F3Pauses / F5Sabr boards. Scoped by id so the older methods
   and Meet Sabr rules in site.css, refresh.css and sabr.css never leak in.
   The sky engine paints the shared landscape continuously through both.
   Pin queries mirror site.js: METHODS_QUERY for the pauses and SABR_QUERY
   for Sabr (both SCRUB_QUERY, or a phone at least 640px tall).
   The pauses runway holds two beats (the four rules, then the five pauses),
   each laid out exactly like the one before it was: a .methods block of
   copy and phone. Stacked when nothing pins; laid over one another in one
   grid cell when it does, with site.js fading between them.
   ========================================================================= */

/* ============================== PAUSES ============================== */
#dhuhr .methods-panel {
  /* L headline, headline-to-list gap, row height and phone width all give a
     little on short windows so the pinned frame always fits one screen */
  --F: clamp(32px, min(6.67vh, 4.17vw), 60px);
  --F: clamp(32px, min(6.67svh, 4.17vw), 60px);
  --mg: clamp(24px, calc(9vh - 25px), 56px);
  --mg: clamp(24px, calc(9svh - 25px), 56px);
  --row: clamp(56px, 8vh, 72px);
  --row: clamp(56px, 8svh, 72px);
  /* the top clears the 72px nav with room to spare; the bottom matches it
     on tall windows (so the frame stays centred) and gives first on short
     ones, down to 60px: the pinned beat bars' 44px buttons sit 8px off the
     bottom edge, so the list and the phone always end above them. The phone
     fills what the two leave. */
  --padT: calc(72px + clamp(16px, 4vh, 60px));
  --padT: calc(72px + clamp(16px, 4svh, 60px));
  --padB: clamp(60px, calc(28vh - 144px), 108px);
  --padB: clamp(60px, calc(28svh - 144px), 108px);
  --pw: min(300px, 27vw, calc((100vh - var(--padT) - var(--padB)) * 0.46));
  --pw: min(300px, 27vw, calc((100svh - var(--padT) - var(--padB)) * 0.46));
  /* each row's sticker and padding (they give on short pinned windows) */
  --ri: 48px;
  --rp: 12px;
  max-width: none;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  justify-content: safe center;
  gap: 0;
  padding: var(--padT) clamp(40px, 8.34vw, 120px) var(--padB);
  text-align: left;
}
#dhuhr .methods {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
#dhuhr .methods__copy {
  flex: 0 0 auto;
  width: min(600px, 54%);
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mg);
  text-align: left;
}
#dhuhr .methods-panel .feat-head {
  margin: 0;
  max-width: none;
  font-size: var(--F);
  line-height: 1.04;
  letter-spacing: 0;
  color: var(--ink);
  text-align: left;
}

/* ---- the five pauses: sticker + name, the active one opens on a cream card */
#dhuhr .pause-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(540px, 100%);
  margin: 0;
  padding: 0;
  list-style: none;
}
#dhuhr .pause-list li { margin: 0; padding: 0; }
#dhuhr .pause-pick {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  min-height: var(--row);
  padding: var(--rp) 24px var(--rp) 16px;
  border: 2px solid transparent;
  border-radius: 22px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
#dhuhr .pause-pick:hover { background: rgba(255, 249, 239, 0.55); }
#dhuhr .pause-pick:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
#dhuhr .pause-pick > img {
  flex: 0 0 var(--ri);
  width: var(--ri);
  height: var(--ri);
  object-fit: contain;
}
#dhuhr .pause-pick__text { display: flex; flex-direction: column; min-width: 0; }
#dhuhr .pause-pick__name {
  font-family: var(--display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.15;
}
#dhuhr .pause-pick__say {
  display: block;
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.45;
  font-weight: 600;
  /* a line that wraps breaks in the middle, never leaving one word alone */
  text-wrap: balance;
}
/* no JS: every pause is listed with its line; with JS only the active one */
#dhuhr .methods.is-enhanced .pause-pick__say { display: none; }
#dhuhr .methods.is-enhanced .pause-pick[aria-pressed="true"] .pause-pick__say { display: block; }
#dhuhr .methods.is-enhanced .pause-pick[aria-pressed="true"] {
  background: #FFF9EF;
  border-color: #AD5B0C;
  color: #4E2C16;
  box-shadow: 0 14px 30px -20px rgba(78, 44, 22, 0.55);
}

/* ---- the phone: one frame, the five screens crossfade inside it ---- */
#dhuhr .methods__stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: auto;
}
#dhuhr .methods__frame,
#dhuhr .methods.is-enhanced .methods__frame {
  display: block;
  position: relative;
  width: var(--pw);
  aspect-ratio: auto;
  box-sizing: border-box;
  border: 7px solid #281D15;
  border-radius: calc(var(--pw) * 0.13);
  background: #281D15;
  overflow: hidden;
  box-shadow: 0 30px 60px -28px rgba(30, 10, 3, 0.6);
}
#dhuhr .methods__screens,
#dhuhr .methods.is-enhanced .methods__screens,
#dhuhr .methods:not(.is-enhanced) .methods__screens {
  display: block;
  position: relative;
  inset: auto;
  width: 100%;
  max-width: none;
  aspect-ratio: 792 / 1721;
  margin: 0;
  padding: 0;
  list-style: none;
}
#dhuhr .mscreen,
#dhuhr .methods.is-enhanced .mscreen {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
}
#dhuhr .mscreen.is-active { opacity: 1; }
/* no JS: only the first screen shows (and only it downloads) */
#dhuhr .methods:not(.is-enhanced) .mscreen:not(:first-child) { display: none; }
#dhuhr .methods:not(.is-enhanced) .mscreen:first-child { opacity: 1; }
#dhuhr .mscreen img,
#dhuhr .methods.is-enhanced .mscreen img,
#dhuhr .methods:not(.is-enhanced) .mscreen img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: calc(var(--pw) * 0.1);
  background: none;
  box-shadow: none;
  object-fit: cover;
}
#dhuhr .mscreen__cap { display: none; }
/* Static stories retain their introductory headings and complete lists. */
#dhuhr .methods__says { display: none; }
#dhuhr .mline,
#dhuhr .msay__l { display: block; }

/* The selected instruction replaces the introduction in the top heading
   on both layouts. Complete button labels remain available to readers. */
#dhuhr .methods.is-enhanced .methods__intro,
#dhuhr .methods.is-enhanced .pause-pick__say,
#dhuhr .methods.is-enhanced .pause-pick[aria-pressed="true"] .pause-pick__say {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
#dhuhr .methods.is-enhanced .feat-head .methods__says {
  display: grid;
  min-height: 2.08em;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
}
#dhuhr .methods.is-enhanced .feat-head {
  min-height: var(--head-h, 0px);
}
#dhuhr .methods.is-enhanced .feat-head .msay {
  transition: none;
  transform: none;
}

/* ---- the two beats: stacked when nothing pins (no JS, reduced motion,
   short windows and phones), each one a full beat of its own ---- */
#dhuhr .methods-beats {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(72px, 12vh, 128px);
  width: 100%;
}
/* the beat bars: two 44px-tall buttons, the current beat in the accent.
   Hidden until site.js pins the runway. */
#dhuhr .pause-beats {
  display: flex;
  justify-content: center;
  gap: 4px;
  /* the strip is a full-width row: only the buttons take taps */
  pointer-events: none;
}
#dhuhr .pause-beats[hidden] { display: none; }
#dhuhr .pause-beat {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
}
#dhuhr .pause-beat::before {
  content: "";
  display: block;
  width: 48px;
  height: 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
  transition: background-color 0.25s ease;
}
#dhuhr .pause-beat:hover::before { background: color-mix(in srgb, var(--ink) 55%, transparent); }
#dhuhr .pause-beat[aria-current="step"]::before,
#dhuhr .pause-beat[aria-current="step"]:hover::before { background: var(--accent); }
#dhuhr .pause-beat:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 12px; }

/* pinned (site.js METHODS_QUERY, desktop half): the scroll steps through
   the four rules, the swap and the five pauses, about a fifth of a screen
   each (the runway is a screen plus --msteps of them, which initMethods
   sets from its plan). On short windows the rows give a little, so the
   headline, the list and the phone always share one frame. */
@media (min-width: 701px) and (min-height: 621px) {
  html.gsap #features.runway--methods {
    height: calc(100vh + var(--msteps, 11.15) * 20vh);
    height: calc(100svh + var(--msteps, 11.15) * 20svh);
    margin-bottom: 0;
  }
  html.gsap #dhuhr .methods-panel {
    --ri: clamp(36px, calc(10vh - 24px), 48px);
    --ri: clamp(36px, calc(10svh - 24px), 48px);
    --rp: clamp(6px, calc(5vh - 24px), 12px);
    --rp: clamp(6px, calc(5svh - 24px), 12px);
  }
  /* both beats in one cell, on the same phone position; the headline is
     one spot for both and for every step. site.js (holdLists) measures the
     tallest either list ever gets (five rows, the open one wrapped to two
     lines on a narrow window) and writes it as --list-h, so both lists are
     that tall at every step and the copy column, centred beside the phone,
     never moves. */
  html.gsap #dhuhr .methods-beats.is-enhanced { display: grid; gap: 0; }
  html.gsap #dhuhr .methods-beats.is-enhanced > .methods { grid-area: 1 / 1; }
  html.gsap #dhuhr .methods-beats.is-enhanced .pause-list { min-height: var(--list-h, 0px); }
  /* 28px up as on the board where the window has room, 8px on short ones */
  html.gsap #dhuhr .pause-beats {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(8px, calc(100vh - 780px), 28px);
    bottom: clamp(8px, calc(100svh - 780px), 28px);
  }
}

/* ---- phones: one changing headline, phone, sticker choices ---- */
@media (max-width: 700px) {
  #dhuhr .methods-panel {
    --pw: 220px;
    min-height: 0;
    justify-content: flex-start;
    padding: 96px 24px 56px;
  }
  #dhuhr .methods {
    flex-direction: column;
    align-items: center;
  }
  #dhuhr .methods__copy,
  #dhuhr .methods__stage { display: contents; }
  #dhuhr .methods-panel .feat-head {
    order: 1;
    font-size: min(36px, 9.2vw);
    letter-spacing: -0.02em;
    text-align: center;
  }
  #dhuhr .methods.is-enhanced .feat-head {
    font-size: min(30px, 7.8vw);
  }
  #dhuhr .methods__frame,
  #dhuhr .methods.is-enhanced .methods__frame {
    order: 2;
    flex-shrink: 0;
    margin-top: 32px;
    border-width: 6px;
  }
  #dhuhr .pause-list {
    order: 4;
    width: 100%;
    margin-top: 18px;
  }
  /* no JS: the list, as rows under the phone */
  #dhuhr .pause-pick { gap: 14px; padding: 10px 16px 10px 12px; min-height: 64px; }
  #dhuhr .pause-pick > img { flex-basis: 36px; width: 36px; height: 36px; }
  #dhuhr .pause-pick__name { font-size: 17px; }
  #dhuhr .pause-pick__say { font-size: 16px; line-height: 1.4; text-wrap: balance; }
  /* with JS: five sticker cards; the names and lines stay for screen readers */
  #dhuhr .methods.is-enhanced .pause-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
  }
  #dhuhr .methods.is-enhanced .pause-list--rules { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #dhuhr .methods.is-enhanced .pause-pick {
    justify-content: center;
    height: 64px;
    min-height: 64px;
    padding: 0;
    border-radius: 18px;
    background: rgba(255, 249, 239, 0.6);
  }
  #dhuhr .methods.is-enhanced .pause-pick[aria-pressed="true"] {
    background: #FFF9EF;
    box-shadow: 0 12px 22px -14px rgba(78, 44, 22, 0.6);
  }
  #dhuhr .methods.is-enhanced .pause-pick__text,
  #dhuhr .methods.is-enhanced .pause-pick[aria-pressed="true"] .pause-pick__say {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  #dhuhr .methods.is-enhanced .pause-pick__say { display: block; }
  /* short phones (under 640px tall) do not pin: the runway collapses and
     the phone walks through the five by itself (site.js initMethods) */
  html.gsap #features.runway--methods { height: auto; }
}
/* pinned phone (METHODS_QUERY, phone half): the panel sticks while the
   scroll steps through the four rules, the swap and the five pauses, 280px
   each (a runway is a screen plus --msteps of them, which initMethods sets
   from its plan). The phone scales with the height so the headline, the
   phone and sticker choices share one frame. */
@media (max-width: 700px) and (min-height: 640px) {
  html.gsap #features.runway--methods {
    height: calc(100vh + var(--msteps, 11.15) * 280px);
    height: calc(100svh + var(--msteps, 11.15) * 280px);
  }
  html.gsap #features > .methods-panel { position: sticky; top: 0; }
  html.gsap #dhuhr .methods-panel {
    /* top padding (96px down to 76px) and the headline-to-phone gap
       (32px down to 16px) give first, then the phone. The rest of the
       frame is fixed: 12px of phone border, 18px + 64px for the
       stickers and 24px at the bottom. --bars is
       the beat bars' row above the headline, on the phones tall enough
       to hold it. */
    --bars: 0px;
    --P: clamp(76px, calc(100vh - 748px), 96px);
    --P: clamp(76px, calc(100svh - 748px), 96px);
    --gF: clamp(16px, calc(100vh - 812px), 32px);
    --gF: clamp(16px, calc(100svh - 812px), 32px);
    --pw: clamp(120px, calc((100vh - var(--P) - var(--bars) - 2.08 * min(30px, 7.8vw) - var(--gF) - 118px) * 0.4602 + 12px), 220px);
    --pw: clamp(120px, calc((100svh - var(--P) - var(--bars) - 2.08 * min(30px, 7.8vw) - var(--gF) - 118px) * 0.4602 + 12px), 220px);
    min-height: 100vh;
    min-height: 100svh;
    justify-content: center;
    justify-content: safe center;
    padding: var(--P) 24px 24px;
  }
  html.gsap #dhuhr .methods.is-enhanced .methods__frame { margin-top: var(--gF); }
  /* both beats in one cell (the bars in the row above them) */
  html.gsap #dhuhr .methods-beats.is-enhanced {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  html.gsap #dhuhr .methods-beats.is-enhanced > .methods { grid-area: 2 / 1; }
  html.gsap #dhuhr .pause-beats { grid-area: 1 / 1; margin-bottom: 4px; }
}
/* the bars take 44px and 4px under the nav; on shorter phones every pixel
   is the phone's, so they stay out (the problem's step bars do the same) */
@media (max-width: 700px) and (min-height: 800px) {
  html.gsap #dhuhr .methods-panel { --bars: 48px; --P: 64px; }
}
@media (max-width: 700px) and (min-height: 640px) and (max-height: 799px) {
  html.gsap #dhuhr .pause-beats { display: none; }
}

/* =============================== SABR =============================== */
/* The shared landscape continues beneath the stages and mood cards. */
#sabr .meet-sabr {
  --F: clamp(32px, 4.17vw, 60px);
  --G: 56px;
  --gap: clamp(40px, 8.34vw, 120px);
  --padB: 96px;
  --cardH: 176px;
  /* the Sabr stage: the morph's frame box (460x371), 353px wide at 1440 so
     thriving stands 320px wide as on the board */
  --swv: 24.5vw;
  --sw: min(353px, var(--swv));
  --sw2: var(--sw);
  /* his feet: 6px of the 371 frame box above the stage's bottom */
  --feet: calc(var(--sw) * 6 / 460);
  max-width: none;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 120px clamp(24px, 8.34vw, 120px) var(--padB);
  overflow: visible;
  text-align: center;
}
#sabr .meet-sabr__head {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: none;
  font-size: var(--F);
  line-height: 1.04;
  letter-spacing: 0;
  color: var(--ink);
  text-align: center;
}
/* The pair fills the remaining panel space. */
#sabr .sabr {
  position: static;
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 540px));
  grid-template-rows: 1fr;
  column-gap: var(--gap);
  row-gap: 0;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: none;
  margin: var(--G) 0 0;
}
#sabr .sabr__side {
  position: relative;
  display: block;
  min-width: 0;
}
#sabr .sabr__stage {
  position: relative;
  z-index: 1;
  display: block;
  width: var(--sw);
  min-width: 0;
  aspect-ratio: 460 / 371;
  margin: 0 auto;
}
#sabr .sabr__side--up .sabr__stage { width: var(--sw2); --stage-w: var(--sw2); }
/* the still (no JS, reduced motion) stands where the morph's feet stand */
#sabr .sabr__still {
  position: absolute;
  left: 50%;
  bottom: var(--feet);
  width: 90.7%;
  height: auto;
  transform: translateX(-50%);
}
#sabr .sabr__side--down .sabr__still { width: 93.5%; }
#sabr .sabr.is-anim .sabr__still { display: none; }
#sabr .sabr__morph {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
/* iOS Home's flat contact ellipse, using FocusEndCard's drawn-width
   fractions: width .946, height .134, centre .031 above the feet.
   js/sabr.js writes --pose (0 thriving, 1 collapsed). The native assets'
   hoof centres determine horizontal placement for both poses. */
#sabr .sabr__stage { --pose: 0; --stage-w: var(--sw); }
#sabr .sabr__side--down .sabr__stage { --pose: 1; }
#sabr .sabr__shadow {
  --drawn-w: calc(var(--stage-w) * (0.907 + 0.028 * var(--pose)));
  position: absolute;
  left: calc(55.0907% - 4.0176% * var(--pose));
  bottom: calc(var(--feet) - var(--drawn-w) * 0.036);
  width: calc(85.8022% + 2.6488% * var(--pose));
  height: calc(var(--drawn-w) * 0.134);
  border-radius: 50%;
  transform: translateX(-50%);
  background: rgba(36, 26, 18, 0.16);
  pointer-events: none;
}

/* ---- the mood card ---- */
#sabr .sabr__card {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  margin: 24px 0 0;
  padding: 28px clamp(18px, 2.2vw, 32px) 30px;
  border-radius: 32px;
  background: #3A2618;
  box-shadow: 0 40px 80px -40px rgba(90, 40, 10, 0.55);
  color: #FFF5E5;
  text-align: left;
}
#sabr .sabr__mood {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
}
#sabr .sabr__mood-name {
  flex: 0 0 auto;
  min-width: 5.3em;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(17px, 1.53vw, 22px);
  line-height: 1.15;
  color: #FFF5E5;
}
#sabr .sabr__bar {
  flex: 1 1 auto;
  height: 12px;
  border-radius: 6px;
  background: rgba(255, 245, 229, 0.16);
  overflow: hidden;
}
#sabr .sabr__fill {
  display: block;
  width: 92%;
  height: 100%;
  border-radius: 6px;
  background: #6EAA5A;
}
#sabr .sabr__side--down .sabr__fill { width: 7%; background: #D0583F; }
#sabr .sabr__tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.1vw, 16px);
  margin: 24px 0 0;
}
#sabr .sabr__tiles > div {
  display: flex;
  flex-direction: column-reverse;
  min-width: 0;
}
#sabr .sabr__tiles dd {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(22px, 2.36vw, 34px);
  line-height: 1.12;
  color: #FFF5E5;
  white-space: nowrap;
}
#sabr .sabr__tiles dt {
  margin: 4px 0 0;
  font-family: var(--sans);
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.45;
  font-weight: 600;
  color: #DCC9AE;
  white-space: nowrap;
}

/* ---- life between scrolls: both Sabrs breathe, out of step with each
   other (the sinking one slower and shallower), from their feet. The tile
   counts pop as they tick and the mood name eases in (js/sabr.js). ---- */
#sabr .sabr.is-anim .sabr__stage {
  transform-origin: 50% 100%;
  animation: sabr-breathe 3.6s ease-in-out infinite;
}
#sabr .sabr.is-anim .sabr__side--down .sabr__stage {
  animation-name: sabr-breathe-low;
  animation-duration: 4.8s;
  animation-delay: -1.9s;
}
@keyframes sabr-breathe {
  0%, 100% { transform: none; }
  50% { transform: scale(1.006, 1.02); }
}
@keyframes sabr-breathe-low {
  0%, 100% { transform: none; }
  50% { transform: scale(1.004, 1.012); }
}
#sabr .sabr__tiles dd,
#sabr .sabr__mood-name { transform-origin: 0 70%; }
#sabr .sabr__tiles dd.is-tick { animation: sabr-tick 0.42s cubic-bezier(0.2, 0.8, 0.2, 1); }
#sabr .sabr__tiles dd.is-miss { animation: sabr-miss 0.42s cubic-bezier(0.2, 0.8, 0.2, 1); }
#sabr .sabr__mood-name.is-swap { animation: sabr-swap 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes sabr-tick {
  0% { transform: scale(1); }
  35% { transform: scale(1.18); color: #B8E08E; }
  100% { transform: scale(1); }
}
@keyframes sabr-miss {
  0% { transform: scale(1); }
  35% { transform: scale(1.12); color: #F2927A; }
  100% { transform: scale(1); }
}
@keyframes sabr-swap {
  from { transform: translateY(8px); opacity: 0.2; }
  to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #sabr .sabr.is-anim .sabr__stage,
  #sabr .sabr__tiles dd,
  #sabr .sabr__mood-name { animation: none !important; }
}

/* ---- the thriving Sabr's idle beats (sabr.css owns .sabr-beat) ---- */
#sabr .sabr__stage .sabr-beat { z-index: 1; }

/* ---- pinned, wide (site.js SABR_QUERY, desktop half): the scrub.
   Headline, gap and stage give on short windows so headline, both Sabrs
   and both cards always share one frame. ---- */
html.gsap #sabr.runway--sabr { height: 240vh; }
@media (min-width: 701px) and (min-height: 621px) {
  html.gsap #sabr .meet-sabr {
    --F: clamp(32px, min(6.67vh, 4.17vw), 60px);
    --F: clamp(32px, min(6.67svh, 4.17vw), 60px);
    --G: clamp(28px, 6.2vh, 56px);
    --G: clamp(28px, 6.2svh, 56px);
    --sw: min(353px, var(--swv), calc((100vh - 315px - 2.08 * var(--F) - var(--G)) * 1.24));
    --sw: min(353px, var(--swv), calc((100svh - 315px - 2.08 * var(--F) - var(--G)) * 1.24));
    --padB: 24px;
    min-height: 100vh;
    min-height: 100svh;
    /* centred in the frame when there is room, never under the nav */
    padding-top: max(88px, calc((100vh - 2.08 * var(--F) - var(--G) - var(--sw) * 0.8065 - 24px - var(--cardH)) / 2));
    padding-top: max(88px, calc((100svh - 2.08 * var(--F) - var(--G) - var(--sw) * 0.8065 - 24px - var(--cardH)) / 2));
  }
  html.gsap #sabr > .meet-sabr { position: sticky; top: 0; }
}

/* ---- narrow windows and tablets (701 to 1000px): tighter gutters so each
   card keeps three tiles that fit, and a bigger share for the Sabrs ---- */
@media (min-width: 701px) and (max-width: 1000px) {
  #sabr .meet-sabr {
    --gap: 32px;
    --swv: 29vw;
    --cardH: 151px;
    padding-left: 32px;
    padding-right: 32px;
  }
  #sabr .sabr__card { padding-left: 18px; padding-right: 18px; border-radius: 26px; }
  #sabr .sabr__mood { gap: 14px; }
  #sabr .sabr__mood-name { font-size: 17px; }
  #sabr .sabr__tiles { gap: 10px; }
  #sabr .sabr__tiles dd { font-size: 22px; }
  #sabr .sabr__tiles dt { font-size: 14px; }
}

/* ---- phones: stacked, the sinking Sabr above the rising one ---- */
@media (max-width: 700px) {
  #sabr .meet-sabr {
    --sw: 210px;
    --sw2: 190px;
    --padB: 40px;
    padding: 96px 24px var(--padB);
  }
  #sabr .meet-sabr__head {
    font-size: min(36px, 9.2vw);
    letter-spacing: -0.02em;
  }
  #sabr .meet-sabr__head .punch { white-space: nowrap; }
  #sabr .sabr {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    margin-top: 20px;
  }
  /* the sinking one never stands taller than Content, so its stage drops the
     empty top of the frame box (50 of 371) */
  #sabr .sabr__side--down .sabr__stage { aspect-ratio: 460 / 321; }
  #sabr .sabr__side--down .sabr__morph { top: -15.576%; height: 115.576%; }
  #sabr .sabr__side--up { margin-top: 25px; }
  #sabr .sabr__side--up .sabr__stage { --feet: calc(var(--sw2) * 6 / 460); }
  #sabr .sabr__card {
    margin-top: 17px;
    padding: 16px 18px 18px;
    border-radius: 24px;
    box-shadow: 0 30px 60px -30px rgba(90, 40, 10, 0.55);
  }
  #sabr .sabr__mood { gap: 14px; }
  #sabr .sabr__mood-name { font-size: 17px; }
  #sabr .sabr__bar { height: 10px; border-radius: 5px; }
  #sabr .sabr__fill { border-radius: 5px; }
  #sabr .sabr__tiles { gap: 10px; margin-top: 14px; }
  #sabr .sabr__tiles dd { font-size: min(22px, 5.6vw); }
  #sabr .sabr__tiles dt { margin-top: 2px; font-size: min(16px, 4.1vw); line-height: 1.4; }
  html.gsap #sabr.runway--sabr { height: auto; }
}
/* pinned phone (SABR_QUERY, phone half): both Sabrs scale with the height so
   the headline, both Sabrs and both cards share one frame */
@media (max-width: 700px) and (min-height: 640px) {
  html.gsap #sabr.runway.runway--sabr { height: calc(100vh + 1250px); height: calc(100svh + 1250px); }
  html.gsap #sabr .meet-sabr {
    /* top padding gives first (96px down to 76px), then the Sabrs */
    --P: clamp(76px, calc(100vh - 748px), 96px);
    --P: clamp(76px, calc(100svh - 748px), 96px);
    --sw: clamp(80px, calc((100vh - 445px - var(--P)) / 1.416), 210px);
    --sw: clamp(80px, calc((100svh - 445px - var(--P)) / 1.416), 210px);
    --sw2: calc(var(--sw) * 0.905);
    --padB: 20px;
    min-height: 100vh;
    min-height: 100svh;
    padding-top: var(--P);
  }
  html.gsap #sabr > .meet-sabr { position: sticky; top: 0; }
}
/* not pinned (short phones, short windows): the runway collapses and the
   morph follows the pair up the screen (js/sabr.js) */
@media (max-width: 700px) and (max-height: 639px), (min-width: 701px) and (max-height: 620px) {
  html.gsap #sabr.runway.runway--sabr { height: auto; }
  html.gsap #sabr > .meet-sabr { position: relative; }
}