/* pricing.css, Oct 28 2026 (r2666, one pricing page for the whole people-and-organizations ladder).
   Scoped to .pr. Reuses the hn token layer from held-name.css and repaints no shared class.
   Layout: a rate card. Each stack has a name column and a ledger of rows; the price sits in a ruled column
   on the right edge. The pay-what-you-like rows carry a drawn range strip (.pr-range), built from the real
   numbers only. Night is the base; .day-mode swaps the tokens; with no JavaScript the OS preference decides. */

.pr { background: var(--hn-ground); color: var(--hn-ink); min-height: 100vh; }
.pr a { color: var(--hn-link); }
.pr :is(h1, h2, h3) { text-wrap: balance; }
.pr :is(p, li) { text-wrap: pretty; }
.pr :focus-visible { outline: 3px solid var(--hn-focus); outline-offset: 3px; }

/* No-JavaScript, light OS: the head script adds .js; without it the media query carries the day tokens. */
@media (prefers-color-scheme: light) {
  html:not(.js) .hn.pr {
    --hn-ground: #EEF1E9; --hn-plate: #FBFCF8; --hn-ink: #0F1F17; --hn-muted: #3F5247; --hn-rule: #6B7A70;
    --hn-hair: #C3CBBE; --hn-action: #166534; --hn-action-ink: #FFFFFF; --hn-action-hover: #0F4A26;
    --hn-link: #0F4A26; --hn-seal: #C8912E; --hn-seal-edge: #0F1F17; --hn-band: #0F2A1C; --hn-band-ink: #EEF1E9;
    --hn-band-muted: #B9C6BC; --hn-focus: #0F4A26;
  }
  html:not(.js) body { background: #EEF1E9; }
}

/* ---------- hero ---------- */
.pr-hero { background: var(--hn-band); color: var(--hn-band-ink); padding: 104px 0 44px; border-bottom: 1px solid var(--hn-hair); }
.pr-hero__grid { display: grid; gap: 32px; align-items: end; }
.pr .pr-hero__h { color: var(--hn-band-ink) !important; font-size: clamp(36px, 6vw, 64px); line-height: 1.04; letter-spacing: -0.02em; max-width: 13ch; }
.pr-hero__lead { margin-top: 18px; max-width: 32em; font-size: 18px; line-height: 1.55; color: var(--hn-band-muted); }
.pr-hero__lead b { color: var(--hn-band-ink); font-weight: 600; }
.pr-jump { display: grid; border-top: 1px solid rgba(238, 241, 233, 0.28); }
.pr-jump a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 64px; padding: 10px 2px;
  color: var(--hn-band-ink); text-decoration: none; border-bottom: 1px solid rgba(238, 241, 233, 0.28);
}
.pr-jump a:hover .pr-jump__who { text-decoration: underline; text-underline-offset: 4px; }
.pr-jump a:focus-visible { outline-color: var(--hn-band-ink); }
.pr-jump__who { font-family: var(--hn-display); font-weight: 600; font-size: 20px; line-height: 1.2; }
.pr-jump__for { display: block; margin-top: 2px; font: 400 14px/1.4 var(--hn-ui); color: var(--hn-band-muted); }
.pr-jump svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
@media (min-width: 900px) { .pr-hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 64px; } .pr-hero { padding: 128px 0 56px; } }

/* ---------- a stack: name column + ledger ---------- */
.pr-stack { padding: 52px 0 12px; border-bottom: 1px solid var(--hn-hair); }
.pr-stack:last-of-type { border-bottom: 0; }
.pr-stack__grid { display: grid; gap: 22px; }
.pr-stack__h { font-size: 34px; line-height: 1.08; letter-spacing: -0.015em; }
.pr-stack__for { margin-top: 10px; max-width: 24em; font-size: 16px; line-height: 1.55; color: var(--hn-muted); }
.pr-stack__rule { display: block; width: 44px; height: 3px; margin-top: 18px; background: var(--hn-seal); border-radius: 2px; }
@media (min-width: 1000px) {
  .pr-stack { padding: 72px 0 24px; }
  .pr-stack__grid { grid-template-columns: 300px minmax(0, 1fr); gap: 56px; align-items: start; }
  .pr-stack__head { position: sticky; top: 96px; }
}

