/* Shared Free / Pro / Team pricing cards — used on landing + /pricing.
 *
 * theme.css is always linked ahead of this file on both pages, so the tokens
 * below are guaranteed to resolve; no hex fallbacks are repeated here. Every
 * colour must hold up in all three themes (warm / light / pink).
 */

.sm-pricing {
  width: 100%;

  /* The one literal in this file. Text that sits ON the accent fill needs a
   * fixed dark ink: --accent is a light-to-mid tone in all three themes
   * (warm gold, light goldenrod, pink rose), while --bg/--text flip with the
   * theme and would go white-on-gold in light. Contrast against the darkest
   * accent (light theme #b8860b) is 5.5:1. */
  --sm-ink-on-accent: #1a1508;
}

.sm-pricing-error {
  margin: 0 0 var(--s-4);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius);
  border: 1px solid var(--accent-alt);
  background: var(--accent-alt-soft);
  color: var(--accent-alt);
  font-size: 0.88rem;
  line-height: 1.45;
}

/* --- Billing period toggle -------------------------------------------- */

.sm-pricing-toggle-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  margin: 0 0 var(--s-5);
}

.sm-pricing-toggle {
  display: inline-flex;
  gap: 0.15rem;
  padding: 0.2rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  /* --surface, not --bg: the landing page runs this block on a --bg-elevated
   * section, where a --bg-elevated track would disappear into the section. */
  background: var(--surface);
}

.sm-pricing-toggle button {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  /* 2.25rem keeps both toggles a comfortable tap target on a phone. */
  min-height: 2.25rem;
  padding: 0 0.95rem;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.sm-pricing-toggle button:hover {
  color: var(--text);
}

.sm-pricing-toggle button.is-active,
.sm-pricing-toggle button.is-active:hover {
  background: var(--accent);
  color: var(--sm-ink-on-accent);
}

.sm-pricing-toggle-save {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--role-meta);
}

.sm-pricing-toggle-save:empty {
  display: none;
}

/* --- Grid -------------------------------------------------------------- */

.sm-pricing-grid {
  display: grid;
  gap: var(--s-5);
}

@media (min-width: 700px) {
  .sm-pricing-grid {
    grid-template-columns: 1fr 1fr;
    /* Not `stretch`. Stretching made every card as tall as the tallest, which
     * left ~200px of nothing under Free's shorter list and read as unfinished.
     * Sized to content, each card ends where its content ends and Pro is taller
     * because it genuinely carries more — which is the hierarchy we want. */
    align-items: start;
  }

  /* Three cards in two columns leaves a hole; Team takes the whole last row
   * instead so the block still reads as a finished grid at tablet width. */
  .sm-pricing-grid > .sm-pricing-card:nth-child(3) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1000px) {
  .sm-pricing-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .sm-pricing-grid > .sm-pricing-card:nth-child(3) {
    grid-column: auto;
  }
}

/* --- Card -------------------------------------------------------------- */

.sm-pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: var(--s-5);
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid var(--border);
  background: var(--surface);
}

@media (min-width: 700px) {
  .sm-pricing-card {
    padding: 1.75rem;
  }
}

/* Pro is the card we want chosen, so it is the focal point of the row rather
 * than a near-identical sibling: brighter surface, accent border, and it sits
 * proud of its neighbours top and bottom. The unfeatured cards recede to match
 * (see below) — the contrast is what does the work, not Pro alone. */
.sm-pricing-card.is-featured {
  border-color: var(--accent);
  background:
    linear-gradient(160deg, var(--accent-soft), transparent 62%),
    var(--surface);
}

@media (min-width: 1000px) {
  .sm-pricing-card.is-featured {
    /* Breaks the row's top line deliberately. The negative margin is paid back
     * by the extra padding below, so the card grows upward rather than
     * dragging the grid up with it. */
    margin-top: calc(var(--s-4) * -1);
    padding-top: calc(1.75rem + var(--s-4));
    padding-bottom: calc(1.75rem + var(--s-4));
    border-width: 1.5px;
    /* Lift. Kept as a soft ambient shadow plus a faint accent halo so it reads
     * as raised in the dark themes, where a plain black shadow is invisible. */
    box-shadow:
      0 1px 0 var(--accent-soft) inset,
      0 18px 40px -24px rgb(0 0 0 / 0.55),
      0 0 0 4px var(--accent-soft);
  }

  /* The other two step back so Pro reads as the recommendation. Muting the
   * border is enough — dimming the text would hurt legibility for anyone
   * actually comparing plans, which is the whole job of this page. */
  .sm-pricing-card:not(.is-featured) {
    border-color: var(--border-subtle);
  }
}

