/* ============================================================
   fax.css — "Fax, Finally Readable" story page.
   Scope: .cxp-fax only. Metaphor: a clinical READING ROOM with a
   LIGHT-TABLE. Hero: the dim crooked pile gives way to lit,
   labelled specimens on a ledge. Signature set piece: a fax page
   lies on a lit surface, one teal scan beam sweeps it, and the
   structured AI summary (type / gist / findings / actions)
   assembles beside it — then the "Matched · 98% ✓" chip snaps in
   and the filed line settles.
   Mood: calm, clinical white, soft teal light. De-boxed: hairlines
   and light, not card grids. No rainbow (teal family + indigo +
   ink + one mint tick).
   CSS-only animation, keyed off the shared .ios → .in reveal from
   /marketing/app.js. Under prefers-reduced-motion the finished
   scene renders complete and still — summary built, match chip
   in, beam retired. Tokens inherited from styles.css; teal accents
   match comms.css.
   ============================================================ */

.cxp-fax {
  /* page accent — the reading-room light */
  --fx-teal: #5a82c2;
  --fx-teal-deep: #3d63a4;
  --fx-teal-lite: #8aa6dd;
  --fx-wash: color-mix(in srgb, #5a82c2 7%, #fff);
  /* alias the comms vars so shared .cx-head rules resolve here too */
  --cx-teal: var(--fx-teal);
  --cx-teal-deep: var(--fx-teal-deep);
  --cx-teal-lite: var(--fx-teal-lite);
  --cx-teal-wash: var(--fx-wash);
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}

.cxp-fax .eyebrow {
  color: var(--fx-teal-deep);
}

.cxp-fax .h2 {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.16;
  color: var(--ink);
}

/* ============================================================
   1 · HERO — the reading room
   ============================================================ */
.cxp-fax .fx-hero {
  position: relative;
  padding-top: clamp(132px, 15vw, 188px);
  background:
    radial-gradient(84% 50% at 50% 0%, var(--periwinkle) 0%, transparent 60%),
    linear-gradient(180deg, #fff 0%, #f4fbf9 68%, var(--fx-wash) 100%);
  overflow: hidden;
}

.cxp-fax .fx-hero-wrap {
  text-align: center;
  max-width: 860px;
}

.cxp-fax .fx-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-40);
  margin-bottom: 26px;
  transition: color 0.18s;
}
.cxp-fax .fx-back:hover {
  color: var(--fx-teal-deep);
}

.cxp-fax .fx-h1 {
  margin: 16px auto 18px;
  max-width: 17ch;
}

.cxp-fax .fx-lead {
  max-width: 58ch;
  margin-inline: auto;
}

.cxp-fax .fx-hero-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px;
}

