/* ============================================================================
   RexQL product page. Hero is Craig's locked FILM SLATE (2026-07-15, option 01
   of the styleframe review): full-bleed SQL-wall film still, left-to-right
   scrim, copy on the darkest third, current-Rex standing in the dark right
   zone (no panel), mono NOW PLAYING slate, proof bar on the bottom hairline.
   Body sections ported from the React RexQL.tsx. Loaded only on this page.
   ============================================================================ */

/* In-page anchors (hero slate + "See how it works" scroll to the film). */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---- Hero: The Film Slate ------------------------------------------------ */
.rf-rx-hero {
  position: relative;
  background: var(--rf-dark);
  color: #fff;
  display: flex;
  flex-direction: column;
  min-height: 620px;
  padding: 136px 24px 0;
  overflow: hidden;
}
.rf-rx-hero__bg {
  position: absolute;
  inset: 0;
  background: url("../images/rexql-film-still-sql.jpg") center / cover no-repeat;
}
/* Left-to-right grade: darkest third under the copy, a calm dark zone at the
   right edge for Rex; the ::after settles the top under the nav and the
   bottom under the proof bar. */
.rf-rx-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(13,13,13,.94) 0%,
    rgba(13,13,13,.84) 34%,
    rgba(13,13,13,.42) 66%,
    rgba(13,13,13,.6) 100%);
}
/* Phones span the whole gradient, so flatten it: the copy needs a uniformly
   dark set, with just a hint of the SQL wall behind it. */
@media (max-width: 767px) {
  .rf-rx-hero__scrim { background: rgba(13,13,13,0.88); }
  /* REXQL-M03: behind the 0.88 scrim the full 1920px still is invisible detail;
     serve the 828px variant (~52KB vs 314KB). */
  .rf-rx-hero__bg { background-image: url("../images/rexql-film-still-sql-828.jpg"); }
}
.rf-rx-hero__scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(13,13,13,.6) 0%,
    rgba(13,13,13,0) 22%,
    rgba(13,13,13,0) 55%,
    rgba(13,13,13,.9) 100%);
}

/* Rex, sitting with his laptop in the frame's own text-free pocket: the
   bottom-right of the SQL-wall still, below where the third query column
   ends (Craig's round-1 correction: fit the clean zone of the actual frame,
   don't cover the query text). No panel box (the lock). Desktop only;
   below 1024 the copy needs the full width. */
.rf-rx-hero__rex {
  display: none;
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
.rf-rx-hero__rex img {
  height: 100%;
  width: auto;
}
/* Soft ground contact so Rex reads as sitting on the set, not pasted. */
.rf-rx-hero__rex::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 90%;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.6), transparent 70%);
}
@media (min-width: 1024px) {
  .rf-rx-hero__rex {
    display: block;
    right: 24px; /* the cover-crop narrows the pocket here; tuck to the corner */
    bottom: 178px; /* clears the wrapped proof bar at 1024-1279 */
    height: min(26vh, 210px);
  }
}
@media (min-width: 1280px) {
  .rf-rx-hero__rex { right: clamp(28px, 5vw, 90px); }
}
@media (min-width: 1280px) {
  .rf-rx-hero__rex {
    bottom: 116px; /* proof bar is one line from here */
    height: min(34vh, 280px); /* stays inside the pocket under the third SQL column */
  }
}

.rf-rx-hero__inner {
  position: relative;
  z-index: 3;
  flex: 1;
  width: 100%;
  max-width: 1300px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}

/* Mono NOW PLAYING slate, top-right (768+). */
.rf-rx-hero__slate { display: none; }
@media (min-width: 768px) {
  .rf-rx-hero__slate {
    display: block;
    position: absolute;
    top: -42px;
    right: 0;
    z-index: 4;
    font-family: var(--rf-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    transition: color .2s var(--rf-ease);
  }
  .rf-rx-hero__slate:hover { color: #fff; }
}
.rf-rx-hero__slate-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--rf-red-light);
  display: inline-block;
  margin-right: 8px;
  animation: rf-rx-pulse 2s ease-in-out infinite;
}
@keyframes rf-rx-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

