/* ==========================================================================
   THE CLIENT SELECTOR CARD — the three-zone geometry, shared by all ten

   One card, three zones, in the same order at every width:

       ┌──────┬────────────────────────┬──────────────────┐
       │ LOGO │ Client name            │  See Results  →  │
       │      │ Industry               │                  │
       └──────┴────────────────────────┴──────────────────┘
         auto      minmax(0,1fr)              auto

   The middle column is the only elastic one, so the space that used to sit
   empty to the right of a short name ("Dr. Pearl's" left ~80px of nothing in
   a 252px pill) is now taken by the action instead of by air. The logo and
   the action are both `auto`, which means they are as wide as they need to
   be and never wider, and the action ends flush against the card's own
   padding on every card — so all ten arrows land on one vertical line.

   Two things this file fixes that the reference could not:

     · `cue.css` hid the action outright between 861px and 1420px, because a
       five-across pill at those widths had no room for it. The row now sizes
       its own columns (`auto-fit` on a 228px floor), so a card is never
       narrower than the three zones need and "See Results" is on every card
       at every width. Above 1370px it is the reference's five-across grid,
       unchanged, because a 260px pill does hold all three.
     · `cue.css` also faded the action in on hover only. There is no hover on
       a phone and it is a permanent label now, so it is always at opacity 1.

   What is NOT here: the ten finishes and the ten light active states, which
   live in rz-looks.css. This file is the skeleton they all share.
   ========================================================================== */

.cc.rz{
  --rz-act:    #1A73E8;   /* the action's blue — one neutral blue, not the
                             client's own colour, so ten different brand
                             colours cannot make ten different-weight CTAs */
  --rz-line:   #E3E9F3;   /* resting hairline */
  --rz-line-h: #C9D9F2;   /* hover hairline  */
}

/* ---------- the name is no longer the thing that says "clickable" --------
   The reference underlined every business name with a dotted rule (cue 4's
   "link language"). With a worded action and an arrow on the right of every
   card, a dotted rule under ten names is noise competing with the real
   signal, so it comes off. Nothing about the name's text changes. */
.cc.rz .cc-nm,
.cc.rz .mp-i:hover .cc-nm,
.cc.rz .mp-i.is-sel .cc-nm{ text-decoration: none; }
.cc.rz .mp-i.is-sel .cc-nm{ color: var(--ink); }

/* ---------- zone 3 · the action ---------------------------------------- */
.cc.rz .mp-i .cc-cue{
  display: inline-flex; align-items: center; opacity: 1; margin: 0;
  justify-self: end; align-self: center;
  font-weight: 700; letter-spacing: -.004em; white-space: nowrap;
  color: var(--rz-act);
  transition: color .18s ease, background .18s ease,
              border-color .18s ease, box-shadow .18s ease;
}
.cc.rz .mp-i .cc-ar{
  flex: none; fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .22s cubic-bezier(.32,.72,0,1);
}
/* the arrow moves toward the panel it opens — the one bit of motion that
   says "this goes somewhere" without a word */
.cc.rz .mp-i:hover .cc-ar,
.cc.rz .mp-i.is-sel .cc-ar,
.cc.rz .mp-i:focus-visible .cc-ar{ transform: translateX(3px); }
@media (prefers-reduced-motion: reduce){
  .cc.rz .mp-i .cc-ar{ transition: none; }
}

/* ---------- the card surface, light at rest and light when chosen -------
   The reference selected a card with the client's own brand colour as a
   1px border AND a 1px box-shadow ring — which on Gentech (#12161F) or
   Servo India (#C0392B) reads as a heavy dark outline. Every version below
   replaces it; this is the shared reset that stops the dark ring reaching
   any of them. */
.cc.rz .mp-i{
  border: 1px solid var(--rz-line); background: var(--paper);
  box-shadow: none;
  transition: background .2s ease, border-color .2s ease,
              box-shadow .22s ease, transform .18s ease;
}
.cc.rz .mp-i:hover{ border-color: var(--rz-line-h); box-shadow: none; }
.cc.rz .mp-i.is-sel{ border-color: var(--rz-line); background: var(--paper);
  box-shadow: none; }
.cc.rz .mp-i:focus-visible{ outline: 2px solid var(--rz-act); outline-offset: 2px; }


/* ==========================================================================
   DESKTOP · 861px and up
   ========================================================================== */