/* --- the room: dim pile at left, lit ledge at right ------------ */
.cxp-fax .fx-room {
  position: relative;
  max-width: 1080px;
  margin: clamp(40px, 6vw, 76px) auto 0;
  padding: 0 clamp(20px, 4vw, 48px) clamp(44px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(150px, 2fr) 5fr;
  grid-template-areas:
    "pile ledge"
    "pnote lnote";
  align-items: end;
  column-gap: clamp(32px, 6vw, 88px);
  row-gap: 16px;
}

/* the dim pile — crooked grey paper, the "before" */
.cxp-fax .fx-pile {
  grid-area: pile;
  position: relative;
  justify-self: center;
  width: min(150px, 100%);
  height: 116px;
  filter: saturate(0.55);
}
.cxp-fax .fx-pile i {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 118px;
  height: 84px;
  border-radius: 3px;
  background: linear-gradient(180deg, #f2f3f6, #e5e7ee);
  border: 1px solid #dcdfe9;
  box-shadow: 0 3px 10px -5px rgba(20, 26, 60, 0.28);
}
.cxp-fax .fx-pile i:nth-child(1) { transform: translateX(-50%) rotate(-7deg); bottom: 2px; }
.cxp-fax .fx-pile i:nth-child(2) { transform: translateX(-56%) rotate(5deg); bottom: 9px; }
.cxp-fax .fx-pile i:nth-child(3) { transform: translateX(-44%) rotate(-3deg); bottom: 17px; }
.cxp-fax .fx-pile i:nth-child(4) { transform: translateX(-52%) rotate(8deg); bottom: 25px; }
.cxp-fax .fx-pile i:nth-child(5) { transform: translateX(-49%) rotate(-2deg); bottom: 33px; background: linear-gradient(180deg, #f7f8fb, #ecedf3); }

/* curling top corner on the top sheet */
.cxp-fax .fx-pile::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 24px;
  width: 18px;
  height: 18px;
  border-radius: 0 3px 0 14px;
  background: linear-gradient(225deg, #fff 45%, #dfe2ec 100%);
  transform: rotate(-2deg);
  box-shadow: -2px 2px 4px -2px rgba(20, 26, 60, 0.2);
}

.cxp-fax .fx-room-note {
  grid-area: pnote;
  justify-self: center;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.cxp-fax .fx-room-note--after {
  grid-area: lnote;
  color: var(--fx-teal-deep);
}

/* the lit ledge — the "after" */
.cxp-fax .fx-ledge {
  grid-area: ledge;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(16px, 3vw, 36px);
  padding: 44px clamp(18px, 3vw, 40px) 18px;
  border-bottom: 2px solid color-mix(in srgb, var(--fx-teal) 34%, var(--line));
  background:
    radial-gradient(90% 130% at 50% 100%, color-mix(in srgb, var(--fx-teal) 9%, transparent) 0%, transparent 72%);
}

/* the strip light above the ledge */
.cxp-fax .fx-ledge-light {
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--fx-teal-lite) 18%, var(--fx-teal) 50%, var(--fx-teal-lite) 82%, transparent);
  box-shadow: 0 0 22px 3px color-mix(in srgb, var(--fx-teal) 30%, transparent);
}
/* its cone of light falling on the specimens */
.cxp-fax .fx-ledge-light::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 3px;
  height: 150px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--fx-teal) 10%, transparent), transparent 85%);
  clip-path: polygon(14% 0%, 86% 0%, 100% 100%, 0% 100%);
  pointer-events: none;
}

/* lit, labelled specimens */
.cxp-fax .fx-spec {
  position: relative;
  width: clamp(88px, 11vw, 118px);
  padding: 14px 12px 26px;
  border-radius: 4px;
  background: linear-gradient(180deg, #fff, #fbfdfd);
  border: 1px solid color-mix(in srgb, var(--fx-teal) 16%, var(--line));
  box-shadow:
    0 14px 26px -18px rgba(8, 60, 54, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  display: flex;
  flex-direction: column;
  gap: 7px;
  opacity: 0;
  transform: translateY(14px);
}
.cxp-fax .fx-room.in .fx-spec {
  animation: fx-spec-in 0.4667s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.cxp-fax .fx-room.in .fx-spec-1 { animation-delay: 0.1667s; }
.cxp-fax .fx-room.in .fx-spec-2 { animation-delay: 0.28s; }
.cxp-fax .fx-room.in .fx-spec-3 { animation-delay: 0.3933s; }
@keyframes fx-spec-in {
  to {
    opacity: 1;
    transform: none;
  }
}

.cxp-fax .fx-spec i {
  height: 5px;
  border-radius: 3px;
  background: var(--line);
}
.cxp-fax .fx-spec i:nth-of-type(1) { width: 88%; }
.cxp-fax .fx-spec i:nth-of-type(2) { width: 64%; }
.cxp-fax .fx-spec i:nth-of-type(3) { width: 76%; }

/* the specimen label — a small teal tab */
.cxp-fax .fx-spec b {
  position: absolute;
  left: 50%;
  bottom: -11px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fx-teal-deep);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--fx-teal) 28%, var(--line));
  box-shadow: var(--shadow-1);
}

/* ============================================================
   2 · THE LIGHT-TABLE — the signature set piece
   ============================================================ */
