/* Sign-in, setup and invitation pages, and the shared logo lock-up.
   Rules: one logo (the reference RetailDesk logo), nothing empty is drawn, no stray dots, no dead space. */

/* logo on a dark panel: the reference logo sits on a white plate so its dark lettering stays readable */
.brand-plate{display:inline-flex;align-items:center;padding:10px 16px;background:#fff;border-radius:14px;box-shadow:0 10px 28px #00000030}
.brand-plate img{display:block;width:230px;height:auto;max-width:100%}

/* logo in a page header (customer area) */
.owner-wordmark{display:flex;align-items:center;gap:10px;margin:0 auto 0 0;line-height:1}
.owner-wordmark img{display:block;width:200px;height:auto;max-width:none;margin:0}
.owner-wordmark small{white-space:nowrap;font-size:9px;letter-spacing:1.4px;padding:4px 6px;border-radius:4px;background:#daf4e9;color:#087b71}
@media(max-width:600px){.owner-wordmark img{width:150px}.owner-wordmark small{display:none}}

/* the auth pages bring their own logo, so the generic page header is not drawn above them */
body:has(.auth-shell)>header{display:none}

.auth-copy{padding-top:52px;padding-bottom:52px}
.auth-copy .brand-plate{margin-bottom:52px}
.auth-copy h1{font-size:clamp(38px,4.4vw,56px);line-height:1.04;letter-spacing:-1.6px;margin:8px 0 14px}
.auth-copy>p{max-width:470px;font-size:17px;line-height:1.55}
.security-note{margin-top:30px;padding:20px 22px;gap:8px}

.auth-card{margin:36px auto;padding:32px 34px}
.auth-card h2{margin:2px 0 6px;font-size:30px;letter-spacing:-.6px;line-height:1.15}
.auth-card>p,.auth-card>.eyebrow+h2+p{margin:0 0 4px;color:#516870}
.auth-card form{gap:14px;margin:20px 0 6px}
.auth-card label{gap:6px;font-size:14.5px}
.auth-card label small{display:block;font-weight:400;color:#647c82;line-height:1.35}
.auth-card form>button,.auth-submit{width:100%;min-height:48px;margin-top:4px}
.back-link{display:inline-block;margin-top:6px}
.private-help{display:block;max-width:480px;margin:0 auto 26px;padding:0 4px;color:#647c82;font-size:13px}

/* validation: an empty summary or empty field message draws nothing at all (no dot, no gap) */
.validation-summary-valid,.field-validation-valid,.auth-card form>span:empty{display:none!important}
.validation-summary-errors,p.validation{padding:12px 14px;border:1px solid #f3c3be;border-radius:10px;background:#fdecea;color:#8f1f17;font-size:14.5px;line-height:1.4}
.validation-summary-errors ul{margin:0;padding:0;min-height:0;list-style:none}
.validation-summary-errors li{margin:0;padding:0}
.validation-summary-errors li+li{margin-top:4px}
span.field-validation-error{display:block;margin-top:-8px;color:#b42318;font-size:13.5px}

@media(max-width:900px){.auth-copy{padding:36px 24px}.auth-copy .brand-plate{margin-bottom:30px}.auth-card{margin:24px auto;padding:26px 22px}}
.auth-card form>button{border:0;font:inherit;font-weight:750;cursor:pointer}

/* Console headings: the marketing style tracks headings at -4px to -6px, which makes words run together
   ("Accountprotection"). Inside the back office and customer area, use a normal, readable spacing. */
.owner-body :is(h1,h2){letter-spacing:-.4px;word-spacing:.06em}

/* ---- Customer area: same light page header as the back office, and a two-column layout ---- */
.owner-main .owner-hero{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px 20px;max-width:1120px;margin:0 auto;padding:28px 28px 6px!important;background:transparent!important;color:var(--ink)!important}
.owner-main .owner-hero h1{margin:2px 0 4px!important;font-size:32px!important;color:var(--ink)!important}
.owner-main .owner-hero p{margin:0;color:#516870!important;font-size:15px!important}
.owner-main .owner-hero .eyebrow{margin:0;color:var(--teal)!important;font-size:11px!important}
.owner-main .owner-security-state{display:grid;gap:2px;width:auto;min-width:0;padding:12px 18px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}
.owner-main .owner-security-state :is(span,small){color:#647c82!important;font-size:12.5px}
.owner-main .owner-security-state b{color:var(--teal)!important;font-size:20px}
.owner-main .owner-content{display:grid;grid-template-columns:minmax(300px,410px) 1fr;gap:20px;align-items:start;max-width:1120px;margin:0 auto;padding:16px 28px 60px}
.owner-main .owner-content>.customer-install-note{grid-column:1/-1;margin:0}
.owner-main .owner-content>.auth-card{max-width:none;width:auto;margin:0}
.owner-main .customer-install-note{padding:14px 18px;border:1px solid #cfe3de;border-radius:12px;background:#eef7f5}
.owner-main .customer-install-note b{display:block}
.owner-main .customer-install-note p{margin:2px 0 0;color:#516870;font-size:14px}
.owner-main .request-list{display:grid;gap:12px}
.owner-main .request-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;background:#fff;border:1px solid var(--line);border-radius:12px}
.owner-main .request-card h3{margin:0;font-size:17px}
.owner-main .request-card header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;width:100%;height:auto;position:static;background:none;border:0;padding:0}
.owner-main .request-card header p{margin:2px 0 0;color:#647c82;font-size:13px}
.owner-main .request-card footer{width:100%;padding-top:10px;border-top:1px solid var(--line);font-size:14px}
.owner-main .muted{color:#647c82}
@media(max-width:900px){.owner-main .owner-content{grid-template-columns:1fr}}
/* After accepting an invitation: what to do next, in order */
.auth-card .next-steps{margin:16px 0 22px;padding-left:22px;display:grid;gap:10px;color:#2b4a54;line-height:1.5}
.auth-card .next-steps strong{color:#16202b}