/* ═══════════════════════════════════════════════════════════ pricing ══
   Three plans (Pricing.razor). The ruled band, the window that hangs over
   it, the folding questions, the closing band and the footer are the front
   page's own, from home.css; this sheet only lays out what is in them. No
   new colours: teal only on the sample's rising number and its line,
   because it means grew and nothing else.

   THE CHOSEN PLAN IS THREE RADIOS in .switch. :has() reads them to light the
   plan's column and blur what it does not include — no script. Scout is lit
   in plain CSS first, so without :has() the page still reads, with nothing
   blurred (visible by default, docs/design/README.md).                    */

/* Not built yet. Grey, never an accent. */
.soon {
  display: inline-block;
  margin-left: .35rem;
  padding: 0 .5rem;
  border-radius: var(--r-sm);
  background: var(--tint);
  color: var(--ink-soft);
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.7;
  vertical-align: .1em;
  white-space: nowrap;
}

/* ── head: the front page's band, the words given its whole width ── */
.pr-hero .hero-in { grid-template-columns: minmax(0, 1fr); }
.pr-hero h1 { max-width: none; }
.pr-hero .hero-lead { max-width: 62ch; }

@media (max-width: 40rem) {
  .pr-hero h1 br { display: none; }
}

/* ── plans: the window's columns, the chosen one lit as in the table ── */
.plan-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }

.plan {
  display: flex;
  flex-direction: column;
  padding: 2.25rem 2rem;
  transition: background-color .25s var(--ease);
}
.plan + .plan { border-left: 1px solid var(--line); }

.plan-scout,
.pricing:has(#show-free:checked) .plan-free,
.pricing:has(#show-pro:checked) .plan-pro { background: var(--tint); }
.pricing:has(#show-free:checked, #show-pro:checked) .plan-scout { background: none; }

.plan h2,
.plan-biz h2 { font-size: 1.75rem; font-weight: 650; letter-spacing: -.025em; }
.plan-blurb { margin-top: .6rem; min-height: 3.2em; max-width: 32ch; color: var(--ink-soft); }

.plan-price {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  margin-top: 1.75rem;
  font-size: 1.35rem;
  font-weight: 650;
}
.plan-price b { font-size: 4rem; font-weight: 650; letter-spacing: -.045em; line-height: .9; font-variant-numeric: tabular-nums; }
.plan-price span { font-family: var(--body); font-size: var(--t-small); font-weight: 400; color: var(--ink-soft); }
.plan-note { margin-top: .6rem; font-size: .8rem; color: var(--ink-faint); }

/* The one working button on the page is the free one, so it is the filled one. */
.plan-cta { margin-top: 1.6rem; width: 100%; }

.btn.soon-cta,
.btn.soon-cta:disabled {
  border-style: dashed;
  border-color: var(--stroke-hi);
  background: none;
  color: var(--ink-soft);
  opacity: 1;
}

.plan-lead,
.plan-cta + .plan-list {
  margin-top: 1.75rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--stroke);
}
.plan-lead { font-size: var(--t-small); font-weight: 600; }

.plan-list { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .7rem; font-size: .94rem; line-height: 1.45; }
.plan-list li { position: relative; padding-left: 1.6rem; }

/* One tick for the plan lists and the table. */
.plan-list li::before,
.cmp .yes {
  content: "";
  width: .6rem;
  height: .32rem;
  border-left: 1.6px solid var(--ink-soft);
  border-bottom: 1.6px solid var(--ink-soft);
  transform: rotate(-45deg);
}
.plan-list li::before { position: absolute; left: .15rem; top: .4em; }

/* Business: name, what it adds, one button — the window's last row, like the list's foot. */
.plan-biz {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) auto;
  align-items: center;
  gap: 1.5rem clamp(2rem, 5vw, 4rem);
  padding: 2rem;
  border-top: 1px solid var(--line);
}
.plan-biz .plan-blurb { min-height: 0; }
.plan-biz .plan-list { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }

/* ── one real product, three plans ── */
.sample {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  padding-top: var(--bay-lg);
}

/* Stays in view while the product scrolls past, so the switch is always beside what it changes.
   The header does not follow the page, so there is no bar to clear. */
.sample-copy { position: sticky; top: 1.5rem; display: grid; gap: 1.25rem; }
.sample-copy p { max-width: 40ch; font-size: var(--t-lead); color: var(--ink-soft); text-wrap: pretty; }

.sample-copy h2,
.compare h2 { font-size: var(--t-h2); }

/* Square-shouldered, like the buttons (site.css). */
.switch {
  display: flex;
  justify-self: start;
  gap: 2px;
  min-inline-size: 0;
  margin: .5rem 0 0;
  padding: 3px;
  border: 1px solid var(--stroke);
  border-radius: var(--r-sm);
  background: var(--card);
}
.switch label { position: relative; cursor: pointer; }
.switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.switch span {
  display: block;
  padding: .6rem 1.4rem;
  border-radius: 4px;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink-soft);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.switch label:hover input:not(:checked) + span { color: var(--ink); }
.switch input:checked + span { background: var(--ink); color: var(--paper); }
.switch input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

.specimen { overflow: hidden; }
.spec-head { padding: 1.6rem 1.75rem 1.4rem; }
.spec-kicker { font-size: var(--t-small); color: var(--ink-faint); }
.spec-head h3 { margin-top: .3rem; font-family: var(--display); font-size: var(--t-h3); }
.spec-head a { color: var(--ink); text-decoration: none; }
.spec-head a:hover { text-decoration: underline; text-underline-offset: 4px; }

.layer { padding: 1.5rem 1.75rem 1.6rem; border-top: 1px solid var(--stroke); }
.layer-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.1rem; }
.layer-top h4 { margin: 0; font-size: var(--t-body); font-weight: 600; }
.tag { padding: .05rem .6rem; border: 1px solid var(--stroke-hi); border-radius: var(--r-sm); font-size: var(--t-micro); color: var(--ink-soft); white-space: nowrap; }