.cxp-fax .fx-table {
  background: linear-gradient(180deg, var(--fx-wash), #fff 22%, var(--paper));
}

.cxp-fax .fx-stage {
  position: relative;
  margin: clamp(36px, 5vw, 60px) auto 0;
  max-width: 1020px;
  padding: clamp(28px, 4vw, 52px) clamp(20px, 4vw, 56px) clamp(20px, 3vw, 34px);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

/* the lit table surface — a pool of light, not a box */
.cxp-fax .fx-surface {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--r-xl);
  background:
    radial-gradient(72% 88% at 32% 46%, color-mix(in srgb, var(--fx-teal) 8%, #fff) 0%, transparent 66%),
    linear-gradient(180deg, #fff, var(--paper));
  border: 1px solid var(--line);
  box-shadow:
    var(--shadow-2),
    0 0 60px -18px color-mix(in srgb, var(--fx-teal) 22%, transparent) inset;
}

/* --- the fax page under the beam ------------------------------ */
.cxp-fax .fx-page {
  position: relative;
  z-index: 1;
  aspect-ratio: 8.5 / 11;
  max-width: 340px;
  width: 100%;
  justify-self: center;
  padding: 7% 8% 9%;
  border-radius: 4px;
  background: linear-gradient(180deg, #fff, #fdfefe);
  border: 1px solid color-mix(in srgb, var(--fx-teal) 10%, var(--line));
  box-shadow:
    0 24px 44px -26px rgba(8, 40, 60, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.7) inset;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* the fax transmission header — mono, machine-set */
.cxp-fax .fx-page-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--mono);
  font-size: clamp(6.5px, 1vw, 8.5px);
  letter-spacing: 0.06em;
  color: var(--ink-40);
  padding-bottom: 6%;
  border-bottom: 1px dashed var(--line);
  margin-bottom: 7%;
  white-space: nowrap;
}

/* referring-practice letterhead skeleton */
.cxp-fax .fx-letterhead {
  display: grid;
  grid-template-columns: 24% 1fr;
  grid-template-rows: auto auto;
  column-gap: 8%;
  row-gap: 8px;
  align-items: center;
  margin-bottom: 9%;
}
.cxp-fax .fx-letterhead b {
  grid-row: 1 / 3;
  aspect-ratio: 1;
  border-radius: 5px;
  background: linear-gradient(140deg, color-mix(in srgb, var(--fx-teal) 22%, #fff), color-mix(in srgb, var(--indigo) 14%, #fff));
  border: 1px solid var(--line);
}
.cxp-fax .fx-letterhead i {
  height: 6px;
  border-radius: 3px;
  background: var(--line);
}
.cxp-fax .fx-letterhead i:last-of-type {
  width: 62%;
  background: var(--line-2, var(--line));
}

/* the body — skeleton text lines (widths set inline in the TSX) */
.cxp-fax .fx-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
}
.cxp-fax .fx-body i {
  height: 5px;
  border-radius: 3px;
  background: #e6e9f2;
}

/* --- the scan beam — one sweep, top to bottom ------------------ */
.cxp-fax .fx-beam {
  position: absolute;
  left: 3%;
  right: 3%;
  top: 4%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--fx-teal-lite) 14%, var(--fx-teal) 50%, var(--fx-teal-lite) 86%, transparent);
  box-shadow:
    0 0 18px 3px color-mix(in srgb, var(--fx-teal) 38%, transparent),
    0 0 46px 10px color-mix(in srgb, var(--fx-teal) 14%, transparent);
  opacity: 0;
  pointer-events: none;
}
/* the read-wash trailing above the beam */
.cxp-fax .fx-beam::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 2px;
  height: 40px;
  background: linear-gradient(0deg, color-mix(in srgb, var(--fx-teal) 12%, transparent), transparent);
  border-radius: 3px;
}
.cxp-fax .fx-stage.in .fx-beam {
  animation: fx-sweep 1.3529s cubic-bezier(0.45, 0.05, 0.4, 0.95) 0.3333s forwards;
}
@keyframes fx-sweep {
  0%   { top: 4%;  opacity: 0; }
  7%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { top: 94%; opacity: 0; }
}

/* --- the summary card that assembles beside it ----------------- */
.cxp-fax .fx-card {
  position: relative;
  z-index: 2;
  max-width: 460px;
  width: 100%;
  padding: 20px 22px 18px;
  border-radius: var(--r-soft, 16px);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--fx-teal) 16%, var(--line));
  box-shadow:
    0 30px 60px -34px rgba(8, 40, 60, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
  opacity: 0;
  transform: translateY(14px);
}
.cxp-fax .fx-stage.in .fx-card {
  animation: fx-rise 0.4667s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2333s forwards;
}
@keyframes fx-rise {
  to {
    opacity: 1;
    transform: none;
  }
}

.cxp-fax .fx-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line-2, var(--line));
}
.cxp-fax .fx-card-head b {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cxp-fax .fx-spark {
  font-size: 13px;
  line-height: 1;
  color: var(--fx-teal-deep);
}
.cxp-fax .fx-stage.in .fx-spark {
  animation: fx-spark 1.5294s ease-in-out 0.4s infinite;
}
@keyframes fx-spark {
  0%, 100% { opacity: 0.55; transform: scale(0.94); }
  50%      { opacity: 1; transform: scale(1.08); }
}
.cxp-fax .fx-card-time {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--ink-40);
}

