:root{
  --bg:#ffffff;
  --bg2:#f7fbff;
  --surface:rgba(255,255,255,.92);
  --line:rgba(0,0,0,.12);
  --text:#000000;
    --accent:#38bdf8;
  --accent2:#0ea5e9;
  --accent-soft:#0284c7;
  --accent-deep:#0369a1;
  --shadow:0 20px 60px rgba(0,0,0,.14);
  --radius:28px;
  --topbar-height:76px;
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  height:-webkit-fill-available;
  min-height:100%;
}

body{
  min-height:100vh;
  min-height:-webkit-fill-available;

  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  color:var(--text);

  background:
    radial-gradient(circle at top left, rgba(56,189,248,.14), transparent 28%),
    radial-gradient(circle at top right, rgba(14,165,233,.10), transparent 26%),
    radial-gradient(circle at bottom center, rgba(125,211,252,.10), transparent 28%),
    linear-gradient(180deg,var(--bg),var(--bg2));

  overflow-x:hidden;
  overflow-y:auto;
}

a{
  color:inherit;
  text-decoration:none;
}


/* ==========================================================================
   Header
   ========================================================================== */

.portal-header-brand{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:1000;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:20px 32px;

  min-height:76px;

  border-bottom:1px solid #e5e7eb;

  background:rgba(255,255,255,.96);

  backdrop-filter:blur(12px);
}

.portal-logo-text,
.portal-home-link{
  font-size:16px;
  font-weight:800;
  letter-spacing:-.2px;

  color:#000000;

  pointer-events:auto;

  text-decoration:none;
}

.portal-home-link{
  color:var(--accent-soft);

  text-decoration:underline;

  display:inline-flex;

  align-items:center;

  gap:8px;
}

.portal-home-link::before{
  content:"←";

  font-size:14px;

  line-height:1;

  position:relative;

  top:-1px;
}

.portal-home-link:hover,
.portal-logo-text:hover,
.form-intro p a.link:hover,
.form-footer-switch a:hover{
  color:#0ea5e9;
}


/* ==========================================================================
   Main Layout
   ========================================================================== */

.portal-container{
  min-height:100vh;
  min-height:-webkit-fill-available;

  position:relative;

  display:grid;

  grid-template-columns:1.1fr .9fr;

  align-items:stretch;

  padding-top:var(--topbar-height);
}


/* ==========================================================================
   Background Photos
   ========================================================================== */

.hero-bg{
  position:absolute;

  inset:0;

  overflow:hidden;

  pointer-events:none;

  z-index:1;
}

.bg-photo{
  position:absolute;

  width:220px;

  height:220px;

  border-radius:30px;

  background-size:cover;

  background-position:center;

  box-shadow:0 25px 70px rgba(0,0,0,.18);

  border:1px solid rgba(255,255,255,.82);

  opacity:.82;

  animation:floaty 7s ease-in-out infinite;

  transform:translate3d(0,0,0);

  filter:saturate(1.08) contrast(1.02);
}

.bg-photo::after{
  content:"";

  position:absolute;

  inset:0;

  border-radius:30px;

  background:linear-gradient(
    180deg,
    rgba(255,255,255,.02),
    rgba(0,0,0,.12)
  );
}

.p1{
  top:8%;
  left:6%;

  background-image:url('https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?auto=format&fit=crop&w=900&q=80');

  animation-delay:0s;
}

.p2{
  top:18%;
  right:10%;

  background-image:url('https://images.unsplash.com/photo-1483985988355-763728e1935b?auto=format&fit=crop&w=900&q=80');

  animation-delay:1.2s;
}

.p3{
  bottom:12%;
  left:8%;

  background-image:url('https://images.unsplash.com/photo-1529139574466-a303027c1d8b?auto=format&fit=crop&w=900&q=80');

  animation-delay:2.1s;
}

