/* ==========================================================================
   Calls & messages · the two lanes and their state marks
   ==========================================================================
   The page compares the same two options twice — once as a table of what you
   can do, once as the board that settles the number question — so both the
   options' identities and the vocabulary of the answers are declared here,
   once, and the two sections only ever read them.

   Violet is the number you already own, mint is the Bloom AI one. Neither is
   the winning colour: the argument is that both are open.

   The answers are typed, not scored:

   `in-app` (mint)  — Bloom AI handles it, end to end.
   `relay` (violet) — it works, through the line you already pay for.
   `free`  (grey)   — nothing to do.

   The state's colour is never the option's: a mint mark means "handled in the
   app" wherever it sits, including in the "keep your number" column. Loaded by
   the page shell before the two sections that use it.

   One prefix, one owner: `--cm-*` is the page's and is declared here, `--nc-*`
   and `--cap-*` belong to the section that names them, and `--lane-rgb` is the
   tone an element resolves to.
   ========================================================================== */

/* Page-scoped by loading, not by selector: this sheet ships with the calls and
   messages page alone. */
.features-page {
  --cm-keep-rgb: 169, 144, 255;
  --cm-new-rgb: 25, 206, 136;

  /* The hairline both tables are drawn with: row rules, criterion rules and the
     axis between the columns are all this one line, so the two read as one. */
  --cm-line: rgba(176, 173, 224, 0.22);

  /* How lit the thing being read is — 0 at rest, 1 under the pointer. Declared
     here because the state mark below reads it, and set by the sections that
     have something to light (see NumberChoiceSection/styles/interaction.css). */
  --cm-lit: 0;
}

.feat-state-tag {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
  color: rgb(var(--tag-rgb));
  font-family: var(--feat-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* One mask, three glyphs: each state below only names its own drawing. The
   glyph is the only thing that lights when a section reads its rows — nothing
   is drawn around it, and nothing moves. A section that lights nothing never
   raises `--cm-lit`, and the mark stays flat. */
.feat-state-tag__mark {
  width: 0.85rem;
  height: 0.85rem;
  background: currentcolor;
  filter: drop-shadow(0 0 calc(var(--cm-lit) * 8px) rgba(var(--tag-rgb), 0.85));
  -webkit-mask-image: var(--state-mark);
  mask-image: var(--state-mark);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: filter 280ms ease;
}

[data-state='in-app'] {
  --tag-rgb: var(--cm-new-rgb);
  --state-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

[data-state='relay'] {
  --tag-rgb: var(--cm-keep-rgb);
  --state-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5v6a4 4 0 0 0 4 4h11'/%3E%3Cpath d='m15 11 4 4-4 4'/%3E%3C/svg%3E");
}

[data-state='free'] {
  --tag-rgb: 161, 158, 190;
  --state-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}