/* the four structured lines */
.cxp-fax .fx-row {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-2, var(--line));
  opacity: 0;
  transform: translateY(8px);
}
/* card children: head(1), rows(2–5), match(6), filed(7) */
.cxp-fax .fx-row:nth-child(5) {
  border-bottom: none;
}
.cxp-fax .fx-stage.in .fx-row {
  animation: fx-rise 0.3667s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.cxp-fax .fx-stage.in .fx-row:nth-child(2) { animation-delay: 0.5667s; }
.cxp-fax .fx-stage.in .fx-row:nth-child(3) { animation-delay: 0.8667s; }
.cxp-fax .fx-stage.in .fx-row:nth-child(4) { animation-delay: 1.1667s; }
.cxp-fax .fx-stage.in .fx-row:nth-child(5) { animation-delay: 1.2941s; }

.cxp-fax .fx-k {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fx-teal-deep);
}
.cxp-fax .fx-v {
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.008em;
  color: var(--ink-70);
}
/* findings / actions render as quiet sub-lines with a teal tick mark */
.cxp-fax .fx-v em {
  display: block;
  font-style: normal;
  position: relative;
  padding-left: 16px;
  font-size: 13.5px;
  color: var(--ink-60);
}
.cxp-fax .fx-v em + em {
  margin-top: 4px;
}
.cxp-fax .fx-v em::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: color-mix(in srgb, var(--fx-teal) 55%, #fff);
  box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--fx-teal) 14%, transparent);
}

/* the match chip — snaps in once the read completes */
.cxp-fax .fx-match {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--fx-wash), color-mix(in srgb, var(--fx-teal) 11%, #fff));
  border: 1px solid color-mix(in srgb, var(--fx-teal) 30%, #fff);
  opacity: 0;
  transform: scale(0.86);
  transform-origin: 22% 50%;
}
.cxp-fax .fx-stage.in .fx-match {
  animation: fx-snap 0.3333s cubic-bezier(0.3, 1.45, 0.5, 1) 1.6176s forwards;
}
@keyframes fx-snap {
  0%   { opacity: 0; transform: scale(0.86); }
  62%  { opacity: 1; transform: scale(1.035); }
  100% { opacity: 1; transform: scale(1); }
}
.cxp-fax .fx-match b {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cxp-fax .fx-match-tick {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  background: var(--mint, #19b886);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mint, #19b886) 18%, transparent);
}
.cxp-fax .fx-match-conf {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--fx-teal-deep);
}

/* the filed line — the document walks itself to the chart */
.cxp-fax .fx-filed {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--ink-40);
  opacity: 0;
}
.cxp-fax .fx-filed span {
  color: var(--fx-teal-deep);
}
.cxp-fax .fx-stage.in .fx-filed {
  animation: fx-rise 0.3333s ease 1.8824s forwards;
}

.cxp-fax .fx-stage-note {
  grid-column: 1 / -1;
  z-index: 1;
  margin-top: clamp(10px, 2vw, 18px);
  text-align: center;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-40);
  max-width: 62ch;
  justify-self: center;
}

/* ============================================================
   3 · THREE BEATS — from paper tray to patient chart
   ============================================================ */
.cxp-fax .fx-beats {
  background: #fff;
}

