@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&display=swap");

:root {
  --ra-cream: #fcf9f8;
  --ra-ink: #1a1a1a;
  --ra-orange: #f97316;
  --ra-orange-hover: #ea6c0a;
  /* Orange dark enough to set TEXT in on cream. --ra-orange is 2.7:1 against
     --ra-cream and --ra-orange-hover is 3.0:1; both fail AA for body-sized copy.
     This is 5.1:1. Use it for orange lettering, never for fills the brand orange
     already owns. */
  --ra-orange-ink: #b34a05;
  --ra-orange-light: #fff4ed;
  --ra-sage: #5c6b54;
  --ra-green: #34a05e;
  --ra-blue: #2e7ce6;
  --ra-yellow: #f5b31c;
  --ra-pink: #ed6a98;
  --ra-line: #e8e2da;
  --ra-ease: cubic-bezier(.22, 1, .36, 1);
  --ra-shadow: 0 20px 54px rgba(66, 43, 26, .13);
  --chk: #34a05e;
  --rf-font-sans: "Manrope", sans-serif;
  --rf-shadow-card: 0 10px 28px rgba(64, 46, 34, .09);
  --rf-shadow-raised: 0 8px 24px rgba(28, 27, 27, .10);
  --rf-shadow-cta: 0 10px 24px rgba(249, 115, 22, .30);
  --rf-shadow-ambient: 0 24px 70px rgba(64, 46, 34, .15);
}

.ra-profile-icon,
.ra-approved-hardhat {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  border-radius: 28%;
  background: var(--ra-sage);
}

.ra-profile-icon svg { width: 84%; height: 70%; }
.ra-approved-hardhat svg { width: 68%; height: 68%; }

/* Claude Design Fun Kit: exact source fragments ----------------------- */
.ra-approved-asset {
  --chk: #34a05e;
  --rf-shadow-card: 0 2px 12px rgba(28, 27, 27, .04);
  --rf-shadow-ambient: 0 4px 24px rgba(28, 27, 27, .05);
  --rf-shadow-raised: 0 8px 24px rgba(28, 27, 27, .10);
  --rf-shadow-cta: 0 10px 24px rgba(249, 115, 22, .30);
  font-family: var(--rf-font-sans);
}

.ra-approved-asset[data-ra-mounted="loading"] {
  min-height: 96px;
}

.ra-approved-asset[data-ra-mounted="loading"]::before {
  display: block;
  width: 62px;
  height: 4px;
  margin: 46px auto;
  border-radius: 999px;
  background: var(--ra-line);
  content: "";
  animation: ra-loading-pulse 1.4s ease-in-out infinite;
}

@keyframes ra-loading-pulse { 50% { opacity: .35; } }

.ra-approved-asset > * { max-width: 100%; }
.ra-approved-asset img { max-width: 100%; }
.ra-approved-asset.ra-motion-paused *,
.ra-approved-asset.ra-motion-paused::before,
.ra-approved-asset.ra-motion-paused::after,
.ra-motion-paused.ra-approved-asset * { animation-play-state: paused !important; }

.ra-approved-asset--4u {
  width: 100%;
  overflow: hidden;
  border-radius: 22px;
}

.ra-approved-asset--3d {
  display: flex;
  justify-content: center;
}

.ra-approved-asset--3d > * { width: min(100%, 330px) !important; }
.ra-approved-asset--3b > * {
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
}
.ra-approved-asset--4j,
.ra-approved-asset--4k,
.ra-approved-asset--4l { display: grid; place-items: center; }
.ra-approved-asset--4j > *,
.ra-approved-asset--4k > *,
.ra-approved-asset--4l > *,
.ra-approved-asset--4r > *,
.ra-approved-asset--4s > *,
.ra-approved-asset--4t > * { width: min(100%, 340px) !important; }
.ra-approved-asset--2c > *,
.ra-approved-asset--2e > *,
.ra-approved-asset--1h > *,
.ra-approved-asset--1k > *,
.ra-approved-asset--1l > *,
.ra-approved-asset--2g > *,
.ra-approved-asset--2h > *,
.ra-approved-asset--2i > *,
.ra-approved-asset--2j > *,
.ra-approved-asset--2k > *,
.ra-approved-asset--1b > *,
.ra-approved-asset--1d > *,
.ra-approved-asset--2f > * {
  width: 100% !important;
  box-sizing: border-box;
}

.ra-approved-asset--2f {
  display: grid;
  min-height: 150px;
  place-items: center;
}

.ra-approved-asset--2f > * { max-width: 180px; }
.ra-approved-asset--1n { display: inline-grid; min-height: 44px; place-items: center; }

/* ReportAmigo wordmark + approved 3B identity -------------------------- */
.ra-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ra-ink);
  text-decoration: none;
}

.ra-brand-lockup .rf-wordmark,
.rf-brand .rf-wordmark {
  padding-right: 0;
  font-weight: 850;
  letter-spacing: -.045em;
}

.ra-brand-lockup .rf-wordmark::after,
.rf-brand .rf-wordmark::after {
  display: none;
}

.ra-brand-mark,
[data-ra-asset="avatar"] {
  display: inline-grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
}

.ra-brand-mark img,
[data-ra-asset="avatar"] img {
  display: block;
  width: 100%;
  height: 100%;
}

/* The approved 3B identity is authored on a 96px Fun Kit stage. Keep the
   source artwork intact while fitting that stage to compact production marks. */
.ra-approved-asset--3b {
  overflow: hidden;
  border-radius: 28%;
}

.ra-approved-asset--3b > :first-child {
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
}

.ra-approved-asset--3b > :first-child > svg {
  width: 79.1667% !important;
  height: 47.9167% !important;
}

/* 1B — stamps, arrows, radio/extension-cord dividers ------------------- */
.ra-stamp {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px 1px;
  border: 2px solid currentColor;
  border-radius: 9px;
  color: var(--ra-blue);
  background: rgba(252, 249, 248, .92);
  font-family: "Caveat", "Bradley Hand", cursive;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.2;
  transform: rotate(-3deg);
}

.ra-stamp--orange { color: var(--ra-orange); transform: rotate(2deg); }
.ra-stamp--green { color: var(--ra-green); transform: rotate(-2deg); }

.ra-radio-divider,
.ra-cord-divider {
  position: relative;
  width: min(100%, 760px);
  height: 44px;
  margin: 10px auto;
}

.ra-radio-divider::before,
.ra-radio-divider::after {
  position: absolute;
  top: 50%;
  width: calc(50% - 28px);
  border-top: 2px dashed rgba(249, 115, 22, .55);
  content: "";
}

.ra-radio-divider::before { left: 0; }
.ra-radio-divider::after { right: 0; }

.ra-radio-divider span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border: 3px solid var(--ra-orange);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.ra-radio-divider span::before,
.ra-radio-divider span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 2px solid var(--ra-orange);
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  content: "";
  transform: translate(-50%, -50%);
}

.ra-radio-divider span::before { width: 26px; height: 26px; }
.ra-radio-divider span::after { width: 40px; height: 40px; opacity: .48; }

.ra-cord-divider {
  height: 62px;
  overflow: visible;
}

.ra-cord-divider svg { width: 100%; height: 100%; overflow: visible; }
.ra-cord-divider path {
  fill: none;
  stroke: var(--ra-orange);
  stroke-dasharray: 10 8;
  stroke-linecap: round;
  stroke-width: 5;
}

/* 2C — detailed live walkie -------------------------------------------- */
.ra-walkie {
  position: relative;
  display: inline-block;
  width: 92px;
  height: 146px;
  color: var(--ra-ink);
  filter: drop-shadow(0 16px 12px rgba(83, 44, 17, .16));
}

.ra-walkie svg { width: 100%; height: 100%; overflow: visible; }
.ra-walkie__body { transform-origin: 50% 80%; animation: ra-walkie-wiggle 1.9s var(--ra-ease) infinite alternate; }
.ra-walkie__wave { animation: ra-wave 1.6s ease-out infinite; transform-origin: center; }
.ra-walkie__wave:nth-child(2) { animation-delay: .24s; }
.ra-walkie__bars rect { transform-origin: center; animation: ra-bars .8s ease-in-out infinite alternate; }
.ra-walkie__bars rect:nth-child(2) { animation-delay: -.16s; }
.ra-walkie__bars rect:nth-child(3) { animation-delay: -.32s; }
.ra-walkie__bars rect:nth-child(4) { animation-delay: -.48s; }

/* 2E — long report-building wait --------------------------------------- */
.ra-mariachi {
  display: grid;
  min-width: 210px;
  grid-template-columns: repeat(3, 64px);
  gap: 8px;
  align-items: end;
  justify-content: center;
}

.ra-mariachi svg { width: 64px; height: 102px; overflow: visible; }
.ra-mariachi__player { transform-origin: 50% 100%; animation: ra-mariachi-bob 1.4s var(--ra-ease) infinite alternate; }
.ra-mariachi__player:nth-child(2) { animation-delay: -.46s; }
.ra-mariachi__player:nth-child(3) { animation-delay: -.88s; }
.ra-mariachi__note { animation: ra-note-float 1.8s ease-out infinite; }
.ra-mariachi__note:nth-child(2) { animation-delay: -.8s; }

/* 1H quick wait --------------------------------------------------------- */
.ra-sombrero-loader {
  display: grid;
  width: 92px;
  height: 74px;
  place-items: center;
  margin: 28px auto;
}

.ra-sombrero-loader svg {
  width: 76px;
  height: 54px;
  overflow: visible;
  animation: ra-sombrero-float 1.25s var(--ra-ease) infinite alternate;
}

.ra-sombrero-loader::after {
  width: 58px;
  height: 8px;
  border-radius: 50%;
  background: rgba(26, 26, 26, .18);
  content: "";
  animation: ra-shadow-pulse 1.25s var(--ra-ease) infinite alternate;
}

.ra-hardhat { display: block; width: 112px; height: 84px; filter: drop-shadow(0 14px 18px rgba(59, 42, 29, .13)); }
.ra-hub-mark { width: 112px; margin-bottom: 12px; }

/* 1N compact statuses --------------------------------------------------- */
.ra-status-chip {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  border-radius: 999px;
  color: var(--ra-orange);
  background: #fff7f0;
  font-size: 11px;
  font-weight: 800;
}

.ra-status-chip--listening { color: var(--ra-blue); background: #eef5ff; }
.ra-status-chip--typing { color: var(--ra-sage); background: #eff4ec; }
.ra-status-chip__dots { display: inline-flex; gap: 3px; }
.ra-status-chip__dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  animation: ra-dot 900ms ease-in-out infinite alternate;
}
.ra-status-chip__dots i:nth-child(2) { animation-delay: 150ms; }
.ra-status-chip__dots i:nth-child(3) { animation-delay: 300ms; }

/* 1K + 2H photo save ---------------------------------------------------- */
.ra-photo-save {
  position: relative;
  width: 196px;
  height: 126px;
  margin: 0 auto;
}

.ra-photo-save__card {
  position: absolute;
  top: 12px;
  left: 50%;
  width: 78px;
  height: 98px;
  padding: 6px 6px 18px;
  border-radius: 7px;
  background: white;
  box-shadow: 0 14px 30px rgba(56, 40, 27, .16);
  transform: translateX(-50%) rotate(var(--ra-rotate));
  animation: ra-photo-drop 3.9s var(--ra-ease) infinite;
}

.ra-photo-save__card:nth-child(1) { --ra-rotate: -10deg; margin-left: -45px; animation-delay: -2.6s; }
.ra-photo-save__card:nth-child(2) { --ra-rotate: 1deg; animation-delay: -1.3s; }
.ra-photo-save__card:nth-child(3) { --ra-rotate: 10deg; margin-left: 45px; }
.ra-photo-save__card img { width: 100%; height: 100%; border-radius: 4px; object-fit: cover; }
.ra-photo-save__check {
  position: absolute;
  right: 8px;
  bottom: 4px;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 3px solid white;
  border-radius: 50%;
  color: white;
  background: var(--ra-green);
  font-size: 17px;
  font-weight: 900;
  opacity: 0;
  transform: scale(.5);
}
.ra-photo-save__check svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }

.ra-photo-save.is-complete .ra-photo-save__card { animation: ra-photo-finish .58s var(--ra-ease) forwards; }
.ra-photo-save.is-complete .ra-photo-save__card:nth-child(2) { animation-delay: 70ms; }
.ra-photo-save.is-complete .ra-photo-save__card:nth-child(3) { animation-delay: 140ms; }
.ra-photo-save.is-complete .ra-photo-save__check { animation: ra-pop .55s .32s var(--ra-ease) forwards; }