.p4{
  bottom:18%;
  right:12%;

  background-image:url('https://images.unsplash.com/photo-1514361892635-eae0f6ddc2f7?auto=format&fit=crop&w=900&q=80');

  animation-delay:1.7s;
}

.p5{
  top:42%;
  left:22%;

  background-image:url('https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=900&q=80');

  animation-delay:.8s;

  width:180px;

  height:180px;
}

.p6{
  top:48%;
  right:22%;

  background-image:url('https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=900&q=80');

  animation-delay:2.6s;

  width:180px;

  height:180px;
}

.bg-dim{
  position:absolute;

  inset:0;

  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(56,189,248,.10),
      transparent 34%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(14,165,233,.08),
      transparent 36%
    );
}


/* ==========================================================================
   Hero
   ========================================================================== */

.signup-hero{
  position:relative;

  z-index:2;

  display:flex;

  align-items:center;

  justify-content:flex-start;

  min-height:calc(100vh - var(--topbar-height));

  padding:40px 32px 40px;

  grid-column:1;
}

.hero-copy{
  max-width:560px;

  background:rgba(255,255,255,.92);

  border:1px solid #bae6fd;

  backdrop-filter:blur(10px);

  border-radius:34px;

  padding:30px;

  box-shadow:var(--shadow);
}

.hero-copy .pill,
.form-intro .pill{
  display:inline-flex;

  padding:8px 12px;

  border-radius:999px;

  border:1px solid #bae6fd;

  background:#eef8ff;

  color:#0284c7;

  font-size:12px;

  font-weight:800;

  letter-spacing:.04em;

  text-transform:uppercase;

  margin-bottom:14px;
}

.hero-copy h1{
  font-size:clamp(2.2rem,5vw,4.3rem);

  line-height:.95;

  letter-spacing:-2px;

  margin-bottom:14px;

  color:#000000;
}

.hero-copy p{
  color:var(--muted);

  font-size:15px;

  line-height:1.7;

  max-width:42ch;
}


/* ==========================================================================
   Form Panel
   ========================================================================== */

.form-panel{
  position:relative;

  z-index:3;

  grid-column:2;

  display:flex;

  align-items:center;

  justify-content:flex-end;

  min-height:calc(100vh - var(--topbar-height));

  padding:40px 32px 40px 16px;
}

.form-card{
  width:100%;

  max-width:520px;

  background:rgba(255,255,255,.96);

  border:1px solid #e5e7eb;

  backdrop-filter:blur(18px);

  border-radius:34px;

  box-shadow:var(--shadow);

  padding:30px;
}


/* ==========================================================================
   Form Intro
   ========================================================================== */

.form-intro{
  margin-bottom:22px;
}

.form-intro h2{
  font-size:2rem;

  letter-spacing:-1px;

  line-height:1;

  margin-bottom:12px;

  color:#000000;
}

.form-intro p{
  color:var(--muted);

  line-height:1.6;

  font-size:14px;
}


/* ==========================================================================
   Inputs
   ========================================================================== */

.input-block{
  display:grid;

  gap:8px;

  margin-bottom:16px;
}

.input-block label{
  font-size:13px;

  font-weight:700;

  color:#000000;
}

.input-block input{
  width:100%;

  border-radius:16px;

  border:1px solid #d1d5db;

  background:#ffffff;

  color:#000000;

  padding:14px 16px;

  font-size:15px;

  outline:none;
}

.input-block input::placeholder{
  color:#9ca3af;
}

.input-block input:focus{
  border-color:var(--accent);

  box-shadow:0 0 0 3px rgba(56,189,248,.22);
}


/* ==========================================================================
   Errors
   ========================================================================== */

.error-box{
  color:#dc2626;

  margin:0 0 15px 0;

  font-size:14px;

  line-height:1.5;
}


/* ==========================================================================
   Legal Consent
   ========================================================================== */

.legal-consent{
  display:flex;

  align-items:flex-start;

  gap:10px;

  margin-top:14px;

  margin-bottom:8px;
}

