/* ---------- page frame ---------- */
  .rm-wrap {
    max-width: 640px;
    margin: 0 auto;
    padding: 26px 20px 70px
  }

  .rm-hero {
    padding-bottom: 22px
  }

  .rm-kicker {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--stamp);
    background: var(--stamp-soft);
    border: 1px solid rgba(107, 59, 167, .16);
    border-radius: 20px;
    padding: 5px 11px;
    margin-bottom: 14px
  }

  .rm-hero h1 {
    font-size: clamp(29px, 6.4vw, 40px);
    margin-bottom: 12px
  }

  .rm-lede {
    font-size: 16px;
    line-height: 1.62;
    color: var(--body-c);
    margin-bottom: 18px
  }

  .rm-facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px
  }

  .rm-facts li {
    display: flex;
    gap: 10px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--body-c)
  }

  .rm-facts li .ic {
    flex: none;
    color: var(--stamp);
    font-weight: 800
  }

  /* ---------- the private link ---------- */
  .rm-link {
    margin: 20px 0 4px;
    padding: 16px 18px;
    border: 1px dashed var(--line-strong);
    border-radius: 12px;
    background: rgba(255, 255, 255, .6)
  }

  .rm-link b {
    display: block;
    font-family: var(--display);
    font-size: 15.5px;
    font-weight: 700;
    margin-bottom: 4px
  }

  .rm-link p {
    font-size: 13.5px;
    color: var(--mid);
    line-height: 1.55;
    margin-bottom: 10px
  }

  .rm-link input {
    font-family: var(--mono);
    font-size: 12.5px;
    padding: 10px 12px
  }

  .rm-link .row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap
  }

  /* ---------- match cards ---------- */
  .rm-panelhead {
    margin: 26px 0 14px
  }

  .rm-panelhead h2 {
    font-size: 22px;
    margin-bottom: 6px
  }

  .rm-panelhead p {
    font-size: 14px;
    color: var(--mid);
    line-height: 1.55
  }

  .rm-card {
    position: relative;
    border: 1px solid var(--line);
    border-left: 3px solid var(--stamp);
    border-radius: 0 12px 12px 0;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(10px);
    padding: 16px 18px;
    margin-bottom: 13px
  }

  .rm-card.unlocked {
    border-left-color: var(--whatsapp)
  }

  .rm-top {
    display: flex;
    align-items: baseline;
    gap: 9px;
    flex-wrap: wrap
  }

  .rm-score {
    font-family: var(--display);
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--stamp);
    font-variant-numeric: tabular-nums
  }

  .rm-with {
    font-family: var(--display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.02em
  }

  .rm-verdict {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mid)
  }

  .rm-bar {
    height: 4px;
    border-radius: 4px;
    background: rgba(107, 59, 167, .1);
    overflow: hidden;
    margin: 10px 0 12px
  }

  .rm-bar i {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--stamp) 0%, var(--stamp-vibrant) 100%)
  }

  .rm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 11px
  }

  .rm-chip {
    font-size: 12.5px;
    padding: 5px 10px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .8);
    color: var(--body-c)
  }

  .rm-chip.ok {
    border-color: rgba(31, 168, 85, .35);
    background: rgba(31, 168, 85, .08);
    color: #157a3d
  }

  .rm-chip.no {
    border-color: rgba(199, 62, 29, .32);
    background: rgba(199, 62, 29, .07);
    color: var(--alert)
  }

  .rm-meta {
    font-size: 13px;
    color: var(--mid);
    margin-bottom: 13px;
    font-variant-numeric: tabular-nums
  }

  .rm-actions {
    display: flex;
    gap: 9px;
    flex-wrap: wrap
  }

  .rm-btn {
    font-family: var(--body);
    font-size: 14.5px;
    font-weight: 700;
    padding: 11px 18px;
    border-radius: 9px;
    border: 1.5px solid var(--stamp);
    background: var(--stamp);
    color: #fff;
    cursor: pointer;
    transition: transform .2s var(--ease-spring), background .2s ease
  }

  .rm-btn:hover {
    background: var(--stamp-hover);
    transform: translateY(-1.5px)
  }

  .rm-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none
  }

  .rm-btn.quiet {
    background: transparent;
    color: var(--mid);
    border-color: var(--line-strong)
  }

  .rm-btn.quiet:hover {
    background: rgba(107, 59, 167, .06);
    color: var(--ink)
  }

  .rm-btn.wa {
    background: var(--whatsapp);
    border-color: var(--whatsapp);
    text-decoration: none;
    display: inline-block
  }

  .rm-btn.wa:hover {
    background: #178945
  }

  .rm-state {
    margin-top: 12px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--mid)
  }

  .rm-state.they {
    color: var(--stamp);
    font-weight: 600
  }

  .rm-contact {
    margin-top: 13px;
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(31, 168, 85, .07);
    border: 1px solid rgba(31, 168, 85, .25)
  }

  .rm-contact b {
    display: block;
    font-family: var(--display);
    font-size: 15px;
    margin-bottom: 4px
  }

  .rm-contact p {
    font-size: 13.5px;
    color: var(--body-c);
    line-height: 1.55;
    margin-bottom: 10px
  }

  .rm-empty {
    border: 1px dashed var(--line-strong);
    border-radius: 12px;
    padding: 20px 18px;
    background: rgba(255, 255, 255, .55);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--body-c)
  }

  .rm-note {
    font-size: 13px;
    color: var(--mid);
    line-height: 1.6;
    margin-top: 16px
  }

  .rm-err {
    border-left: 3.5px solid var(--alert);
    background: rgba(199, 62, 29, .05);
    border-radius: 0 10px 10px 0;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--body-c);
    margin-top: 16px
  }

  /* The handover: the questionnaire reached the team through the waitlist
     door instead of the matcher, so the answers are safe but there is no
     private link and no percentage yet. Deliberately NOT .rm-err — this is
     not a failure, and painting it red would teach the student to ignore
     the red block that means something was refused. */
  .rm-note {
    border-left: 3.5px solid #10B981;
    background: rgba(16, 185, 129, .06);
    border-radius: 0 10px 10px 0;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--body-c);
    margin-top: 16px
  }
  .rm-note code {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .04em
  }