.layer-main { position: relative; }
.layer-body { transition: opacity .3s var(--ease), filter .3s var(--ease); }

.layer-lock {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: .5rem 1rem;
  border: 1px solid var(--stroke-hi);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  font-size: var(--t-small);
  font-weight: 600;
  white-space: nowrap;
}

.pricing:has(#show-free:checked) .layer-scout .layer-body,
.pricing:has(#show-free:checked, #show-scout:checked) .layer-pro .layer-body {
  opacity: .2;
  filter: blur(5px);
  user-select: none;
  pointer-events: none;
}

.pricing:has(#show-free:checked) .layer-scout .layer-lock,
.pricing:has(#show-free:checked, #show-scout:checked) .layer-pro .layer-lock { display: block; }

/* The caption beside its number, not pushed to the far edge as on a tile. */
.specimen .chart-row { justify-content: flex-start; gap: .9rem; }
.specimen .now { font-size: 2.6rem; }
.specimen .now.up { color: var(--grow); }
.specimen .sat-stats { margin-bottom: 0; }

.spec-soon { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .55rem; font-size: var(--t-small); color: var(--ink-soft); }
.layer-pro .spec-soon { margin-top: 0; }

/* ── compare ── */
.compare { padding-top: var(--bay-lg); }
.cmp-scroll { margin-top: 2rem; overflow-x: auto; }

.cmp { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: .94rem; }
.cmp th, .cmp td { padding: .9rem 1.1rem; text-align: left; font-weight: 400; }
.cmp thead tr { border-bottom: 1px solid var(--stroke-hi); }
.cmp thead th { vertical-align: bottom; border-radius: var(--r-md) var(--r-md) 0 0; font-size: 1.2rem; font-weight: 650; }
.cmp thead th span { display: block; font-family: var(--body); font-size: var(--t-small); font-weight: 400; color: var(--ink-soft); }
.cmp tbody tr { border-bottom: 1px solid var(--line); }
.cmp tbody th { width: 46%; padding-left: 0; }
.cmp td { width: 18%; }

.cmp .cmp-q { border-bottom: 0; }
.cmp .cmp-q th { padding: 2rem 0 .6rem; font-size: 1.2rem; font-weight: 650; letter-spacing: -.015em; }

.cmp .yes { display: inline-block; vertical-align: .25em; border-color: var(--ink); }
.cmp .no { color: var(--ink-faint); }

.cmp .col-scout,
.pricing:has(#show-free:checked) .cmp .col-free,
.pricing:has(#show-pro:checked) .cmp .col-pro { background: var(--tint); }
.pricing:has(#show-free:checked, #show-pro:checked) .cmp .col-scout { background: none; }

/* Stacked, the plans keep one window and a rule between each, and the switch sits above the
   product it changes. */
@media (max-width: 62rem) {
  .plan-row { grid-template-columns: minmax(0, 1fr); }
  .plan + .plan { border-left: 0; border-top: 1px solid var(--line); }
  .plan-blurb { min-height: 0; }
  .plan-biz { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .plan-biz .btn { justify-self: start; }
  .sample { grid-template-columns: minmax(0, 1fr); }
  .sample-copy { position: static; }
}

@media (max-width: 40rem) {
  .plan, .plan-biz { padding: 1.75rem 1.4rem; }
  .plan-biz .plan-list { grid-template-columns: minmax(0, 1fr); }
  .spec-head, .layer { padding-inline: 1.25rem; }
  .switch { justify-self: stretch; }
  .switch label { flex: 1; text-align: center; }
  .switch span { padding-inline: .5rem; }
}