.legal-consent input{
  margin-top:4px;

  width:18px;

  height:18px;

  accent-color:var(--accent);

  flex:0 0 auto;
}

.legal-consent label{
  color:#000000;

  font-size:14px;

  line-height:1.5;
}

.legal-consent a{
  color:#0284c7;

  text-decoration:underline;
}

.legal-consent a:hover{
  color:#0ea5e9;
}


/* ==========================================================================
   Sign Up Button
   ========================================================================== */

.submit-action-btn{
  width:100%;

  border:0;

  border-radius:999px;

  background:#38bdf8;

  color:#ffffff;

  font-size:15px;

  font-weight:900;

  padding:15px 20px;

  cursor:pointer;

  margin-top:6px;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease;

  box-shadow:0 12px 30px rgba(56,189,248,.28);
}

.submit-action-btn:hover{
  transform:translateY(-2px);

  background:#0ea5e9;

  box-shadow:0 16px 34px rgba(14,165,233,.34);
}


/* ==========================================================================
   Login Link
   ========================================================================== */

.form-footer-switch{
  text-align:center;

  margin-top:18px;

  color:#000000;

  font-size:14px;
}

.form-footer-switch a{
  color:var(--accent-soft);

  font-weight:800;

  text-decoration:underline;
}


/* ==========================================================================
   Logo
   ========================================================================== */

.portal-logo-image{
  width:32px;

  height:32px;

  object-fit:cover;

  border-radius:50%;

  vertical-align:middle;

  margin-right:8px;
}


/* ==========================================================================
   Animation
   ========================================================================== */

@keyframes floaty{
  0%{
    transform:translateY(0) translateX(0) rotate(0deg) scale(1)
  }

  25%{
    transform:translateY(-14px) translateX(8px) rotate(1deg) scale(1.02)
  }

  50%{
    transform:translateY(-22px) translateX(-6px) rotate(-1deg) scale(1.01)
  }

  75%{
    transform:translateY(-10px) translateX(10px) rotate(1deg) scale(1.02)
  }

  100%{
    transform:translateY(0) translateX(0) rotate(0deg) scale(1)
  }
}

/* ==========================================================================
   Extra Center Photos
   ========================================================================== */



.p7{
  top:22%;
  left:46%;

  width:135px;
  height:135px;

  background-image:url('https://images.unsplash.com/photo-1765372860684-69f0e2524694?auto=format&fit=crop&w=900&q=90');

  background-position:center;
  background-size:cover;

  animation-delay:1.4s;

  opacity:.88;
}


.p8{
  bottom:18%;
  left:48%;

  width:115px;
  height:115px;

  background-image:url('https://images.unsplash.com/photo-1761706280259-5a137f7311fd?auto=format&fit=crop&w=900&q=90');

  background-position:center;
  background-size:cover;

  animation-delay:2.2s;

  opacity:.88;
}


/* ==========================================================================
   Center Connection Dots
   ========================================================================== */

.center-motion{
  position:absolute;

  top:50%;
  left:50%;

  width:150px;
  height:260px;

  transform:translate(-50%,-50%);

  z-index:2;

  pointer-events:none;
}

.motion-dot{
  position:absolute;

  display:block;

  border-radius:50%;

  background:#38bdf8;

  box-shadow:0 0 22px rgba(56,189,248,.38);
}

.dot-1{
  width:10px;
  height:10px;

  top:18px;
  left:28px;

  animation:signupDot1 5s ease-in-out infinite;
}

.dot-2{
  width:14px;
  height:14px;

  top:86px;
  right:22px;

  animation:signupDot2 5.8s ease-in-out infinite;
}

.dot-3{
  width:8px;
  height:8px;

  bottom:72px;
  left:38px;

  animation:signupDot3 4.8s ease-in-out infinite;
}

.dot-4{
  width:12px;
  height:12px;

  bottom:18px;
  right:40px;

  animation:signupDot4 6.2s ease-in-out infinite;
}


