/* Button colour choice page, round 2. Candidates only; nothing here goes into tokens.css.
   New values (no token holds them), named here: */
:root{
  --bo-rust-deep:#86441F;      /* F hover fill, white label 7.34 to 1 */
  --bo-ink-deep:#0F2840;       /* G, C hover fill, white label 15.02 to 1 */
  --bo-orange-mid:#B75D2B;     /* B fill, white label 4.55 to 1 */
  --bo-orange-mid-hover:#A55426; /* B hover, 5.39 to 1 */
  --bo-orange-hover:#CF6428;   /* A hover, 3.81 to 1 */
  --bo-orange-light:#EE8F58;   /* D hover, navy label 5.30 to 1 */
  --bo-peach:#F4A774;          /* J fill, navy label 6.47 to 1 */
  --bo-peach-hover:#F8BC94;    /* J hover, navy label 7.68 to 1 */
}
.bo-body{background:var(--color-bg);color:var(--color-body);font-family:var(--font-body);margin:0}
.bo-wrap{max-width:var(--maxw);margin:0 auto;padding:var(--s-6) var(--s-5)}
.bo-wrap h1{margin:0 0 var(--s-3);color:var(--color-ink);font-size:var(--t-2xl)}
.bo-wrap .lede{max-width:64ch;margin:0 0 var(--s-5)}
.bo-sec{color:var(--color-ink);font-size:var(--t-xl);margin:var(--s-6) 0 var(--s-4)}
.bo-list{display:grid;gap:var(--s-5)}
.bo{background:var(--color-card);border-radius:var(--radius-lg);padding:var(--s-5)}
.bo h3{margin:0 0 var(--s-2);font-size:var(--t-lg);color:var(--color-ink);display:flex;align-items:center;gap:var(--s-3)}
.bo h3 .l{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:var(--radius-sm);background:var(--color-ink);color:var(--color-card);font-size:var(--t-base)}
.bo p{margin:var(--s-1) 0}
.bo-demo{margin-top:var(--s-4);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.bo-piece{min-width:0;background:var(--color-bg);border-radius:var(--radius);padding:var(--s-4)}
.bo-lab{font-size:var(--t-sm);color:var(--color-muted);margin:0 0 var(--s-2)}
.bo-card{min-width:0;background:var(--color-card);border-radius:var(--radius-sm);padding:var(--s-4)}
.bo-card p{margin:0 0 var(--s-3)}
.bo-card h4{margin:0 0 var(--s-2);color:var(--color-ink);font-size:var(--t-lg)}
.bo-field{background:var(--color-bg);border-radius:var(--radius-sm);padding:var(--s-2) var(--s-3);margin:0 0 var(--s-3);color:var(--color-ink)}
.bo-row{display:flex;gap:var(--s-3);flex-wrap:wrap}
.bo-phone{max-width:20rem}
.bo-stack{display:grid;gap:var(--s-2)}
.bo-stack .ob{text-align:center}
.ob{display:inline-block;font-family:var(--font-head);font-weight:700;font-size:var(--t-base);padding:var(--s-3) var(--s-5);border-radius:var(--radius-sm);text-decoration:none;max-width:100%;cursor:pointer;line-height:1.2;border:2px solid transparent;min-height:2.75rem;box-sizing:border-box}
.ob-1{background:var(--bf);color:var(--bt);border-color:var(--bb);border-bottom-color:var(--bbb,var(--bb))}
.ob-1:hover,.ob-1.is-hover{background:var(--bh);color:var(--bht,var(--bt));text-decoration:none}
.ob-2{background:var(--color-card);color:var(--color-ink);border-color:var(--color-muted)}
.ob:focus-visible,.ob.is-focus{outline:3px solid var(--color-ink);outline-offset:3px}
@media (max-width:760px){.bo-demo{grid-template-columns:1fr}.bo{padding:var(--s-4)}.bo-wrap{padding:var(--s-5) var(--s-4)}.bo-wrap h1{font-size:var(--t-xl)}.ob{padding:var(--s-3) var(--s-4)}}
/* earlier options A to E */
.bo-a{--bf:var(--color-accent);--bt:var(--color-on-accent);--bb:var(--color-accent);--bh:var(--bo-orange-hover)}
.bo-b{--bf:var(--bo-orange-mid);--bt:var(--color-on-accent);--bb:var(--bo-orange-mid);--bh:var(--bo-orange-mid-hover)}
.bo-c{--bf:var(--color-ink);--bt:var(--color-on-accent);--bb:var(--color-ink);--bh:var(--bo-ink-deep)}
.bo-d{--bf:var(--color-accent);--bt:var(--color-ink);--bb:var(--color-accent);--bh:var(--bo-orange-light)}
.bo-e{--bf:var(--color-card);--bt:var(--color-accent-text);--bb:var(--color-accent);--bh:var(--color-accent-wash)}
/* new options F to J */
.bo-f{--bf:var(--color-accent-text);--bt:var(--color-on-accent);--bb:var(--color-accent-text);--bh:var(--bo-rust-deep)}
.bo-g{--bf:var(--color-ink);--bt:var(--color-on-accent);--bb:var(--color-ink);--bbb:var(--color-accent);--bh:var(--bo-ink-deep)}
.bo-g .ob-1{border-bottom-width:5px}
.bo-h{--bf:var(--fk-black);--bt:var(--color-on-accent);--bb:var(--fk-black);--bh:var(--color-ink)}
.bo-i{--bf:var(--color-card);--bt:var(--color-ink);--bb:var(--color-ink);--bh:var(--color-ink);--bht:var(--color-on-accent)}
.bo-j{--bf:var(--bo-peach);--bt:var(--color-ink);--bb:var(--color-accent-text);--bh:var(--bo-peach-hover)}