/* Holdclock · buttons, round 5 (24 Oct 2026). No glow, no glass, no gradients.
   Four styles taken from the site itself; html[data-btn] picks one (switcher shown on previews only).
   1 Pixel   ink block; on hover blue pixels fill it in, like the hero
   2 Ink     ink block that turns blue; second action is a plain underlined link
   3 Forest  the forest green and tan of the numbers and contact sections
   4 Mono    the mono capitals of the section labels, square, arrow in its own cell */

/* ---------- reset everything earlier rounds added ---------- */
.b{position:relative!important;display:inline-flex!important;align-items:center!important;justify-content:center;gap:14px;
  height:48px!important;padding:0 22px!important;border:0!important;border-radius:4px!important;overflow:hidden!important;isolation:isolate;cursor:pointer;
  font:400 16px/1 var(--sans)!important;letter-spacing:-.01em!important;text-decoration:none!important;white-space:nowrap;
  background:none!important;box-shadow:none!important;transform:none!important;-webkit-backdrop-filter:none;backdrop-filter:none;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1),box-shadow .25s!important}
.b::before,.b::after{content:none!important;display:none!important}
.b .lbl{position:relative;z-index:2;display:block;padding:0!important;border:0!important}
.b .arr,.b .bf,.b .ic,.b .ky{display:none!important}
.b .ar{position:relative;z-index:2;display:block;width:14px;height:14px;flex:0 0 auto;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.b .ar svg{display:block;width:100%;height:100%}
.b .px{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;display:none}
.b:focus-visible{outline:2px solid #2440F0!important;outline-offset:3px}
.b-sm{height:38px!important;padding:0 16px!important;font-size:14px!important;gap:10px}
.b-sm .ar{width:12px;height:12px}
.f-go .b{width:auto!important}

/* ---------- colour choices (round 6: no black). Shape is the same for all: 48px, 4px corners, pixel hover ---------- */
html[data-btn] .b .px{display:block}
html[data-btn] .b:hover .ar{transform:translateX(3px)}
.b-pri{background-color:var(--bg)!important;color:var(--fg)!important}
.b-pri.lit{color:var(--fg-on,var(--fg))!important;transition-delay:.1s!important}
.b-sec{background-color:var(--sbg)!important;color:var(--sfg)!important;box-shadow:inset 0 0 0 1px var(--sring)!important}
.b-sec.lit{color:var(--sfg-on)!important;transition-delay:.1s!important}

/* 1 Hero blue: the blue of the pixel art */
html[data-btn="1"]{--bg:#2440F0;--fg:#fff;--hov:#0F23B8;--sbg:rgba(255,255,255,.85);--sfg:#1428B8;--sring:rgba(36,64,240,.28);--shov:#2440F0;--sfg-on:#fff}
/* 2 White: a white tile on the blue hero, blue fills in on hover */
html[data-btn="2"] .b-pri:not(.lit){box-shadow:inset 0 0 0 1px rgba(11,26,110,.16),0 1px 2px rgba(11,26,110,.06)!important}
html[data-btn="2"]{--bg:#fff;--fg:#0B1A6E;--hov:#2440F0;--fg-on:#fff;--sbg:transparent;--sfg:#0B1A6E;--sring:rgba(11,26,110,.25);--shov:#fff;--sfg-on:#0B1A6E}
/* 3 Forest: the green of the numbers section */
html[data-btn="3"]{--bg:#193A29;--fg:#F4EFE7;--hov:#2E6B4A;--sbg:#EDE6DA;--sfg:#193A29;--sring:transparent;--shov:#193A29;--sfg-on:#F4EFE7}
/* 4 Tan: the warm colour of the contact section */
html[data-btn="4"]{--bg:#A8927C;--fg:#fff;--hov:#7E6A56;--sbg:rgba(255,255,255,.85);--sfg:#5E4D3C;--sring:rgba(94,77,60,.25);--shov:#A8927C;--sfg-on:#fff}
/* 5 Steel: a quiet grey-blue */
html[data-btn="5"]{--bg:#5F7C96;--fg:#fff;--hov:#3E5870;--sbg:rgba(255,255,255,.85);--sfg:#2F4559;--sring:rgba(47,69,89,.25);--shov:#5F7C96;--sfg-on:#fff}
/* 6 Plum */
html[data-btn="6"]{--bg:#5B4A6E;--fg:#fff;--hov:#3C2F4B;--sbg:rgba(255,255,255,.85);--sfg:#3C2F4B;--sring:rgba(60,47,75,.25);--shov:#5B4A6E;--sfg-on:#fff}

/* on black sections the secondary turns to a thin light outline; dark colours get a lighter tone */
:is(.top.on-dark,.trust3,.w-cap) .b-sec{--sbg:transparent;--sfg:#fff;--sring:rgba(255,255,255,.3);--shov:#fff;--sfg-on:#0B0D12}
html[data-btn="3"] :is(.top.on-dark,.trust3,.w-cap) .b-pri{--bg:#EDE6DA;--fg:#193A29;--hov:#C9DCCF;--fg-on:#193A29}
html[data-btn="6"] :is(.top.on-dark,.trust3,.w-cap) .b-pri{--bg:#8E7AA6}

/* ---------- preview-only switcher ---------- */
.btn-sw{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:9999;display:flex;gap:4px;padding:5px;border-radius:8px;
  background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.1),0 8px 24px -8px rgba(0,0,0,.25);font:400 13px/1 var(--sans)}
.btn-sw span{padding:9px 8px 9px 10px;color:#929292;font:400 11px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;align-self:center}
.btn-sw button{all:unset;cursor:pointer;padding:9px 12px;border-radius:5px;color:#101010}
.btn-sw button:hover{background:#F2F2F2}
.btn-sw button.on{background:#101010;color:#fff}