/* Sales + legal pages (pricing, account, support, legal). Uses the brand tokens from charge-core.css. */
* { box-sizing: border-box; }
body { margin: 0; background: var(--cg-ink); color: var(--cg-text); font: 400 1.05rem/1.6 var(--cg-font); }
a { color: var(--cg-acc); } a:hover { color: #fff; }
.wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; }
header.top { border-bottom: .15rem solid var(--cg-line2); } header.top .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 4.2rem; gap: 1rem; flex-wrap: wrap; }
.wm { display: inline-flex; align-items: center; gap: .6rem; line-height: 0; text-decoration: none; }
.beta { display: inline-block; font-family: var(--cg-label); font-weight: 800; font-size: .68rem; line-height: 1; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cg-acc); border: 2px solid var(--cg-acc); border-radius: 3px; padding: .28rem .4rem .24rem; white-space: nowrap; }
.beta-note { font-size: .95rem; color: var(--cg-mute2); border-left: 4px solid var(--cg-acc); padding: .2rem 0 .2rem .8rem; margin: -.4rem 0 1.6rem; }
.wm img { display: block; height: 1.9rem; width: auto; max-width: 70vw; }   /* new Big Shoulders logo */
nav a { font-family: var(--cg-label); font-weight: 800; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cg-text); text-decoration: none; margin-left: 1.2rem; }
nav a.on, nav a:hover { color: var(--cg-acc); }
main { padding: 2.5rem 0 4rem; }
h1 { font-family: var(--cg-disp); font-weight: 900; font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1; text-transform: uppercase; color: var(--cg-acc); margin: 0 0 1rem; }
h2 { font-family: var(--cg-disp); font-weight: 900; font-size: 1.9rem; text-transform: uppercase; margin: 2.4rem 0 .6rem; }
h3 { font-size: 1.15rem; margin: 1.6rem 0 .3rem; }
.lede { font-size: 1.25rem; color: var(--cg-mute2); max-width: 40em; }
.mono { font-family: var(--cg-label); }
.draft { background: var(--cg-danger-bg); color: #FFB4A6; border: .15rem solid #7a2d1f; padding: .8rem 1rem; border-radius: .4rem; font-weight: 700; margin: 0 0 1.5rem; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.4rem; margin: 2rem 0; }
.plan { background: var(--cg-panel); border: .2rem solid var(--cg-line); border-radius: .6rem; padding: 1.6rem; display: flex; flex-direction: column; }
.plan.best { border-color: var(--cg-acc); box-shadow: .5rem .5rem 0 var(--cg-acc-dk); }
.plan .tag { font-family: var(--cg-label); font-weight: 800; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cg-acc); }
.plan .price { font-family: var(--cg-disp); font-weight: 900; font-size: 3.4rem; line-height: 1; margin: .6rem 0 .2rem; } .plan .price small { font-size: 1.1rem; color: var(--cg-mute); font-family: var(--cg-font); font-weight: 700; }
.plan ul { padding-left: 1.2rem; margin: 1rem 0 1.4rem; flex: 1; } .plan li { margin: .35rem 0; }
.btn { display: inline-block; background: var(--cg-acc); color: var(--cg-ink); font-weight: 800; padding: .85rem 1.3rem; border-radius: .4rem; text-decoration: none; border: 0; font-size: 1.05rem; cursor: pointer; text-align: center; font-family: inherit; }
.btn.ghost { background: transparent; color: var(--cg-text); border: .15rem solid var(--cg-line); }
.btn[aria-disabled="true"], .btn:disabled { opacity: .55; cursor: not-allowed; }
.row2 { display: flex; gap: .8rem; flex-wrap: wrap; }
.note { color: var(--cg-mute); font-size: .95rem; }
table.cmp { width: 100%; border-collapse: collapse; margin: 1rem 0; } .cmp th, .cmp td { text-align: left; padding: .6rem .5rem; border-bottom: .1rem solid var(--cg-line2); } .cmp td:not(:first-child), .cmp th:not(:first-child) { text-align: center; }
details { background: var(--cg-panel); border-radius: .4rem; padding: .8rem 1rem; margin: .6rem 0; } summary { font-weight: 800; cursor: pointer; }
code.key { font: 800 1.35rem var(--cg-label); letter-spacing: .04em; padding: .8rem 1rem; border-radius: .4rem; border: .15rem dashed var(--cg-acc, #FFC629); background: var(--cg-deep); color: var(--cg-text); word-break: break-all; user-select: all; }
input.key { font: 700 1.2rem var(--cg-label); padding: .8rem 1rem; border-radius: .4rem; border: .15rem solid var(--cg-line); background: var(--cg-deep); color: var(--cg-text); width: min(100%, 26rem); text-transform: uppercase; }
.card { background: var(--cg-panel); border-radius: .6rem; padding: 1.4rem; margin: 1.2rem 0; }
.ok { color: var(--cg-ok); font-weight: 800; } .bad { color: #FF6B81; font-weight: 800; }
footer { border-top: .15rem solid var(--cg-line2); padding: 1.6rem 0 2.4rem; color: var(--cg-mute); font-size: .9rem; } footer a { color: var(--cg-mute2); margin-right: 1rem; }
.legal p, .legal li { max-width: 46em; }
/* "Get a Church License" in every page header (buy-cta, Oct 2026). Plain site pages are never skinned; the
   html[data-cg-skin] rule is only a guard so a skinned copy never shows it (same as the Beta tag). */
header.top nav { margin-left: auto; }
header.top .btn.buy { font-family: var(--cg-font); font-weight: 800; font-size: .95rem; line-height: 1; padding: .7rem 1rem; min-height: 2.75rem; display: inline-flex; align-items: center;
  border-radius: .3rem; box-shadow: .25rem .25rem 0 var(--cg-acc-dk); white-space: nowrap; transition: transform .08s, box-shadow .08s; }
header.top .btn.buy:hover { color: var(--cg-ink); transform: translate(-2px,-2px); box-shadow: .38rem .38rem 0 var(--cg-acc-dk); }
header.top .btn.buy:active { transform: translate(3px,3px); box-shadow: 0 0 0 var(--cg-acc-dk); }
header.top .btn.buy:focus-visible { outline: 3px solid var(--cg-text); outline-offset: 3px; }
html[data-cg-skin] [data-buy] { display: none !important; }
@media (min-width: 681px) and (max-width: 1000px) {   /* tablets: logo + license button, links underneath */
  header.top .wrap { padding-top: .8rem; padding-bottom: .7rem; row-gap: .4rem; }
  header.top nav { order: 3; flex: 1 0 100%; margin: 0; } header.top nav a { margin: 0 1.4rem 0 0; }
}
@media (max-width: 680px) {   /* phones: logo row, then the links, then a full-width license button */
  header.top .wrap { padding-top: .7rem; padding-bottom: .8rem; row-gap: .55rem; min-height: 0; }
  header.top .wm img { height: 1.6rem; }
  header.top nav { flex: 1 0 100%; margin: 0; display: flex; gap: 1.1rem; }
  header.top nav a { margin: 0; font-size: .78rem; padding: .35rem 0; }
  header.top .btn.buy { flex: 1 0 100%; justify-content: center; font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { header.top .btn.buy, header.top .btn.buy:hover, header.top .btn.buy:active { transition: none; transform: none; } }