/* The sign-up screens of self-provisioning (SignupLayout.razor, which says why they wear the look of
   www.recepcion24.com). The palette and the font are in brand.css. Every rule is scoped to .su. It sat inside the
   layout until 2026-10-18. */
body:has(.su){background:var(--bg)}
.su{min-height:100vh;color:var(--ink);font-size:17px;line-height:1.6;font-family:var(--font);-webkit-font-smoothing:antialiased}
.su a{color:var(--blue)} .su a:hover{color:var(--blue-d)}
.su .su-top{background:#fff;border-bottom:1px solid var(--line)}
.su .su-in{max-width:1160px;margin:0 auto;padding:0 24px}
.su .su-top .su-in{padding-top:16px;padding-bottom:16px}
.su .su-mark{display:inline-flex;align-items:center;gap:.18em;font-size:26px;font-weight:800;letter-spacing:-.03em;
    line-height:1;color:var(--ink);white-space:nowrap}
.su .su-mark:hover{text-decoration:none;color:var(--ink)}
.su .su-mark i{width:.34em;height:.34em;border-radius:999px;background:var(--orange);box-shadow:var(--dot-halo)}
.su .su-mark b{color:var(--orange);font-weight:800}
.su .su-main{padding-top:56px;padding-bottom:96px}
.su h1{font-size:2.5rem;line-height:1.15;font-weight:800;letter-spacing:-.02em;margin:0 0 12px;color:var(--ink);max-width:22ch}
.su .su-lead{font-size:1.15rem;color:var(--muted);margin:0 0 40px;max-width:60ch}
/* The form and the price side by side on a computer, the form first; one column on a phone. */
.su .su-pair{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:start}
.su .su-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px;box-shadow:0 8px 28px rgba(15,23,42,.06)}
.su .su-card.main{border:2px solid var(--blue);box-shadow:0 20px 50px rgba(37,99,235,.12)}
.su .su-field{margin-bottom:18px}
.su label small{font-size:.85rem;font-weight:400;color:var(--muted);margin-left:4px}
/* A card alone (the screen behind the mailed link): as wide as the form card of the sign-up. */
.su .su-one{max-width:620px}
.su .su-body{font-size:1.1rem;margin:0 0 20px}
.su label{display:block;margin:0 0 6px;font-size:.95rem;font-weight:600;color:var(--charcoal)}
.su input[type=text],.su input[type=email]{display:block;width:100%;max-width:none;padding:13px 14px;font:inherit;font-size:1rem;
    color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:10px;outline:none;transition:border-color .12s,box-shadow .12s}
.su input[type=text]:focus,.su input[type=email]:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,.14)}
.su .su-check{display:flex;gap:10px;align-items:flex-start;margin:6px 0 24px;font-size:.95rem;font-weight:400;color:var(--charcoal)}
.su .su-check input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--blue)}
.su .su-go{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:16px 26px;border:0;border-radius:10px;
    background:var(--cta);color:#fff;font:inherit;font-size:1.1rem;font-weight:700;line-height:1;cursor:pointer;transition:background .12s,transform .12s}
.su .su-go:hover{background:var(--cta-d);transform:translateY(-1px)}
.su .su-err{background:var(--err-bg);border:1px solid var(--err-line);color:var(--err-ink);border-radius:10px;padding:12px 14px;margin-bottom:20px;font-size:.95rem}
.su .su-done{text-align:center;padding:16px 0}
.su .su-done span{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:999px;
    background:var(--ok-chip);color:var(--good);margin-bottom:12px}
.su .su-done svg{width:28px;height:28px}
.su .su-done p{font-size:1.2rem;font-weight:700;margin:0}
.su .su-price h2{font-size:1.25rem;line-height:1.35;font-weight:800;margin:0 0 12px;color:var(--ink);text-transform:none;letter-spacing:0}
.su .su-ticks{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.su .su-ticks li{display:grid;grid-template-columns:auto 1fr;gap:10px;color:var(--charcoal)}
.su .su-ticks svg{color:var(--good);margin-top:5px}
.su .su-then{border-top:1px solid var(--line);margin:24px 0 0;padding-top:20px;color:var(--muted);font-weight:600}
.su .su-amount{font-size:3.25rem;line-height:1;font-weight:800;letter-spacing:-.03em;margin:8px 0 6px}
.su .su-amount small{font-size:1.05rem;font-weight:600;letter-spacing:0;color:var(--muted)}
.su .su-note{color:var(--muted);margin:0 0 16px}
/* The cookie banner (SignupLayout): the one of www.recepcion24.com, in the colours of .su. consent.js shows it while no choice is stored. */
.su .su-cookies{position:fixed;left:0;right:0;bottom:0;z-index:1100;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
    padding:14px 24px;background:var(--charcoal);color:#fff;box-shadow:0 -4px 16px rgba(0,0,0,.2)}
.su .su-cookies[hidden]{display:none}
.su .su-cookies p{margin:0;font-size:.9rem;line-height:1.5;max-width:62ch;color:rgba(255,255,255,.85)}
.su .su-cookies a{color:#fff;text-decoration:underline}
.su .su-cookies-actions{display:flex;gap:10px;flex:none}
.su .su-cookies button{font:inherit;font-size:.95rem;font-weight:600;padding:10px 18px;border-radius:10px;cursor:pointer}
.su .su-cookies .su-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
.su .su-cookies .su-ghost:hover{background:rgba(255,255,255,.1)}
.su .su-cookies .su-ok{background:var(--blue);color:#fff;border:0}
.su .su-cookies .su-ok:hover{background:var(--blue-d)}
@media (max-width:860px){.su .su-pair{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
    .su .su-card{padding:22px}
    .su .su-in{padding:0 16px}
    .su .su-main{padding-top:32px;padding-bottom:56px}
    .su h1{font-size:1.85rem}
    .su .su-lead{font-size:1.05rem;margin-bottom:24px}
    .su .su-mark{font-size:22px}
    .su .su-cookies{flex-direction:column;align-items:stretch}
    .su .su-cookies-actions{justify-content:flex-end}
}