@keyframes signupDot1{
  0%,100%{
    transform:translate(0,0);
  }

  50%{
    transform:translate(28px,34px);
  }
}

@keyframes signupDot2{
  0%,100%{
    transform:translate(0,0);
  }

  50%{
    transform:translate(-30px,26px);
  }
}

@keyframes signupDot3{
  0%,100%{
    transform:translate(0,0);
  }

  50%{
    transform:translate(24px,-30px);
  }
}

@keyframes signupDot4{
  0%,100%{
    transform:translate(0,0);
  }

  50%{
    transform:translate(-22px,-26px);
  }
}


/* Keep the extra center elements off smaller layouts */

@media (max-width:1100px){

  .center-motion,
  .p7,
  .p8{
    display:none;
  }
}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:1100px){

  .portal-container{
    grid-template-columns:1fr;
  }

  .signup-hero,
  .form-panel{
    grid-column:1;

    min-height:auto;
  }

  .signup-hero{
    padding:40px 16px 20px;
  }

  .form-panel{
    padding:16px 16px 36px;

    justify-content:center;
  }
}


@media (max-width:900px){

  .bg-photo{
    width:160px;

    height:160px;

    border-radius:24px;
  }

  .p5,
  .p6{
    width:120px;

    height:120px;
  }

  .portal-header-brand{
    padding:18px 24px;

    min-height:76px;
  }

  .hero-copy,
  .form-card{
    padding:22px;
  }
}


@media (max-width:640px){

  .portal-container{
    display:flex;

    flex-direction:column;

    min-height:auto;
  }

  .bg-photo{
    opacity:.48;
  }

  .p5,
  .p6{
    display:none;
  }

  .signup-hero{
    min-height:auto;

    padding:88px 16px 12px;
  }

  .form-panel{
    min-height:auto;

    padding:12px 16px 28px;

    justify-content:center;
  }

  .form-card{
    width:100%;

    max-width:none;
  }

  .hero-copy{
    width:100%;
  }

  .hero-copy p{
    max-width:none;
  }

  .portal-header-brand{
    padding:16px 16px;

    min-height:76px;
  }

  .portal-logo-text,
  .portal-home-link{
    font-size:14px;
  }
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  height:-webkit-fill-available;
  min-height:100%;
}

body{
  min-height:100vh;
  min-height:-webkit-fill-available;

  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  color:var(--text);

  background:
    radial-gradient(circle at top left, rgba(56,189,248,.14), transparent 28%),
    radial-gradient(circle at top right, rgba(14,165,233,.10), transparent 26%),
    radial-gradient(circle at bottom center, rgba(125,211,252,.10), transparent 28%),
    linear-gradient(180deg,var(--bg),var(--bg2));

  overflow-x:hidden;
  overflow-y:auto;
}

a{
  color:inherit;
  text-decoration:none;
}


/* ==========================================================================
   Header
   ========================================================================== */

.portal-header-brand{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:1000;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:20px 32px;

  min-height:76px;

  border-bottom:1px solid #e5e7eb;

  background:rgba(255,255,255,.96);

  backdrop-filter:blur(12px);
}

.portal-logo-text,
.portal-home-link{
  font-size:16px;
  font-weight:800;
  letter-spacing:-.2px;

  color:#000000;

  pointer-events:auto;

  text-decoration:none;
}

.portal-home-link{
  color:var(--accent-soft);

  text-decoration:underline;

  display:inline-flex;

  align-items:center;

  gap:8px;
}

.portal-home-link::before{
  content:"←";

  font-size:14px;

  line-height:1;

  position:relative;

  top:-1px;
}

.portal-home-link:hover,
.portal-logo-text:hover,
.form-intro p a.link:hover,
.form-footer-switch a:hover{
  color:#0ea5e9;
}


/* ==========================================================================
   Main Layout
   ========================================================================== */

