/* The small pages (account, confirm, unsubscribe, contact, checkout): flat
   blocks, hard edges, the site's own tokens. No colour of its own; every value
   is a --token from styles.css.

   NO BUTTON HAS A STROKE. styles.css's .btn--coal hover turns the button into
   an outline (transparent fill, coal border). On these pages the hover stays a
   fill: it lightens instead. */
.acct .btn--coal:hover,.pg .btn--coal:hover{background:var(--on-bone-2);border-color:var(--on-bone-2);color:var(--bone)}
.btn--soft{background:var(--rule-bone);color:var(--on-bone);border-color:var(--rule-bone)}
.btn--soft:hover{background:var(--on-bone-3);border-color:var(--on-bone-3);color:var(--bone)}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* `hidden` must win over .btn's display:inline-flex: on the account page the
   "Ask for alpha access" button showed for people already in the alpha. */
.acct [hidden],.pg [hidden]{display:none !important}

/* ---------- the page frame ---------- */
.pg{max-width:56rem}
.pg .body{max-width:44rem}
.pg__msg{margin:1rem 0 0;font:500 .95rem/1.5 var(--font);color:var(--on-bone-2)}
.pg__msg.is-bad{color:var(--failover)}
.pg__act{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin:1.6rem 0 2.2rem}
.pg__block{margin:2.6rem 0 0;padding-top:1.4rem;border-top:1px solid var(--rule-bone)}
.pg__block .subhead{margin:0 0 .6rem}
.pg a:not(.btn),.acct a:not(.btn){color:var(--on-bone);text-decoration-color:var(--beam);text-underline-offset:3px}

/* A tick box with its sentence. The box is the browser's own, sized up. */
.pg__check{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;margin:1.1rem 0 0;
  font:400 1rem/1.5 var(--font);color:var(--on-bone);max-width:44rem;cursor:pointer}
.pg__check input{width:1.15rem;height:1.15rem;margin:.18rem 0 0;accent-color:var(--coal)}

/* ---------- account additions ---------- */
.acct__planline{margin:.35rem 0 0;font:500 .9rem/1.4 var(--font);color:var(--on-bone-2)}
/* The delete plan: a hard rule in the failover colour on the left says "this
   is the one that cannot be undone"; no fill, so the soft button stays seen. */
.acct__erase{margin:0 0 1rem;padding:.2rem 0 .2rem 1.2rem;border-left:4px solid var(--failover)}
.acct__erase .body{color:var(--on-bone)}
.acct__erase .terms{margin-top:1rem}
.acct__erase .terms>div{grid-template-columns:1fr;gap:.4rem}
.acct__erase .terms dt,.acct__erase .terms dd{color:var(--on-bone)}
.acct__warn{font-weight:600}
.acct__list{margin:0;padding-left:1.1rem}
.acct__list li{margin:.25rem 0}
.acct__contact{margin-top:.4rem}
.acct__checkout{margin:1.4rem 0 0;padding:.2rem 0 .2rem 1.2rem;border-left:4px solid var(--beam)}
.acct__checkout .body{color:var(--on-bone)}

/* ---------- unsubscribe: two choices ---------- */
.choice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.6rem 0 0}
.choice__opt{background:var(--rule-bone);padding:1.2rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.7rem}
.choice__opt h2{margin:0;font:700 1.15rem/1.25 var(--font);color:var(--on-bone)}
.choice__opt p{margin:0;font:400 .98rem/1.5 var(--font);color:var(--on-bone-2);flex:1}
.choice__opt .btn{align-self:flex-start}

/* ---------- forms (contact) ---------- */
.fld{display:block;margin:1.2rem 0 0;max-width:44rem}
.fld__l{display:block;margin:0 0 .45rem;font-family:var(--mono);font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--on-bone-2)}
.fld__i{display:block;width:100%;box-sizing:border-box;padding:.8rem .9rem;border:1.5px solid var(--coal);
  border-radius:0;background:transparent;color:var(--on-bone);font:400 1rem/1.4 var(--font)}
