/* ─────────────────────────────────────────────────────────────────────────
   pages2.css — pricing, changelog and evals. Everything these three pages
   need that rivet.css / scenes.css did not already build. Reuses .scene,
   .rule, .label, .d1/.d2, .body, .faq, .tiers/.tier, .counts and .under from
   the two base sheets rather than duplicating them — this file only adds
   what is genuinely new: the changelog rail and the evals table.
   ───────────────────────────────────────────────────────────────────────── */

/* ── changelog: a sticky rail of dated entries ───────────────────────────── */

.log-layout {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.log-rail {
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 1px solid var(--line);
  padding-left: 18px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.log-rail a {
  padding: 8px 0;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--fg-3);
  transition: color .2s var(--ease);
  white-space: nowrap;
}
.log-rail a:hover { color: var(--fg); }
.log-rail a.on { color: var(--cu); }

.log-entries { display: flex; flex-direction: column; }
.log-entry {
  padding: 44px 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 88px;
}
.log-entry:first-child { padding-top: 0; }
.log-entry:last-child { border-bottom: 0; }

.log-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.log-head .ver {
  font-variation-settings: 'wdth' 112;
  font-weight: 640;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  letter-spacing: -.03em;
}
.log-head .date { font-family: var(--mono); font-size: 13px; color: var(--fg-3); }
.log-head .badge {
  font-size: 11px; font-weight: 640; letter-spacing: .01em;
  padding: 2px 9px; border-radius: 99px;
  background: rgb(var(--accent-rgb) / .12); color: var(--cu-deep);
}
.log-summary { color: var(--fg-2); font-size: 15px; line-height: 1.6; margin: 12px 0 26px; max-width: 62ch; }

.log-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.log-group h4 {
  margin: 0 0 12px;
  font-variation-settings: 'wdth' 76;
  font-weight: 640;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fg-3);
}
.log-group ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.log-group li { display: flex; gap: 9px; font-size: 14px; color: var(--fg-2); line-height: 1.55; }
.log-group li::before { content: '—'; color: var(--fg-3); flex-shrink: 0; }

@media (max-width: 860px) {
  .log-layout { grid-template-columns: 1fr; }
  .log-rail {
    position: static; flex-direction: row; flex-wrap: wrap; gap: 4px 14px;
    border-left: 0; border-top: 1px solid var(--line);
    padding: 16px 0 0; max-height: none; margin-bottom: 8px;
  }
}

/* ── changelog: the area filter, permalinks and per-release figures ───────
   The filter hides whole RELEASES, not individual lines, and the label says
   "Filter releases by area" for that reason — a filter that claims to be
   finer than it is, is a small lie the reader finds out about immediately.
   Every entry carries `data-area`, and the count under the row is a
   live region so a screen reader is told how many survived the filter
   instead of being left to discover it by scrolling. */

.log-filter { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 30px; }
.log-filter button {
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--sub);
  font: inherit;
  font-size: 13px;
  font-weight: 520;
  letter-spacing: -.008em;
  color: var(--fg-2);
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.log-filter button:hover { color: var(--fg); border-color: var(--line-2); }
.log-filter button.on {
  background: var(--cu);
  border-color: var(--cu);
  color: var(--cta-ink);
}
.log-filter button:focus-visible { outline: 2px solid var(--cu); outline-offset: 2px; }

.log-count { margin: 14px 0 0; font-size: 13px; color: var(--fg-3); min-height: 1.2em; }

/* The permalink. Present in the markup rather than injected, so it is there
   with JS off, and it is a real href a person can right-click and copy. */
.log-link {
  margin-left: auto;
  padding: 0 6px;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--line-2);
  opacity: 0;
  transition: opacity .18s var(--ease), color .18s var(--ease);
}
.log-entry:hover .log-link, .log-link:focus-visible { opacity: 1; }
.log-link:hover { color: var(--cu); }
:target .log-link { opacity: 1; color: var(--cu); }
/* The fixed bar is 62px; without this an anchored entry lands under it. */
.log-entry { scroll-margin-top: 84px; }

.log-figure {
  margin: 22px 0 26px;
  max-width: 720px;
}
/* The panel capture is 960px natural and the resolution gate wants 2x, so it
   is never allowed wider than 460. Narrow suits a tall panel shot anyway. */
.log-figure.narrow { max-width: 440px; }
.log-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.log-figure figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-3);
}

.log-entry[hidden] { display: none; }

/* ── evals: the method, and the table ────────────────────────────────────── */

.ev-case {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--sub);
  padding: 20px 22px;
  font-size: 13.5px;
}
.ev-case .k { color: var(--fg-3); }
.ev-case pre {
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.65;
  color: var(--fg-2);
  overflow-x: auto;
  white-space: pre;
}

