/* V102 — the pricing page and the checkout, on a phone.
 *
 * The comparison table was built to scroll sideways: `.v087-compareWrap` has
 * `overflow-x:auto` and the table `min-width:520px`. On a 390px phone that is
 * 158px of table past the right edge, and the feature names - which is the only
 * column that tells the reader what they are comparing - slide out of view the
 * moment they swipe to reach "Yearly". Measured before this file: wrap 362,
 * content 520.
 *
 * A price comparison is the one table that must be read whole, so below 600px
 * it is made to fit instead: five columns, 11px, tighter padding, and the
 * feature name pinned to the left edge so it stays visible while the numbers
 * move. Nothing is hidden and nothing needs swiping.
 */

@media (max-width: 600px) {
  .v087-compareWrap { overflow-x: visible; }

  table.v087-compare {
    min-width: 0;
    width: 100%;
    font-size: 11px;
    table-layout: fixed;
  }

  .v087-compare th,
  .v087-compare td {
    padding: 7px 3px;
    line-height: 1.3;
    word-break: break-word;
    hyphens: auto;
  }

  .v087-compare thead th {
    font-size: 9.5px;
    letter-spacing: 0;
    padding: 8px 3px;
  }

  /* The first column carries the meaning; the four price columns only carry
     ticks and limits. */
  .v087-compare th:first-child,
  .v087-compare td:first-child {
    width: 34%;
    text-align: left;
    padding-left: 8px;
    font-size: 10.5px;
  }

  /* Long plan names keep to one line in their 11%-wide column. */
  .v087-compare thead th:not(:first-child) { font-size: 9px; }
}

/* The soft stop in front of the payment code. It appears only when the
   activation RPC is provably absent, and it says plainly that nothing has been
   charged - a half-configured checkout must not look like a scam. */
.v102-warn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 12px 0 16px;
  padding: 12px 14px;
  border: 1px solid #F5C2C7;
  border-radius: 12px;
  background: #FFF5F5;
  color: #7A1B1B;
}
.v102-warn b { font-size: 13px; }
.v102-warn span { font-size: 12px; line-height: 1.5; }
html[data-ial-theme="dark"] .v102-warn {
  border-color: #6B2B2B;
  background: #2A1717;
  color: #F6C9C9;
}

/* The plan cards on the pricing page: on a phone the three prices stack, and
   the featured one should still read first without the reader hunting. */
@media (max-width: 600px) {
  .v087-planGrid { gap: 10px; }
  .v087-plan { padding: 14px 12px; }
  .v087-planCta { min-height: 44px; }
}