/* The product's own pages (body.site): the front page, log in, the setup link, Log in as…, privacy.
   A coral band across the top (the white logo, a wave at its foot); the login pages use a taller band
   (.site-hero, with the whole logo and its POWER - LIGHTING - HVAC line) that the white card sits over. The card itself (.auth-card)
   lives in people.css because the password and unlock pages inside the app use it too.
   These pages are always light. Old-phone rules as app.css: no grid, no flex gap, no inset/clamp. */
body.site { background: #eef1f6; min-height: 100vh; }

/* -- the coral band -- */
body.site .site-top { display: block; max-width: none; margin: 0; padding: 0; padding-top: env(safe-area-inset-top); position: relative; color: #fff;
  background-color: #1b5680; background-image: linear-gradient(115deg, #154a70 0%, #1b5680 55%, #2a72a6 100%); }
body.site .site-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 34px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 26C220 2 420 50 690 30C960 10 1200 0 1440 22V60H0z' fill='%23ffffff' fill-opacity='.08'/%3E%3Cpath d='M0 40C260 16 470 62 760 42C1010 26 1240 22 1440 38V60H0z' fill='%23eef1f6'/%3E%3C/svg%3E") no-repeat left bottom;
  background-size: 100% 100%; }
.site-top-in { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between;
  max-width: 1100px; margin: 0 auto; padding: 1rem 1rem 2.6rem; }
body.site .site-top .logo { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; color: #fff; text-decoration: none;
  font-weight: 700; font-size: 1.02rem; letter-spacing: .12em; text-transform: uppercase; min-width: 0; }
body.site .site-top .logo .logo-img { display: block; height: 46px; width: auto; }
body.site .site-top .site-login { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
body.site .site-top .site-login:hover { background: rgba(255, 255, 255, .12); }

/* the taller band behind the login card: the whole logo centred above the card */
body.site .site-hero .site-top-in { -webkit-justify-content: center; justify-content: center; padding: 2.2rem 1rem 160px; }
body.site .site-hero .logo { font-size: 1.25rem; letter-spacing: .14em; }
body.site .site-hero .logo .logo-img { height: 132px; }
body.site .site-hero::after { height: 64px; }
body.site .main.auth { position: relative; z-index: 1; margin-top: -120px; padding-top: 0; }
@media (max-width: 599px) {
  body.site .site-hero .site-top-in { padding: 1.3rem 1rem 126px; }
  body.site .site-hero .logo { font-size: 1.08rem; }
  body.site .site-hero .logo .logo-img { height: 104px; }
  body.site .site-hero::after { height: 44px; }
  body.site .main.auth { margin-top: -98px; }
}

body.site .auth-card { box-shadow: 0 2px 6px rgba(16, 32, 64, .06), 0 14px 36px rgba(16, 32, 64, .13); }

/* -- the front page and privacy -- */
.front-card p { color: #4a5568; }
.site-doc { max-width: 760px; margin: .5rem auto 1.5rem; padding: 1.8rem 2rem; }
.site-doc h1 { margin-bottom: .2rem; }
.site-doc > .cap { margin: 0 0 1.2rem; }
.site-doc h2 { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid #e3e8ef; }
.site-doc ul { padding-left: 1.2rem; }
.site-doc li { margin: .35rem 0; }
@media (max-width: 599px) { .site-doc { padding: 1.3rem 1.15rem; } }

body.site .site-foot { padding: 1.4rem 1rem 2rem; }
body.site .site-foot p { margin: .25rem 0; }
body.site .site-foot a { color: #4a5568; }