.scroll { overflow-x: auto; }
table.ev-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 560px; }
.ev-table th, .ev-table td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.ev-table th {
  font-variation-settings: 'wdth' 78;
  font-weight: 640;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--fg-3);
}
.ev-table td.num { font-family: var(--mono); text-align: right; white-space: nowrap; }
.ev-table td.who { color: var(--fg-2); }
.ev-table tr.feat td { color: var(--fg); font-weight: 550; }
.ev-table tr.feat td.num { font-weight: 640; }
.ev-table tr:last-child td { border-bottom: 0; }

.ev-note {
  border: 1px solid var(--line);
  border-left: 2px solid var(--cu-deep);
  border-radius: 0 5px 5px 0;
  padding: 18px 22px;
  background: var(--sub);
}
.ev-note b { display: block; margin-bottom: 7px; }
.ev-note p { margin: 0; color: var(--fg-2); font-size: 14.5px; line-height: 1.6; }
.ev-note + .ev-note { margin-top: 14px; }

/* ── blog ─────────────────────────────────────────────────────────────────
   A post list and a post body. There is no CMS and no build step, so a post
   is a hand-written index.html in a directory named after its slug, and the
   listing on blog/index.html is maintained by hand alongside it. That is fine
   at this size and would not be at fifty posts — at which point this needs a
   generator, not a bigger stylesheet. */

.postlist { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.postlist > a {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) 22px;
  /* Row gap 0: the description sits on its own implicit row and a shared gap
     would push it a full 26px off the title it belongs to. */
  gap: 0 26px;
  align-items: baseline;
  padding: 30px 8px 30px 4px;
  border-bottom: 1px solid var(--line);
  transition: background .18s var(--ease), padding-left .22s var(--ease);
}
.postlist > a:hover { background: rgb(var(--fg-rgb) / .028); padding-left: 12px; }
.postlist .when { font-family: var(--mono); font-size: 12.5px; color: var(--fg-3); white-space: nowrap; }
.postlist .w {
  font-size: 1.32rem;
  font-variation-settings: 'wdth' 104;
  font-weight: 600;
  letter-spacing: -.022em;
  color: var(--fg);
  line-height: 1.2;
}
.postlist .d {
  grid-column: 2;
  margin-top: 9px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-3);
  max-width: 62ch;
}
.postlist .arw { color: var(--fg-3); transition: transform .22s var(--ease), color .22s var(--ease); }
.postlist > a:hover .arw { color: var(--cu); transform: translateX(4px); }
@media (max-width: 720px) {
  .postlist > a { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .postlist .d, .postlist .arw { grid-column: 1; }
  .postlist .arw { display: none; }
}

/* The post body. One column, generous measure, and the same type scale the
   rest of the site uses — a blog post is not a different product. */
.post { max-width: 68ch; }
.post > * { margin: 0 0 20px; }
.post > *:last-child { margin-bottom: 0; }
.post p { font-size: 1.05rem; line-height: 1.72; color: var(--fg-2); }
.post h2 {
  margin-top: 52px;
  font-size: clamp(1.5rem, 2.5vw, 1.92rem);
  font-variation-settings: 'wdth' 104;
  font-weight: 620;
  letter-spacing: -.026em;
  line-height: 1.16;
  color: var(--fg);
}
.post h3 {
  margin-top: 36px;
  font-size: 1.1rem;
  font-weight: 620;
  letter-spacing: -.016em;
  color: var(--fg);
}
.post a:not(.cta):not(.ghost):not(.feat-link) {
  color: var(--fg);
  border-bottom: 1px solid var(--line-2);
  transition: border-color .2s var(--ease);
}
.post a:not(.cta):not(.ghost):not(.feat-link):hover { border-bottom-color: var(--cu); }
.post ul, .post ol { padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.post li { font-size: 1.02rem; line-height: 1.66; color: var(--fg-2); }
.post li::marker { color: var(--fg-3); }
.post blockquote {
  margin-left: 0;
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--cu-deep);
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--fg);
}
.post figure { margin: 34px 0; max-width: none; }
.post figcaption { margin-top: 11px; font-size: 13.5px; line-height: 1.55; color: var(--fg-3); }
.post table { width: 100%; border-collapse: collapse; margin: 28px 0; font-size: 14.5px; }
.post th {
  text-align: left; padding: 0 14px 10px 0;
  font-variation-settings: 'wdth' 72;
  font-weight: 620; font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--fg-3); border-bottom: 1px solid var(--line);
}
.post td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line); color: var(--fg-2); }
.post td.num { font-family: var(--mono); white-space: nowrap; }
.post hr { border: 0; border-top: 1px solid var(--line); margin: 44px 0; }

/* Byline under a post title. The date is machine data, so it is mono; the
   rest is not, so it is not. */
.postmeta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.postmeta .when { font-family: var(--mono); font-size: 13px; color: var(--fg-3); }
.postmeta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line-2); }
.postmeta .who { font-size: 13.5px; color: var(--fg-3); }