/* ==========================================================================
   TEN FINISHES FOR ONE CARD

   Every version below renders exactly the same markup — the builder is
   shared and the three zones never move. What changes is two things, and
   they are the two things the brief asks about:

     1. how the third zone is finished, so "See Results" is unmissable
        without being loud: plain text, a soft chip, a ruled column, its own
        field, an outlined button, an underlined link;
     2. what a chosen card looks like — ten light treatments, none of which
        use the client's brand colour as a hard border.

   The reference selected a card with `border-color: var(--k)` plus a
   `0 0 0 1px var(--k)` ring. On Gentech (#12161F) and Servo India (#C0392B)
   that is a 2px near-black or blood-red outline around a white card, which
   is the "too dark and heavy" the brief describes. Nothing below goes above
   a 1px border, a ~6% tint, or a shadow that stays under 18% opacity.

   Two versions (01 and 07) keep the reference's phone swipe rail, with the
   pill widened to hold the third zone. The other eight give the card the
   whole gutter box, because that is what makes the three zones land on the
   same three vertical lines on every card.
   ========================================================================== */


/* ==========================================================================
   THE SWIPE RAIL — versions 01 and 07 only
   The pill is as wide as the three zones need and no wider, so the next
   card always peeks and the row still reads as scrollable.
   ========================================================================== */
@media (max-width: 860px){
  .cc.rz1 .mp-row, .cc.rz7 .mp-row{
    display: flex; flex-wrap: nowrap; align-items: stretch;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut);
    scroll-padding-inline: var(--gut);
    scrollbar-width: none; -ms-overflow-style: none;
    gap: 8px; margin-top: 12px;
  }
  .cc.rz1 .mp-row::-webkit-scrollbar, .cc.rz7 .mp-row::-webkit-scrollbar{ display: none; }
  @media (prefers-reduced-motion: reduce){
    .cc.rz1 .mp-row, .cc.rz7 .mp-row{ scroll-behavior: auto; }
  }
  .cc.rz1 .mp-i, .cc.rz7 .mp-i{
    flex: 0 0 auto; scroll-snap-align: start;
    width: min(326px, calc(100vw - 2 * var(--gut) - 4px));
  }
  .cc.rz7 .mp-i{ width: min(344px, calc(100vw - 2 * var(--gut) - 4px)); }
}


/* ==========================================================================
   01 · PLAIN — rail
   Nothing around the action at all: the words and the arrow, set in the
   action blue, hard against the card's right padding. The lightest possible
   finish, and the one that leaves the most room for the name.
   Active: a soft blue wash, a thin blue hairline and a wide, very faint
   halo — the card lifts off the page without gaining a dark edge.
   ========================================================================== */
