/* THE PLAN CARDS, ON EVERY KOEIA PAGE THAT DRAWS THEM.
   The landing's plans section (views/plans.xml, koeia_website.plans_section)
   is drawn by the landing and by the portal's /plans, which do not share a
   page sheet (services-v3 on the landing, essentials under website.layout),
   so the cards' own rules live here, moved as they were from
   pages/services-v3.css, and the head links this sheet right after the page
   sheet: on the landing they keep their place in the cascade. The rest of
   the cards' design is in koeia-site.css (17-18, 28, 33, 36, 40) and
   koeia-pages.css (Start now, the comparison), both on every page. */

/* ---- The two plans -------------------------------------------------------
   Both cards are the same four steps and the price is the difference in how
   much of the business goes through them, so the cards are the same shape and
   the same weight. A "recommended" one, lifted or outlined, would be the page
   choosing for a reader it has just spent four questions asking.

   Two columns that become one under the tablet breakpoint, where two cards
   side by side are two columns of six characters. */
/* BOTH CARDS, SIDE BY SIDE, AND ONE OF THEM MARKED. Showing one at a time
   behind a "see the other one" made the reader take the recommendation on
   faith and press to check it; two cards let them see what they were not
   given, which is the same information in one glance instead of two. */
.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  width: 100%;
  margin: var(--space-4) auto 0;
  text-align: left;
}

/* THE MARK IS THE LIFT, not a coloured edge — no border on this site may carry
   a colour, and the one that is recommended is the one standing up off the
   page while the other lies flat on it. */
.plans .plan { box-shadow: none; }

.plans .plan.is-it { box-shadow: var(--lift-2); }

.plan {
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-3);
  border-radius: var(--radius-xl);
  background: var(--nix-surface);
  box-shadow: var(--lift-2);
}

/* icon and name on one row, the way the first version of this page drew them */
.plan__head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: var(--space-2);
}

.plan__icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
}

/* the name is a label, the price is the headline: a reader comparing two cards
   is comparing two numbers, and the number should be what the eye lands on */
.plan__name {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nix-text-soft);
}

.plan__what {
  margin: var(--space-2) 0 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--nix-text-soft);
  text-wrap: pretty;
}

/* the line that says the second card contains the first. It is the whole
   reason these two are not alternatives, so it reads at full strength rather
   than as one more grey note. */
.plan__inc {
  margin: var(--space-2) 0 0;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--nix-text);
}

/* Foundation's eight, printed: icon box + name, one per row. */
.plan__mods {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.plan__mod {
  display: flex;
  align-items: center;
  gap: 11px;
}

.plan__mod-name {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
}

.plan__app {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--chip-tint);
}

.plan__app img {
  width: 64%;
  height: 64%;
  display: block;
}

/* Industry's catalogue, on a loop. Two copies of the list stacked; the track
   slides exactly one copy's height and snaps back, so the seam never shows. */
.plan__stream {
  position: relative;
  /* flex-basis 0, NOT auto. With auto the basis is the content height — two
     copies of seventeen rows — so overflow:hidden would clip it while the card
     still grew to that height. Basis 0 means the stream contributes nothing to
     the card's intrinsic height; it fills whatever the grid leaves once the
     taller card has set the row. */
  flex: 1 1 0;
  min-height: 200px;
  overflow: hidden;
  margin: var(--space-3) 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}

.plan__stream-track {
  animation: plan-stream 51s linear infinite;
}

/* margin, not flex gap: the loop slides exactly half the track, and a gap
   between the two copies would be one gap short of that */
.plan__stream-row {
  margin-bottom: var(--space-2);
}

@keyframes plan-stream {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .plan__stream-track { animation: none; }
}

.plan__cta {
  display: block;
  margin-top: auto;
  padding: 11px 16px;
  border-radius: 11px;
  text-align: center;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: inherit;
  border: 1px solid var(--nix-rule);
  transition: background-color 200ms ease;
}

.plan__cta:hover {
  background: var(--chip-tint);
}

@media (max-width: 900px) {
  /* one under the other: two cards side by side here are two columns of six
     characters, and the loop has no neighbour setting its height any more */
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan__stream { min-height: 180px; }
}