.portal-container{
  min-height:100vh;
  min-height:-webkit-fill-available;

  position:relative;

  display:grid;

  grid-template-columns:1.1fr .9fr;

  align-items:stretch;

  padding-top:var(--topbar-height);
}


/* ==========================================================================
   Background Photos
   ========================================================================== */

.hero-bg{
  position:absolute;

  inset:0;

  overflow:hidden;

  pointer-events:none;

  z-index:1;
}

.bg-photo{
  position:absolute;

  width:220px;

  height:220px;

  border-radius:30px;

  background-size:cover;

  background-position:center;

  box-shadow:0 25px 70px rgba(0,0,0,.18);

  border:1px solid rgba(255,255,255,.82);

  opacity:.82;

  animation:floaty 7s ease-in-out infinite;

  transform:translate3d(0,0,0);

  filter:saturate(1.08) contrast(1.02);
}

.bg-photo::after{
  content:"";

  position:absolute;

  inset:0;

  border-radius:30px;

  background:linear-gradient(
    180deg,
    rgba(255,255,255,.02),
    rgba(0,0,0,.12)
  );
}

.p1{
  top:8%;
  left:6%;

  background-image:url('https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?auto=format&fit=crop&w=900&q=80');

  animation-delay:0s;
}

.p2{
  top:18%;
  right:10%;

  background-image:url('https://images.unsplash.com/photo-1483985988355-763728e1935b?auto=format&fit=crop&w=900&q=80');

  animation-delay:1.2s;
}

.p3{
  bottom:12%;
  left:8%;

  background-image:url('https://images.unsplash.com/photo-1529139574466-a303027c1d8b?auto=format&fit=crop&w=900&q=80');

  animation-delay:2.1s;
}

.p4{
  bottom:18%;
  right:12%;

  background-image:url('https://images.unsplash.com/photo-1514361892635-eae0f6ddc2f7?auto=format&fit=crop&w=900&q=80');

  animation-delay:1.7s;
}

.p5{
  top:42%;
  left:22%;

  background-image:url('https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=900&q=80');

  animation-delay:.8s;

  width:180px;

  height:180px;
}

.p6{
  top:48%;
  right:22%;

  background-image:url('https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=900&q=80');

  animation-delay:2.6s;

  width:180px;

  height:180px;
}

.bg-dim{
  position:absolute;

  inset:0;

  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(56,189,248,.10),
      transparent 34%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(14,165,233,.08),
      transparent 36%
    );
}


/* ==========================================================================
   Hero
   ========================================================================== */

.signup-hero{
  position:relative;

  z-index:2;

  display:flex;

  align-items:center;

  justify-content:flex-start;

  min-height:calc(100vh - var(--topbar-height));

  padding:40px 32px 40px;

  grid-column:1;
}

.hero-copy{
  max-width:560px;

  background:rgba(255,255,255,.92);

  border:1px solid #bae6fd;

  backdrop-filter:blur(10px);

  border-radius:34px;

  padding:30px;

  box-shadow:var(--shadow);
}

.hero-copy .pill,
.form-intro .pill{
  display:inline-flex;

  padding:8px 12px;

  border-radius:999px;

  border:1px solid #bae6fd;

  background:#eef8ff;

  color:#0284c7;

  font-size:12px;

  font-weight:800;

  letter-spacing:.04em;

  text-transform:uppercase;

  margin-bottom:14px;
}

.hero-copy h1{
  font-size:clamp(2.2rem,5vw,4.3rem);

  line-height:.95;

  letter-spacing:-2px;

  margin-bottom:14px;

  color:#000000;
}

.hero-copy p{
  color:var(--muted);

  font-size:15px;

  line-height:1.7;

  max-width:42ch;
}


/* ==========================================================================
   Form Panel
   ========================================================================== */

.form-panel{
  position:relative;

  z-index:3;

  grid-column:2;

  display:flex;

  align-items:center;

  justify-content:flex-end;

  min-height:calc(100vh - var(--topbar-height));

  padding:40px 32px 40px 16px;
}