.rf-rx-hero__copy { max-width: 640px; }
.rf-rx-hero__h1 {
  font-weight: 800;
  font-size: 42px;
  line-height: 1.03;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 22px;
}
@media (min-width: 768px) { .rf-rx-hero__h1 { font-size: 54px; } }
@media (min-width: 1280px) { .rf-rx-hero__h1 { font-size: 62px; } }
.rf-rx-hero__sub {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255,255,255,0.68);
  max-width: 520px;
  margin-bottom: 32px;
}
.rf-rx-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 44px;
}
.rf-rx-hero__alt {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  transition: color .2s var(--rf-ease);
}
.rf-rx-hero__alt:hover { color: #fff; }

/* Proof bar on the hero's bottom hairline: one line at >=1280, wraps below.
   Same pattern as .rf-ai-hero__proofbar / .rf-mp-hero__proofbar. */
.rf-rx-hero__proofbar {
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,0.14);
  padding: 28px 0 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
}
.rf-rx-hero__proofbar > div { white-space: nowrap; }
.rf-rx-hero__proof-num { font-weight: 800; font-size: 22px; color: #fff; }
.rf-rx-hero__proof-label { font-weight: 700; font-size: 13.5px; color: rgba(255,255,255,0.55); margin-left: 8px; }
@media (min-width: 1280px) {
  .rf-rx-hero__proofbar { flex-wrap: nowrap; justify-content: space-between; gap: 24px; }
}
@media (min-width: 1024px) {
  .rf-rx-hero { min-height: 760px; padding-top: 152px; }
}

/* ---- Shared section headline --------------------------------------------- */
.rf-rx-h2 {
  font-weight: 800;
  font-size: 32px;
  line-height: 1.06;
  letter-spacing: -0.03em;
}
@media (min-width: 768px) { .rf-rx-h2 { font-size: 42px; } }
@media (min-width: 1024px) { .rf-rx-h2 { font-size: 50px; } }

/* ---- Film: Two Languages, directly after the hero ------------------------- */
.rf-rx-film {
  background: var(--rf-dark-3); /* the hero scrim's pitch black (Craig 2026-07-16) */
  color: #fff;
  padding: 88px 24px 104px;
}
.rf-rx-film__inner { max-width: 1100px; margin-inline: auto; }
/* Round 1: the H2 runs one line across at desktop (no 720px cap). */
.rf-rx-film__head { margin-bottom: 40px; }
.rf-rx-film__sub {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255,255,255,0.55);
  max-width: 560px;
}
.rf-rx-film__plate {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  background: #000;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,0.9);
}
.rf-rx-film__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  background: var(--rf-terminal);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-family: var(--rf-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
}
.rf-rx-film__chrome-right { display: none; }
@media (min-width: 768px) { .rf-rx-film__chrome-right { display: inline; } }
.rf-rx-film__plate video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ---- What you get: DWG AN-004, the deployment drafted ---------------------- */
.rf-rx-get {
  background: var(--rf-paper);
  padding: 56px 24px;
}
.rf-rx-get__inner { max-width: 1300px; margin-inline: auto; }
/* Round 3: head becomes the AI-page editorial lockup (H2 left, sub right). */
.rf-rx-get__head { margin-bottom: 28px; color: var(--rf-ink); }
.rf-rx-get__sub {
  margin-top: 20px;
  max-width: 460px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--rf-gray-3);
}
@media (min-width: 1024px) {
  .rf-rx-get__head {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 48px;
    align-items: end;
  }
  .rf-rx-get__sub { margin-top: 0; justify-self: end; font-size: 17px; }
}
/* Round 2: the red clause holds as its own line. */
.rf-rx-get__h2 em { display: inline-block; }

/* Round 4 (Craig's styleframe pick, option 02): THE ANNOTATED SHEET.
   Full-width drawing with on-sheet callouts; leader lines draw in on reveal.
   Phones skip the sheet and get the schedule only (round-2 precedent). */
.rf-rx-sheet { display: none; }
@media (min-width: 768px) {
  .rf-rx-sheet {
    display: block;
    width: 100%;
    max-width: 1160px;
    height: auto;
    margin-inline: auto;
    margin-bottom: 26px;
  }
}
.rf-rx-sheet text { font-family: var(--rf-font-mono); }
.rf-rx-sheet__lead {
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
}
.rf-rx-sheet.is-visible .rf-rx-sheet__lead {
  animation: rf-rx-lead 0.9s var(--rf-ease) 0.35s forwards;
}
@keyframes rf-rx-lead { to { stroke-dashoffset: 0; } }
.rf-rx-sheet__callout text { opacity: 0; }
.rf-rx-sheet.is-visible .rf-rx-sheet__callout text {
  animation: rf-rx-callout 0.5s var(--rf-ease) 0.85s forwards;
}
@keyframes rf-rx-callout { to { opacity: 1; } }