/* Translation: three mediums, one report -------------------------------- */
/* Items share one grid cell; a 12.6s CSS cycle (4.2s each) crossfades
   text -> voice note -> walkthrough video. Pure CSS so the off-screen
   ra-motion-paused gate freezes it for free. */
.ra-translation {
  position: relative;
  display: grid;
  width: min(100%, 500px);
}

.ra-translation__item {
  display: grid;
  grid-area: 1 / 1;
  grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  opacity: 0;
  animation: ra-tr-cycle 12.6s cubic-bezier(.23, 1, .32, 1) infinite;
}

.ra-translation__item--voice { animation-delay: -8.4s; }
.ra-translation__item--video { animation-delay: -4.2s; }

.ra-translation__bubble {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  align-items: flex-start;
  min-height: 96px;
  padding: 13px 15px 14px;
  border-radius: 16px 16px 5px;
  color: var(--ra-ink);
  background: #fff1e6;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
  box-shadow: 0 12px 28px rgba(62, 41, 26, .09);
}

.ra-translation__bubble--report { border-radius: 16px 16px 16px 5px; background: #e8f1fd; }

.ra-translation__label {
  font-family: "Caveat", cursive;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  color: var(--ra-sage);
}

.ra-translation__label--report { color: var(--ra-orange); }

.ra-translation__arrow { color: var(--ra-blue); text-align: center; }
.ra-translation__arrow svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; }

.ra-translation__voice { display: flex; width: 100%; align-items: center; gap: 9px; }
.ra-translation__wave { display: flex; gap: 3px; align-items: center; }
.ra-translation__wave i { width: 3px; height: var(--h); border-radius: 3px; background: var(--ra-orange); animation: ra-bars .8s ease-in-out infinite alternate; }
.ra-translation__wave i:nth-child(2n) { animation-delay: -.24s; }

.ra-translation__play {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ra-orange);
  color: #fff;
}

.ra-translation__play svg { width: 13px; height: 13px; fill: currentColor; margin-left: 2px; }

.ra-translation__chip {
  margin-left: auto;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--ra-sage);
  font-variant-numeric: tabular-nums;
}

/* Walkthrough-video message: thumbnail card with play badge + sweeping progress */
.ra-translation__bubble--video { min-height: 96px; padding: 0; overflow: hidden; }

.ra-translation__bubble--video img {
  display: block;
  width: 100%;
  height: 108px;
  object-fit: cover;
}

.ra-translation__label--overlay {
  position: absolute;
  top: 8px;
  left: 9px;
  padding: 3px 9px 5px;
  border-radius: 999px;
  color: #fff;
  background: rgba(26, 26, 26, .55);
  font-size: 15px;
}

.ra-translation__play--video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  background: rgba(252, 249, 248, .94);
  color: var(--ra-orange);
  box-shadow: 0 4px 14px rgba(26, 26, 26, .28);
}

.ra-translation__chip--video {
  position: absolute;
  right: 8px;
  bottom: 9px;
  margin: 0;
  padding: 2px 7px 3px;
  border-radius: 999px;
  color: #fff;
  background: rgba(26, 26, 26, .55);
}

.ra-translation__progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  background: rgba(252, 249, 248, .4);
}

.ra-translation__progress i {
  display: block;
  height: 100%;
  background: var(--ra-orange);
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: ra-tr-progress 12.6s linear infinite;
  animation-delay: -4.2s; /* keep in phase with __item--video */
}

@keyframes ra-tr-cycle {
  0% { opacity: 0; transform: translateY(8px) scale(.96); }
  3%, 31% { opacity: 1; transform: none; }
  34.6%, 100% { opacity: 0; transform: translateY(-6px) scale(.98); }
}

@keyframes ra-tr-progress {
  0%, 3% { transform: scaleX(0); }
  31% { transform: scaleX(1); }
  31.1%, 100% { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ra-translation__item,
  .ra-translation__progress i { animation: none !important; }
  .ra-translation__item--text { opacity: 1; transform: none; }
  .ra-translation__item--voice,
  .ra-translation__item--video { display: none; }
}

/* 2G send and 2H save transformations ---------------------------------- */
.ra-signal-state {
  position: relative;
  display: inline-grid;
  min-width: 150px;
  min-height: 68px;
  place-items: center;
}

.ra-signal-state__sending,
.ra-signal-state__sent {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 800;
  transition: opacity .28s ease, transform .28s var(--ra-ease), filter .28s ease;
}

.ra-signal-state__sent { opacity: 0; filter: blur(5px); transform: translateY(8px) scale(.88); }
.ra-signal-state.is-sent .ra-signal-state__sending { opacity: 0; filter: blur(5px); transform: translateY(-8px) scale(.88); }
.ra-signal-state.is-sent .ra-signal-state__sent { opacity: 1; filter: none; transform: none; }
.ra-signal-state svg { width: 34px; height: 34px; overflow: visible; }

/* 2I / 2J / 2K rich SMS-link artwork ----------------------------------- */
.ra-rich-card {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--ra-line);
  border-radius: 15px;
  color: var(--ra-ink);
  background: white;
  box-shadow: 0 12px 30px rgba(52, 38, 27, .1);
}

.ra-bunting {
  display: grid;
  height: 20px;
  grid-template-columns: repeat(8, 1fr);
  align-items: start;
  padding: 0 8px;
  border-top: 2px solid rgba(70, 56, 44, .14);
}

.ra-bunting i { width: 14px; height: 12px; margin: -1px auto 0; clip-path: polygon(0 0, 100% 0, 50% 100%); background: var(--flag); }
.ra-rich-card__body { padding: 13px 14px 15px; }
.ra-rich-card__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ra-rich-card__title strong { font-size: 14px; line-height: 1.25; }
.ra-rich-card__title small { color: var(--ra-sage); font-size: 10px; font-weight: 750; }

.ra-route {
  position: relative;
  display: grid;
  height: 96px;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  margin-top: 8px;
}

.ra-route::before {
  position: absolute;
  top: 50%;
  right: 15%;
  left: 15%;
  border-top: 3px dashed var(--ra-orange);
  content: "";
}

.ra-route::after {
  position: absolute;
  top: calc(50% - 5px);
  left: 15%;
  width: 10px;
  height: 10px;
  border: 2px solid white;
  border-radius: 50%;
  background: var(--ra-orange);
  box-shadow: 0 2px 8px rgba(249, 115, 22, .3);
  content: "";
  animation: ra-route-signal 2s var(--ra-ease) infinite;
}

.ra-route__node { position: relative; z-index: 1; display: grid; place-items: center; }
.ra-route__node .ra-walkie { width: 48px; height: 76px; filter: none; }
.ra-route__node svg { width: 54px; height: 64px; overflow: visible; }
.ra-route__node:nth-child(2) svg { width: 62px; }
.ra-route__node:nth-child(3) svg { width: 68px; }

.ra-rich-photos { display: flex; gap: 7px; margin: 12px -4px 4px; overflow: hidden; }
.ra-rich-photos figure { position: relative; width: 32%; min-width: 0; margin: 0; transform: rotate(var(--r)); }
.ra-rich-photos figure::before { position: absolute; top: -4px; left: 50%; width: 24px; height: 9px; background: rgba(246, 224, 177, .76); content: ""; transform: translateX(-50%) rotate(-2deg); }
.ra-rich-photos img { display: block; width: 100%; aspect-ratio: 1.1; border-radius: 7px; object-fit: cover; }
.ra-tiny-pinata { position: absolute; right: 8px; bottom: 3px; width: 54px; height: 38px; transform: rotate(-4deg); }
.ra-rich-card__ready { display: grid; grid-template-columns: 54px 1fr 58px; gap: 10px; align-items: center; margin-top: 12px; }
.ra-rich-card__ready svg { width: 62px; height: 62px; overflow: visible; }
.ra-rich-card__ready svg:last-child { width: 58px; height: 54px; }
.ra-rich-card__ready strong { display: block; font-size: 16px; }
.ra-rich-card__ready span { color: var(--ra-sage); font-size: 11px; }