.form-card{
  width:100%;

  max-width:520px;

  background:rgba(255,255,255,.96);

  border:1px solid #e5e7eb;

  backdrop-filter:blur(18px);

  border-radius:34px;

  box-shadow:var(--shadow);

  padding:30px;
}


/* ==========================================================================
   Form Intro
   ========================================================================== */

.form-intro{
  margin-bottom:22px;
}

.form-intro h2{
  font-size:2rem;

  letter-spacing:-1px;

  line-height:1;

  margin-bottom:12px;

  color:#000000;
}

.form-intro p{
  color:var(--muted);

  line-height:1.6;

  font-size:14px;
}


/* ==========================================================================
   Inputs
   ========================================================================== */

.input-block{
  display:grid;

  gap:8px;

  margin-bottom:16px;
}

.input-block label{
  font-size:13px;

  font-weight:700;

  color:#000000;
}

.input-block input{
  width:100%;

  border-radius:16px;

  border:1px solid #d1d5db;

  background:#ffffff;

  color:#000000;

  padding:14px 16px;

  font-size:15px;

  outline:none;
}

.input-block input::placeholder{
  color:#000000;
  opacity:.65;
}

.input-block input:focus{
  border-color:var(--accent);

  box-shadow:0 0 0 3px rgba(56,189,248,.22);
}


/* ==========================================================================
   Errors
   ========================================================================== */

.error-box{
  color:#dc2626;

  margin:0 0 15px 0;

  font-size:14px;

  line-height:1.5;
}


/* ==========================================================================
   Legal Consent
   ========================================================================== */

.legal-consent{
  display:flex;

  align-items:flex-start;

  gap:10px;

  margin-top:14px;

  margin-bottom:8px;
}

.legal-consent input{
  margin-top:4px;

  width:18px;

  height:18px;

  accent-color:var(--accent);

  flex:0 0 auto;
}

.legal-consent label{
  color:#000000;

  font-size:14px;

  line-height:1.5;
}

.legal-consent a{
  color:#0284c7;

  text-decoration:underline;
}

.legal-consent a:hover{
  color:#0ea5e9;
}


/* ==========================================================================
   Sign Up Button
   ========================================================================== */

.submit-action-btn{
  width:100%;

  border:0;

  border-radius:999px;

  background:#38bdf8;

  color:#ffffff;

  font-size:15px;

  font-weight:900;

  padding:15px 20px;

  cursor:pointer;

  margin-top:6px;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease;

  box-shadow:0 12px 30px rgba(56,189,248,.28);
}

.submit-action-btn:hover{
  transform:translateY(-2px);

  background:#0ea5e9;

  box-shadow:0 16px 34px rgba(14,165,233,.34);
}


/* ==========================================================================
   Login Link
   ========================================================================== */

.form-footer-switch{
  text-align:center;

  margin-top:18px;

  color:#000000;

  font-size:14px;
}

.form-footer-switch a{
  color:var(--accent-soft);

  font-weight:800;

  text-decoration:underline;
}


/* ==========================================================================
   Logo
   ========================================================================== */

.portal-logo-image{
  width:32px;

  height:32px;

  object-fit:cover;

  border-radius:50%;

  vertical-align:middle;

  margin-right:8px;
}


/* ==========================================================================
   Animation
   ========================================================================== */

@keyframes floaty{
  0%{
    transform:translateY(0) translateX(0) rotate(0deg) scale(1)
  }

  25%{
    transform:translateY(-14px) translateX(8px) rotate(1deg) scale(1.02)
  }

  50%{
    transform:translateY(-22px) translateX(-6px) rotate(-1deg) scale(1.01)
  }

  75%{
    transform:translateY(-10px) translateX(10px) rotate(1deg) scale(1.02)
  }

  100%{
    transform:translateY(0) translateX(0) rotate(0deg) scale(1)
  }
}

/* ==========================================================================
   Extra Center Photos
   ========================================================================== */



