/* Care365 sign-up: one calm dusk screen, one short form. */
:root {
  --bg: #0a0908;
  --ink: #f1ece4;
  --ink-2: rgba(241,236,228,.74);
  --ink-3: rgba(241,236,228,.48);
  --ink-4: rgba(241,236,228,.3);
  --line: rgba(241,236,228,.1);
  --green: #7ef0b8;
  --warm: rgba(255,196,140,1);
  --err: rgba(255,178,156,.95);
  --edge: clamp(20px, 4.5vw, 72px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.32, 0.72, 0, 1);
  --font: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
::selection { background: #ffa53d; color: #120c05; }
body { min-height: 100vh; min-height: 100svh; position: relative; isolation: isolate; overflow-x: hidden; }

/* the last of the dusk, low on the horizon; and the site's fine grain */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(80% 46% at 50% 108%, rgba(255,142,70,.15), rgba(255,142,70,0) 70%),
    radial-gradient(50% 40% at 82% 8%, rgba(255,205,160,.035), rgba(255,205,160,0) 70%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.top { position: absolute; inset: 0 0 auto 0; padding: max(22px, env(safe-area-inset-top)) var(--edge) 22px; }
.top__logo { display: inline-flex; font-weight: 600; font-size: 17px; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; opacity: .92; transition: opacity .3s var(--ease); }
.top__logo:hover { opacity: 1; }
/* the same mark as the homepage: Mega Solar, with CARE365 and its small amber light underneath */
.top__mark { display: inline-grid; line-height: 1; }
.top__sub { justify-self: end; display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 9.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245, 243, 238, 0.58); }
.top__dot { width: 5px; height: 5px; margin-left: 1px; border-radius: 50%; background: #ffb020; box-shadow: 0 0 8px rgba(255, 176, 32, 0.7); animation: top-breathe 3s ease-in-out infinite; }
@keyframes top-breathe { 0%, 100% { opacity: 1; box-shadow: 0 0 9px rgba(255, 176, 32, 0.75); } 50% { opacity: 0.45; box-shadow: 0 0 3px rgba(255, 176, 32, 0.3); } }
@media (prefers-reduced-motion: reduce) { .top__dot { animation: none; } }
.top__logo:focus-visible { outline: 2px solid var(--green); outline-offset: 6px; border-radius: 4px; }

.start {
  min-height: 100vh; min-height: 100svh; display: grid; place-items: center;
  padding: clamp(104px, 16vh, 150px) var(--edge) clamp(64px, 10vh, 120px);
}
.start__col, .done { grid-area: 1 / 1; width: min(460px, 100%); }

.start__h {
  margin: 0; font-weight: 400; letter-spacing: -0.036em; line-height: 1.02;
  font-size: clamp(2.35rem, 9.6vw, 3.6rem); text-wrap: balance;
}
.start__sub { margin: 16px 0 0; font-size: 15px; letter-spacing: -0.005em; color: var(--ink-3); }

/* ---------- the form ---------- */
.form { margin-top: clamp(40px, 6vh, 56px); display: flex; flex-direction: column; }

.f {
  position: relative; height: 66px; border-radius: 16px;
  background: rgba(255,255,255,.032);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255,255,255,.04);
  transition: background-color .5s var(--ease), box-shadow .5s var(--ease);
}
.f + .err + .f { margin-top: 12px; }
.f:hover { background: rgba(255,255,255,.042); }
.f:focus-within, .f.is-focus {
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px rgba(255,210,170,.34), 0 0 0 4px rgba(255,190,130,.05), 0 14px 44px -14px rgba(255,165,95,.32);
}
.f.is-bad { box-shadow: inset 0 0 0 1px rgba(255,160,135,.42); }
.f.is-bad:focus-within, .f.is-bad.is-focus { box-shadow: inset 0 0 0 1px rgba(255,170,145,.55), 0 0 0 4px rgba(255,150,120,.06); }

.f__in {
  all: unset; box-sizing: border-box; display: block; width: 100%; height: 100%;
  padding: 26px 20px 8px; border-radius: inherit;
  font: 400 17px/1.3 var(--font); letter-spacing: -0.006em; color: var(--ink);
  caret-color: var(--warm);
}
.f__in:-webkit-autofill, .f__in:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink); caret-color: var(--warm);
  -webkit-box-shadow: 0 0 0 100px #181512 inset; transition: background-color 9999s;
}
.f__label {
  position: absolute; left: 20px; top: 0; height: 66px; display: flex; align-items: center; pointer-events: none;
  font-size: 17px; letter-spacing: -0.006em; color: var(--ink-3); white-space: nowrap;
  transform-origin: 0 50%; transition: transform .45s var(--ease-io), color .45s var(--ease);
}
.f__in:focus + .f__label, .f__in:not(:placeholder-shown) + .f__label, .f__in:-webkit-autofill + .f__label, .f--card .f__label {
  transform: translateY(-13px) scale(.74); color: var(--ink-3);
}
.f__in:focus + .f__label, .f--card.is-focus .f__label { color: rgba(255,214,178,.82); }
.f.is-bad .f__label { color: rgba(255,178,156,.8); }