.fld__i:focus{outline:3px solid var(--coal);outline-offset:2px}
textarea.fld__i{min-height:10rem;resize:vertical}
select.fld__i{appearance:auto}
.fld__hint{margin:.4rem 0 0;font:400 .85rem/1.4 var(--font);color:var(--on-bone-3)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- checkout ---------- */
.pg__banner{margin:0 0 1.6rem;padding:.8rem 1rem;background:var(--coal);color:var(--on-coal);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.buy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(20px,3vw,48px);align-items:start}
.buy__card{background:var(--coal);color:var(--on-coal);padding:clamp(18px,2.2vw,28px)}
.buy__name{margin:0;font:800 clamp(1.4rem,2.2vw,1.9rem)/1.1 var(--font);letter-spacing:-.02em}
.buy__price{margin:.6rem 0 0;font:800 clamp(2.4rem,4vw,3.4rem)/1 var(--font);letter-spacing:-.03em;color:var(--beam)}
.buy__terms{margin:.8rem 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-coal)}
.buy__once{margin:.5rem 0 0;font:400 .95rem/1.5 var(--font);color:var(--on-coal-2)}
.buy__rows{margin:1.2rem 0 0;border-top:1px solid var(--rule-coal)}
.buy__rows>div{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--rule-coal)}
.buy__rows dt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-coal-3)}
.buy__rows dd{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--on-coal)}
.buy__rows .dash{color:var(--beam)}
.buy__note{margin:.8rem 0 0;font:400 .85rem/1.45 var(--font);color:var(--on-coal-2)}
.buy__form .fld{margin-top:0}

@media (max-width:760px){
  .choice{grid-template-columns:1fr}
  .buy{grid-template-columns:1fr}
}
.buy__who{margin:0 0 1.4rem}
.acct__wording{color:var(--on-bone);border-left:2px solid var(--rule-bone);padding-left:.9rem}

/* ---------- legal pages (privacy, terms): long-form reading ----------
   Rendered from the drafts by build/legal.mjs. A comfortable measure (about
   70 characters), a heading ladder you can scan, and tables that scroll inside
   their own box so a phone never scrolls the page sideways. */
.pg.legal__wrap{max-width:48rem}
.legal .d2{margin:0}
.legal__date{margin:1.1rem 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-bone-2)}
.legal__toc{margin:2.2rem 0 0;padding:1rem 0 1.2rem;border-top:1.5px solid var(--coal);
  border-bottom:1px solid var(--rule-bone)}
.legal__toc-h{margin:0 0 .7rem;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--on-bone-2)}
.legal__toc ul{margin:0;padding:0;list-style:none;columns:2 16rem;column-gap:2rem}
.legal__toc li{break-inside:avoid;margin:0 0 .45rem;font:500 .98rem/1.4 var(--font)}
.legal__body{max-width:70ch;margin-top:1rem;font:400 1.0625rem/1.65 var(--font);color:var(--on-bone);
  overflow-wrap:break-word}
.legal__body h2{margin:3rem 0 .9rem;padding-top:1.1rem;border-top:1px solid var(--rule-bone);
  font:800 clamp(1.45rem,2.4vw,1.95rem)/1.15 var(--font);letter-spacing:-.025em;color:var(--on-bone)}
.legal__body h3{margin:2.1rem 0 .6rem;font:700 1.18rem/1.3 var(--font);letter-spacing:-.01em;color:var(--on-bone)}
.legal__body h2,.legal__body h3,.legal__toc-h{scroll-margin-top:calc(var(--barh) + 20px)}
.legal__body p{margin:0 0 1rem}
.legal__body ul{margin:0 0 1.1rem;padding-left:1.3rem;list-style:disc}
.legal__body li{margin:0 0 .5rem;padding-left:.2rem}
.legal__body li::marker{color:var(--on-bone-3)}
.legal__body strong{font-weight:650}
.legal__body code{font-family:var(--mono);font-size:.85em;padding:.05em .3em;background:var(--rule-bone)}
.legal__table{max-width:100%;overflow-x:auto;margin:1.2rem 0 1.6rem;border-top:1.5px solid var(--coal)}
.legal__table:focus-visible{outline:3px solid var(--coal);outline-offset:2px}
.legal__table table{width:100%;min-width:36rem;border-collapse:collapse;font-size:.95rem;line-height:1.5}
.legal__table th{padding:.7rem .9rem .6rem 0;text-align:left;vertical-align:bottom;font-family:var(--mono);
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--on-bone-2);
  border-bottom:1px solid var(--rule-bone)}
.legal__table td{padding:.7rem .9rem .7rem 0;vertical-align:top;border-bottom:1px solid var(--rule-bone)}
.legal__table td:last-child,.legal__table th:last-child{padding-right:0}
.legal__top{margin:3rem 0 0;font:500 .95rem/1.4 var(--font)}
@media (max-width:640px){
  .legal__body{font-size:1rem}
  .legal__body h2{margin-top:2.4rem}
}