/* market.css — the public pages that are not the landing and not a sign-in
   card: /pricing and /blog.

   They share the landing's bar, foot, wash and tokens, so this file only
   carries what a page of prose and a page of plans need that the landing does
   not: a head band, a measure for body text, a table, and the price cards.
   Every colour is a token from ovision.css, so dark is a value change. */

body.market { background: var(--land-canvas, #fbf8f9); }

/* ================================================================= the head
   A short band with the wash behind it rather than a full-height hero: these
   pages are read, and a screen of gradient before the first sentence is a
   scroll a reader did not ask for. */
.mk-head { position: relative; isolation: isolate; overflow: hidden; padding: clamp(5rem, 12vh, 8rem) 1.5rem clamp(2rem, 5vh, 3.5rem); }
.mk-head-wash {
  position: absolute; inset: -30% 0 auto; height: 150%; z-index: -1; opacity: .3;
  background:
    radial-gradient(42% 40% at 12% 30%, #8fa0ff 0%, transparent 62%),
    radial-gradient(42% 40% at 88% 26%, #d7b3ff 0%, transparent 62%),
    radial-gradient(64% 44% at 50% 78%, #ff8fba 0%, transparent 66%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 92%);
}
.mk-head-inner { max-width: 1180px; margin: 0 auto; }
.mk-head h1 {
  font-family: var(--sans); font-size: clamp(2rem, 4.4vw, 3rem);
  font-weight: 700; letter-spacing: -.04em; line-height: 1.05;
  color: var(--heading, #17131a); margin: 0 0 .6rem; text-wrap: balance;
}
.mk-lede { font-size: 1.02rem; line-height: 1.6; color: var(--text-2); margin: 0; max-width: 62ch; }
.mk-fine { font-size: .84rem; line-height: 1.6; color: var(--text-3); margin: .9rem 0 0; max-width: 72ch; }
/* A path in running text may break anywhere: unbroken, a long one widened the
   pricing page past a 390px phone. */
.mk-fine code, .mk-lede code, .price-honest code { font-family: var(--mono); font-size: .92em; overflow-wrap: anywhere; }

/* ================================================================ the bands */
.mk-band { padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem; }
/* The head band already carries the bottom air; a second full pad under it
   put a screen's worth of nothing between the lede and the cards. */
.mk-head + .mk-band { padding-top: .5rem; }
.mk-band-quiet { background: var(--canvas); border-block: 1px solid var(--line); }
.mk-inner { max-width: 1180px; margin: 0 auto; }
.mk-h2 {
  font-family: var(--sans); font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 700; letter-spacing: -.03em; line-height: 1.15;
  color: var(--heading, #17131a); margin: 0 0 .5rem; text-wrap: balance;
}

/* ============================================================ price cards */
.price-grid {
  display: grid; gap: .9rem; margin-top: .4rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.price-card {
  display: flex; flex-direction: column; gap: .45rem;
  padding: 1.4rem 1.3rem 1.3rem; border-radius: 16px;
  background: var(--paper); border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(98, 16, 44, .04), 0 10px 30px -20px rgba(98, 16, 44, .24);
}
/* One card is marked, and the mark is a ring plus the filled action inside
   it — never colour alone, and never a "most popular" claim, which is a
   number nobody here has. */
.price-card .price-includes { flex: 1 1 auto; }
.price-card.is-featured { border-color: var(--ink-500); box-shadow: 0 0 0 1px var(--ink-500), 0 14px 36px -22px rgba(98, 16, 44, .3); }
.price-card h2 { font-family: var(--sans); font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; margin: 0; color: var(--heading, #17131a); }
.price-for { margin: 0; font-size: .82rem; line-height: 1.45; color: var(--text-3); }
/* Four cards whose audience and price notes run to two or three lines each
   put their buttons on four different baselines, which reads as four
   unrelated cards rather than one comparison. The two blocks that vary get
   the height of their longest instance, so every action lands on one line.
   Only above the width where the cards actually sit side by side. */
@media (min-width: 720px) {
  .price-for { min-height: 3.2em; }
  .price-note { min-height: 4.6em; }
}
.price-amount {
  margin: .5rem 0 0; font-family: var(--sans);
  font-size: 1.75rem; font-weight: 700; letter-spacing: -.035em; line-height: 1;
  color: var(--text-3);
}
.price-amount.is-free { color: var(--heading, #17131a); }
.price-note { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--text-2); }
.price-adds-head {
  margin: .9rem 0 .1rem; padding-top: .85rem; border-top: 1px solid var(--line);
  font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-3);
}
.price-includes { margin: .35rem 0 0; padding: 0; list-style: none; font-size: .8rem; line-height: 1.5; color: var(--text-2); }
.price-includes li { display: flex; gap: .4rem; align-items: baseline; margin: 0 0 .28rem; }
.price-includes li .ico { color: var(--ink-600); flex: none; transform: translateY(1px); }
.price-includes-prose { color: var(--text-3); line-height: 1.55; }
.price-cta {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: .35rem; padding: .6rem 1.1rem; border-radius: 10px;
  font-size: .86rem; font-weight: 600; text-decoration: none;
  background: var(--paper); color: var(--text); border: 1px solid var(--line-2);
  transition: background .12s ease, border-color .12s ease;
}
.price-cta:hover { background: var(--canvas-2); text-decoration: none; border-color: var(--line-2); }
.price-cta.is-primary { background: var(--btn-bg, #17131a); color: var(--btn-fg, #fff); border-color: var(--btn-bg, #17131a); }
.price-cta.is-primary:hover { background: var(--btn-bg-hover, #2b2229); border-color: var(--btn-bg-hover, #2b2229); }

.price-honest {
  display: flex; gap: .45rem; align-items: flex-start;
  margin: 1.4rem 0 0; max-width: 78ch;
  font-size: .84rem; line-height: 1.6; color: var(--text-2);
}
.price-honest .ico { color: var(--amber); flex: none; margin-top: .22rem; }

/* ================================================================ integrity */
.mk-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; margin: 1rem 0 0; }
.mk-chips li {
  font-size: .76rem; padding: .22rem .6rem; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--paper); color: var(--text-2);
}

/* =================================================================== table */
.mk-table-wrap { overflow-x: auto; margin-top: 1.2rem; }
.mk-table { width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 560px; }
.mk-table th, .mk-table td { padding: .6rem .7rem; text-align: left; border-bottom: 1px solid var(--line); }
.mk-table thead th { font-size: .78rem; font-weight: 600; color: var(--text-3); letter-spacing: .02em; }
.mk-table tbody th { font-weight: 500; color: var(--text-2); }
.mk-table td { color: var(--text); font-variant-numeric: tabular-nums; }

.mk-cta { text-align: center; }
.mk-cta .mk-lede { margin-inline: auto; }
.mk-cta-row { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin: 1.2rem 0 0; }