.p7{
  top:22%;
  left:46%;

  width:135px;
  height:135px;

  background-image:url('https://images.unsplash.com/photo-1765372860684-69f0e2524694?auto=format&fit=crop&w=900&q=90');

  background-position:center;
  background-size:cover;

  animation-delay:1.4s;

  opacity:.88;
}


.p8{
  bottom:18%;
  left:48%;

  width:115px;
  height:115px;

  background-image:url('https://images.unsplash.com/photo-1761706280259-5a137f7311fd?auto=format&fit=crop&w=900&q=90');

  background-position:center;
  background-size:cover;

  animation-delay:2.2s;

  opacity:.88;
}


/* ==========================================================================
   Center Connection Dots
   ========================================================================== */

.center-motion{
  position:absolute;

  top:50%;
  left:50%;

  width:150px;
  height:260px;

  transform:translate(-50%,-50%);

  z-index:2;

  pointer-events:none;
}

.motion-dot{
  position:absolute;

  display:block;

  border-radius:50%;

  background:#38bdf8;

  box-shadow:0 0 22px rgba(56,189,248,.38);
}

.dot-1{
  width:10px;
  height:10px;

  top:18px;
  left:28px;

  animation:signupDot1 5s ease-in-out infinite;
}

.dot-2{
  width:14px;
  height:14px;

  top:86px;
  right:22px;

  animation:signupDot2 5.8s ease-in-out infinite;
}

.dot-3{
  width:8px;
  height:8px;

  bottom:72px;
  left:38px;

  animation:signupDot3 4.8s ease-in-out infinite;
}

.dot-4{
  width:12px;
  height:12px;

  bottom:18px;
  right:40px;

  animation:signupDot4 6.2s ease-in-out infinite;
}


@keyframes signupDot1{
  0%,100%{
    transform:translate(0,0);
  }

  50%{
    transform:translate(28px,34px);
  }
}

@keyframes signupDot2{
  0%,100%{
    transform:translate(0,0);
  }

  50%{
    transform:translate(-30px,26px);
  }
}

@keyframes signupDot3{
  0%,100%{
    transform:translate(0,0);
  }

  50%{
    transform:translate(24px,-30px);
  }
}

@keyframes signupDot4{
  0%,100%{
    transform:translate(0,0);
  }

  50%{
    transform:translate(-22px,-26px);
  }
}


/* Keep the extra center elements off smaller layouts */

@media (max-width:1100px){

  .center-motion,
  .p7,
  .p8{
    display:none;
  }
}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:1100px){

  .portal-container{
    grid-template-columns:1fr;
  }

  .signup-hero,
  .form-panel{
    grid-column:1;

    min-height:auto;
  }

  .signup-hero{
    padding:40px 16px 20px;
  }

  .form-panel{
    padding:16px 16px 36px;

    justify-content:center;
  }
}


@media (max-width:900px){

  .bg-photo{
    width:160px;

    height:160px;

    border-radius:24px;
  }

  .p5,
  .p6{
    width:120px;

    height:120px;
  }

  .portal-header-brand{
    padding:18px 24px;

    min-height:76px;
  }

  .hero-copy,
  .form-card{
    padding:22px;
  }
}


@media (max-width:640px){

  .portal-container{
    display:flex;

    flex-direction:column;

    min-height:auto;
  }

  .bg-photo{
    opacity:.48;
  }

  .p5,
  .p6{
    display:none;
  }

  .signup-hero{
    min-height:auto;

    padding:88px 16px 12px;
  }

  .form-panel{
    min-height:auto;

    padding:12px 16px 28px;

    justify-content:center;
  }

  .form-card{
    width:100%;

    max-width:none;
  }

  .hero-copy{
    width:100%;
  }

  .hero-copy p{
    max-width:none;
  }

  .portal-header-brand{
    padding:16px 16px;

    min-height:76px;
  }

  .portal-logo-text,
  .portal-home-link{
    font-size:14px;
  }
}