/* 3D finished report screen -------------------------------------------- */
.ra-finished-report {
  color: var(--ra-ink);
  background: white;
}
.ra-finished-report__head { display: grid; grid-template-columns: 46px 1fr; gap: 11px; align-items: center; }
.ra-finished-report__head svg { width: 46px; height: 46px; overflow: visible; }
.ra-finished-report__head strong,
.ra-finished-report__head small { display: block; }
.ra-finished-report__head strong { font-size: 15px; }
.ra-finished-report__head small { margin-top: 2px; color: var(--ra-sage); font-size: 10px; }
.ra-finished-report__timeline { position: relative; display: grid; gap: 10px; margin-top: 16px; padding-left: 24px; }
.ra-finished-report__timeline::before { position: absolute; top: 7px; bottom: 7px; left: 9px; width: 2px; background: #cfe3ca; content: ""; }
.ra-finished-report__item { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: start; }
.ra-finished-report__item::before { position: absolute; top: 7px; left: -21px; width: 9px; height: 9px; border: 3px solid var(--ra-green); border-radius: 50%; background: white; content: ""; }
.ra-finished-report__item > span:first-child { color: var(--ra-sage); font-size: 10px; font-weight: 800; }
.ra-finished-report__item strong { display: block; font-size: 11px; line-height: 1.3; }
.ra-finished-report__item small { display: block; margin-top: 2px; color: #6b645e; font-size: 9px; line-height: 1.3; }
.ra-finished-report__photos { display: flex; gap: 6px; margin-top: 7px; }
.ra-finished-report__photos img { width: 31%; aspect-ratio: 1.15; border-radius: 6px; object-fit: cover; }
.ra-finished-report__pdf { display: flex; min-height: 36px; align-items: center; justify-content: center; margin-top: 14px; border: 1px solid var(--ra-orange); border-radius: 10px; color: var(--ra-orange); font-size: 11px; font-weight: 800; }
.ra-skeleton-detail { overflow: hidden; }
.ra-skeleton-detail::after { display: block; width: 86%; height: 7px; margin-top: 4px; border-radius: 5px; background: #eee9e4; content: ""; transform: scaleX(.7); transform-origin: left center; animation: ra-skeleton 1.4s ease-in-out infinite alternate; }

/* 2F reward ladder ------------------------------------------------------ */
.ra-celebration {
  --ra-size: 62px;
  --ra-celebration-duration: 2s;
  position: relative;
  display: inline-grid;
  width: calc(var(--ra-size) + 54px);
  min-height: calc(var(--ra-size) + 44px);
  place-items: center;
  isolation: isolate;
}

.ra-celebration[data-size="s"] { --ra-size: 28px; --ra-celebration-duration: 1.2s; }
.ra-celebration[data-size="m"] { --ra-size: 44px; --ra-celebration-duration: 1.6s; }
.ra-celebration[data-size="l"] { --ra-size: 62px; --ra-celebration-duration: 2s; }
.ra-celebration[data-size="xl"] { --ra-size: 82px; --ra-celebration-duration: 2.4s; }
.ra-celebration__ring { position: absolute; width: var(--ra-size); height: var(--ra-size); border: 3px solid color-mix(in srgb, var(--ra-green) 34%, transparent); border-radius: 50%; opacity: 0; }
.ra-celebration__check { position: relative; z-index: 2; display: grid; width: var(--ra-size); height: var(--ra-size); place-items: center; border-radius: 50%; color: white; background: var(--ra-green); box-shadow: 0 10px 22px rgba(52, 160, 94, .26); opacity: 0; transform: scale(.42) rotate(-14deg); }
.ra-celebration__check svg { width: 50%; height: 50%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.ra-celebration__ray,
.ra-celebration__confetti { position: absolute; top: 50%; left: 50%; opacity: 0; }
.ra-celebration__ray { width: 4px; height: calc(var(--ra-size) * .27); border-radius: 4px; background: var(--c); transform: rotate(var(--r)) translateY(calc(var(--ra-size) * -.78)); transform-origin: 2px calc(var(--ra-size) * .78); }
.ra-celebration__confetti { width: 7px; height: 7px; border-radius: 2px; background: var(--c); transform: translate(-50%, -50%); }
.ra-celebration.is-playing .ra-celebration__check { animation: ra-celebrate-pop var(--ra-celebration-duration) var(--ra-ease) both; }
.ra-celebration.is-playing .ra-celebration__ring { animation: ra-celebrate-ring var(--ra-celebration-duration) ease-out both; }
.ra-celebration.is-playing .ra-celebration__ray { animation: ra-celebrate-ray var(--ra-celebration-duration) ease-out both; }
.ra-celebration.is-playing .ra-celebration__confetti { animation: ra-confetti var(--ra-celebration-duration) var(--ra-ease) both; }
.ra-celebration__label { position: absolute; top: calc(50% + var(--ra-size) * .62); color: var(--ra-sage); font-size: 10px; font-weight: 800; white-space: nowrap; opacity: 0; transform: translateY(6px); }
.ra-celebration.is-playing .ra-celebration__label { animation: ra-label var(--ra-celebration-duration) var(--ra-ease) both; }

/* Page-level integration ------------------------------------------------ */
.ra-loader-stage { display: grid; min-height: 180px; place-items: center; text-align: center; }
.ra-loader-stage p { margin-top: 12px; color: var(--ra-sage); font-size: 12px; font-weight: 750; }
.ra-success-stage { display: grid; place-items: center; min-height: 150px; text-align: center; }
.ra-inline-reward { min-height: 40px; }
.ra-setup-preview { width: min(100%, 420px); margin: 0 auto 8px; }
.ra-setup-preview > * { max-width: 100%; }
.ra-schedule-signal { display: grid; min-height: 86px; place-items: center; margin: -8px 0 12px; }
.ra-report-journey { display: grid; min-height: 178px; place-items: center; margin: 16px 0 2px; padding: 16px; border-radius: 16px; background: #fff5e9; text-align: center; box-shadow: 0 16px 40px rgba(66, 43, 26, .09); }
.ra-report-journey.rf-hidden { display: none; }
.ra-report-journey .ra-mariachi { transform: scale(.82); margin-bottom: -8px; }
.ra-report-journey > strong { color: var(--ra-sage); font-size: 13px; }
.ra-magic-relay { display: grid; max-width: 380px; min-height: 150px; grid-template-columns: 100px 1fr 112px; align-items: center; margin-bottom: 16px; }
.ra-magic-relay .ra-walkie { width: 76px; height: 120px; }
.ra-magic-relay__line,
.ra-crew-relay__line { position: relative; height: 3px; overflow: hidden; background-image: linear-gradient(90deg, var(--ra-orange) 50%, transparent 50%); background-size: 15px 3px; }
.ra-magic-relay__line::after,
.ra-crew-relay__line::after { position: absolute; top: -4px; left: -10px; width: 11px; height: 11px; border-radius: 50%; background: var(--ra-orange); box-shadow: 0 2px 8px rgba(249, 115, 22, .28); content: ""; animation: ra-relay-signal 1.8s var(--ra-ease) infinite; }
.ra-save-contact { display: block; margin-top: 16px; text-align: center; }
.ra-save-contact.rf-hidden { display: none; }
.ra-consent-link { max-width: 360px; margin: 0 auto 22px; }
.reportamigo-mode { font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.ra-capture-brand { justify-content: center; margin: 0 auto; font-size: 23px; font-weight: 850; }
.ra-capture-review-visual { grid-template-columns: minmax(0, 1fr) 118px; gap: 4px; align-items: center; margin: -4px 0 12px; }
.ra-capture-review-visual .ra-photo-save { transform: scale(.76); transform-origin: left center; margin: 0; }
.ra-camera-reward { position: fixed; top: max(76px, env(safe-area-inset-top)); right: 12px; z-index: 20; width: 100px; height: 100px; place-items: center; border-radius: 18px; background: rgba(252, 249, 248, .88); box-shadow: 0 20px 48px rgba(0, 0, 0, .2); backdrop-filter: blur(8px); }
.ra-upload-fun { place-items: center; gap: 4px; margin: -8px 0 8px; }
.ra-upload-fun .ra-mariachi { transform: scale(.78); margin: -10px 0 -8px; }
.ra-upload-fun .ra-translation { margin: 8px auto 2px; transform: scale(.84); }
.ra-upload-fun .ra-translation__bubble { min-height: 60px; padding: 10px 12px; font-size: 13px; }
.ra-upload-fun .ra-translation__bubble--video { padding: 0; }
.ra-upload-fun .ra-translation__bubble--video img { height: 76px; }
.ra-upload-fun .ra-translation__label { font-size: 15px; }
.reportamigo-mode #screen-done .card.waiting { overflow: visible; }
.reportamigo-mode #screen-done .ra-success-stage { min-height: 132px; margin-top: -12px; }
@media (max-width: 520px) {
  .ra-report-journey {
    width: 100%; min-height: 144px; margin-block: 16px 4px; padding: 10px 12px;
    overflow: hidden; border: 1px solid rgba(249, 115, 22, .12);
    background: linear-gradient(180deg, #fffaf4 0%, #fff3e5 100%);
    box-shadow: 0 12px 30px rgba(66, 43, 26, .07);
  }
  .ra-report-journey .ra-approved-asset--2f,
  .ra-report-journey .ra-approved-asset--2f > * { max-width: 100%; }
  .reportamigo-mode #screen-done .card.waiting { padding-top: 16px; }
  .reportamigo-mode #screen-done .ra-success-stage {
    width: 100%; min-height: 116px; margin: -4px 0 2px; overflow: hidden;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ra-report-journey *,
  .reportamigo-mode #screen-done .ra-success-stage * { animation: none !important; }
}
.reportamigo-report { position: relative; font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.ra-public-report-brand { display: inline-flex; align-items: center; gap: 9px; }
.ra-public-report-brand img { width: 34px; height: 34px; }
.ra-public-report-brand .company { text-transform: none; letter-spacing: -.025em; font-size: 18px; font-weight: 850; }
.ra-public-report-reward { position: absolute; top: 0; right: 0; width: 136px; height: 126px; }
.reportamigo-report .header { position: relative; padding-right: 138px; }
@media (max-width: 520px) {
  .ra-public-report-reward { position: relative; top: auto; right: auto; width: 124px; height: 102px; margin: -10px auto -4px; }
  .reportamigo-report .header { padding-right: 0; }
}
.ra-dashboard-heading { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 22px; align-items: center; margin-bottom: 24px; }
.ra-dashboard-heading > * { min-width: 0; }
.ra-dashboard-heading h1 { margin-bottom: 8px; }
.ra-dashboard-heading .rf-app-lead { margin-bottom: 0; }
.rf-empty [data-ra-asset="hardhat"] { display: grid; place-items: center; margin-bottom: 12px; }
.rf-empty > strong,
.rf-empty > span { display: block; }
.ra-kudos-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.rf-pill:has(.ra-kudos-icon) { display: inline-flex; align-items: center; gap: 6px; }

.rf-radio-relay > [data-ra-asset="walkie"] { display: grid; place-items: center; }
.rf-radio-relay .ra-walkie { width: 78px; height: 122px; }
.rf-demo-state > .ra-stamp { position: absolute; top: 13px; left: 16px; z-index: 4; }
.rf-demo-state [data-ra-asset="report"] { margin-top: 31px; }
.rf-demo-state .ra-finished-report__timeline { gap: 8px; margin-top: 12px; }
.rf-demo-state .ra-finished-report__pdf { margin-top: 10px; }
.rf-demo-state .ra-finished-report__photos img { aspect-ratio: 1.3; }
.rf-capture-status { display: flex; justify-content: center; margin: 9px 0 3px; }

.rf-report-processing:has(.ra-mariachi) {
  min-width: 270px;
  flex-direction: column;
  gap: 4px;
  padding: 15px 16px 12px;
  border-radius: 18px;
}

.rf-report-processing .ra-mariachi { min-width: 196px; transform: scale(.72); transform-origin: center; margin: -17px 0 -12px; }

.ra-crew-relay { display: grid; min-height: 300px; grid-template-columns: 108px 1fr minmax(300px, 1.6fr); gap: 18px; align-items: center; }

/* Landing composition: one authored link → capture → report story. */
.rf-landing-page .rf-landing-hero {
  display: block;
  padding-top: clamp(42px, 6vw, 78px);
  padding-bottom: clamp(64px, 8vw, 96px);
}

.rf-landing-page .rf-hero-message {
  padding-top: 0;
  text-align: center;
}

.rf-landing-page .rf-hero-message h1 {
  max-width: 1100px;
  margin-right: auto;
  margin-left: auto;
  font-size: clamp(58px, 7vw, 94px);
}

.rf-landing-page .rf-hero-message > p {
  margin-right: auto;
  margin-left: auto;
}

.rf-landing-page .rf-product-theater {
  width: min(100%, 760px);
  min-height: 900px;
  margin: clamp(38px, 5vw, 62px) auto 0;
}

.rf-relay-controls { width: min(100%, 560px); }
.rf-relay-controls button { min-height: 42px; padding: 8px 11px; box-shadow: none; }
.rf-relay-controls button[aria-selected="true"] { box-shadow: 0 10px 24px rgba(178, 73, 4, .17); }
.rf-demo-toggle { top: 3px; right: calc(50% - 336px); }

.ra-hero-constellation {
  position: relative;
  z-index: 5;
  width: min(100%, 700px);
  height: 166px;
  margin: 8px auto -21px;
  pointer-events: none;
}

.ra-hero-constellation__cord {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ra-hero-constellation__cord path {
  fill: none;
  stroke: var(--ra-orange);
  stroke-dasharray: 9 10;
  stroke-linecap: round;
  stroke-width: 4;
  animation: ra-constellation-flow 6s linear infinite;
}

.ra-hero-constellation__cord circle { fill: var(--ra-orange); }
.ra-hero-constellation__walkie,
.ra-hero-constellation__tower,
.ra-hero-constellation__house { position: absolute; z-index: 2; }
.ra-hero-constellation__walkie { bottom: 3px; left: 3%; transform: rotate(-7deg); }
.ra-hero-constellation__walkie .ra-walkie { width: 82px; height: 130px; }
.ra-hero-constellation__tower { top: 11px; left: 50%; width: 76px; height: 88px; color: var(--ra-blue); transform: translateX(-50%); }
.ra-hero-constellation__house { right: 2%; bottom: 1px; width: 92px; height: 82px; color: var(--ra-sage); transform: rotate(3deg); }
.ra-hero-constellation__wave { animation: ra-tower-breathe 1.8s ease-in-out infinite alternate; transform-origin: 50% 50%; }

.rf-phone-stage { margin-top: 0; }
.rf-phone-orbits { top: -22px; width: 470px; opacity: .78; }
.rf-orbit-node { display: none; }

.ra-owner-story { padding: clamp(64px, 9vw, 118px) 0; overflow: hidden; }
.ra-owner-story__layout { display: grid; grid-template-columns: minmax(340px, .68fr) minmax(600px, 1.32fr); gap: clamp(34px, 6vw, 78px); align-items: center; }
.ra-owner-story header h2 { max-width: 10ch; margin: 0; font-size: clamp(46px, 5vw, 72px); line-height: .98; }
.ra-owner-story header p { margin: 20px 0 0; color: var(--ra-sage); font-size: 18px; font-weight: 750; }

.ra-owner-preview {
  display: grid;
  min-height: 520px;
  grid-template-columns: 190px minmax(0, 1fr);
  overflow: hidden;
  border-radius: 20px;
  background: white;
  box-shadow: 0 28px 70px rgba(59, 41, 27, .12);
}

.ra-owner-preview aside { display: flex; flex-direction: column; gap: 8px; padding: 22px 14px; background: #fff5e9; }
.ra-owner-preview__brand { display: flex; align-items: center; gap: 8px; margin: 0 7px 22px; font-size: 13px; font-weight: 850; }
.ra-owner-preview__brand i { width: 23px; height: 23px; border-radius: 8px; background: var(--ra-orange); }
.ra-owner-preview aside button { display: block; width: 100%; padding: 12px; border: 0; border-radius: 11px; color: var(--ra-ink); background: transparent; font: inherit; text-align: left; }
.ra-owner-preview aside button.is-active { background: white; box-shadow: 0 10px 24px rgba(63, 43, 29, .08); }
.ra-owner-preview aside b,
.ra-owner-preview aside small { display: block; }
.ra-owner-preview aside b { font-size: 11px; }
.ra-owner-preview aside small { margin-top: 3px; color: #7b7066; font-size: 9px; }

.ra-owner-preview__main { min-width: 0; padding: clamp(22px, 4vw, 42px); }
.ra-owner-preview__top { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--ra-line); }
.ra-owner-preview__top strong,
.ra-owner-preview__top span { display: block; }
.ra-owner-preview__top strong { font-size: 22px; }
.ra-owner-preview__top div span { margin-top: 3px; color: #776d64; font-size: 10px; }
.ra-owner-preview__status { padding: 7px 10px; border-radius: 999px; color: #395d35; background: #e8f2e5; font-size: 9px; font-weight: 850; }

.ra-owner-preview__post { margin-top: 24px; padding: 19px; border-radius: 15px; background: #fcfaf7; }
.ra-owner-preview__post > header { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; }
.ra-owner-preview__post > header > span { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 13px; color: white; background: var(--ra-blue); font-size: 12px; font-weight: 850; }
.ra-owner-preview__post header strong,
.ra-owner-preview__post header small { display: block; }
.ra-owner-preview__post header strong { font-size: 13px; }
.ra-owner-preview__post header small { margin-top: 2px; color: #796f66; font-size: 9px; }
.ra-owner-preview__post > p { max-width: 58ch; margin: 18px 0; color: #4c4641; font-size: 13px; line-height: 1.5; }
.ra-owner-preview__photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ra-owner-preview__photos img { width: 100%; aspect-ratio: 1.3; border-radius: 10px; object-fit: cover; }
.ra-owner-preview__audio { display: grid; grid-template-columns: 36px 1fr 34px; gap: 9px; align-items: center; margin-top: 17px; }
.ra-owner-preview__audio button { display: grid; width: 36px; height: 36px; place-items: center; padding: 0; border: 0; border-radius: 50%; color: white; background: var(--ra-blue); }
.ra-owner-preview__audio button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linejoin: round; stroke-width: 2; }
.ra-owner-preview__audio > span { display: flex; height: 26px; align-items: center; gap: 4px; }
.ra-owner-preview__audio i { width: 3px; height: 30%; border-radius: 4px; background: var(--ra-blue); animation: ra-bars .8s ease-in-out infinite alternate; }
.ra-owner-preview__audio i:nth-child(2n) { height: 74%; animation-delay: -.2s; }
.ra-owner-preview__audio i:nth-child(3n) { height: 48%; animation-delay: -.4s; }
.ra-owner-preview__audio time { color: #71685f; font-size: 9px; }

@keyframes ra-constellation-flow { to { stroke-dashoffset: -76; } }
@keyframes ra-tower-breathe { to { opacity: .35; transform: scale(.92); } }

.rf-post[data-new="true"] { animation: ra-new-post .7s var(--ra-ease) both; }
.rf-post[data-status="processing"] .rf-post-state { color: var(--ra-orange); }
.rf-post[data-status="ready"] .rf-post-state { color: var(--ra-green); }
.rf-kudos { display: inline-flex; align-items: center; gap: 6px; transition: color .18s ease, background-color .18s ease, transform .18s var(--ra-ease); }
.rf-kudos[data-active="true"] { color: white; background: var(--ra-green); transform: scale(1.03); }
.rf-kudos[data-celebrate="true"] { animation: ra-kudos .22s var(--ra-ease); }
.ra-motion-paused,
.ra-motion-paused *,
.ra-motion-paused::before,
.ra-motion-paused::after { animation-play-state: paused !important; }

@keyframes ra-walkie-wiggle { to { transform: translateY(-4px) rotate(3deg); } }
@keyframes ra-wave { 0%, 18% { opacity: 0; transform: scale(.76); } 48% { opacity: 1; } 100% { opacity: 0; transform: scale(1.22); } }
@keyframes ra-bars { to { transform: scaleY(.46); opacity: .56; } }
@keyframes ra-mariachi-bob { to { transform: translateY(-5px) rotate(2deg); } }
@keyframes ra-note-float { 0% { opacity: 0; transform: translateY(8px); } 28% { opacity: 1; } 100% { opacity: 0; transform: translateY(-24px) rotate(8deg); } }
@keyframes ra-sombrero-float { to { transform: translateY(-7px) rotate(3deg); } }
@keyframes ra-shadow-pulse { to { opacity: .5; transform: scaleX(.76); } }
@keyframes ra-dot { to { transform: translateY(-3px); opacity: .38; } }
@keyframes ra-photo-drop { 0%, 14% { opacity: 0; transform: translate(-50%, -24px) rotate(var(--ra-rotate)); } 34%, 82% { opacity: 1; transform: translate(-50%, 0) rotate(var(--ra-rotate)); } 100% { opacity: 0; transform: translate(-50%, 9px) rotate(var(--ra-rotate)); } }
@keyframes ra-pop { to { opacity: 1; transform: scale(1); } }
@keyframes ra-photo-finish { to { opacity: 0; transform: translate(-50%, 2px) rotate(0) scale(.55); } }
@keyframes ra-route-signal { 0% { opacity: 0; transform: translateX(0) scale(.7); } 12%, 84% { opacity: 1; } 100% { opacity: 0; transform: translateX(210px) scale(1); } }
@keyframes ra-relay-signal { 0% { opacity: 0; transform: translateX(0) scale(.7); } 14%, 82% { opacity: 1; } 100% { opacity: 0; transform: translateX(430px) scale(1); } }
@keyframes ra-skeleton { to { opacity: .42; transform: scaleX(1); } }
@keyframes ra-celebrate-pop { 0%, 6% { opacity: 0; transform: scale(.42) rotate(-14deg); } 18%, 78% { opacity: 1; transform: scale(1) rotate(0); } 100% { opacity: 1; } }
@keyframes ra-celebrate-ring { 8% { opacity: .68; transform: scale(.7); } 38%, 100% { opacity: 0; transform: scale(1.65); } }
@keyframes ra-celebrate-ray { 0%, 8% { opacity: 0; } 18%, 35% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes ra-confetti { 0%, 12% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 24% { opacity: 1; } 62%, 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--rot)); } }
@keyframes ra-label { 0%, 20% { opacity: 0; transform: translateY(6px); } 35%, 82%, 100% { opacity: 1; transform: none; } }
@keyframes ra-new-post { from { opacity: 0; filter: blur(5px); transform: translateY(20px) scale(.98); } }
@keyframes ra-kudos { 42% { transform: scale(1.12) rotate(-2deg); } }

@media (max-width: 520px) {
  .ra-translation__item { grid-template-columns: 1fr; gap: 6px; }
  .ra-translation__arrow { transform: rotate(90deg); }
  .ra-mariachi { transform: scale(.86); }
}

@media (max-width: 899px) {
  .ra-crew-relay { grid-template-columns: 86px 1fr; }
  .ra-crew-relay [data-ra-asset="translation"] { grid-column: 1 / -1; }
  .ra-owner-story__layout { grid-template-columns: 1fr; }
  .ra-owner-story header { text-align: center; }
  .ra-owner-story header h2 { max-width: 12ch; margin-inline: auto; }
}

@media (max-width: 640px) {
  .ra-crew-relay { min-height: 0; }
  .ra-crew-relay .ra-walkie { width: 70px; height: 112px; }
  .rf-report-processing:has(.ra-mariachi) { min-width: 238px; }
  .rf-landing-page .rf-product-theater { min-height: 790px; margin-top: 26px; }
  .rf-demo-toggle { top: 49px; right: 0; }
  .ra-hero-constellation { width: calc(100% + 14px); height: 132px; margin-top: 0; margin-left: -7px; }
  .ra-hero-constellation__walkie { left: 0; }
  .ra-hero-constellation__walkie .ra-walkie { width: 62px; height: 100px; }
  .ra-hero-constellation__tower { top: 8px; width: 58px; height: 70px; }
  .ra-hero-constellation__house { right: 0; width: 70px; height: 64px; }
  .rf-phone-orbits { width: 390px; }
  .ra-owner-story { padding-top: 60px; }
  .ra-owner-story header h2 { font-size: 48px; }
  .ra-owner-preview { display: block; width: calc(100% + 28px); min-height: 0; margin-left: -14px; border-radius: 18px; }
  .ra-owner-preview aside { display: flex; flex-direction: row; gap: 7px; padding: 14px; overflow-x: auto; }
  .ra-owner-preview__brand { display: none; }
  .ra-owner-preview aside button { min-width: 134px; flex: 0 0 auto; }
  .ra-owner-preview__main { padding: 22px 16px; }
  .ra-owner-preview__photos { display: flex; width: calc(100% + 32px); gap: 7px; margin-left: -16px; padding: 0 16px; overflow-x: auto; scroll-snap-type: x mandatory; }
  .ra-owner-preview__photos img { width: 76%; flex: 0 0 76%; scroll-snap-align: start; }
}

@media (max-width: 370px) {
  .ra-dashboard-heading { grid-template-columns: 1fr; gap: 8px; }
  .ra-dashboard-heading .ra-hardhat { width: 74px; height: auto; }
  .ra-brand-lockup { gap: 7px; }
  .ra-brand-mark,
  [data-ra-asset="avatar"] { width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .ra-walkie__body,
  .ra-walkie__wave,
  .ra-walkie__bars rect,
  .ra-mariachi__player,
  .ra-mariachi__note,
  .ra-sombrero-loader svg,
  .ra-sombrero-loader::after,
  .ra-status-chip__dots i,
  .ra-photo-save__card,
  .ra-translation__wave i,
  .ra-route::after,
  .ra-cord-divider path,
  .ra-magic-relay__line::after,
  .ra-crew-relay__line::after,
  .ra-skeleton-detail::after,
  .ra-hero-constellation__cord path,
  .ra-hero-constellation__wave,
  .ra-owner-preview__audio i,
  .ra-celebration *,
  .rf-post[data-new="true"],
  .rf-kudos[data-celebrate="true"] {
    animation: none !important;
  }
  .ra-celebration .ra-celebration__check,
  .ra-celebration .ra-celebration__label { opacity: 1; transform: none; }

  .ra-photo-save__card {
    opacity: 1;
    transform: translateX(-50%) rotate(var(--ra-rotate));
  }
  .ra-photo-save.is-complete .ra-photo-save__check {
    opacity: 1;
    transform: none;
  }
}

/* ReportAmigo landing: production use of Claude Fun Kit ---------------- */
.ra-claude-landing {
  background: var(--ra-cream);
  color: var(--ra-ink);
}

.ra-claude-landing .rf-landing-nav {
  min-height: 136px;
  gap: clamp(24px, 4vw, 56px);
  border-bottom: 0;
}

.ra-claude-landing .ra-brand-lockup {
  min-width: 0;
  flex: 0 1 450px;
}

.ra-landing-brand-logo {
  display: block;
  width: min(100%, 450px);
  height: auto;
  object-fit: contain;
}

.ra-claude-landing .rf-landing-nav__end {
  gap: 12px;
  flex: 0 0 auto;
}

.ra-claude-landing .rf-language-chip,
.ra-claude-landing .ra-nav-login {
  min-height: 48px;
  font-size: 15px;
}

.ra-claude-landing .rf-language-chip {
  gap: 9px;
  padding: 12px 17px;
}

.ra-claude-landing .rf-language-chip svg {
  width: 18px;
  height: 18px;
}

.ra-claude-landing .ra-nav-login {
  padding: 12px 20px;
}

.ra-claude-landing .ra-nav-login:focus-visible {
  outline: 3px solid rgba(249, 115, 22, .42);
  outline-offset: 3px;
}

.ra-landing-hero {
  padding-top: 0;
  padding-bottom: clamp(68px, 9vw, 118px);
  overflow-x: clip;
}

/* Full-bleed party banner: the kit-injected svg is a fixed 216x34 bunting that
   cannot span the viewport, so we hide it and tile a seamless copy of the same
   bunting (cord ends meet at y=4) as a repeating background on a breakout strip.
   .ra-claude-landing prefix outranks the later .ra-approved-asset--4i width rule. */
.ra-claude-landing .ra-hero-picado {
  width: 100vw;
  height: 34px;
  margin: 0 calc(50% - 50vw) clamp(16px, 3vw, 30px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='34' viewBox='0 0 192 34'%3E%3Cpath d='M0,4Q96,14,192,4' stroke='%23EA6C0A' stroke-width='2.5' fill='none' opacity='.75'/%3E%3Cpath d='M10,7L22,7L16,20Z' fill='%23F5B31C'/%3E%3Cpath d='M42,9L54,9L48,22Z' fill='%235C6B54'/%3E%3Cpath d='M74,10L86,10L80,23Z' fill='%23ED6A98'/%3E%3Cpath d='M106,10L118,10L112,23Z' fill='%232E7CE6'/%3E%3Cpath d='M138,9L150,9L144,22Z' fill='%23F97316'/%3E%3Cpath d='M170,7L182,7L176,20Z' fill='%23F5B31C'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center top;
  background-size: 192px 34px;
}

/* !important is load-bearing: reportamigo-fun.js clones the kit stage verbatim and
   the cloned node carries an inline `style="…display:grid…"`, which outranks any
   author rule. Without it the fixed 216px svg renders ON TOP of the tiled strip
   and you get a doubled, misaligned clump of flags in the middle of the banner. */
.ra-claude-landing .ra-hero-picado > * { display: none !important; }

.ra-hero-grid {
  display: grid;
  gap: clamp(26px, 4vw, 40px);
}

.ra-hero-grid > * { min-width: 0; }

.ra-landing-hero__copy {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.ra-hero-title {
  margin: 0;
}

.ra-hero-title__adios {
  display: block;
  color: var(--ra-orange);
  font-family: "Caveat", cursive;
  font-size: clamp(88px, 15vw, 148px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: .84;
  transform: rotate(-2deg);
}

.ra-typewriter {
  display: block;
  min-height: 1.08em;
  margin-top: .04em;
  color: var(--ra-ink);
  font-family: "Caveat", cursive;
  font-size: clamp(44px, 7vw, 64px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.04;
}

.ra-typewriter::after {
  display: none;
  width: .07em;
  height: .74em;
  margin-left: .07em;
  border-radius: 2px;
  background: var(--ra-orange);
  content: "";
}

.ra-typewriter.is-typing::after {
  display: inline-block;
  vertical-align: -.04em;
  animation: ra-caret-blink 1.06s steps(1) infinite;
}

@keyframes ra-caret-blink { 50% { opacity: 0; } }

.ra-hero-sub {
  max-width: 34ch;
  margin: 20px auto 0;
  color: #655d57;
  font-size: clamp(19px, 2.1vw, 24px);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.45;
}

.ra-landing-primary {
  min-width: min(100%, 430px);
  margin-top: 26px;
  font-size: clamp(18px, 2vw, 23px);
  box-shadow: 0 16px 34px rgba(249, 115, 22, .24);
}

.ra-hero-note {
  margin: 13px 0 0;
  color: #655d57;
  font-size: 15px;
  font-weight: 650;
}

@media (min-width: 900px) {
  .ra-hero-grid {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    align-items: center;
  }
  .ra-landing-hero__copy { max-width: none; margin: 0; text-align: left; }
  .ra-hero-sub { margin-inline: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ra-typewriter::after,
  .ra-typewriter.is-typing::after { display: none; animation: none; }
}

.ra-landing-carousel {
  position: relative;
  width: min(100%, 1280px);
  min-height: min(600px, 92vw);
  margin: 0 auto;
}

.ra-carousel-pause {
  position: absolute;
  z-index: 5;
  right: 18px;
  bottom: 18px;
  min-height: 40px;
  padding: 8px 13px;
  border: 1px solid var(--ra-line);
  border-radius: 999px;
  color: #655d57;
  background: rgba(255, 255, 255, .94);
  font: 750 12px/1 var(--rf-font-sans);
  box-shadow: 0 8px 22px rgba(64, 46, 34, .10);
  cursor: pointer;
  transition: transform 160ms cubic-bezier(.23, 1, .32, 1), box-shadow 160ms cubic-bezier(.23, 1, .32, 1);
}

.ra-carousel-pause:active { transform: scale(.97); }
.ra-landing-primary:active { transform: scale(.97); }

.ra-carousel-pause:focus-visible { outline: 3px solid rgba(46, 124, 230, .32); outline-offset: 3px; }
.ra-landing-carousel.is-user-paused .ra-approved-asset *,
.ra-landing-carousel.is-user-paused .ra-approved-asset { animation-play-state: paused !important; }

.ra-doodad-break {
  display: grid;
  min-height: 270px;
  place-items: center;
  padding-block: 22px 54px;
}
.ra-doodad-break > [data-ra-asset] { width: min(100%, 520px); }

/* Not-Delivered gag ---------------------------------------------------- */
.ra-gag-section {
  padding: clamp(72px, 9vw, 128px) 0;
  background: #fff5e8;
}

/* Source order is caption -> figure. Mobile stacks in that order; desktop
   turns the same two children into caption-left / figure-right (S3). */
.ra-gag-grid {
  display: grid;
  gap: clamp(24px, 4vw, 38px);
  justify-items: center;
}

.ra-gag-grid > * { min-width: 0; }

.ra-imessage {
  position: relative;
  width: min(100%, 380px);
  margin: 0 auto;
  padding: 20px 18px 16px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 26px 80px rgba(76, 55, 37, .12);
  transform: rotate(-2deg);
}

.ra-imessage::before,
.ra-imessage::after {
  position: absolute;
  top: -13px;
  width: 76px;
  height: 26px;
  border-radius: 3px;
  background: rgba(245, 179, 28, .4);
  content: "";
}

.ra-imessage::before { left: 24px; transform: rotate(-7deg); }
.ra-imessage::after { right: 24px; transform: rotate(6deg); }

.ra-imessage__tag {
  margin: 0 0 12px;
  color: var(--ra-sage);
  font-family: "Caveat", cursive;
  font-size: 24px;
  font-weight: 700;
  text-align: left;
  transform: rotate(-1deg);
}

.ra-imessage__thread {
  display: grid;
  justify-items: end;
  gap: 6px;
}

.ra-imessage__bubble {
  max-width: 84%;
  margin: 0;
  border-radius: 18px 18px 4px 18px;
  color: #fff;
  background: var(--ra-blue);
}

.ra-imessage__bubble--text {
  padding: 9px 14px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.ra-imessage__bubble--photo {
  width: 74%;
  padding: 4px;
  overflow: hidden;
}

.ra-imessage__bubble--photo img {
  display: block;
  width: 100%;
  height: 118px;
  border-radius: 14px 14px 2px 14px;
  object-fit: cover;
}

.ra-imessage__bubble--failed { opacity: .55; }

.ra-imessage__meta {
  margin: 0 4px 4px 0;
  color: #746b65;
  font-size: 12px;
  font-weight: 650;
}

.ra-imessage__meta--failed {
  margin-bottom: 0;
  color: var(--danger, #a74035);
  font-weight: 800;
}

.ra-gag-caption {
  max-width: 15ch;
  /* Caption now leads the section, so no top gap to the figure above. */
  margin: 0 auto;
  color: var(--ra-ink);
  font-family: "Caveat", cursive;
  font-size: clamp(40px, 6vw, 60px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.02;
  text-align: center;
  text-wrap: balance;
  transform: rotate(-1.4deg);
}

/* Desktop: caption left, phone right and much larger than the mobile card.
   Same treatment (tape, rotation, shadow, blue bubbles) — just scaled up. */
@media (min-width: 900px) {
  .ra-gag-grid {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(34px, 5vw, 76px);
    align-items: center;
    justify-items: stretch;
  }

  /* margin-inline MUST be reset on both children. Their base rules carry
     `margin: 0 auto`, and auto inline margins absorb every scrap of free space
     in the grid area BEFORE justify-self is consulted — so without this the
     start/end alignment below is a silent no-op and both children just centre. */
  .ra-gag-caption {
    max-width: 13ch;
    margin-inline: 0;
    justify-self: start;
    font-size: clamp(56px, 6.6vw, 92px);
    line-height: .98;
    text-align: left;
    transform: rotate(-1.8deg);
  }

  .ra-imessage {
    width: 100%;
    max-width: 620px;
    margin-inline: 0;
    justify-self: end;
    padding: 30px 26px 24px;
    border-radius: 30px;
  }

  .ra-imessage::before,
  .ra-imessage::after {
    top: -17px;
    width: 118px;
    height: 34px;
  }

  .ra-imessage::before { left: 40px; }
  .ra-imessage::after { right: 40px; }

  .ra-imessage__tag { margin-bottom: 16px; font-size: 31px; }
  .ra-imessage__thread { gap: 9px; }
  .ra-imessage__bubble { border-radius: 24px 24px 6px 24px; }
  .ra-imessage__bubble--text { padding: 13px 21px; font-size: 20px; }
  .ra-imessage__bubble--photo { width: 76%; padding: 6px; }
  .ra-imessage__bubble--photo img { height: 250px; border-radius: 19px 19px 3px 19px; }
  .ra-imessage__meta { margin: 2px 6px 6px 0; font-size: 15px; }
}

.ra-handwritten {
  display: block;
  margin-top: 34px;
  color: var(--ra-orange);
  font-family: "Caveat", cursive;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 700;
  transform: rotate(-2deg);
}

/* Report-assembly slot -------------------------------------------------- */
.ra-assembly-section {
  padding: clamp(72px, 9vw, 124px) 0;
  background: #f8f5f2;
}

.ra-assembly {
  display: grid;
  justify-items: center;
  text-align: center;
}

/* Grid items default to min-width:auto — kit stages carry fixed inline widths,
   which would floor the track and defeat the scaler below ~380px. */
.ra-assembly > * { min-width: 0; }

.ra-assembly__script {
  margin: 0;
  color: var(--ra-orange);
  font-family: "Caveat", cursive;
  font-size: clamp(46px, 6vw, 70px);
  font-weight: 700;
  letter-spacing: 0;
  transform: rotate(-2deg);
}

.ra-assembly__line {
  margin: 10px 0 0;
  color: #655d57;
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 600;
}

.ra-assembly__stage {
  width: min(100%, 720px);
  margin-top: clamp(26px, 4vw, 40px);
}

.ra-claude-landing .rf-final-call { background: var(--ra-orange); }

/* Kit carousel phones: the contact header's left side (back chevron + unread
   badge) is wider than its 24px right spacer, so the flex:1 centered contact
   column drifts right of the notch. Nudge it back by half the difference.
   Kit styles are inline, hence the attribute hooks + !important. */
[data-ra-asset="carousel"] [style*="padding:32px 14px 8px"] > span[style*="flex-direction:column"] {
  transform: translateX(-18px) !important;
}

@media (max-width: 760px) {
  .ra-claude-landing .rf-landing-nav {
    display: grid;
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 20px 18px 18px;
  }
  .ra-claude-landing .ra-brand-lockup {
    width: min(88vw, 330px);
    justify-self: center;
  }
  .ra-claude-landing .ra-landing-brand-logo { width: 100%; }
  .ra-claude-landing .rf-landing-nav__end {
    display: flex;
    width: 100%;
    gap: 10px;
    justify-content: center;
  }
  .ra-claude-landing .rf-language-chip {
    display: inline-flex;
    min-width: 0;
    flex: 0 1 auto;
    justify-content: center;
    padding: 11px 14px;
    font-size: 14px;
    white-space: nowrap;
  }
  .ra-claude-landing .ra-nav-login {
    min-height: 48px;
    padding: 11px 18px;
    font-size: 14px;
    white-space: nowrap;
  }
  .ra-landing-hero { padding: 0 0 64px; }
  .ra-typewriter { min-height: 1.08em; }
  .ra-hero-sub { margin-top: 12px; font-size: 19px; }
  .ra-landing-primary { width: 100%; min-width: 0; margin-top: 22px; }
  .ra-landing-carousel { width: 100%; }
  .ra-doodad-break { min-height: 238px; padding: 14px 18px 44px; overflow: hidden; }
  .ra-doodad-break > .ra-approved-asset--1b { width: 520px; transform: scale(.72); transform-origin: center; }
  .ra-gag-section { padding-block: 74px; }
  .ra-imessage { transform: rotate(-1.4deg); }
  .ra-assembly-section { padding-block: 70px; }
  .ra-handwritten { margin-top: 22px; }
}

@media (max-width: 320px) {
  .ra-claude-landing .rf-language-chip svg { display: none; }
  .ra-claude-landing .rf-language-chip {
    padding-inline: 10px;
    font-size: 13px;
  }
  .ra-claude-landing .ra-nav-login {
    padding-inline: 14px;
    font-size: 13px;
  }
}

/* Keep the longest typewriter phrase ("1,000 unsorted photos.") on ONE line all
   the way down to 320px so the subhead never bounces: below 386px viewport the
   44px Caveat line would wrap, so scale the font with the viewport instead. */
@media (max-width: 385px) {
  .ra-typewriter { font-size: min(44px, calc(12.3vw - 4px)); }
}

/* Desktop 900-1149px: the left hero column is too narrow for the longest phrase
   at 64px, so it wraps to two lines mid-typing; reserve the second line to stop
   the subhead from bouncing. At >=1150px it fits on one line again. */
@media (min-width: 900px) and (max-width: 1149px) {
  .ra-typewriter { min-height: 2.14em; }
}

@media (prefers-reduced-motion: reduce) {
  .ra-approved-asset *,
  .ra-approved-asset::before { animation-play-state: paused !important; }
  .ra-approved-asset--4u .ra-carousel-phone {
    opacity: 0 !important;
    transform: translateX(660px) scale(.92) !important;
  }
  .ra-approved-asset--4u .ra-carousel-phone--first {
    opacity: 1 !important;
    transform: translateX(0) scale(1) !important;
  }
  /* Chain stages 6b/6c author their thread bubbles at opacity:0 in the 0% keyframe,
     so a blanket play-state pause leaves the phone permanently empty. Dropping the
     animation entirely lets each bubble fall back to its own inline resting state
     (rotate(...) at full opacity; the fly-in element keeps its inline opacity:0). */
  .ra-approved-asset--6b [data-anim],
  .ra-approved-asset--6c [data-anim] { animation: none !important; }
}

/* New kit tiles: per-asset sizing (4r link / 4m capture / 4t summary / 4i picado) */
.ra-approved-asset--4r,
.ra-approved-asset--4m,
.ra-approved-asset--4t,
.ra-approved-asset--4i {
  display: grid;
  width: 100%;
  justify-items: center;
  overflow: hidden;
}

.ra-approved-asset--4r > *,
.ra-approved-asset--4m > *,
.ra-approved-asset--4t > *,
.ra-approved-asset--4i > * {
  max-width: 100%;
  box-sizing: border-box;
}

.ra-approved-asset--4r > * > *,
.ra-approved-asset--4t > * > * { max-width: 100%; }
.ra-approved-asset--4i > * { background: transparent !important; height: auto !important; }

/* Cord-chain "how it works" ------------------------------------------- */
.ra-chain {
  padding: clamp(64px, 9vw, 122px) 0 clamp(72px, 10vw, 132px);
}

.ra-chain .rf-shell {
  display: grid;
  justify-items: center;
  row-gap: 6px;
}

.ra-chain .rf-shell > * { min-width: 0; }

.ra-chain__card {
  position: relative;
  width: min(100%, 620px);
  padding: clamp(26px, 4vw, 40px) clamp(20px, 3.6vw, 42px) clamp(28px, 4vw, 44px);
  border-radius: 26px;
  background: #fff;
  box-shadow: var(--rf-shadow-card);
}

.ra-chain__card--1 { transform: rotate(-1.6deg); }
.ra-chain__card--2 { transform: rotate(1.4deg); }
.ra-chain__card--3 { transform: rotate(-1.2deg); }

.ra-chain__stamp {
  position: absolute;
  top: -18px;
  left: -10px;
  z-index: 2;
  display: inline-block;
  padding: 1px 14px;
  border: 3px solid currentColor;
  border-radius: 9px;
  background: #FCF9F8;
  font-family: "Caveat", cursive;
  font-size: clamp(22px, 2.6vw, 27px);
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.25;
  white-space: nowrap;
}

.ra-chain__stamp--text { color: var(--chk, #34A05E); transform: rotate(-6deg); }
.ra-chain__stamp--amigo { color: #2E7CE6; transform: rotate(4deg); }
.ra-chain__stamp--report { color: #5C6B54; transform: rotate(-4deg); }

.ra-chain__title {
  margin: 12px 0 0;
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 850;
  letter-spacing: -.03em;
  line-height: 1.04;
  text-wrap: balance;
}

.ra-chain__body {
  margin: 10px 0 0;
  color: #655d57;
  font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 500;
  line-height: 1.45;
}

.ra-chain__art {
  display: grid;
  place-items: center;
  margin-top: clamp(18px, 3vw, 26px);
}

.ra-chain__art > * { max-width: 100%; }

/* Cord divider: strip the cloned stage's cream box, let the SVG breathe */
.ra-chain__cord {
  display: grid;
  width: min(100%, 620px);
  min-height: 90px;
  place-items: center;
}

.ra-chain__cord > * {
  display: grid;
  width: 100%;
  place-items: center;
  background: transparent !important;
}

.ra-chain__cord svg {
  display: block;
  width: min(100%, 340px);
  height: auto;
}

.ra-chain__cord:nth-of-type(even) svg { transform: scaleX(-1); }

@media (min-width: 641px) {
  .ra-chain__cord:nth-of-type(odd) svg { transform: translateX(12%); }
  .ra-chain__cord:nth-of-type(even) svg { transform: translateX(-12%) scaleX(-1); }
}

/* Desktop: cards 3-across, the cord bridging horizontally between them.
   Cord cells are narrow; the SVG overflows on purpose and tucks UNDER the
   white cards (cord z 0, cards z 1) so the chain reads continuous. */
@media (min-width: 900px) {
  .ra-chain .rf-shell {
    /* Wider than the page's ~1100px content cap on purpose (8b): the step-1/2
       art upscales via installStageScaling (maxScale 1.5) and needs card room
       to be legible on desktop; slim cord columns give the cards the width. */
    width: min(100%, 1560px);
    grid-template-columns: minmax(0, 1fr) clamp(30px, 3vw, 48px) minmax(0, 1fr) clamp(30px, 3vw, 48px) minmax(0, 1fr);
    align-items: start;
    row-gap: 0;
  }
  .ra-chain__card {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-inline: clamp(22px, 1.6vw, 34px);
  }
  /* Art bleeds to the card edge instead of floating inside the text padding:
     cancel the exact inline padding so installStageScaling gets the full card
     width to scale into (maxScale 1.5 caps it), then a hair more for overlap. */
  .ra-chain__card [data-ra-asset] {
    margin-inline: calc(-6px - clamp(22px, 1.6vw, 34px));
  }
  /* Descending staircase. Cards are free to take their natural height (the old
     min-heights forced ~150px of dead white space into card 1); the stair now
     comes from margin-top on the grid items, which keeps every card in normal
     flow so nothing overlaps and the row still sizes itself. */
  .ra-chain__card:nth-of-type(1) { margin-top: 0; }
  .ra-chain__card:nth-of-type(2) { margin-top: clamp(52px, 5.4vw, 86px); }
  .ra-chain__card:nth-of-type(3) { margin-top: clamp(104px, 10.8vw, 172px); }
  .ra-chain__cord {
    z-index: 0;
    width: auto;
    min-height: 0;
    align-self: start;
  }
  /* Cord offsets are measured from the top of the grid row (= top of card 1).
     Card tops after the stair are 0 / ~52-86 / ~104-172, and every card runs
     well past 400px tall, so these two offsets land inside BOTH neighbours at
     every desktop width. Cord 2 sits lower than cord 1 to follow the stair. */
  .ra-chain__cord:nth-of-type(odd) { margin-top: clamp(196px, 15vw, 268px); }
  .ra-chain__cord:nth-of-type(even) { margin-top: clamp(252px, 19vw, 342px); }
  .ra-chain__cord > * { overflow: visible !important; }
  .ra-chain__cord svg,
  .ra-chain__cord:nth-of-type(odd) svg { width: 170px; max-width: none; transform: none; }
  .ra-chain__cord:nth-of-type(even) svg { width: 170px; max-width: none; transform: scaleX(-1); }
}

@media (max-width: 640px) {
  .ra-chain { padding: 64px 0 76px; }
  .ra-chain__card { padding-inline: 18px; }
  .ra-chain__stamp { top: -16px; left: -6px; }
}

/* Round 6 explainer tiles ---------------------------------------------- */
/* 6b/6c stages are JS-scaled with a top-left transform origin; the art
   node must be a plain block so the stage's auto margins pin it flush left
   while shrinking (a centering grid would offset the painted box). */
.ra-chain__art[data-ra-asset="text-card"],
.ra-chain__art[data-ra-asset="amigo-card"] {
  display: block;
  /* Kit stamp/fly keyframes park elements at scale(2.2) or translate(-340px)
     while opacity:0 — invisible, but they still extend scrollable overflow.
     Clip the slot; visible frames never leave the stage. */
  overflow-x: clip;
}

/* report-assembly mounts both renditions; the page breakpoint shows one:
   6d (364px phone strip) below 900px, 6a (720px wide pan) at and above. */
.ra-assembly-mode--wide { display: none; }

@media (min-width: 900px) {
  .ra-assembly-mode--wide { display: block; }
  .ra-assembly-mode--narrow { display: none; }
}

/* Fiesta final call ---------------------------------------------------- */
.ra-fiesta {
  position: relative;
  overflow: hidden;
  padding: clamp(104px, 15vw, 176px) 0 clamp(88px, 12vw, 150px);
  background: #F97316;
  text-align: center;
}

.ra-fiesta__picado {
  position: absolute;
  top: -2px;
  left: 50%;
  width: max(100%, 1080px);
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
}

.ra-fiesta__art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ra-fiesta__scene {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: max(100%, 640px);
  height: auto;
  transform: translateX(-50%);
}

.ra-fiesta__copy {
  position: relative;
  z-index: 2;
  max-width: 780px;
  margin: 0 auto;
}

.ra-fiesta__copy h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(44px, 7vw, 88px);
  font-weight: 850;
  letter-spacing: -.04em;
  line-height: .96;
  text-wrap: balance;
}

/* Reassurance line, and it now sits UNDER the CTA rather than between the headline
   and the CTA. Position does the demotion, so the type only steps down one notch and
   tightens to the button it belongs to. It deliberately stays above 18.66px at every
   viewport: white-on-#F97316 is ~2.6:1, which the whole band already lives with as a
   brand decision, and shrinking this line past the large-text threshold would move it
   into the stricter 4.5:1 bucket for no design gain. */
.ra-fiesta__copy > p {
  margin: 14px 0 0;
  color: #FFF4ED;
  font-size: clamp(19px, 1.9vw, 21px);
  font-weight: 650;
}

.ra-fiesta__accent {
  display: inline-block;
  font-family: "Caveat", cursive;
  font-weight: 700;
  letter-spacing: 0;
  transform: rotate(-2deg);
}

.ra-fiesta__cta {
  min-width: min(100%, 360px);
  /* Absorbs the gap the price line used to hold off the headline, now that the button
     follows the h2 directly. */
  margin-top: clamp(34px, 5vw, 56px);
  color: #1A1A1A;
  background: #FCF9F8;
  font-size: clamp(18px, 2vw, 22px);
  box-shadow: 0 16px 34px rgba(93, 38, 5, .22);
  transition: transform 160ms cubic-bezier(.23, 1, .32, 1), box-shadow 160ms cubic-bezier(.23, 1, .32, 1), background-color 160ms cubic-bezier(.23, 1, .32, 1);
}

.ra-fiesta__cta:active { transform: scale(.97); }

@media (hover: hover) and (pointer: fine) {
  .ra-fiesta__cta:hover { color: #1A1A1A; background: #fff; transform: translateY(-1px); }
}

@media (max-width: 639px) {
  .ra-fiesta__walkie { display: none; }
}

@media (max-width: 640px) {
  .ra-fiesta { padding: 96px 0 78px; }
  .ra-fiesta__copy { padding-inline: 18px; }
  .ra-fiesta__cta { width: 100%; min-width: 0; }
}

/* JobTread integration loop ------------------------------------------- */
/* The wide composition follows kit 2e; below 700px the same semantic
   section changes art direction to the stacked 2f loop. The rail carries
   only two moving pulses, half a lap apart, so the motion explains the
   handoff instead of becoming background decoration. */
.ra-jobtread-section {
  padding: clamp(70px, 9vw, 118px) 0 clamp(58px, 8vw, 96px);
  background: var(--ra-cream);
}

.ra-jobtread-loop {
  display: grid;
  gap: clamp(28px, 4vw, 44px);
  overflow: hidden;
}

.ra-jobtread-loop__copy {
  grid-row: 2;
  text-align: center;
}

.ra-jobtread-loop__copy h2 {
  max-width: 18ch;
  margin: 0 auto;
  color: var(--ra-ink);
  font-family: var(--rf-font-sans);
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  text-wrap: balance;
}

.ra-jobtread-loop__copy p {
  max-width: 57ch;
  margin: 14px auto 0;
  color: #655d57;
  font-family: var(--rf-font-sans);
  font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 600;
  line-height: 1.5;
  text-wrap: pretty;
}

.ra-jobtread-loop__diagram {
  position: relative;
  grid-row: 1;
  width: 100%;
  aspect-ratio: 1000 / 300;
}

.ra-jobtread-loop__rail {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ra-jobtread-loop__rail--stack { display: none; }

.ra-jobtread-loop__path,
.ra-jobtread-loop__arrow {
  fill: none;
  stroke: var(--ra-orange);
  stroke-width: 1.5;
}

.ra-jobtread-loop__arrow {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ra-jobtread-loop__pulse {
  fill: var(--ra-orange-hover);
  offset-rotate: 0deg;
  animation: ra-jobtread-lap 8s linear infinite;
}

.ra-jobtread-loop__rail--wide .ra-jobtread-loop__pulse {
  offset-path: path("M220 150 V72 Q220 44 248 44 H752 Q780 44 780 72 V228 Q780 256 752 256 H248 Q220 256 220 228 Z");
}

.ra-jobtread-loop__pulse--two { animation-delay: -4s; }

.ra-jobtread-loop.ra-motion-paused .ra-jobtread-loop__pulse {
  animation-play-state: paused;
}

@keyframes ra-jobtread-lap {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}

.ra-jobtread-loop__label,
.ra-jobtread-loop__detail {
  font-family: var(--rf-font-sans);
  fill: var(--ra-sage);
}

.ra-jobtread-loop__label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.ra-jobtread-loop__detail {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .5px;
}

.ra-jobtread-loop__node {
  position: absolute;
  top: 50%;
  display: flex;
  width: 28%;
  min-width: 0;
  height: 104px;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 18px);
  border: 1px solid var(--ra-line);
  border-radius: 24px;
  background: #fff;
  transform: translateY(-50%);
}

.ra-jobtread-loop__node--amigo { left: 8%; }
.ra-jobtread-loop__node--jobtread { right: 8%; }

.ra-jobtread-loop__walkie {
  width: clamp(29px, 3.8vw, 38px);
  height: auto;
  flex: 0 0 auto;
}

.ra-jobtread-loop__node--amigo span {
  display: inline-flex;
  color: var(--ra-ink);
  font-family: var(--rf-font-sans);
  font-size: clamp(19px, 2.65vw, 32px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  white-space: nowrap;
}

.ra-jobtread-loop__node--amigo b { font: inherit; }
.ra-jobtread-loop__node--amigo b:last-child { color: var(--ra-orange); }

.ra-jobtread-loop__node--jobtread img {
  display: block;
  width: min(78%, 220px);
  height: auto;
}

@media (max-width: 700px) {
  .ra-jobtread-section { padding-block: 72px 62px; }
  .ra-jobtread-loop { gap: 24px; }
  .ra-jobtread-loop__copy { grid-row: 1; }
  .ra-jobtread-loop__copy h2 { max-width: 12ch; font-size: clamp(31px, 9vw, 40px); }
  .ra-jobtread-loop__copy p { max-width: 32ch; font-size: 16px; }
  .ra-jobtread-loop__diagram {
    grid-row: 2;
    width: min(100%, 390px);
    aspect-ratio: 390 / 420;
    margin-inline: auto;
  }
  .ra-jobtread-loop__rail--wide { display: none; }
  .ra-jobtread-loop__rail--stack { display: block; }
  .ra-jobtread-loop__rail--stack .ra-jobtread-loop__pulse {
    offset-path: path("M195 94 H80 Q40 94 40 134 V286 Q40 326 80 326 H310 Q350 326 350 286 V134 Q350 94 310 94 Z");
  }
  .ra-jobtread-loop__label { font-size: 10.5px; letter-spacing: 1.1px; }
  .ra-jobtread-loop__detail { font-size: 11px; letter-spacing: 0; }
  .ra-jobtread-loop__node {
    left: 19%;
    right: auto;
    width: 62%;
    height: 19%;
    border-radius: clamp(14px, 5vw, 20px);
    transform: translateY(-50%);
  }
  .ra-jobtread-loop__node--amigo { top: 22.4%; }
  .ra-jobtread-loop__node--jobtread { top: 77.6%; }
  .ra-jobtread-loop__walkie { width: clamp(22px, 7.7vw, 30px); }
  .ra-jobtread-loop__node--amigo span { font-size: clamp(17px, 6.2vw, 24px); }
  .ra-jobtread-loop__node--jobtread img { width: min(79%, 190px); }
}

@media (prefers-reduced-motion: reduce) {
  .ra-jobtread-loop__pulse { animation: none; }
  .ra-jobtread-loop__pulse--one { offset-distance: 46%; }
  .ra-jobtread-loop__pulse--two { offset-distance: 96%; }
}

/* Page gutter for blocks that sit OUTSIDE a .rf-shell wrapper ----------- */
/* Two round-8 blocks are not wrapped in .rf-shell: the .ra-walkthrough <section>
   and the bare .ra-cta-jump-row divs. They therefore have to reproduce the shell
   themselves, or their left/right edges drift inboard of every other section and
   the page loses its vertical alignment. Mirrors, exactly:
     reporting-funnel.css:82    .rf-shell                 padding: 0 20px
     reporting-funnel.css:930   @media (max-width:760px)  padding: 0 17px
     reporting-funnel.css:1113  .rf-landing-page .rf-shell  width: min(100%, 1180px)
     reporting-funnel.css:2665  @media (max-width:640px)  padding-inline: 16px
   Only padding-INLINE lives here; each block keeps its own padding-block. */
.ra-walkthrough,
.ra-cta-jump-row {
  width: min(100%, 1180px);
  margin-inline: auto;
  padding-inline: 20px;
}

@media (max-width: 760px) {
  .ra-walkthrough,
  .ra-cta-jump-row { padding-inline: 17px; }
}

@media (max-width: 640px) {
  .ra-walkthrough,
  .ra-cta-jump-row { padding-inline: 16px; }
}

/* Repeat CTA jumps (S7) ------------------------------------------------- */
/* Outlined, not filled — still one rung below the solid orange primaries, but in
   the brand orange rather than sage. These sit between long content sections where
   a sage pill read as a footnote and got skipped; orange is the only colour on the
   page the eye already associates with "this is the thing to press".
   Width + inline gutter come from the shared shell rule above; this only owns its
   flex layout and vertical rhythm. */
.ra-cta-jump-row {
  display: flex;
  justify-content: center;
  padding-block: clamp(4px, 1vw, 12px) clamp(56px, 7vw, 88px);
}

/* These two are <a href="#start">, not <button>. Every property the UA sheet would
   otherwise hand an anchor is therefore declared here, so the pill renders the same
   whichever element carries it:
     text-decoration  UA gives a:-webkit-any-link `underline`. Nothing else in this
                      rule overrides it, so without this line the label ships with a
                      sage underline through the middle of the pill. The only true
                      round-8 regression of the swap.
     color            UA `a:link`/`a:visited` would tint it link-blue / visited-purple.
                      Author origin beats UA origin, so the explicit sage below already
                      covers both states — kept explicit rather than inherited.
     display          anchors are inline; buttons are inline-block. Declared inline-flex.
     box-sizing       buttons get border-box from the UA sheet, anchors do NOT. Load-
                      bearing at <=640px, where width:100% + 52px min-height + 13px
                      padding + 2px border would render an ~82px pill that overruns its
                      row. Covered by the global `* { box-sizing: border-box }` at
                      reporting-funnel.css:44, which loads first — see the <link> order
                      at reporting-landing.html:12-13. Not restated here so there is one
                      source of truth for it; if that global ever goes, this rule needs
                      its own declaration.
     user-select      form controls are unselectable in the UA sheet; anchor text is
                      not, so a drag across the label would select it mid-press.
   :active scale(.97) and the reduced-motion `transition: none` below are element-
   agnostic — both match on the class, and :active applies to anchors. */
.ra-cta-jump {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 13px clamp(22px, 3vw, 34px);
  border: 2px solid var(--ra-orange, #F97316);
  border-radius: 999px;
  color: var(--ra-orange-ink, #B34A05);
  background: transparent;
  font-family: var(--rf-font-sans);
  font-size: clamp(16px, 1.7vw, 18px);
  font-weight: 750;
  letter-spacing: -.01em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition:
    transform 160ms cubic-bezier(.23, 1, .32, 1),
    color 160ms cubic-bezier(.23, 1, .32, 1),
    border-color 160ms cubic-bezier(.23, 1, .32, 1),
    background-color 160ms cubic-bezier(.23, 1, .32, 1);
}

.ra-cta-jump:active { transform: scale(.97); }

.ra-cta-jump:focus-visible {
  outline: 3px solid rgba(46, 124, 230, .42);
  outline-offset: 3px;
}

/* Hover fills with the ink, not with --ra-orange: cream on #F97316 is 2.7:1, which
   is unreadable, and the ring is already carrying the bright orange at rest. The
   border moves with the fill so the pill doesn't grow a lighter halo mid-hover. */
@media (hover: hover) and (pointer: fine) {
  .ra-cta-jump:hover {
    border-color: var(--ra-orange-ink, #B34A05);
    color: var(--ra-cream, #FCF9F8);
    background: var(--ra-orange-ink, #B34A05);
  }
}

@media (max-width: 640px) {
  .ra-cta-jump { width: 100%; max-width: 420px; }
}

@media (prefers-reduced-motion: reduce) {
  .ra-cta-jump { transition: none; }
}

/* Walkthrough section (S5) --------------------------------------------- */
/* Width + inline gutter come from the shared shell rule above; this only owns
   its vertical rhythm. */
.ra-walkthrough {
  padding-block: clamp(62px, 9vw, 118px) clamp(56px, 8vw, 96px);
  text-align: center;
}

.ra-walkthrough__title {
  margin: 0;
  color: var(--ra-orange);
  font-family: "Caveat", cursive;
  font-size: clamp(44px, 6vw, 70px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.02;
  text-wrap: balance;
  transform: rotate(-1.6deg);
}

.ra-walkthrough__sub {
  max-width: 60ch;
  margin: clamp(16px, 2.2vw, 22px) auto 0;
  color: #655d57;
  font-family: var(--rf-font-sans);
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 600;
  line-height: 1.5;
  text-wrap: pretty;
}

/* Mount frame for the round-7 walkthrough art (funkit tile 7a).

   This box owns almost nothing on purpose. reportamigo-fun.js clones the funkit
   stage into it, pins that stage at one of two natural widths — 1220px for the
   three panels side by side, 412px to force one panel per row on phones —
   transform-scales it to the container, and writes an explicit pixel height back
   onto this element. So `height` below is ONLY the pre-mount hold; the moment the
   art lands, an inline style wins over every height in this block.

   Everything that makes the empty box read as "art pending" — the dashed rule, the
   two panel seams, the ghost play glyph — hangs off :not([data-ra-mounted="true"]).
   The JS sets that attribute to `loading`, then `true` or `error`, so the hold
   shows while the source fetches AND comes back if the fetch fails, and vanishes
   only on a real mount. */
.ra-walkthrough__slot {
  --ra-slot-panel: 320px;
  --ra-slot-rule: rgba(92, 107, 84, .45);
  position: relative;
  width: 100%;
  /* The panels are pinned in px, not fractions of this box; without this the
     stage's own width could feed back into the column and oscillate. */
  min-width: 0;
  height: var(--ra-slot-panel);
  margin: clamp(28px, 4.2vw, 48px) 0 0;
  /* The stage is laid out at its full natural size and shrunk with a transform, so
     its untransformed box is far taller and wider than the height JS writes above.
     Clip so no ancestor ever measures that box, and so the panels' ±1deg rotation
     and card shadows can't push a horizontal scrollbar at narrow widths. */
  overflow: hidden;
}

/* Hold state. 320px is one row of the three-across panels at their shipped scale,
   so desktop doesn't jump when the stage swaps in. On phones the stacked art is
   taller than the hold and the section grows on mount — one reflow on a
   below-the-fold section, which beats reserving ~960px of dashed nothing directly
   above the page's only form. */
.ra-walkthrough__slot:not([data-ra-mounted="true"]) {
  display: grid;
  place-items: center;
  border: 1px dashed var(--ra-slot-rule);
  border-radius: clamp(16px, 2vw, 24px);
  background:
    /* two vertical dashed dividers at the 1/3 and 2/3 panel seams */
    repeating-linear-gradient(to bottom, var(--ra-slot-rule) 0 5px, transparent 5px 11px)
      calc(100% / 3) 0 / 1px 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--ra-slot-rule) 0 5px, transparent 5px 11px)
      calc(200% / 3) 0 / 1px 100% no-repeat,
    var(--ra-orange-light);
}

.ra-walkthrough__slot:not([data-ra-mounted="true"])::after {
  width: clamp(56px, 6vw, 80px);
  aspect-ratio: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='38' fill='%23FCF9F8' fill-opacity='.75' stroke='%235C6B54' stroke-opacity='.5' stroke-width='1' stroke-dasharray='5 6'/%3E%3Cpath d='M33 27 L57 40 L33 53 Z' fill='%235C6B54' fill-opacity='.42'/%3E%3C/svg%3E") center / contain no-repeat;
  content: "";
}

/* Stacked hold: ONE band, not three stacked panels, and no seams — three of them
   across 260px would read as a squashed strip rather than as reserved panels.
   100cqw resolves against .ra-walkthrough's content box, which is exactly this
   box's border-box width, so the band tracks the real gutter and scrollbar instead
   of vw's guess. The breakpoint is 899px because the JS switches the stage to its
   one-per-row layout below a 1040px container — the hold only has to look right
   for the width it is actually painted at, and every stacked viewport is below
   both numbers. */
@media (max-width: 899px) {
  /* Scoped to the stacked range so the desktop row is untouched by the implied
     `contain: layout style inline-size`. */
  .ra-walkthrough { container-type: inline-size; }

  .ra-walkthrough__slot:not([data-ra-mounted="true"]) {
    height: clamp(220px, 72cqw, 260px);
    /* Flat fill: the two vertical seams are dropped with it. */
    background: var(--ra-orange-light);
  }
}

/* Payoff line + its hand-drawn underline. The inline svg is the last child of
   the <p>, pulled out of flow and pinned to the paragraph's reserved bottom
   padding so the stroke sits UNDER the text instead of striking through it. */
.ra-walkthrough__payoff {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: clamp(30px, 4.2vw, 50px) 0 0;
  padding-bottom: 18px;
  color: var(--ra-ink);
  font-family: var(--rf-font-sans);
  font-size: clamp(19px, 2.3vw, 26px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.3;
  text-wrap: balance;
}

.ra-walkthrough__scribble {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: block;
  width: min(92%, 300px);
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
}

/* Inline closer at #start (S6) ------------------------------------------ */
/* Lives inside .ra-fiesta (orange, overflow:hidden, text-align:center) as a
   cream card. One column on mobile with the form first; two columns from
   900px: form left, reassurance right. */
/* overflow: clip, NOT hidden. The card has to clip the 100vw picado to its rounded
   corners, but `hidden` makes it a scroll container, and a scroll container will
   happily scroll a :focus-visible ring into view — dragging the whole card (and the
   absolutely-positioned picado with it) out of alignment on keyboard tab-through.
   `clip` cannot scroll, so that class of jump is impossible.
   Clipping the ring itself is a non-issue here: every focusable in this card (#phone,
   #consent, the two consent links, #leadButton) sits inside .rf-form-card, which is
   inside .ra-closer__form-col. Minimum horizontal clearance to the clip edge is
   .ra-closer__form-col padding-inline 18px + .rf-form-card padding 18px = 36px, and
   minimum bottom clearance is 30px + 18px = 48px — both far above the 6px ring budget
   (3px outline + 3px offset). No overflow-clip-margin: any positive value would let
   that same 6px of the full-bleed picado escape past the card's rounded corners. */
.ra-closer {
  position: relative;
  z-index: 2;
  overflow: clip;
  width: min(100%, 1040px);
  margin: clamp(52px, 7.5vw, 92px) auto 0;
  border-radius: clamp(20px, 3vw, 34px);
  background: var(--ra-cream, #FCF9F8);
  box-shadow: 0 28px 70px rgba(93, 38, 5, .26);
  text-align: left;
  scroll-margin-top: clamp(14px, 5vh, 56px);
}

/* Full-bleed picado across the whole card. Same breakout technique as the hero
   (width: 100vw centred on the page) — but taken out of flow so it spans the
   CARD, not just the left column, and so a two-column left track can't push it
   off-centre. It cannot add horizontal scroll at any width: it is absolutely
   positioned inside .ra-closer{overflow:clip} — clip, not hidden, and the note
   above .ra-closer explains why that distinction is load-bearing here — which is
   itself inside .ra-fiesta{overflow:hidden} and .rf-landing-page{overflow-x:clip}.
   The kit child is a fixed-width svg that can't span, so hide it and tile a
   seamless copy of the same bunting as a repeating background (as the hero does).
   Why the real asset can't be used directly: kit id 4i is a single <svg width="216"
   height="34" viewBox="0 0 216 34"> holding exactly six flags on one sagging cord.
   CSS cannot repeat a DOM node, and it cannot stretch that svg either — the default
   preserveAspectRatio="xMidYMid meet" is an ATTRIBUTE (source.html is SHA-pinned, so
   it can't be set to "none"), which means widening the svg box just letterboxes the
   216px art centred instead of spanning. Scaling it up uniformly to 1440px would make
   the strip ~227px tall with 80px flags; transform: scaleX(6.7) would smear the
   triangles into slivers. Tiling a redrawn 192px-period copy whose cord ends both
   meet at y=4 is the only seamless full-bleed option. */
.ra-closer .ra-start-picado {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: 100vw;
  height: clamp(30px, 3.4vw, 40px);
  margin: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='34' viewBox='0 0 192 34'%3E%3Cpath d='M0,4Q96,14,192,4' stroke='%23EA6C0A' stroke-width='2.5' fill='none' opacity='.75'/%3E%3Cpath d='M10,7L22,7L16,20Z' fill='%23F5B31C'/%3E%3Cpath d='M42,9L54,9L48,22Z' fill='%235C6B54'/%3E%3Cpath d='M74,10L86,10L80,23Z' fill='%23ED6A98'/%3E%3Cpath d='M106,10L118,10L112,23Z' fill='%232E7CE6'/%3E%3Cpath d='M138,9L150,9L144,22Z' fill='%23F97316'/%3E%3Cpath d='M170,7L182,7L176,20Z' fill='%23F5B31C'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center top;
  background-size: 192px 34px;
  transform: translateX(-50%);
  pointer-events: none;
}

/* !important is load-bearing — see the hero note above: the JS-cloned stage carries
   an inline display:grid that beats a plain `display: none`. */
.ra-closer .ra-start-picado > * { display: none !important; }

.ra-closer__form-col {
  padding:
    clamp(52px, 8vw, 74px)
    clamp(18px, 4vw, 44px)
    clamp(30px, 4vw, 46px);
}

/* .ra-closer__note used to sit between this and the form and carried the only gap
   (12px above, 20px below). Its copy duplicated the fiesta line one screen up, so the
   element is gone and the title owns the separation now. */
.ra-closer__title {
  margin: 0 0 clamp(22px, 3vw, 28px);
  color: var(--ra-ink);
  font-family: var(--rf-font-sans);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 850;
  letter-spacing: -.04em;
  line-height: 1;
  text-wrap: balance;
}

.ra-closer .rf-form-card { text-align: left; }

.ra-closer__support {
  padding:
    0
    clamp(18px, 4vw, 44px)
    clamp(34px, 5vw, 50px);
}

/* Single-column stack: the support rail lands directly under the form, so it needs
   its own top edge or the two blocks read as one run-on column. */
@media (max-width: 899px) {
  .ra-closer__support {
    margin-top: clamp(28px, 6vw, 40px);
    padding-top: clamp(26px, 5vw, 36px);
    border-top: 1px solid var(--ra-line, #e8e2da);
  }
}

.ra-closer__support-title {
  margin: 0 0 14px;
  color: var(--ra-sage, #5C6B54);
  font-family: "Caveat", cursive;
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.05;
  transform: rotate(-1.2deg);
}

.ra-closer__steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  counter-reset: ra-closer-step;
  list-style: none;
}

.ra-closer__steps li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  color: var(--ra-ink);
  font-family: var(--rf-font-sans);
  font-size: clamp(15px, 1.7vw, 17px);
  font-weight: 700;
  line-height: 1.35;
}

.ra-closer__steps li::before {
  display: grid;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #fff;
  background: var(--ra-orange);
  font-size: 14px;
  font-weight: 800;
  place-items: center;
  counter-increment: ra-closer-step;
  content: counter(ra-closer-step);
}

/* The reserved report-thumbnail box that used to sit between the steps and the
   checks is gone — a second dashed placeholder ~489px tall at 768px and ~318px on
   desktop, parked beside the lead form at peak intent. Its 26px top+bottom margins
   were also the only separation between these two groups, so the gap it was
   providing has to be declared here instead. */
.ra-closer__checks {
  display: grid;
  gap: 10px;
  margin: clamp(22px, 3vw, 32px) 0 0;
  padding: 0;
  list-style: none;
}

.ra-closer__checks li {
  display: flex;
  gap: 10px;
  align-items: center;
  color: #4b443f;
  font-family: var(--rf-font-sans);
  font-size: clamp(14px, 1.6vw, 16px);
  font-weight: 650;
  line-height: 1.35;
}

/* The check is an INLINE svg in the markup (circle + path, viewBox 0 0 48 48) —
   deliberately not a <use> into the funkit sprite, because that sprite only
   arrives after reportamigo-fun.js fetches source.html, which would leave these
   three reassurance rows blank with JS off. The svg carries fill="var(--chk,
   #34A05E)" so it renders green with no CSS at all; --chk here just keeps the
   colour themable. Authored at 48x48, so the box must be sized here or the icon
   blows the row out; flex:none keeps it from squashing next to long copy. */
.ra-closer__check {
  --chk: #34A05E;
  flex: none;
  width: 20px;
  height: 20px;
}

@media (min-width: 900px) {
  .ra-closer {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    align-items: stretch;
  }

  .ra-closer__form-col {
    padding: clamp(58px, 6vw, 82px) clamp(26px, 2.6vw, 40px) clamp(44px, 4vw, 62px) clamp(32px, 3.2vw, 50px);
  }

  /* The thumbnail placeholder used to be what made this column tall enough to reach
     the bottom of the card; with it gone the support content is shorter than the form
     column, and because .ra-closer is align-items:stretch the tinted panel keeps
     painting past it. The slack has to go somewhere.
     It goes BELOW the checks, not between the groups. margin-top:auto was tried first
     — it bottom-aligned the checks with .rf-form-card exactly (530.1px both at 1280),
     but it paid for that with 160px (1280) to 244px (900) of blank cream sitting
     between the steps and the checks, which reads as a missing element rather than as
     alignment. Trailing whitespace under the last row reads as panel padding, so the
     slack is cheaper there. The support title still sits level with the form title
     because both columns share the same padding-top. */
  .ra-closer__support {
    display: flex;
    flex-direction: column;
    padding: clamp(58px, 6vw, 82px) clamp(32px, 3.2vw, 50px) clamp(44px, 4vw, 62px) clamp(26px, 2.6vw, 40px);
    border-left: 1px solid var(--ra-line, #e8e2da);
    background: #fff7f1;
  }

  .ra-closer__checks {
    padding-top: clamp(22px, 2.4vw, 32px);
  }
}

@media (max-width: 640px) {
  .ra-closer { border-radius: 20px; }
  .ra-closer__form-col { padding-inline: 18px; }
  .ra-closer__support { padding-inline: 18px; }
}

/* Shared dashboard/crew media viewer. The image keeps its natural aspect ratio;
   only the true backdrop and explicit close control dismiss the group. */
body.ra-lightbox-open { overflow: hidden; }
.ra-media-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: none;
  grid-template-columns: 52px minmax(0,1fr) 52px;
  align-items: center;
  gap: 16px;
  padding: 64px 22px 28px;
  color: #fff;
  background: rgba(17,15,13,.94);
}
.ra-media-lightbox[data-open="true"] { display: grid; }
.ra-media-lightbox__stage {
  display: grid;
  min-width: 0;
  max-height: calc(100dvh - 92px);
  justify-items: center;
  gap: 12px;
  margin: 0;
}
.ra-media-lightbox__stage img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100dvh - 132px);
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0,0,0,.46);
}
.ra-media-lightbox__stage figcaption {
  min-height: 20px;
  color: rgba(255,255,255,.82);
  font-size: 13px;
  font-weight: 750;
}
.ra-media-lightbox__close,
.ra-media-lightbox__nav {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.1);
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms cubic-bezier(.23,1,.32,1);
}
.ra-media-lightbox__close {
  position: absolute;
  top: max(14px,env(safe-area-inset-top));
  right: max(14px,env(safe-area-inset-right));
}
.ra-media-lightbox__nav svg,
.ra-media-lightbox__close svg {
  width: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}
.ra-media-lightbox__close:active,
.ra-media-lightbox__nav:active { transform: scale(.96); }
@media (hover:hover) and (pointer:fine) {
  .ra-media-lightbox__close:hover,
  .ra-media-lightbox__nav:hover { background: rgba(255,255,255,.2); }
}
.ra-report-journey--complete .ra-approved-asset[data-ra-still="true"] * {
  animation-play-state: paused !important;
}
.ra-start-another {
  margin-top: 22px;
}
@media (max-width: 560px) {
  .ra-media-lightbox {
    grid-template-columns: 1fr 1fr;
    align-content: center;
    gap: 14px;
    padding: 64px 14px calc(18px + env(safe-area-inset-bottom));
  }
  .ra-media-lightbox__stage { grid-column: 1/-1; grid-row: 1; }
  .ra-media-lightbox__nav { justify-self: center; }
  .ra-media-lightbox__nav--previous { grid-column: 1; }
  .ra-media-lightbox__nav--next { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .ra-media-lightbox__close,
  .ra-media-lightbox__nav { transition: none; }
}