.cxp-fax .fx-beat-list {
  list-style: none;
  margin: clamp(30px, 4vw, 52px) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.cxp-fax .fx-beat {
  display: grid;
  grid-template-columns: 64px minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(18px, 3vw, 44px);
  align-items: center;
  padding: clamp(26px, 3.4vw, 44px) 2px;
  border-bottom: 1px solid var(--line);
}

.cxp-fax .fx-n {
  align-self: start;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--fx-teal-deep);
  padding-top: 6px;
  font-variant-numeric: tabular-nums;
}

.cxp-fax .fx-beat-copy h3 {
  margin: 0 0 8px;
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.cxp-fax .fx-beat-copy p {
  margin: 0;
  font-size: 15px;
  line-height: 1.58;
  color: var(--ink-60);
  max-width: 52ch;
}

.cxp-fax .fx-beat-art {
  display: flex;
  justify-content: center;
}

/* 01 — inbound pill */
.cxp-fax .fx-inbound {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  white-space: nowrap;
}
.cxp-fax .fx-inbound-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fx-teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-teal) 18%, transparent);
}
.cxp-fax .fx-beat.in .fx-inbound-dot {
  animation: fx-pulse 1.2941s ease-in-out 0.3333s infinite;
}
@keyframes fx-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-teal) 18%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--fx-teal) 8%, transparent); }
}
.cxp-fax .fx-inbound-num {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-70);
}
.cxp-fax .fx-inbound-pg {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-40);
  padding-left: 10px;
  border-left: 1px solid var(--line);
}

/* 02 — mini summary skeleton */
.cxp-fax .fx-minisum {
  width: min(240px, 100%);
  padding: 16px 18px;
  border-radius: var(--r-mid);
  background: linear-gradient(180deg, #fff, var(--fx-wash));
  border: 1px solid color-mix(in srgb, var(--fx-teal) 16%, var(--line));
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.cxp-fax .fx-minisum i {
  height: 6px;
  border-radius: 3px;
  background: #e4e8f1;
}
.cxp-fax .fx-minisum i:first-child {
  background: linear-gradient(90deg, var(--fx-teal-lite), var(--fx-teal));
  opacity: 0.75;
}

/* 03 — the one-tap pick queue */
.cxp-fax .fx-queue {
  width: min(280px, 100%);
  padding: 14px 16px 16px;
  border-radius: var(--r-mid);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.cxp-fax .fx-queue-t {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink-60);
}
.cxp-fax .fx-queue-opts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cxp-fax .fx-queue-opts b {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-70);
  padding: 6px 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--paper);
}
.cxp-fax .fx-queue-opts b.is-pick {
  color: #fff;
  background: linear-gradient(140deg, var(--fx-teal), var(--fx-teal-deep));
  border-color: transparent;
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--fx-teal-deep) 80%, transparent);
}

/* ============================================================
   4 · THE FINE PRINT — three quiet notes
   ============================================================ */
.cxp-fax .fx-notes {
  background: var(--paper);
}

.cxp-fax .fx-notes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
}

.cxp-fax .fx-note {
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--fx-teal) 42%, var(--line));
}
.cxp-fax .fx-note h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.cxp-fax .fx-note p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.58;
  color: var(--ink-60);
}

/* outbound delivery trail */
.cxp-fax .fx-trail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-40);
}
.cxp-fax .fx-trail i {
  font-style: normal;
  color: var(--fx-teal-lite);
}
.cxp-fax .fx-trail b {
  font-weight: 700;
  color: var(--mint, #19b886);
}

/* ============================================================
   5 · CTA — lights out, one lit slit under the door
   ============================================================ */
.cxp-fax .fx-cta {
  position: relative;
  text-align: center;
  padding-block: clamp(76px, 10vw, 132px);
  border-top: 1px solid var(--line);
  background:
    radial-gradient(120% 120% at 50% 0%, var(--periwinkle) 0%, transparent 60%),
    linear-gradient(180deg, #f4f7fc, #fff);
  overflow: hidden;
}

/* the lit slit — the reading room's light under the door */
.cxp-fax .fx-cta-slit {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, 62vw);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--fx-teal-lite) 22%, var(--fx-teal) 50%, var(--fx-teal-lite) 78%, transparent);
  box-shadow:
    0 0 24px 4px color-mix(in srgb, var(--fx-teal) 38%, transparent),
    0 18px 80px 22px color-mix(in srgb, var(--fx-teal) 12%, transparent);
  animation: fx-slit 2.9412s ease-in-out infinite;
}
@keyframes fx-slit {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}

