/* Nikosa — pricing page layout.
   Chrome (topbar, footer, buttons, eyebrow, doc head) is shared with legal.css;
   this file only adds the pricing column, tier sections, and plan cards. Every
   colour, type, spacing, and motion value resolves from the design-system tokens
   loaded by styles.css — nothing hard-codes a brand value here. */

/* ---- Wider column than the legal docs to hold a 3-up card grid ---- */
.pricing {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-16) var(--space-6) var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

/* ---- Top bar gets a small nav cluster (back + sign in) ---- */
.topbar__nav {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}
.topbar__signin {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  padding: 8px 14px;
  border-radius: var(--radius-btn);
  border: 1px solid color-mix(in srgb, var(--color-primary) 38%, transparent);
  color: var(--color-primary);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.topbar__signin:hover {
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  border-color: var(--color-primary);
  color: var(--text-strong);
}

/* ---- Tier section: heading + blurb, then the card grid ---- */
.tier {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.tier__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 62ch;
}
.tier__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-snug);
  color: var(--text-strong);
  font-size: var(--text-h2);
  margin: 0;
}
.tier__blurb {
  font-size: var(--text-base, 16px);
  line-height: var(--leading-body);
  color: var(--text-body);
  margin: 0;
}

/* ---- Family location: a quiet mono tag baseline-aligned beside the title.
        Mirrors the per-service location on the app catalog; subordinate to the
        display heading so it reads as metadata, and wraps under it on narrow
        widths rather than crowding the title. ---- */
.tier__titlerow {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}
.tier__loc {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---- Plan card grid: fixed-width modules, left-packed, so cards are the same
        width and columns line up across tiers regardless of card count (a 2-card
        tier sits flush under a 3-card tier instead of stretching to fill). ---- */
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
  justify-content: start;
  gap: var(--space-4);
}

.plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--pad-card);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  transition: border-color var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}
.plan:hover {
  border-color: color-mix(in srgb, var(--color-primary) 55%, var(--border-default));
  transform: translateY(-2px);
}

.plan__name {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-heading);
  color: var(--text-strong);
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  margin: 0;
}

/* ---- Price: large amount + quiet mono interval ---- */
.plan__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
}
.plan__amount {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
  color: var(--text-strong);
  font-size: var(--text-price);
  line-height: 1;
}
.plan__interval {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  /* --text-body (not --text-muted): the muted alias clears AA on the page ground
     but only 4.27:1 on the lighter card surface; "/mo" is meaningful price info. */
  color: var(--text-body);
}

/* ---- Price qualifier (e.g. "per domain"): quiet mono line under the price.
        Pulled up against the gap so it reads as part of the price block. ---- */
.plan__note {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  /* --text-body, not --text-muted: the muted alias only clears 4.27:1 on the
     lighter card surface, and this qualifies the price — so it must meet AA
     (same reasoning as .plan__interval above). */
  color: var(--text-body);
  margin: calc(var(--space-2) * -1) 0 0;
}

/* ---- Spec list: mono, one chip per line, blue tick markers ---- */
.plan__specs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  /* push the CTA to the bottom so cards of unequal spec counts align */
  flex: 1 1 auto;
}
.plan__spec {
  position: relative;
  padding-left: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--text-body);
}
.plan__spec::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}

.plan__cta {
  align-self: flex-start;
  margin-top: var(--space-1);
}

/* ---- Closing note ---- */
.pricing__note {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  line-height: var(--leading-body);
  color: var(--text-faint);
  margin: 0;
  max-width: 62ch;
}
.pricing__note a { color: var(--text-muted); }
.pricing__note a:hover { color: var(--text-strong); }

@media (max-width: 600px) {
  .pricing { padding-top: var(--space-12); gap: var(--space-8); }
  .topbar__nav { gap: var(--space-3); }
  /* Stack cards full-width on phones rather than leaving a 320px card floating left. */
  .plans { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .plan, .topbar__signin { transition: none; }
  .plan:hover { transform: none; }
}