/* /better, since October 29, 2026: the start page's room, with the address and the notes where the box was. The box
   itself is on the page, hidden, and does the sending (see the script at the end of better.html). */
.better-page .brand { position: absolute; left: 32px; top: 22px; z-index: 3; margin: 0; }
.better-page .start { padding-top: 84px; }
.better-page .start-in { gap: 26px; }
.better-page .sub { max-width: none; }
.better-page .start-in { max-width: 1120px; }
.better-page .start h1 { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.16; }
.better-page .start h1 .nb { white-space: nowrap; }
.better-form { width: 100%; max-width: 720px; margin-top: 10px; display: flex; flex-direction: column; gap: 26px; }
.better-card { width: 100%; background: var(--paper); color: var(--paper-ink); border-radius: 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08); padding: 22px 26px 20px; text-align: left; }
.better-card:focus-within { box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 2px rgba(52, 84, 209, .55); }
.better-card .f { padding: 2px 0 8px; }
.better-card label { display: block; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--paper-ink); margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--paper-line); }
.better-card input, .better-card textarea { display: block; width: 100%; border: 0; outline: none; background: transparent; color: var(--paper-ink); font: inherit; font-size: 18px; line-height: 1.4; padding: 4px 0; resize: none; min-height: 32px; max-height: 220px; }
.better-card ::placeholder { color: var(--paper-muted); opacity: 1; }
.better-card .f-note { display: block; margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--paper-muted); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 20px; }
.chip { border: 1px solid var(--paper-line); background: #fff; color: var(--paper-ink); font: inherit; font-size: 15px; font-weight: 500; padding: 7px 12px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.chip:hover { border-color: var(--paper-ink); }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.better-row { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--paper-line); padding-top: 18px; }
.better-row .hint { flex: 1; min-height: 1em; font-size: 13px; color: #b02a37; }
.better-go { border: 0; background: var(--accent); color: #fff; font: inherit; font-size: 17px; font-weight: 600; padding: 13px 22px; border-radius: 12px; cursor: pointer; transition: background .15s, transform .15s; }
.better-go:hover { background: var(--accent-dark); transform: translateY(-1px); }
.better-go:focus-visible, .chip:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
@media (max-width: 900px) { .better-card { padding: 14px 14px 12px; } .better-card input, .better-card textarea { font-size: 17px; } .better-page .brand { left: 20px; top: 18px; } .better-page .brand span { display: none; } .better-page .start { padding-top: 80px; } }
.better-page .trust { margin-top: 4px; }