.cxp-fax .fx-cta-inner {
  position: relative;
  max-width: 720px;
}

.cxp-fax .fx-cta-eyebrow {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #3d63a4;
}
.cxp-fax .fx-cta-h {
  margin: 16px 0;
  font-size: clamp(30px, 4.4vw, 54px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.06;
  color: var(--ink);
}
.cxp-fax .fx-cta-sub {
  max-width: 48ch;
  margin: 0 auto 30px;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.6;
  color: var(--ink-60);
}

.cxp-fax .fx-cta-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.cxp-fax .fx-cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 12px 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-70);
  transition: color 0.18s;
}
.cxp-fax .fx-cta-ghost:hover {
  color: var(--ink);
}
.cxp-fax .fx-cta-ghost .arrow {
  transition: transform 0.2s ease;
}
.cxp-fax .fx-cta-ghost:hover .arrow {
  transform: translateX(3px);
}

/* sibling stories */
.cxp-fax .fx-sibs {
  margin-top: clamp(40px, 5vw, 60px);
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 28px;
}
.cxp-fax .fx-sibs-k {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
}
.cxp-fax .fx-sibs a {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.18s;
}
.cxp-fax .fx-sibs a:hover {
  color: var(--fx-teal-lite);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .cxp-fax .fx-beat {
    grid-template-columns: 48px minmax(0, 1fr);
    row-gap: 20px;
  }
  .cxp-fax .fx-beat-art {
    grid-column: 2;
    justify-content: flex-start;
  }
}

@media (max-width: 880px) {
  /* light-table stacks: page above, summary card below */
  .cxp-fax .fx-stage {
    grid-template-columns: 1fr;
    gap: 30px;
    justify-items: center;
  }
  .cxp-fax .fx-page {
    max-width: 300px;
  }
  .cxp-fax .fx-notes-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

@media (max-width: 720px) {
  /* the room stacks: pile above, ledge below */
  .cxp-fax .fx-room {
    grid-template-columns: 1fr;
    grid-template-areas:
      "pile"
      "pnote"
      "ledge"
      "lnote";
    row-gap: 14px;
  }
  .cxp-fax .fx-ledge {
    margin-top: 18px;
    padding-top: 38px;
  }
  .cxp-fax .fx-inbound {
    white-space: normal;
  }
}

@media (max-width: 700px) {
  /* single column by phone width — don't wait for the 480px breakpoint */
  .cxp-fax .fx-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

@media (max-width: 480px) {
  .cxp-fax .fx-page-head span:nth-child(2) {
    display: none;
  }
}

/* ============================================================
   REDUCED MOTION — the finished scene, complete and still:
   summary assembled, match chip in, document filed. Never a
   blank card or a mid-scan beam.
   ============================================================ */
@media (prefers-reduced-motion: reduce), (max-width: 700px) {
  .cxp-fax .fx-spec,
  .cxp-fax .fx-room.in .fx-spec,
  .cxp-fax .fx-card,
  .cxp-fax .fx-stage.in .fx-card,
  .cxp-fax .fx-row,
  .cxp-fax .fx-stage.in .fx-row,
  .cxp-fax .fx-match,
  .cxp-fax .fx-stage.in .fx-match,
  .cxp-fax .fx-filed,
  .cxp-fax .fx-stage.in .fx-filed {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .cxp-fax .fx-beam,
  .cxp-fax .fx-stage.in .fx-beam {
    animation: none !important;
    opacity: 0 !important;
  }
  .cxp-fax .fx-spark,
  .cxp-fax .fx-stage.in .fx-spark,
  .cxp-fax .fx-inbound-dot,
  .cxp-fax .fx-beat.in .fx-inbound-dot,
  .cxp-fax .fx-cta-slit {
    animation: none !important;
  }
}