/* Shared look for the login and checkout pages (same as contact/preview). */
:root { --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }
body { font-family: var(--sans); }
.tr { min-height: 100vh; display: grid; align-content: start; gap: 28px; padding-block: 28px 64px; }
.tr__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tr__top nav { display: flex; gap: 18px; font-size: 15px; } .tr__top nav a { color: var(--on-night-2); }
.tr__grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 960px) { .tr__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 56px; padding-top: 24px; } }
.tr h1 em { color: var(--moon); }
.tr__copy { display: grid; gap: 18px; align-content: start; }
.tr__copy p { color: var(--on-night-2); max-width: 46ch; margin: 0; }
.card { background: var(--sheet); color: var(--ink); border-radius: var(--r3); padding: 24px; display: grid; gap: 16px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); }
@media (min-width: 600px) { .card { padding: 32px; } }
.card h2 { font-size: 26px; line-height: 1.12; margin: 0; }
.card > p { color: var(--muted); font-size: 15px; margin: -6px 0 0; }
.f { display: grid; gap: 6px; }
.f > span { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.f small { color: var(--muted); font-size: 13px; }
.f input { width: 100%; border: 1.5px solid var(--line); border-radius: var(--r); padding: 13px 14px; font: 16px var(--sans); background: #fff; color: var(--ink); }
.f input:focus { border-color: var(--ink); outline: none; }
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.row3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.err { color: #B42318; font-size: 14px; font-weight: 600; margin: 0; }
.ok { color: var(--yes-ink); background: var(--yes-soft); border-radius: 10px; padding: 10px 12px; font-size: 14.5px; font-weight: 600; margin: 0; }
.card .btn { width: 100%; white-space: normal; }
.linkbtn { border: 0; background: none; padding: 0; font: inherit; color: var(--ink-2); text-decoration: underline; cursor: pointer; }
.fine { color: var(--muted); font-size: 13.5px; text-align: center; margin: 0; }
.fine a { color: var(--ink-2); }
.testbar { background: #FFF3C4; color: #5A4500; border: 1.5px dashed #C99A00; border-radius: 14px; padding: 12px 14px; font-size: 14.5px; display: grid; gap: 4px; }
.testbar b { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.sum { display: grid; gap: 8px; border: 1.5px solid var(--line); border-radius: 14px; padding: 14px; font-size: 15px; }
.sum div { display: flex; justify-content: space-between; gap: 12px; }
.sum .tot { border-top: 1px solid var(--line); padding-top: 8px; font-weight: 700; font-size: 17px; }
.sum s { color: var(--muted); margin-right: 6px; font-weight: 400; }
.pw { position: relative; }
.pw button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: none; font: 600 13px var(--sans); color: var(--muted); cursor: pointer; padding: 8px; }
.pw input { padding-right: 64px; }
[hidden] { display: none !important; }