/* a faint brightening with each keystroke */
.f__glow { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 0 1px rgba(255,220,185,.5), 0 0 28px -6px rgba(255,190,130,.4); }

.f__card { position: absolute; left: 20px; right: 20px; top: 30px; }

/* bank account (ACH): Stripe's own secure screens open on Start; this row just shows what's connected */
.f__value {
  position: absolute; left: 20px; right: 20px; top: 31px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 17px; line-height: 26px; letter-spacing: -0.006em; color: var(--ink-4); transition: color .45s var(--ease);
}
.f--bank.is-linked .f__value { color: var(--ink); }
.f--bank.is-linked .f__label { color: rgba(126,240,184,.8); }
.hint { margin: 10px 0 0; padding: 0 4px; font-size: 14px; line-height: 1.45; color: var(--ink-3); }
.mandate { margin: 18px 0 0; padding: 0 4px; font-size: 12px; line-height: 1.55; color: var(--ink-4); text-align: center; text-wrap: pretty; }

/* errors: gentle, inline, slide open */
.err {
  margin: 0; padding: 0 4px; font-size: 14px; line-height: 1.45; color: var(--err);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .45s var(--ease-io), opacity .35s var(--ease), padding .45s var(--ease-io);
}
.err.is-on { max-height: 4.5em; opacity: 1; padding-top: 9px; padding-bottom: 2px; }
.err--form { text-align: center; }

/* ---------- agreement ---------- */
.agree { position: relative; display: flex; align-items: center; gap: 14px; margin-top: 26px; padding: 4px 0; cursor: pointer; font-size: 15.5px; color: var(--ink-2); -webkit-tap-highlight-color: transparent; }
.agree__in { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.agree__box {
  flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(241,236,228,.28); background: rgba(255,255,255,.03);
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease), transform .2s var(--ease);
}
.agree__box svg { width: 15px; height: 15px; fill: none; stroke: #14110d; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .45s var(--ease) .05s; }
.agree:hover .agree__box { box-shadow: inset 0 0 0 1px rgba(241,236,228,.45); }
.agree:active .agree__box { transform: scale(.92); }
.agree__in:checked + .agree__box { background: var(--ink); box-shadow: inset 0 0 0 1px var(--ink), 0 0 18px -4px rgba(255,214,170,.45); }
.agree__in:checked + .agree__box svg { stroke-dashoffset: 0; }
.agree__in:focus-visible + .agree__box { outline: 2px solid var(--green); outline-offset: 3px; }
.agree__text a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(241,236,228,.35); text-decoration-thickness: 1px; text-underline-offset: .22em; transition: text-decoration-color .3s var(--ease); }
.agree__text a:hover { text-decoration-color: var(--ink); }
.agree__text a:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 3px; }

