/* entry-bar.v3.css - the pricing bar's own two rules.
 *
 * v3 (2026-09-24): "Starter" is set exactly like the three plan names under
 * it (Standard / Pro / Premier: 20px, semibold, no tracking) -- same size as
 * the rest, as asked. It also repairs v2, whose header comment was closed
 * one paragraph early: the leftover text became part of the next selector,
 * which made the whole .jp-entry-name rule invalid, so the name fell back to
 * the inherited 16px and looked smaller than every other plan name.
 *
 * v2 == v1 plus air between the "Starter" name and its feature grid (the
 * NAME/LIST GAP rules at the end of this file).
 *
 * WHY A SEPARATE SHEET. Tailwind purged everything the original build did not
 * use, so `text-[26px]` compiles to nothing and the title silently falls back
 * to inherited size. The nine other hand-added *.v*.css files linked from
 * index.html are the established way to add to this page, and keeping these
 * rules in one named file makes them findable after a landing republish
 * wipes the bundle edits. */
/* The plan cards' h3 is `text-[20px] font-semibold`: 20px, weight 600 (from
   the bundle's own font-semibold on this element too), inherited 1.5 line
   height, no letter-spacing. Stated in full so nothing inherits a
   difference. */
.jp-entry-name{font-size:20px;line-height:1.5;letter-spacing:normal}
/* ---------- the countdown, under the lineup ----------
 * It used to sit inside each of the four locked pills, which put four moving
 * objects on the one screen that is meant to be read as a comparison. One
 * clock, once, under the prices - the same component and the same size as the
 * locked screen, so it reads as the same clock in both places. */
.jp-relclock{display:flex;flex-direction:column;align-items:center;gap:14px;
  margin-top:56px}
.jp-relclock-k{font-size:11.5px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--fg-subtle,rgba(0,0,0,.45));margin:0}

/* ---------- the entry bar's price column ----------
 * TWO THINGS, both about the locked pill under "29 / month".
 *
 * The column is pushed off the card's right edge. It used to be held there by
 * a 210px minimum width on the button, and taking that away to make the pill
 * match the price also let the whole group slide into the corner.
 *
 * And the pill is wider than the price it belongs to - a third of its own
 * width added on each side, centred on the number. Percentages resolve
 * against this column, whose width IS the price, so 166.667% with -33.333%
 * of margin on both sides is exactly that and stays exact if the price
 * changes width. The right-hand overhang is what the margin below has to
 * clear before it starts buying distance from the edge. */
.jp-entry-col{margin-right:36px;margin-left:24px}
.jp-entry-col .cta-locked{width:166.667%;margin-inline:-33.333%}

/* THE LEFT MARGIN IS CLEARANCE, NOT SYMMETRY. The pill hangs a third of its
   width past this column on BOTH sides, and what is on the left is the feature
   list - the widened pill printed straight over "Lens Button" without it.
   Anything that makes the pill wider has to widen this too.

   36px ON THE RIGHT AND NOT MORE, and that number was measured rather than
   picked. The bar is one line by design, and the feature row wraps to two the
   moment this column takes more than about 40px of extra width: at 36px the
   five features stay on one row with 34px of clearance to the pill, and the
   pill sits 26px inside the bar's own padding - so ~54px off the card edge,
   against the ~28px it had when it was jammed into the corner. Below 1100px
   the row wraps anyway, which is ordinary and does not overlap. */

/* ---------- the feature list: TWO ROWS, IN EVERY LANGUAGE ----------
 * It was a wrapping flex row, so how many lines it took depended on how long
 * the words happened to be: English and German fitted on one, French did not
 * ("Détection des spams et des faux"), and the bar changed height when the
 * language picker changed - which reads as the layout breaking rather than as
 * a translation being longer.
 *
 * A THREE-COLUMN GRID FIXES THE COUNT RATHER THAN THE WIDTH. Five features
 * over three columns is 3 + 2 whatever the strings say, so every locale gets
 * the same two rows and the same bar height, and the columns line up instead
 * of ragging. max-content, so a column is exactly as wide as its longest
 * entry and no language is padded out to another's measure.
 *
 * Anything that changes the number of features has to be checked here: six
 * would still be two rows, seven would silently become three. */
.jp-entry-feat{display:grid;grid-template-columns:repeat(3,max-content);
  gap:11px 26px;justify-content:start;margin:0;padding:0;list-style:none}
.jp-entry-feat > li{display:flex;align-items:flex-start;gap:8px}
/* Below the bar's own stacking point the three columns stop fitting beside a
   price, so it drops to two - three rows there, but the bar is stacked by then
   and every language is still the same height as every other. */
@media (max-width:1100px){
  .jp-entry-feat{grid-template-columns:repeat(2,max-content);gap:12px 22px}
}
@media (max-width:620px){
  .jp-entry-feat{grid-template-columns:max-content}
}

/* ---------- NAME / LIST GAP (v2) ----------
 * The list carries the bundle's `mt-3`, but `.jp-entry-feat{margin:0}` above
 * cancels it on purpose (it is also what keeps the grid flush on the left),
 * so the gap is stated here rather than by fighting the utility. 14px under
 * the name's 30px line (18px in v2, under a 24px line): the visible space
 * between the name and the first row stays what v2 gave it. */
.jp-entry-name{margin-bottom:0}
.jp-entry-feat{margin-top:14px}