:root {
  color-scheme: light;
  font-family: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  background: #fff6f9;
  color: #38162e;
  accent-color: #8d255a;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
main { max-width: 580px; margin: auto; padding: 18px 20px 44px; }
.masthead { display: flex; align-items: center; justify-content: space-between; min-height: 112px; }
.masthead p { margin: 0 0 5px; font-size: .9rem; font-weight: 650; color: #783259; }
h1 { margin: 0; font-size: 2.12rem; line-height: 1; letter-spacing: -.035em; }
.masthead img { width: 96px; height: 96px; object-fit: contain; mix-blend-mode: multiply; transform: rotate(9deg); }
.balances { display: grid; grid-template-columns: 1fr 1fr; margin: 6px 0 18px; background: #fbe2ee; border: 1px solid #e2adc8; border-radius: 15px; }
.balances div { padding: 13px; min-width: 0; }
.balances div + div { border-inline-start: 1px solid #e2adc8; }
dt, small { color: #69324f; }
dd { margin: 4px 0 0; font-weight: 760; font-size: 1.45rem; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; border-bottom: 1px solid #e2adc8; }
button, input, textarea { font: inherit; }
button, .contact { min-height: 44px; cursor: pointer; border: 1px solid #dcb0c7; border-radius: 10px; padding: 8px 12px; background: #fffafd; color: #642344; font-weight: 680; }
nav button { border-color: transparent; border-radius: 9px 9px 0 0; background: transparent; padding-inline: 3px; }
nav button[aria-pressed="true"] { color: #fff; background: #8d255a; }
button:hover:not(:disabled), .contact:hover { box-shadow: inset 0 0 0 1px currentColor; }
button:disabled { opacity: .55; cursor: default; }
button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid #802358; outline-offset: 2px; }
.primary { background: #8d255a; color: #fff; border-color: #8d255a; }
.feedback { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 7px 0; }
#status { margin: 0; font-size: .9rem; color: #69324f; }
#status[data-error="true"] { color: #8c203a; }
h2 { margin: 16px 0 10px; font-size: 1.19rem; letter-spacing: -.02em; }
p { line-height: 1.45; }
.offer { border-top: 1px solid #e2adc8; padding: 13px 0; overflow-wrap: anywhere; }
.offer h3, .offer p { margin: 0 0 7px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.contact { display: inline-flex; align-items: center; text-decoration: none; }
form, label { display: grid; gap: 6px; }
form { gap: 12px; }
input, textarea { width: 100%; border: 1px solid #bd829f; border-radius: 8px; min-height: 44px; padding: 8px 10px; background: #fffafd; color: inherit; }
input::placeholder { color: #77546a; }
.empty { color: #69324f; margin: 8px 0; }
.event { display:flex; justify-content:space-between; gap:12px; border-top: 1px solid #e2adc8; padding:10px 0; overflow-wrap:anywhere; }
.event strong { white-space: nowrap; }