/* Deliverables schedule: hairline table under the sheet. */
.rf-rx-get__sched-head {
  font-family: var(--rf-font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(26,26,26,0.45);
  border-bottom: 2px solid var(--rf-red);
  padding-bottom: 10px;
  margin-bottom: 0;
}
.rf-rx-get__sched-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: rgba(26,26,26,0.12);
  border-bottom: 1px solid rgba(26,26,26,0.12);
}
@media (min-width: 768px) { .rf-rx-get__sched-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rf-rx-get__sched-grid { grid-template-columns: repeat(3, 1fr); } }
.rf-rx-get__cell {
  background: var(--rf-paper);
  padding: 14px 18px 16px 0;
}
@media (min-width: 768px) { .rf-rx-get__cell { padding-left: 20px; } .rf-rx-get__cell:nth-child(2n+1) { padding-left: 0; } }
@media (min-width: 1024px) { .rf-rx-get__cell { padding-left: 20px; } .rf-rx-get__cell:nth-child(2n+1) { padding-left: 20px; } .rf-rx-get__cell:nth-child(3n+1) { padding-left: 0; } }
.rf-rx-get__cell b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--rf-ink);
  margin-bottom: 4px;
}
.rf-rx-get__cell b i {
  font-family: var(--rf-font-mono);
  font-style: normal;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--rf-red);
  margin-right: 9px;
}
.rf-rx-get__cell p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--rf-gray-3);
}
@media (prefers-reduced-motion: reduce) {
  .rf-rx-sheet__lead { stroke-dashoffset: 0; animation: none; }
  .rf-rx-sheet__callout text { opacity: 1; animation: none; }
}

/* ---- How it works: stepper + live-query terminal (round 3) -----------------
   The four phases run as a horizontal stepper over a full-width RexQL
   terminal; refresh-rexql.js types the transcript and advances the steps. */
.rf-rxhow {
  position: relative;
  background: var(--rf-dark-3); /* matches the film section (Craig 2026-07-16) */
  color: #fff;
  padding: 56px 24px;
  overflow: hidden;
}
.rf-rxhow__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 30%, rgba(167,37,44,0.12), transparent);
  pointer-events: none;
}
.rf-rxhow__inner { max-width: 1300px; margin-inline: auto; position: relative; }
.rf-rxhow__head { max-width: 760px; margin-bottom: 30px; }
.rf-rxhow__h2 { color: #fff; }
/* Round 1 clause-break rule carries over. */
.rf-rxhow__h2 em { display: inline-block; }

.rf-rxhow__steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 20px;
  margin-bottom: 26px;
}
.rf-rxhow__step {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  color: inherit;
  font: inherit;
}
.rf-rxhow__step-rail {
  display: block;
  height: 2px;
  background: rgba(255,255,255,0.12);
  margin-bottom: 14px;
  overflow: hidden;
  border-radius: 999px;
}
.rf-rxhow__step-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--rf-red-light);
  transition: width 0.3s linear;
}
.rf-rxhow__step.is-done .rf-rxhow__step-fill { width: 100%; transition: none; }
.rf-rxhow__step-row { display: flex; align-items: baseline; gap: 12px; }
.rf-rxhow__step-num {
  font-family: var(--rf-font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.35);
  flex-shrink: 0;
}
.rf-rxhow__step-title {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.55);
  transition: color 0.25s var(--rf-ease);
}
.rf-rxhow__step:hover .rf-rxhow__step-title { color: rgba(255,255,255,0.75); }
.rf-rxhow__step.is-active .rf-rxhow__step-num { color: var(--rf-red-light); }
.rf-rxhow__step.is-active .rf-rxhow__step-title { color: #fff; }
.rf-rxhow__step.is-done .rf-rxhow__step-num { color: rgba(255,255,255,0.5); }
.rf-rxhow__step.is-done .rf-rxhow__step-title { color: rgba(255,255,255,0.8); }
.rf-rxhow__step-lead {
  display: none;
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255,255,255,0.45);
}
.rf-rxhow__step.is-active .rf-rxhow__step-lead { color: rgba(255,255,255,0.65); }