@media (min-width: 861px){
  /* A card is never narrower than its three zones. Measured at the tight
     end: 7+27 logo +9 +96 trade +9 +67 action +10 = 225px, so a 228px floor
     is the smallest honest column. At 1280 that still yields five across. */
  .cc.rz .mp-row{
    display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
    gap: 6px;
  }
  .cc.rz .mp-i{
    display: grid; grid-template-columns: auto minmax(0,1fr) auto;
    column-gap: 12px; align-items: center;
    padding: 8px 10px 8px 7px; border-radius: 11px;
  }
  /* one desktop scale for every width, so the 861-900 and 861-980 tightening
     the reference needed for a five-across pill no longer applies */
  .cc.rz .mp-m{ width: 28px; height: 28px; border-radius: 8px; font-size: 9.8px; }
  .cc.rz .mp-v{ width: 13px; height: 13px; right: -4px; bottom: -4px; }
  .cc.rz .mp-w{ display: block; min-width: 0; }
  .cc.rz .mp-i b{ font-size: 11.7px; font-weight: 700; letter-spacing: -.022em;
    line-height: 1.25; color: var(--ink-2); }
  .cc.rz .mp-i .mp-s{ margin-top: 1px; font-size: 9.6px; line-height: 1.25; }
  .cc.rz .mp-i .cc-cue{ font-size: 9.6px; gap: 4px; }
  .cc.rz .mp-i .cc-ar{ width: 10px; height: 10px; }
}
/* the reference's five-across grid, kept exactly where it still fits */
@media (min-width: 1370px){
  .cc.rz .mp-row{ grid-template-columns: repeat(5, minmax(0,1fr)); }
}


/* ==========================================================================
   PHONE · 860px and down
   The reference's swipe rail is replaced by a full-width row in eight of the
   ten versions, because a three-zone card wants the whole gutter box: at
   390px that is 354px, which holds a 40px logo, "Kinam Heat Exchange" at
   13.2px and "See Results →" with 40px to spare. Versions 01 and 07 keep
   the rail, with the pill widened to hold all three zones.
   ========================================================================== */
@media (max-width: 860px){
  .cc.rz .mp-row{
    display: grid; grid-template-columns: minmax(0,1fr); gap: 8px;
    margin-top: 12px; margin-inline: 0; padding-inline: 0; overflow: visible;
  }
  .cc.rz .mp-i{
    width: 100%; display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    column-gap: 12px; align-items: center;
    padding: 10px 13px; border-radius: 14px; text-align: left;
  }
  .cc.rz .mp-m{ width: 40px; height: 40px; border-radius: 12px; font-size: 12.6px; }
  .cc.rz .mp-v{ width: 15px; height: 15px; right: -4px; bottom: -4px; }
  .cc.rz .mp-w{ display: block; min-width: 0; }
  .cc.rz .mp-i b{ font-size: 13.2px; font-weight: 700; letter-spacing: -.026em;
    line-height: 1.25; color: var(--ink-2); }
  .cc.rz .mp-i.is-sel b{ color: var(--ink); }
  .cc.rz .mp-i .mp-s{ margin-top: 2px; font-size: 10.6px; line-height: 1.25;
    color: var(--ink-4); }
  .cc.rz .mp-i .cc-cue{ font-size: 10.6px; gap: 5px; }
  .cc.rz .mp-i .cc-ar{ width: 11.5px; height: 11.5px; }
}

/* ---- small phones: 374px and down --------------------------------------
   Measured at 320px: the gutter box is 284px, and the three zones plus
   padding come to 285 at the sizes above. Everything gives back a little
   and nothing is shortened — "Kinam Heat Exchange" still prints in full. */
@media (max-width: 374px){
  .cc.rz .mp-i{ column-gap: 9px; padding: 9px 10px; }
  .cc.rz .mp-m{ width: 34px; height: 34px; border-radius: 10px; font-size: 11px; }
  .cc.rz .mp-v{ width: 13px; height: 13px; }
  .cc.rz .mp-i b{ font-size: 12.2px; }
  .cc.rz .mp-i .mp-s{ font-size: 9.8px; }
  .cc.rz .mp-i .cc-cue{ font-size: 9.4px; gap: 4px; }
  .cc.rz .mp-i .cc-ar{ width: 10px; height: 10px; }
}