/* LEGKO button standard v1.1 (approved 15.10.2026): every button is an 18 px strip, 13 px Relief Sans 200,
   1 px frame, radius 6 px; one orange button per screen, the main step elsewhere dark #222, the rest white.
   Linked after each page's own <style>, so these rules win. */
@font-face{font-family:'Relief Sans';font-weight:200;font-display:swap;src:local('Relief Sans ExtraLight'),url(https://relief-decor.com/fonts/relief-sans-200-cyrillic.woff2) format('woff2'),url(/fonts/relief-sans-400-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Relief Sans';font-weight:200;font-display:swap;src:local('Relief Sans ExtraLight'),url(https://relief-decor.com/fonts/relief-sans-200-latin.woff2) format('woff2'),url(/fonts/relief-sans-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+20B4,U+2122,U+2212,U+FEFF,U+FFFD}

/* the strip: index .try .pgo · start .btn · pay .go · ai .go · admin .btn .acts button */
.rd-btn,.try,.pgo,main .btn,.go,.btn,.acts button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:5px;box-sizing:border-box;
  width:auto;height:18px;min-height:18px;margin-top:0;padding:0 10px;border:1px solid #c9c4bb;border-radius:6px;background:#fff;color:#222;
  font-family:'Relief Sans',Arial,sans-serif;font-size:13px;line-height:16px;font-weight:200;white-space:nowrap;text-transform:none;text-decoration:none;
  box-shadow:none;filter:none;cursor:pointer}
.rd-btn::after,.try::after,.pgo::after,main .btn::after,.go::after,.btn::after,.acts button::after,.rd-seg>button::after,.pt button::after,.tabs button::after{content:"";position:absolute;inset:-4px -3px} /* Б1 */
.pt button,.tabs button{position:relative}
/* orange: the one main step of the screen */
.rd-btn--orange,.try,main .btn,.go,.btn.pr{background:#e8772e;border-color:#e8772e;color:#fff}
/* main (dark) */
.rd-btn--main,.pc.hot .pgo{background:#222;border-color:#222;color:#fff}
.pgo{display:flex;align-self:flex-start;margin-top:6px}
@media(hover:hover){
  .rd-btn:hover,.pgo:hover,.acts button:hover,.btn:hover{border-color:#222}
  .rd-btn--main:hover,.pc.hot .pgo:hover{background:#000;border-color:#000}
  .rd-btn--orange:hover,.try:hover,main .btn:hover,.go:hover,.btn.pr:hover{background:#d0661f;border-color:#d0661f;filter:none}}
.rd-btn:active,.pgo:active,.acts button:active{background:#ece9e3}
.rd-btn--orange:active,.try:active,main .btn:active,.go:active,.btn.pr:active{background:#c25a17}
.pc.hot .pgo:active{background:#000}
.rd-btn:focus-visible,.try:focus-visible,.pgo:focus-visible,.btn:focus-visible,.go:focus-visible,.acts button:focus-visible,.pt button:focus-visible,.tabs button:focus-visible{outline:2px solid #222;outline-offset:2px}
/* Б8: never grey; only while waiting it ignores clicks and shows running dots (Б5) */
.btn:disabled,.go:disabled{opacity:1;cursor:progress}
.btn:disabled::before,.go:disabled::before{content:'…';order:2;display:inline-block;width:.9em;overflow:hidden;animation:rd-dots 1s steps(4,end) infinite}
@keyframes rd-dots{from{width:0}to{width:1.2em}}
.rd-btn.is-done{background:#2f7a4a;border-color:#2f7a4a;color:#fff}
.rd-btn .price,.go .price{font-weight:600}

/* Б6 segments: pay period, admin tabs */
.pt,.tabs{display:inline-flex;gap:0;padding:0;border:1px solid #c9c4bb;border-radius:6px;overflow:hidden;background:#fff}
.pt button,.tabs button{height:16px;padding:0 8px;border:0;border-left:1px solid #c9c4bb;border-radius:0;background:#fff;color:#222;font:200 12px/16px 'Relief Sans',Arial,sans-serif;cursor:pointer;white-space:nowrap}
.pt button:first-child,.tabs button:first-child{border-left:0}
.pt button[aria-pressed=true],.pt button.on,.tabs button.on{background:#222;color:#fff}

/* Б10: secondary actions are links */
.in,.bk{font-size:13px;font-weight:200;color:#222;text-decoration:none;border-bottom:1px solid #c9c4bb;padding:0}
.in:hover,.bk:hover{border-color:#222}
@media(prefers-color-scheme:dark){.in,.bk{color:#e8edf3;border-color:#4a5260}}

/* rows: 6 px apart; phone: two per row, 8 px between rows */
.cta{gap:6px}
@media(max-width:520px){.cta{row-gap:8px}.acts{row-gap:8px}}
/* the selected language is a switch, not the main step: dark, not orange (Б2) */
.ld[aria-pressed=true]{background:#222;border-color:#222;color:#fff}