/* The recreated RexQL app window (round 4: the actual product UI). */
.rf-rxhow__app {
  background: #FBFBF9;
  border-radius: 16px;
  overflow: hidden;
  color: #1f2023;
  box-shadow: 0 24px 70px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  min-height: 440px;
}
.rf-rxhow__app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid rgba(26,26,26,0.08);
}
.rf-rxhow__app-side { display: flex; align-items: center; gap: 8px; flex: 1; }
.rf-rxhow__app-side.is-right { justify-content: flex-end; }
.rf-rxhow__app-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(26,26,26,0.14);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #1f2023;
  background: #fff;
  white-space: nowrap;
}
.rf-rxhow__app-btn.is-soft { background: #F2F2EF; border-color: transparent; color: rgba(31,32,35,0.75); }
.rf-rxhow__app-btn.is-model svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.rf-rxhow__app-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.rf-rxhow__app-title img {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(26,26,26,0.1);
  background: #fff;
}
.rf-rxhow__chat {
  flex: 1;
  padding: 20px 20px 6px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 180px;
}
.rf-rxhow__msg { max-width: 92%; }
.rf-rxhow__msg-label {
  font-family: var(--rf-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: rgba(31,32,35,0.5);
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rf-rxhow__msg-label img { width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(26,26,26,0.1); background: #fff; }
.rf-rxhow__msg--you { align-self: flex-end; text-align: left; }
.rf-rxhow__msg--you .rf-rxhow__msg-label { justify-content: flex-end; }
.rf-rxhow__bubble {
  background: var(--rf-red);
  color: #fff;
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 14.5px;
  line-height: 1.55;
  font-weight: 600;
  box-shadow: 0 8px 22px rgba(167,37,44,0.28);
}
.rf-rxhow__card {
  background: #fff;
  border: 1px solid rgba(26,26,26,0.07);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(31,32,35,0.75);
  box-shadow: 0 6px 18px rgba(26,26,26,0.06);
}
.rf-rxhow__dots { display: inline-flex; gap: 5px; margin-left: 8px; vertical-align: 1px; }
.rf-rxhow__dots i {
  width: 5px; height: 5px; border-radius: 999px; background: rgba(31,32,35,0.45);
  animation: rf-rxhow-dot 1.1s ease-in-out infinite;
}
.rf-rxhow__dots i:nth-child(2) { animation-delay: 0.18s; }
.rf-rxhow__dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes rf-rxhow-dot { 0%,100% { opacity: 0.25; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
.rf-rxhow__skel { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.rf-rxhow__skel i {
  height: 10px; border-radius: 6px;
  background: linear-gradient(90deg, rgba(26,26,26,0.07), rgba(26,26,26,0.13), rgba(26,26,26,0.07));
  background-size: 200% 100%;
  animation: rf-rxhow-skel 1.6s linear infinite;
}
.rf-rxhow__skel i:nth-child(1) { width: 88%; }
.rf-rxhow__skel i:nth-child(2) { width: 64%; }
.rf-rxhow__skel i:nth-child(3) { width: 76%; }
@keyframes rf-rxhow-skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.rf-rxhow__skel-cap {
  margin-top: 10px;
  font-family: var(--rf-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(31,32,35,0.45);
}
.rf-rxhow__msg.is-in { animation: rf-rxhow-in 0.35s var(--rf-ease) both; }
.rf-rxhow__composer { margin: 10px 16px 16px; border: 1px solid rgba(26,26,26,0.12); border-radius: 14px; background: #fff; }
.rf-rxhow__composer-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 0;
}
.rf-rxhow__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(26,26,26,0.13);
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  transition: border-color 0.25s var(--rf-ease), box-shadow 0.25s var(--rf-ease);
}
.rf-rxhow__chip svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rf-rxhow__chip b {
  background: var(--rf-red);
  color: #fff;
  border-radius: 999px;
  font-size: 10.5px;
  min-width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 4px;
}
.rf-rxhow__chip.is-hot { border-color: var(--rf-red); box-shadow: 0 0 0 3px rgba(167,37,44,0.14); }
.rf-rxhow__ds-live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(31,32,35,0.7);
  white-space: nowrap;
}
.rf-rxhow__ds-live i { width: 7px; height: 7px; border-radius: 999px; background: var(--rf-red); }
.rf-rxhow__ds-live.is-hot { color: var(--rf-red); }
.rf-rxhow__ds-live.is-hot i { animation: rf-rxhow-dot 1.1s ease-in-out infinite; }
.rf-rxhow__composer-input {
  padding: 14px 14px 18px;
  font-family: var(--rf-font-mono);
  font-size: 13.5px;
  color: rgba(31,32,35,0.55);
  min-height: 50px;
}
.rf-rxhow__composer-input .is-typing { color: #1f2023; }
.rf-rxhow__app-caret {
  display: inline-block;
  width: 7px;
  height: 14px;
  background: var(--rf-red);
  vertical-align: -2px;
  margin-left: 2px;
  border-radius: 1px;
  animation: rf-rxhow-blink 0.9s linear infinite;
}
.rf-rxhow__composer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(26,26,26,0.09);
  padding: 12px 14px;
  font-size: 12px;
  color: rgba(31,32,35,0.55);
}
.rf-rxhow__send {
  background: #C05C61;
  color: #fff;
  border-radius: 10px;
  padding: 9px 22px;
  font-size: 13px;
  font-weight: 700;
  transition: background 0.25s var(--rf-ease);
}
.rf-rxhow__send.is-live { background: var(--rf-red); }
.rf-rxhow__gov {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: center;
  margin-top: 18px;
  font-family: var(--rf-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.3);
  transition: color 0.4s var(--rf-ease);
}
.rf-rxhow__gov.is-hot { color: var(--rf-red-light); }
@keyframes rf-rxhow-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes rf-rxhow-blink { 0%,45% { opacity: 1; } 55%,100% { opacity: 0; } }
.is-hide-sm { display: none; }
@media (max-width: 639px) {
  .rf-rxhow__app-bar { padding: 10px 12px; gap: 8px; }
  .rf-rxhow__app-side { flex: 0 1 auto; }
  .rf-rxhow__app-btn { padding: 6px 10px; font-size: 11.5px; gap: 5px; }
  .rf-rxhow__app-btn.is-soft { display: none; }
  .rf-rxhow__app-title { font-size: 14px; gap: 6px; }
  .rf-rxhow__app-title img { width: 21px; height: 21px; }
  .rf-rxhow__composer-top { flex-wrap: wrap; }
  .rf-rxhow__ds-live { margin-left: 0; width: 100%; }
}

@media (min-width: 900px) {
  .rf-rxhow__steps { grid-template-columns: repeat(4, 1fr); gap: 32px; }
  .rf-rxhow__step-lead { display: block; }
  .rf-rxhow__step-title { font-size: 17px; }
  .is-hide-sm { display: inline-flex; }
  .rf-rxhow__chat { padding: 24px 28px 8px; }
  .rf-rxhow__composer { margin: 12px 24px 24px; }
  .rf-rxhow__msg { max-width: 78%; }
  .rf-rxhow__bubble { font-size: 15px; }
}
@media (min-width: 1024px) {
  .rf-rxhow { padding: 72px 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .rf-rxhow__app-caret { display: none; }
  .rf-rxhow__msg.is-in { animation: none; }
  .rf-rxhow__dots i, .rf-rxhow__skel i, .rf-rxhow__ds-live.is-hot i { animation: none; }
  .rf-rxhow__step-fill { transition: none; }
}

/* ---- Why RexQL ------------------------------------------------------------- */
.rf-rx-why {
  background: var(--rf-dark-3); /* black per Craig 2026-07-16 */
  color: #fff;
  padding: 96px 24px;
}
.rf-rx-why__inner { max-width: 1300px; margin-inline: auto; }
/* Round 3: head runs full width so the anthem seal sits beside the H2. */
.rf-rx-why__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 56px;
  color: #fff;
}
.rf-rx-why__seal {
  flex: none;
  width: 120px;
  height: 120px;
  transform: rotate(-12deg);
  opacity: 0.92;
}
@media (min-width: 768px) { .rf-rx-why__seal { width: 176px; height: 176px; margin-right: 24px; } }
.rf-rx-why__seal circle { stroke: #C9A24A; }
.rf-rx-why__seal-ring {
  font-family: var(--rf-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  fill: #C9A24A;
}
.rf-rx-why__seal-x {
  font-weight: 800;
  font-size: 26px;
  fill: #C9A24A;
}
/* Round 1: the red clause holds as one line after the break. */
.rf-rx-why__h2 em { display: inline-block; }
.rf-rx-why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 768px) { .rf-rx-why__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.rf-rx-why__col {
  border-top: 1px solid rgba(255,255,255,0.14);
  padding-top: 28px;
}
.rf-rx-why__stat {
  font-weight: 800;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 6px;
}
@media (min-width: 1024px) { .rf-rx-why__stat { font-size: 52px; } }
/* "Microsoft MVP." is a word, not a numeral: scale it to hold one line in its
   column across the 3-col grid (768+); phones keep the base size. */
@media (min-width: 768px) { .rf-rx-why__stat.is-word { font-size: min(52px, 4.2vw); } }
.rf-rx-why__stat > span { color: var(--rf-red-light); }
.rf-rx-why__label {
  font-weight: 800;
  font-size: 16px;
  color: var(--rf-red-light);
  margin-bottom: 16px;
}
.rf-rx-why__p {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255,255,255,0.6);
}

/* ---- CTA: copy + the homepage Rex media (round 2) --------------------------- */
.rf-rx-cta {
  position: relative;
  background: var(--rf-red); /* homepage rf-cta red band (Craig 2026-07-16) */
  color: #fff;
  text-align: center;
  padding: 96px 24px 112px;
  overflow: hidden;
}
.rf-rx-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent, transparent, var(--rf-red-deep));
  pointer-events: none;
}
.rf-rx-cta__glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse 60% 70% at 50% 25%, rgba(255,255,255,0.12), transparent 70%);
  pointer-events: none;
}
.rf-rx-cta__inner {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin-inline: auto;
  display: grid;
  gap: 48px;
  align-items: center;
}
.rf-rx-cta__h2 {
  font-weight: 800;
  font-size: 36px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.rf-rx-cta__p {
  font-size: 18px;
  line-height: 1.7;
  color: rgba(255,255,255,0.85);
  margin-bottom: 40px;
}
/* On the red band: white clause, inverted button (homepage rf-cta treatment). */
.rf-rx-cta .rf-accent-dark { color: rgba(255,255,255,0.95); }
.rf-rx-cta .rf-btn-primary {
  background: #fff;
  color: var(--rf-red);
}
.rf-rx-cta .rf-btn-primary:hover { box-shadow: 0 16px 44px rgba(0,0,0,0.3); }
/* Quiet cross-link under the CTA button (MS-page seller-line pattern, adapted
   for the red band: white link, underline for affordance). */
.rf-rx-cta__quiet {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.18);
  font-size: 14.5px;
  color: rgba(255,255,255,0.65);
}
.rf-rx-cta__quiet a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.rf-rx-cta__quiet a:hover { text-decoration: none; }
/* The homepage RexQL media treatment, on the dark set (AI-page plate chrome). */
.rf-rx-cta__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(167,37,44,0.3);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 30px 70px -30px rgba(0,0,0,0.7);
}
.rf-rx-cta__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 1024px) {
  .rf-rx-cta { text-align: left; }
  .rf-rx-cta__inner { max-width: 1300px; grid-template-columns: 1fr 1.15fr; gap: 64px; }
  .rf-rx-cta__h2 { font-size: 48px; }
}

/* Mobile tap target (audit SW-05): quiet hero link. */
@media (max-width: 767px) {
  .rf-rx-hero__alt { display: inline-block; padding-block: 10px; }
}

/* REXQL-M09: the DWG reference in the schedule header only shows where the
   AN-004 sheet renders (>=768). */
.rf-rx-get__sched-dwg { display: none; }
@media (min-width: 768px) { .rf-rx-get__sched-dwg { display: inline; } }

/* ===========================================================================
   MOBILE UX PASS (2026-07-18). Mobile-breakpoint-gated; desktop untouched.
=========================================================================== */
@media (max-width: 767px) {
  /* REXQL-M01: fixed-height app window with internal chat scroll, like the real
     app, so the demo loop stops pumping the page height. */
  .rf-rxhow__app { height: 620px; min-height: 0; }
  .rf-rxhow__chat { flex: 1; min-height: 0; overflow-y: auto; }

  /* REXQL-M02: the 120px seal squeezed the Why headline into a ~170px column;
     stack the head and drop the seal below at 96px. */
  .rf-rx-why__head { display: block; }
  .rf-rx-why__seal { display: block; width: 96px; height: 96px; margin-top: 28px; }

  /* REXQL-M06: the deliverables schedule IS the What-you-get content on phones
     (the sheet is hidden); lift its body copy to the 15px floor. */
  .rf-rx-get__cell p { font-size: 15px; }
  .rf-rx-get__cell { padding-block: 16px 18px; }

  /* REXQL-M07: film / how / why share the same black, so the desktop paddings
     merged into ~160px voids; tighten to ~120px seams. */
  .rf-rx-film { padding: 72px 24px 64px; }
  .rf-rx-why { padding: 64px 24px 80px; }

  /* REXQL-M08: the CTA cross-link was 40px tall. */
  .rf-rx-cta__quiet a { display: inline-block; padding-block: 6px; }
}