/* Pro's price carries the extra weight, since it is the number we want read
 * first. Free and Team keep the base size. */
@media (min-width: 1000px) {
  .sm-pricing-card.is-featured .sm-pricing-amount {
    font-size: 2.5rem;
  }
}

/* Row 1: plan name + the recommended flag.
 * The flag used to be absolutely positioned half outside the card top edge,
 * which collided with whatever sat above at narrow widths and pushed the
 * featured card out of line with its neighbours. It lives in the head row
 * now: same emphasis, nothing to overflow. */
.sm-pricing-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  /* Matches the flag height so every card head is the same depth, flag or not. */
  min-height: 1.7rem;
  margin: 0 0 var(--s-3);
}

.sm-pricing-plan {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.sm-pricing-flag {
  flex: none;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--accent);
  color: var(--sm-ink-on-accent);
}

/* Row 2 */
.sm-pricing-lead {
  margin: 0 0 var(--s-4);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Row 3 */
.sm-pricing-price {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin: 0 0 var(--s-2);
}

.sm-pricing-amount {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  min-height: 2.4rem;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  /* --text, not --accent: the light theme accent is #b8860b, which reaches
   * only 2.8:1 on the white card surface — under the 3:1 floor for large
   * text. The featured card is already marked out by its border, tint and
   * flag, so the price does not have to carry that job as well. */
  color: var(--text);
}

.sm-pricing-equivalent,
.sm-pricing-trial {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--text-secondary);
}

.sm-pricing-equivalent:empty,
.sm-pricing-trial:empty {
  display: none;
}

/* Secondary note under a price (currently Team annual savings). */
.sm-pricing-byok {
  margin: 0 0 var(--s-2);
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--role-meta);
}

.sm-pricing-byok:empty {
  display: none;
}

.sm-pricing-byok a {
  color: inherit;
}

/* Row 5 — seat stepper (Team only). */
.sm-pricing-seats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  margin: var(--s-3) 0 0;
}

.sm-pricing-seats label {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.sm-pricing-seats input {
  width: 4.5rem;
  font: inherit;
  font-size: 0.92rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.45rem 0.6rem;
}

.sm-pricing-stepper {
  display: inline-flex;
  align-items: stretch;
  /* 2.5rem/40px tall with 2.5rem-wide buttons — a usable touch target. */
  min-height: 2.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
}

.sm-pricing-step {
  font: inherit;
  font-size: 1.05rem;
  line-height: 1;
  width: 2.5rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.sm-pricing-step:hover {
  background: var(--surface-hover);
  color: var(--accent);
}

.sm-pricing-seats .sm-pricing-stepper input {
  width: 3.25rem;
  border: none;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-radius: 0;
  text-align: center;
  padding: 0.45rem 0.25rem;
  -moz-appearance: textfield;
  appearance: textfield;
}

.sm-pricing-seats .sm-pricing-stepper input::-webkit-outer-spin-button,
.sm-pricing-seats .sm-pricing-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.sm-pricing-seat-min {
  font-size: 0.8rem;
  color: var(--text-tertiary);
}

/* Screen-reader-only seat total announcement. */
.sm-pricing-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  margin: -1px;
}

/* Row 6 — call to action. */
.sm-pricing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-5);
}

.sm-pricing-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  box-sizing: border-box;
  height: 2.75rem;
  min-height: 2.75rem;
  padding: 0 1.15rem;
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  background: var(--accent);
  color: var(--sm-ink-on-accent);
  border: 1px solid transparent;
}

.sm-pricing-cta .ico {
  width: 1rem;
  height: 1rem;
}

.sm-pricing-cta:hover {
  filter: brightness(1.05);
}