/* ---------- ledger rows ---------- */
.pr-ledger { border-top: 1px solid var(--hn-rule); }
.pr-row {
  display: grid; gap: 6px 28px; padding: 24px 0 26px; border-bottom: 1px solid var(--hn-hair);
  grid-template-areas: "name" "price" "body";
}
.pr-row__name { grid-area: name; font-size: 24px; line-height: 1.15; }
.pr-row__price { grid-area: price; margin-top: 4px; }
.pr-row__body { grid-area: body; margin-top: 8px; display: grid; gap: 14px; justify-items: start; }
.pr-row__body p { max-width: 36em; font-size: 16px; line-height: 1.6; color: var(--hn-muted); }
.pr-row__body p b { color: var(--hn-ink); font-weight: 600; }
.pr-amt {
  display: flex; align-items: center; gap: 10px; font-family: var(--hn-display); font-weight: 600; font-size: 34px; line-height: 1.05;
  letter-spacing: -0.01em; font-variant-numeric: lining-nums tabular-nums; color: var(--hn-ink);
}
.pr-amt--free { color: var(--hn-link); }
.pr-amt .hn-seal { width: 22px; height: 22px; }
.pr-per { display: block; margin-top: 5px; font: 400 14px/1.45 var(--hn-ui); color: var(--hn-muted); max-width: 22em; }
.pr-per + .pr-per { margin-top: 1px; }
.pr-per b { color: var(--hn-ink); font-weight: 600; }
@media (min-width: 760px) {
  .pr-row { grid-template-columns: minmax(0, 1fr) 250px; grid-template-areas: "name price" "body price"; padding: 28px 0 30px; align-items: start; }
  .pr-row__price { margin-top: 0; padding-left: 28px; border-left: 1px solid var(--hn-hair); align-self: stretch; }
  .pr-row__body { margin-top: 10px; }
}

/* ---------- the range strip: what "pay what you like" means, drawn from the real numbers ---------- */
.pr-range { width: 100%; max-width: 420px; margin-top: 4px; }
.pr-range__track { position: relative; height: 10px; border-radius: 5px; background: var(--hn-hair); }
.pr-range__fill { position: absolute; inset: 0 auto 0 0; border-radius: 5px; background: var(--hn-muted); opacity: 0.55; }
.pr-range__fill--open { right: 0; background: linear-gradient(90deg, var(--hn-muted), transparent); opacity: 0.55; border-radius: 5px 0 0 5px; }
.pr-range__tick { position: absolute; top: -5px; width: 2px; height: 20px; background: var(--hn-rule); }
.pr-range__tick--hot { width: 4px; margin-left: -1px; background: var(--hn-seal); height: 24px; top: -7px; border-radius: 2px; }
.pr-range__labels { position: relative; height: 38px; margin-top: 14px; font-size: 13px; line-height: 1.3; color: var(--hn-muted); }
.pr-range__labels span { position: absolute; top: 0; white-space: nowrap; }
.pr-range__labels b { display: block; font-weight: 600; color: var(--hn-ink); font-size: 14px; font-variant-numeric: tabular-nums; }
.pr-range__labels .is-mid { transform: translateX(-50%); text-align: center; }
.pr-range__labels .is-end { right: 0; text-align: right; }
.pr-range__labels .is-start { left: 0; }

/* ---------- actions ---------- */
.pr-go {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; font: 600 16px/1 var(--hn-ui);
  color: var(--hn-action-ink) !important; background: var(--hn-action); border: 2px solid transparent; border-radius: 8px; text-decoration: none;
}
.pr-go:hover { background: var(--hn-action-hover); }
.pr-go--line { color: var(--hn-link) !important; background: transparent; border-color: var(--hn-rule); }
.pr-go--line:hover { background: var(--hn-plate); border-color: var(--hn-link); }
.pr-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; flex: none; }

/* ---------- the advertiser stack: one line, no price ---------- */
.pr-ads { padding: 44px 0 56px; }
.pr-ads__line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 22px 0; border-top: 1px solid var(--hn-rule); border-bottom: 1px solid var(--hn-hair); }
.pr-ads__h { font-size: 24px; line-height: 1.2; }
.pr-ads__p { margin-top: 6px; max-width: 34em; font-size: 16px; line-height: 1.55; color: var(--hn-muted); }

/* ---------- before you pay ---------- */
.pr-terms { padding: 8px 0 72px; }
.pr-terms__h { font-size: 28px; line-height: 1.15; }
.pr-terms__list { margin-top: 18px; border-top: 1px solid var(--hn-rule); }
.pr-terms__list li { display: grid; gap: 4px 24px; padding: 16px 0; border-bottom: 1px solid var(--hn-hair); font-size: 16px; line-height: 1.55; color: var(--hn-muted); }
.pr-terms__list b { color: var(--hn-ink); font-weight: 600; }
@media (min-width: 760px) { .pr-terms__list li { grid-template-columns: 240px minmax(0, 1fr); } }

/* ---------- footer: the shell script fills it; this keeps it readable with no JavaScript ---------- */
.pr-foot noscript a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: #FAF8F3; text-decoration: underline; text-underline-offset: 4px; }
.pr-foot > div > p { color: #FAF8F3 !important; }

@media (prefers-reduced-motion: no-preference) { .pr-go { transition: background-color 0.15s ease; } }

/* ---------- the business amounts: three options in equal steps, NOT a scale ---------- */
.pr-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 420px; border-top: 1px solid var(--hn-rule); }
.pr-steps li { padding: 10px 10px 0 0; font-size: 13px; line-height: 1.35; color: var(--hn-muted); }
.pr-steps b { display: block; font-size: 16px; font-weight: 600; color: var(--hn-ink); font-variant-numeric: tabular-nums; }
.pr-steps .is-default { border-top: 3px solid var(--hn-seal); margin-top: -2px; }