.cc.rz1 .mp-i:hover{ background: #FBFDFF; border-color: #CFE0FA; }
.cc.rz1 .mp-i.is-sel{
  background: #F5F9FF; border-color: #BFD8FA;
  box-shadow: 0 0 0 3px rgba(26,115,232,.10);
}
.cc.rz1 .mp-i.is-sel .cc-cue{ color: #1560CE; }


/* ==========================================================================
   02 · SOFT CHIP — list
   The action sits in a rounded tint chip, so it reads as a control rather
   than as a caption. The chip is the same width on all ten cards, which
   gives the right-hand edge of the list a single clean line.
   Active: the card stays white and gains a soft blue shadow; the chip is
   what fills in. Colour moves to the thing you pressed, not to the border.
   ========================================================================== */
.cc.rz2 .mp-i .cc-cue{
  padding: 5px 10px; border-radius: 999px;
  background: #EFF4FE; border: 1px solid #E2EAFA;
}
.cc.rz2 .mp-i:hover{ border-color: #CFE0FA; }
.cc.rz2 .mp-i:hover .cc-cue{ background: #E7EFFD; border-color: #D3E2FA; }
.cc.rz2 .mp-i.is-sel{
  background: var(--paper); border-color: #D3E2FA;
  box-shadow: 0 4px 14px -8px rgba(26,115,232,.45);
}
.cc.rz2 .mp-i.is-sel .cc-cue{
  background: #E2EDFD; border-color: #C4D9F8; color: #1257C4;
}


/* ==========================================================================
   03 · BRAND, LIGHTENED — list
   The one version that keeps the client's own colour in the active state,
   because losing it entirely loses a little of the "this is that business"
   feeling. It is used at 5% as a wash and at 20% as a hairline — so
   Gentech's near-black becomes a pale grey card and Servo India's red
   becomes a pale blush, and neither can go dark.
   The logo is a circle here, which reads more like a company avatar than an
   app icon and sits more quietly under ten different brand colours.
   ========================================================================== */
.cc.rz3 .mp-m{ border-radius: 50%; }
.cc.rz3 .mp-v{ right: -2px; bottom: -2px; }
.cc.rz3 .mp-i:hover{
  background: color-mix(in srgb, var(--k) 3%, #fff);
  border-color: color-mix(in srgb, var(--k) 14%, #fff);
}
.cc.rz3 .mp-i.is-sel{
  background: color-mix(in srgb, var(--k) 5%, #fff);
  border-color: color-mix(in srgb, var(--k) 20%, #fff);
  box-shadow: 0 2px 10px -7px color-mix(in srgb, var(--k) 55%, #fff);
}
@media (max-width: 860px){ .cc.rz3 .mp-i{ padding: 11px 13px; } }


/* ==========================================================================
   04 · RULED COLUMN — list
   A hairline stands between the name and the action, the way a table rules
   its action column. Because "See Results" is the same string on every
   card and the card's right padding is uniform, that rule lands on one
   vertical line down the whole list — the strongest alignment signal any of
   the ten has.
   Active: the whole row takes a pale blue wash and the rule tints with it.
   ========================================================================== */
.cc.rz4 .mp-i .cc-cue{
  align-self: stretch; padding-left: 13px;
  border-left: 1px solid var(--rz-line);
}
.cc.rz4 .mp-i:hover{ border-color: #CFE0FA; background: #FCFDFF; }
.cc.rz4 .mp-i.is-sel{
  background: #F2F7FE; border-color: #C6DCFB; box-shadow: none;
}
.cc.rz4 .mp-i.is-sel .cc-cue{ border-left-color: #C6DCFB; color: #1560CE; }
@media (max-width: 860px){
  .cc.rz4 .mp-i .cc-cue{ padding-left: 14px; }
}


/* ==========================================================================
   05 · ELEVATED — list
   No tint anywhere. The card is white and floats on a soft shadow at rest,
   and being chosen simply raises it further and sharpens its hairline. The
   most restrained of the ten, and the one that reads best on a page that
   already has a lot of colour in it.
   ========================================================================== */
.cc.rz5 .mp-i{
  border-color: #EAEFF7; border-radius: 13px;
  box-shadow: 0 1px 2px rgba(15,27,61,.04), 0 6px 16px -12px rgba(15,27,61,.40);
}
.cc.rz5 .mp-i:hover{
  border-color: #DDE6F4; transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(15,27,61,.05), 0 12px 24px -14px rgba(15,27,61,.50);
}
.cc.rz5 .mp-i.is-sel{
  background: var(--paper); border-color: #C6DCFB; transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(15,27,61,.05), 0 16px 30px -18px rgba(26,115,232,.55);
}
@media (prefers-reduced-motion: reduce){
  .cc.rz5 .mp-i:hover, .cc.rz5 .mp-i.is-sel{ transform: none; }
}


/* ==========================================================================
   06 · LEFT ACCENT — list
   The card itself barely changes; a 3px blue bar appears down its left edge
   instead. It is the quietest way to mark one row out of ten, and it never
   touches the card's outline, so nothing can read as a dark box.
   ========================================================================== */
.cc.rz6 .mp-i{ position: relative; overflow: hidden; }
.cc.rz6 .mp-i::after{
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--rz-act); opacity: 0;
  transition: opacity .2s ease;
}
.cc.rz6 .mp-i:hover{ background: #FBFCFE; border-color: #D8E4F6; }
.cc.rz6 .mp-i:hover::after{ opacity: .35; }
.cc.rz6 .mp-i.is-sel{ background: #F7FAFF; border-color: #D3E2FA; }
.cc.rz6 .mp-i.is-sel::after{ opacity: 1; }
.cc.rz6 .mp-i.is-sel .cc-cue{ color: #1560CE; }


/* ==========================================================================
   07 · CHIP ON A RAIL — rail
   Version 02's chip, on version 01's swipe rail: the one combination that
   keeps the reference's behaviour (all ten reachable with a thumb, one card
   at a time) while giving the action a real control to press.
   Active: pale blue card, thin blue hairline, and the chip fills.
   ========================================================================== */
.cc.rz7 .mp-m{ border-radius: 50%; }
.cc.rz7 .mp-v{ right: -2px; bottom: -2px; }
.cc.rz7 .mp-i .cc-cue{
  padding: 5px 11px; border-radius: 999px;
  background: #EFF4FE; border: 1px solid #E2EAFA;
}
.cc.rz7 .mp-i:hover .cc-cue{ background: #E7EFFD; border-color: #D3E2FA; }
.cc.rz7 .mp-i.is-sel{
  background: #F6FAFF; border-color: #C6DCFB;
  box-shadow: 0 3px 12px -8px rgba(26,115,232,.5);
}
.cc.rz7 .mp-i.is-sel .cc-cue{
  background: #DCE9FC; border-color: #BED5F6; color: #1257C4;
}


/* ==========================================================================
   08 · ACTION FIELD — list
   The action gets its own full-height field at the end of the card, tinted
   a half-step off white and separated by a hairline. The card now reads as
   two parts — who it is, and what pressing it does — which is the most
   explicit any of the ten gets about the fact that a card is a button.
   Active: the field is what turns blue.
   ========================================================================== */
.cc.rz8 .mp-i{ overflow: hidden; padding-right: 0; }
.cc.rz8 .mp-m{ border-radius: 7px; }
.cc.rz8 .mp-i .cc-cue{
  align-self: stretch; padding: 0 13px;
  background: #F7F9FC; border-left: 1px solid #EDF1F7;
}
.cc.rz8 .mp-i:hover{ border-color: #CFE0FA; }
.cc.rz8 .mp-i:hover .cc-cue{ background: #F0F5FD; }
.cc.rz8 .mp-i.is-sel{
  background: var(--paper); border-color: #C6DCFB;
  box-shadow: 0 0 0 3px rgba(26,115,232,.08);
}
.cc.rz8 .mp-i.is-sel .cc-cue{
  background: #E9F1FD; border-left-color: #D5E4FA; color: #1257C4;
}
@media (max-width: 860px){ .cc.rz8 .mp-i .cc-cue{ padding: 0 15px; } }


/* ==========================================================================
   09 · OUTLINED BUTTON — list
   The action is drawn as a button, because a button is the one shape on a
   page nobody has to be taught. It stays white and hairline-bordered at
   rest so ten of them do not shout, and fills with a pale blue when its
   card is the chosen one.
   ========================================================================== */
.cc.rz9 .mp-i .cc-cue{
  padding: 6px 11px; border-radius: 9px;
  background: var(--paper); border: 1px solid #DCE4F1;
  box-shadow: 0 1px 0 rgba(15,27,61,.03);
}
.cc.rz9 .mp-i:hover .cc-cue{ border-color: #BFD5F5; background: #F7FAFF; }
.cc.rz9 .mp-i.is-sel{
  background: var(--paper); border-color: #CBDDF8;
  box-shadow: 0 0 0 2px rgba(26,115,232,.14);
}
.cc.rz9 .mp-i.is-sel .cc-cue{
  background: #EAF2FE; border-color: #C0D7F7; color: #1257C4;
}


/* ==========================================================================
   10 · UNDERLINED LINK — list
   "See Results" is underlined, which is the oldest and least ambiguous
   promise on the web that something will take you somewhere. The arrow
   sits outside the underline so the rule stays under the words only.
   Active: the card takes a very pale wash and the underline thickens.
   ========================================================================== */
.cc.rz10 .mp-m{ border-radius: 50%; }
.cc.rz10 .mp-v{ right: -2px; bottom: -2px; }
.cc.rz10 .mp-i .cc-tx{
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px; text-decoration-color: rgba(26,115,232,.45);
  transition: text-decoration-color .18s ease, text-decoration-thickness .18s ease;
}
.cc.rz10 .mp-i:hover{ background: #FBFDFF; border-color: #D3E2FA; }
.cc.rz10 .mp-i:hover .cc-tx{ text-decoration-color: currentColor; }
.cc.rz10 .mp-i.is-sel{ background: #F6FAFF; border-color: #CBDDF8; }
.cc.rz10 .mp-i.is-sel .cc-cue{ color: #1560CE; }
.cc.rz10 .mp-i.is-sel .cc-tx{
  text-decoration-thickness: 2px; text-decoration-color: currentColor;
}