/* Free and Team read as alternatives to Pro, not competitors for the eye. */
.sm-pricing-cta-quiet {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}

.sm-pricing-cta-quiet:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
  filter: none;
}

.sm-pricing-secondary {
  font-size: 0.88rem;
  font-weight: 550;
  color: var(--text-secondary);
  text-decoration: none;
}

.sm-pricing-secondary:hover {
  color: var(--accent);
}

/* Row 7 — feature list. The rule above it lands on the same line in all three
 * cards, which is what makes the columns read as one table. */
.sm-pricing-features {
  list-style: none;
  /* No rule above the list. Each card's offer block is a different height —
   * Team carries a seat stepper while Pro and Free do not, so a
   * full-width line here draws a hard edge at three different heights and the
   * row reads ragged. Whitespace separates the offer from what you get without
   * advertising the stagger. */
  margin: var(--s-5) 0 0;
  padding: 0;
  display: grid;
  align-content: start;
  gap: var(--s-3);
  flex: 1;
  min-height: 9.5rem;
}

/* No features from the API — do not leave a rule hanging under the CTA. */
.sm-pricing-features:empty {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.sm-pricing-features li {
  display: grid;
  grid-template-columns: 1rem 1fr;
  align-items: start;
  gap: var(--s-2);
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.45;
}

/* The tick is inline SVG, so it needs an explicit box or it fills the card. */
.sm-pricing-tick {
  width: 1rem;
  height: 1rem;
  flex: none;
  margin-top: 0.2em;
  color: var(--accent);
}

/* Cross-card alignment: the price row only.
 *
 * An earlier pass pinned all seven slots to shared subgrid rows so the CTAs
 * lined up too. That aligned the buttons and left a ~145px hole in Free, which
 * carries no seat stepper while Team does — a void
 * reads as broken far more than a slightly low button does.
 *
 * So only the lead paragraph is normalised, which is enough to put the three
 * prices on one line. The price is what the eye actually compares between
 * plans; everything below it flows at its natural height with no gaps. Cards
 * still finish level because the grid stretches them, and the leftover space
 * lands harmlessly inside the shorter card's bottom padding.
 */
@media (min-width: 1000px) {
  /* Two lines of lead copy. Free's is one line, Pro's and Team's are two, and
   * without this the price row steps down by a line across the row. */
  .sm-pricing-lead {
    min-height: calc(2 * 1.5em);
  }
}

/* --- Focus ------------------------------------------------------------- */

.sm-pricing-toggle button:focus-visible,
.sm-pricing-step:focus-visible,
.sm-pricing-cta:focus-visible,
.sm-pricing-secondary:focus-visible,
.sm-pricing-byok a:focus-visible,
.sm-pricing-page-footer-note a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* The stepper input sits flush inside the stepper border, so the ring goes in. */
.sm-pricing-seats input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

/* --- Full pricing page shell (landing chrome) -------------------------- */

.sm-pricing-page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--s-6) var(--page-pad) var(--s-7);
}

@media (min-width: 700px) {
  .sm-pricing-page {
    padding-top: 2.5rem;
    padding-bottom: 3.5rem;
  }
}

.sm-pricing-page-intro {
  margin: 0 0 var(--s-6);
  max-width: 36rem;
}

.sm-pricing-page-intro h1 {
  margin: 0 0 var(--s-2);
  font-size: clamp(1.75rem, 3.5vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
}

.sm-pricing-page-intro p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Flex + gap rather than whitespace-dependent inline links: the separators are
 * real text nodes in the markup, and a wrapped line keeps its spacing. */
.sm-pricing-page-footer-note {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-2);
  margin: var(--s-6) 0 0;
  font-size: 0.82rem;
  color: var(--text-tertiary);
}

.sm-pricing-page-footer-note a {
  color: var(--text-secondary);
  text-decoration: none;
}

.sm-pricing-page-footer-note a:hover {
  color: var(--accent);
}

/* Was an inline style="margin-top" on landing.html's pricing block;
 * moved here so the CSP can drop style-src 'unsafe-inline'. */
.sm-pricing-spaced {
  margin-top: var(--s-6);
}