/* ---------- the button ---------- */
.go {
  all: unset; box-sizing: border-box; position: relative; margin-top: 24px; width: 100%; height: 62px; border-radius: 999px;
  display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
  font: 500 17px/1 var(--font); letter-spacing: -0.006em; color: #14110d; background: var(--ink);
  box-shadow: 0 12px 34px -14px rgba(255,214,170,.5), inset 0 1px 0 rgba(255,255,255,.65);
  transition: background-color .45s var(--ease), color .45s var(--ease), box-shadow .5s var(--ease), transform .18s var(--ease);
}
.go > * { grid-area: 1 / 1; }
.go:disabled { cursor: default; background: rgba(241,236,228,.09); color: var(--ink-4); box-shadow: inset 0 0 0 1px rgba(241,236,228,.06); }
@media (hover: hover) {
  .go:not(:disabled):hover { background: #fff; box-shadow: 0 18px 46px -14px rgba(255,214,170,.66), inset 0 1px 0 #fff; transform: translateY(-1px); }
}
.go:not(:disabled):active { transform: scale(.985); transition-duration: .1s; }
.go:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.go__label { transition: opacity .3s var(--ease), transform .4s var(--ease); }
.go__busy { display: flex; gap: 6px; opacity: 0; transition: opacity .3s var(--ease); }
.go__busy i { width: 5px; height: 5px; border-radius: 50%; background: #14110d; animation: breathe 1.2s var(--ease-io) infinite; }
.go__busy i:nth-child(2) { animation-delay: .15s; } .go__busy i:nth-child(3) { animation-delay: .3s; }
@keyframes breathe { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.go.is-busy { cursor: progress; }
.go.is-busy .go__label { opacity: 0; transform: translateY(-3px); }
.go.is-busy .go__busy { opacity: 1; }

/* ---------- confirmation ---------- */
.done { position: relative; text-align: center; opacity: 0; transform: translateY(10px); transition: opacity 1.2s var(--ease) .1s, transform 1.4s var(--ease) .1s; }
.done.is-on { opacity: 1; transform: none; }
.done__glow {
  position: absolute; left: 50%; top: 50%; width: 560px; height: 420px; max-width: 140vw; transform: translate(-50%, -54%); z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(126,240,184,.16), rgba(126,240,184,.05) 45%, rgba(126,240,184,0) 72%);
  filter: blur(8px); opacity: 0; transition: opacity 2.2s var(--ease) .35s;
}
.done.is-on .done__glow { opacity: 1; }
.done__h { margin: 0; font-weight: 400; letter-spacing: -0.036em; line-height: 1.04; font-size: clamp(2.35rem, 9.6vw, 3.6rem); text-wrap: balance; outline: none; }
.done__sub { margin: 18px auto 0; max-width: 30ch; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.5; color: var(--ink-2); }

/* ---------- load: a soft fade and rise, a hair apart ---------- */
.js [data-rise] { opacity: 0; transform: translateY(14px); }
.js.is-ready [data-rise] { opacity: 1; transform: none; }
/* only while arriving; afterwards each element keeps its own quick hover and press timings */
.js.is-ready:not(.is-settled) [data-rise] {
  transition: opacity 1s var(--ease), transform 1.2s var(--ease), background-color .5s var(--ease), box-shadow .5s var(--ease), color .45s var(--ease);
  transition-delay: calc(var(--i) * 65ms + 60ms), calc(var(--i) * 65ms + 60ms), 0s, 0s, 0s;
}

@media (min-width: 821px) {
  .f { height: 70px; }
  .f__label { height: 70px; }
  .f__in { padding-top: 28px; }
  .f__in:focus + .f__label, .f__in:not(:placeholder-shown) + .f__label, .f__in:-webkit-autofill + .f__label, .f--card .f__label { transform: translateY(-14px) scale(.74); }
  .f__card { top: 32px; }
  .f__value { top: 33px; }
}

/* reduced motion: no animation at all */
.is-still *, .is-still *::before, .is-still *::after { transition: none !important; animation: none !important; }
.is-still [data-rise] { opacity: 1 !important; transform: none !important; }
.is-still .go__busy i { opacity: .7; }